《HTML5+CSS3網(wǎng)頁制作教程》課件-第10章_第1頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第10章_第2頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第10章_第3頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第10章_第4頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第10章_第5頁
已閱讀5頁，還剩60頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

模塊10CSS選擇器10.1CSS選擇器概念10.2

標(biāo)簽選擇器10.3id選擇器10.4class選擇器10.5

屬性選擇器10.6

組合選擇器10.7

超鏈接偽類選擇器10.8CSS優(yōu)先級10.9

案例：使用CSS控制超鏈接的樣式思考與練習(xí)題

10.1CSS選擇器概念

CSS通過選擇器來指定需要設(shè)置樣式的對象，例如下面這段代碼：

上述樣式代碼“div{color:red;}”中，“div”即為選擇器，表示選擇了頁面中的div元素，<div>標(biāo)簽內(nèi)的文本會顯示為紅色，這是由樣式規(guī)則中的“color:red;”設(shè)定的。如果我們將樣式代碼中的選擇器“div”更換為“p”，那么顯示紅色文字的就變成<p>標(biāo)簽內(nèi)的文本了。大家可以在瀏覽器中運行本例并嘗試修改代碼觀察結(jié)果的變化。

CSS選擇器的類型有很多，包括標(biāo)簽選擇器、id選擇器、類選擇器、屬性選擇器等。

10.2標(biāo)簽選擇器

標(biāo)簽選擇器也稱作“元素選擇器”，是指用HTML標(biāo)簽名稱作為選擇器，從而為頁面中由某一種標(biāo)簽定義的元素指定統(tǒng)一的CSS樣式。

標(biāo)簽選擇器的語法格式如下：

【例10-1】標(biāo)簽選擇器的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖10-1所示。

圖10-1標(biāo)簽選擇器的應(yīng)用

本例中，CSS選擇器為“td”，表示選擇了頁面中所有由<td>標(biāo)簽定義的元素，所以在預(yù)覽結(jié)果中，我們看到每個單元格都具有相同樣式：高50像素、寬200像素、粗細(xì)1像素的實線黑色邊框。

說明：有一種特殊的選擇器類型，稱為通配符選擇器，它使用“*”表示，其作用是選擇所有元素。例如下面的代碼，使用通配符選擇器清除所有HTML標(biāo)簽的默認(rèn)邊距。

10.3id選擇器

id選擇器的語法格式如下：說明：id名即id屬性的值，在id名前面必須加上前綴符號“#”，否則該選擇器無效。

【例10-2】id選擇器的應(yīng)用。

本例中，先用標(biāo)簽選擇器“p”選擇了所有的段落p元素，為它們設(shè)置了統(tǒng)一的字體大小樣式，再使用id選擇器“#p2”選擇了id屬性值為“p2”的元素，即為第二個段落p元素設(shè)置了紅色字體。

10.4class選擇器

class選擇器，即“類選擇器”。當(dāng)要對頁面中多個相同或不相同的元素使用同一樣式時，可以為這些元素標(biāo)簽設(shè)置相同的class屬性，然后CSS選擇器定義為該class名即可。class選擇器的用法與id選擇器相似，區(qū)別在于id選擇器只可選擇一個元素，而class選擇器可以選擇多個元素。

class選擇器的語法格式如下：

說明：class名即class屬性的值，在class名前面必須加上前綴符號“.”(英文點號)，否則該選擇器無效。

【例10-3】class選擇器的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖10-2所示。

圖10-2class選擇器的應(yīng)用

本例中，CSS樣式代碼“.red{color:red;}”表示選中class屬性值為“red”的所有元素，然后為這些元素設(shè)置了CSS屬性“color:red;”。

<body>標(biāo)簽內(nèi)部包含h1、div和p這些不同的元素，但可以為這些元素定義相同的class屬性，這樣就可以同時為這些元素設(shè)置相同的CSS樣式了。從圖10-2中可以看出，

只有“盒子1”所在的<div>標(biāo)簽沒有定義class屬性，所以它沒有顯示為紅色。

10.5屬性選擇器

