通過前四篇的HTML教學後
正式進入到CSS教學篇了
何謂CSS
CSS 的全名為 Cascading Style Sheets
中文稱為"樣式表"
可以讓瀏覽器把我們所撰寫的HTML套上效果(大小、色彩、間距、位置.....etc)
CSS的使用方式有三種
1.在<head>標籤中加入<style type="text/css">CSS內容</style>
2.引入外部的CSS檔案，一樣在<head>中加入<link href="檔案路徑" rel="stylesheet" type="text/css" />
3.直接在HTML標籤中使用CSS，<span style="CSS內容">
但是通過第1.2點所引入或撰寫的CSS要怎麼知道必須套用到哪一些我們所寫的HTML標籤呢??
這就要使用到所謂的CSS選擇器了
通過選擇器可以精準的套用到一個或多個HTML標籤
以下就來介紹選擇器的種類和用法吧
1. 通用選擇器(Universal selector)
這個選擇器的特點就是，會套用到"所有的元素"
使用方法：
*{
CSS內容
}
範例：
<html>
<head>
<style type="text/css">
*{
font-size:200px;
}
</style>
</head>
<body>
<span>Test</span>
<div>Test</div>
Test
</body>
</html>
如果忘記HTML標籤的話，可以去翻一下之前所寫的文章
程式語言教學-HTML篇-01
程式語言教學-HTML篇-02
程式語言教學-HTML篇-03
程式語言教學-HTML篇-04
執行範例後會發現，不管是<span>、<div>甚至純文字都會被"font-size:200px;"這個效果給放大
所以這種選擇器很適合套用廣域的規格
2. Type selectors(類型選擇器)
這個選擇器是針對標籤去做套用
使用方法：
標籤名{
CSS內容
}
範例：
<html>
<head>
<style type="text/css">
div{
font-size:200px;
}
</style>
</head>
<body>
<span>Test</span>
<div>Test</div>
Test
</body>
</html>
執行後只有DIV標籤會被套用CSS規則，如果有多個標籤可以用逗點區隔
範例2：
<html>
<head>
<style type="text/css">
div,span{
font-size:200px;
}
</style>
</head>
<body>
<span>Test</span>
<div>Test</div>
Test
</body>
</html>
3. ID selectors(ID選擇器)
這個選擇器是針對HTML標籤中的ID屬性去套用，ID名稱前面必須加上關鍵字"#"，ID大小寫沒有差異
使用方法：
#ID名稱{
CSS內容
}
範例：
<html>
<head>
<style type="text/css">
#DIV{
font-size:200px;
}
</style>
</head>
<body>
<span>Test</span>
<div id="DIV">Test</div>
Test
</body>
</html>
執行後只有ID為DIV的標籤被套用
4. Class selectors(類選擇器)
這個選擇器是針對HTML標籤中的Class屬性去套用，Class名稱前面必須加上關鍵字"."，大小寫一樣沒有差別
使用方法：
.Class名稱{
CSS內容
}
範例：
<html>
<head>
<style type="text/css">
.DIV{
font-size:200px;
}
</style>
</head>
<body>
<span>Test</span>
<div class="DIV">Test</div>
Test
</body>
</html>
Class selectors 和 ID selectors 使用上其實大同小異，但是標籤可以套用多個Class樣式，兩個樣式名稱中間用空格分開
範例2：
<html>
<head>
<style type="text/css">
.DIV{
font-size:200px;
}
.RED{
color:red;
}
</style>
</head>
<body>
<span>Test</span>
<div class="DIV RED">Test</div>
Test
</body>
</html>
執行後不只DIV標籤中的文字放大，連同文字顏色也被改成紅色
5. Descendant selectors(後代選擇器)
所謂的後代就是被一組標籤包在裡面的標籤(上下關係)，兩個關鍵字中間用空格分開
使用方法：
關鍵字1 關鍵字2{
CSS內容
}
範例：
<html>
<head>
<style type="text/css">
div span{
font-size:200px;
}
</style>
</head>
<body>
<div>
<span>Test</span>
Text
</div>
</body>
</html>
執行後會發現被DIV包住的SPAN標籤被放大了，但是一般文字卻維持著同樣的大小
如果換成以下的狀況呢?
範例2：
<html>
<head>
<style type="text/css">
div span{
font-size:200px;
}
</style>
</head>
<body>
<div>
<a>
<span>Test</span>
</a>
Text
</div>
</body>
</html>
SPAN標籤被A標籤包住，而A標籤又被DIV標籤包住
但是執行後SPAN標籤一樣被CSS套用了，所以Descendant selectors會把關鍵字1包住的"所有"關鍵字2的標籤套用CSS
其實關鍵字並非只能是標籤名，用Class或是ID也可以
範例3：
<html>
<head>
<style type="text/css">
div .sp{
font-size:200px;
}
</style>
</head>
<body>
<div>
<a>
<span>Test</span>
<span class="sp">Test</span>
</a>
Text
</div>
</body>
</html>
範例3中的CSS會被解讀成在"DIV標籤"下的所有"Class屬性"為sp的標籤
以上就是在網頁設計上比較常用的選擇器，至於哪些標籤可以套用哪些效果，這就要自己去GOOGLE了
嘗試配合之前所學的HTML，撰寫出一個漂亮的網頁吧
下一篇會繼續介紹一些比較特殊的選擇器