HTML第13章-CSS3的選擇器課件

1、第13章 CSS3的選擇器CSS3概述1CSS的基本選擇器2在HTML中使用CSS的方法3CSS復(fù)合選擇器4CSS3新增的選擇器5使用CSS設(shè)計(jì)網(wǎng)站頁(yè)面613.1 CSS3概述13.1.1 CSS3簡(jiǎn)介1CSS的發(fā)展2瀏覽器對(duì)CSS3的支持 流行的瀏覽器對(duì)CSS都有很好的支持，但不同瀏覽器對(duì)CSS3很多細(xì)節(jié)的處理存在差異。3CSS的編輯器 Dreamweaver CS5、WebStorm、IntelliJ IDEA1996年12月，CSS1規(guī)范1998年5月，CSS2規(guī)范2001年5月，CSS3工作草案CSS3不斷改進(jìn)發(fā)展13.1 CSS3概述13.1.2 CSS的一個(gè)示例示例13-1：使用傳

2、統(tǒng)的HTML設(shè)計(jì)頁(yè)面。13.1 CSS3概述13.1.2 CSS的一個(gè)示例使用CSS改進(jìn)HTML設(shè)計(jì)頁(yè)面。使用CSS有以下幾個(gè)主要優(yōu)點(diǎn)。（1）結(jié)構(gòu)和風(fēng)格分離（2）擴(kuò)充HTML標(biāo)記（3）提高網(wǎng)站維護(hù)效率（4）可以實(shí)現(xiàn)精美的頁(yè)面布局13.2 CSS的基本選擇器 CSS可以認(rèn)為是多個(gè)選擇器組成的集合，每個(gè)選擇器由3個(gè)基本部分組成“選擇器名稱”、“屬性”和“值”，格式定義如下。selector property:value; 13.2 CSS的基本選擇器13.2.1 標(biāo)記選擇器 一個(gè)HTML頁(yè)面由很多不同的標(biāo)記組成，例如、等。CSS標(biāo)記選擇器就用于聲明這些標(biāo)記的CSS樣式。tagName proper

3、ty:value;13.2.2 類選擇器 類選擇器用來(lái)為一系列標(biāo)記定義相同的呈現(xiàn)方式。 .className property:value; 13.2 CSS的基本選擇器13.2.2 類選擇器示例13-3所示為標(biāo)記選擇器和類選擇器的綜合應(yīng)用13.2 CSS的基本選擇器13.2.3 ID選擇器 ID選擇器和類選擇器在設(shè)置格式的功能上類似，都是對(duì)特定屬性的屬性值進(jìn)行設(shè)置。 ID選擇器的一個(gè)重要功能是用做網(wǎng)頁(yè)元素的唯一標(biāo)識(shí)，所以，一個(gè)HTML文件中一個(gè)元素的ID屬性值中惟一的。 定義ID選擇器的語(yǔ)法格式如下。#idName property:value ;13.2 CSS的基本選擇器13.2.3 I

4、D選擇器在定義ID選擇器時(shí)，需要在idName前面加一個(gè)“#”符號(hào)，如下面的示例所示。#font1 font-family:幼圓; color:#00F;類選擇器與ID選擇器主要區(qū)別如下。（1）類選擇器可以給任意數(shù)量的標(biāo)記定義樣式，但I(xiàn)D選擇器在頁(yè)面的標(biāo)記中只能使用一次。（2）ID選擇器比類選擇器具有更高的優(yōu)先級(jí)，即當(dāng)ID選擇器與類選擇器在樣式定義上發(fā)生沖突時(shí)，優(yōu)先使用ID選擇器定義的樣式。13.2 CSS的基本選擇器示例13-4 ID選擇器的應(yīng)用13.3 在HTML中使用CSS的方法13.3.1 行內(nèi)樣式 最簡(jiǎn)單的一種使用方式，直接把CSS代碼添加到HTML的代碼行中，由標(biāo)記支持，代碼示例如

5、下： 13.3.2 嵌入樣式 將樣式定義作為網(wǎng)頁(yè)代碼的一部分，寫(xiě)在HTML文檔的和之間，通過(guò)和標(biāo)記來(lái)聲明。 嵌入的樣式與行內(nèi)樣式有相似的，也有不同，行內(nèi)樣式的作用域只有一行，而嵌入的樣式可以作用于整個(gè)HTML文檔中。13.3 在HTML中使用CSS的方法示例13-5是包含行內(nèi)樣式和嵌入樣式。13.3 在HTML中使用CSS的方法13.3.3 鏈接樣式 鏈接樣式是在HTML中引入CSS使用頻率最高的方法。體現(xiàn)了“頁(yè)面內(nèi)容”和“樣式定義”分離實(shí)現(xiàn)了內(nèi)容描述和CSS代碼的分離網(wǎng)站的前期制作和后期維護(hù)都十分方便。 鏈接樣式先要定義一個(gè)擴(kuò)展名為“.css”的文件（即外部樣式表），該文件包含需要用到的CS

