探讨CSS样式在页面中编写方式及应用规则

摘要：本文重点阐述如何编写不同方式的CSS样式及它们的使用规则。

关键词：HTML；CSS；样式；规则

中图分类号：G237 文献标识码：A 文章编号：1671-864X（2016）03-0274-01

CSS名为层叠样式表，在页面设计中广泛运用，目前最新的版本已经到了CSS3，它的主要作用是用来修饰和美化HTML网页标签；它也是Web前端工程师必备的一项基本技能。页面设计时，一般是通过HTML中各种标签进行页面基本的布局构建，通过CSS样式对页面布局的内容进行静态的美化。CSS不同于计算机程序设计语言，它几乎不存在逻辑的编码规范，只需要记住各种样式属性名称及其作用，通过利用HTML标签支持的这些属性的设置实现页面的美化与布局效果。

一、CSS样式在页面中的编写方式

1.以HTML标签的ID属性值作为样式名。

以HTML标签的ID属性值作为样式名称，这种样式只能修饰HTML标签的ID属性值与样式名称一致的标签。在样式名称命名时，除了要与指定的HTML标签的ID属性值相同之外，还必须在样式名称前加上符号“#”。例如：

#myDiv{

color：red；background-color：white；

}

样式myDiv只能修饰指定页面中的HTML标签的ID属性值为myDiv的标签，将其前景色设置为红色，背景颜色设置为白色。通常由于HTML的ID属性值是唯一的，所以一般应用于单个标签。

2.以HTML中class 属性值作为样式名。

在HTML标签中，一般都含有属性class，该属性是用来引用样式进行标签的修饰。在style节点中，定义的样式名称前含有“.”圆点的样式都可以在标签class属性值进行设置。例如：

.myDiv{

color：red；background-color：white；

}

在HTML标签中，凡是其class属性值设置为myDiv的，其前景色都设置为红色，背景颜色设置为白色；这里所影响的标签可能就会涉及多个，与ID名称作为样式名作用范围就不一样。

3.以HTML标签名称作为样式名称。

在样式编写中，还可以用标签本身的标签名称作为样式名称，例如：a，div，p等标签用作样式名称，这样编写的样式会自动应用在对应的标签a，div，p上面。如：

a，div，p{

color：red；background-color：white；

}

在上面的案例中，页面中所有的a，div，p标签都会将前景色设置为红色，背景颜色设置为白色。

4.在HTML的标签style属性值直接编写样式。

HTML标签中，一般都含有属性style，该属性是用来专门美化装饰当前标签，不会对其他标签的修饰起作用。在style中按照样式编写规范编写样式即可。如：

案例

案例中，style属性值内容是将当前a标签的文字颜色设置为蓝色，字体大小设置为14像素，只对当前a标签起作用。

样式可以独立成样式文件进行统一管理，在需要的页面进行样式文件引入；样式也可以独立写在需要页面的head标签中的style节点中，当然还可以直接写在HTML标签属性style中。

二、CSS样式在页面中的应用规则

样式按照不同的规范进行编写后，有的样式会自动应用在当前页面中，如以HTML标签名称为样式名称的和以“#”加ID属性值作为样式名称的；而有的样式则需要开发人员进行调用设置，如：以“.”加样式名称的，必须要在需要使用标签的class属性中进行设置，属性值必须是样式名称。

样式在编写有以id属性、标签名、class属性值作为样式名称的，也有直接写在标签style属性中的属性值的，如果当以上四种样式同时修饰一个标签时，样式的运用规则是采用就近原则，style中的样式先使用，如果取消style的样式，这是id属性值作为样式名称的样式使用，如果id属性取消，则应用class样式，最后起作用的是HTML标签作为样式名称，例如：

在上面的HTML编码中，body标签中的div背景颜色是蓝色；如果删除该标签的style属性，则标签div的背景颜色使用“.myDiv”样式，此时背景颜色为黄色；如果div的class属性删除，此时标签则使用样式名称与标签名一致的div样式，背景色为绿色。

样式已经成为页面不可分割的组成部分，如何使样式为我们服务，这里不仅要懂得样式的编写方式及应用规则，还需要有很好地审美标准及设计理念。

参考文献：

百度百科CSS样式[OL].http：//baike.baidu.com

作者简介：

王平华，江西波阳 1979年10出生 研究生学历 江西现代职业技术学院 软件工程方向。