一、层叠样式表（CSS）
1．概述
层叠样式表（Cascading Style Sheet，简称 CSS），主要用于网页风格设计，包括字体大小，颜色以及元素的精确定位等等，在 HTML 页面中使用 CSS 可以让原来单调的 HTML 页面更加富有吸引力。
2．发展历史：目前是 CSS3.0 版本
CSS1.0-->CSS2.0-->CSS2.1-->CSS3.0
3．CSS的基本使用，有如下 4 种方式引入 CSS 样式信息
（1）链接外部的 .css 文件：
在 <head> 标签中输入：<link rel="stylesheet" href="css/outer.css">
（2）导入外部 .css 文件：
（3）使用内部样式：在 head 标签中使用 style 标签来定义 CSS 样式，但是该样式只对当前页面有效
（4）使用内联样式：直接在标签的属性中指定 style 属性，只对使用的标签有效：
<p style="color:#ccc;">段落</p>
示例：
项目中创建 css 目录，并在该目录中创建 outer.css 样式文件：
demo1.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<!--通过 link 标签引入外部的 css 样式文件，其中 href 属性用来指定css文件的 url 地址，可以是相对路径也可以是绝对路径-->
<link rel="stylesheet" href="css/outer.css">
<!--内部样式，只对当前页面有效-->
<style>
h1{ /*找到所有的 h1 标签*/
/*
color 用于设置字体的颜色，我们所有的颜色都可以通过 Red，Green，Blue 三种颜色的不同比例调和得到，简称RGB，也称为三基色，
这里的十六进制数 #3CF308 就是 RGB 的三个十六进制的值，其中 R 的值 3C，G 的值 F3，B 的值 08
*/
color: #3CF308;
}
body{ /*找到文档主体*/
/*设置背景颜色*/
background-color: #ccc; /* #ccc 就是 #cccccc 的简写*/
}
</style>
</head>
<body>
<h1>标题</h1>
<!--内联样式：使用 rgb(R的十进制数,G的十进制数,B的十进制数) 函数设置了字体的颜色-->
<p style="color: rgb(32,218,255);">段落1</p>
<!--内联样式：使用颜色的英文单词来设置颜色-->
<p style="color: orangered;">段落2</p>
<!--内联样式：使用 rgb(R的十进制数,G的十进制数,B的十进制数,透明度) 函数设置了字体的颜色，0不透明，1透明-->
<p style="color: rgba(58,148,231,0.2)">段落3</p>
</body>
</html>
4．CSS选择器（Selector）：选中某个或某些元素来应用 CSS 样式
（1）基础语法：
Selector：选择器，选择哪个或哪些元素来使用这些 CSS 样式
（2）元素选择器：选中一个或一些 HTML 元素(标签)
示例：
（3）属性选择器，有如下几种：
示例：
（4）ID 选择器：我们可以给 HTML 标签添加一个 id 属性，id 是唯一的
#idValue{...}
其中 idValue 是元素的 id 属性值，id 就像身份证号一样，必须唯一。
示例：
（5）类选择器：
class 选择器，可以给一个或多个元素设置相同 class 属性值，那么这些元素就归为一类，class 代表一类的 CSS 样式，多个元素可以同时具有相同名称的 class 值（这样这些元素都归为一类），语法：
E\].classValue{
...
}
其中 E 表示元素名，可以省略，"."不能省略，classValue 表示类的名称
**（6）后代选择器：选中所有的后代元素，包含儿子元素和孙子元素等等，语法：**
Selector1 Selector2{
...
**}**
**（7）子代选择器：只会选中儿子辈的元素，语法：**
Selector1 \> Selector2{
...
}
**（8）兄弟元素选择器：选中兄弟元素（同级的元素），语法：**
Selector1+Selector2{
...
}
**示例：**
\
\
\
\
\