首頁 > 開發者 > JavaScript
HTML （css樣式規範），htmlcss樣式規範
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>
樣式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
