DIV CSS入门教程.docx

1、DIV CSS入门教程 本文由xjt1024贡献 doc文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。 第一章： 第一章：应知道 1.1 DIV+CSS 的叫法是不准确的 我想凡是来到 这个专题 的同学， 很大部分是冲着 DIV+CSS 来的， 目的就是学习 DIV+CSS 的，说的再直接一些就是学习如何用 DIV+CSS 布局页面，如何从一张图片制作成标准的 DIV+CSS 页面。 如果你看完第一段还没有发现错误的话，那你就很有必要，接着往下看。 DIV+CSS 这种叫法其实是一种很错误的叫法，这是国人一厢情愿的叫法，而标准 的叫法是什么呢？ 呵呵，没错，是

2、xHTML+CSS，不理解吧，我来细细给你说，如果下面的你能理解，保证 面试的时候会有很大的帮助，同时也可以让你后面的学习更轻松。 为什么国人将这种页面布局的方法叫做 DIV+CSS？ 因为过去布局页面基本上都是用 Table 布局，也可以说是 Table+CSS，而现在布 局页面呢，用 DIV，所以叫 DIV+CSS，听起来也挺合理，认为这样布局出来的页面也就是标 准页面，甚至有些人走了个极端，看到其他网站用到 Table，就会嘲笑页面做的不够标准， 好似用不用 Table 成为了页面是否标准的一个标尺。 现在我可以告诉大家， 凡是有着这种行 为的，都学得不咋样，很皮毛！ 用了 Table

3、页面就不标准了?!纯粹无稽之谈， 那什么才是标准页面呢？先看一个 专业概念，WEB 标准，然后我会问三个问题，你来回答： WEB 标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构 （Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结 构化标准语言主要包括 XHTML 和 XML，表现标准语言主要包括 CSS，行为标准主要包括对象 模型（如 W3C DOM）、ECMAScript 等。这些标准大部分由 W3C 起草和发布，也有一些是其他 标准组织制订的标准，比如 ECMA（European Computer Manufa

4、cturers Association）的 ECMAScript 标准。 看明白了没有？问题来了先不要看答案，从上面的概念中找出 问题一：WEB 标准有几部分组成？ 问题二：结构化标准语言是什么？ 问题三：表现标准语言是什么？ 答案一：三部分，结构、表现、行为 答案二：XHTML 和 XML 答案三：CSS 看完上面三个问题， 哪什么是标准页面呢？呵呵， 说白了就是按照 WEB 标准制作 的页面，从第二个问题和第三个问题中，我们又可以说，用 XHTML 和 CSS 制作的页面就是标 准页面，也就是说 xHTML+CSS 制作的页面就是标准页面。怎么样，理解了吧 为什么不说 XML+CSS 呢？

5、 很简单，因为 XML 过于复杂，且当前的大部分浏览器都不完全支持 XML。所以就 不用它来布局页面喽 既然 xHTML+CSS 制作页面就是标准页面了， 又因为 xHTML 中不只有 DIV 标签， 还 有 span、p、a、ul、li、dl、dt、dd.，即使我不用 DIV，用其他标签(比如:ul、li)制作 出来的页面也是标准页面！所以说用 DIV+CSS 来制作标准页面这句话就很狭隘喽如果满屏 全部都是 DIV 那也算不上标准页面，曾经由一个朋友告诉我，说他的页面全部用的 DIV，每 个模块，每个功能区域，就连一条线都是纯 DIV 实现，并且相当自豪的告诉我，没有人比他 做的页面更标准

6、的了，他不但对 WEB 标准页面的理解有差错还犯了一个很大的错误，xHTML 中的每一个标签都有其作用，各司其职，各守其责，要用的恰到好处，这才算是标准页面， DIV 不是万能的哟！ 说到这里大家应该明白， 这种 Web2.0 时代的布局页面的方法， DIV+CSS 是不准确的， 叫 应该叫 xHTML+CSS。 凡是看到这节的同学们，以后尽可能说 xHTML+CSS，不要再说 DIV+CSS 喽，如果 非要说，也要加上一句说明哟，比如 面试官：你对 DIV+CSS 了解么？ 应聘者：DIV+CSS 准确的说应该叫 xHTML+CSS，我对这种页面布局方法非常了解！. 第二章 使用 Table

