目錄
1. 內聯樣式
2. 層疊樣式表CSS
2.1. 類選擇器
2.1.1. 顏色設置
2.1.2. 字號設置
2.1.3. CSS邊框屬性
2.1.4. 設置背景顏色
2.1.5. 設置布局邊框
2.1.6. 樣式的優先級別
2.2. ID屬性及選擇器
2.3. 顏色幾種表示方法
2.3.1. 用英文顏色單詞
2.3.2. 用6 位十六進制數字
2.3.3. 用rgb值
--------------------黃金分割線----------------------
1. 內聯樣式
樣式的屬性有很多，其中color用來指定顏色。
以下是為h2元素的文本顏色設置為藍色的內聯樣式示例代碼：
<h2 style="color: blue">CatPhotoApp</h2>
2. 層疊樣式表CSS
內聯樣式是為元素添加樣式的最簡單有效的方式，但是更易於維護的方式是使用層疊樣式表CSS（Cascading Style Sheets）。
在代碼的最頂端，創建一個如下的style元素：
<style>
</style>
2.1. 類選擇器
2.1.1. 顏色設置
在這個style元素內, 你可以為所有的h2元素創建一個元素選擇器。比如，如果你想要將所有的h2元素設置為紅色, 你的代碼應該看起來像這樣：
<style>
選擇器 {屬性名稱: 屬性值;}
h2 {color: red;}
</style>
注意：一定要在屬性值的后面加上分號;。
我們先聲明一個類選擇器：
<style>
.blue-text {
color: blue;
}
</style>
上面的代碼在 <style> 標記中聲明了一個叫做blue-text 的類樣式。
然后在h2元素上應用我們聲明的類選擇器：
<h2 class="blue-text">CatPhotoApp</h2>
注意：在CSS中，類選擇器應該添加.為前綴。
而在HTML中，class屬性不能添加.為前綴。
這是因為在CSS中如果類選擇器前不添加. 瀏覽器就會誤認為類選擇器是一個元素選擇器。
2.1.2. 字號設置
字號是由樣式屬性font-size來控制的, 如下：
h1 {
font-size: 30px;
}
用font-family屬性來設置元素的字體。
如果你想把副標題的字體設置為Sans-serif，你可以使用下面的CSS：
h2 {
font-family: Sans-serif;
}
現在，讓我們來導入谷歌字體。
首先，你需要用link標簽來引入谷歌Lobster字體。
復制下面的代碼片斷並將其粘貼到你的代碼編輯器的頂部：
<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
有幾種默認的字體是所有瀏覽器都可用的，包括Monospace、Serif和Sans-Serif。
當某種字體不可用時，你可以讓瀏覽器自動降級到另一種字體。
例如，如果你想讓段落的字體為Helvetica，但你同時想在Helvetica字體不可用時自動降級使用Sans-Serif字體，你可以使用如下CSS樣式：
p {
font-family: Helvetica, Sans-Serif;
}
2.1.3. CSS邊框屬性
CSS 邊框的屬性有style(樣式)、color(顏色)、width(寬度)、height(高度)等。
舉個例子，如果我們想要讓一個HTML元素的邊框顏色為紅色、邊框寬度為5像素(px)、邊框樣式為固體(solid)，代碼如下:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
提示：你可以應用多個class到一個元素，只需要在多個class之間用空格分開即可。例如：
<img class="class1 class2">
如果感覺邊框比較尖，我們可以通過CSS的一個叫border-radius(邊框半徑)的屬性來讓它的邊框變成圓的。
你同樣可以使用像素來指定border-radius的屬性值，如border-radius:10px;。
除了像素，你還可以使用百分比來指定border-radius邊框半徑的值，如border-radius:50%;
2.1.4. 設置背景顏色
你可以用 background-color 屬性來設置一個元素的背景顏色。
例如，如果你想把一個元素的背景顏色設置為green，你應該把這些加到你的 style 元素中：
.green-background {
background-color: green;
}
2.1.5. 設置布局邊框
有三個影響HTML元素布局的重要屬性：padding(內邊距)、margin(外邊距)、border(邊框)。
2.1.5.1. padding(內邊距)
元素的 padding 控制元素內容 content和元素邊框 border 之間的距離。
有時你想要自定義元素，使它的每一個邊具有不同的 padding。
CSS 允許你使用 padding-top、padding-right、padding-bottom 和 padding-left來控制元素上右下左四個方向的 padding。
除了分別指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 屬性外，你還可以集中起來指定它們，舉例如下：
padding: 10px 20px 10px 20px;
這四個值以順時針方式排列：頂部、右側、底部、左側，簡稱：上右下左。
2.1.5.2. margin(外邊距)
元素的外邊距 margin 控制元素邊框 border 和元素實際所占空間的距離。
如果你將一個元素的 margin 設置為負值，元素將會變大。
有時你想要自定義元素，使它的每一個邊具有不同的 margin。
CSS 允許你使用 margin-top、margin-right、margin-bottom 和 margin-left 來控制元素上右下左四個方向的 margin。
除了分別指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 屬性外，你還可以集中起來指定它們，舉例如下：
margin: 10px 20px 10px 20px;
這四個值以順時針方式排列：頂部、右側、底部、左側，簡稱：上右下左。
2.1.6. 樣式的優先級別
瀏覽器讀取 CSS 的順序是從上到下，這意味着，在發生沖突時，瀏覽器會使用最后的 CSS 聲明。
id 屬性總是比類屬性具有更高的優先級。無論在 style 元素 CSS 的哪個位置進行聲明，id 聲明都會覆蓋 class 聲明。
行內樣式將覆蓋style 中定義的所有 CSS。
還有最后一種覆蓋 CSS 的方法，這是所有方法中最強大的，但是在講它之前，我們先講講為什么你要覆蓋 CSS。
很多情況下，你會使用 CSS 庫，這些庫可能會意外覆蓋掉你自己的 CSS。所以當你需要確保某元素具有指定的 CSS 時，你可以使用!important。
舉例如下：
color: pink !important;
2.2. ID屬性及選擇器
除了 class屬性之外，每一個 HTML 元素還可以使用 id 屬性。
使用 id 屬性有若干好處，一旦當你開始使用 jQuery 的時候你會有更深的體會。
id 屬性應該是唯一的，雖然瀏覽器並不強制唯一，但基於最佳實踐，這一點是被廣泛認可的，所以請不要給一個以上的元素設置相同的id 屬性。
下面舉例說明了如何設置h2 元素的id屬性為cat-photo-app。
如：<h2 id="cat-photo-app">
和類選擇器一樣，你也可以使用ID選擇器來聲明樣式。
聲明一個叫cat-photo-element的ID選擇器 ，並設置背景色為綠色。：
#cat-photo-element {
background-color: green;
}
注意：在你的 style 元素內部，定義類選擇器必須添加 . 為前綴，定義ID選擇器必須添加 #為前綴。
2.3. 顏色幾種表示方法
2.3.1. 用英文顏色單詞
如 color: blue;
2.3.2. 用6 位十六進制數字
在 CSS 中，我們可以使用 6 位十六進制數字來表示顏色，每 2 位分別表示紅色 (R)、綠色 (G) 和藍色 (B) 成分。例如， 是黑色，同時也是可能的數值中最小的，如 color: #000000;。
0 是 hex code（十六進制編碼）中最小的一個，它代表顏色的完全缺失。
F 是 hex code（十六進制編碼）中最大的一個，它代表最大可能的亮度。
Hex code 遵循 red-green-blue（紅-綠-藍），或者叫 rgb 格式。hex code 中的前兩位表示顏色中紅色的數量，第三四位代表綠色的數量，第五六位代表藍色的數量。
所以要得到絕對的純紅色，你只需要在第一和第二位使用 F （最大可能的數值），且在第三、第四、第五和第六位使用 0 （最小可能數值）。
許多人對超過 1600 萬種顏色感覺十分地抓狂，並且 hex code 非常難以記憶。幸運的是，你可以縮短它。
例如，紅，hex code 是 #FF0000 ，可被縮寫成 #F00。也就是說，一位表示紅，一位表示綠，一位表示藍。
這會把所有可能的顏色數減少至大約 4000 種，但是瀏覽器會把 #FF0000 和 #F00 解釋為完全相同的顏色。
2.3.3. 用rgb值
在 CSS 中表示顏色的另一個方法是使用 rgb值，如 color: rgb(0, 0, 0);。
代表黑色的 RGB 值看起來是下面的樣子：
rgb(0, 0, 0)
代表白色的 RGB 值看起來是下面的樣子：
rgb(255, 255, 255)
最后最后最后，重要的事情說三遍,來着是客，如果您覺得好就推薦或評論下，覺得不好希望能得到您的建議，繼續改善，您的支持就是對我最大的鼓勵.