屬性選擇器的語法格式如下：說明：屬性選擇器必須要加一對中括號“[]”，其中“屬性值”可以不指定。

【例10-4】屬性選擇器的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖10-3所示。

圖10-3屬性選擇器的應(yīng)用

本例中，選擇器“[target]”表示選擇使用了target屬性的所有元素，并為這些元素設(shè)置了淺藍(lán)色的背景。選擇器“[target=_blank]”表示選擇了target屬性值為“_blank”的元素，并設(shè)置文本顏色為紅色。從圖10-3中我們可以看出，“學(xué)院簡介”和“校園環(huán)境”這兩個超鏈接元素被選擇器選中并分別設(shè)置了樣式。

屬性選擇器還可以結(jié)合一些符號來表示有條件的選擇。CSS屬性選擇器語法格式及舉例見表10-1

10.6組合選擇器

10.6.1?后代選擇器后代選擇器用于選取某元素的后代元素。其語法格式如下：

【例10-5】后代選擇器的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖10-4所示。圖10-4后代選擇器的應(yīng)用

10.6.2?子元素選擇器

與后代選擇器相比，子元素選擇器只能選擇作為某元素直接(一級)子元素的元素。其語法格式如下：

【例10-6】子元素選擇器的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖10-5所示。圖10-5子元素選擇器的應(yīng)用

10.6.3?相鄰兄弟選擇器

相鄰兄弟選擇器可選擇緊接在另一元素后的元素，且兩者有相同的父元素?！跋噜彙钡囊馑际恰熬o隨其后”。

相鄰兄弟選擇器的語法格式如下：

【例10-7】相鄰兄弟選擇器的應(yīng)用。

10.6.4?后續(xù)兄弟選擇器

后續(xù)兄弟選擇器可選取指定元素之后的所有普通兄弟元素。其語法格式如下：

【例10-8】后續(xù)兄弟選擇器的應(yīng)用。

10.6.5?交集選擇器

交集選擇器由標(biāo)簽選擇器和class選擇器或id選擇器組合在一起使用，取兩種選擇器所選范圍的交集。

交集選擇器的語法格式如下：

【例10-9】交集選擇器的應(yīng)用。

上述代碼在瀏覽器中的預(yù)覽效果如圖10-6所示。圖10-6交集選擇器的應(yīng)用

10.6.6?分組選擇器

當(dāng)頁面中有多個元素都設(shè)置了相同的樣式，我們可以通過分組將這些元素的選擇器寫到一起，這樣就可以得到更簡潔的樣式表。

分組選擇器的語法格式如下：

【例10-10】分組選擇器的應(yīng)用。

10.7超鏈接偽類選擇器

在CSS中，有兩種特殊的選擇器類型：偽類選擇器和偽元素選擇器。偽類選擇器用于元素處于某種狀態(tài)時為其添加對應(yīng)的樣式，例如：“:hover”用于設(shè)置鼠標(biāo)懸停在某元素上時元素所呈現(xiàn)的樣式；偽元素選擇器用于創(chuàng)建一些不在DOM文檔樹中的元素，并為其添加樣式，例如下面的示例。

上述CSS代碼中，“:before”用來在p元素之前添加文本，并為這些文本添加紅色字體樣式，在瀏覽器中顯示內(nèi)容為：“添加的文本，這是段落?！?，雖然用戶可以在瀏覽器中看到添加的文本，但是它實際上并不在DOM文檔樹中。

CSS的偽類和偽元素有很多，本書選擇其中最常用的超鏈接偽類做介紹。通過超鏈接偽類可以設(shè)置不同鏈接狀態(tài)的樣式，超鏈接標(biāo)簽<a>的偽類有4種，對應(yīng)4種狀態(tài)，具體如表10-2所示。

【例10-11】超鏈接偽類選擇器的應(yīng)用。

10.8CSS優(yōu)先級

定義CSS樣式時，經(jīng)常會在一個元素上應(yīng)用多個樣式規(guī)則，如果這些樣式規(guī)則中定義了相同的樣式，那么以哪個樣式為準(zhǔn)呢？這就是CSS優(yōu)先級的問題。

【例10-12】CSS優(yōu)先級示例1。

