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