CSS樣式表學(xué)習(xí)手冊(cè)

1、CSS樣式表學(xué) 習(xí) 手 冊(cè)什么是樣式表樣式表又稱為CSS樣式表，CSS是Cascading Style Sheet 的縮寫(xiě)。譯作層疊樣式表單。是用于（增強(qiáng)）控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 樣式表的作用CSS樣式表是一種網(wǎng)頁(yè)內(nèi)容的格式化技術(shù)，用于對(duì)網(wǎng)頁(yè)顯示內(nèi)容進(jìn)行效果裝飾，它可以控制HTML中的幾乎所有標(biāo)記或者對(duì)其進(jìn)行輸出格式的重新設(shè)定，并且CSS可以將所修改的設(shè)定儲(chǔ)存成一個(gè)獨(dú)立的文件，提高其復(fù)用性。CSS不僅可以控制網(wǎng)頁(yè)的輸出格式，還可以控制其他的輸出終端，常見(jiàn)的電視機(jī)，顯示器，投影儀等均可以使用CSS進(jìn)行控制（CSS2具有該功能）。樣式表的定義規(guī)則及其使用規(guī)則C

2、SS樣式表的定義規(guī)則有3種：1. 直接對(duì)HTML文件內(nèi)所使用的標(biāo)簽進(jìn)行樣式修改應(yīng)用范圍：對(duì)某個(gè)具體的標(biāo)簽進(jìn)行臨時(shí)樣式的修改，應(yīng)用于該標(biāo)簽格式：2. 在HTML文件內(nèi)部的文件頭定義處對(duì)標(biāo)簽樣式進(jìn)行總體定義應(yīng)用范圍：對(duì)某個(gè)網(wǎng)頁(yè)中的某種標(biāo)簽進(jìn)行樣式的修改，應(yīng)用于本網(wǎng)頁(yè)內(nèi)格式：標(biāo)簽名1屬性名1:屬性值1;屬性名2:屬性值2;標(biāo)簽名2屬性名1:屬性值1;屬性名2:屬性值2;標(biāo)簽名N屬性名1:屬性值1;屬性名2:屬性值2;3. 將對(duì)標(biāo)簽樣式的重定義制作成獨(dú)立的CSS樣式表文件（*.css）應(yīng)用范圍：定義一個(gè)獨(dú)立的樣式表文件，設(shè)定標(biāo)簽屬性，應(yīng)用于所有使用該文件的HTML文件格式：定義一個(gè)文件類型為css類型

3、的文件標(biāo)簽名1屬性名1:屬性值1;屬性名2:屬性值2;標(biāo)簽名2屬性名1:屬性值1;屬性名2:屬性值2;標(biāo)簽名N屬性名1:屬性值1;屬性名2:屬性值2;CSS樣式表與HTML結(jié)合的三/四種方法： 1. 直接對(duì)HTML文件內(nèi)所使用的標(biāo)簽進(jìn)行樣式修改的無(wú)需再做其他操作，樣式將直接應(yīng)用到被修改的標(biāo)簽中2. 在HTML文件內(nèi)部的文件頭內(nèi)定義的樣式講在使用到該標(biāo)簽時(shí)自動(dòng)應(yīng)用其定義效果，無(wú)需再做其他操作3. 使用獨(dú)立制作的CSS樣式表文件(*.css)，講該樣式定義引入HTML文件的方式有如下兩種:l 在標(biāo)簽內(nèi)使用標(biāo)簽導(dǎo)入外部定義的CSS樣式表文件l 使用CSS 規(guī)則import標(biāo)記來(lái)導(dǎo)入樣式表單；impo

4、rt *.css;樣式表的沖突問(wèn)題由于CSS樣式表的定義規(guī)則不止一種，因此當(dāng)某個(gè)標(biāo)記CSS樣式表的定義出現(xiàn)沖突時(shí)，多種相同屬性的定義將出現(xiàn)沖突問(wèn)題；此外當(dāng)多種定義規(guī)則出現(xiàn)時(shí)，引用效果也講出現(xiàn)沖突，下面列舉出各種沖突的處理規(guī)則定義沖突：1. HTML文件內(nèi)部定義之間出現(xiàn)沖突bodycolor:red;bodycolor:blue;使用時(shí)定義位置靠后的將取代前面定義的屬性，成為最終定義的屬性2. CSS外部定義同一個(gè).css文件內(nèi)定義之間出現(xiàn)沖突（同上）引用沖突：1. HTML文件內(nèi)部定義與CSS外部定義.css文件之間出現(xiàn)沖突bodycolor:#ff00ff;引用時(shí)HTML文件內(nèi)部定義的樣式將

