Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 4-css復(fù)合選擇器及特性_第1頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 4-css復(fù)合選擇器及特性_第2頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 4-css復(fù)合選擇器及特性_第3頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 4-css復(fù)合選擇器及特性_第4頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 4-css復(fù)合選擇器及特性_第5頁
已閱讀5頁，還剩37頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML+CSS網(wǎng)頁設(shè)計(jì)與制作CSS復(fù)合選擇器及特性教學(xué)目標(biāo)根據(jù)需要合理的選用不同的選擇器掌握更多CSS選擇器的用法掌握CSS的主要特性4.1CSS組合選擇器

組合選擇器是以2個(gè)或多個(gè)基本選擇器為基礎(chǔ)，通過組合產(chǎn)生出新的選擇器，而這種組合通?？梢灾苯臃从吵鲞@些元素在文檔結(jié)構(gòu)中的相互位置關(guān)系。一、后代選擇器當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。

基本語法：selectorselector{property:value;……}其中selector為選擇器，property：value;為屬性值對(duì)。

例如：ulli{font-size:16px;}li是ul的后代，表示匹配所有嵌套在標(biāo)記<ul>中的<li>。

4.1CSS組合選擇器

一、后代選擇器<p><span>夏天</span></p><h3class=“test1”><span>秋天</span></h3>后代選擇器的定義在兩個(gè)選擇器之間用“空格”來描述可以減少class選擇器的使用，保持HTML文檔的簡潔可以實(shí)現(xiàn)更精準(zhǔn)地選擇需要設(shè)置樣式的對(duì)象4.1CSS組合選擇器

pspan{color:yellow;}.test1span{color:red;}二、子元素選擇器子元素選擇器描述的是父元素的下一級(jí)元素，在兩個(gè)選擇器之間用“>”來描述；基本語法：selector>selector{property:value;……}

例如：p>span{color:blue;}

這里p是span的父元素4.1CSS組合選擇器

后代選擇器和子元素選擇器只要是內(nèi)層嵌套的元素都是外層元素的后代，而子元素僅僅是指父元素的下一級(jí)元素4.1CSS組合選擇器

<body><ul>嵌套關(guān)系<li>后代選擇器</li><li>子元素選擇器</li></ul></body>ul、li都是body的后代

但只有ul是body的子元素li是body的后代，也是ul的后代但只是ul的子元素

案例：demo4-1.html4.1CSS組合選擇器

三、相鄰兄弟選擇器相鄰兄弟選擇器是指緊接在一個(gè)元素之后的元素，二者有相同的父元素，兩個(gè)選擇器之間用“+”來描述。

基本語法：selector+selector{property:value;……}

例如：h1+p{color:blue;}4.1CSS組合選擇器

三、相鄰兄弟選擇器<body><h1>望廬山瀑布</h1><h3>唐-李白</h3><p>日照香爐生紫煙，</p><p>遙看瀑布掛前川。</p><p>飛流直下三千尺，</p><p>疑是銀河落九天。</p></body>案例：demo4-2.htmlh3+p{ font-family:華文彩云;}4.1CSS組合選擇器

四、普通兄弟選擇器普通兄弟選擇器是指一個(gè)元素后面所有與該元素?fù)碛邢嗤冈氐男值埽ㄔ兀?，選擇器之間用“~”來描述。

基本語法：selector~selector{property:value;……}

例如：h3~p{font-family:華文彩云;}，前面案例中的4個(gè)<p>段落都是h3的普通兄弟，均會(huì)表現(xiàn)為“華為彩云”的字體樣式。4.2偽類選擇器

網(wǎng)頁中某些元素在用戶的交互行為作用下狀態(tài)是可以發(fā)生變化的，例如元素獲得焦點(diǎn)時(shí)、元素被鼠標(biāo)懸停時(shí)等等，還有一些元素在文檔中具有一些特殊的結(jié)構(gòu)位置，例如表格中所有的單數(shù)行等等，CSS偽類就是描述元素的特殊狀態(tài)或特殊結(jié)構(gòu)。4.2偽類選擇器

