不錯的教程--CSSDIV教程范本

《不錯的教程--CSSDIV教程范本》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第五章樣式表統(tǒng)一網(wǎng)站風(fēng)格、制作基本特效主要內(nèi)容一、樣式表(CSS)的基本概念二、CSS與HTML文檔的結(jié)合方法三、CSS屬性的理解與應(yīng)用四、CSS樣式的單位五、CSS樣式在網(wǎng)頁中的應(yīng)用六、CSS的高級應(yīng)用2?CSS樣式表?一、CSS的基本概念1、編寫CSS樣式的方法使用CSS編輯器如Dreamweaver、Frontpage等都會自帶CSS編輯器。使用超文本編輯器如Dreamweaver、Frontpage等超文本編輯器均可編輯樣式表；記事本3?CSS樣式表?一、CSS的基本概念2、基本語法選擇符{屬性

2、:值}選擇符{屬性1:值1;屬性2:值2;……}單一選擇符的復(fù)合樣式聲明應(yīng)該用“;”隔開，為便于閱讀也可以分行寫。幾乎所有的HTML標(biāo)記符形式都可以作為選擇符。H1{font-size:x-large;color:red}H2{font-size:large;color:blue}5-1.htmH1{font-size:x-large;color:red}H2{font-size

3、:large;color:blue}4?CSS樣式表?一、CSS的基本概念3、CSS樣式的組合、繼承和關(guān)聯(lián)性樣式的組合：把具有相同聲明定義的選擇符組合在一起，并用逗號隔開。－例如：段落元素p、單元格元素td和類c1可以使用相同樣式：p,td,.c1{font-size:12pt;font-family:黑體;color:red}5-2.htm5?CSS樣式表?一、CSS的基本概念樣式的繼承：若子元素未定義，則它將繼承上級元素的樣式的定義。但存在少數(shù)屬性不能繼承，見P119。5-3.htm6?CSS樣式表?一、CSS的基本概念樣式表的關(guān)聯(lián)性：樣式表的關(guān)聯(lián)性指在某些樣式定義中，可以定義某樣式僅在某個特定元素范圍內(nèi)才有效。。例如：pb{font-size:12pt;font-family:黑體;color:red}b元素僅在p

5、元素作用范圍內(nèi)會套用上述的樣式設(shè)定。而在其他地方不具有這些屬性。5-4.htm7?CSS樣式表?一、CSS的基本概念4、注釋CSS文字的注釋形式與C語言類似。p{font-size:12pt}/*P標(biāo)簽的樣式定義*/8?CSS樣式表?一、CSS的基本概念5、選擇符樣式表的基本語法形式：selector{property1:value1;property2:value2;…}需要應(yīng)用的樣式的內(nèi)容樣式的屬性樣式的屬性的值Select的五種合法的類別：HTML標(biāo)記符、用戶定義的類Class、用戶定義的ID、虛

6、類和虛元素P1199?CSS樣式表?選擇符的類別HTML標(biāo)記符應(yīng)用比較多，注意繼承性、組合性和關(guān)聯(lián)性（P119）的應(yīng)用。用戶定義的類選擇符可以使用任何名稱命名類。里所有的元素都可以定義“類”。語法如下：selector.classname{property1:value1;property2:value2;…}.classname{property1:value1;property2:value2;…}例5-5.htm1、兩種定義形式的區(qū)別？2、在標(biāo)簽中使用類選擇符樣式的使用方式如何？10?

7、CSS樣式表?選擇符的類別ID選擇符應(yīng)用的形式基本與類選擇符類似，定義時用“#”替代”.”。因此應(yīng)用時一般選取其中的一種。見P120例子。虛類和虛元素在html的頁面元素中沒有這種屬性，故稱其為虛類，僅在IE5.0以上的瀏覽器版本才支持虛類選擇符。語法如下：頁面元素名：元素虛屬性名{樣式表內(nèi)容}11?CSS樣式表?a:link{color:#000000}a:visited{color:#cccccc}a:hover{color:#000000;font-style:italic}a:active{co

8、lor:#aaaaaa}:link{color:#000000}:visited{color:#cccccc}:hover{color:#000000;font-style:italic}:active{color:#aaaaaa}例5-6.htm12?CSS樣式表?二、CSS與HTML文檔的結(jié)合方法HTML與樣式表有多種結(jié)合方法內(nèi)聯(lián)樣式：在標(biāo)記符內(nèi)定義外聯(lián)樣式使用標(biāo)記符鏈接到外部的樣式文件使用CSS的@import