您好,登錄后才能下訂單哦!
CSS3選擇器
選擇器中的屬性:
之前介紹過[ ]里可以定義屬性或?qū)傩灾担蟮臉撕炛兄灰性摱x的屬性或?qū)傩灾稻蜁碛性摌邮健K岳^續(xù)介紹剩下的幾種聲明方式。
[attribute^=value],例如:[title^=”abc”],選擇只要是title屬性值以abc開頭的每個標簽,就賦予這個樣式,示例:
運行結(jié)果:
[attribute$=value],例如:[title$=”123”],選擇只要是title屬性值以123結(jié)尾的每個標簽,就賦予這個樣式,示例:
運行結(jié)果:
[attribute*=value],例如:[title*=”abc”],選擇只要是title屬性值包含abc字符串的每個標簽,就賦予這個樣式,示例:
運行結(jié)果:
思維導(dǎo)圖:
超級鏈接的狀態(tài)樣式:
超級鏈接有四個狀態(tài)的樣式:1.從來沒有被訪問過的超級鏈接,2.已經(jīng)被訪問過的超級鏈接,3.鼠標移動到超級鏈接時的狀態(tài),4.鼠標點擊超級鏈接時的狀態(tài)。
每一個狀態(tài)都可以設(shè)置不同的樣式:
a:link 設(shè)置從來沒有被訪問過的超級鏈接樣式
a:visited 設(shè)置已經(jīng)被訪問過的超級鏈接樣式
a:hover 設(shè)置鼠標移動到超級鏈接時的樣式
a:active 設(shè)置鼠標點擊超級鏈接時的樣式
代碼示例:
運行結(jié)果:
思維導(dǎo)圖:
焦點獲得時改變樣式:
input:focus 可以定義在組件獲得焦點時改變樣式
代碼示例:
運行結(jié)果:
設(shè)置子標簽樣式:
:last-child 設(shè)置父標簽最后一個子標簽的樣式,例如:div p:last-child,設(shè)置div標簽里最后一個p標簽的樣式
:first-child 則是相反,設(shè)置父標簽最第一個子標簽的樣式,例如:div p:first-child,設(shè)置div標簽里第一個p標簽的樣式
代碼示例:
運行結(jié)果:
:nth-of-type(n),設(shè)置父標簽從第一個開始數(shù)的第n個子標簽的樣式,例如:div p:nth-of-type(2),就是設(shè)置div標簽里第二p標簽的樣式
:nth-last-of-type(n),設(shè)置父標簽從倒數(shù)第一個開始數(shù)的第n個子標簽的樣式,例如:div p:nth-of-type(1),就是設(shè)置div標簽里倒數(shù)第一個p標簽的樣式
代碼示例:
運行結(jié)果:
利用:nth-of-type(n)可以做到隔行變色的效果,應(yīng)用在表格上代碼示例:
運行結(jié)果:
邊框樣式
border屬性可以用于控制標簽的邊框樣式,邊框的尺寸使用px為單位。
常用的邊框的線條樣式:
solid 實線
none 無邊框線
double 雙線
dashed 虛線
代碼示例:
運行結(jié)果:
思維導(dǎo)圖:
邊框可以根據(jù)上下左右來控制:
border-top 上邊框
border-bottom 下邊框
border-left 左邊框
border-right 右邊框
代碼示例:
運行結(jié)果:
思維導(dǎo)圖:
邊框還可以調(diào)整四角的弧度:
border-radius 調(diào)整邊框的弧度,單位可以用px和%
把照片的邊框調(diào)整成圓形示例:
運行結(jié)果:
調(diào)整文本框弧度示例:
運行結(jié)果:
還可以針對四角來調(diào)整弧度:
border-bottom-left-radius 調(diào)整左下角的弧度
border-bottom-right-radius 調(diào)整右下角的弧度
border-top-right-radius 調(diào)整右上角的弧度
border-top-left-radius 調(diào)整右下角的弧度
代碼示例:
運行結(jié)果:
調(diào)整組件的陰影:
box-shadow可以調(diào)整組件的陰影面積,也可以設(shè)置陰影的顏色:
代碼示例:
運行結(jié)果:
前兩個數(shù)值設(shè)置為0,就能實現(xiàn)類似光暈的效果:
代碼示例:
運行結(jié)果:
圖片邊框:border-image
使用此屬性可以將圖片設(shè)置到邊框上,末尾可以使用round或stretch來定義圖片圍繞或是拉伸效果。
代碼示例:
運行結(jié)果:
代碼示例:
運行結(jié)果:
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。