一、结构层（Structure）：虽然网页上到处都是各种各样的选项卡但从结构层即 HTML 上主要有两种写法：普遍采用的是第一种即将用于触发动作的所有选项卡的标题写到一组，再将该选项卡中所有页的内容写到一组并保持两者对应顺序一致，然后使用 JavaScript 判断触发点击或划过的是第几个标题然后显示与该标题相应的第几个内容即可，该结构因为代码比较简单 JS 也容易加所以被多数网站采用；而我个人则倾向于第二种结构即每一个选项卡页的内容均单独编码，然后额外添加一个容器用来展示被选中的选项卡内容，虽然该方法的代码量会较第一种更多及复杂但可以保证在客户端即使禁用掉 CSS JavaScript 也仍具有很好的可读性，而同样的对于搜索引擎优化（SEO）更是如此，该结构可以更为清晰的告知搜索引擎你的内容组织方式及相互关系其代码如下：

//首先是多数站点采用的写法：

标题一标题二标题三


内容一

内容二

内容三



 //如果用户禁用 CSS JS 内容将失去相关性及联系性

//然后我自己比较推荐的写法：


标题一
内容一
标题二
内容二
标题三
内容三



 //对于搜索引擎和禁用 CSS JS 的客户端依然可以保持良好的结构性

二、表现层（Presentation）：然后就可以为上述 HTML 代码添加 CSS 样式了，其目的很简单就是将选项卡修饰一个使其更像一个选项卡吧，这里仅提供第二种结构写法的样式代码关键部分，其他如果需要更多的修饰可以自行添加，具体代码如下：

.itab { }
.itab dl { margin:0; padding:0; }
.itab dt { float:left; padding:5px; cursor:pointer; }
.itab dt.active { }
.itab dd {/* display:none; */} /* 这个隐藏也建议由 JS 来实现如果客户端仅禁用 JS 却支持 CSS 的情况下不影响 */
.itab .tabBody { clear:both; }

三、行为层（Behavior）：最后当然是起重要作用的行为层了，主要对用户的一些操作如点击划过等触发一些事件从而改变现有的结构层代码达到选项卡的目的，具体代码如下：

