2.1 DIV CSS初体验

DIV和CSS到底是什么呢？

2.1.1 什么是DIV CSS

DIV+CSS(DIV CSS)是“WEB标准”中常用术语之一。DIV，它是用于搭建html网页结构（框架）的标签，像<b>、<h1>、<span>等html标签一样。CSS，它是用于创建网页表现（样式/美化）样式表的统称，通过CSS来设置DIV标签样式，这一切常常称为DIV+CSS。

<DIV>标记早在HTML3.0时代就已经出现过，但那时并不常用。直到CSS的出现才逐渐发挥出它的优势。

传统的HTML3.2/4.0标签里既有控制结构的标签，如<p>；又有控制表现的标签，如<font>；还有本意用于结构后来被滥用于控制表现的标签，如<table>。结构标签与表现标签混杂在一起。

2.1.2 了解DIV与CSS结合的优势

下面以一个设计1级标题为例，讲解一下DIV与CSS结合的优势。

对于1级标题，传统的表格布局代码如下。

<table width="100%"border="0"cellpadding="0">
<tr>
<td><font face="Arial"size="4"color="#000000"><b>height</b></font></td>
</tr>
</table>
<! --下面是实现下线的表格-->
<table width="100%"border="0"cellspacing="1"cellpadding="0">
<tr>
<td height="2"bgcolor="#FF9900"></td>
</tr>
</table>

可以看出不仅结构和表现混杂在一起，而且页面内到处都是为了实现装饰线而插入的表格代码。于是网站制作者往往会遇到如下问题。

● 改版：例如需要把标题文字替换成红色，下边线变成1px灰色的虚线，那么制作者可能就要一页一页地修改。CSS就是用来解决“批量修改表现”的问题。广泛被制作者接受的CSS属性，包括控制字体的大小颜色、超链接的效果、表格的背景色等。

● 数据的利用：从本质上讲，所有的页面信息都是数据，例如对CSS所有属性的解释，就可以建立一个数据库，有数据就存在数据查询、处理和交换的问题。由于结构和表现混杂在一起，装饰图片、内容被层层嵌套的表格拆分。

在上面的这个实例中，从哪里开始是标题？哪里开始是说明？哪些是附加信息不需要打印？如果只靠软件是无法判断的，唯一的方法是人工判断、手工处理。这要如何解决呢？解决的办法就是使结构清晰化，将内容、结构与表现相分离。

对于1级标题的实现如下所示。

<h1>height</h1>

同时，在CSS内定义<h1>的样式如下。

h1{
font:bold 16px Arial;
color:#000;
border-bottom:2px solid#f90:
}

这样，当需要修改外观的时候，例如，需要把标题文字替换成红色，下画线变成1px灰色的虚线，只需要修改相应的CSS即可，而不用修改HTML文档，如下所示。

h1{
font:bold 16px Arial;
color:#f00;
border-bottom:1px dashed#666:
}

如果为了实现特定的效果，还需要做进一步的处理。

|提示|

虽然DIV+CSS在网页布局方面具有很大的优势，但在使用的时候仍需注意以下3个方面。

① 对于CSS的高度依赖会使得网页设计变得比较复杂。相对于表格布局来说，DIV+CSS要比表格定位复杂很多，即使网站设计高手也很容易出现问题，更不要说初学者了。因此DIV+CSS应酌情而用。

② CSS文件异常将会影响到整个网站的正常浏览。CSS网站制作的设计元素通常放在外部文件中，这些文件可能比较庞大且复杂，如果CSS文件调用出现异常，那么整个网站将会变得惨不忍睹，因此要避免那些设计复杂的CSS页面或重复性定义样式的出现。

③ 设计的CSS网站浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox）中却可能面目全非。因此，使用CSS+DIV布局网站页面时也需要注意浏览器的支持问题。