例10-12中，CSS代碼中的3個選擇器p、#p1、red都選擇了段落p，并分別設(shè)置了不同文本顏色，那么p元素內(nèi)的文本究竟是什么顏色呢？大家到瀏覽器中運行便知結(jié)果，

文本顯示為藍(lán)色，可見此處id選擇器的優(yōu)先級最高。

接下來，對代碼稍作修改，刪掉<p>標(biāo)簽內(nèi)的id屬性：

<pclass="red">我究竟是什么顏色？</p>

這時，文本顯示為紅色，由此可知class選擇器的優(yōu)先級高于標(biāo)簽選擇器。

【例10-13】CSS優(yōu)先級示例2。

段落1標(biāo)簽<p>同時定義了id屬性和行內(nèi)樣式，例10-12中優(yōu)先級最高的id選擇器和行內(nèi)樣式進(jìn)行比較，哪個優(yōu)先級高？結(jié)論是行內(nèi)樣式的優(yōu)先級高于id選擇器，所以段

落1文本顯示為紫色。

段落2標(biāo)簽<p>同時應(yīng)用了class樣式red和yellow，.red和.yellow同為類樣式，哪個優(yōu)先級高呢？結(jié)論是同一級別的樣式，定義時排在最后的優(yōu)先級最高，所以段落2文本顯示為黃色。

以上是CSS優(yōu)先級的基本規(guī)則，在實際應(yīng)用中可能更復(fù)雜一些，這就需要大家多實踐，在實踐中理解并掌握CSS優(yōu)先級的規(guī)則。

10.9案例：使用CSS控制超鏈接的樣式

【案例描述】本案例實現(xiàn)了多個頁面間的超鏈接，并使用偽類選擇器設(shè)置了超鏈接的樣式。案例源文件參考“模塊10案例”?！究己酥R點】CSS各種選擇器的應(yīng)用

【練習(xí)目標(biāo)】

(1)熟悉CSS的基本語法。

(2)掌握標(biāo)簽選擇器的應(yīng)用。

(3)掌握分組選擇器的應(yīng)用。

(4)掌握超鏈接偽類選擇器的應(yīng)用。

(5)熟悉其他各類選擇器。

【案例源代碼】

(1)“html.html”文件源代碼如下：

(2)“css.html”文件和“javascript.html”文件源代碼與“html.html”文件源代碼相似，請查看配套素材和源碼。

(3)3個頁面共用的CSS樣式“style.css”文件源代碼如下：

【運行結(jié)果】

源代碼運行結(jié)果如圖10-7所示。圖10-7頁面運行結(jié)果

【案例分析】

本案例通過導(dǎo)航實現(xiàn)了3個頁面間的鏈接。超鏈接樣式設(shè)置：通過選擇器“a”對超鏈接4個狀態(tài)的樣式進(jìn)行了統(tǒng)一設(shè)置，然后通過偽類選擇器“a:hover”設(shè)置了鼠標(biāo)經(jīng)

過超鏈接這一狀態(tài)的樣式，其中“text-decoration”樣式屬性表示文本的修飾，屬性值“overlineunderline”表示同時設(shè)置上劃線和下劃線。

思考與練習(xí)題

一、選擇題1.下列選項中不是CSS選擇器類型的是()。A.標(biāo)簽選擇器

B.id選擇器C.class選擇器

D.行內(nèi)選擇器2.id選擇器的id名前面必須要加的前綴符號是()。A.#

B.*C.+

D.~

3.類選擇器名使用的是()屬性的值。

A.id

B.class

C.style

D.title

4.下列選擇器中不屬于后代選擇器的是()。

A.pspan

B.p>span

C.p~span

D.p+span

5.CSS代碼“h1,h2,#green{color:green;}”的選擇器類型是()。

A.后代選擇器

B.交集選擇器

C.分組選擇器

D.相鄰兄弟選擇器

二、填空題

1.class選擇器也稱為

。

2.選擇頁面中設(shè)置了title屬性的所有元素，選擇器的寫法是

。

3.有如下一段代碼

4.超鏈接的4個偽類選擇器分別是

、

、

、

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論