本博客所講解 CSS 的版本爲 CSS 3 ，並嚴格遵循該版本規則
一、註釋
方法:
/* 註釋內容 */
二、選擇器
通常，我們將 CSS 選擇器分爲五類：
- 基本選擇器
- 複合選擇器
- 僞類選擇器
- 僞元素選擇器
- 屬性選擇器
① 基本選擇器
基本選擇器又分爲 通用選擇器、類選擇器、元素選擇器、id選擇器
下面演示源代碼爲例解釋：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 2px; /* padding 指一個元素的內容與其外邊界之間的空間 */
}
/* 通用選擇器，即讓所有標籤都滿足的內容 */
.content {
text-indent: 2em; /* text-indent 規定文本中首行文本的縮進 */
}
/* 類選擇器，當標籤使用此類（content）時，其內容才能生效 */
span {
margin: 0px;
color: blue;
}
/* 元素選擇器，讓所有此元素（span）都滿足的內容 */
#courserli {
color: red;
}
/* id選擇器，當標籤使用此id（courserli）時，其內容才能生效 */
</style>
</head>
<body>
<p class="content">這是第一句。<span>這一句話是灰色的。</span>這是第三句。</p>
<p class="content">這是第四句。<span id="courserli">這一句是紅色的。</span>這是第六句。</p>
</body>
</html>
網頁顯示如下：
這是第一句。這一句話是灰色的。這是第三句。
這是第四句。這一句是紅色的。這是第六句。
② 複合本選擇器
複合選擇器又分爲 交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰元素選擇器
但由於目前用不到這麼多種類的選擇器，固我選擇只講解其中幾個：
1、交集選擇器（僅有兩種類型的 交集選擇器）
依然演示源代碼爲例解釋：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span.content {
color: blue;
}
/* 元素選擇器 和 類選擇器 共同組成的 交集選擇器 */
/* 作用是當滿足選擇器條件（span、content）時，其內容才能生效 */
span#courser {
color: red;
}
/* 元素選擇器 和 id選擇器 共同組成的 交集選擇器 */
/* 作用是當滿足選擇器條件（span、courser）時，其內容才能生效 */
</style>
</head>
<body>
<p>這是第一句。<span class="content">這一句話是藍色的。</span>這是第三句。</p>
<p>這是第四句。<span id="courser">這一句是紅色的。</span>這是第六句。</p>
</body>
</html>
網頁顯示如下：
這是第一句。這一句話是藍色的。這是第三句。
這是第四句。這一句是紅色的。這是第六句。
2、並集選擇器
依然演示源代碼爲例解釋：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span,h1,p {
color: blue;
}
/* 並集選擇器，讓所有這些元素（span、h1、p）都滿足的內容 */
</style>
</head>
<body>
<h1>標題是藍色的</h1>
<span>此句也是藍色的</span>
<p>段落也是藍色的</p>
</body>
</html>
網頁顯示如下：
標題是藍色的
此句也是藍色的
段落也是藍色的
③ 僞類選擇器、僞元素選擇器、屬性選擇器
同理，目前用不到這麼多種類的選擇器，固我暫時不講解了
三、顏色
直接舉例：
color:#FF0000
color:red
color:rgb(255, 0, 0)
顯示的都是紅色
rgb 代表 red佔255, green佔0, blue佔0
其他顏色也可以用調色版調出來，參考小甲魚的調色版
四、字體
① 字體大小
標題
h1 {font-size:200％;} /* 將標題大小設置爲相對於普通文本使用的大小的百分比 */
h1 {font-size:2em;} /* 與上面效果相同，因爲 % 和 em是等價的，比如:50% = 0.5em */
文本字體
p {font-size:64px;} /* px即像素，文本字體是16px，其實這種方法對於標題也適用 */
② 字體系列
p {font-family:"Times New Roman",Georgia,Serif;} /* 當字體名稱非單詞時要加雙引號 */
p {font-family:Arial,Verdana,Sans-serif;} /* Sans-serif 是一個單詞 */
如果瀏覽器不支持第一種字體，則會嘗試下一個，但必須提供一個 Generic family 作爲求最後的選擇
| 類型 | 說明 |
|---|---|
| Font family | 特定的字體系列（如Times New Roman或Arial） |
| Generic family | 一組具有相似外觀的字體族（如Serif或Monospace） |
但網頁一般也建議使用等寬字體 Monospace
③ 字體和邊距問題
margin 屬性設置元素的外邊距
padding 屬性設置元素的內邊距（一般用於表格）
p {margin-top:2px} /* 指定的上外邊距爲 2px */
p {margin-bottom:2px} /* 指定的下外邊距爲 2px */
p {margin-left:2px} /* 指定的左外邊距爲 2px */
p {margin-right:2px} /* 指定的右外邊距爲 2px */
p {margin:2px} /* 指定的四周外邊距爲 2px */
padding 與 margin 使用方法同理
五、邊框
依然演示源代碼爲例解釋：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.box { border: solid; border-width: thin; width: 100%; padding:0.2em;}
/* 裏面是一些邊框的屬性 */
</style>
</head>
<body>
<div class="box">
<pre>
The content within this DIV element will be enclosed
in a box with a thin line around it.
</pre>
</div>
</body>
</html>
網頁顯示如下：
備註：目前只說明 CSS 3 存在邊框這個方法，具體一些元素和屬性等需要時再掌握