7、 布局页面为什么是不明智的？ 大家看到标题，不要误解认为在页面中不能使用 Table，而是可以使用 Table，但是尽 量不要用 Table 去布局页面， 为什么这么说呢， 因为使用 Table 布局页面会使页面失去灵活 性，怎么个灵活法呢，比如今天你好不容易做出来的页面，第二天老板说我不喜欢登录模块 放到右边，还是放到左边，通知板块放到右侧去，页面风格最好一个月换一种，如果遇到这 种老板，提出这种要求，并且你的页面是用 Table 布局的，那么你会崩溃的，工作量那是大 大滴，如果不相信的话，你们自己可以找个页面，用 Table 布局出来，然后变换板块和风 格，你就会体会到 Table 布局的

8、不灵活性，这是为什么呢，因为 Table 的诞生是为存储数据 用的，功能和 Execel 差不多，不是用来布局用的，只不过后来大家发现用 Table 可以把想 放的页面元素， 比如图片， 放到任何自己想放的地方， 且做出来的页面可以兼容多种浏览器， 于是 Table 就承担起了布局页面的重担， 这一做就是好几年. .直到 Web2.0 时代的到来， Table 才从布局页面的工作中逐渐解脱，专心的去存储数据_ 既然 Table 是为存储数据诞生的，那谁的诞生是为了页面布局呢？ 答案就是:DIV，DIV 就是为布局页面而诞生的，只不过一直不被人认同，原因就是 DIV 去布局页面需要 CSS 的配

9、合，使用比较繁琐，还不如 Table 拖拖拽拽页面就布局 OK 了， 感觉还不如 Table 方便， 从而 DIV 被人们放置在一个无人问津的昏暗角落里， 暗暗的等待着 伯乐的出现， 直到 2003 年美国加州 Scott Design 公司参加了在旧金山举办的有关网页排版 和设计的一个研讨会上的演讲，使 DIV 看到了阳光，走出了阴霾. . 说了那么多，我们对比一下 Table 布局页面和 DIV 布局页面的优缺点 使用表格进行页面布局会带来很多问题： * 把格式数据混入你的内容中。这使得文件的大小无谓地变大，而用户访问每个 页面 时都必须下载一次这样的格式信息,带宽并非免费。 * 这使得重

10、新设计现有的站点和内容极为消耗劳力 (且昂贵)。 * 这还使我们保持整个站点的视觉的一致性极难，花费也极高。 * 基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。 而使用 CSS 进行网页布局，它会： * 使你的页面载入得更快 * 降低你的流量费用 * 让你在修改设计时更有效率而代价更低 * 帮助你的整个站点保持视觉的一致性 * 让你的站点可以更好地被搜索引擎找到 * 使你的站点对浏览者和浏览器更具亲和力 * 在世界上越来越多人采用 Web 标准时， 它还能 提高你的职场竞争实力 (事实上也就 是降低失业的风险)。 网上有一篇文章，转过来，文章着重介绍 DIV 三点优势

11、,也许看完文章后，就像社区元 老 heflyaway 说的感觉作者比较迷恋 Table，每篇文章都不可避免的带有个人色彩，而转出 来的目的，其实就是想给大家降降 DIV+CSS 的温度，免得走火入魔，视 DIV+CSS 是为万 能的，如果想学好 CSS 布局页面，就要从多个方面看它，好了，不多说了，下面是作者对 CSS 布局页面的三点优势及理解： 1、内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给 CSS 来处理。 生成的 HTML 文件代码精简，更小打开更快。 2、改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何 HTML 和程序页面， 只需要改动 CSS

12、文件就完成了所有改版。 对于门户网站来说改版就像换件衣服 一样简单容易。 3、搜索引擎更友好，排名更容易靠前。 第一点、内容和形式分离 网页前台只需要显示内容就行，形式上的美工交给 CSS 来处理。生成的 HTML 文件代码 精简，更小打开更快。 这个是 DIV+CSS 技术最显著的特点， 也是 CSS 存在的根源。 完全的颠覆现在传统 （table） 网页设计的技术。所有现在用 table 制作的内容，都可以用 CSS 来解决掉，而且解决的更完 美，更强大。不需要大家再表格套表格，让生成的网页文件大小更精简，更小。table 时代， 一个页面表格达到 10 个以上是非常普遍的事情，但是现在用