偽類的名稱不區(qū)分大小寫，但要以冒號(hào)“：”開頭。偽類需要與CSS選擇器結(jié)合成為偽類選擇器來使用，將某種特定狀態(tài)或特殊結(jié)構(gòu)下的元素作為需要設(shè)置樣式的對(duì)象。

偽類選擇器的基本語法：selector:pseudo-class{property:value;…}:pseudo-class表示偽類的名稱，偽類選擇器分為狀態(tài)偽類和結(jié)構(gòu)性偽類。4.2偽類選擇器

一、狀態(tài)偽類（1）anchor偽類（錨偽類）

anchor偽類是與超級(jí)鏈接有關(guān)的偽類，在瀏覽器中，超級(jí)鏈接可以表現(xiàn)為4種狀態(tài)。:link未被訪問過的狀態(tài)；:hover鼠標(biāo)懸停狀態(tài)；:active活動(dòng)狀態(tài)；:visited已訪問過的狀態(tài)。4.2偽類選擇器

<body><div><ahref="#1">首頁</a><ahref="#2">新聞</a><ahref="#3">教育</a><ahref="#4">考試</a></div></body><style>a{text-decoration:none;}a:link{color:black; }a:visited{color:orange; }a:hover{text-decoration:underline; color:red; }a:active{color:blue; }</style>一、狀態(tài)偽類（1）anchor偽類（錨偽類）案例：demo4-3.html4.2偽類選擇器

<style>a:link,a:visited{text-decoration:none;color:block;}

a:hover{text-decoration:underline;

color:orange;}</style>一、狀態(tài)偽類（1）anchor偽類（錨偽類）一般情況下，未訪問的鏈接和訪問過的鏈接狀態(tài)設(shè)置相同狀態(tài)，活動(dòng)狀態(tài)響應(yīng)時(shí)間太短，不進(jìn)行設(shè)置，因此，前面的代碼可優(yōu)化改寫為：4.2偽類選擇器

一、狀態(tài)偽類（2）：focus偽類:focus偽類主要應(yīng)用于獲得輸入焦點(diǎn)的元素，比較常見的是表單中的一些控件，如<inputtype="text"/>這樣的文本輸入控件。

案例demo4-4.html4.2偽類選擇器

一、狀態(tài)偽類（2）：focus偽類<styletype="text/css">.inp:focus{width:200px;}</style><body><inputtype="text"placeholder="用戶名“class="inp"/><br><inputtype="password"placeholder="密碼"/></body>獲得焦點(diǎn)4.2偽類選擇器

二、結(jié)構(gòu)性偽類結(jié)構(gòu)性偽類是css3新增的選擇器，利用文檔結(jié)構(gòu)的上下文關(guān)系來匹配元素，能夠減少class類的定義，使文檔結(jié)構(gòu)更簡潔。

4.2偽類選擇器

二、結(jié)構(gòu)性偽類元素名描述:first-child匹配父元素的第一個(gè)子元素:last-child匹配父元素的最后一個(gè)子無素:only-child匹配父元素有且只有一個(gè)子元素:only-of-type匹配父元素有且只有一個(gè)指定類型的元素:nth-child(n)匹配父元素的第n個(gè)子元素:nth-last-child(n)匹配父元素的倒數(shù)第n個(gè)子元素:nth-of-type(n)匹配父元素定義類型的第n個(gè)子元素:nth-last-of-type(n)匹配父元素定義類型的倒數(shù)n個(gè)子元素:first-of-type匹配一個(gè)上級(jí)元素下的第一個(gè)同類子元素:last-of-type匹配一個(gè)上級(jí)元素的最后一個(gè)同類子元素4.2偽類選擇器

二、結(jié)構(gòu)性偽類

<ul><li>JavaEE培訓(xùn)</li><li>Android培訓(xùn)</li><li>PHP培訓(xùn)</li><li>UI設(shè)計(jì)培訓(xùn)</li><li>iOS培訓(xùn)</li><li>前端與移動(dòng)開發(fā)培訓(xùn)</li><li>C/C++培訓(xùn)</li></ul><styletype="text/css">