6、S規(guī)則，不包含任何其他的HTML代碼。 鏈接樣式表的方法就是在HTML文件的部分添加代碼，格式如下。 13.3 在HTML中使用CSS的方法鏈接樣式表的一個(gè)示例demo0306.html13.3 在HTML中使用CSS的方法13.3.4 導(dǎo)入樣式導(dǎo)入樣式和鏈接樣式的操作過(guò)程基本相同，都需要一個(gè)單獨(dú)的外部CSS文件，然后再將其導(dǎo)入到HTML文件中，但在語(yǔ)法和運(yùn)行過(guò)程上有所差別。導(dǎo)入樣式是HTML文件初始化時(shí)將外部CSS文件導(dǎo)入到HTML文件內(nèi)，作為文件的一部分，類似于嵌入。導(dǎo)入外部樣式需要在內(nèi)嵌樣式表的標(biāo)記中使用import導(dǎo)入一個(gè)外部的CSS文件，示例代碼如下。 import mystyle.

7、css;13.3 在HTML中使用CSS的方法示例13-7使用導(dǎo)入樣式表完成示例13-6的顯示13.3 在HTML中使用CSS的方法13.3.5 樣式的優(yōu)先級(jí)1行內(nèi)樣式和嵌入樣式比較行內(nèi)樣式的優(yōu)先級(jí)大于嵌入樣式13.3 在HTML中使用CSS的方法2嵌入樣式和鏈接樣式比較嵌入樣式的優(yōu)先級(jí)高于鏈接樣式。13.3 在HTML中使用CSS的方法3鏈接樣式和導(dǎo)入樣式鏈接樣式的優(yōu)先級(jí)高于導(dǎo)入樣式的優(yōu)先級(jí)。通過(guò)前面的例子，CSS樣式表方式的優(yōu)先順序由高到低次依為：行內(nèi)樣式、嵌入樣式、鏈接樣式和導(dǎo)入樣式。13.4 CSS復(fù)合選擇器 復(fù)合選擇器就是兩個(gè)或多個(gè)基本選擇器通過(guò)不同方式組合而成的選擇器，可以實(shí)現(xiàn)更強(qiáng)

8、、更方便的選擇功能，主要有交集選擇器、并集選擇器和后代選擇器等。13.4.1 交集選擇器 交集選擇器是由兩個(gè)選擇器直接連接構(gòu)成的，其結(jié)果是選中兩者各自作用范圍的交集。其中，第一個(gè)必須是標(biāo)記選擇器，第二個(gè)必須是類選擇器或ID選擇器，例如：“h1.class1；p#id1”。交集選擇器的基本語(yǔ)法格式如下。tagName.className property:value;13.4 CSS復(fù)合選擇器示例13-11演示了交集選擇器的作用13.4 CSS復(fù)合選擇器13.4.2 并集選擇器 并集選擇器就是對(duì)多個(gè)選擇器進(jìn)行集體聲明，多個(gè)選擇器之間用“，”隔開(kāi)，每個(gè)選擇器可以是任何類型選擇器。 如果某些選擇器定

9、義的樣式完全相同，或者部分相同，則可以使用并集選擇器。 下面是并集選擇器的語(yǔ)法格式。selector1,selector2, property:value;13.4 CSS復(fù)合選擇器示例13-12演示了并集選擇器的作用13.4 CSS復(fù)合選擇器13.4.3 后代選擇器 在CSS選擇器中，還可以通過(guò)嵌套的方式，對(duì)特殊位置的HTML標(biāo)記進(jìn)行控制。例如，當(dāng)與之間包含標(biāo)記時(shí)，就可以使用后代選擇器定義出現(xiàn)在標(biāo)記中的標(biāo)記的格式。后代選擇器的寫(xiě)法是把外層的標(biāo)記寫(xiě)在前面，內(nèi)層的標(biāo)記寫(xiě)在后面，之間用空格隔開(kāi)。selector1 selector2 property:value; 兩個(gè)選擇器之間用空格隔開(kāi)，并且s

10、elector2是selector1包含的對(duì)象。13.4 CSS復(fù)合選擇器示例13-13演示了后代選擇器的作用13.4 CSS復(fù)合選擇器13.4.4 子選擇器子選擇器語(yǔ)法格式如下：selector1selector213.4 CSS復(fù)合選擇器13.4.5 相鄰選擇器 相鄰選擇器的定義符號(hào)是加號(hào)（+），可以選中緊跟在它后面的一個(gè)兄弟元素（這兩個(gè)元素具有共同的父元素）.13.5 CSS3新增的選擇器13.5.1 屬性選擇器 通過(guò)各種各樣的屬性，可以給元素增加很多附加信息。例如，通過(guò)id屬性，可以區(qū)分不同的元素；通過(guò)class屬性，可以設(shè)置元素的樣式。為了擴(kuò)展屬性選擇器的功能，可以使用、$和*這三個(gè)

