赵 爱 涛

(石家庄职业技术学院 信息工程系,河北 石家庄 050081)



使用CSS控制网页的四种方式及比较

赵 爱 涛

(石家庄职业技术学院 信息工程系,河北 石家庄 050081)

CSS控制网页方法有行内样式、内嵌式样式、链接式样式和导入式样式四种.其中，行内样式最简单，用在少量需要独立设置的标记中；内嵌式样式主要用于独立网页的样式控制；链接样式最实用，使用也最广泛；导入式样式可以在一个HTML文件中导入多个样式表，在样式表文件中也可以导入其他样式表.这四种样式同时存在时，使用优先级依次为行内样式、链接式样式、内嵌式样式和导入式样式.

CSS；网页样式；样式表；优先级

CSS(Cascading Style Sheets，层叠样式表)是一种用来为结构化HTML文档或XML应用添加样式(字体、边框、颜色和排版等)的计算机标记性语言，由W3C定义和维护.CSS用于控制网页样式，能够将样式信息与网页内容分离，也能更好地控制页面布局，使网页的体积更小，下载更快[1].因此，使用CSS控制网页已经成为目前网页设计中应用最广泛的技术之一.使用CSS控制页面的方法主要有行内样式、内嵌式样式、链接式样式和导入式样式四种，这四种方式的使用范围各不相同.

1 行内样式

行内样式直接在HTML标记中添加style属性，将CSS代码直接写在其中即可.

例如：

行内样式举例

/* 设置段落文字颜色、下划线、字号 */

行内样式举例

/* 设置段落文字颜色、背景颜色、文字加粗 */

/* 设置标题1文字颜色、边框：点 */

在浏览器中的效果如图1.

图1 行内样式示意

标记和

标记都使用了style属性，并设置了各自不同的CSS样式，它们按照自己的样式显示.

这种方式的优点是每个标记的样式互相不会产生影响，独立实现，这是最简单的CSS使用方式；缺点是每个标记必须单独设置style属性.在后期维护时，每个需要修改的样式都需要逐一修改，维护成本很高；同时会产生过多的网页代码，网页文件容易过大.因此，不推荐大量使用行内样式，只用在少量需要独立设置的标记中.

2 内嵌式样式

内嵌式样式将CSS写在标记之间，并用标记进行声明.如：

内嵌式样式1

内嵌式样式2

内嵌式样式

浏览器效果如图2.

图2 内嵌式样式示意

这种方式将CSS集中放置在

在中的应用如下：

导入样式

导入样式

浏览器效果如图4.

图4 导入式样式示意

导入式样式与链接式样式的功能基本相同，区别在于用import导入样式表时，在HTML文件初始化时就被导入到HTML文件内，并作为文件的一部分；而链接样式是在HTML标记需要格式时才以链接的方式引入.导入式样式最大的优点是可以在一个HTML文件中导入多个样式表，在样式表文件中也可以导入其他样式表，使用非常方便.

[1] 丁海燕，邹疆，邱莎.用层叠样式表CSS技术实现网页特效 [J].昆明冶金高等专科学校学报,2010(5):5-8.

责任编辑：金 欣

A comparative study of four ways of using the CSS control webpage

ZHAO Ai-tao

(Department of Information Technology,Shijiazhuang Vocational Technology Institute,Shijiazhuang,Hebei 050081,China)

There are four ways to use the CSS control webpage,inline,embedded,linked and import styles.The inline style is used in small and independent tags.Embedded style is mainly used for independent control of web pages.Linked style is most practical and extensively used.Import style can import multiple stylesheets in an html file.The four styles may exist at the same time,but in the order of inline,linked,embedded and import styles.

CSS; webpage style; stylesheet; priority

2014-11-12

赵爱涛(1975-)，女，河北石家庄人，石家庄职业技术学院讲师.

1009-4873(2015)02-0039-03

TP393.092

A