1.Nest Many Elements within a Single Div Element

div元素，也被稱作division(層)元素，是一個盛裝其他元素的通用容器。

所以可以利用CSS的繼承關係把div上的CSS傳遞給它所有子元素。

你可以用<div>來標記一個div元素的開始，然後用</div>來標記一個div元素的結束。

2.Give a Background Color to a Div Element

你可以用 background-color 屬性來設定一個元素的背景顏色。

例如，如果你想把一個元素的背景顏色設定為green，你應該把這些加到你的 style 元素中：

.green-background {
  background-color: green;
}

3.Set the ID of an Element

除了 class屬性之外，每一個 HTML 元素還可以使用 id 屬性。

使用 id 屬性有若干好處，一旦當你開始使用 jQuery 的時候你會有更深的體會。

id 屬性應該是唯一的，雖然瀏覽器並不強制唯一，但基於最佳實踐，這一點是被廣泛認可的，所以請不要給一個以上的元素設定相同的 id 屬性。

4.Use an ID Attribute to Style an Element

和類選擇器一樣，你也可以使用ID選擇器來宣告樣式。

宣告一個叫cat-photo-element的ID選擇器 ，並設定背景色為綠色。：

#cat-photo-element {
  background-color: green;
}

注意：在你的 style 元素內部，定義類選擇器必須新增 . 為字首，定義ID選擇器必須新增 # 為字首。

5.Adjusting the Padding of an Element

現在讓我們把 Cat Photo App 暫時擱置，以學習更多的 HTML 樣式。

你可能早已經注意到了這點，所有的 HTML 元素本質上是小的矩形塊，代表著某一小塊區域。

有三個影響HTML元素佈局的重要屬性：padding(內邊距)、margin(外邊距)、border(邊框)。

元素的 padding 控制元素內容 content和元素邊框 border 之間的距離。

在這兒，我們可以看到綠方塊和紅方塊都位於黃方塊之中，但是紅方塊比綠方塊具有更大的 padding。

當你加大綠方塊的 padding, 它將擴大元素內容和元素邊框的距離。

6.Adjust the Margin of an Element

元素的外邊距 margin 控制元素邊框 border 和元素實際所佔空間的距離。

在這兒，我們可以看到綠方塊和紅方塊都位於黃方塊之中，注意紅方塊比綠方塊具有更大的外邊距 margin，使得它看起來更小。

當你增大綠方塊的 margin 時，將會增加元素邊框和元素實際所佔空間之間的距離

7.Add a Negative Margin to an Element

元素的 margin 控制元素的 border 和元素實際所佔空間的距離。

如果你將一個元素的 margin 設定為負值，元素將會變大。

具體可以看看紅方塊的 margin 值。

8.Add Different Padding to Each Side of an Element

有時你想要自定義元素，使它的每一個邊具有不同的 padding。

CSS 允許你使用 padding-top、padding-right、padding-bottom 和 padding-left來控制元素上右下左四個方向的 padding。

9.Add Different Margins to Each Side of an Element

有時你想要自定義元素，使它的每一個邊具有不同的 margin。

CSS 允許你使用 margin-top、margin-right、margin-bottom 和 margin-left 來控制元素上右下左四個方向的 margin。

10.Use Clockwise Notation to Specify the Padding of an Element

除了分別指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 屬性外，你還可以集中起來指定它們，舉例如下：

padding: 10px 20px 10px 20px;

這四個值以順時針方式排列：頂部、右側、底部、左側，簡稱：上右下左。

11.Use Clockwise Notation to Specify the Margin of an Element

讓我們再試一次，但這次是用於 margin。

除了分別指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 屬性外，你還可以集中起來指定它們，舉例如下：

margin: 10px 20px 10px 20px;

這四個值以順時針方式排列：頂部、右側、底部、左側，簡稱：上右下左。

12.Style the HTML Body Element

現在讓我們來一個全新的開始，講一講 CSS 繼承。

每一個 HTML 頁面都有一個 body 元素。

通過將其 background-color 設定為黑色，我們可以證明 body 元素的存在。

我們可以通過將下面的程式碼新增到我們的 style 元素來做到這一點：

body {
  background-color: black;
}

13.Inherit Styles from the Body Element

現在我們證明了每一個 HTML 頁面都有一個 body 元素，並且其 body 元素同樣能夠應用樣式。

記住，你可以像對其他 HTML 元素一樣對你的 body 元素應用樣式，並且所有其他元素將繼承你的 body 元素的樣式。

14.Prioritize One Style Over Another

有時你的 HTML 元素會得到相互衝突的多個樣式。

15.Override Styles in Subsequent CSS

我們的 “pink-text” class 覆蓋了 body 元素的 CSS 宣告！

我們剛剛證明了我們的 class 會覆蓋 body 元素的 CSS，那麼下一個合乎情理的問題就是，我們怎樣才能覆蓋我們的 pink-text class 呢？

再建立一個把元素設定為藍色的名為 blue-text 的 CSS class，確保它在你的 pink-text class 宣告的下面。

除了 pink-text class 之外，再把 blue-text class 應用到你的 h1 元素，讓我們來看看誰會贏。

如下例，通過用空格分隔多個 class 屬性，可對 HTML 元素應用多個 class 屬性：

class=“class1 class2”

注意：在 HTML 中這些 class 如何排序是無所謂的。