CSS布局網(wǎng)頁基礎(chǔ)課件

1、3.1 CSS簡介3.2 在HTML文檔中使用CSS3.3 編寫CSS樣式規(guī)則3.4 樣式的繼承與層疊3.5 CSS盒模型3.6 流式布局與浮動布局3.7 盒子的定位方式3.8網(wǎng)頁布局實(shí)踐1SimplestPage.htm2結(jié)論：HTML定義了網(wǎng)頁的結(jié)構(gòu)CSS決定了瀏覽器如何顯示HTML代碼僅僅HTMLHTML+CSS3行內(nèi)式行內(nèi)式：在HTML標(biāo)簽的style屬性中編寫CSS代碼嵌入式嵌入式：在中編寫CSS代碼鏈接式鏈接式：使用鏈接外部CSS文件 導(dǎo)入式導(dǎo)入式：使用import指令 import mystyle.css; 4CSS文檔由一條或多條CSS規(guī)則組成，規(guī)則擁有特定的格式：56用于設(shè)定

2、HTML文檔中指定標(biāo)簽的顯示樣式8p color:Red; font-size:25px; 給特定的一組CSS代碼取名，然后可以應(yīng)用于多個不同的標(biāo)簽：9 .red_large_text color:Red; font-size:25px; this is a paragraph.北京理工大學(xué)定義一個類別選擇器定義一個類別選擇器在不同元素中應(yīng)用類別選擇器在不同元素中應(yīng)用類別選擇器對于頁面中獨(dú)一無二的元素，如頁腳，可以給其id屬性賦予一個獨(dú)一無二的值10 任何建議，請發(fā)送至 教師郵箱然后可以用ID選擇器給指定ID的元素設(shè)置樣式 #footer font-style:italic; font-siz

3、e:16px; 超鏈接標(biāo)簽支持幾個特殊的CSS樣式類，用于定義超鏈接不同狀態(tài)的樣式，這些樣式類被稱為“偽類（pseudo class）”11Demo: PseudoSelector.htm將前面介紹 的“標(biāo)記選擇器”、“類別選擇器”和“ID選擇器”統(tǒng)稱為“基本選擇器基本選擇器”?！皬?fù)合選擇器”包括：（1）交集選擇器（2）并集選擇器（3）后代選擇器12直接指定特定標(biāo)記中特定類別或ID的樣式。13p.special/* 標(biāo)記.類別選擇器 */color:red;p#special/* id選擇器 */color:green;Demo: IntersectionSelector.htm注意：選擇器字

4、符間不要有空格！一次定義多個標(biāo)簽或類別或ID的樣式14div,.special,#one/* 集體聲明 */text-decoration:underline; /* 下劃線 */注意：以逗號隔開各個選擇器Demo: UnionSelector.htm選擇嵌套在指定元素的內(nèi)部元素的樣式15p spancolor:red;Demo：DescendantSelector.htm注意：以空格分隔選擇器CSS選擇器是編寫樣式表文檔的基礎(chǔ)，一定要熟悉并掌握這六種基本的選擇器樣式，從而為今后網(wǎng)頁設(shè)計(jì)打下基礎(chǔ)。16瀏覽器如何顯示未定義樣式的元素？樣式定義相互沖突時如何決定最終顯示效果？18結(jié)論： 沒有定義沒

5、有定義CSSCSS規(guī)則的規(guī)則的HTMLHTML元素元素從它的父元素中繼承樣式！從它的父元素中繼承樣式！div.fathercolor:blue;/* 顏色 */text-decoration:underline; /* 下劃線 */ 這是父元素內(nèi)的文本，顯示為藍(lán)色加下劃線 這是子元素內(nèi)的文本 使用交集選擇器定義樣式定義兩個嵌套的元素Demo:CSSInherits.htm選擇器定義的規(guī)則相互沖突怎么辦？Demo:CascadingExample.htm19行內(nèi)樣式id樣式類別樣式標(biāo)簽樣式結(jié)論：特殊者勝出!頁面布局的關(guān)鍵CSS強(qiáng)大排版能力的根基2122marginpaddingBox23HTML

