基本選擇器使用,看下面例子css
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--樣式標籤--> 7 <style> 8 /* id選擇器用:# */ 9 #d1{ 10 background-color: crimson; 11 } 12 /* class選擇器用:. */ 13 .c1{ 14 background-color: lightcoral; 15 } 16 /*標籤選擇器:會應用到整個頁面全部的標籤上*/ 17 p{ 18 background-color: aquamarine; 19 } 20 /*標籤層級選擇器*/ 21 div span{ 22 background-color: brown; 23 } 24 /*id組合選擇器:用逗號隔開,表示每一個id的標籤都會具有一樣的樣式*/ 25 #d2,#d3{ 26 background-color: blanchedalmond; 27 } 28 29 .c2{ 30 width: 100px; 31 height: 100px; 32 } 33 /*屬性選擇器*/ 34 div[jnz="test"]{ 35 background-color: blueviolet; 36 } 37 </style> 38 </head> 39 <body> 40 <div id="d1">id選擇器</div> 41 <div class="c1">class選擇器</div> 42 <div> 43 <p>標籤選擇器</p> 44 </div> 45 <div> 46 <span>標籤層級選擇器</span> 47 </div> 48 <div id="d2">id組合選擇器</div> 49 <div id="d3">id組合選擇器</div> 50 51 <div class="c2 c1">多個樣式組合使用</div> 52 53 <div jnz="test">屬性選擇器</div> 54 55 </body> 56 </html>
選擇器引用方式,以及優先級:html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--第二種方法:在head部分使用style標籤--> 7 <style> 8 .c1{ 9 background-color: brown; 10 } 11 </style> 12 13 <!--第三種方法:使用link引入css文件--> 14 <link rel="stylesheet" href="css_file.css"> 15 16 </head> 17 <body> 18 <!--總結 CSS樣式優先級:由內到外,由近到遠--> 19 <!--第一種方法:直接引用style屬性--> 20 <div class="c1" style="background-color: aquamarine"></div> 21 22 </body> 23 </html>
水平居中,垂直居中,浮動:spa
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 width: 200px; 9 height: 200px; 10 text-align: center; 11 /*水平居中*/ 12 line-height: 200px; 13 /*垂直居中*/ 14 background-color: aqua; 15 } 16 .f1{ 17 /*寬度能夠使用百分比,可是高度不能夠*/ 18 width:30%; 19 height: 100px; 20 background-color: crimson; 21 /*浮動設置*/ 22 float: left; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="c1" style="background-color: lightcoral">adss</div> 28 <div class="f1"></div> 29 <div class="f1" style="background-color: blue"></div> 30 <div class="f1" style="background-color: blueviolet"></div> 31 32 <div style="display: inline">塊轉行內</div> 33 <span style="display: block">行內轉塊</span>
<div style="display: none">隱藏內容</div>
34 </body> 35 </html>
內邊距,外邊距code
1 <!--margin:外邊距,不改變自身,針對外側進行像素移動--> 2 <div style="border: 1px red solid;width: 100%;height: 100px;"> 3 <div style="margin-top:1px;width: 100%;height: 48px;border: 1px red solid;background-color: lightcoral"></div> 4 </div> 5 6 <!--padding:內邊距,改變自身,增長本身的體積--> 7 <div style="border: 1px red solid;width: 100%;height: 100px;"> 8 <div style="padding-top:1px;width: 100%;height: 48px;border: 1px red solid;background-color: lightcoral"></div> 9 </div>
position:htm
絕對定位blog
.c1{ width: 100%; height: 50px; background-color: lightcoral; /*絕對定位*/ position: fixed; } .c2{ width: 50px; height: 1000px; background-color: blueviolet; } <body> <div class="c1"></div> <div class="c2"></div> </body>
相對定位:it
1 <div style="position:relative;width: 500px;height: 500px;border: black 1px solid"> 2 <div style="position:absolute;width: 100px;height: 100px;background-color: aquamarine"></div> 3 <div style="position:absolute;top: 0;right:0;width: 100px;height: 100px;background-color: rebeccapurple"></div> 4 <div style="position:absolute;left:0;bottom:0;width: 100px;height: 100px;background-color: red"></div> 5 <div style="position:absolute;right:0;bottom:0;width: 100px;height: 100px;background-color: goldenrod"></div> 6 </div>
z-index:分層io
1 <!--z-index:1-99的任意一個數字,數字大的顯示在上層--> 2 <div style="width: 200px;height: 200px;position: relative;background-color: gold;border: solid red 1px"> 3 <div style="z-index:10;position:absolute;width:200px;height:200px;background-color: red"></div> 4 <div style="position:absolute;width:200px;height:200px;background-color:olivedrab"></div> 5 </div>