CSS樣式規範 1.類選擇器 2.標簽選擇器 3.id選擇器 4.CSS樣式的子選擇器 類選擇器 1.必背的固定結構，成為CSS樣式標記。所有的樣式都可以寫成CSS樣式的標記中 <style type="text/css"> </style> 2. type=“text/css” 意思是聲明這個標記 ...
CSS樣式規範
1.類選擇器
2.標簽選擇器
3.id選擇器
4.CSS樣式的子選擇器
類選擇器
1.必背的固定結構，成為CSS樣式標記。所有的樣式都可以寫成CSS樣式的標記中
<style type="text/css">
</style>
2. type=“text/css” 意思是聲明這個標記是css樣式類型
type：類型的意思
text：文本的意思
css：疊層樣式表
3.類選擇器語法格式 .類名 （點加類名）
寫的位置：在css樣式的標記中
調用方法在HTML標簽內部寫上 class=類名
4.命名規範
建議是純字母或字母後面加數字，請勿數字開頭，其它雖然可以使用請問使用
5.為什麼要把行內的css提取到css的標記中
優點一：保持HTML的層次清晰，方便檢測錯誤
優點二：可以重覆使用css樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style type="text/css">
/*類選擇器*/
.box{width: 200px; height: 50px; background-color: aqua;border: 10px salmon solid}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
樣式結果
ID選擇器
1. ID選擇器的語法格式 #ID名稱
寫的位置：在CSS樣式的標記中
調用方法在HTML標簽內部寫上 id="ID名稱"
2. 命名規範
同類上一節的類名一樣的道理
3. 為什麼要把行內的CSS提取到CSS的標記中
優點一：保持HTML的層次清晰，方便檢測錯誤
優點二：區分優先順序，如果需要復用請選擇類選擇器
4. ID不允許重覆調用，id就想身份證編號一樣，每個都是不同的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*ID選擇器*/
/*ID唯一標識符的意思,設計的目的就是讓id唯一性*/
#box{width: 200px;height: 50px;background-color: bisque}
#boy,#boy1,#boy2{width: 200px;height: 50px;background-color: bisque;
border: 2px seagreen solid}
#gil,.doc{width: 200px;height: 50px;background-color: bisque;
border: 2px seagreen solid}
/*設置多個共用一個參數*/
</style>
</head>
<body>
<div id="gil"></div>
<div class="doc"></div>
<div class="doc"></div>
</body>
</html>
樣式結果
標簽名選擇器
用到多個標簽使用相同的屬性，可以寫成選擇器。方面下麵所有用到這個標簽時共有這個屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*標簽名 選擇器*/
div{border: 10px salmon solid; width:99px;height: 20px}
</style>
</head>
<body>
<div>周傑倫</div>
<div>孫其虎</div>
<div>張傑</div>
</body>
</html>
CSS樣式的子選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子選擇器</title>
<style type="text/css">
div b{color: crimson}
/*隻影響 具有div 下的 b子標簽受影響*/
div >b{color: skyblue}
/*隻影響兒子，不影響孫子*/
</style>
</head>
<body>
<div><b>美國</b></div>
<div><b><b>中國</b></b></div>
</body>
</html>
樣式結果
二、樣式優先順序
1.CSS執行順序，在同等優先順序的情況下，下一行的如果與上一行的CSS有衝突一下一行為標準
在優先順序不同的情況下，優先順序高的覆蓋優先順序的低的。
2.選擇器優先順序順序排列
第一名：行內樣式 1000;
第二名：ID選擇器 100;
第三名：元素名.類名 10;
第四名：類名
第五名：標簽名 1;
3.主意事項：
當你寫的CSS不起作用的時候，優先檢測代碼有沒有寫錯
第二檢查優先順序情況有沒有錯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>優先順序定義</title>
<style type="text/css">
.red{color: aqua}
.blue{color: crimson}
.dce{color: antiquewhite}
/*在同級中相同的屬性，標準調用下麵的*/
div{color: blue}
/*影響範圍越廣的，優先順序越低*/
#blue{ color: springgreen}
#ket{color: blueviolet}
div.red{color: aqua}
/*類名>元素名*/
/*ID優先順序最高*/
#alex b{color: chartreuse}
b{color: blue;border: 2px cornsilk solid}
</style>
</head>
<body>
<div id="ket" class="red" style="color: black">優先sex</div>
<!--在行內樣式最高-->
<div id="blue" class="red">優先</div>
<div class="blue red dce"> 優先順序</div>
<div id="alex"><b>中國</b></div>
<b>美國</b>
</body>
</html>
樣式