5、取代CSS外部定義文件內(nèi)的樣式2. CSS外部定義的多個(gè).css文件之間出現(xiàn)沖突style1.cssbodycolor:red;style2.cssbodycolor:blue;引用時(shí)：l 若都使用標(biāo)簽導(dǎo)入，則后導(dǎo)入的將取代先導(dǎo)入的，成為最終樣式l 若都使用import語(yǔ)法導(dǎo)入，則后導(dǎo)入的將取代先導(dǎo)入的，成為最終樣式import fail.css;import success.css;l 若使用import語(yǔ)法和標(biāo)簽分別導(dǎo)入，則語(yǔ)法順序定義位置在后面的將取代語(yǔ)法順序定義位置在前面的，成為最終樣式import fail.css;或：import success.css;3. 多個(gè)標(biāo)記定義同一內(nèi)容

6、而引發(fā)的引用沖突l 外層標(biāo)簽與內(nèi)層標(biāo)簽定義沖突時(shí)，內(nèi)層標(biāo)簽樣式將覆蓋外層標(biāo)簽樣式效果pcolor:red;bcolor:blue;紅色藍(lán)色藍(lán)色綠色l 具有樣式的標(biāo)簽嵌套不規(guī)則沖突時(shí)，距離被修飾內(nèi)容進(jìn)的樣式定義其作用pcolor:red;bcolor:blue;紅色藍(lán)色總：具有相同樣式修飾，不同樣式值的標(biāo)簽距離被修飾內(nèi)容近標(biāo)簽的樣式格式起作用4. 當(dāng)CSS對(duì)某個(gè)標(biāo)簽進(jìn)行定義時(shí)，基于HTML默認(rèn)標(biāo)簽使用的值都是默認(rèn)設(shè)定，此時(shí)優(yōu)先使用CSS定義規(guī)則，否則CSS定義就毫無(wú)意義了。選擇符選擇符即進(jìn)行CSS樣式表設(shè)定時(shí)的基礎(chǔ)符號(hào)，用于定義被CSS樣式表修飾的標(biāo)記符號(hào)，共有四種類型，如下：1. 類型選擇符以

7、標(biāo)簽作為選擇符p color:blue; 類型選擇符2. 包含選擇符以被某個(gè)對(duì)象E包含的F作為選擇符p b color:blue; 包含選擇符非包含選擇符非包含選擇符非包含選擇符3. ID選擇符以對(duì)象的唯一標(biāo)識(shí)符的ID作為選擇符#idselect color=red; ID選擇符非ID選擇符4. 類選擇符以對(duì)象的class屬性作為選擇符.class1 color=red; .class2 color=blue; class1類選擇符 class1類選擇符 class2類選擇符 class2類選擇符非類選擇符5. 選擇符分組將同樣的定義應(yīng)用于多個(gè)選擇符，可以將選擇符以逗號(hào)分隔的方式劃分為組p,b

8、,i color:blue; 選擇符分組效果選擇符分組效果選擇符分組效果樣式表屬性列表CSS樣式表通過(guò)設(shè)定不同標(biāo)記的不同屬性值達(dá)到修改外觀效果的目的，因此屬性值即顯的尤為重要，具體設(shè)定參看文件css.chm中的屬性一節(jié)。偽類CSS樣式表中常用的偽類有4種，如下1. :link設(shè)置對(duì)象在未被訪問(wèn)前的樣式表屬性。默認(rèn)值由瀏覽器決定。對(duì)于無(wú)href屬性的對(duì)象，此偽類不發(fā)生作用。例如：a:link font-size: 14pt; text-decoration: underline; color: blue; 2. :hover設(shè)置對(duì)象在其鼠標(biāo)懸停時(shí)的樣式表屬性。 在CSS1中此偽類僅可用于對(duì)象。對(duì)

