DIV + CSS 入门

【 tulaoshi.com - Web开发 】

一、什么是DIV+CSS？

“DIV + CSS” 是最新WEB标准的一个典型的应用。

一般来说，网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）等。 结构主要包括例如DIV在内的一系列的HTML(XHTML)标签，表现主要包括CSS（层叠样式表：Cascading Style Sheets）， 行为主要包括例如对象模型（如W3C DOM）、ECMAScript等。

在我们日常所说的“利用DIV + CSS开发”概念中，DIV指的是包括DIV在内的一系列HTML(XHTML)标签，这些标签中除了DIV外，还包括例如span,ul等数十个标签元素。CSS即样式表，是对DIV等标签结构的一种描述，例如位置、边框颜色等。

二、为什么使用DIV+CSS？

“利用这种模式开发的站点是符合WEB设计标准的”。但这种标准给我们带来了什么？仅仅是提高开发难度吗？下面的文字是对WEB标准带来的部分好处的描述：

更简易的开发与维护: 使用更具有语义和结构化的 HTML，将让您更加容易、快速的理解他人编写的代码。

与未来浏览器的兼容: 当您使用已定义的标准和规范的代码，那么您这个向后兼容的文本就消除了不能被未来的浏览器识别的后患。
更快的网页下载、读取速度: 更少的 HTML 代码带来的将是更小的文件和更快的下载速度。如今的浏览器当处于标准模式下将比它在向下兼容模式下拥有更快的网页读取速度。

更好的可访问性: 语义化的HTML（结构和表现相分离）将让使用读屏器以及不同的浏览设备的读者都能很容易的看到内容。

更高的搜索引擎排名: 内容和表现的分离使内容成为了一个文本的主体。与语义化的标记结合会提高您在搜索引擎中的排名。

更好的适应性: 一个用语义化标记的文档可以很好的适应于打印和其他的显示设备（像掌上电脑和智能电话），这一切仅仅是通过链接不同的 CSS 文件就可以完成。你同样可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上的转换。

三、“table”一无是处了吗？

当然不会，表格会是它最好的归属，也是它诞生的初衷，只是在对网页元素的定位上取而代之是更擅长的“DIV+CSS”。

细心的人会问，为什么取代table的是div+css，而不是div呢？ 是的，从标签上讲，的确是div取代了table，但是按照WEB开发标准，结构和表现是分开的。除了有div这个标签外，我们还需要利用css对这个标签进行描述。

四、实例说明table定位和DIV+CSS定位

说了这么多，难以理解！以常见的左、中、右三个板块布局举例，不用理解每个标签、每个CSS属性的含义，我们这里只是浏览一下用法：

1. 表格定位

table width="800" border="0" cellspacing="0" cellpadding="0"
    tr
        td width="200" height="500"左/td
        td width="400"中/td
        td width="200"右/td
    /tr
/table

2. DIV + CSS
DIV:

div id="main"
    div id="left"左/div
    div id="center"中/div
    div id="right"右/div
/div

CSS:

style type="text/css"
#main {
    width:800px;
    height:500px;
}
#left {
    width:200px;
    float:left;
}
#center {
    width:400px;
    float:left;
}
#right {
    width:200px;
    float:left;
}
/style

的确，同样的效果，我们写了更多的代码，但是我们最少能够立刻感受到前面所提到的优点之一：代码更容易读懂了，便于维护了。 例如，我们想要给center板块添加个背景色，我们可以在css中的center中加如下属性：background-color:#FF0000; 一切变得非常容易。

五、用什么工具编辑DIV+CSS？

这里针对的是windows系列开发平台。

Dreamweaver，注意，是在代码模式下。坚持不要看设计模式，而且利用DIV+CSS模式开发的站点很多时候浏览模式下看到的也并不是最终的浏览器显示结果了。

