編輯本博客css
p{
color: red;
font-size: 20px;
}
網頁字體大小通常爲12px或者16pxhtml
#second_span{
color:blue;
}
標籤id在同一個頁面中惟一,任何標籤均可以設置id,命名規範:以字母開頭,能夠有數字、下劃線、中橫線,嚴格區分大小寫。css中儘可能不用id設置樣式web
/*類選擇器*/
.title{
color:yellowgreen;
font-size: 16px;
}
任何標籤均可以加類屬性,類能夠重複。同一個標籤能夠同時屬於多個類,不通類名中間用空格隔開。屬性衝突最後一個生效。必定要有公共類的概念,每一個類要儘可能的小,供多個標籤使用。ide
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習</title> <style type="text/css"> .color{ color:green; } .underline{ text-decoration: underline; } .size{ font-size: 40px; } </style> </head> <body> <div> <p class="size color">段落1</p> <p class="lv2 color underline">段落2</p> <p class="size underline">段落2</p> </div> </body> </html>
根據標籤嵌套關係進行選擇post
<style type="text/css"> <!--後代標籤--> div p{ color:yellow; } div div p{ color:gray; } .container div{ color:red; } </style>
用大於符號選擇,僅選擇下一代標籤,不會選擇後代全部標籤字體
/*--子代標籤--*/ .container >p{ color:yellowgreen; }
做用於兩個樣式交集的對象上spa
h3{ width:200px; color:red; } .active{ font-size:30px; } /*交集選擇器*/ h3.active{ background-color:yellow; }
同一個樣式做用於多個標籤上,用逗號分隔。3d
/*經過並集選擇器同時設置多個標籤樣式*/ a,h6{ font-size: 20px; color:#666; text-decoration:none; }
resert csscode
屬性選擇器一般使用在表單控件中,使用比較頻繁htm
/*查找具備for屬性的label標籤*/ label[for]{ color:red; font-size:30px; } label[for="pwd"]{ color:green; } /*查找全部tetle屬性等於hello的標籤*/ [title="hello"]{ color:green; } /*全部title屬性以hello開頭的元素*/ [title^="hello"] { color:green; } /*全部title屬性以hello結尾的元素*/ [title$="hello"]{ color:green; } /*全部title屬性包含(字符串)title的元素*/ [title*="title"]{ color:green; } /*全部title屬性中(多個值或以空格分開)包含title的元素*/ [title~="title"]{ color:green; }
~開頭$結尾,*字符串包含~多值包含
<style type="text/css"> /*後代選擇器:.box ul*/ /*交際選擇器:li.item1*/ /*沒有被訪問的標籤樣式*/ .box ul li.item1 a:link{ color:green; } /*被訪問後的a標籤的樣式*/ .box ul li.item2 a:visited{ color:yellow; } /*鼠標懸浮於a連接上的樣式*/ .box ul li.item3 a:hover{ color:red; } /*點擊時a標籤的樣式*/ .box ul li.item4 a:active{ color:red; } </style>
<body> <div class="box"> <ul> <li class="item1"><a href="#">沒有被訪問的標籤樣式</a></li> <li class="item2"><a href="#">被訪問後的a標籤的樣式</a></li> <li class="item3"><a href="#">鼠標懸浮於a連接上的樣式</a></li> <li class="item4"><a href="#">點擊時a標籤的樣式</a></li> </ul> </div> </body>
<style type="text/css"> /*選中第一個元素*/ div ul li:first-child{ font-size:25px; color:red; } /*選中第3個元素,從1開始*/ div ul li:nth-child(3){ font-size:25px; color:green; } /*選中最後一個元素*/ div ul li:last-child{ font-size:25px; color:red; } /*n表示選中全部的,從0開始,0表示沒有被選中*/ div ul li:nth-child(n){ font-size:25px; color:red; } /*選中全部偶數標籤*/ div ul li:nth-child(2n){ font-size:25px; color:red; } /*選中全部基數標籤*/ div ul li:nth-child(2n-1){ font-size:25px; color:red; } /*相隔多個後選中,如相隔3個選中*/ /*隔m換一,則(m+1)n+1*/ div ul li:nth-child(4n+1){ font-size:25px; color:red; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>僞元素選擇器</title> <style type="text/css"> p.p1:first-letter{ font-size:48px; } p.p2:before{ content:"----"; color:red; } p.p3:after{ content:"#####"; color:green; } </style> </head> <body> <div class="box"> <p class="p1">文本首字母設置特殊樣式</p> <p class="p2">用於在元素的前面插入新內容</p> <p class="p3">在元素內容後面插入新的內容</p> </div> </body> </html>
後期用於清除浮動