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 如何排序是无所谓的。
