一、css颜色
1.颜色表示法：
直接以单词来表示颜色，如red，green。
2.十六进制表示法：（常用）
以#开头的6位十六进制数，如#000000（#000）。
3.RGB三原色表示法：（常用）
使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。
二、背景样式
1.background-color：标签背景颜色，值为三种颜色表示法。
2.background-image：标签背景图片，使用url（）函数，引入文件地址。文件地址用“ ”或' '。
3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。
（不平铺的效果）
动态图片不能用来当背景。
4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。
值用空格隔开，分别设置x，y方向的相对位置。
contain：y轴高度占满；cover：x轴宽度占满。
5.background-position：背景图片在标签中的相对位置，
值用空格隔开，分别设置x，y方向的相对位置。（%单位仅在background-size:auto时有效）
三、精灵图
精灵图就是把很多的小照片合并到一张较大的图片里。
/* 指定精灵图宽度为30px，位置在标签的最右边 */
background-image: url("./../imgs/sprite.png");
background-size: 30px auto;
background-postion: 100% 0;
四、边框样式
1.border-style：指定标签边框样式，不指定就会看不到
①none：无边框
②solid：实线
③dotted：虚线
2.border-width：设置边框宽度。
3.border-color：设置边框颜色。
4.border-radius:边框圆角。指定50%时，设置成一个圆。
/* 指定四个角 */
border-radius: 10px;
/* 指定左上、右上角，其余角与其对角相同 */
border-radius: 10px 15px;
/* 指定左上、右上、右下角，其余角与其对角相同 */
border-radius: 10px 15px 20px;
/* 分别指定4个角 */
border-radius: 10px 15px 20px 25px;
/* 指定一个圆 */
border-radius: 50%;
五、字体样式
1.font-family:指定文本的字体。
2.font-size：指定文本的字体大小，单位为px。
3.font-weight：字体的粗细。700=bold
六、文本样式
1.text-decoration：文本装饰
①underline：下划线（a-href标签自带下划线）
②line-through：中划线
③overline：上划线
2.text-align：文本水平对齐方式
①text-align：left左对齐
②text-align：center居中
③text-align：right右对齐
3.text-index：文本首行缩进
px：以1像素为单位缩进；em：以1字为单位缩进。
4.line-height：文本行高默认值1.2倍比文字高度，会增大行间距。
若设置的高度和标签高度相同，会有垂直居中的效果。
七、伪类
1.选择器：hover，鼠标悬浮来指定样式。
使用格式：.btn:hover{
background-color:blue;
}
2.选择器：active，鼠标点击时指定样式。
.btn:active{
background-color:blue;
}
使用hover或active来更改其他元素样式时，
若为父子关系，则用空格隔开；若为相邻关系，则用+或～
（前面元素来改后面元素，不能由后面元素来更改前面元素）
代码如下：
实现效果：
3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。
值：①数字：设置指定位置元素的样式。
②n+a：设置第a个元素的样式。
③an+b：设置符合表达式元素的样式。如奇数序号2n+1；偶数序号2n-1。
/* 设置第二个起标签样式 */
div:nth-child(n + 2){
color:blue;
}/* 设置奇数个样式 */
div:nth-child(2n + 1){
color:blue;
}
实现效果：
4.选择器nth-last-child（）：逆序更改元素。
八、伪元素
1.选择器before：可以在标签前添加内容
2.选择器after：在文本后添加内容
格式如下：
实现效果：
