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）等。

线性渐变

---