使用HTML语言和CSS开发商业站点_CSS3美化网页元素

                                                                    第5章 CSS3美化网页元素
一.编辑网页文本
1.文本在网页中的意义
（1）.有效地传递页面信息。
（2）.使用CSS样式美化过的页面文本，使页面漂亮，美观，吸引客户。
（3）.可以很好地突出页面的主题内容，使用户第一眼可以看到页面的主要内容。
（4）.具有良好的用户体验。
2.<span>标签
它没有固定的格式表示，只有它应用CSS样式时，才会产生视觉上的变化。
3.字体样式
font-family:设置字体类型（先英文后中文，宋体是计算机中默认的字体）
font-size:设置字体大小（常以px为单位）
font-style:设置字体风格（normal标准 italic斜体 oblique倾斜）
font-weight：设置字体粗细（normal默认值 bold粗体 bolder更粗的字体 lighter更细的字体 400等同于normal 700等同于bold）
font：在一个声明中设置所有字体属性。（顺序：风格->粗细->大小->类型）
4.排版网页文本
（1）.文本颜色
1）RGB
在这十六进制的表示方法中，前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。
rgb（r,g,b）正整数取值0~255.百分比取值为0%~100%。
2）RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0~1。
（2）.水平对齐方式
left:把文本排列在左边，默认值，由浏览器决定。
right：把文本排列到右边。
center：把文本排列到中间。
justify：实现两端对齐文本效果。
（3）.首行缩进和行高
line-height：行高；text-indent：首行缩进。
除了使用像素表示行高外，也可以不加任何单位，按倍数表示，这时行高是字体大小的倍数。
对于中文网页，em用得较多，通常设置为2em，表示缩进两个字符。
（4）.文本装饰
text-decoration的常用值：
none：默认值
underline下划线
overline上划线
line-through删除线
（5）.垂直对齐方式
在目前的浏览器中，只能对表格单元格中的对象使用垂直对齐方式属性。
常用来设置图片与文本的对齐方式
img,span{vertical-align：middle/top/bottom;}
(6).文本阴影
作用：产生阴影，模糊主体。
语法:
text-shadow:color x轴位移（x-offset） y轴位移（y-offset） 模糊半径（blur-radius）;
为正时，分别在右和下；模糊半径为0，表示不具有模糊效果。
查询浏览器支持情况的网站地址是www.caniuse.com
二.设置超链接和列表样式
1.超链接伪类
所谓伪类，就是不根据名称，属性，内容而根据标签处于某种行为或状态时的特征来修饰样式，也就是说，超链接将根据用户单击访问前（a:link），鼠标悬浮在
超链接上(a:hover)，单击未释放(a:active)，单击访问后(a:visited)的四个状态显示不同的超链接样式。语法：“标签名：伪类名{声明}”
设置伪类的顺序：
a:link>a:visted>a:hover>a:active
2.列表样式
(1).list-style-type
设置列表项标记的类型
none:无标记符号
disc：实心圆，默认类型
circle:空心圆
square：实心正方形
decimal：数字
（2）.list-style
在一个类型中设置所有列表的属性
顺序：list-style-type-->list-style-position-->list-style-image.
三.背景样式
1.认识<div>标签
可以把HTML文档分割成独立的，不同的部分，因此<div>标签用来进行网页布局。
语法：<div>网页内容......</div>
在使用<div>标签布局页面时，可以嵌套<div>，同时也可以嵌套列表，段落等各种网页元素。


2.背景属性
（1）.背景颜色
background-color transparents是透明的，为默认值
在CSS中的注释符号是“/*......*/”。
（2）.<1>背景图像：
background-image:url(图片路径)
     <2>背景重复方式：
repeat：沿水平和垂直两个方向平铺
no-repeat:不平铺，即背景图像只显示一次
repeat-x：只沿水平方向平铺
repeat-y:只沿垂直方向平铺
     <3>背景定位
Xpos Ypos 
X% Y%
X,Y方向关键词
（3）.背景
将多个属性综合在一起实现简写。
3.背景尺寸
(1）.auto
没有发生任何变化
（2）.percentage
当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的。
(3).cover
整个背景图片放大填充了整个div。
（4）.contain
可以让背景图片保持本身的宽高比例，将背景图片缩放到宽度或着高度正好适应所定义背景的区域。
4.CSS3渐变
（1）.CSS3线性渐变
IE：-ms-
Chrome:-webkit-
safari:-webkit-
Opera:-o-
Firefox:-moz-
语法：-webkit-linear-gradient(position,color1,color2...)
position取值为：to bottom/to top/to right/to left......
(2).径向渐变
radial-gradient是圆形或椭圆形渐变，颜色从一个点朝所有方向混合。