编辑网页文本

1、文本在网页中的意义：

（1）有效地传递页面信息。

（2）使用CSS样式美化过的页面文本，使页面漂亮，美观，吸引客户。

（3）可以很好地突出页面的主题内容，使用户第一眼可以看到页面的主要内容。

（4）具有良好的用户体验。

2、<span>标签：它没有固定的格式表示，只有它应用CSS样式时，才会产生视觉上的变化。

3、字体样式：

（1）font-family：设置字体类型（先英文后中文，宋体是计算机中默认的字体）。

（2）font-size：设置字体大小（常以px为单位）。

（3）font-style：设置字体风格（normal标准、italic斜体、oblique倾斜）。

（4）font-weight：设置字体粗细（normal默认值、bold粗体、bolder更粗的字体、lighter更细的字体）。

（5）font：在一个声明中设置所有字体属性。（顺序：风格->粗细->大小->类型） 。

4、文本颜色

（1）RGB：在这十六进制的表示方法中，前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。

（2）RGBA：在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0~1。

5、水平对齐方式：

（1）left：把文本排列在左边，默认值，由浏览器决定。

（2）right：把文本排列到右边。

（3）center：把文本排列到中间。

（4）justify：实现两端对齐文本效果。

6、首行缩进和行高

（1）line-height：行高

（2）text-indent：首行缩进。

（3）除了使用像素表示行高外，也可以不加任何单位，按倍数表示，这时行高是字体大小的倍数。

（4）对于中文网页，em用得较多，通常设置为2em，表示缩进两个字符。

7、文本装饰（text-decoration）：

（1）none：默认值。

（2）underline：下划线。

（3）overline：上划线。

（4）line-through删除线。

8、垂直对齐方式：

（1）在目前的浏览器中，只能对表格单元格中的对象使用垂直对齐方式属性。

（2）常用来设置图片与文本的对齐方式：

img,span{
    vertical-align：middle/top/bottom;
}

9、文本阴影：为正时，分别在右和下；模糊半径为0，表示不具有模糊效果。

text-shadow:color x轴位移（x-offset） y轴位移（y-offset） 模糊半径（blur-radius）;

设置超链接和列表样式

1、超链接伪类：伪类就是不根据名称，属性，内容而根据标签处于某种行为或状态时的特征来修饰样式，也就是说，超链接将根据用户单击访问前（a:link），鼠标悬浮在超链接上(a:hover)，单击未释放(a:active)，单击访问后(a:visited)的四个状态显示不同的超链接样式

2、超链接伪类的语法：

标签名：伪类名{声明}

3、设置伪类的顺序：a:link>a:visted>a:hover>a:active

4、列表样式：
（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>

background-color:transparents;    /*是透明的，为默认值*/

background-image:url(图片路径)

background-repeat:repeat;    /*沿水平和垂直两个方向平铺*/
background-repeat:no-repeat;    /*不平铺，即背景图像只显示一次*/
background-repeat:repeat-x;    /*只沿水平方向平铺*/
background-repeat:repeat-y;    /*只沿垂直方向平铺*/

background-position:x y;

background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

background-size:auto;    /*默认值，使用背景图片保持原样*/
background-size:percentage;    /*当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的*/
background-size:cover;    /*整个背景图片放大填充了整个元素*/
background-size:contain;    /*让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域*/

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