CSS 美化网页元素

一.为什么使用CSS
1.有效的传递页面信息
2.使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
3.可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
4.具有良好的用户体验

二.字体样式属性

1.font-family:英文字体,中文字体 （类型）
font-family: Times,"Times New Roman", "楷体";

2.font-size:值单位 (大小)
单位
px（像素）
em、rem、cm、mm、pt、pc

3.font-style:normal（正常）、it alic（斜体）和oblique（倾斜） （风格）
p span{
font-weight: 700;
}

4.font-weight: 700 （字体粗细）

normal 默认值，定义标准的字体
bold 粗体字体
bolder 更粗的字体
lighter 更细的字体
100、200、300、400、500、600、700、800、900 定义由细到粗的字体
400等同于normal，700等同于

5.font:字体风格→字体粗细→字体大小→字体类型
font:oblique bold 12px "楷体";
三.文本样式
1.color
rgb(0,0,0) 取值在0~255之间
rgba(0,0,0,0) 最后一位代表透明度，取值在0~1之间

2.文本水平对齐方式text-align
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果

3.首行缩进
text-indent:20px;

4.行高
line-height:30px;

5.文本装饰
text-decoration
none 默认值，定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线

6.文本垂直对齐
vertical-align
top:上对齐
bottom:下对齐
middle:中间对齐
7.文本阴影
text-shadow:颜色 x轴移动位置 y轴移动位置 模糊半径（0代表没有）

四.超链接伪类
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}

五.列表样式
list-style-image: url(image/arrow-icon.gif); 列表项前图像
list-style-type 指定列表项前图标
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

六.背景颜色和图像
颜色：background-color
图像：background-repeat：url(路径)
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
七.渐变
-浏览器内核-linear-gradient(方向，开始颜色，结束颜色)
background:linear-gradient(to left,red,blue);
background:-webkit-linear-gradient(to left,red,blue);