商務(wù)網(wǎng)頁第13課課件

1、4.1.4 CSS選擇符類型及使用方法標(biāo)簽選擇符、類選擇符、ID選擇符、全局選擇符、組合選擇符、繼承選擇符、偽類選擇符、字符串匹配的屬性選擇符等，其中前三者最為常用1標(biāo)簽選擇符標(biāo)簽選擇符，就是把HTML的標(biāo)簽作為CSS的樣式來定義和描述。在HTML中使用該標(biāo)簽時，自動跟蹤選擇該標(biāo)簽在CSS中定義的顯示樣式。每個HTML標(biāo)簽均可用作標(biāo)簽選擇符，如、等都能作為標(biāo)簽選擇符。定義標(biāo)簽選擇符內(nèi)聯(lián)樣式，直接在標(biāo)簽內(nèi)進(jìn)行聲明，形式為：內(nèi)部樣式、外部樣式，則需要在CSS代碼中，在被定義的標(biāo)簽選擇符后面用花括號“”將聲明括起來。形式為：標(biāo)簽選擇符屬性1:屬性1的值;屬性2:屬性2的值;引用標(biāo)簽選擇符，不需要增加

2、任何代碼，正常編寫HTML代碼即可。在CSS中，屬性和屬性值必須符合CSS規(guī)范。如果聲明的屬性在CSS中沒有，或者某個屬性值不符合該屬性的要求，則該CSS語句不能生效。下面是典型的錯誤語句：上例的錯誤有兩處：第1行的屬性“head-height”是不存在的；第2行的“color”屬性的值“sky-blue”也是不存在的或超出范圍的。（2）類選擇符類選擇符是非常靈活的，是由用戶自己定義的。類選擇符相當(dāng)于自定義顯示樣式。類選擇符中描述的屬性及屬性值同樣必須符合CSS規(guī)范。例如：在一個網(wǎng)頁中，共有3個段落，我們希望每一個段落都有不同的顏色區(qū)分，以強(qiáng)調(diào)網(wǎng)頁的效果。這種情況下，就無法使用標(biāo)簽選擇符進(jìn)行處

3、理，因?yàn)橹挥幸粋€段落標(biāo)簽，無論定義多少次標(biāo)簽的顯示樣式，都應(yīng)按照最后定義的顯示樣式執(zhí)行。所以無法采用選擇符實(shí)現(xiàn)各個段落的不同顯示效果，這個時候就需要采用類選擇符來處理。類選擇符能夠在內(nèi)部樣式和外部樣式中使用，內(nèi)聯(lián)樣式無法使用類選擇符。定義類選擇符，需要使用“.類選擇符名”的方式來實(shí)現(xiàn)，定義方法為：.類選擇符名屬性1:屬性1的值;屬性2:屬性2的值;引用類選擇符，需要使用class=類選擇符名的方式實(shí)現(xiàn)引用，引用方法為：標(biāo)簽實(shí)例類選擇符示例 /* type=“text/css”定義CSS的內(nèi)容為文本類型 */.red /*定義了名稱為“red”的類選擇符 */ color: #FF0000;/*

4、 紅色 */ font-size:16px;/* 文字大小 */.green /*定義了名稱為“green”的類選擇符 */ color: #00FF00;/* 綠色 */ font-size:20px;/* 文字大小 */ 該段落選用red類選擇符后的顯示效果 該段落選用green類選擇符后的顯示效果 文檔標(biāo)題h3也可以選用red類選擇符 很多時候標(biāo)簽選擇符和類選擇符是組合使用的，標(biāo)簽選擇符著重處理“某類標(biāo)簽統(tǒng)一風(fēng)格”方面的事情，而類選擇符在統(tǒng)一風(fēng)格的基礎(chǔ)上，處理個性化的事情。例如：一個網(wǎng)頁共分5個段落，統(tǒng)一要求藍(lán)色字、20px字號，但第三段因?yàn)閮?nèi)容重要，要求顯示為紅色字、25px字號大小。

5、類選擇符與標(biāo)簽選擇符p/* 定義段落標(biāo)簽p選擇符 */ color: #0000FF; font-size:20px;.red/* 定義類選擇符red */ color: #FF0000;/* 紅色 */ font-size:25px; 第一段使用標(biāo)簽選擇符的統(tǒng)一規(guī)則 第二段使用標(biāo)簽選擇符的統(tǒng)一規(guī)則 第三段使用red類選擇符的個性規(guī)則 第四段使用標(biāo)簽選擇符的統(tǒng)一規(guī)則 第五段使用標(biāo)簽選擇符的統(tǒng)一規(guī)則（3）ID選擇符ID選擇符的定義和使用方法跟類選擇符相似，但其只能在HTML中使用一次，因而更具針對性。ID選擇符同樣也只能在內(nèi)部樣式和外部樣式中使用。定義ID選擇符，需要使用“#”，定義方法為#ID

6、選擇符名屬性1:屬性1的值;屬性2:屬性2的值;引用ID選擇符，需要在標(biāo)簽中使用“id=ID選擇符名 ”的形式實(shí)現(xiàn)，設(shè)置方法為標(biāo)簽實(shí)例ID選擇符的優(yōu)點(diǎn)并不突出，但I(xiàn)D選擇符可以被JavaScript腳本引用。ID選擇符示例 /* type=text/css定義CSS的內(nèi)容為文本類型 */#red /* 定義了名稱為“red”的ID選擇符 */ color: #FF0000;/* 紅色 */ font-size:16px;/* 文字大小 */#green /* 定義了名稱為“green”的ID選擇符 */ color: #00FF00;/* 綠色 */ font-size:20px;/* 文字大

7、小 */ 該段落選用ID選擇符red后的顯示效果 該段落選用ID選擇符green后的顯示效果 文檔標(biāo)題h3也可以選用ID選擇符red 4.1.5 CSS中的度量單位在CSS中，度量單位主要有顏色單位、長度單位、時間單位、角度單位和頻率單位5種。其中，顏色單位、長度單位比較常用，下面予以介紹。1顏色單位CSS中的顏色單位與HTML中的顏色單位是一致的，不僅具有英文表達(dá)、十六進(jìn)制值表達(dá)、RGB代碼表達(dá)方式，還增加了“inherit（繼承）”屬性，可以直接繼承父元素的顏色屬性值。在CSS中，各個屬性基本都具有“inherit”屬性，不僅增強(qiáng)了CSS樣式的使用效率，還能保證風(fēng)格一致，簡化代碼，提高效率。2長度單位在CSS中，長度單位比較豐富，主要長度單位表達(dá)形式如表4.1.6 CSS注釋編寫CSS代碼同樣需要養(yǎng)成良好的書寫習(xí)慣。對文檔進(jìn)行注釋是一個好習(xí)慣。CSS中的注釋方法與HTML不同，在CSS代碼體內(nèi)，用“/* 注釋說明 */”對文檔進(jìn)行注釋說明。ID選擇符示例 /* type=text/css定義CSS的內(nèi)容為文本類型 */ #red /* 定義了名稱為“red”的ID選擇符 */ color: #FF0000;/* 紅色 */ font-size:16px;/* 文字大小 */ #green /* 定義了名稱為“green”的ID選擇符