至此 HTML 的部分就告一段落了，后面的内容都是 CSS 了，前面我们写出来的网页都很丑，文字颜色，文字大小这些样式我们都无法自定义，CSS 就是设置这些样式的。
首先，以一个例子来引入
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: red;
background-color: skyblue;
text-align: center;
}
</style>
</head>
<body>
<h1>这是一个一级标题</h1>
</body>
</html>在这个代码里，只有 style 元素及其里面的内容是陌生的, 这个 style 元素就是用来书写 CSS 的元素，在 style 元素内部书写的内容就是 CSS，接下来详细介绍
css
h1 {
color: red;
background-color: skyblue;
text-align: center;
}这个 style 元素内部包含的东西就是一个 CSS 规则，HTML 是由一个一个元素组成的，CSS 则是由一个一个这样的规则组成的，规则主要包含两部分，选择器和声明块，在这个例子中，h1 就是选择器，大括号及其里面的内容就是一个声明块。
我们要给一个元素添加样式，或者说要规定一个元素要长什么样，比如规定其颜色，背景这些，首先我们应该要拿到这个元素把，或者说选择出这个元素才能给他添加样式吧，选择器就是用来选择元素的，这里的 h1 表示的意思其实就是选中页面中所有 h1 元素。而声明块则是指定具体样式。
选择器有非常多的写法，在后面的文档中会详细介绍，本节介绍三个基本的选择器 ^76cf3e
- 元素选择器：按照元素名选择，直接书写元素名，例如
h1就是选中所有h1元素。 - id 选择器：按照元素的 id 属性选择，书写格式为
#id，例如有一个元素的 id 属性为demo，则使用#demo来选择。 - 类选择器：按照元素的 class 属性选择，书写格式为
.class，例如有一些元素的 class 属性为demo，则使用.demo来选中这些元素。
class 属性本身就是为 CSS 服务的，就是为了让 CSS 选择器选中的，class 属性不同于 id 属性，id 属性在页面中必须是唯一的，或者说不允许多个元素 id 值相同，但 class 属性允许重复，即允许多个元素拥有同一个 class 属性值。
可以使用这个例子来练习一下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: blue;
}
.red {
color: red;
}
#div1 {
color: green;
}
</style>
</head>
<body>
<h1>这是一个一级标题</h1>
<p>这是第一个标题</p>
<p>这是第二个标题</p>
<p>这是第三个标题</p>
<p>这是第四个标题</p>
<div id="div1">这是第五个标题</div>
<span class="red">这是一个span</span>
<h2 class="red">这是一个h2</h2>
</body>
</html>在这个代码中，用到了 id，类，元素三种选择器，h1 表示选中所有 h1 元素，.red 表示选中所有 class 属性值为 red 的元素，#div1 表示选中所有 id 为 div1 的元素。
一个元素是可以拥有多个 class 属性的，多个 class 属性用空格隔开。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
color: red;
}
.big {
font-size: 30px;
}
</style>
</head>
<body>
<p class="red big">这是第一个标题</p>
</body>
</html>可以看到，这个 p 元素有 red 和 big 两个 class 属性，而 CSS 中包含两条规则，这两条规则中的选择器均为类选择器，一个选择了 red 类，一个选择了 big 类，分别给这两个类设置了一个样式，由于这个 p 元素同时具有这两个类，所以这两个样式会同时生效。
类选择器是最常用也是最为推荐的一种选择器
以上介绍了选择器，接下来介绍声明块，声明块中包含了许多声明，或称属性，每一个声明都代表一个样式，声明的格式为 样式名:样式值;，例如如下 CSS 规则
css
h1{
font-size:12px;
color:red;
}在这个 CSS 规则中，选择器为 h1，表示选择所有 h1 元素，声明块中包含了两个声明，分别是 font-size:12px; 和 color:red;，分别将字体大小设置为 12 px，将文字颜色设置为红色这两个样式。所以这个 CSS 规则的作用也就显而易见了，就是将页面所有 h1 元素的文字大小设置为 12 px，并且将文字颜色设置为红色。
以上就介绍了 CSS 的基本使用。综上可以看出，学习 HTML 主要学习一个一个元素及其属性，学习 CSS 则主要学习一个一个声明。
接下来就是 CSS 代码的书写位置，CSS 代码可以书写在三个位置
- 内联 CSS
- 内部 CSS
- 外部 CSS
前面我们将 CSS 写在 style 元素内部，就属于内部 CSS，理论上，style 元素放在哪里都是可以的，但 style 元素常放在 head 元素中，这是由于 head 元素位于 body 元素上方，会被率先加载，将 style 元素放在 head 元素里就可以让浏览器率先加载样式。如果放在后面，让浏览器先加载标签再加载样式，就会导致页面先显示一个很丑的页面，然后加载到样式的时候再重新渲染，这有一个明显的闪烁，所以并不推荐这么干。
除了写在 style 元素内部，我们还可以直接写在元素的 style 属性上，这个 style 属性是一个全局属性，也就是每个元素都有的属性。
html
<h1 style="color:red;font-size:12px;">这是一个一级标题</h1>如上例，就给这个一级标题添加了两个样式，写法也很好理解，就是在 style 属性内直接写一条一条的声明。很显然，内联样式既然是写在这个元素的属性中的，所以只会对这一个元素生效，也就不需要再选中元素，所以根本不需要选择器这个东西。
除了以上两种书写方式，更为常用的一种是外部样式，即将样式统一写到一个外部的 .css 文件中，通过一些手段引入这个 css 文件，即可应用该文件中的所有样式。引入方式也很简单，通过 link 元素即可，link 元素有一个 href 属性，将 css 文件的路径写入 href，即可让指定 CSS 文件的样式生效。
link 属性可以链接很多东西，在引入 CSS 时，link 元素的 rel 属性应为
stylesheet，用于告诉 link 元素我链接的是一个 CSS 文件
在实际开发中，最常使用的就是外部样式，外部样式有诸多好处
- 复用相同的样式：对于一个网站而言，会有诸多页面，而由于网站风格是一致的，所以不可避免会有很多相同样式的区域，使用外部样式就可以很好地复用这些样式，遇到相同的样式只需要引入 CSS 文件即可，不需要再重新写。
- 提高页面响应速度：在加载 CSS 文件的时候，浏览器会将 CSS 文件缓存起来，下次使用这个 CSS 文件的时候就会从缓存里拿，缓存速度是远高于网络速度的，所以可以加快页面访问。
- 结构样式行为相分离。
在开发中最常用的是外部样式，但并不意味着其余两种毫无作用，如果样式代码很少，那使用内部样式的性能其实会更好，而内联样式则是和 JS 结合起来用。
一般来说网站中都会有很多 CSS 文件，这是由于一个网站是由多个页面组成的，每个页面之间多多少少会有一些相同的 CSS 样式，我们通常把这些相同的 CSS 样式抽离出来形成一个文件，不同的部分再分别形成一个文件，这就产生了很多 CSS 文件。
CSS 中的注释格式为
/* 注释内容 */