css与页面布局

《css与页面布局》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第19章CSS与页面布局的知识使用CSS布局页面和传统的使用表格布局页面有很大的区别。使用CSS布局页面时，要注意很多问题，例如元素的居中问题、图文混排问题、元素的浮动问题、宽度的计算问题、高度的扩展问题等。下面详细讲解使用CSS进行页面布局的知识。19.1CSS页面布局简介本节主要讲解使用CSS布局页面的基础知识，其中包括CSS布局页面的优点、CSS页面布局的基本思想等。19.1.1CSS布局页面的优点1．网站浏览者的好处由于页面代码量减少，文件下载速度更快。同时，浏览器显示页面的速度也更快。由于清晰的语义结构，使得内容能被更多的用户（

2、包括部分残障人士）所访问。由于实现了结构和表现相分离，内容能被更多的设备（包括手机、打印机等）所访问。由于样式文件的独立性，用户选择自己喜欢的界面变得更容易。19.1.1CSS布局页面的优点2．网站拥有者的好处由于代码变得更简洁和组件用得更少，使得维护变得很容易。由于对带宽要求的降低，节约了成本。由于页面结构清晰的语义性，使得搜索引擎的搜索变得更容易。19.1.2CSS布局页面的基本思想CSS布局页面的基本思想，就是实现网页结构和表现相分离。内容、结构和表现是一个网页必不可少的组成部分，其中内容是页面传达信息的基础，表现使得内容的传达变得

3、更加明晰和方便，而结构则是内容和表现之间的纽带，内容、结构和表现的具体含义如下所示。内容：是指网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。其中不包括修饰的图片、背景音乐等。19.2定义文档结构在W3C推荐的Web标准中，推荐使用过渡的XHTML文档作为CSS布局页面的文档，具体操作如下所示。19.3CSS样式的优先级在页面中，定义CSS样式有三种形式：一种为只对该文档的CSS样式；一种为附加的CSS样式；还有一种为使用style属性定义的CSS样式。其中前两种定义CSS样式的方法，在第18章中已经讲解过了。下面讲解使用

4、style属性定义的CSS样式的内容，以及三种方式的优先级。1．使用style属性定义CSS样式19.3CSS样式的优先级2．CSS样式的优先级19.4页面属性与CSS样式在文档中，页面属性的部分参数，会使用CSS样式进行定义，其中包括外观、标题、链接等选项。页面属性的样式会定义在文档的头部，如图19.5水平居中在大多数页面中，页面的内容都居中显示，如果页面中未定义任何属性或添加相应的元素，页面元素就会以页面的左上角为基准显示。下面分别讲解在传统布局和CSS布局中，定义页面元素居中的方法。19.5.1传统布局中定义内容水平居中在传统布局中

5、，一般通过使用