11、通配符。表13-1 屬性選擇器及其功能選擇器說(shuō)明att*=value匹配屬性包含特定值的元素。例如，ahref*=lnnu，匹配包含匹配att=value匹配屬性包含以特定值開(kāi)頭的元素。例如，ahref=ftp，匹配頭匹配att$=value匹配屬性包含以特定值結(jié)尾的元素。例如，ahref$=cn，匹配尾匹配att=value匹配屬性等于某特定值的元素。例如，type=text，匹配13.5 CSS3新增的選擇器示例13-16是關(guān)于屬性選擇器的一個(gè)例子13.5 CSS3新增的選擇器13.5.2 偽類選擇器 偽類選擇器區(qū)別于類選擇器，類選擇器是由用戶自行定義，而偽類選擇器是在CSS中已經(jīng)定義好的

12、選擇器。偽類選擇器可以分為結(jié)構(gòu)偽類選擇器和UI元素偽類選擇器2種。1. 基本結(jié)構(gòu)偽類選擇器表13-2 基本結(jié)構(gòu)偽類選擇器選擇器功能:root 匹配文檔的根元素:not 對(duì)某個(gè)結(jié)構(gòu)元素使用樣式，但排除這個(gè)結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素。:empty指定當(dāng)元素內(nèi)容為空白時(shí)使用的樣式。:target對(duì)頁(yè)面中某個(gè)target元素（該元素的id被當(dāng)做頁(yè)面的超鏈接來(lái)使用）指定樣式，該樣式只在用戶點(diǎn)擊了頁(yè)面中的超鏈接，并且跳轉(zhuǎn)到target元素后起作用。13.5 CSS3新增的選擇器13.5.2 偽類選擇器13.5 CSS3新增的選擇器3.UI偽類選擇器表13-4 常用的UI偽類選擇器選擇器功能E:enabled

13、選擇匹配E的所有可用UI元素。注意，在網(wǎng)頁(yè)中， UI元素一般是指包含在form元素內(nèi)的表單元素。例如: input:enabled匹配下面代碼框中的文本框，無(wú)法匹配該片段中的按鈕。 E:disabled選擇匹配E的所有不可用UI元素。注意，在網(wǎng)頁(yè)中，UI元素一般是指包含在form元素的表單元素。例如: input:disabled匹配下面代碼段中的按鈕，但不匹配該片段中的文本框。 E:checked選擇匹配E的所有處于選中狀態(tài)的UI元素。注意，在網(wǎng)頁(yè)中，UI元素一般是指包含在form元素內(nèi)的表單元素。E:read-only用來(lái)指定當(dāng)元素處于只讀狀態(tài)時(shí)的樣式。E:read-write用來(lái)指定當(dāng)元

14、素處于非只讀狀態(tài)時(shí)的樣式。E:hover用來(lái)指定當(dāng)鼠標(biāo)指針移動(dòng)到元素上面時(shí)元素所使用的樣式。E:active用來(lái)指定當(dāng)元素被激活時(shí)使用的樣式。E:focus用來(lái)指定當(dāng)元素處獲得焦點(diǎn)時(shí)使用的樣式。13.5 CSS3新增的選擇器3.UI偽類選擇器13.5 CSS3新增的選擇器示例13-18是超級(jí)鏈接的偽類選擇器的應(yīng)用。13.5 CSS3新增的選擇器示例13-19展示了偽類選擇器:focus和:first-child的功能13.5 CSS3新增的選擇器13.5.3 偽元素選擇器1:first-letter和:first-line:first-letter用于選中元素內(nèi)容的首字符。:first-line用于選中元素中的首行文本。13.5 CSS3新增的選擇器2選擇器:before和:after :before和:after兩個(gè)偽對(duì)象必須配合content屬性使用才有意義。它們的作用是在指定的標(biāo)記內(nèi)產(chǎn)生一個(gè)新的行內(nèi)標(biāo)記，該行內(nèi)元素的內(nèi)容由content屬性里的內(nèi)容決定。before選擇器用于在某個(gè)元素之前插入內(nèi)容。: before content:文字或其他內(nèi)容 after選擇器用于在某個(gè)元素之后插入內(nèi)容。 : after content:文字或其他內(nèi)容 13.5 CSS3新增的選擇器示例13-21展示了偽元素選擇器的應(yīng)用13.6 使用CSS設(shè)計(jì)網(wǎng)站頁(yè)面 示例的布局使用