有人反对用Dreamweaver，理由是因为有代码提示功能，有提示，所以不利于对代码的记忆，既然是手写，那就干脆用文本文档。 这点，我是不同意的，一共百十来个代码，我想我们在提示的情况下也能记得吧。而且代码提示功能可以极大的提高手写代码的工作效率，减少代码错误。

还有一款小软件，也是个不错的选择，Editplus，以小而快见长，同样也有代码提示功能。

以上两款软件都是收费的，对于我们习惯用盗版的人来说，这并不是个问题，如果不习惯用盗版的可以使用windows系统自带的文本文档（系统是盗版的？...）。

六、用什么浏览器测试我们的作品？

最低要求：通过IE6.X 和 firefox测试。

因为部分css属性在ie和firefox下有不同的表现。我们在以后的实践中会逐渐发现这样的问题。

七、CSS样式表三种不同的存放位置

1.和DIV混写
div style="color:#990000; font-size:20px;"cooant.com/div

2.将CSS和页面结构部分写在同一个文档中，例如页面test.htm
test.htm
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titletest page/title
style type="text/css"
.website {
    font-size:30px;
    font-family:"Verdana", Arial, Helvetica, sans-serif;
}
/style
/head
body
div class="website"cooant.com/div
/body
/html

3.将结构页面和样式表文档分开写，利用link标签对CSS文档引用，也是最推荐的一种，例如：

页面test.htm
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titletest page/title
link href="style.css" rel="stylesheet" type="text/css" /
/head
body
div class="website"cooant.com/div
/body
/html

三种不同位置，写法也是有所区别的，大家需要自行看仔细。

八、使用DIV+CSS开发网站

在继续阅读以下部分之前，我们要确定已经将以上部分浏览过两遍以上并且已经稍作休息了。

从前面第四部分的例子可以看出，我们分别写了DIV部分（结构）以及CSS部分（表现），然后通过DIV的ID属性使用到了相对应的CSS样式：div id="main"/div

有过网页制作经验的读者可能还见过这样的应用div class="main"/div是的，如你所见到的，这里用的是class属性而不是id。

需要注意的是，利用id或class使用css，在定义css时候写法是不一样的。当我们用id属性时，定义的css是以“#”开头加样式表名的。而使用class时候定义的css样式是以“.”开头的。例如：
结构部分：
div class="siteadd"
    http://www.cooant.com
/div

CSS部分：
.siteadd {
    width:400px;
    height:30px;
    line-height:30px;
    padding:5px;
    border:1px solid #000000;
}
九、使用ID还是CLASS？
既然利用class或者使用id属性能够实现同样的效果，那我们到底选择那个呢？我们利用以下几点分别说明：

1. 一个结构文档中可以多处使用同一个class名，而id名必须是唯一的。例如我们定义了一个描述字体的CSS。
.font {
    color:#009900;
}

以下文档中将多次使用到同一个样式表“.font”
h1 class="font"DIV + CSS 基础教程/h1
div class="font"网址：http://www.cooant.com/div

而id名在同一个文档中是需要唯一的。

2.利用class可以对于同一个标签多重定义样式。例如：
css:
.font {
    color:#009900;
}
.border {
    border:1px solid #000000;
}

使用以上两个CSS样式表对描述同一个DIV，多个样式表名用空格隔开：
div class="font  border"网址：http://www.cooant.com/div

3. ID还有更多的特殊用途

例如我们用Javascript控制某个DIV的时候我们这里就需要用到DIV的ID名。这里就不细加讨论了。

还有更多的区别，大家可以在以后实践中总结，而且很多时候可能设计到个人习惯问题。

我个人习惯将某个确定用途的非重复的板块定义为ID属性。例如页面的header部分，或者footer部分，或者Logo等等。

十、总结

到此为止，大家对DIV+CSS应该已经有了整体的认识，并且完全可以自行设计制作些简单页面。

另外还有更多的xhtml标签，以及css的更多属性的定义。大家可以参考相关的文档。其它标签在对css的使用方法上，是一样的。
相关资源搜索关键字：XHTML标签、CSS属性。