入门
作用：
1、结构与样式分离的方式，便于后期维护
2、可以有多套样式，使网页有任意样式切换的效果
3、使页面载入得更快，降低服务器成本
样式选择器
作用：用来选择（找到）需要添加样式的位置
标签选择器
表示对 body 内所有的段落 p 标签加上特定的样式。这里的 p 就是标签选择器，background-color 是属性，red 是属性值
p{
background-color:red;
}
类选择器
.p1{
font-family: 隶书;
}
<p class="p1">百度</p>
标签选择器和类选择器的结合（下例采用的是内部样式表）
体现了样式的层叠，百度 这两个字既有 p 标签的样式，又有 class=“p1” 的样式
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
p{
background-color: red;
font-size: 20px;
}
.p1{
font-family: 隶书;
}
</style>
</head>
<body>
<p>https://www.baidu.com/</p>
<p class="p1">百度</p>
</body>
</html>
内部样式表
样式表和当前的文件在同一个文件中
外部样式表
新建一个文档，里面全写 css，然后再通过 link 插入到 html 代码中
作用：使页面的表示层与结构层彻底分离
<html>
<head>
<meta charset="UTF-8">
<title>032801</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body >
</body>
</html>
index.css
body{
background-color: yellow;
background-image: url("image/1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
背景样式
<style type="text/css">
body{
background-color: yellow;
background-image: url("image/1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
</style>
注1：background-repeat 属性默认为 repeat，如下图。如果选择 repeat-x，则只会在第一行重复，repeat-y 则只会在第一列重复
注2：background-attachment 表示背景是否随滚动条滚动，设置为 fixed，则在页面出现滚动条时，滚鼠标时背景图片不会动（推荐），比较符合阅读习惯
注3：background-position: top center; 表示背景图片靠上，在中间显示
文本样式
属性说明：
color 设置文本颜色
direction 文本的方向 / 书写的方向 Itr 左对齐 / rtl 右对齐
letter-spacing 字符间距 npx
line-height 行高 npx
text-align 文本对齐方式 left / right / center / justify（两端对齐）
text-decoration 文本修饰 none / underline（下划线） / overline（上划线） / line-through（删除线）
text-shadow 文本设置阴影 h-shadow v-shadow blur color 四个参数分别是阴影的横坐标，列坐标，阴影的模糊程度，颜色
text-transform 改变字母大小写 none / capitalize（首字母大写）/ uppercase（全部大写）/ lowercase（全部小写）
text-indent 首行缩进 支持单位 px、em（em是字符单位，2em表示两个字符的距离）
对 body 内所有段落 p 标签的字体颜色进行设置
p{
color: red;
}
三种表示方法：
颜色的单词，如 red
十六进制，如 #d8d8d8
rgb ，如 rgb(168,178,188)
设置文本右对齐
<p>1111</p>
p{
color: red;
direction: rtl;
}
效果：
针对字母和汉字，direction 和 text-align 的效果是完全一样的。针对阿拉伯语（或阿拉伯数字），direction 的效果就是从右边开始第一个字。也就是说，正常使用 text-align 属性即可
# 表示左对齐同时两端对齐
direction: ltr;
text-align: justify;
# 第三个参数越小，阴影越清晰
text-shadow: 5px 5px 5px red;
字体样式
font-family 设置字体
font-style 规定斜体文本 normal / italic（斜体，对绝大多数，更常用） / oblique（斜体，对所有文字）
font-weight 文本的粗细 normal / bold
font-size 字体大小 npx
列表样式
list-style-type 设置列表项目的外观，具体可检索
list-style-position 列表符号的位置 inside（往里缩进一点） / outside（正常，默认）
list-style-image 把图像设置为列表项目的标记（用图片取代小方块，小圆圈等），会使得 type 属性失效
# 效果如下所示，前面本来是圆点
ul{
list-style-type: square;
}
list-style-image: url(image/1.jpg);
伪类
通常情况下，超级链接上设置的样式，称为伪类。伪类是用在超链接上的效果比较多，但是超链接不是伪类
伪类是选择器
作用：设置超级链接的四种状态
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上（浮动，悬停）
a:active 向被激活的元素添加样式，如鼠标按下且未松开
:focus 选择拥有键盘输入焦点的元素
a:link{
color: red;
}
除了链接 a 标签外，其他诸如 label 等其他标签也可以使用伪类
伪类分为两种：状态伪类和结构性伪类
上面介绍的都是状态伪类
结构性伪类介绍：
:first-child 选择元素的第一个子元素（美中不足）
:last-child 选择某个元素的最后一个子元素
:first-of-type 选择上级元素下的第一个同类子元素（弥补第一个的缺陷）
:nth-child(n) 选择某个元素的一个或多个特定的子元素，n 为几就是选几个（原理同 first-child）
<p>11</p>
<p>22</p>
# 父元素中的第一个元素恰好是 p 标签时赋予样式，如果 p 标签前面还有其他标签，则第一个 p 标签也不会被赋予样式
p:first-child{
background-color: red;
}
效果：
<label>33</label>
<p>11</p>
<p>22</p>
# 如果将 first-of-type 换做 first-child，则不会有行的背景色发生改变
p:first-of-type{
background-color: red;
}
效果：
<table border="1" width="500px">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
# 这里的标签如果换成 tr，则下图就是第二行变红色
td:nth-child(2){
background-color: red;
}
效果：
