css學習(1)
阿新 • • 發佈：2018-04-11
ack box AS 頁面 idt 復合 width 在一起 定義 
一.標簽選擇器
標簽{屬性：值;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*標簽選擇器*/ div{ font-size:50px; color: green; background-color:yellow; width:300px標簽選擇器; height:200px; } p{ color: black; font-size: 60px; } </style> </head> <body> <div>標簽選擇器1</div> <div>標簽選擇器2</div> <p>標簽選擇器3</p> <p>標簽選擇器4</p> <div>標簽選擇器5</div> </body></html>
二.類選擇器
.自定義類名{屬性:值; 屬性:值；}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ font-size:40px; color: #ff0000; width類選擇器: 400px; height: 300px; background-color:#999; } .miss{ text-indent:2em; /* text-align: right; */ } </style> </head> <body> <div class="box miss" >類選擇器1</div> <div>類選擇器2</div> <p class="box">類選擇器3</p> <p>類選擇器4</p> <span class="box">類選擇器5</span> </body> </html>
三.id選擇器
#自定義名稱{屬性:值;}
特點： 一個ID選擇器在一個頁面只能調用一次。如果使用2次或者2次以上，不符合w3c規範，JS調用會出問題。
一個標簽只能調用一個ID選擇器。
一個標簽可以同時調用類選擇器和ID選擇器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ font-size: 40px; color: rgb(0,0,255); background-color: rgb(255,255,0); } .box{ text-indent: 2em; } </style> </head> <body> <div id="box" class="box">ID選擇器1</div> <div id="box">ID選擇器2</div> <p>ID選擇器3</p> <p>ID選擇器4</p> </body> </html>ID選擇器
四.復合選擇器
概念：兩個或者兩個以上的基礎選擇器通過不同的方式連接在一起。
(1) 交集選擇器
標簽+類（ID）選擇器{屬性：值；}
特點：即要滿足使用了某個標簽，還要滿足使用了類（id）選擇器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size:50px;
}
div.box{
color:blue;
}
div#miss{
width: 400px;
height: 300px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="box">交集選擇器1</div>
<p class="box">交集選擇器2</p>
<div id="miss">交集選擇器3</div>
</body>
</html>
(2)後代選擇器
選擇器+空格+選擇器{屬性：值;}
後代選擇器首選要滿足包含（嵌套）關系。
父集元素在前邊，子集元素在後邊。
特點：無限制隔代。
只要能代表標簽，標簽、類選擇器、ID選擇器自由組合。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*.box{ font-size:40px; color:red; } div span{ font-size: 50px; }*/ /*.box span{ background-color: blue; }*/ /* .box .miss{ color:red; }*/ .box span{ color:red; } </style> </head> <body> <div class="box"> <p><span class="miss">後代選擇器1</span> <span>後代選擇器2</span> </p> </div> <div class="box"><span>後代選擇器3</span></div> </body> </html>後代選擇器
(3) 子代選擇器
選擇器>選擇器{屬性:值;}
選中直接下一代元素。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div>span{ 8 color:red; 9 font-size:40px; 10 } 11 p>span{ 12 color:green; 13 font-size:60px; 14 } 15 16 </style> 17 </head> 18 <body> 19 <div> 20 <p><span>子代選擇器1</span></p> 21 <span>子代選擇器2</span> 22 23 </div> 24 </body> 25 </html>子代選擇器
(4)並集選擇器
選擇器+，+選擇器+，選擇器{屬性:值;}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box,#miss,span,h1{ 8 font-size:100px; 9 color: #fff; 10 background-color: green; 11 12 } 13 </style> 14 </head> 15 <body> 16 <div class="box">並集選擇器1</div> 17 <p id="miss">並集選擇器2</p> 18 <span>並集選擇器3</span> 19 <h1>並集選擇器4</h1> 20 </body> 21 </html>並集選擇器
css學習(1)