資源描述：
《網(wǎng)頁設(shè)計(jì)之CSS層疊樣式表》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、第4講CSS層疊樣式表內(nèi)容提要4.1CSS的基本概念4.2如何使用DreamweaverCS3建立CSS4.3CSS濾鏡4.1CSS的基本概念CSS（CascadingStyleSheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。優(yōu)點(diǎn)表現(xiàn)和內(nèi)容相分離提高頁面瀏覽速度效率高、易于維護(hù)和改版4.1CSS的基本概念4.1.1樣式和規(guī)則4.1.2層疊和順序4.1.1樣式和規(guī)則CSS樣式選擇符（selector）屬性（properties）屬性值（value）格式：選擇符{屬性:值}
2、選擇符{屬性1:值1;屬性2:值2}基本格式：復(fù)合樣式：4.1.1樣式和規(guī)則（1）單個(gè)“HTML標(biāo)簽”作為選擇符單個(gè)“HTML標(biāo)簽”：body、table、p等等例：body{color:black}body是指頁面主體部分color是控制文字顏色的屬性black是顏色的值效果：頁面主體（body）中的文字為黑色。4.1.1樣式和規(guī)則屬性值由多個(gè)單詞組成，必須在值上加引號(hào)。例1：p{font-family:"sansserif"}效果：定義了段落字體為sansserif需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，注意使用分號(hào)將所
3、有的屬性和值分開。例2：p{text-align:center;color:red}效果：定義了段落居中排列，并且段落中的文字為紅色4.1.1樣式和規(guī)則為了使所定義的樣式表易讀，可以采用分行的書寫格式。效果：段落排列居中，段落中文字為黑色，字體是arial例3：p{text-align:center;color:black;font-family:arial}4.1.1樣式和規(guī)則（2）選擇符組把具有相同屬性和值的選擇符組合起來書寫，用逗號(hào)將選擇符分開，以減少重復(fù)定義。例：h1,h2,h3,h4,h5,h4{color
4、:green}效果：組里包括所有的標(biāo)題元素，每個(gè)標(biāo)題元素的文字都為綠色。p,table{font-size:9pt}p{font-size:9pt}table{font-size:9pt}效果：段落和表格里的文字尺寸為9號(hào)字。例2：4.1.1樣式和規(guī)則（3）類選擇符把相同的元素分類定義不同的樣式，定義類選擇符時(shí)，在自定類的名稱前面加一個(gè)點(diǎn)號(hào)。類名為英文單詞或以英文開頭與數(shù)字的組合例1：定義兩個(gè)不同的段落，一個(gè)段落向右對(duì)齊，一個(gè)居中，可先為段落定義兩個(gè)類。p.right{text-align:right}p.cente
5、r{text-align:center}應(yīng)用在不同的段落里，在HTML標(biāo)簽里加入class類參數(shù)：這個(gè)段落向右對(duì)齊的
這個(gè)段落是居中排列的4.1.1樣式和規(guī)則類選擇符的另一種用法，在選擇符中省略HTML標(biāo)簽名，這樣可以把幾個(gè)不同的元素定義成相同的樣式。例2：.center{text-align:center}效果：定義了.center的類選擇符，其表示文字居中排列。這個(gè)標(biāo)題是居中排列的6、ass="center">這個(gè)段落也是居中排列的
可應(yīng)用到任何元素上。如：使h1元素（標(biāo)題1）和p元素（段落）都?xì)w為“center”類，于是這兩個(gè)元素的樣式都可以隨著類選擇符“.center”而定：4.1.1樣式和規(guī)則（4）ID擇符ID選擇符用來對(duì)這個(gè)單一元素定義單獨(dú)的樣。方法：直接以“#”開頭，使該ID代表的樣式屬性可用于各種網(wǎng)頁元素。#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}例2：效果：7、定義了一條id="intro"的CSS規(guī)則：字體尺寸為默認(rèn)尺寸的110%；粗體；藍(lán)色；背景顏色透明。整個(gè)網(wǎng)頁文檔中的每個(gè)ID名稱必須是唯一的，其必須以一個(gè)字母開頭，緊跟字母、識(shí)字或連字符組成。字母限于A-Z和a-z。注：4.1.1樣式和規(guī)則（5）包含選擇符可以單獨(dú)對(duì)元素1里包含的元素2定義樣式表。例：對(duì)表格元素table里包含的鏈接元素a定義樣式表：tablea{font-size:12px}此定義對(duì)表格內(nèi)的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認(rèn)大小。這種方式只對(duì)在元素1里的元素2定義，對(duì)單
8、獨(dú)的元素1或元素2無定義。注：4.1.2層疊和順序（1）內(nèi)聯(lián)樣式（Inlinestyles）在HTML標(biāo)簽內(nèi)使用style屬性定義的，適用于該標(biāo)簽的個(gè)別樣式。
內(nèi)聯(lián)樣式舉例。例1：使用內(nèi)聯(lián)樣式，必須使用Content-St
