css样式定义

转载地址：there

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

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

属性声明用花括号括起来，其内容由一些属性-值对组成，属性名称与属性值用冒号（:）分割，不同属性-值对用分号（;）分割。
当在HTML网页中定义CSS规则时，应把规则定义放在<style>与</style>标记之间；如果是在单独的CSS文件中定义规则，则不必使用<style>标记。

三、选择符的类型
定义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="class1 calss2"></span>//给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个类别。