体验DIV+CSS(2)：DIV + CSS 进阶

来源：互联网发布：丰趣海淘是正品吗知乎编辑：程序博客网时间：2024/05/16 06:18

DIV + CSS 进阶

一、几点学习准备与建议

XHTML Tags 与 CSS Properties，作为一个合格的WEB页面制作者，我们应该备有这两个文档，我指的不是泛泛而谈的教程，而是那种描述型的手册。记得，打印下来！

Xhtml Tags.doc CSS Properties.doc 和入门教程里提供的一样，是英文版的。CSS全称“Cascading Style Sheets”（层叠样式表），DIV全称“division”，知道这些后我们会更加容易记得并理解这些没有含义的标签。是的，我们有必要利用机会多学习点英语。另外，我是个英语差生。

另外，既然我们已经下定决心利用DIV+CSS重写我们的站点了，那就该使我们的作品更符合WEB标准，规范我们的习惯。

正确的例如：全部用小写（<!DOCTYPE>除外），关闭所有的元素，属性不能被精简且必须加引号，不要使用将要被遗弃的标签元素等。我们用实例对比一下两种写法：

错误重重的写法：

<DIV class=header>
<div><center>我的个人主页</center></div>
<div>
简介：关于网页制作的站点<br>
网址：http://www.cooant.com
</div>
<div>
<input type="checkbox" name="checkbox1" checked > 下次跳过该页面
</div>
</div>

正确的写法：

<div class="header">
    <div style="text-align:center">我的个人主页</div>
    <div>
        简介：关于网页制作的站点<br />
        网址：http://www.cooant.com
    </div>
    <div>
        <input type="checkbox" name="checkbox1" checked="checked" /> 下次跳过该页面
    </div>
</div>

认真对比以上两种写法，记得不管是成对标签或者是单个标签都是要关闭的，另外不同级别的元素前记得留空格，这样结构看起来会更清晰。

最后，请注意你的坐姿。

二、XHTML标签

到目前为止依然会有部分人还没有下载到相关文档。下面我几乎分类列出了所有标签。至于对每个标签的描述和用法。在余下的实战练习中，我会选择部分常用的来讲解。

你也可以跳过这一部分。

基本标签(Basic Tags)
<!DOCTYPE> <html> <body> <h1>到<h6> <p> <br /> <hr /> 

字符格式化标签(Char Format)
<b> <i> <em> <big> <strong> <small> <sub><sup> <bdo>

输出标签(Output)
<pre> <code> <tt> <kbd> <dfn> <var> <samp>

块标签(Blocks)
<acronym> <abbr> <address> <q> <cite> <ins> <del>

链接标签(Links)
<a> <link>

输入标签(Input)
<form> <input /> <textarea> <button> <select> <optgroup> <option> <label> <fidldset> <legend>

列表(Links)
<ul> <ol> <li> <dl> <dt> <dd>

图片标签(Images)
<img /> <map> <area />

表格(Tables)
<table> <caption> <th> <tr> <td> <tbody> <tfoot> <col> <colgroup>

样式标签(Style)
<style> <div> <span>

Meta信息(Meta Info)
<head> <title> <meta> <base />

程序标签(Programming)
<script> <noscript> <object> <param>

你可以不同意以上的分类方法。

三、CSS 属性

例如字体部分包括：font-size,line-height等。每个属性都有对应的参数。一个完整的写法如下：

.myfont {
font-size: 12px;
line-height: 20px;
}

由上面的CSS定义可以看出，一个样式表是由“.”开头(对应ID的样式表是“#”开头的)，接着依次是样式表名、花括号、属性列表、闭合花括号。需要注意的是每条属性需要以“;”结尾，最后一条属性的“;”可以省略不写。每个属性对应有相关的参数。

CSS中除了字体属性外，还包括颜色、盒子模型、位置、列表、表格等。这里就不一一列出，大家可以到网络上检索相关资源。

四、<!DOCTYPE>

这里我把<!DOCTYPE>标签单独拿出来说明，在于它的特殊性。特殊在它是所有标签里唯一必须大写的标签，其次它是我们经常见到，地位很重要，却不被关心的标签。

DOCTYPE，原意Document Type ，即文档类型。使用如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

声明文档类型，让浏览器知道你使用哪个版本的HTML(XHTML)。如果你没用指定或者指定了一个错误的文档类型，则浏览器会假设你并不知道自己在干什么，并且自动切换到“变通模式（quirks mode）”，结果会有一些元素不能被正确地渲染。显然这样做显得很“宽容”，但事实上却带来很多混乱和不确定的因素。（本段文字来自网络）

上面的这段代码申明了我们将要用的版本是XHTML Strict，也就是我们写的代码会按照这个版本规定的模式来呈现给网站浏览者。当然了，你也可以打开看看这到底是个什么样的文档。
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

XHTML 1.0 除了strict（严格）版本外还有 transitional（过渡）,frameset（框架）两个版本，至于各种区别，我们这里就不细细讲解。strict是我所推荐的。

五、CSS 盒子模型（CSS Box Model）

如果你不能理解什么盒子，那我们这里暂且把一组<div> </div>当作一个盒子，一个用来存放内容的容器。

2D 模型：
CSS Box Model Demo

3D 模型：

以上的2D，3D模型清晰的表现了盒子中各个属性的层叠关系以及内外位置关系。

这里我们分析一下这个盒子模型，先以2D模型为例，Border（边框）为参照：

边框：border
边框外的“margin”作为外空白，描述了边框和边框外其他元素之间的距离。
边框内的“padding”为内空白，是内容（例如文字、图片等）与边框之间的距离。

在这里需要提出的是，建议所有尺寸都以象素(px)为单位，包括文字。

结合3D模型，我们还可以得出以下结论。（transparent elements：透明元素）

背景色和背景图片和边框之间是无法设置空白的。
背景图片在背景色之上，也就是说背景图片可以覆盖背景色。

这里还有个注意点：对照2D图中的虚线部分，它的宽度和高度是我们设置的的盒子的宽度和高度，内空白(padding)会将盒子的边框撑开，也就是我们实际看到的边框宽度是我们设置的盒子的宽度加上对应的padding宽度(包括padding-left , padding-right)。

范例：

有了这个盒子模型你还会搞不清楚例如"border","padding","margin"之间的层次、关系和相互影响吗？

六、总结

通过这一教程的学习，我们会对WEB标准以及DIV+CSS开发模式有个更深层次的认识，这篇教程文章中很多概念的重要性，日后工作中我们会逐渐体会到。

可能会有人责怪我怎么到现在还没有讲实战。事实上，对照XHTML标签文档以及CSS属性文档，我们已经可以自己出题目实战了，下面的实战教程不会讲到基础性的东西，比如怎么设置文字颜色之类的，将会以经验总结以及技巧为主。

是的，给自己出几个题目练习一下。练习的周期最好能持续3天以上。记住，基础很重要，“磨刀不误砍柴工”。