9、于無(wú)href屬性（特性）的對(duì)象，此偽類不發(fā)生作用。在CSS2中此偽類可以應(yīng)用于任何對(duì)象。 例如：a:hover font-size: 14pt; text-decoration: underline; color: blue; a:hover span color:red; 3. :active設(shè)置對(duì)象在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式表屬性。 在CSS1中此偽類僅可用于對(duì)象。對(duì)于無(wú)href屬性（特性）的對(duì)象，此偽類不發(fā)生作用。在CSS2中此偽類可以應(yīng)用于任何對(duì)象。并且:active狀態(tài)可以和:link以及:visited狀態(tài)同時(shí)發(fā)生。 例如：a:active font-s

10、ize: 14pt; text-decoration: underline; color: blue; 4. :visited設(shè)置對(duì)象在其鏈接地址已被訪問(wèn)過(guò)時(shí)的樣式表屬性。 默認(rèn)值由瀏覽器決定。定義網(wǎng)頁(yè)過(guò)期時(shí)間或用戶清空歷史記錄將影響此偽類的作用。對(duì)于無(wú)href屬性（特性）的a對(duì)象，此偽類不發(fā)生作用。例如：a:visited font-size: 14pt; text-decoration: underline; color: blue; 偽對(duì)象:first-letter語(yǔ)法格式：Selector : first-letter sRules 設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式表屬性。此偽對(duì)象僅作用于

11、塊對(duì)象。內(nèi)聯(lián)對(duì)象要使用該偽對(duì)象，必須先設(shè)定對(duì)象的height或width屬性，或者設(shè)定position屬性為absolute，或者設(shè)定display屬性為block。 在此偽類中配合使用font-size屬性和float屬性可以制作首字下沉效果。 例如：p a:first-letter color: green div:first-letter color:red;font-size:16px;float:left; :first-line 語(yǔ)法格式：Selector : first-line sRules 設(shè)置對(duì)象內(nèi)的第一行的樣式表屬性。此偽對(duì)象僅作用于塊對(duì)象。內(nèi)聯(lián)對(duì)象要使用該偽對(duì)象，必須先

12、設(shè)定對(duì)象的height或width屬性，或者設(shè)定position屬性為absolute，或者設(shè)定display屬性為block。如果未強(qiáng)制指定對(duì)象的width屬性， 首行的內(nèi)容長(zhǎng)度可能不是固定的。例如：p a:first-line color: green div:first-line color:red;font-size:16px; 規(guī)則import語(yǔ)法格式： import url (url)sMedia ; 參數(shù)：url : 使用絕對(duì)或相對(duì)地址指定導(dǎo)入的外部樣式表文件。sMedia : 指定設(shè)備類型。指定導(dǎo)入的外部樣式表及目標(biāo)設(shè)備類型。該規(guī)則必須在樣式表頭部最先聲明。并且其后的分號(hào)是必需

13、的，如果省略了此分號(hào)，外部樣式表將無(wú)法正確導(dǎo)入，并會(huì)生成錯(cuò)誤信息。導(dǎo)入的外部樣式表中的定義將被HTML文本中的同名定義覆蓋。 例如import url(foo.css) screen, print;import print.csspage語(yǔ)法格式： page labelpseudo-class sRules 參數(shù)：label : 頁(yè)標(biāo) pseudo-class : 偽類。sRules : 樣式表定義設(shè)置頁(yè)面容器的版式，方向，邊框等。頁(yè)面容器包括頁(yè)面內(nèi)容區(qū)域和內(nèi)容區(qū)域外圍的邊空補(bǔ)白區(qū)域。例如page thin:first size: 3in 8in media語(yǔ)法格式：media sMedia sRules 參數(shù)： sMedia : 指定設(shè)備名稱。sRules : 樣式表定義指定樣式表規(guī)則用于指定的設(shè)備類型例如/ 設(shè)置顯示器用字體尺寸 media screen BODY font-size:12pt; / 設(shè)置打印機(jī)用字體尺寸 media print import print.css BODY font-size:8pt; 聲明（!important）提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)p color:blue!important 如下：p color:blue!important p color:red; 提升優(yōu)先權(quán)后為藍(lán)色，否則為紅色長(zhǎng)度單位長(zhǎng)度單位簡(jiǎn)介