DIV+CSS网页布局初探

曲伟峰 辽宁轻工职业学院

1.什么是CSS?DIV?CSS+DIV?

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、表框等。使用CSS能够简化网页的格式代码，加快下载显示速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一，通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位，实现网页页面内容与表现相分离。"DIV+CSS"其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。

2. CSS基础语法

CSS语法规则由两个主要的部分构成：选择器和一条或多条声明。选择器一般是需要改变样式的HTML元素，每一条声明有一个属性和一个值组成，属性和值用冒号隔开。

3. 选择器

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

CSS选择器常用的有：HTML选择器、ID选择器、Class选择器，当然还有很多其他的就不一一说了。

HTML选择器：就是以HTML标签作为选择器，其作用域是所有符合条件的HTML标签

ID选择器：可以为标有特定 id 的 HTML 元素指定特定的样式，ID选择器选择器以 "#" 来定义，ID属性只能在每个 HTML文档中出现一次。

Class选择器：使用HTML标签的Class属性设置值的选择器，有关联类选择器和独立类选择器：

关联类选择器：可以为同一元素定义不同的样式

独立类选择器：可以为多个不同的元素定义相同的样式

优先级为：ID选择器>Class选择器>HTML标签选择器

4. CSS设置方式

外部样式、内联样式（在HTML元素内部）、嵌入样式（位于标签内部）

5. 继承

所有嵌套在某个HTML标签中的HTML标签都会自动继承外层标签设置的样式规则。

6. 盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型，盒子模型具有内容(content)、填充(padding)、边框(border)、边界(margin)这四个属性。

7. Div+CSS标准的优点 :

大大缩减页面代码，提高页面浏览速度,缩减带宽成本;结构清晰，容易被搜索引擎搜索到，天生优化了seo。缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。CSS非常容易编写。提高易用性。使用CSS可以结构化HTML。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。更好的控制页面布局。表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。更方便搜索引擎的搜索。可以轻松地控制页面的布局。可以将许多网页的风格格式同时更新，不用再一页一页地更新了。可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。