css美化网页

1.为什么使用css?

• 有效的传递页面信息
• 使用css美化过的页面文本，漂亮，美观，可以吸引用户
• 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
• 具有良好的用户体验
  2.span和div
  span标签的作用：
• 能让某个文字或者某个词语凸显出来
• 行内元素
  div标签：块级元素
  3.字体样式
  
  4.文本样式
  
  5.文本阴影
  text-align属性在css2.0中出现，但用德不多，如今在css3中得到了各大浏览器的支持

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

其中，color为阴影颜色，x-offset表示x轴，用来指定阴影水平位移量；y-offset表示y轴位移，用来指定阴影垂直位移量；blur-radius阴影模糊半径，代表阴影向外模糊的模糊范围。
6.超链接伪类

7.网页背景

• 背景颜色：background-color
• 背景图片：background-image
• 背景定位：background-position属性
• 背景重复方式：background-repeat
• 简写：background

background:#C00 url(../image/wangyebeijing.jpg) 205px 10px no-repeat;

8.背景尺寸
背景尺寸：background-size

9.css3渐变

• 线性渐变：颜色沿着一条直线过渡，从左到右、从右到左、从上到下等
• 径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
• 浏览器兼容性
  
  css3渐变兼容
• IE浏览器是Trident内核，加前缀：-ms-
• Chrome浏览器是Webkit内核，加前缀：-Webkit-
• Safari浏览器是Webkit内核，加前缀：-Webkit-
• Opera浏览器是Blink内核，加前缀：-o-
• Firefox浏览器是Mozilla内核，加前缀：-moz-
  线性渐变：

linear-gradient(position,color1,color2......)

兼容Webkit内核的浏览器语法如下

-Webkit-linear-gradient(position,color1,color2,......)