標籤：chart back char ted 標題 htm under 簽名 應該
樣式表&類別選取器分類
樣式表分類：
1.內聯式樣式表：在標籤內部寫樣式代碼，精確但不方便，增加工作量，後期修改麻煩。
2.內置樣式表：一般寫在head內 以<style>......</style>方式可以控制整個頁面內的某個標籤樣式。
3.外聯式樣式表：單獨將樣式表定義成一個css檔案，然後在css檔案中調節頁面樣式
一般會在head標籤內寫一句：<link type="text/css" rel="styleseet" src="檔案所在目錄">
注：在css檔案中不用在<style></style>標籤內用類別選取器。！！！
4.注入樣式表：在一個css檔案中引入另一個css檔案
例：
在A.css檔案中寫 @inport url(B.css);
即表示在A.css檔案中引入B.css檔案中的樣式
類別選取器分類：
1.全域選取器：*後跟大括弧；作用：控制全域頁面整體調。
2.ID選取器：#後跟定義的id名加大括弧；用法：一般應用於單個標籤。ID值不可以重複
3.class選取器： .後面跟定義的class名加大括弧； 註：class值可以重複，用的最多的應該就是他。
4.標籤選取器：直接寫標籤名跟大括弧；
5.複合選取器：大括弧前寫多種選取器用逗號隔開；如 #c1,.c2,p,a{
.......
}
6.關聯選取器：說白了就是嵌套使用，用空格彼此分開由外往內選擇要選的元素。
例：
div p em{..........} 最普通的標籤嵌套格式 其他格式也可以使用。！！！！
<div>
<p>
<em>關聯選取器案例</em>
</p>
</div>
7.虛擬元素選取器：對同一個標籤的不同狀態使用樣式。
例：
a標籤格式
a:link{.....} //a標籤連結狀態
a:hover{......} //滑鼠放上去的狀態
a:visited{.......} //訪問過的狀態
<a href="http://www.baidu.com">百度</a>
上述狀態會使所有a標籤狀態都一樣
例2：
a標籤 虛擬元素與類別選取器同時使用
a.one:link{.....} //a標籤連結狀態
a.two:hover{......} //滑鼠放上去的狀態
a.three:visited{.......} //訪問過的狀態
<a class="one" href="http://www.baidu.com">百度</a>
<a class="two" href="http://www.sina.com.cn">新浪</a>
<a class="three" href="http://www.souhu.com">搜狐</a>
不同的連結樣式不一樣
下面是代碼執行個體：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/**全域選取器: *後面跟大括弧*/
*{
margin: 0px; /*外邊距為0像素*/
padding: 0px; /*內邊距為0像素*/
}
/*不常用的 自己定義屬性的類別選取器*/
[doubi="2"]{
color: chartreuse;
}
/*類別選取器的關聯選取器： 由標籤最外層向內找到你所要找的元素 注意沒個選取器之間的空格 */
#c2 .class-2 em{
color: crimson;
}
/*複合選取器:大括弧前寫多種標籤並用逗號隔開*/
span,p,a,#c1,.class-1{
width: 200px;
height: 50px;
background-color: cyan;
}
/*id選取器: #直接跟id定義的名*/
#c1{
width: 100px;
height: 140px;
}
/*class選取器: .後面跟class名 */
.class-1{
width: 200px;
height: 100px;
}
/*標籤選取器 直接打標籤名即可選擇標籤內元素
注:只要是有span標籤的都會被選中(span只是其中一種也可是其他標籤)*/
span{
width: 50px;
height: 100px;
/*這裡冒號後面必須寫"單位"*/
}
</style>
<!-- 引用外部css檔案-->
<link type="text/css" rel="stylesheet" href="你建立的CSS檔案位置"/>
<title></title>
</head>
<body>
<span>
span選取器更改
</span>
<div class="class-1">
class選取器更改樣式
</div>
<!--style="可以隨便加樣式用；隔開用；結尾"-->
<div style="background: blue; color: black;">
哈哈哈哈哈哈
</div>
<p id="c1">
id選取器使用案例
</p>
<a>
A標籤選取器案例
</a>
<center id="c2">
<p class="class-2">
<em>
關聯選取器案例
</em>
</p>
</center>
<div doubi="2">
自訂屬性選取器案例
</div>
</body>
</html>
說一下優先順序的問題
<div style="background: blue; color: black;">
</div>
優先順序最高所以他的使用率應該是最低的，給自己留一個修改機會。若對同一個元素進行編輯最後編輯的樣式會覆蓋之前編輯的樣式
class用的應該是最多的
注：
div:division 可以吧div理解成一個房子，裡面可以放很多東西。
即<div>...........</div>相當於一個容器，裡面可以容納段落，標題，乃至章節，搞要，備忘等等。
注意：<p>........</p>內不能放置<div>.....</div>標籤，通常會把<p></p>放置於<div></div>內。
我只是一隻菜鳥非喜勿噴！有什麼不對的地方您可以私信我。請您協助我成長！
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
