html美化网页元素,CSS3美化网页元素

一、网页文本

CSS文本属性可以定义文本的外观，通过文本属性，可以改变文本的颜色、大小、字体类型以及对齐文本，装饰文本等等。

1.字体样式(font)

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型。例如：span{font:oblique bold 12px "楷体";}

字体基本样式

2.文本样式

文本样式

(1)用line-height实现垂直居中

设置文本的垂直居中是把height值和line-height值设置为一样。

line-height实现垂直居中

效果图

3.垂直方式的对齐

垂直对齐方式

效果图

4.文本阴影

text-shadow :color  x-offset  y-offset blur-radius;分别表示：颜色，阴影的水平位移量，阴影的垂直位移量，阴影的模糊半径。

文本阴影

效果图

二、超链接伪类

1.伪类样式

语法：标签名:伪类名{声明;}。

超链接伪类示例

2.使用CSS设置超链接

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

超链接伪类样式

三、列表样式(list-style)

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性list-style-type 。

列表样式的用法

四、背景样式

1.背景颜色

颜色：background-color

背景图像

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

2.背景重复方式

如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。

lbackground-repeat属性

3.背景定位属性

可以利用background-position属性改变图像在背景中的位置。

背景定位

4.背景尺寸(background-size)

规定背景图像的尺寸。

背景尺寸属性值

五、渐变

1.线性渐变

颜色沿着一条直线过渡：从左到右(to right)、从右到左(to left)、从上到下(to button)等。

线性渐变的对角：从左上角到右下角的线性渐变(to bottom right)等。

线性渐变