转载地址：there

二、定义CSS规则

CSS样式表由一些规则组成，每个规则由选择符和属性声明两部分组成，其中，选择符用于标识格式元素(如p、h3标记、类名或id)，属性声明则用于定义元素的样式。

定义CSS规则的语法如下：

选择符{属性:值;属性:值;...}

属性声明用花括号括起来，其内容由一些属性-值对组成，属性名称与属性值用冒号(:)分割，不同属性-值对用分号(;)分割。

当在HTML网页中定义CSS规则时，应把规则定义放在标记之间；如果是在单独的CSS文件中定义规则，则不必使用

三、选择符的类型

定义CSS样式时，可以使用各种类型的选择符。选择符主要有以下几种类型。

1、类型选择符

类型选择符用于选择以特定HTML标记定义的页面元素。语法是：

tagName{属性:值;属性:值;...}

其中，tagName表示某个HTML标记的名称。

使用特定的HTML标记作为选择符，可以对这个HTML标记的外观样式进行重新定义，由此定义的CSS样式将自动应用于页面中所有通过该标记定义的元素。

例如：

input{font-family:"宋体";font-size:9pt;}

2、类选择符

类选择符用于选择具有特定class属性的页面元素。语法是：

*.className{属性:值;属性:值;...}

tagName.className{属性:值;属性:值;...}

其中，className指定类选择符的名称，tagName表示某个HTML标记名称。

使用“*”作为类选择符的前缀时，若要应用所定义的类样式，把元素的class属性设置为此选择符的名称即可。此类样式可以应用于所有页面元素。

此处的型号可以省略。

若使用某个HTML标记作为类选择符的前缀时，对于要应用所定义的类样式，把元素的class属性设置为选择符的名称即可；这时，此类样式只能应用于页面上的特定HTML元素(由tagName指定，

同时满足两个条件)。

例如：

.style1{color:#FF0000;}

div.style2{color:#0000FF;}

//给span应用多个class，class之间使用空格

3、id选择符

id选择符用于选择具有特定id属性的元素。语法是：

#idName{属性:值;属性:值;...}

tagname#idName属性:值;属性:值;...}

其中，idName指定id选择符的名称，tagName表示某个HTML标记名称。

其组合规则含义与类选择符相同，可对于某一id属性或

同时满足特定标记的页面元素定义CSS规则。

例如：

#style1{font-size:12px;}

p#style2{font-family:"华文行楷";}

4、包含选择符

包含选择符由E1和E2两个选择符组成，用于选择所有被E1包含的E2，

也就是“与”的关系。语法是：

E1 E2{属性:值;属性:值;...}

其中，E1和E2可以是HTML标记名称、类选择符或id选择符。该CSS规则只适用于，

同时满足E1和E2选择的页面元素上。

例如：

h1 em{color:blue;}

#style1 span{background:blue;}

div.side h1{font-size:large;}

.fh span{//表示类fh下的span元素应用的样式，中间使用空格

padding-right: 3px;

width: 65px;

text-align: right;

display:inline-block;

}

5、选择符分组

若希望把同一个CSS规则应用于多个选择符，此时，应以逗号分隔的方式把那些选择符合并为主，

它们之间是“或”的关系。语法是：

E1,E2,E3{属性:值;属性:值;...}

例如：

body,td,th,input,textarea,select{font-family:"宋体";font-size:9pt;}

6、伪类选择符

CSS中的伪类概念延伸了CSS样式的表现形式，可作用与某些动作行为：

a:link{属性:值;属性:值;...}  /* 设置a元素在未被访问前的CSS属性 */

a:hover{属性:值;属性:值;...}  /* 设置a元素在其鼠标指针悬停时的CSS属性 */

a:active{属性:值;属性:值;...}  /* 设置a元素在鼠标点击但未释放时的CSS属性 */

a:visited{属性:值;属性:值;...}  /* 设置a元素在其链接地址被访问过时的CSS属性 */

例如：

a:link{text-decoration:none;}

a:hover{text-decoration:underline;color:blue;}

a:active{color:red};

a:visited{text-decoration:none;color:#666666;}

四、CSS样式表的位置

按照存储位置，CSS样式表分为内嵌样式表和外部样式表，前者包含在网页首部，后者存储在单独的样式表文件中，此外还可以再HTML元素中通过style属性直接设置各种CSS属性。

这部分的内容，请见： [原]《JavaScript DOM编程艺术》的笔记：CSS-DOM

一文中的介绍。

※ 注意，对于同一页面元素，如果同时通过设置id、class和style属性应用了不同的CSS样式规则，则作用的优先顺序是：style属性最高，id属性次之，class属性更次之。

五、CSS单位应用

在定义CSS规则时，经常遇到对CSS属性选择单位的问题。

1、长度单位

长度单位是网页设计中最常用的单位。其可分为绝对长度单位和相对长度单位两种。

a、绝对长度单位

有：cm(厘米)、mm(毫米)、in(英寸)、点(pt)、pc(派卡)。它们之间的换算关系如下：

引用

1in=2.54cm

1cm=0.3937in

1mm=0.1cm

1pt=1/72in=0.3478mm

1pc=12pt=1/6in

b、相对长度单位

有：px(像素)、em和ex。

引用

px单位：表示像素。像素是相对显示器屏幕分辨率而言的。一般建议的像素参考值是：在一个90dpi的显示器上，从距离显示器28in处看一个像素的视角应该不少于0.0227°。

em单位：表示字体高。em单位相当于当前元素内文本的字体大小，具体来说，em代表的高度就是大写字母M或H的高度。若当前未设置行内文本的字体大小，则相对于浏览器的默认字体大小。假设h1元素的字体大小为1.5em，若把页面默认字体大小为9pt，则显示h1元素时所用的字体大小为9pt x 1.5 = 13.5pt；

ex单位：表示字母x的高度。此高度通常为字体大小的一半。若当前未设置行内文本的字体大小，则相对于浏览器的默认字体大小。

2、百分比单位

它用百分号“%”表示。百分比值是相对另一个值而言的，这个参照值可以是长度单位或其他单位。对于每个可以使用百分比单位的属性，这个参照值通常就是该元素的字体大小。

例如：

p{line-height:150%;}

其中，line-height属性指定段落文本的行高。若段落文本的字体大小为12pt，则行号就是12pt x 150% = 18pt。

3、颜色单位

在CSS中，有以下三种颜色单位：

a、#RRGGBB：三个两位十六进制正整数。这些正整数带的取值范围为00~FF。

b、rgb(R,G,B)：其中R、G、B分别表示红、绿、蓝的正整数或百分数。以上三个参数，正整数的取值范围为0~255；百分数值的取值范围为0.0%~100.0%。超出范围的数值将被截至最接近的取值极限。

并非所有的浏览器都支持使用百分数值。

c、颜色名称：不同的浏览器会有不同的预定义颜色名称。它们与第一种单位有对应关系。

六、CSS属性

要通过CSS样式规则来控制网页的外观，就需要对各种各样的CSS属性进行设置。按照功能，CSS属性可以分为字体、背景、区块、方框、边框、列表、定位和扩展等8个类别。