css中美化网页的元素有哪些？

　　1.本章目标

　　会使用CSS设置字体样式和文本样式

　　会使用CSS设置超链接样式

　　会使用CSS设置列表样式

　　会使用CSS设置背景样式

　　会使用CSS设置渐变效果

　　2.<span>标签

　　<span>标签的作用

　　能让某几个文字或者某个词语凸显出来

　　示例：

　　<p>在php中文网，有一群人默默支持你成就

　　<spanid="dream">梦想</span></p>

　　<pclass="bird">选择<span>php中文网</span>，成就你的梦想</p>

　　3.字体样式

　　4.字体类型

　　font-family属性

　　p{font-family:Verdana,"楷体";}

　　body{font-family:Times,"TimesNewRoman","楷体";}

　　5.字体大小

　　font-size属性

　　单位：px（像素）、em、rem、cm、mm、pt、pc

　　6.字体风格

　　font-style属性

　　normal、italic(库里自带的)和oblique(自动将字体变斜体)

　　示例：

　　7.字体的粗细

　　font-weight属性

　　8.字体属性

　　font属性familyweightsizestyle

　　字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

　　pspan{font:obliquebold12px"楷体";}

　　9.文本样式

　　文本属性

　　10.文本颜色

　　color属性

　　RGB

　　十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

　　rgb(r,g,b):正整数的取值为0～255

　　RGBA

　　在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

　　示例：

　　color:#A983D8;

　　color:#EEFF66;

　　color:rgb(0,255,255);--------------最深的颜色

　　color:rgba(0,0,255,0.5);-----------透明度

　　11.排版文本段落

　　12.文本修饰和垂直对齐

　　文本装饰

　　text-decoration属性

　　垂直对齐方式

　　vertical-align属性：middle、top、bottom

　　13.文本阴影

　　浏览器兼容性

　　14.超链接伪类

　　15.使用CSS设置超链接

　　16.列表样式2-1

　　list-style-type

　　list-style-image

　　17.列表样式2-2

　　list-style:

　　li{

　　list-style:none;

　　}

　　1、网页背景

　　R红--G绿--B蓝

　　背景颜色

　　background-color

　　背景图像

　　background-image

　　19.设置背景图像2-1

　　背景图像

　　background-image属性

　　background-image:url(图片路径);

　　背景重复方式

　　background-repeat属性

　　repeat：沿水平和垂直两个方向平铺

　　no-repeat：不平铺，即只显示一次

　　repeat-x：只沿水平方向平铺

　　repeat-y：只沿垂直方向平铺

　　20.设置背景图像2-2

　　背景定位

　　background-position属性

　　21.设置背景

　　背景属性

　　background属性

　　23.背景尺寸

　　背景尺寸background-size

　　24.CSS3渐变

　　线性渐变

　　颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

　　径向渐变

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

　　浏览器兼容性

　　25.CSS3渐变兼容

　　IE浏览器是Trident内核，加前缀：-ms-

　　Chrome浏览器是Webkit内核，加前缀：-webkit-

　　Safari浏览器是Webkit内核，加前缀：-webkit-

　　Opera浏览器是Blink内核，加前缀：-o-

　　Firefox浏览器是Mozilla内核，加前缀：-moz-

　　26.线性渐变

　　左上向右下方向渐变：linear-gradient(lefttop,red,blue)

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>菜鸟教程(runoob.com)</title>

　　<style>

　　#grad1{

　　height:200px;

　　background:-webkit-linear-gradient(red,yellow,blue);/*Safari5.1to6.0*/

　　background:-o-linear-gradient(red,yellow,blue);/*Opera11.1to12.0*/

　　background:-moz-linear-gradient(red,yellow,blue);/*Firefox3.6to15*/

　　background:linear-gradient(red,yellow,blue);/*标准语法(必须在最后)*/

　　}

　　</style>

　　</head>

　　<body>

　　<h3>线性渐变-头部到底部</h3>

　　<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>

　　<divid="grad1"></div>

　　<p><strong>注意：</strong>InternetExplorer9及更早版本IE浏览器不支持渐变。</p>

　　</body>

　　</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55515.shtml