网站美化常见CSS

伴随网络时代日新月异的发展，用户不仅仅满足于软件系统的功能需求，对软件系统的页面显示效果以及交互模式的要求也逐渐提高。尤其是展示性质的平台页面对于界面美化效果要求更高，有一句话说的好：Html是结构，CSS是装饰，JS是胶水（动态设定CSS）。今天我们来介绍一些网站美化常见的CSS样式以及处理手法。

1  基础教程

1.1 基础语法

选择器

选择器通常为需要改变样式的元素；

1) 元素选择器 ：例如：html {color:red;} 说明：将html设置为红色

2) 类选择器：例如：.ul .li{ color:red;} 说明：将ul于li标签设置为红色

3) ID选择器：例如：#member{font-weight:bold;} 说明：将id为member的标签属性的字体加粗

4) 属性选择器：例如：a[href][title]{color:red;} 说明：将同时拥有href以及title的a标签的文本设置为红色

一条/多条声明

每条声明由一个属性和一个值组成；

例如：h1 {color:red; font-size:14px;}；

说明：其中h1 是选择器，color 和 font-size 是属性，red 和 14px 是值；本例子是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

1.2 伪类说明

Anchor（锚）伪类

例如：a:link {color:#FF0000;} 说明：将未访问的链接设置为红色

例如：a:visited {color:#00FF00;} 说明：已访问的链接设置为绿色

例如：a:hover {color:#FF00FF;} 说明：当鼠标划过链接设置为紫色

例如：a:active {color:#0000FF;} 说明：已选中的链接设置为蓝色

注意：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；a:active 必须被置于 a:hover 之后，才是有效的；且伪类的名称不区分大小写。

first - child伪类

first-child 伪类来选择元素的第一个子元素

例如：p:first-child 说明：选择器匹配作为p元素的第一个子元素的