CSS入門之樣式表與選擇器詳解
阿新 • • 發佈：2018-12-16
CSS用來定義HTML頁面中文字顯示樣式，還有類、層等特性，還可以對文字重疊、定位等。引入CSS到HTML中，主要是因為在傳統的HTML上控制文字顯示樣式和版面非常難，引入CSS之後，控制方式變得簡單，頁面也變得更加美觀、豐富。
所以CSS主要就是用來提供樣式，樣式一般用樣式表來描述，每一種樣式對應一種樣式表。
一 樣式表
一個樣式表的組成有三部分：選擇符、屬性、屬性值。看下面程式碼中註釋：
<style> h2 { <!--h2是選擇符，又稱選擇器，樣式表的標記--> font-size:宋體; <!--font-size是屬性，宋體就是它的值，兩者通過:號隔開--> } </style>
屬性：可以指定字型，背景，佈局，邊界等。
注：樣式表包含在<style>中，<style>標籤可以位於<head>標籤中，也可以與<head>標籤並列。
二 CSS選擇器
CSS常用選擇器有標記選擇器，類別選擇器，ID選擇器等。使用選擇器可以對不同HTML標記進行控制，從而實現各種效果。
1）標記選擇器
標記選擇器定義的程式碼示例：
<style> a { font-size:9px; <!--設定字型大小--> color:#F93; <!--設定字型顏色--> } </style>
標記選擇器宣告哪些標記採用對應的CSS樣式。比如上面程式碼中的a選擇器，宣告頁面中所有的<a>標記的樣式風格。如果選擇器是img，則對應<img>；如果選擇器是table，則對應<table>標記。瀏覽器解析時，會自動為這些標記應用對應的標記選擇器，不需要再HTML文字編輯時顯式指定。
2）類別選擇器
標記通過class屬性來應用類別選擇器。
演示類別選擇器：（注意類別選擇器的定義形式）
<!--演示類別選擇器--> <html> <head> <title>演示類別選擇器</title> </head> <!--一下為定義的CSS樣式--> <style> .one { <!--定義類名為one的類別選擇器--> font-family:宋體; <!--設定字型--> font-size:24px; <!--設定字型大小--> color:yellow; <!--設定字型顏色--> } .two { font-family:宋體; font-size:16px; color:red; } .three { font-family:宋體; font-size:12px; color:red; } .four { color:green; } </style> <body> <h2 class="one"> 應用了選擇器one <!--定義了樣式後頁面會自動載入樣式--> </h2> <p> 正文內容1 </p> <h2 class="two"> 應用了選擇器two </h2> <p>正文內容2</p> <h2 class="three four"> 應用了選擇器three </h2> <p>正文內容3</p> </body> </html>
瀏覽器效果：
注：HTML標記可以應用多種類別選擇器。比如<h2 class="three four">（上述演示程式碼中有）。
3）ID選擇器
HTML標記通過id屬性來應用ID選擇器，因為每一個標記的id都不同，所以一個ID選擇器只能應用一次。
ID選擇器演示程式碼如下：
<!--演示ID選擇器-->
<html>
<head>
<title>演示ID選擇器</title>
</head>
<!--定義ID選擇器-->
<style>
#first {
font-size:18px;
}
#second {
font-size:24px;
}
#three {
font-size:36px;
}
</style>
<body>
<p id="first">ID選擇器</p>
<p id="second">ID選擇器</p>
<p id="three">ID選擇器</p>
</body>
</html>瀏覽器開啟檔案截圖：