$('.itab dd').hide();  //这里可以交给 CSS 隐藏但那样支持 CSS 不支持 JS 的客户端就郁闷了；
$('.itab').append('


');
$('.itab dt').click(function(){
	$('.itab .active').removeClass('active');
	$(this).addClass('active');  //用于辅助 css 修饰的 class 可区分哪个是当前点击的标题；
	$('.itab .tabBody').empty().append($(this).next().clone());
}).eq(0).click();

我这里偷懒用了 jQuery 首先是隐藏掉原来已经有的各个内容 dd 然后为整个选项卡 itab 最后添加了一个名为 tabBody 的容器用来存放要展示的内容，接着就可以为标题绑定事件了这里选了点击（click）当然你可以可以使用划过（hover）等等，当鼠标点击标题 dt 的时候先清空容器 tabBody 的内容，然后将当前被点击的标题 dt 下面的内容 dd 克隆一份放置到容器 tabBody 中，过程非常简单，另外用于操作 class 的两句是为了方便 CSS 修饰当前被激活的标题。

这样结构的选项卡其优点是很明显的，可以很清楚的告诉搜索引擎和关闭 CSS JS 的客户端你的内容结构层次，当然代码上特别是 JS 代码上会稍显复杂但这样的成本我个人认为是非常值得的，也有人会说现在哪还有不支持 CSS 和 JS 的客户端呢，其实我很多时候也有过这样的想法，但好在当我看到自己的项目在一些掌上浏览器的浏览效果的时候及时否定了自己的想法……

常用的 CSS Hack 符号：

首先是一些最基本的参考资料，即在 CSS 样式表中：

1、微软 IE6 （Trident IV）可以识别“ * ”及“ _ ”号；

2、微软 IE7 （Trident V）可以识别“ * ”但不识别“ _ ”号；

3、火狐 FF3 （Gecko） Safari（WebKit）等标准浏览器对于“ * ”及“ _ ”都不能识别；

通常掌握以上的这几个区别就可以解决目前使用这些主流排版引擎及其衍生浏览器，由于其后的 IE8 在页面呈现上已经符合 W3C 的标准，所以基本上也就无需 Hack 了。但提供这些资料并非意味这是我们最好的选择，随着浏览器的更新及版本升级 CSS Hack 越来越不值得信赖而变得出现各种非预期效果及错误，所以如非必要尽量不要在你的项目中使用 CSS Hack 的方法。

我个人的推荐做法：

我个人比较推荐的做法是使用 IE 独有的条件注释包裹 CSS 引入语句 link 或 body 标签，或者使用 JavaScript 为页面 body 或 html 标签添加额外的 class 然后在 CSS 文件中使用对应的子选择器解决例如：

1、直接在引入 CSS 文件时用条件注释：



2、或是用条件注释给 html body 等标签添加额外的 class 属性：





     ... ... ... ...


3、又或纯 JavaScript 的方法：



4、或者是下面的几段超短代码区分 IE 与非 IE 浏览器：

var ie = !-[1,];
var ie = !+"\v1";
var ie = "\v"=="v";
var ie = 0/*@cc_on+1@*/;

// 挑战这些代码的简直都是天才！ ^_^

使用 JavaScript 的话可以偷懒使用 windows.XMLHttpRequest 这个方法来判断，因为高版本的 IE 或其他标准浏览器都已支持该方法，为什麽说是偷懒，因为这种方法并不准确。如果是仅区分 IE 核心和其他浏览器可使用 window.ActiveXObject 方法，该方法只有 IE 及其内核的浏览器支持。

如果你恰好在使用 jQuery 可以借助 jQuery.browser.version 方法为 body 标签添加一个包含浏览器版本的 class 或 id 以辅助 CSS 调整浏览器兼容性，而 ExtCore 默认就已经为 body 标签添加了浏览器核心及版本信息。

然后就可以使用诸如 body.ie6 或者 html.ie6 之类选择器的子选择器来定义特殊 CSS 样式了。当然有人会考虑那些禁用 JavaScript 的用户，我相信那些用户本身已经是高手了，这里我们打算暂且忽略了。 ^_^

【完整的在线网站技术参考手册】 by W3School.com.cn

网站地址：http://www.w3school.com.cn/

简单说明：该网站几乎囊括了所有网站开发的中文版技术手册，从最基础的 (X)HTML 到 JavaScript XML 甚至是 ASP PHP MySQL 和 WAP 等等，几乎目前所有的主流开发手册都可以在这里找到。另外也有一些小测验方便考察自己的能力，一些简单的教程帮助初学者掌握要点。

【层叠样式表 CSS3.0 参考手册】 by 腾讯互联网业务系统网站组

发布页面：http://webteam.tencent.com/css3/

下载地址：http://webteam.tencent.com/css3/css3.0manual.chm.zip

简单说明：相信不少朋友都跟我一样捧着 苏昱 的样式表手册看了一年又一年吧，但由于其主要内容基于微软发布的一些文档再加上版本过旧，所有难免有些地方可能与 W3C 的标准有悖，这里腾讯网页重构团队为我们详细整理了 CSS3 的参考手册，内容非常全面囊括主流的浏览器支持情况及各种示例代码截图等等，随着主流浏览器对 CSS3 的逐渐支持，该手册的重要性也会越来越强，总之，人手一本的参考手册吧。

【层叠样式表 CSS2.1 参考手册】 by CSS8.cn

下载地址：http://cid-1b6bfa69bfa348b5.skydrive.live.com/self.aspx/OpenData/TechBook/样式表CSS21手册byCSS8.rar

简单说明：这是 CSS8 论坛整理并发布的 CSS2.1 参考手册，详细描述了 CSS2.1 标准中每个属性的语法及兼容性，也添加了 IE 浏览器的一些私有属性并配以示例代码，该手册由 CSS8.cn 维护并更新。

【层叠样式表 CSS2.0 参考手册】 by 苏昱

下载地址：http://cid-1b6bfa69bfa348b5.skydrive.live.com/self.aspx/OpenData/TechBook/样式表CSS20手册by苏昱.rar

简单说明：这是来自 苏昱 基于微软 MSDN 文档库整理的 CSS2 样式表参考手册，相信也是大部分网站前端一直收藏使用的手册之一，该手册 2001 年发布首个版本以后与 2002 年进行了唯一的一次更新，该手册内容主要来自 MSDN 文档，所有仅有 IE 浏览器的部分（话说即使是今天国内的 IE 浏览器市场仍在 98% 以上）值得收藏的一本手册吧。

【层叠样式表 IE 滤镜参考手册】 by 苏昱

下载地址：http://cid-1b6bfa69bfa348b5.skydrive.live.com/self.aspx/OpenData/TechBook/样式表IE滤镜手册by苏昱.rar

简单说明：同样来自 苏昱 整理的微软 Internet Explorer 浏览器样式表滤镜手册，其实该手册并不推荐大家使用，毕竟只有 IE 浏览器支持这些滤镜。

【jQuery 1.3 API 中文版手册】 by 一揪

发布页面：http://code.google.com/p/jquery-api-zh-cn/

在线浏览：http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml

下载地址：http://code.google.com/p/jquery-api-zh-cn/downloads/list

简单说明：优秀的 jQuery 类库是一个优雅的 JavaScript 增强类库，使用 CSS 的选择器大大方便了开发人员并完美处理了浏览器兼容性问题，使开发者可以将全部的精力放在网站主体“Write Less Do More”很好的解释了 jQuery 的用途及价值。该手册由 一揪 整理并保持更新目前已超过 14 万次下载。

【jQuery 1.3 API for Dreamweaver】

下载地址：http://cid-1b6bfa69bfa348b5.skydrive.live.com/self.aspx/OpenData/TechBook/jQueryAPI-ForDw-MXP.rar

简单说明：这是用于 Adobe Dreamweaver CS3/CS4 的 jQuery 自动完成插件，里面包括了 CS3 CS4 的 MXP 安装版与绿色版插件，安装以后使用 jQuery 编写 jQuery 文档的时候会有代码自动完成及提示信息，非常方便实用。

…… 未完·待续 ……

首先我们来看 CSS 盒模型的两个示意图（点击小图查看大图）：

层叠样式表盒模型主要由这些元素组成：margin（边界、外补丁）border（边框）padding（填充、内补丁）height（高）width（宽）从上面的示意图也很容易看出这些元素及属性分别具体的含义。

值得说明的是如果你的页面没有做 DOCTYPE 声明时，标准浏览器将使用标准盒模型解析元素盒子，而 IE 浏览器将使用 IE 的盒模型解析元素盒子，这两种盒模型最大的区别就是对于盒子 width 和 height 的属性值定义：另外对于标准盒模型来说 height 的值即是内容 content 的高度 width 的值即是 content 的宽度，而对于微软 IE 浏览器的盒模型来说 width 的值将包括 border padding 及 content 的宽度总和，高 height 的值也同样包括了 border padding 及 content 的高度总和。

解决这种问题的方法就是在网页文件的头部使用 DOCTYPE 声明的，目前建议采用 XHTML 宽松型标准，即在网页源码中 <html> 标签之前加入以下声明：

这段 DOCTYPE 将告诉浏览器使用标准的 W3C 盒模型来渲染网页代码，如果少了这句麻烦就大了，就等着不停的调整浏览器兼容性吧。现在了解了盒模型几个属性直接的关系之后，想要任意调整网页里面各个盒子的大小及间距就变得非常容易了。其中 margin padding border 均可以在属性名称后面添加 -top -right -bottom -left 等值来分别指定不同方向上的数值，但我个人建议使用缩写即“属性：上 右 下 左； 属性：上 左右 下； 属性：上下 左右；”几种缩写方法，具体如何缩写不在今天讨论范围内。

另外一个需要注意的盒模型兼容问题就是关于背景（BackGround）其中 IE6 和 IE7 的背景属性并不能包括边框（Border）部分，而 IE8 及其他标准浏览器的背景部分则包含边框部分，这点问题需要在边框（border）和背景（background）同时出现的时候特别注意一下。

为了你的页面代码能足够强壮，最好还是加上这句 DOCTYPE 声明，以告诉浏览器使用标准的盒模型来渲染网页代码，但需要补充的是该 DOCTYPE 仅支持 IE6 及更高版本的 IE 浏览器，对于 IE5 无论是否声明 DOCTYPE 浏览器将都是以 IE 盒模型来渲染页面的，但考虑到 IE5 及旧版 IE 的市场份额可以忽略，本文将不考虑此种情况，如果实在需要兼容 IE5 浏览器，这里建议在同一个盒子上不要同时存在 padding border 和 width height 的属性值，可在外层或内层再嵌套一个盒子来分别做出 padding border 和 width height 的值。

四、用心想一想，你一定是生活中的智者！

1、写出 ul ol dl 三种列表的 html 结构（此处为节约篇幅并没有做缩进）：

Item List


Item List


Head List
Item List

2、样式表 CSS 代码缩写（通常由于篇幅没有做相应缩进）：

边框的缩写 { border:1px solid #000; }
背景的缩写 { background:#F00 url(background.gif) no-repeat fixed 0 0; }
字体的缩写 { font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif; }
列表项缩写 { list-style:square inside url(image.gif); }
边界的缩写 { margin:20px 20px 5px; }
颜色的缩写 { color:#FC0; }

可以看出这些题目没有挑某个属性来说事，而是囊括了几乎所有的  CSS 属性缩写方法：边框的缩写没有什么内容需要说明的按照顺序附加属性值即可；背景的缩写需要注意的是如果使用坐标或者位置定位需要同时写出 x 和 y 两个值；字体的缩写需要至少定义字号和行高；关于边界缩写如果四个值一样只需要写这个值即可，如果上下一样左右一样则分别写这两个值，如果上下不一样但左右一样需要写出 上 左右 下 三个值，如果四个值都不同需要按照 上 右 下 左 的顺序写出四个值；颜色的缩写是将 RGB 三个值重叠的部分省略即可，另外对于同一选择器的多次颜色定义仅最后一次生效。

3、修改以下代码，使其结构更加合理以及符合 W3C 标准（XHTML 1.0 Strict）

如果平时没有关注 W3C 验证的话想答出这两点是相当困难的。此题目考察的东西比较细致，使给出的代码结构合理以及符合 W3C 的 XHTML 1.0 Strict 标准：首先是结构合理，这点并没有标准答案，只要是内容结构清晰容易理解即可，比如使用 p 标签包裹那两段文字或使用 li 列表分隔上面那两个链接等等，全凭个人习惯即可，此处就不给参考了：

home

关键需要特别说明的是符合 W3C 这块，在 W3C XHTML 1.0 Strict 标准中，所有的 img 标签必须包含 alt 属性且必须自身使用 /> 标记结束，所有的 target=”_blank” 属性将不被支持，在新页面打开需要设置 rel=”external” 并使用 JavaScript 控制新页面打开；我想该题目重点考察的也就是这两个问题吧，改了这两个比较重要的地方应该就没有问题了，我想这也就是为什么这道大题目叫“仔细想一想”的原因了，

五、勇气拼一拼，让你超越别人的加分题目来了！

这道题我直接做了个 DEMO 详情可访问：

/demo/css-red-cross/

我在 DEMO 中添加了一些辅助的伪类样式，如果你的浏览器版本高于 IE6 可使用鼠标划过每个图案，就很容易看出几个 DIV 是如何排列的。

至此，该份题目解析完毕，可以看出有些题目确实有些偏一些，不过这也正常毕竟人家招的仅仅是“网页重构”工作，分工的细致同时也意味着需要专业技术的高度。题目中有些内容本文并没有详细说明，会在后续的 CSS 系列教程中有所体现。注，本文没有给出部分的题目，可访问 一份“网页重构”试题 查看。

填空

1、为 div 设置类 a 与 b 应编写 HTML 代码？

我们知道 Class 与 ID 的一个重要区别就是：一个 HTML 节点标签可以有多个 Class 却只能有一个 ID 属性，而且该 ID 属性应在当前页面唯一（点击这里查看具体区别）而为一个 HTML 节点标签添加多个 Class 只需要使用空格分隔即可，即： <div class=”a b” /> （属性值 a 和 b 之间使用空格隔开）

2、设置 CSS 属性 clear 的值为什么时可清除左右两边浮动？

这里暂时给出答案为“both”具体原因将在 CSS 系列教程中体现。

3、什么标签必须直接嵌套于 ul ol 中？

这个比较简单 “li” 作为列表条目标签必须嵌套于 无序列表 ul 或者 有序列表 ol 中，类似的还有 head 和 body 必须在 html 标签内等等。

4、CSS 哪个属性可为元素设置外补丁？

看到这个“外补丁”的时候我还纳闷什么叫“外补丁”结果查了一下，其实就是我们通常所说的“边界”即“margin”属性；类似的还有“内补丁”即“填充 padding”等等。

5、设置 CSS 属性 float 的值为什么时可取消元素的浮动？

在 CSS 里通常要取消某个属性值时可尝试设置为“none”即：float:none; 类似的还有如：list-style background-image 等等，但不是所有的属性都可以使用 none 来取消设置的。

6、文字居中的 CSS 代码是什么？

要使一个节点标签内的文字居中可设置该节点标签的 CSS 代码为：text-align:center; 例如：h1{ text-align:center; } 可将所有 h1 标签内的文本居中，需要注意的是该属性具有继承性。

选择：

1、哪个样式定义后，可为内联（非块状）元素定义宽度和高度？

因为只有“块”元素才可以定义高度和宽度，所以对于“内联”元素如果要定义宽度和高度则需要设置“块”显示方式即：display:block; 其实在目前的主流浏览器及  IE8 都已经支持更多的 display 属性如：display:table; 等等；

2、最合理的定义标题的方法？

对于标题标签的使用，考虑“语义”及“搜索引擎”甚至是一些没有开启“CSS”渲染的浏览器来说 h1 – h6 无疑是最好的选择。

3、标签 br 在 XHTML 中的语义是什么？

在 XHTML 中 br 标签用来强制截断文本换行，需要注意的是 br 标签在使用时需要书写完整即：<br /> 如果缺少结束斜杠的话将不能通过 W3C 校验。

4、强制不换行必须设置什么？

由于英文使用空格分隔每个单词，而中文通常在正文中没有空格就造成了 CSS 在调整文本流输出的时候会出现兼容性问题，我们通常需要设置：white-space:nowrap; 来强制不换行；或者用于 IE 的连续英文数字设置：word-break:break-all; 来强制换行（该属性不被其他浏览器支持）；

5、在使用 table 表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值？

其实不仅是 table 包括 body 在内的一些元素标签，各个浏览器都为其设置了一些默认的属性如 填充 或 边界；对于 table 我们需要设置：cellspacing=”0″ cellpadding=”0″ 即“单元格间距”和“单元格边距”两个属性；对于整个页面的四周空白可设置 body 的 padding:0; 即可。

判断：

1、其中 CSS 属性 font-style 用于设置字体的粗细。（错误）用于设置字体粗细为：font-weight 属性。

2、其中 CSS 属性 overflow 用于设置元素超过宽度时是否隐藏或显示滚动条。（正确）另外 IE 支持更高级的 overflow-x 及 overflow-y 等属性。

3、在不涉及样式情况下，页面元素的优先显示与结构摆放顺序无关。（错误）

4、在不涉及样式情况下，页面元素的优先显示与标签选用无关。（正确）由于浏览器在下载页面的时候是以文档流的模式进行下载渲染，所以写在摆放在文档前面的元素将较早下载，至于使用什么标签是与下载无关的。

5、属性 display:inline; 兼容所有的浏览器。（正确）属性 display:inline; 是 CSS1 标准里的属性，自 IE4 开始向上兼容所有主流浏览器。

6、元素 input 属于窗体元素，层级显示比 flash 其它元素都高。（错误）元素 select 是窗体元素。

剩下的试题解答请访问：/blog/1007.html 里面给出了其余的题目解答及最后一道题的 DEMO 演示，个人感觉最后一道题目没有倒数第二道题目刁钻。

一、  耐心填一填！（每空4分，共24分）

1. 为div设置类a与b,应编写HTML代码__________。

2. 设置CSS属性clear的值为__________时可清除左右两边浮动。

3. __________标签必须直接嵌套于ul、ol中。

4. CSS属性__________可为元素设置外补丁。

5. 设置CSS属性float的值为__________时可取消元素的浮动。

6. 文字居中的CSS代码是__________。

二、  精心选一选！（每题4分，共16分）

1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度(   )

A. display:inline      B. display:none     C. display:block    D. display:inheric

2. 选出你认为最合理的定义标题的方法(     )

A. <span>文章标题</span>B. <p><b>文章标题</b></p>

C. <h1>文章标题</h1>D. <strong>文章标题</strong>

3. br标签在XHTML中语义为(     )

A.换行          B.强调          C.段落          D.标题

4. 不换行必须设置(    )

A.word-break        B.letter-spacing        C.white-space       D.word-spacing

5. 在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值(     )

A. cellpadding=”0″      B. padding:0        C. margin:0     D. cellspacing=”0″

三、判断对或错！（每题4分，共24分）

1. CSS属性font-style 用于设置字体的粗细。 (     )

2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。(     )

3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。(     )

4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。(     )

5. display:inline兼容所有的浏览器。(     )

6. input属于窗体元素,层级显示比flash、其它元素都高。(    )

四、用心想一想，你一定是生活中的智者！ （每题9分，共36分）

1. 写出ul、ol、dl三种列表的html结构。

：

2. 将以下CSS代码进行缩写，注意要符合缩写的规范。

代码一 { border-width:1px; border-color:#000; border-style:solid; }
代码二 { background-position:0 0; background-repeat:no-repeat; background-color:#f00;
	background-attachment:fixed; background-image:url(background.gif); }
代码三 { font-style:italic; font-family:"Lucida Grande",sans-serif; font-size:1em;
	font-weight:bold; font-variant:small-caps; line-height:140%; }
代码四 { list-style-position:inside; list-style-type:square; list-style-image:url(image.gif); }
代码五 { margin-left:20px; margin-right:20px; margin-bottom:5px; margin-top:20px; }
代码六 { color:#336699; color:#ffcc00; }

：

3. 修改以下代码，使其结构更加合理以及符合W3C标准。（XHTML 1.0 Strict）

Don’t buy these electronics used

  Money may be tight, but you may kick yourself for purchasing these electronics secondhand.
  Even when the price is low, the risk may be too high.



home
    content

：

4. 简述border:none以及border:0的区别，并给出使用建议。

：

五、勇气拼一拼，让你超越别人的加分题目来了！ （不限于一种方法，共30分）

使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。

要求：1.使用2个div完成；  2.使用3个div完成；  3.使用5个div完成；

虽然试题非常倾向于“网站重构”方面，但同时这些知识确实是网站前端工作所必需掌握的最基本知识，强烈推荐大家仔细考虑一下这些问题，里面的个别内容相当有意思。

一、层叠样式表 CSS 的几种使用方法区别及各自优势：

1、优先级问题，即当样式表中对同 一标记定义有所冲突的时候，浏览器该如何解释（我们暂时抛开 !important 这个特例，因为 IE 对其支持不理想，我个人也极不喜欢自己的 CSS 文件由于加入 CSS Hack 或 important 而变得不整齐）以下不等式描述的优先级即是从低到高（针对同一 CSS 文件内相同选择器的定义冲突，写在后面的将覆盖前面的，而不同选择器针对同一标签的样式则由选择器优先级决定即 ID 选择器的样式优先于 CLASS 选择器的样式，不是很容易理解，所以尽量不要使自己的 CSS 文件大量出现重复的定义，这个以后专题讨论）：

浏览器默认 < 外部样式表 < 内部样式表 < 内嵌样式表

其 中各个浏览器自身对各种标记的优先级最低（如 UL 和 OL 默认是 2em 的 左边界(margin-left) 还是 左填充(padding-left) 呢，在这点上 IE 和多数浏览器是有所区别的，感兴趣的可以自己实验一下）然后是外部样式表，最高优先级是内嵌样式表。

2、外部样式表，绝大多数情况下我们都仅仅是使用外部样式表，这是因为外部样式表相对于其他几种具有以下优势：

代码复用：即一个外部 CSS 文件甚至可以被整个网站的网页共用，而外部 CSS 文件是默认被浏览器缓存到本地的，这将大大减少网页首次及二次下载时间；

便于维护：如果要修改网页效果，只需要修改对应 CSS 文件，而不是修改每个网页，这将便于整个开发团队分工合作互不干扰；

符合标准：将 HTML 的结构层与描述外观的 CSS 表现层相分离也正是 W3C 所倡导的网页标准；

已知缺陷：当然外部样式表也有一些不可避免的缺陷，当网速比较缓慢的时候出现加载中断会导致页面排版错误，这就是为什么我一直鼓励同事们在完成一个页面时最好在禁用 CSS 的情况下再次浏览自己的页面，我们依然需要有良好的结构和可读性；

加载速度：如果外部样式表相当小（如 10 行）那么通过 HTTP 请求加载这个样式表将可能付出相对更多的代价，所以一些页面比较简单流量超大的网站（如 百度 谷歌 等）则直接将 CSS 写在 HTML 代码中。

3、 使用 import 与 link 的区别，经常浏览网页会发现只有极少部分网站使用的是 import 而多数网站都是使用 link 引入样式表。细心的朋友也会发现我在上面描述外部样式表的时候同时示例了两种引入方法，虽然本质上这两种方法的作用都是引入 CSS 文件作用相同，但这两种方法具体还是有一些区别的：

服务提供：其中 link 是属于 XHTML 标签 link 标签除了可以加载 CSS 以外，还可以实现其他功能，如定义 RSS 定义 rel 连接属性等等；而 @import 则是 CSS 提供的一种引入方式，使用 @import 只能加载 CSS 样式表，但 @import 语法可直接在 CSS 文件内使用；

加载顺 序：当一个页面被加载（浏览）的时候， link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完成后再被加载。所以有时候浏览使用 @import 加载 CSS 的页面时开始会没有样式或闪烁，网速慢的时候则会相当明显；

兼容区别：即兼容性的差别，由于 @import 是 CSS2.1 提出的所以老式浏览器均不支持，只有在 IE5 以上的浏览器才能识别，而 link 标签无此问题；

文档模型：即文档对象模型，在使用文档对象模型(DOM)控制样式时，如使用 JavaScript 控制 DOM 去改变网页样式的时候将只对 link 标签引入的 CSS 样式生效，因为@import 不是 DOM 可以控制的；

二、内容总结备忘：

1、访问量大结构简单网页最好使用内部样式表，普通网站最好使用外部样式表，应避免使用内嵌样式；

2、尽量避免使用 @import 方法引入样式表而使用 LINK 标签；

文章中的内容即适合完全没有 CSS 基础的朋友学习查阅，也可供具有一定 CSS 基础的朋友参考提高之用，文中一些个人经验是本人从事纯 XTML+CSS 工作近三年的宝贵收获，现分享给大家，希望能让已经或即将从事这份工作的朋友能够少走一些弯路，从而利用有限的时间获得更大的成就。

一、层叠样式表 CSS (Cascading Style Sheets) 简介：

初期技术人员构造出 HTML 的时候，由于网页在初期仅仅是作为网络出版使用，当时的 HTML 主要侧重于定义内容，比如使用 P 标记表示一个段落，使用 H 标记表示标题等等，却没有对于外观样式如颜色、效果及各种修饰等等做出规范。

随着网络的迅猛发展 HTML 被广泛应用，上网的人们当然希望网页做得漂亮些，因此 HTML 排版和界面效果的局限性日益暴露。为了解决这个问题，人们当然走了不少弯路用了一些不好的方法，比如为 HTML 标记增加很多的属性值(如 <p align=”center”></p> 等)、将文本变成图片、过多的利用表格 TABLE 来排版(记得五年前在大学初接触网页制作的时候我也是滥用表格来排版)，用空白的图片填充白色的空间等，所带来的直接后果便是代码逐渐臃肿，维护变的异常困难，直到层叠样式表 CSS 的出现。

层叠样式表 CSS 可算是网页技术的一个突破，它解决了网页界面排版的难题，从而同时解决了 W3C 中 结构(Structure) 表现(Presentation) 的分离和应用。从此 HTML 的标签将只用来定义网页的内容结构(Structure)，而 CSS 则用来决定这些网页内容如何表现(Presentation)。

二、层叠样式表 CSS 的使用方法：

层叠样式表可通过以下方法使用即：内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet) 三种方法。

1、内嵌样式(Inline Style)：即写在 HTML 标记里面仅对当前所在的标记生效。

黑色文字白色背景

2、内部样式表(Internal Style Sheet)：即直接写在 HTML 标记内仅对所在的网页生效（其中 style 标签内部务必使用 <!– –> 标签包裹样式语句，以防止不支持 CSS 的浏览器或掌上阅读设备将其当作普通文本输出，虽然百度谷歌都没有这么做，但我们需要这么做）。

直接写在页面 body 正文中也是可以的


但不方便维护

3、外部样式表(External Style Sheet)：是用来解决多数网页使用同样样式效果的，我们把整个页面所有的样式写在一个以 .css 为后缀的文件里，然后在每个需要用到这些样式的网页头部(HEAD)引用这个 CSS 文件这里可使用绝对路径或相对路径，推荐相对路径（其中 LINK 标签只能在 HTML 文件内使用，而 @import 可在 HTML 及 CSS 文件内使用。）

or

三、内容总结备忘：

1、层叠样式表 CSS 的出现解决了 W3C 关于 内容 与 表现 分离的思想，并大大减少维护成本；

2、内部样式表务必使用 <!–    –> 包裹，防止不支持 CSS 的浏览器或掌上阅读设备将 CSS 当作普通文本输出；

3、即使弄懂了 CSS 优先级也尽量不要在你的样式表里出现重复定义样式因为各个浏览器在这点上跟你的理解可能有所不同。