版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(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)先級(jí)10.9
案例：使用CSS控制超鏈接的樣式思考與練習(xí)題
10.1CSS選擇器概念
CSS通過選擇器來指定需要設(shè)置樣式的對(duì)象，例如下面這段代碼：
上述樣式代碼“div{color:red;}”中，“div”即為選擇器，表示選擇了頁面中的div元素，<div>標(biāo)簽內(nèi)的文本會(huì)顯示為紅色，這是由樣式規(guī)則中的“color:red;”設(shè)定的。如果我們將樣式代碼中的選擇器“div”更換為“p”，那么顯示紅色文字的就變成<p>標(biāo)簽內(nèi)的文本了。大家可以在瀏覽器中運(yùn)行本例并嘗試修改代碼觀察結(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é)果中，我們看到每個(gè)單元格都具有相同樣式：高50像素、寬200像素、粗細(xì)1像素的實(shí)線黑色邊框。
說明：有一種特殊的選擇器類型，稱為通配符選擇器，它使用“*”表示，其作用是選擇所有元素。例如下面的代碼，使用通配符選擇器清除所有HTML標(biāo)簽的默認(rèn)邊距。
10.3id選擇器
id選擇器的語法格式如下：說明：id名即id屬性的值，在id名前面必須加上前綴符號(hào)“#”，否則該選擇器無效。
【例10-2】id選擇器的應(yīng)用。
本例中，先用標(biāo)簽選擇器“p”選擇了所有的段落p元素，為它們?cè)O(shè)置了統(tǒng)一的字體大小樣式，再使用id選擇器“#p2”選擇了id屬性值為“p2”的元素，即為第二個(gè)段落p元素設(shè)置了紅色字體。
10.4class選擇器
class選擇器，即“類選擇器”。當(dāng)要對(duì)頁面中多個(gè)相同或不相同的元素使用同一樣式時(shí)，可以為這些元素標(biāo)簽設(shè)置相同的class屬性，然后CSS選擇器定義為該class名即可。class選擇器的用法與id選擇器相似，區(qū)別在于id選擇器只可選擇一個(gè)元素，而class選擇器可以選擇多個(gè)元素。
class選擇器的語法格式如下：
說明：class名即class屬性的值，在class名前面必須加上前綴符號(hào)“.”(英文點(diǎn)號(hào))，否則該選擇器無效。
【例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í)為這些元素設(shè)置相同的CSS樣式了。從圖10-2中可以看出，
只有“盒子1”所在的<div>標(biāo)簽沒有定義class屬性，所以它沒有顯示為紅色。
10.5屬性選擇器
屬性選擇器的語法格式如下：說明：屬性選擇器必須要加一對(duì)中括號(hào)“[]”，其中“屬性值”可以不指定。
【例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)境”這兩個(gè)超鏈接元素被選擇器選中并分別設(shè)置了樣式。
屬性選擇器還可以結(jié)合一些符號(hào)來表示有條件的選擇。CSS屬性選擇器語法格式及舉例見表10-1
10.6組合選擇器
10.6.1?后代選擇器后代選擇器用于選取某元素的后代元素。其語法格式如下：
【例10-5】后代選擇器的應(yīng)用。
上述代碼在瀏覽器中的預(yù)覽效果如圖10-4所示。圖10-4后代選擇器的應(yīng)用
10.6.2?子元素選擇器
與后代選擇器相比，子元素選擇器只能選擇作為某元素直接(一級(jí))子元素的元素。其語法格式如下：
【例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)頁面中有多個(gè)元素都設(shè)置了相同的樣式，我們可以通過分組將這些元素的選擇器寫到一起，這樣就可以得到更簡潔的樣式表。
分組選擇器的語法格式如下：
【例10-10】分組選擇器的應(yīng)用。
10.7超鏈接偽類選擇器
在CSS中，有兩種特殊的選擇器類型：偽類選擇器和偽元素選擇器。偽類選擇器用于元素處于某種狀態(tài)時(shí)為其添加對(duì)應(yīng)的樣式，例如：“:hover”用于設(shè)置鼠標(biāo)懸停在某元素上時(shí)元素所呈現(xiàn)的樣式；偽元素選擇器用于創(chuàng)建一些不在DOM文檔樹中的元素，并為其添加樣式，例如下面的示例。
上述CSS代碼中，“:before”用來在p元素之前添加文本，并為這些文本添加紅色字體樣式，在瀏覽器中顯示內(nèi)容為：“添加的文本，這是段落。”，雖然用戶可以在瀏覽器中看到添加的文本，但是它實(shí)際上并不在DOM文檔樹中。
CSS的偽類和偽元素有很多，本書選擇其中最常用的超鏈接偽類做介紹。通過超鏈接偽類可以設(shè)置不同鏈接狀態(tài)的樣式，超鏈接標(biāo)簽<a>的偽類有4種，對(duì)應(yīng)4種狀態(tài)，具體如表10-2所示。
【例10-11】超鏈接偽類選擇器的應(yīng)用。
10.8CSS優(yōu)先級(jí)
定義CSS樣式時(shí)，經(jīng)常會(huì)在一個(gè)元素上應(yīng)用多個(gè)樣式規(guī)則，如果這些樣式規(guī)則中定義了相同的樣式，那么以哪個(gè)樣式為準(zhǔn)呢？這就是CSS優(yōu)先級(jí)的問題。
【例10-12】CSS優(yōu)先級(jí)示例1。
例10-12中，CSS代碼中的3個(gè)選擇器p、#p1、red都選擇了段落p，并分別設(shè)置了不同文本顏色，那么p元素內(nèi)的文本究竟是什么顏色呢？大家到瀏覽器中運(yùn)行便知結(jié)果，
文本顯示為藍(lán)色，可見此處id選擇器的優(yōu)先級(jí)最高。
接下來，對(duì)代碼稍作修改，刪掉<p>標(biāo)簽內(nèi)的id屬性：
<pclass="red">我究竟是什么顏色？</p>
這時(shí)，文本顯示為紅色，由此可知class選擇器的優(yōu)先級(jí)高于標(biāo)簽選擇器。
【例10-13】CSS優(yōu)先級(jí)示例2。
段落1標(biāo)簽<p>同時(shí)定義了id屬性和行內(nèi)樣式，例10-12中優(yōu)先級(jí)最高的id選擇器和行內(nèi)樣式進(jìn)行比較，哪個(gè)優(yōu)先級(jí)高？結(jié)論是行內(nèi)樣式的優(yōu)先級(jí)高于id選擇器，所以段
落1文本顯示為紫色。
段落2標(biāo)簽<p>同時(shí)應(yīng)用了class樣式red和yellow，.red和.yellow同為類樣式，哪個(gè)優(yōu)先級(jí)高呢？結(jié)論是同一級(jí)別的樣式，定義時(shí)排在最后的優(yōu)先級(jí)最高，所以段落2文本顯示為黃色。
以上是CSS優(yōu)先級(jí)的基本規(guī)則，在實(shí)際應(yīng)用中可能更復(fù)雜一些，這就需要大家多實(shí)踐，在實(shí)踐中理解并掌握CSS優(yōu)先級(jí)的規(guī)則。
10.9案例：使用CSS控制超鏈接的樣式
【案例描述】本案例實(shí)現(xiàn)了多個(gè)頁面間的超鏈接，并使用偽類選擇器設(shè)置了超鏈接的樣式。案例源文件參考“模塊10案例”?！究己酥R(shí)點(diǎn)】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”文件源代碼相似，請(qǐng)查看配套素材和源碼。
(3)3個(gè)頁面共用的CSS樣式“style.css”文件源代碼如下：
【運(yùn)行結(jié)果】
源代碼運(yùn)行結(jié)果如圖10-7所示。圖10-7頁面運(yùn)行結(jié)果
【案例分析】
本案例通過導(dǎo)航實(shí)現(xiàn)了3個(gè)頁面間的鏈接。超鏈接樣式設(shè)置：通過選擇器“a”對(duì)超鏈接4個(gè)狀態(tài)的樣式進(jìn)行了統(tǒng)一設(shè)置，然后通過偽類選擇器“a:hover”設(shè)置了鼠標(biāo)經(jīng)
過超鏈接這一狀態(tài)的樣式，其中“text-decoration”樣式屬性表示文本的修飾，屬性值“overlineunderline”表示同時(shí)設(shè)置上劃線和下劃線。
思考與練習(xí)題
一、選擇題1.下列選項(xiàng)中不是CSS選擇器類型的是()。A.標(biāo)簽選擇器
B.id選擇器C.class選擇器
D.行內(nèi)選擇器2.id選擇器的id名前面必須要加的前綴符號(hào)是()。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個(gè)偽類選擇器分別是
、
、
、
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 大班健康的蔬菜公開課
- 河南中考答案 數(shù)學(xué)試卷
- 廣東省職高一數(shù)學(xué)試卷
- 醫(yī)院課件宣傳海報(bào)制作
- 肝炎病毒微生物與免疫基礎(chǔ)99課件
- 2025年中國生物傳感器行業(yè)市場運(yùn)營現(xiàn)狀及投資戰(zhàn)略咨詢報(bào)告
- 2025年中國河北省房地產(chǎn)行業(yè)未來前景預(yù)測(cè)研究報(bào)告
- 青海省項(xiàng)目-藏區(qū)區(qū)域醫(yī)療中心項(xiàng)目可行性研究報(bào)告-智博睿編制
- 2025-2030年中國防水防油針刺呢行業(yè)深度研究分析報(bào)告
- 健康的人快樂多課件
- 安措費(fèi)使用計(jì)劃報(bào)審表(施工報(bào)-監(jiān)理審-業(yè)主批)
- Q∕SY 02625.2-2018 油氣水井帶壓作業(yè)技術(shù)規(guī)范 第2部分：設(shè)備配備、使用與維護(hù)
- 調(diào)研報(bào)告：農(nóng)村糧食經(jīng)紀(jì)人現(xiàn)狀、存在問題及建議
- 鋼筋平行檢驗(yàn)記錄范本
- 2021-2022學(xué)年安徽省蚌埠市高一下學(xué)期期末數(shù)學(xué)試題【含答案】
- (完整PPT)抽油機(jī)井示功圖分析課件
- 我國諧波標(biāo)準(zhǔn)
- 醫(yī)療期規(guī)定(表格化)
- 沖壓作業(yè)指導(dǎo)書(共12頁)
- 衛(wèi)夫人《筆陣圖》（課堂PPT）
- RationalDMIS客戶培訓(xùn)手冊(cè)
評(píng)論
0/150
提交評(píng)論