文字样式
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体斜体 |
| color | 颜色 |
1??字体类型font-family
font-family:字体名;
说明：
字体名指的是“微软雅黑”、“宋体”、“Times New Roman”等。
举例：font-family:微软雅黑;
2?? 字体大小font-size
语法：
font-size:像素值;
举例：font-size:15px;
3?? 字体颜色color
语法：
color:关键字/颜色值;
说明：
颜色的表示方式有四种：
- a. rgb 模式 r 红色 g 绿色 b 蓝色 红绿蓝三原色可以组成n多颜色 rgb取值范围（0-255）
- b. 直接写颜色的名称
- c. 十六进制 #9f0000 （最常用）
- d. rgba(红色，绿，蓝，透明度) a的取值范围0-1 0表示完全透明 1 表示不透明
举例：color:blue;
4?? 字体粗细font-weight
语法：
font-weight:取值;
说明：
对于中文网页来说，font-weight属性一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）。
举例：font-weight:bold;
5?? 字体斜体font-style
在CSS中，使用font-style属性来定义字体倾斜效果
语法：
font-style:取值;
说明：
font-style属性的取值如下表：
| font-style属性值 | 说明 |
|---|---|
| normal | 默认值，正常体 |
| italic | 斜体，这是一个属性 |
| oblique | 将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique |
文本样式
一、CSS段落属性
| 属性 | 说明 |
|---|---|
| text-decoration | 下划线、删除线、顶划线 |
| text-transform | 文本大小写 |
| font-varient | 将英文文本转换为“小型”大写字母 |
| text-index | 段落首行缩进 |
| text-align | 文本水平对齐方式 |
| line-height | 行高 |
| letter-spacing | 字距 |
| word-spacing | 词距 |
1、text-decoration
在CSS中，使用text-decoration属性来定义字体下划线、删除线和顶划线。
语法：
text-decoration:属性值;
说明：
text-decoration属性取值如下表：
| 属性值 | 说明 |
|---|---|
| none | 默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式 |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 顶划线 |
2、text-transform
在CSS中，使用text-transform属性来转换文本的大小写，这个是针对英文而言，因为中文不存在大小写之分。
语法：
text-transform:属性值;
说明：
text-transform属性取值如下表：
| text-transform属性值 | 说明 |
|---|---|
| none | 默认值，无转换发生 |
| uppercase | 转换成大写 |
| lowercase | 转换成小写 |
| capitalize | 将每个英文单词的首字母转换成大写，其余无转换发生 |
3、font-variant
使用font-variant属性只有一个作用：把文本设置成小型大写字母，这也是针对英文而言，因为中文不存在大小写之分。
语法：
font-variant：normal/small-caps;
说明：
font-variant属性取值如下表：
| font-variant属性值 | 说明 |
|---|---|
| normal | 默认值，正常效果 |
| small-caps | 小型大写字母的字体 |
4、text-indent
我们可以使用CSS的text-indent属性来控制文本首行的缩进。
语法：
text-indent:像素值;
说明：
在CSS初学阶段，主要使用像素作单位
5、text-align
在CSS中，使用text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐。
语法：
text-align:属性值;
说明：
text-align属性取值如下表：
| text-align属性 | 说明 |
|---|---|
| left | 默认值，左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
6、line-height
line-height属性指的是行高，而不是行间距。
语法：
line-height:像素值;
7、letter-spacing
语法：
letter-spacing:像素值;
说明：
-
letter-spacing控制的是字间距，每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”！
-
默认情况下，letter-spacing几乎都用不上，直接采用浏览器默认样式就可以了。
8、word-spacing
语法：
word-spacing:像素值;
说明：
定义词间距，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。
边框样式
一、边框属性
要设置一个元素的边框必须要设置以下3个方面：
- （1）border-width边框的宽度；
- （2）border-style边框的外观（实线，或者虚线）；
- （3）border-color边框的颜色；
1、border-width
语法：
border-width:像素值;
2、border-style
border-style属性用于设置边框的外观，例如实线边框和虚线边框。
语法：
border-style:属性值;
说明：
? 虽然border-style属性值很多，但是大部分我们都用不上。一般情况下，我们用到solid和dashed这两个属性值就够了
3、border-color
border-color属性用来定义边框的颜色。
语法：
border-color:颜色值
二、边框属性简洁写法
设置一个元素的边框就要设置3个属性：border-width、border-style和border-color。如下：
border-width:1px;
border-style:solid;
border-color:Red;
这种写法费时费力，导致代码量多。因此我们边框CSS样式有一个简洁的写法：
border:1px solid Red;
背景样式
一、背景颜色
1、background-color属性
在CSS中，使用background-color属性来定义元素的背景颜色。
语法：
background-color:颜色值;
二、背景图像
背景图像属性如下：
| 属性 | 说明 |
|---|---|
| background-image | 定义背景图像的路径 |
| background-repeat | 定义背景图像显示方式，例如纵向平铺、横向平铺 |
| background-position | 定义背景图像在元素哪个位置 |
| background-attachment | 定义背景图像是否随内容而滚动 |
1、background-image属性
在CSS中，使用background-image属性来定义元素的背景图片。
语法：
background-image:url("图像地址");
2、background-repeat属性
在CSS中，使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。
语法：
background-repeat:取值;
说明：
background-repeat属性取值如下：
| 属性值 | 说明 |
|---|---|
| no-repeat | 表示不平铺 |
| repeat | 默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺 |
| repeat-x | 表示在水平方向（x轴）平铺 |
| repeat-y | 表示在垂直方向（y轴）平铺 |
3、background-position属性
背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。
语法：
background-positon:像素值/关键字;
说明：
语法中的取值包括两种，一种是采用像素值，另一种是关键字描述。
1?? 取值为像素值
x（数值）：设置网页的横向位置，单位为px
y（数值）：设置网页的纵向位置，单位为px
2?? 关键字
| 属性值 | 说明 |
|---|---|
| top left | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
4、background-attachment属性
在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。
语法：
background-attachment:scroll/fixed;
说明：
background-attachment 属性只有2个属性值。scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。
参考文章：https://blog.csdn.net/wuyxinu/article/details/103583618