13、 DIV+CSS，一个 table 都可以 不用，就完全达到之前的效果，这就直接导致网页文件大小比使用 table 时减少 50%-80%， 更节约各位站长的硬盘空间，访问者打开网页时更快，而且用 div+CSS 时，不像以往使用 table 时，必须把全部 table 读取完了才显示页面内容，现在是可以读一个 div 就显示一个 效果，大家打开网页不用等。好处真是明显而强大。 这个优点的确是显著的，凡是使用传统 table 建的网页，内容多的话，有时候达到 30K 左右都有可能，文件打了打开时，肯定就有 0.0 几秒的延迟。使用 DIV+CSS，你前台打开看 到的全是直接内容，CSS 文件都

14、是导入链接的，是另一个文件，根本和 HTML 文件大小没关 系，这种生成的 HTML 文件，一个也就 10K 左右大小。 第二点，改版网站更简单容易了 不用重新设计排版网页， 甚至于不用动原网站的任何 HTML 和程序页面， 只需要改动 CSS 文件就完成了所有改版。 DIV+CSS 对于门户网站来说改版就像换件衣服一样简单容易，改版时，不用改动全站 HTML 页面，只需要重新写 CSS，再用新 CSS 覆盖以前的 CSS 就可以实现改版了。方便吧。 第三点，搜索引擎更友好，确实能够对 SEO 起到一定的帮助。 通过 DIV+CSS 对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎

15、蜘蛛 爬取。这对于 SEO 也有帮助。 综上所述，个人感觉 DIV+CSS 不能太迷信它的很好很强大，它作为制作网页，美化网页 的一个重要辅助是很强大方便的。 可以弥补 table 制作框架和表格时的很多不足和美工上的 缺点，但是完全只用它来做，太费时费力，对于全国中小型网站长来说，真的不太适合。我 个人觉得用 table+DIV+CSS 是最好的组合，也是最省时省力的办法。 还需要再说明一下，本节讲得是 Table 布局页面和 CSS 布局页面的问题，讨论的是布局页 面 上用谁更好， 并不是说在 CSS 布局的页面内不能用 Table， 真正厉害的人物是 DIV、 Table、 CSS 用得

16、恰到好处，他们三个各做各的事情，DIV 布局页面，Table 存储数据，CSS 给页面穿 衣服！ 第三章 xHTML+CSS 与 SEO 的内容，后面章节会详细给大家介绍，这里就先说一些，让大家对 xHTML+CSS 与 SEO 有一定的认识，为后面制作页面打基础，毕竟我们做出来的页面还是要给 搜索引擎看的，所以不能不提提 xHTML+CSS 与 SEO 的关系。 1)将页面中最重要的内容用 h1 标签括起来， 的内容就和页面 title 很自然的包含了 h1 站点或者页面的核心关键词，搜索引擎很重视 h1 标签的内容哟 2)合理的运用 h2、h3 等标题标签，他们对于页面来说就是文章不同的等

17、级或者不同的 功能区域的标志性元素 3)页面 meta 信息不可忽视，一定要包含页面核心的内容 4)为了便于搜索引擎更方便的抓取，要尽可能的保证 HTML 页面代码纯净，强调一下， 既然是 xHTML+CSS 布局页面，所以 CSS 代码要单独写在一个文件内，保证 CSS 部分和 HTML 部分彻底分离； html 页面中使用 id 和 class， 尽可能的避免 style=;尽量使用标准的 CSS 命名规范， 从这里就可以看出你这个页面重构师是否专业哟； 尽量使用 CSS 的缩写以节省代 码，例如 padding:10px 20px 10px 20px;缩写为 padding:10px 2

18、0px;最好不要在 HTML 页面 用 font、center 这种标签。 5)在 HTML 页面中 strong 标签是可以使用的， 可以进一步强化关键词和相应的文字信息。 6)页面中的 javascript 代码会对搜索引擎分析页面内容产生干扰，可以将 javascript 代码封装在一个.js 文件中外部调用。 7)尽可能的加入 alt 注释，因为XX和 google 都有搜索图片的功能，如果加了 alt，就更方便搜索蜘蛛的爬行，搜索相应关键词，就可能出现你网站上的图片，点击图片 不就进入你的网站了嘛，就又多了点流量吧。 第四章 本节主要讲解，两个内容， 第一：CSS 如何控制页面样式，

