CSS代码规范：尽量不要在标签内使用样式代码。
.css文档内部声明不换行可以节省内存。
谨记：
常犯的错误是.html文档和.css样式表都写好了，但总会忘记插入样式表。
1.字体的样式
2.文本属性
vertical-align:middle/top/bottom;
| 值 | 说明 |
| left | 把文本排列到左边。默认值：由浏览器决定 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端文本对齐效果。 |
注明属性text-align的使用 text-align:jusetify; /*两端对齐，但是不包括最后一行*/
text-align-last:juestify; /*包括最后一行两端对齐*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
width:400px;
height:400px;
margin:0 auto;
text-align: justify;
text-align-last: justify;
;}
</style>
</head>
<body>
<section>
<p>这个AI名叫SNAP_R，它以每分钟6.75条消息的速率向800名用户发送钓鱼消息，其中有275名用户成功上钩。相比之下，来自福布斯的专业作家Thomas Fox-Brewster平均每分钟只能产出1.075条消息，总共发送了129名用户，而仅有49名用户被吸引。</p>
</section>
</body>
</html>
效果图：
常使用于新闻页面内。
text-decoration属性
none 默认值，定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
3.文本阴影
text-shadow：color x-offset y-offset blur-radius;
阴影颜色 X轴位移 Y轴位移 模糊半径
4.超链接
| 伪类名称 | 含义 | 示例 |
| a:link | 未单击访问时超链接的样式 | a:link{color:red;} |
| a:visited | 单击访问后超链接的样式 | a:visited{color:red;} |
| a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:red;} |
| a:active | 鼠标单击未释放时超链接的样式 |
5.列表样式
属性： list-style-type:
list-style-image:
list-style-position:
list-style:
| 值 | 语法示例 |
| none 无标记符号 |
list-style-type:none; |
| disc 实心圆，默认类型 |
list-style-type:disc; |
| circle 空心圆 |
list-style-type:circle; |
| square 实心正方形 |
list-style-type:square; |
| decimal 数字 |
list-style-type:decimal; |
a>若要去除列表上下的结构语法：
li{display:inline-block;}
6.背景图像
语法 background-image：url("path");
背景重复方式 属性background-repeat:值;
repeat：沿水平线和垂直两个方向平铺
no-repeat:不平铺，即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
背景定位属性 background-position:
| 值 | 含义 |
| Xpos Ypos | 单位：px Xpos表示水平位置 Ypos表示垂直位置 |
| X% Y% | 使用百分比表示背景的位置 |
| X、Y方向上的关键词 | 水平方向的：left、center 、right | 垂直方向的：top、center、bottom |
属性background-size：
background-size:auto;
background-size:percentage;/*百分值，按照元素的宽度计算*/
background-size:cover; /*放大整个image*/
background-size:contain; /*保持宽高比，缩放至正好定义的区域*/