li:first-child{text-decoration:underline; }li:nth-child(3){font-size:24px; font-style:italic; }li:nth-child(2n){color:orange; }li:nth-child(2n+1){color:green; }</style>案例：demo4-5.html4.3偽元素選擇器

CSS偽元素指向的是比較抽象存在的內(nèi)容。例如元素的部分內(nèi)容，又或者是基于元素前后位置構(gòu)建出的內(nèi)容等等。

基本語法：selector::pseudo-element{property:value;……}::pseudo-element表示偽元素的名稱，需要注意的是偽元素采用雙冒號(hào)“::”，這樣也便于和偽類進(jìn)行區(qū)分。

4.3偽元素選擇器

常見的偽元素包括：

::first-letter選擇元素文本的第一個(gè)字（母）::first-line選擇元素文本的第一行::before在元素內(nèi)容的最前面添加新內(nèi)容::after在元素內(nèi)容的最后面添加新內(nèi)容偽元素需要與CSS選擇器結(jié)合起來成為偽元素選擇器。

例如

p::first-line表示選擇該段落的第一行作為設(shè)置樣式的對(duì)象

div::before表示在該div內(nèi)部所有元素內(nèi)容的前面添加新內(nèi)容。

案例demo4-6.html

4.4屬性選擇器

屬性選擇器是根據(jù)元素的屬性及屬性值來選擇元素的?；菊Z法：

[attribute]{property:value;……}

其中[attribute]表示以attribute命名屬性的元素。

例如：[type]{color:red;}進(jìn)一步利用attribute屬性關(guān)聯(lián)的屬性值來選擇元素時(shí)，可以匹配完整的屬性值，也可以利用通配符匹配屬性值的部分值。如表4-2所示：4.4屬性選擇器

表4-2與元素屬性及屬性值相關(guān)的選擇器

案例demo4-7.html選擇器實(shí)例說明[attribute][type]選擇帶有type屬性的所有元素。[attribute=value][type="text"]選擇帶有type屬性，且值為text的所有元素。[attribute~=value][class~="data"]選擇帶有class屬性，且值包含獨(dú)立單詞"data"的所有元素。[attribute|=value][class|="one"]選擇帶class屬性，且值以

"one"或"one-"開頭的所有元素。其中要求"one"是完整或獨(dú)立的單詞。[attribute*=value]a[href*="demo"]選擇其

href屬性值包含"demo"的所有<a>元素。"demo"不必是完整的單詞。[attribute^=value]a[href^="demo"]選擇其

href屬性值以

"demo"開頭的所有

<a>元素。"demo"不必是完整的單詞。[attribute$=value]a[href$=".html"]選擇其

href屬性值以

".html"結(jié)尾的所有

<a>元素。"html"不必是完整的單詞。4.5

CSS的特性

在掌握了CSS選擇器的使用方法后，為了科學(xué)高效的運(yùn)用選擇器，我們還要深入了解CSS的特性，才能在應(yīng)用的過程中，充分發(fā)揮CSS的作用，避免沖突。CSS主要有兩大特性：繼承性和層疊性。4.5CSS的特性

一、CSS的繼承性文檔的上下文關(guān)系，在HTML結(jié)構(gòu)中大多是通過嵌套來表現(xiàn)的，繼承性就是基于這種嵌套關(guān)系，子元素對(duì)父元素樣式的繼承。繼承性的特點(diǎn)主要包括以下兩方面：子標(biāo)記繼承父標(biāo)記部分的CSS樣式風(fēng)格；子標(biāo)記可以產(chǎn)生新的CSS樣式，不會(huì)影響父標(biāo)記；

4.5CSS的特性

一、CSS的繼承性HTML結(jié)構(gòu)：<h1class="test1">hello<span>world</span></h1>CSS樣式規(guī)則：h1{font-style:italic;}.test1{text-transform:uppercase;}span{text-decoration:line-through;color:red;}

