目录
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- 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)
最后最后最后，重要的事情说三遍,来着是客，如果您觉得好就推荐或评论下，觉得不好希望能得到您的建议，继续改善，您的支持就是对我最大的鼓励.
