![《HTML5+CSS3網(wǎng)頁制作教程》課件-第10章_第1頁](http://file4.renrendoc.com/view12/M04/37/2E/wKhkGWdylL6AK8mIAAFLrIF3aFw560.jpg)
![《HTML5+CSS3網(wǎng)頁制作教程》課件-第10章_第2頁](http://file4.renrendoc.com/view12/M04/37/2E/wKhkGWdylL6AK8mIAAFLrIF3aFw5602.jpg)
![《HTML5+CSS3網(wǎng)頁制作教程》課件-第10章_第3頁](http://file4.renrendoc.com/view12/M04/37/2E/wKhkGWdylL6AK8mIAAFLrIF3aFw5603.jpg)
![《HTML5+CSS3網(wǎng)頁制作教程》課件-第10章_第4頁](http://file4.renrendoc.com/view12/M04/37/2E/wKhkGWdylL6AK8mIAAFLrIF3aFw5604.jpg)
![《HTML5+CSS3網(wǎng)頁制作教程》課件-第10章_第5頁](http://file4.renrendoc.com/view12/M04/37/2E/wKhkGWdylL6AK8mIAAFLrIF3aFw5605.jpg)
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(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)先級10.9
案例:使用CSS控制超鏈接的樣式思考與練習(xí)題
10.1CSS選擇器概念
CSS通過選擇器來指定需要設(shè)置樣式的對象,例如下面這段代碼:
上述樣式代碼“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名前面必須加上前綴符號“#”,否則該選擇器無效。
【例10-2】id選擇器的應(yīng)用。
本例中,先用標(biāo)簽選擇器“p”選擇了所有的段落p元素,為它們設(shè)置了統(tǒng)一的字體大小樣式,再使用id選擇器“#p2”選擇了id屬性值為“p2”的元素,即為第二個(gè)段落p元素設(shè)置了紅色字體。
10.4class選擇器
class選擇器,即“類選擇器”。當(dāng)要對頁面中多個(gè)相同或不相同的元素使用同一樣式時(shí),可以為這些元素標(biāo)簽設(shè)置相同的class屬性,然后CSS選擇器定義為該class名即可。class選擇器的用法與id選擇器相似,區(qū)別在于id選擇器只可選擇一個(gè)元素,而class選擇器可以選擇多個(gè)元素。
class選擇器的語法格式如下:
說明:class名即class屬性的值,在class名前面必須加上前綴符號“.”(英文點(diǎn)號),否則該選擇器無效。
【例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屬性選擇器
屬性選擇器的語法格式如下:說明:屬性選擇器必須要加一對中括號“[]”,其中“屬性值”可以不指定。
【例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é)合一些符號來表示有條件的選擇。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?相鄰兄弟選擇器
相鄰兄弟選擇器可選擇緊接在另一元素后的元素,且兩者有相同的父元素。“相鄰”的意思是“緊隨其后”。
相鄰兄弟選擇器的語法格式如下:
【例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í)為其添加對應(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種,對應(yīng)4種狀態(tài),具體如表10-2所示。
【例10-11】超鏈接偽類選擇器的應(yīng)用。
10.8CSS優(yōu)先級
定義CSS樣式時(shí),經(jīng)常會(huì)在一個(gè)元素上應(yīng)用多個(gè)樣式規(guī)則,如果這些樣式規(guī)則中定義了相同的樣式,那么以哪個(gè)樣式為準(zhǔn)呢?這就是CSS優(yōu)先級的問題。
【例10-12】CSS優(yōu)先級示例1。
例10-12中,CSS代碼中的3個(gè)選擇器p、#p1、red都選擇了段落p,并分別設(shè)置了不同文本顏色,那么p元素內(nèi)的文本究竟是什么顏色呢?大家到瀏覽器中運(yùn)行便知結(jié)果,
文本顯示為藍(lán)色,可見此處id選擇器的優(yōu)先級最高。
接下來,對代碼稍作修改,刪掉<p>標(biāo)簽內(nèi)的id屬性:
<pclass="red">我究竟是什么顏色?</p>
這時(shí),文本顯示為紅色,由此可知class選擇器的優(yōu)先級高于標(biāo)簽選擇器。
【例10-13】CSS優(yōu)先級示例2。
段落1標(biāo)簽<p>同時(shí)定義了id屬性和行內(nèi)樣式,例10-12中優(yōu)先級最高的id選擇器和行內(nèi)樣式進(jìn)行比較,哪個(gè)優(yōu)先級高?結(jié)論是行內(nèi)樣式的優(yōu)先級高于id選擇器,所以段
落1文本顯示為紫色。
段落2標(biāo)簽<p>同時(shí)應(yīng)用了class樣式red和yellow,.red和.yellow同為類樣式,哪個(gè)優(yōu)先級高呢?結(jié)論是同一級別的樣式,定義時(shí)排在最后的優(yōu)先級最高,所以段落2文本顯示為黃色。
以上是CSS優(yōu)先級的基本規(guī)則,在實(shí)際應(yīng)用中可能更復(fù)雜一些,這就需要大家多實(shí)踐,在實(shí)踐中理解并掌握CSS優(yōu)先級的規(guī)則。
10.9案例:使用CSS控制超鏈接的樣式
【案例描述】本案例實(shí)現(xiàn)了多個(gè)頁面間的超鏈接,并使用偽類選擇器設(shè)置了超鏈接的樣式。案例源文件參考“模塊10案例”。【考核知識點(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”文件源代碼相似,請查看配套素材和源碼。
(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”對超鏈接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名前面必須要加的前綴符號是()。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等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度環(huán)保設(shè)備購銷合同樣本及格式說明
- 2025年度進(jìn)出口貿(mào)易電子商務(wù)平臺運(yùn)營服務(wù)合同
- 發(fā)熱管項(xiàng)目融資計(jì)劃書
- 邢臺2024年河北邢臺廣宗縣招聘事業(yè)單位工作人員38人筆試歷年參考題庫附帶答案詳解
- 鹽城2025年江蘇省鹽城市教育局直屬學(xué)校招聘教師14人筆試歷年參考題庫附帶答案詳解
- 濰坊2025年山東濰坊市產(chǎn)業(yè)技術(shù)研究院招聘7人筆試歷年參考題庫附帶答案詳解
- 楚雄云南楚雄州消防救援局招聘6人筆試歷年參考題庫附帶答案詳解
- 株洲2025年湖南株洲市蘆淞區(qū)面向應(yīng)屆生招聘教師30人筆試歷年參考題庫附帶答案詳解
- 杭州2025年浙江杭州市臨安區(qū)高虹鎮(zhèn)人民政府招聘編外聘用人員筆試歷年參考題庫附帶答案詳解
- 普洱云南普洱市消防救援支隊(duì)專職消防員消防文員招錄筆試歷年參考題庫附帶答案詳解
- 2025年1月浙江省高考政治試卷(含答案)
- 教體局校車安全管理培訓(xùn)
- 湖北省十堰市城區(qū)2024-2025學(xué)年九年級上學(xué)期期末質(zhì)量檢測綜合物理試題(含答案)
- 行車起重作業(yè)風(fēng)險(xiǎn)分析及管控措施
- 健康體檢中心患者身份登記制度
- 《災(zāi)害的概述》課件
- 國產(chǎn)氟塑料流體控制件生產(chǎn)企業(yè)
- 空氣能安裝合同
- 初二上冊的數(shù)學(xué)試卷
- 2025年上半年重慶三峽融資擔(dān)保集團(tuán)股份限公司招聘6人高頻重點(diǎn)提升(共500題)附帶答案詳解
- 四大名繡課件-高一上學(xué)期中華傳統(tǒng)文化主題班會(huì)
評論
0/150
提交評論