繼承后效果圖：案例：demo4-8.html4.5CSS的特性

一、CSS的繼承性不是所有的CSS屬性都會(huì)被繼承，父元素的以下屬于不會(huì)被子元素繼承：邊框?qū)傩酝膺吘鄬傩?、?nèi)邊距屬性背景屬性定位屬性、布局屬性元素寬、高屬性利用CSS的繼承性，可以減少代碼的編寫量，提高文檔的可讀性。二、CSS的層疊性CSS的層疊性是指多種CSS樣式可以疊加在同一個(gè)元素，層疊包括來自同級(jí)元素樣式的定義，也包括由于繼承性引起的樣式定義。“world”文本通過繼承，將<h1>和“test1”的樣式連同自定義的樣式層疊到了一起。4.5CSS的特性

二、CSS的層疊性在層疊的過程中，可能引起樣式的沖突，如圖所示，該元素“WORLD”最終會(huì)顯示什么顏色呢？<h1class="test1">hello<span>world</span></h1>4.5CSS的特性

WORLD如何解決沖突？提出優(yōu)先級(jí)的概念！三、CSS的優(yōu)先級(jí)CSS的優(yōu)先級(jí)是當(dāng)層疊引發(fā)樣式?jīng)_突的時(shí)候，瀏覽器根據(jù)優(yōu)先級(jí)來決定元素應(yīng)用哪個(gè)樣式，優(yōu)先級(jí)則由選擇器的匹配規(guī)則即優(yōu)先順序來決定。4.5CSS的特性

三、CSS的優(yōu)先級(jí)（1）引用樣式表的優(yōu)先順序根據(jù)引用CSS樣式的方式不同，優(yōu)先級(jí)的順序是：

內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式如果外部樣式放在內(nèi)部樣式的后面，如下圖所示，外部樣式優(yōu)先級(jí)會(huì)反過來高于內(nèi)部樣式表。（就近原則）4.5CSS的特性

案例demo4-9.html三、CSS的優(yōu)先級(jí)（2）繼承性的優(yōu)先級(jí)當(dāng)HTML結(jié)構(gòu)嵌套較深時(shí)，一個(gè)元素的樣式可能會(huì)受它多層祖先元素的樣式影響，這時(shí)它們的優(yōu)先順序是：

元素的自定義樣式>最近祖先>高于其他祖先4.5CSS的特性

三、CSS的優(yōu)先級(jí)（2）繼承性的優(yōu)先級(jí)<h1class="test1">hello<span>world</span></h1>由<span>自定義的樣式優(yōu)先級(jí)高于從類“test1”中繼承來的樣式，所以最后文本的顏色渲染為紅色。4.5CSS的特性

三、CSS的優(yōu)先級(jí)（3）選擇器的優(yōu)先級(jí)選擇器的優(yōu)先級(jí)是通過計(jì)算每個(gè)選擇器的權(quán)重值得出的，權(quán)重值大的優(yōu)先級(jí)高，一般選擇器的權(quán)重值如表所示：

4.5CSS的特性

繼承樣式標(biāo)簽選擇器類選擇器ID選擇器內(nèi)聯(lián)樣式表!important規(guī)則0110100100010000+三、CSS的優(yōu)先級(jí)（3）選擇器的優(yōu)先級(jí)<h1class="test1">hello<span>world</span></h1><style>h1{color:blue;}.test1{color:gray;}span{color:yellow;}h1span{color:green;}.test1span{color:red;}</style>

4.5CSS的特性

思考一下：“world”最后什么顏色？案例demo4-10.html三、CSS的優(yōu)先級(jí)（3）選擇器的優(yōu)先級(jí)

4.5CSS的特性

選擇器權(quán)重值說明h10對(duì)于“world”，<h1>是繼承樣式，權(quán)重為0.test10對(duì)于“world”，類“test1”是繼承樣式，權(quán)重為0s

溫馨提示

  • 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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論