19、有几种方式； 第二：这些方式出现在同一个页面时的优先级。 使用 xHTML+CSS 布局页面， 其中有个很重要的特点就是内容与表象相分离， 内容 指 HTML 页面代码， 表象就是 CSS 代码了， 如果把页面看成穿着衣服的人的话， 人就是 HTML， 是内容，而衣服呢就是 CSS，是表 象，现在出现的问题是，如何让 CSS 去控制页面？或者说，如何让衣服穿在人身上，好 体现出人得风格特点； 不同的 CSS 就可以使页面出现不同的风格适用不同的网站， 而不同的 衣服，人穿上后就会体现 出不同的职业。 第一：如何让 CSS 去控制 HTML 页面效果呢？ 有这么 4 种方式，行内方式、内嵌方式、

20、链接方式、导入方式 1）行内方式 行内方式是 4 种样式中最直接最简单的一种，直接对 HTML 标签适用 style=， 例如： 1. 虽然这种方法比较直接， 在制作页面的时候需要为很多的标签设置 style 属性， 所以会 导致 HTML 页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。 2）内嵌方式 内嵌方式就是将 CSS 代码写在之间， 并且用进行 声明，例如： 1. 2. 3. 13. 14. 15.全国的 CSS 爱好者汇聚于此，如果不来，你就 OUT 喽我们的口号是： 16.分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源 17.如果您也愿意

21、，就加入我们吧 18. 19. 内嵌方式，大家应该也能意识到，即使有公共 CSS 代码，也是每个页面都要定义的，如 果一个网站有很多页面，每个文件都会变大，后期维护也大，如果文件很少，CSS 代码也不 多，这种方式还是很不错 的。 3）链接方式 链接方式是使用频率最高，最实用的方式，只需要在之间加上 1. ，就可以了，这种方式将 HTML 文件和 CSS 文件彻底分成两个 或者多个文件，实现了页面框架 HTML 代码与美工 CSS 代码的完全分离，使得前期制作 和后期维护都十分方便， 并且如果要保持页面风格统一， 只需要把这些公共的 CSS 文件单独 保存成一个文件，其他的页 面就可以分别调用

22、自身的 CSS 文件， 如果需要改变网站风格， 只需要修改公共 CSS 文件 就 OK 了，相当的方便，这才是我们 xHTML+CSS 制作页面提倡的方式。 HTML 代码 1. 2. 3. 8. 9. 10.全国的 CSS 爱好者汇聚于此，如果不来，你就 OUT 喽我们的口号是： 11.分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源 12.如果您也愿意，就加入我们吧 13. 14. CSS 代码 1.#div1width:64px; height:64px; float:left; 2.#div1 imgwidth:64px; height:64px; 4)导入方式 导入样

23、式和链接样式比较相似，采用 import 方式导入 CSS 样式表，在 HTML 初始化时， 会被导入到 HTML 文件中，成为文件的一部分，类似第二种内嵌方式。 具体导入样式和链接样式有什么区别，可以参看这篇文章CSS:import 与 link 的具 体区别，不过我还是建议大家用链接方式！ 第二：四种样式的优先级 如果这上面的四种方式中的两种用于同一个页面后， 就会出现优先级的问题， 这 里我就不再举例子来说明了，大家在下面自己证明一下下面的结论 四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。 第五章 上节课我们讲了一下 Css 通过什么方式去控制页面， 如果不

24、记得， 我来帮大家回忆一下， 总共有四种方式行内方式、内嵌方式、链接方式、导入方式，大家通过这四种方式就可以实 现 CSS 对 HTML 页面样式的控制， 如果要让这些样式对 HTML 页面中的元素实现一对一， 一对 多或者多对一的控制，这就需要用到 CSS 选择器，HTML 页面中的元素就是通过 CSS 选择器 进行控制的。 CSS 选择器共有三种：标签选择器、ID 选择器、类选择器。 为了后面的对选择器的解释更容易理解， 在这里先打个比喻， 如果把你所处的环境视为 HTML 页面的话，环境里的每一个人则相当于 HTML 页面内标签元素，每个人都有一个 ID(身 份证)， 那么 html 中

25、的每一个标签也都有自己的 ID， 大家都知道 ID 是唯一的， 不可能重复。 【标签选择器】 一个完整的 HTML 页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采 用相应的 CSS 样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同 一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比 如，在 style.css 文件中对 p 标签样式的声明如下： 1.p 2.font-size:12px; 3.background:#900; 4.color:090; 5. 则页面中所有 p 标签的背景都是#900(红色)，文字大小均是 12px，

