文档介绍：基于Web标准的CSS网页布局应用分析
佟欧宋亭燕郑小松王海燕
(沈阳药科大学计算中心沈阳 110016)
[摘要]: 本文主要介绍了基于Web标准的网页制作方法,并以一个实例详细讲解了网页的布局规划、HTML的生成、CSS样式表的控制,最为直观的介绍了div+css的网页布局方式。这种布局方式因实现了网页表现与内容的分离而使网站的维护及更新变得更加方便,从而成为了当今非常流行的网站布局方法。
[关键字]:CSS Web标准网页布局
引言
如今,网站设计已离不开Web标准,离不开CSS布局。更多的网站设计师开始应用Web标准来设计及建立网站,而CSS布局中的表现与内容分离则可以使网站的维护和更新变得更加容易。因此有必要了解如何应用CSS建立一个符合Web标准的网站。
关于Web标准
实际上Web标准不是某一个标准,是由W3C(World Wide Web Consortium)和其他标准化组织制定的一套规范集合,包含一系列标准。其目的在于创建一个统一的用于Web表现层的技术标准,以便通过不同浏览器或终端设备向最终用户展示信息内容。
简单的说,Web标准分成三大部分:结构(Structure)、表现(Presentation)和行为(Behavior)。结构化标准语言主要有:HTML(超文本标记语言)、XML(可扩展标记语言)和XHTML(可扩展超文本标记语言);表现标准语言主要包括CSS(层叠样式表);行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。网页设计要符合Web标准实际上就是对网页的结构、表现与行为进行分离——即表现与内容分离。
什么是CSS
CSS(Cascading Style Sheets,层叠样式表)是控制网页布局样式的基础,是能够使网页表现与内容分离的一种样式设计语言。在网页设计中,通过CSS样式表就可以轻松控制页面的布局、字体、字号、颜色、背景以及进行一些初步的页面交互设计。
CSS作为一款目前最优秀的表现设计语言,它的优势主要有:可以支持众多浏览器,实现了在众多平台及浏览器下对样式的表现最为接近;真正实现了表现与内容分离;拥有样式设计的强大控制力;具有优越的继承性,最大限度的达到了代码重用,从而降低了维护成本。
CSS与HTML的结合
CSS与HTML的结合使用完美的实现了网页表现与内容的分离。网页设计通常使用CSS来控制网页的样式,其中包括页面的布局、字体、背景等等信息。而HTML则用来罗列网页中的内容,其中包括文本、图片等。
CSS样式表可以以多种方式应用到HTML页面当中,但最常用最好的方式是外部连接。这种方式是将CSS样式代码放入一个外部文件中,再由HTML中的LINK元素进行调用。这样做的好处是可以使多个网页调用同一个样式表文件,最大限度的实现了代码重用及网站文件的最优化配置。
具体的使用方法为:在HTML页面中的head标签下使用LINK元素调用。<link rel="stylesheet" type="text/css" href="" />
div+CSS的布局方式
div是XHTML中的一个标签,以<div></div>这种形式出现。简单的说,div就像是一个容器,是XHTML中专门用于布局设计的容器对象。传统的布局方式是用表格来布局,页