浅谈CSS样式表在网页布局中的应用

摘 要：因特网的快速发展,使得网络成为人们生活工作中不可缺少的媒介,各种制作网站的新技术不断涌现。随着前端技术版本的不断更新和开发方法的不断改进，近几年国内主要门户网站都利用CSS技术对网站进行了重构,而用CSS技术设计的网站在市场上主流的浏览器中都能得到很好的展现。在这里我浅谈一下CSS样式表在网页布局中的应用。

关键词：CSS样式表；样式；元素；CSS 网页布局

一、什么是CSS样式表

Cascading Style Sheets（简称CSS），翻译为“层叠样式单”或“串联样式单”，又简称“样式表”。

Internet的发展使得Html在网页制作中被广泛应用，而Html的排版和界面效果在网页设计中的局限性日益暴露，随着CSS的出现， CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。

CSS的引入是用来扩展Html的，而不是用来替代Html的。也就是说CSS离不开Html，它是一项辅助工具，是对Html功能的一种补充。CSS与网页语言之间无缝集成，能够更精确地控制网页布局，优化网页结构，可以更加灵活地控制网页中文字的字体、大小、颜色等属性，可以与脚本语言相结合，从而使网页中的元素实现动态效果，简化代码，提高下载速度。创建CSS样式表的过程，就是对各种CSS属性设置的过程，所以了解CSS的属性设置是非常重要的。 而样式就是一个规则，它提示浏览器如何将Html文档中的内容展现给浏览者，每个Html标签都有一些特定的属性，它的值决定了浏览器如何显示这个标签。

二、CSS样式表的分类

样式表的分类可以分成三种：

1.内嵌样式（Inline Style）

Inline Style是在标签中加入Style属性，后面附有一些属性及属性的值。

2.内部样式表（Internal Style Sheet）

内部样式表是写在网页的。内部样式表只对所在的网页有效。

3.外部样式表（External Style Sheet)

将所有样式定义放在一个单独的CSS文件中，与Html文件分开存放。这样一个样式表文件可以被许多网页同时使用。

三、创建样式

无论是哪种类型的样式，其创建方式基本上要经过以下步骤：

1.定义样式的类型

在网页内部创建样式文件和建立单独的样式文件；定义样式的类型。

2.设定样式的外观

对样式外观的设定，包括文字、背景、边框、列表等内容。

3.应用样式

对于标签样式和CSS选择器，样式是自动应用于网页的，但对于自定义的样式，则需要特别设定应用的范围。

四、掌握CSS的元素

1.元素是CSS显示的基础

Html中的所有标签都是元素。每个元素都被一个方框包围。有两种类型： ①可替换元素。②不可替换元素。

2.常用的元素及作用

p：描述大段的文本或文章。

br：插入一个换行符。

li：引起列表中的一个项目。

a：表面超链接的起始或目的位置。

img：在文档中嵌入图像或视频剪辑。

ol：绘制文本的编号列表。

border 边框：padding（空白）；margin（边界）。

span：描述标签或提示性文本。

h系列：以标题样式渲染文本。

五、CSS 网页布局

CSS网页布局的基本思路：在CSS布局中，结构和语义具有相同的内涵，它要求网页设计者必须清楚自己设计的页面要展示的内容，并根据这些内容把一个网页分成不同的内容块，以及每块内容的目的，然后再根据这些内容的目的用不同语义元素建立相应的Html结构。

第一步：规划网站。

规划网站主要由五个部分构成:

（1）导航条：具有按钮的特效。

（2）网站头部图标：包含网站的Logo和站名。

（3）网站的主要内容。

（4）边框：一些附加信息。

（5）网站底栏：包含版权信息等。

第二步：创建Html模版及文件目录等。

第三步：将网站分为五个Div，这是网页基本布局的基础。

（1）将“第一步”提到的五个部分都放入盒子中，在Html文件中写入。

（2）为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在CSS文件中写入。

第四步：网页布局与Div浮动等。

往主要内容的盒子中写入一些文字。在Html文件中写入。除网页主要框架之外的附加结构表现（Layout）包括以下内容：①主导航条；②标题（heading），包括网站名和内容标题；③内容；④页脚信息，包括版权，认证，副导航条（可选）。

六、CSS样式表在网页布局中的一些技巧操作方法

如果使用了锚点，在应用超链接样式时要特别小心以下情形：

在代码中使用了锚点（ ），您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形，你可以使用 id，或使用鲜为人知的语法: :link:hover, :link:active。

边距的合并：可用Padding 或 Border 来避免：

您可能被多余的空白搞得焦头烂额。如果您用了 Margins，边距的合并可能就是相关问题的关键。

如果布局中一定要用浮动对象，别忘了适时使用清除（clear）属性：

浮动元素似易实难，而且难以驾驭。如果您发现浮动对象越过了容器的边界，或者不像您所期望的那样显示，请检查。

测试时用嵌入式样式，时再改为外部输入：

将样式表嵌入在你的Html源代码中，在测试时可以消除许多缓存引起的错误，尤其是某些 Mac 下的浏览器。但在前，一定要记住将样式表移到外部文件，用 @import 或 引入。

避免将 Padding/border 和固定宽度同时应用到同一元素:

当子元素的宽度固定时，为其父元素指定Padding。

存在误差，减少宽度:

由于舍入误差，有时 50% 加上 50% 等于 100.1%，会破坏某些浏览器中的布局。不妨试试将 50% 改为 49%。

IE 中显示不正常:

可能是 Peekaboo 臭虫在作怪，尤其是当鼠标经过超链接时能显示正常。

非零值要指明单位:

在用CSS指定字体、边距或大小时，必须指明所用的单位（唯一的例外是 Line-height）。某些浏览器对未指明单位的处理方法不足为凭。零就是零，不管是 Px 还是 Em。其他的非零值都要明确指定单位，例如：Padding：0 2Px 0 1Em；

以上是我个人对CSS在网页布局中应用的见解。

（注：本文为海南经贸职业技术学院骨干校建设科研成果）

参考文献：

[1] 曾 顺.精通CSS+DIV网页样式与布局（第1版）[M].北京：人民邮电出版社， 2007.

[2]王大平.CSS网页布局（第1版）[M].北京：电子工业出版社，2008.

[3] 王觯程，温 谦.别具光芒：CSS网页布局案例剖析[M].北京：人民邮电出版社，2010.