CSS美化网页(span 和 div，字体样式，文本样式，文本阴影，超链接伪类，列表样式， 网页背景，背景尺寸，渐变，渐变兼容)

为什么使用CSS：

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

span 和 div

span标签的作用：

• 能让某几个文字或者某个词语凸显出来
• 行内元素

div标签

• 块级元素

字体样式

属性名	含义	举例
font-family	设置字体类型	“隶书”
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体	font:italic bold 36px “宋体”;

文本样式:

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;
vertical-align	设置文本对齐	vertical-align ： middle

文本阴影

• text-shadow属性在CSS2.0中出现，但迟迟未被各大浏览器所支持，因此在
  CSS2.1中被废弃，如今在CSS3中得到了各大浏览器的支持

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

  • color: 阴影颜色
  • x-offset: X轴位移，用来指定阴影水平位移量
  • y-offset: Y轴位移，用来指定阴影垂直位移量
  • biur-radius: 阴影模糊半径，代表阴影向外模糊的

超链接伪类

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

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

列表样式

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

网页背景

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

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

背景尺寸

• 背景尺寸 ： background-size

  属性值	描述
  auto	默认值，使用背景图片保持原样
  percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
  cover	整个背景图片放大填充了整个元素contain 让背景图片保持本身的宽高比例，将背景图片缩放到西部开源-秦疆版权所有 宽度或者高度正好适应所定义背景的区域

CSS3渐变

• 线性渐变: 颜色沿着一条直线过渡 ： 从左到右、从右到左、从上到下等

• 径向渐变: 圆形或椭圆形渐变 ， 颜色不再沿着一条直线变化， 而是从一个起点朝所有方向混合

浏览器兼容性:

属 性 名	IE	Firefox	Chrome	Opera	Safari
Gradient	10+	19.0+	26.0+	12.1+	5.1+

CSS3渐变兼容

• IE浏览器是Trident内核，加前缀：-ms-
• Chrome浏览器是Webkit内核，加前缀：-webkit-
• Safari浏览器是Webkit内核，加前缀：-webkit-
• Opera浏览器是Blink内核，加前缀：-o-
• Firefox浏览器是Mozilla内核，加前缀：-moz-