CSS3-美化网页元素

网页文本

< span >标签是用来组合HTML文档中的行内元素，他没有固定的格式。
字体样式
字体类型
- font-family属性
```
p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}
```
  英文字体：verdana 选择字体是否含空格：“Times New Roman”
字体大小
font-size属性：单位px em…
字体风格
font-style属性：normal italic oblique 标准字样，斜体字样，倾斜字样
字体粗细
font-weight属性
字体属性
- 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
- p span{font:oblique bold 12px "楷体";}
文本属性

排版文本段落

文本修饰和垂直对齐

文本装饰：
text-decoration属性
垂直对齐方式：
vertical-align属性：middle、top、bottom

文本阴影

text-shadow：color x轴移动（x-offset）y轴移动（y-offset）模糊半径（blur-radius）；
color：阴影颜色，定义绘制阴影时所使用的颜色，如果不设置这个值，则会使文本的颜色作为阴影的颜色。
x-offset:用来指定阴影部分水平位移量，其值可以是正或负，如果为正在右边，为负在左边。
y-offset：用来指定阴影部分垂直位移量，其值可以是正或负，如果为正在右边，为负在左边。
blur-radius:阴影模糊半径，代表阴影向外模糊的模糊范围。值越大阴影向外模糊的范围越大，阴影的边缘就越模糊。这个值只能是正值，如果为0，表示不具有模糊效果。

text-shadow : color  x-offset  y-offset  blur-radius;

超链接伪类

设置伪类的顺序：a:link->a:visited->a:hover->a:active

列表样式

list-style-type
list-style-image
list-style-position
list-style

网页背景

div布局页面
背景颜色：(background-color)和背景图像（background-image)两种方式。特殊值：transparent（透明的）
背景图像引入：background-image:url（“图片路径”）
背景重复方式：（background-repeat）
1.repeat:沿水平和垂直两个方向平铺。
2.no-repeat:不平铺，及图片只显示一次。
3.repeat-x：只沿水平方向平铺。
4.repeat-y：只沿垂直方向平铺。
背景定位：（background-position）
1.Xpos Ypos :像素值
2.X% Y% ：百分比表示背景位置
3.X,Y方向：水平方向关键值（left,center,right）垂直方向关键值（top: center,bottom：）
背景尺寸：background-size:auto；（默认值，无变化。）
background-size ：percentage（改成固定像素点）
background-size:cover；（整个图片放大填充）注意：（居中加background-position:center；）
background-size：contain(可以让背景图片保持本身的宽高比例，将背景图片缩放到宽度或高度正好适应定义的区域）

CSS3渐变

linear-gradient（position，color，color）
浏览器：
IE 加前缀：-ms-
火狐：-moz-
谷歌：-webkit-

渐变的方向：

to bottom :颜色从顶部到底部
to left:颜色从右到左
to right：颜色从左到右
to top left:右下方到左上方
to top ringht:颜色从左下方到右上方
to bottom left:颜色从右上方到左下方
to bottom right:颜色从左上方到右下方
注意：径向渐变radial-gradient：径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个新的
起点朝所以方向混合。

linear-gradient ( position,  color1,  color2,…)-webkit-linear-gradient ( position,  color1,  color2,…)