一、文本样式：
1. text-index:缩进文本
- ，用于段落首行缩进。
- 取值：text-index：2em（父级元素的2倍）；10%（父级宽度的百分之10；10px；
- 只能用于块级元素，无法用于行内元素、图像元素。如果一个块级元素首行有一个图像，它会随文本移动。
- 使用负值，可实现“悬挂缩进”。
2. text-align：水平对齐
- 取值：
- left：左对齐，默认值。
- right：右对齐。
- center：居中。
- justify：两端对齐。
3. word-spacing：字（单词）间隔
- 取值：normal：正常间隔，默认值，其值与设置0一样。
- 取值可正可负，为正时增加间隔，为负时缩小间隔。
4. letter-spcing：字母间隔
- 修改的是字符或字母间的间隔。
- 取值和word-spcing相同。
5.text-transform：字符转换。
- 取值：
- none：默认值，不改动。
- uppercase：转换全大写。
- lowercase：转换全小写。
- capitalize：每个单词首字母大写。
6.text-decoration：文本装饰。
- 取值：
- none：默认值。
- underline：加下划线。
- overline：文本顶端上划线。
- line-through：贯穿线。
- blink：文本闪烁。
- 不同装饰作用同一个元素，其值会替换，而不积累。
7. direction：文本方向
- 指示文本从哪个方向开始显示。
- 取值：
- ltr：从左向右，默认值。
- rtl：从右向左。
8. color：文本颜色
- 取值：
- 颜色名称（color-name）：如red。
- 16进制颜色（hex-number）：#ff0000
- rgb颜色：rgb（255,0,0）
9. line-height：行高
- 取值：
- normal：默认，合理行间距
- number（设置数字）：数字与字体尺寸相乘来设置行间距。
- length：还可以设置固定行间距，如20px；
- %：基于当前字体尺寸的百分比行间距。
10. vertical-align：垂直对齐
- 取值：
- top，bottom：以顶线对齐，底线；
11.text-shadow：文字阴影
- 语法：text-shadow：10px 20px 30px red;
- 其中：10px代表水平延伸距离。20px代表垂直方向延伸距离。30px代表模糊值。
二、背景样式
1. background-color：背景色
- 取值：和color取值一样。不同的是默认值为transparent（透明）。
2.background-image：背景图像
- 取值：
- none：默认
- background-image：url（“路径”）设置背景
3.background-repeat:图像平铺
- 前提：背景图小于标签时
- 取值
- no-repeat：不重复
- repeat-x：水平方向上重复
- repeat-y：垂直方向上重复
- repeat：全部重复（默认）
4. background-position：背景定位
- 改变图像在背景中的位置。
- 取值：top bottom left right 长度值等。
5. background-attachment：背景关联
- 取值：
- fixed：背景固定，不随文字移动而移动
- scroll：随文字滚动而移动
- local：随文字滚动，超出背景后，背景将逐渐收起。
6.background-size：背景图像尺寸
- 取值：
- cover：放大图像覆盖背景区域（某些超出部分无法显示）
- contain：缩放图像适应内容区域
- auto：保持原有图片尺寸
- 数值，如background-size：80px 60px；其中80px是宽，60px是高
- %
7.background-origin：指图像相对于哪里来定位，设置背景渲染区域
- 取值：
- content-box：内容区域
- padding-box：填充盒区域
- border-box：边框盒区域
8.背景渐变
①线性渐变：background：linear-gradient（to top，green，red，。。）
- 其中，to top：从下到上，表示方向，还可以取值：to bottom等，或者用度数：如45deg（即45度）
- 重复渐变：repeating-linear-gradient（to top，green 10% ，red 15%，blue 20%）
- 其中，10-15%代表green到red渐变区域，15-20%代表red到blue渐变区域
②径向渐变：
- 语法：background：radial-gradient（center，shape size 5%，start-color 10%，….，last-color）
- 其中：shape定义了形状，取值：circle圆形，eclipse：椭圆形（默认）
三、字体样式
1. font-style：文本斜体设置
- 取值：
- normal：正常字体
- italic：斜体
- obligue：使文字倾斜（对于没有斜体字的字体）
2. font-variant：定义元素的文本是否为小型的大写字母
- 取值：
- normal：正常
- small-caps：小型的大写字母
3.font-weight：字体粗细
- 取值：
- normal：400
- bold：粗体，相当于700
- bolder：比继承值更重
- lighter：比继承值更轻
- 用数值表示，取值为100 200 300 400 500 600 700 800 900
4.font-size：字体大小
- 取值：数值
5.font-family：字体名称
- 取值：
- 字体名称：若名称有中文或空格，用引号括起
- 字体序列名称
- 引用字体：
font-face{
font-family:”F53”; F53自定义名称
src:url(“路径”)；} 字体文件路径
- 衬线体：serif：有笔锋
- 非衬线体：sans serif 无笔锋
四、边框样式
1. border-width：边框宽度
- 取值：
- 长度值，不可为负
- medium：默认边框，3px
- thin：比默认细 1px
- thick：比默认粗 5px
2.border-style：边框样式
- 取值：
- none：无轮廓
- hidden：隐藏边框
- dotted：点状轮廓
- dashed：虚线轮廓
- solid：实线
- double：双线
- groove：3D凹槽轮廓
- ridge：3D吐槽轮廓
- inset：3D凹边
- outset：3D凸边
- 用边框画三角形：
{0px;
height:0px;
border-top:30px solid transparent;
border-left:30px solid transparent;
border-right:30px solid red;
border-bottom:30px solid transparent;}
3.border-color：边框颜色
4.box-shadow：阴影
- 取值：
- none：无阴影
- inset：内阴影，否则为外阴影
- box-shadow：10px 10px 20px 5px darkgray inset；
- 第一个长度值定义阴影水平偏移量，正值则右，负值则左
- 第二个长度值定义阴影垂直偏移量，正值则底部，负值则顶部
- 第三个长度值定义阴影模糊值半径，值越大越模糊，不允许负值
- 第四个长度值定义阴影外延值，正值则四面扩展，负值则向里收缩
5. border-radius:定义圆角边框
- 取值：
- length长度值：定义圆形半径或椭圆半长轴、半短轴，非负值
- percentage百分比，水平方向上对比元素宽度，垂直方向上对比元素高度
{width：50px;
height:50px;
border:5px solid red;
border-radius:50%;}
五、列表样式
1.list-style：设置列表相关内容
- 语法：list-style：type position image；
2.list-style-type：设置列表标记
- 取值：
- disc：实心圆
- circle：空心圆
- square：实心方块
- decimal：阿拉伯数字
- lower-roman：小写罗马数字
- upper-roman：大写罗马数字
- lower-alpha：小写英文字母
- upper-alpha：大写英文字母
- none：不适用标记
3. list-style-image：设置列表标记的图像
- 取值：
- url（“地址”）：使用绝对或相对地址指定列表标记图像
- none：不指定图像
4. list-style-position：设置列表项如何根据文本排列
- 取值：
- outside：列表项标记放置文本以外，且环绕文本，不根据标记对齐
- inside：列表项标记放置文本以内，且环绕文本，根据标记对齐
5.列表：
①无序列表：ul 即unorder list
②有序列表：ol 即order list
<ol>
<li>
</li>
</ol>
<ul>
<li>
</li>
</ul>
③自定义列表：dl
<dl>
<dt></dt> 标题
<dd></dd> 文本
</dl>
④表格标记：table
<table>
<caption></caption> caption表格标题
<tr> tr代表行
<td><.td> td代表每行的单元格
</tr>
<table>
- solspan：合并列
<td colspan="4">0 </td> 该单元格占4列
<td rowspan="2">0</td> 该单元格占2行
-表格头：
<thead>
<th></th>
</thead>
- 列表语义化格式：table>caption+(thead>th)+(tbody>tr>td)+(tfooter>tr>td)
六、其他
- hover的时候防抖动：
- ①改box-sizing：border-box；
- ②先把下划线加上，占有位置，设置透明，hover的时候出现
- ③给父级设置足够的高与宽
- 延迟效果：
- transition：指定过度细节（单位ms）
- transition-delay：hover之后到开始出现的延迟时间
- transition-duration：从开始出现到结束的持续时间
- transition-property：延迟属性，指定要过渡的属性（必需设置）
- 双向延迟：在原样式标签里设置延迟属性，在hover下同样设置延迟则实现。
- transition：指定过度细节（单位ms）