6、標(biāo)簽分為兩大類：、等是常見的塊級（block）元素標(biāo)簽、等是常見的行內(nèi)（inline）元素標(biāo)簽每一個塊級元素都定義了一個盒子。1.與沒有特殊的語義，多用于頁面布局與排版，因此是網(wǎng)頁布局設(shè)計(jì)中打交道最多的兩個標(biāo)簽。24Demo:ShowBox.htm25div border-width:6px; border-color:#000000; margin:20px; /*盒子間距*/ padding:5px;/*內(nèi)容與邊界距離*/ background-color:#FFFFCC; border-style:dashed;要點(diǎn)：通過設(shè)定盒子的邊框和線型可以在頁面上清晰地顯示出盒子所占用的頁面區(qū)域。

7、26divborder-color:Red Green;border-width:1px 2px 3px;border-style:dotted dashed solid double;默認(rèn)情況下，瀏覽器新起一行顯示塊元素，而在同一行顯示行內(nèi)元素，這種方式被稱為“標(biāo)準(zhǔn)流式布局”。28Demo:InlineMargin.htm29行內(nèi)元素之間的左右距離行內(nèi)元素之間的左右距離 左元素的右邊距左元素的右邊距+右元素的左邊距右元素的左邊距Demo:BlockMargin.htm30兩塊之間的上下間距兩塊之間的上下間距 max上一個塊元素的下邊距，下一個塊元素的上邊距上一個塊元素的下邊距，下一個塊元素的

8、上邊距默認(rèn)情況下的布局方式Demo:EmbodiedBoxMargin.htm32子塊元素是以父元素為基準(zhǔn)定位的。子塊元素是以父元素為基準(zhǔn)定位的。讓一切“動”起來！盒子擁有一個float屬性，可以設(shè)置為向左或向右浮動Demo: floatleft.htm和SreamLayout.htm要點(diǎn)：float屬性讓盒子浮動起來，自動貼靠于其父元素的左或右邊緣。1.設(shè)置了float屬性的盒子自身寬度由其內(nèi)部保持標(biāo)準(zhǔn)流布局的元素寬度決定。34決定元素的真正位置主要影響網(wǎng)頁布局的是塊元素。塊元素有兩種主要的顯示方式：流式布局與浮動布局流式布局比較簡單：（1）塊元素分行顯示（2）行內(nèi)元素在同一行內(nèi)顯示，一行顯

9、示不下則折行。對于浮動布局，情況就復(fù)雜得多，盒子模型中定義了一個position屬性用于指定元素的布局方式。36position=staticdemo: staticPosition.htm這是默認(rèn)的屬性值，表明盒子中的元素按照標(biāo)準(zhǔn)流方式進(jìn)行定位，“該在哪就在哪”。37position=relativedemo: relativePosition.htm.htm要點(diǎn)：使用相對定位方式的盒子，會相對于它原本的位置有一個偏移，到達(dá)一個新位置。使用相對定位方式的盒子仍在標(biāo)準(zhǔn)流中，因此會影響其后繼元素的定位1.關(guān)鍵：弄清楚以什么為基準(zhǔn)定位38position=absolutedemo: absolut

10、Position_1.htm和absolutPosition_2.htm要點(diǎn)：使用絕對定位的盒子以它“最近”的一個已經(jīng)定已經(jīng)定位位的父元素為基準(zhǔn)進(jìn)行定位，如果沒有這樣的元素，則以瀏覽器窗口為基準(zhǔn)。絕對定位的盒子從標(biāo)準(zhǔn)流中脫離，它們對其后元素的定位沒有影響?！耙呀?jīng)定位”：指position屬性被設(shè)置為除static以外的所有值之一。39position=fixedDemo:fixedPosition.htm要點(diǎn)：1 采用固定定位方式的盒子以瀏覽器窗口為基準(zhǔn)定位。2 采用固定定位方式的盒子脫離了原來的標(biāo)準(zhǔn)流，它的兄弟盒子定位時將其視為“不存在”。3 采用固定定位的盒子不理會父盒子的定位方式。40靈活應(yīng)用所學(xué)知識進(jìn)行實(shí)踐步驟：1 創(chuàng)建四個角的小圖像2 按如下格式定義圓角框邏輯結(jié)構(gòu)42+ 標(biāo)題+ 正文關(guān)鍵：關(guān)鍵：1 塊元素的背景圖像可以設(shè)置放在哪個角塊元素的背景圖像可以設(shè)置放在哪個角2 將