2024年3月7日发(作者：)

龙源期刊网

基于CSS样式的网页排版布局

作者：刘畅

来源：《消费电子·理论版》2013年第08期

摘 要：层叠样式表（CSS）是一组格式设置规则，用来控制网页的外观。使用CSS样式设置页面格式，可将网页的内容与形式分离。页面内容存放在HTML文档中，而用于定义页面内容形式的CSS规则可以放在外部样式表或HTML文档的头部。目前使用CSS控制网页外观已经成为网页设计领域的规范。

关键词：CSS；HTML；网页布局

中图分类号：TP393.09 文献标识码：A 文章编号：1674-7712 （2013） 14-0000-01

一、CSS概述

在Web2.0标准中，HTML语言只应用于定义网页的内容，要制作出漂亮且符合规范的网页，还需要使用CSS样式来设置网页元素的属性。由CSS样式控制的网页，具有条理规范、布局统一、容易维护的优点。

CSS是Cascading Style Sheets的缩写，又称层叠样式表或级联样式表，是用于控制或增强网页外观样式，并且可以与网页内容分离的一种标签性语言。使用CSS样式表，可以将网页的样式和内容分离，是网页更小、下载速度更快，还可以更加方便地更新和维护网页，因此，在网页设计中得到了广泛应用。19997年，W3C工业结合组织首次发布CSS1.0，用于对HTML语言功能的补充。1998年又推出了CSS2.0，进一步增强了HTML的语言功能。2006年CSS的发布，将网页设计推向全新的时代。

二、CSS基本语法

一个CSS样式表一般由若干样式规则组成，每个样式规则都可以看成是一条CSS的基本语句，每个规则都包含一个选择器和写在花括号里的声明，这些声明通常是由几组分号分隔的属性和值组成的。

（一）标签选择器

标签选择器中，CSS的定义由3部分组成：标签（selector）、属性（properties）和属性值（Value）.基本格式如下：

Selector{property：value…}

龙源期刊网

Selector是HTML中的标签，如h1标签、p标签、img标签等。使用标签选择器，网页中所有相关标签将定义的样式作为默认设置。

（二）类别选择器

类别选择器中，CSS的定义由3部分组成：类别（class）、属性（properties）和属性值（Value）.基本格式如下：

.class{property：value…}

Class是用户自定义的类别名称，在类别名前使用符号“.”作为类别选择器标识。

（三）ID选择器

ID选择器中，CSS的定义由3部分构成：ID（id）、属性（properties）和属性值（Value）.基本格式如下：

#id{property：value…}

ID和class一样，是用户可以自定义的类别名称，所不同的是，ID选择器使用“#”作为定义表示，ID选择器在网页中作用的标签是唯一的。

（四）复合选择器

若要定义同时影响两个或多个标签、类和ID的符合规则，可以使用复合选择器。在复合选择器中，CSS定义由3部分构成：复合名称（name）、属性（properties）和属性值（value）.格式如下：

name{property：value…}

复合名称由标签选择器、ID选择器、类别选择器和特殊连接字符组成。

三、CSS样式表的引用

CSS样式可以通过多种方式灵活地应用到HTML页面中，选择方式根据网页的实际需求确定。

（一）行内样式表

行内样式表是最为直接一种样式，它直接对HTML的标签使用style属性，并把CSS代码直接写在其中，行内样式表的格式为

龙源期刊网

…

由于行内样式表需要为每一个标签设置style属性，后期维护工作量大、成本高，而且HTML代码复杂，因此，不建议使用行内样式。

（二）内部样式表

内部样式表与行内样式表有相似之处，也是把CSS样式编写在页面之中，但是，不同的是，内部样式表所CSS样式的代码部分被击中在同一个区域中，即将CSS写在与之间，并且用标签声明。

内部样式表的格式通常为：

Selector{property：value；…}

使用内部样式表实现了内容与形式的分离，并且可以对样式表作用的元素进行统一修改，既方便了后期的维护，也减小了页面的大小。但是，如果一个网站拥有很多页面对于不同页面都希望采用同样的风格时，内部样式表就会略显麻烦。

（三）外部样式表

外部样式表把CSS样式代码单独编写在一个队里文件中，由网页通过标签调用，并将调用的标签写到网页与之间，也称为连接CSS。

链接式的格式通常为：

多个网页可以调用同一个样式表文件，这样会使网站的整体风格保持统一，同时也实现了页面HTML代码与CSS代码的完全分离。

（四）导入样式表

导入样式表是指在内部样式表的

@importurl（stylesheet）；

龙源期刊网

四、结束语

总之，CSS代码更优化，可以省去了臃肿的代码，更好的进行网页布局，HTML全是用标签的各种属性来定义将要显示的效果，代码就会很多而且后期维护麻烦。业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。

参考文献：

[1]李敏.网页设计与制作案例教程[M].北京：电子工业出版社，2012，11.

[2]杨尚森.网页设计与制作[M].北京：电子工业出版社，2009，09.

[作者简介]刘畅（1978-），计算机网络教研室，研究方向：计算机网络。