26、颜色为#090(绿色)， 这在后期维护中，如果想改变整个网站中 p 标签背景的颜色，只需要修改 background 属性 就可以了，就这么容易！ 【ID 选择器】 ID 选择器在某一个 HTML 页面中只能使用一次(当然也可以用好几次， 不过就不符合 W3C 标准了，那页面也就不是标准页面喽，咱们的目的不就是为了做标准的页面么，所以建议 大家不要在同一个 html 页面中多个标签拥有共同的 ID)，就像在你所处的环境中，你只有 一个 ID(身份证)，不可能重复！相信大家也能看出来，ID 选择器更具有针对性，如： 先给某个 HTML 页面中的某个 p 标签起个 ID，代码如下： 1. 此处为

27、p 标签内的文字 在 CSS 中定义 ID 为 one 的 p 标签的属性，就需要用到#，代码如下： 1.#one 2.font-size:12px; 3.background:#900; 4.color:090; 5. 这样页面中的某个 p 就会是 CSS 中定义的样式。 【类选择器】 这种选择器更容易理解了， 就是使页面中的某些标签(可以是不同的标签)具有相同的样 式，就像国庆中某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都 是一样的， 如果想让这一类人都有共同的样式， 该怎么做呢呵呵， ID 选择器的用法类似， 和 只不过把 id 换做 class，如下： 1. 此处

28、为 p 标签内的文字 如果我还想让 div 标签也有相同的样式， 怎么办呢？加上同样的 class 就可以了， 如下 1. 此处为 p 标签内的文字 这样页面中凡是加上 class=one的标签，样式都是一样的喽CSS 定义的时候和 ID 选 择器差不多，只不过把#换成.，如下 1.one 2.font-size:12px; 3.background:#900; 4.color:090; 5. 补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如： 1. 此处为 p 标签内的文字 这样我们可以将多个样式用到同一个标签中，当然也可以，ID 和 class 一块用 1. 此处为 p 标签内

29、的文字 2. 【通用选择器】 到这里， 前三种基本的选择器说完了， 但是还需要给大家介绍一个 CSS 选择器中功能最 强大但是用的最少的一种选择器通用选择器 1.*此处为 CSS 代码 强大之处是因为他对父级中的所有 HTML 标签进行样式定义，可对具有共同样式的标签 样式进行定义(有点小学数学中的提取公因式)， 这样可以大大精简代码； 既然有这么强大的 功能为什么是用的最少呢， 同样还是因为他的强大， 他是对父级元素内的所有标签进行定义， 所以只要你定义了，那么父级里面的所有的标签，甭管有没有必要，也都相当于加上了通用 选择器里面的代码了，能这么说大家不能够完全理解，没关系，我给大家举个例子

30、，请看下 面 1. 2. 3. 15. 16. 17. 这里是 p 标签区域 18. 这里是 a 标签区域 19. 20. 21. 这里是 p 标签区域 22. 这里是 a 标签区域 23. 24. 25. 大家运行一下上面的例子，div1 里面的两个标签是不是样式一样，这就是通用选择器 的强大之处，不管里面有多少个标签都会将样式加到所有标签内，如果 div1 里面得所有的 标签都有一部分相同的 CSS 代码，那么可以把这部分代码提取出来，用通用选择器来定义， 这样可以大大缩减代码，但是如果 div1 里面只要有一个和其他元素没有相同的代码，就不 能用通用选择器来定义， 这也就是 CSS 通用

31、选择器不灵活的一点。 现在大家明白为什么通用 选择器是选择器里面功能最强大的但又是用的最少的选择器了吧呵呵 对于通用选择器还有一个不得不提的用法， 就是为了保证作出的页面能够兼容多种浏览 器，所以要对 HTML 内的所有的标签进行重置，会将下面的代码加到 CSS 文件的最顶端 1.*margin:0; padding:0; 为什么要这么用呢， 因为每种浏览器都自带有 CSS 文件， 如果一个页面在浏览器加载页 面后，发现没有 CSS 文件，那么浏览器就会自动调用它本身自带的 CSS 文件，但是不同的浏 览器自带的 CSS 文件又都不一样， 对不同标签定义的样式不一样， 如果我们想让做出的页面 能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对对 HTML 标签重置，就 是上面的代码了，但是这样也有不好的地方，因为 HTML4.01 中有 89 个标签，所以相当于在 页面加载 CSS 的时候，先对这 89 个标签都加上了margin:0; padding:0;，在这里我不建 议大家这么做， 因为 89 个标签中需要重置的标签是很少数， 没有必要将所