1、2 天掌握 DIV+CSS 网页制作技术=基础【基础一】DIV+CSS 的叫法是不准确的【基础二】使用 Table 布局是不明智的【基础三】xHTML+CSS 与 SEO【基础四】CSS 如何控制页面【基础五】CSS 选择器【基础六】CSS 选择器命名及常用命名【基础七】盒子模型【基础八】块状元素和内联元素=课程【第一课】盒模型、块状元素与内联元素、CSS 选择器【第二课】浮动【第三课】清除浮动【第四课】导航条【第五课】浮动(float)页面布局【第六节】定位【第七节】定位应用【第八课】CSS Hack=小技巧【单张图片按钮实例】【首行文字两文字缩进】DIV+CSS 网页制作这种叫法不准确20
2、10-01-01 15:29:25 来源:CSS 学习网 网页制作 Webjx 文章简介：DIV+CSS 的叫法是不准确的.DIV+CSS 的叫法是不准确的我想凡是来到“CSS 学习网”的同学，很大部分是冲着 DIV+CSS 来的，目的就是学习 DIV+CSS 的，说的再直接一些就是学习如何用 DIV+CSS 布局页面，如何从一张图片制作成标准的 DIV+CSS 页面。如果你看完第一段还没有发现错误的话，那你就很有必要，接着往下看。DIV+CSS 这种叫法其实是一种很错误的叫法，这是国人一厢情愿的叫法，而标准的叫法是什么呢？呵呵，没错，是 xHTML+CSS，不理解吧，我来细细给你说，如果下面
3、的你能理解，保证面试的时候会有很大的帮助，同时也可以让你后面的学习更轻松。为什么国人将这种页面布局的方法叫做 DIV+CSS？因为过去布局页面基本上都是用 Table 布局，也可以说是 Table+CSS，而现在布局页面呢，用 DIV，所以叫 DIV+CSS，听起来也挺合理，认为这样布局出来的页面也就是标准页面，甚至有些人走了个极端，看到其他网站用到 Table，就会嘲笑页面做的不够标准，好似用不用 Table 成为了页面是否标准的一个标尺。现在我可以告诉大家，凡是有着这种行为的，都学得不咋样，很皮毛！用了 Table 页面就不标准了?!纯粹无稽之谈，那什么才是标准页面呢？先看一个专业概念，W
4、EB 标准，然后我会问三个问题，你来回答：WEB 标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括 XHTML和 XML，表现标准语言主要包括 CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript 等。这些标准大部分由 W3C 起草和发布，也有一些是其他标准组织制订的标准，比如 ECMA（European Computer Manufacturers Association）的 ECMAScript 标准。看明白了没有？问题
5、来了!先不要看答案，从上面的概念中找出问题一：WEB 标准有几部分组成？问题二：结构化标准语言是什么？问题三：表现标准语言是什么？答案一：三部分，结构、表现、行为答案二：XHTML 和 XML答案三：CSS看完上面三个问题，哪什么是标准页面呢？呵呵，说白了就是按照 WEB 标准制作的页面，从第二个问题和第三个问题中，我们又可以说，用 XHTML 和 CSS 制作的页面就是标准页面，也就是说 xHTML+CSS制作的页面就是标准页面。怎么样，理解了吧为什么不说 XML+CSS 呢？很简单，因为 XML 过于复杂，且当前的大部分浏览器都不完全支持 XML。所以就不用它来布局页面喽!既然 xHTML
6、+CSS 制作页面就是标准页面了，又因为 xHTML 中不只有 DIV 标签，还有span、p、a、ul、li、dl、dt、dd.，即使我不用 DIV，用其他标签(比如:ul、li)制作出来的页面也是标准页面！所以说用 DIV+CSS 来制作标准页面这句话就很狭隘喽!如果满屏全部都是 DIV 那也算不上标准页面，曾经由一个朋友告诉我，说他的页面全部用的 DIV，每个模块，每个功能区域，就连一条线都是纯DIV 实现，并且相当自豪的告诉我，没有人比他做的页面更标准的了，他不但对 WEB 标准页面的理解有差错还犯了一个很大的错误，xHTML 中的每一个标签都有其作用，各司其职，各守其责，要用的恰到好
7、处，这才算是标准页面，DIV 不是万能的哟!！说到这里大家应该明白，这种 Web2.0 时代的布局页面的方法，叫 DIV+CSS 是不准确的，应该叫xHTML+CSS。凡是看到这节的同学们，以后尽可能说 xHTML+CSS，不要再说 DIV+CSS 喽，如果非要说，也要加上一句说明哟，比如面试官：你对 DIV+CSS 了解么？应聘者：DIV+CSS 准确的说应该叫 xHTML+CSS，我对这种页面布局方法非常了解！如果你是面试官，你对这个应聘者，感觉如何呢？呵呵呵使用 table 布局网页不明智2010-01-01 15:31:19 来源:CSS 学习网 网页制作 Webjx 文章简介：使用
8、Table 布局页面为什么是不明智的？使用 Table 布局页面为什么是不明智的？大家看到标题，不要误解认为在页面中不能使用 Table，而是可以使用 Table，但是尽量不要用Table 去布局页面，为什么这么说呢，因为使用 Table 布局页面会使页面失去灵活性，怎么个灵活法呢，比如今天你好不容易做出来的页面，第二天老板说我不喜欢登录模块放到右边，还是放到左边，通知板块放到右侧去，页面风格最好一个月换一种，如果遇到这种老板，提出这种要求，并且你的页面是用Table 布局的，那么你会崩溃的，工作量那是大大滴!，如果不相信的话，你们自己可以找个页面，用Table 布局出来，然后变换板块和风格，
9、你就会体会到 Table 布局的不灵活性，这是为什么呢，因为Table 的诞生是为存储数据用的，功能和 Execel 差不多，不是用来布局用的，只不过后来大家发现用Table 可以把想放的页面元素，比如图片，放到任何自己想放的地方，且做出来的页面可以兼容多种浏览器，于是 Table 就承担起了布局页面的重担，这一做就是好几年. .直到 Web2.0 时代的到来，Table才从布局页面的工作中逐渐解脱，专心的去存储数据_既然 Table 是为存储数据诞生的，那谁的诞生是为了页面布局呢？答案就是:DIV，DIV 就是为布局页面而诞生的，只不过一直不被人认同，原因就是 DIV 去布局页面需要 CSS
10、 的配合，使用比较繁琐，还不如 Table 拖拖拽拽页面就布局 OK 了，感觉还不如 Table 方便，从而DIV 被人们放置在一个无人问津的昏暗角落里，暗暗的等待着伯乐的出现，直到 2003 年美国加州 Scott Design 公司参加了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲，使 DIV 看到了阳光，走出了阴霾. .说了那么多，我们对比一下 Table 布局页面和 DIV 布局页面的优缺点使用表格进行页面布局会带来很多问题：* 把格式数据混入你的内容中。这使得文件的大小无谓地变大，而用户访问每个页面时都必须下载一次这样的格式信息,带宽并非免费。* 这使得重新设计现有的站点和内
11、容极为消耗劳力 (且昂贵)。* 这还使我们保持整个站点的视觉的一致性极难，花费也极高。* 基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。 而使用 CSS 进行网页布局，它会：* 使你的页面载入得更快* 降低你的流量费用* 让你在修改设计时更有效率而代价更低* 帮助你的整个站点保持视觉的一致性* 让你的站点可以更好地被搜索引擎找到* 使你的站点对浏览者和浏览器更具亲和力* 在世界上越来越多人采用 Web 标准时，它还能 提高你的职场竞争实力 (事实上也就是降低失业的风险)。网上有一篇文章，转过来，文章着重介绍 DIV 三点优势,也许看完文章后，就像社区元老 heflya
12、way说的感觉作者比较迷恋 Table，每篇文章都不可避免的带有个人色彩，而转出来的目的，其实就是想给大家降降 DIV+CSS 的温度，免得“走火入魔”，视 DIV+CSS 是为万能的，如果想学好 CSS 布局页面，就要从多个方面看它，好了，不多说了，下面是作者对 CSS 布局页面的三点优势及理解：1、内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给 CSS 来处理。生成的 HTML文件代码精简，更小打开更快。2、改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何 HTML 和程序页面，只需要改动 CSS 文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样
13、简单容易。3、搜索引擎更友好，排名更容易靠前。第一点、内容和形式分离网页前台只需要显示内容就行，形式上的美工交给 CSS 来处理。生成的 HTML 文件代码精简，更小打开更快。这个是 DIV+CSS 技术最显著的特点，也是 CSS 存在的根源。完全的颠覆现在传统（table）网页设计的技术。所有现在用 table 制作的内容，都可以用 CSS 来解决掉，而且解决的更完美，更强大。不需要大家再表格套表格，让生成的网页文件大小更精简，更小。table 时代，一个页面表格达到 10 个以上是非常普遍的事情，但是现在用 DIV+CSS，一个 table 都可以不用，就完全达到之前的效果，这就直接导致网
14、页文件大小比使用 table 时减少 50%-80%，更节约各位站长的硬盘空间，访问者打开网页时更快，而且用 div+CSS 时，不像以往使用 table 时，必须把全部 table 读取完了才显示页面内容，现在是可以读一个 div 就显示一个效果，大家打开网页不用等。好处真是明显而强大。这个优点的确是显著的，凡是使用传统 table 建的网页，内容多的话，有时候达到 30K 左右都有可能，文件打了打开时，肯定就有 0.0 几秒的延迟。使用 DIV+CSS，你前台打开看到的全是直接内容，CSS文件都是导入链接的，是另一个文件，根本和 HTML 文件大小没关系，这种生成的 HTML 文件，一个也
15、就10K 左右大小。第二点，改版网站更简单容易了不用重新设计排版网页，甚至于不用动原网站的任何 HTML 和程序页面，只需要改动 CSS 文件就完成了所有改版。DIV+CSS 对于门户网站来说改版就像换件衣服一样简单容易，改版时，不用改动全站 HTML 页面，只需要重新写 CSS，再用新 CSS 覆盖以前的 CSS 就可以实现改版了。方便吧。第三点，搜索引擎更友好，确实能够对 SEO 起到一定的帮助。通过 DIV+CSS 对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛爬取。这对于 SEO 也有帮助。综上所述，个人感觉 DIV+CSS 不能太迷信它的很好很强大，它作为制作网页，
16、美化网页的一个重要辅助是很强大方便的。可以弥补 table 制作框架和表格时的很多不足和美工上的缺点，但是完全只用它来做，太费时费力，对于全国中小型网站长来说，真的不太适合。我个人觉得用 table+DIV+CSS 是最好的组合，也是最省时省力的办法。还需要再说明一下，本节讲得是 Table 布局页面和 CSS 布局页面的问题，讨论的是“布局页面”上用谁更好，并不是说在 CSS 布局的页面内不能用 Table，真正厉害的人物是 DIV、Table、CSS 用得恰到好处，他们三个各做各的事情，DIV 布局页面，Table 存储数据，CSS 给页面穿衣服！xHTML+CSS 网页制作和搜索引擎优化
17、 SEO 的关系2010-01-01 15:32:31 来源:CSS 学习网 网页制作 Webjx 文章简介：xHTML+CSS 与 SEO 的内容，后面章节会详细给大家介绍，这里就先说一些，让大家对 xHTML+CSS 与 SEO 有一定的认识，为后面制作页面打基础，毕竟我们做出来的页面还是要给搜索引擎看的，所以不能不提提 xHTML+CSS 与 SEO 的关系。xHTML+CSS 与 SEO 的内容，后面章节会详细给大家介绍，这里就先说一些，让大家对 xHTML+CSS 与SEO 有一定的认识，为后面制作页面打基础，毕竟我们做出来的页面还是要给搜索引擎看的，所以不能不提提 xHTML+CS
18、S 与 SEO 的关系。1)将页面中最重要的内容用 h1 标签括起来，h1 的内容就和页面 title 很自然的包含了站点或者页面的核心关键词，搜索引擎很重视 h1 标签的内容哟2)合理的运用 h2、h3 等标题标签，他们对于页面来说就是文章不同的等级或者不同的功能区域的标志性元素3)页面 meta 信息不可忽视，一定要包含页面核心的内容4)为了便于搜索引擎更方便的抓取，要尽可能的保证 HTML 页面代码纯净，强调一下，既然是xHTML+CSS 布局页面，所以 CSS 代码要单独写在一个文件内，保证 CSS 部分和 HTML 部分彻底分离；html页面中使用 id 和 class，尽可能的避免
19、 style=“;尽量使用标准的 CSS 命名规范，从这里就可以看出你这个页面重构师是否专业哟；尽量使用 CSS 的缩写以节省代码，例如 padding:10px 20px 10px 20px;缩写为 padding:10px 20px;最好不要在 HTML 页面用 font、center 这种标签。5)在 HTML 页面中 strong 标签是可以使用的，可以进一步强化关键词和相应的文字信息。6)页面中的 javascript 代码会对搜索引擎分析页面内容产生干扰，可以将 javascript 代码封装在一个.js 文件中外部调用。7)尽可能的加入 alt 注释，因为百度和 google 都
20、有搜索图片的功能，如果加了 alt，就更方便搜索蜘蛛的爬行，搜索相应关键词，就可能出现你网站上的图片，点击图片不就进入你的网站了嘛，就又多了点流量吧。CSS 控制页面样式的 4 种方式和优先级问题2010-01-01 15:33:58 来源:CSS 学习网 网页制作 Webjx 文章简介：第一：CSS 如何控制页面样式，有几种方式；第二：这些方式出现在同一个页面时的优先级。本节主要讲解，两个内容，第一：CSS 如何控制页面样式，有几种方式；第二：这些方式出现在同一个页面时的优先级。使用 xHTML+CSS 布局页面，其中有个很重要的特点就是内容与表象相分离，内容指 HTML 页面代码，表象就是
21、 CSS 代码了，如果把页面看成穿着衣服的人的话，人就是 HTML，是内容，而衣服呢就是 CSS，是表象，现在出现的问题是，如何让 CSS 去控制页面？或者说，如何让衣服穿在人身上，好体现出人得风格特点；不同的 CSS 就可以使页面出现不同的风格适用不同的网站，而不同的衣服，人穿上后就会体现出不同的职业。第一：如何让 CSS 去控制 HTML 页面效果呢？有这么 4 种方式，行内方式、内嵌方式、链接方式、导入方式1）行内方式行内方式是 4 种样式中最直接最简单的一种，直接对 HTML 标签适用 style=“，例如： 虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置 style 属性
22、，所以会导致 HTML 页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。2）内嵌方式内嵌方式就是将 CSS 代码写在之间，并且用进行声明，例如： 无标题文档全国的 CSS 爱好者汇聚于此，如果不来，你就 OUT 喽!我们的口号是：“分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源”如果您也愿意，就加入我们吧! 内嵌方式，大家应该也能意识到，即使有公共 CSS 代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护也大，如果文件很少，CSS 代码也不多，这种方式还是很不错的。3）链接方式链接方式是使用频率最高，最实用的方式，只需要
23、在之间加上，就可以了，这种方式将 HTML 文件和 CSS 文件彻底分成两个或者多个文件，实现了页面框架 HTML代码与美工 CSS 代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把这些公共的 CSS 文件单独保存成一个文件，其他的页面就可以分别调用自身的 CSS 文件，如果需要改变网站风格，只需要修改公共 CSS 文件就 OK 了，相当的方便，这才是我们 xHTML+CSS 制作页面提倡的方式。HTML 代码 无标题文档全国的 CSS 爱好者汇聚于此，如果不来，你就 OUT 喽!我们的口号是：“分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与
24、资源”如果您也愿意，就加入我们吧! CSS 代码 #div1width:64px; height:64px; float:left;#div1 imgwidth:64px; height:64px; 4)导入方式导入样式和链接样式比较相似，采用 import 方式导入 CSS 样式表，在 HTML 初始化时，会被导入到HTML 文件中，成为文件的一部分，类似第二种内嵌方式。具体导入样式和链接样式有什么区别，可以参看这篇文章CSS:import 与 link 的具体区别，不过我还是建议大家用链接方式！第二：四种样式的优先级如果这上面的四种方式中的两种用于同一个页面后，就会出现优先级的问题，这里我
25、就不再举例子来说明了，大家在下面自己证明一下下面的结论四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。CSS 选择器2010-01-01 15:38:28 来源:CSS 学习网 网页制作 Webjx 文章简介：上节课我们讲了一下 CSS 通过什么方式去控制页面，如果不记得，我来帮大家回忆一下，总共有四种方式行内方式、内嵌方式、链接方式、导入方式，大家通过这四种方式就可以实现 CSS 对HTML 页面样式的控制，如果要让这些样式对 HTML 页面中的元素实现一对一，一对多或者多对一的控上节课我们讲了一下 CSS 通过什么方式去控制页面，如果不记得，我来帮大家回忆一下，总
26、共有四种方式行内方式、内嵌方式、链接方式、导入方式，大家通过这四种方式就可以实现 CSS 对 HTML 页面样式的控制，如果要让这些样式对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到 CSS 选择器，HTML 页面中的元素就是通过 CSS 选择器进行控制的。CSS 选择器共有三种：标签选择器、ID 选择器、类选择器。为了后面的对选择器的解释更容易理解，在这里先打个比喻，如果把你所处的环境视为 HTML 页面的话，环境里的每一个人则相当于 HTML 页面内标签元素，每个人都有一个 ID(身份证)，那么 html 中的每一个标签也都有自己的 ID，大家都知道 ID 是唯
27、一的，不可能重复。【标签选择器】一个完整的 HTML 页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的 CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在 style.css 文件中对 p 标签样式的声明如下： pfont-size:12px;background:#900;color:090; 则页面中所有 p 标签的背景都是#900(红色)，文字大小均是 12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中 p 标签背景的颜色，只需要修改 ba
28、ckground 属性就可以了，就这么容易！【ID 选择器】ID 选择器在某一个 HTML 页面中只能使用一次(当然也可以用好几次，不过就不符合 W3C 标准了，那页面也就不是标准页面喽!，咱们的目的不就是为了做标准的页面么，所以建议大家不要在同一个 html页面中多个标签拥有共同的 ID)，就像在你所处的环境中，你只有一个 ID(身份证)，不可能重复！相信大家也能看出来，ID 选择器更具有针对性，如：先给某个 HTML 页面中的某个 p 标签起个 ID，代码如下： 此处为 p 标签内的文字 在 CSS 中定义 ID 为 one 的 p 标签的属性，就需要用到#，代码如下： #onefont-
29、size:12px;background:#900;color:090; 这样页面中的某个 p 就会是 CSS 中定义的样式。【类选择器】这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆中某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢!呵呵，和 ID 选择器的用法类似，只不过把 id 换做 class，如下： 此处为 p 标签内的文字 如果我还想让 div 标签也有相同的样式，怎么办呢？加上同样的 class 就可以了，如下 此处为 p 标签内的文字 这样页面中凡是加上 class
30、=“one“的标签，样式都是一样的喽!CSS 定义的时候和 ID 选择器差不多，只不过把#换成.，如下 .onefont-size:12px;background:#900;color:090; 补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如： 此处为 p 标签内的文字 这样我们可以将多个样式用到同一个标签中，当然也可以，ID 和 class 一块用 此处为 p 标签内的文字【通用选择器】到这里，前三种基本的选择器说完了，但是还需要给大家介绍一个 CSS 选择器中功能最强大但是用的最少的一种选择器“通用选择器” *此处为 CSS 代码 强大之处是因为他对父级中的所有 HTML 标
31、签进行样式定义，可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式)，这样可以大大精简代码；既然有这么强大的功能为什么是用的最少呢，同样还是因为他的强大，他是对父级元素内的所有标签进行定义，所以只要你定义了，那么父级里面的所有的标签，甭管有没有必要，也都相当于加上了通用选择器里面的代码了，能这么说大家不能够完全理解，没关系，我给大家举个例子，请看下面 无标题文档这里是 p 标签区域这里是 a 标签区域这里是 p 标签区域这里是 a 标签区域大家运行一下上面的例子，div1 里面的两个标签是不是样式一样，这就是通用选择器的强大之处，不管里面有多少个标签都会将样式加到所有标签内，如果
32、div1 里面得所有的标签都有一部分相同的 CSS代码，那么可以把这部分代码提取出来，用通用选择器来定义，这样可以大大缩减代码，但是如果 div1里面只要有一个和其他元素没有相同的代码，就不能用通用选择器来定义，这也就是 CSS 通用选择器不灵活的一点。现在大家明白为什么通用选择器是选择器里面功能最强大的但又是用的最少的选择器了吧,呵呵对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对 HTML 内的所有的标签进行重置，会将下面的代码加到 CSS 文件的最顶端 *margin:0; padding:0; 为什么要这么用呢，因为每种浏览器都自带有 CSS 文
33、件，如果一个页面在浏览器加载页面后，发现没有 CSS 文件，那么浏览器就会自动调用它本身自带的 CSS 文件，但是不同的浏览器自带的 CSS 文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对对 HTML 标签重置，就是上面的代码了，但是这样也有不好的地方，因为 HTML4.01 中有 89 个标签，所以相当于在页面加载 CSS 的时候，先对这 89 个标签都加上了margin:0; padding:0;，在这里我不建议大家这么做，因为 89 个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，需要哪些标签重置
34、就让哪些标签重置就可以了，如下 body,div,p,a,ul,limargin:0; padding:0; 如果还需要 dl、dt、dd 标签重置，那就在上面加上就可以了，如下 body,div,p,a,ul,li,dl,dt,ddmargin:0; padding:0; 用到那些就写那些，这点也可以看做衡量页面重构师制作页面水平的高低，以及是否专业的一个方面到这里大家更应该明白这句话“通用选择器是功能最强大但是用的最少的选择器”了吧!_OK！选择器的内容我向大家应该都明白了，后面就继续讲解一下“选择器的集体声明”和“选择器的嵌套”【选择器的集体声明】在我们使用选择器的时候，有些标签样式是一
35、样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如： h1,h2,h3,h4,h5,h6color:#900; #one,#three,.yellowfont-size:14px;#onebackground:#ccc;#threebackground:#ccc;.yellowbackground:#ccc; 和小学的提取公因式差不多，把共同的部分提取出来，这么做的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活，这也是优化 CSS 代码的一块，要记住哟!【选择器的嵌套】选择器也是可以嵌套的，如： #div1 p acolor
36、:#900;/*意思是在 ID 为 div1内的 p 标签内的链接 a 标签的文字颜色为红色*/ 这样的好处就是不需要在单独的为 ID 为 div1 的标签内的 p 标签内的 a 标签单独定义 class 选择器或者 ID 选择器，CSS 代码不就少了嘛!同样也是 CSS 代码优化的一块。到这里，基本的选择器说完了，但是还需要给大家介绍一个“通用选择器” *此处为 CSS 代码 好，这节课主要讲解了三种 CSS 代码选择器、选择器的声明、选择器的嵌套三块知识，要掌握好，如果有不懂，可以留言。CSS 选择器规范化命名2010-01-01 15:43:59 来源:CSS 学习网 网页制作 Webj
37、x 文章简介：关于 CSS 命名法，和其他的程序命名差不多，也是有三种：骆驼命名法，帕斯卡命名法，匈牙利命名法。规范的命名也是 Web 标准中的重要一项，标准的命名可以更好的看懂代码，我想大家应该都有这种经历，某日翻出自己过去写的代码居然看不懂了，呵呵，为了避免这种情况我们就要规范化命名，再说了，现在一个项目不是一个人就可以完成的，是需要大家互相合作的，如果没有规范化命名，别人就无法看懂你的代码，大大降低了工作效率，所以必须规范化命名，这样还显着咱专业！好了不多说了，关于 CSS 命名法，和其他的程序命名差不多，也是有三种：骆驼命名法，帕斯卡命名法，匈牙利命名法。【骆驼命名法】说到骆驼大家肯定
38、会想到它那明显的特征，背部的隆起，一高一低的，我们的命名也要这样一高一低，怎么才能这样，就用大小写字母呗!，大写的英文就相当于骆驼背部的凸起，小写的就是凹下去的地方了，但是这个也是有规则的，就是第一个字母要小写，后面的词的第一个字母就要用大写，如下： #headerBlock.navMenuRedButton 【帕斯卡命名法】这种命名法同样也是大小写字母混编而成，和骆驼命名法很像，只有一点区别，就是首字母要大写，如下 #HeaderBlock.NavMenuRedButton 【匈牙利命名法】匈牙利命名法，是需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解，比如： #
39、head_navigation.red_navMenuButton 以上三种，前两种（骆驼命名法、帕斯卡命名法）在命名 CSS 选择器的时候比较常用，当然这三种命名法可以混合使用，只需要遵守有一个原则就可以，就是“容易理解，容易认，方便协同工作”就 OK了，没有必要强调是那种命名法。以下为于页面模块的常用命名头：header 内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：ho
40、t新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content到这节课，都是 CSS 非常基础的知识，是为了照顾没有一点基础的同学，从下节课开始，将介绍 CSS布局页面中的很重要的两个概念，也是必须要掌握的概念，如果不能很好理解的话后面再布局页面的时候就会出现很多问题。1）盒子模型2）内联元素 VS 块状元素理解盒子模型2010-01-01 15:45:57 来源:CSS 学习网 网页制作 Webjx 文章简介：什么是盒子模型？对于初学
41、者来说，很难说出来，但是对于生活中的盒子大家熟悉吧，哈哈，这里提到的盒子模型你就可以理解成现实生活中的盒子就可以了，不然怎么能起个名字叫“盒子模型”呢盒子模型，是 XHTML+CSS 布局页面中的核心！要想学会用 CSS 布局页面，就首先要理解盒子模型！什么是盒子模型？对于初学者来说，很难说出来，但是对于生活中的盒子大家熟悉吧，哈哈，这里提到的盒子模型你就可以理解成现实生活中的盒子就可以了，不然怎么能起个名字叫“盒子模型”呢好！既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫“content(内容)”，而盒子的纸壁给他起
42、个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为“margin(外边距)“OK!！这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图我们的页面就是由许许多多的盒子组成的哟!，但是和现实生活中的盒子我们会
43、忽略外边距(margin)，但是在页面中，我们是不能忽略外边距(margin)的，只有包括外边距的盒子模型在 CSS 中才是完整的，即使外边距为零，我们也不要忽略它，要知道他是存在的。怎么样，理解“盒子模型”了没？就是这么点知识2 个重要概念块状元素和内联元素2010-01-01 15:48:56 来源:CSS 学习网 网页制作 Webjx 文章简介：是在 CSS 布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。在用 CSS 布局页面的时候，我们会将 HTML 标签分成两种，块状元素和内联元素（我们平常用到的div 和 p 就是块状元素，链接标签 a
44、就是内联元素）。是在 CSS 布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。注：这节课看似挺长，其实内容很少，通过举例子让大家更容易理解而已，不要被眼前的文字和代码吓到哟!块状元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为 div 和 p。内联元素内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。做了个对比表，帮助大家更容易理解。块状元素 内联元素是否允
45、许其他元素同处一行 no yeswidth 和 height 是否起作用 yes no对于上面的概念，我们用实例的方式给大家讲明白，要注意听哟!要求：ID 为 div1 的红色(#900)区域，宽度和高度均为 300 像素，并且包含一个 ID 为 div2 的绿色区域，长度宽度均为 100 像素的 div2。CSS 代码如下： #div1width:300px; height:300px; background:#900;#div2width:100px; height:100px; background:#090; HTML 代码如下： 为了方便初学者更好的学习，我把完整的代码发出来 CSS
46、 学习网-“可容纳内联元素和其他块状元素”怎么样，是不是下面的效果如果你做出来了，就继续往下看，咱们给刚才的要求再加一个条件，在 div1 里放入一个链接 a，内容为“可容纳内联元素和其他块状元素”颜色为白色。CSS 代码如下： #div1width:300px; height:300px; background:#900;#div2width:100px; height:100px; background:#090;acolor:#fff; HTML 代码如下： 可容纳内联元素和其他块状元素是不是下面的效果到这里，我们可以看得到 div1 这个块状元素里面拥有两个元素，一个是块状元素 div
47、2，另一个是内联元素 a，这就是块状元素概念里面说的“一般是其他元素的容器，可容纳内联元素和其他块状元素”，为什么要说一般呢，因为块状元素不只是用来做容器，有时还有其他用途，比如利用块状元素将上下两个元素隔开些距离，再比如利用块状元素来实现父级元素的高度自适应，这方面的内容会在后面详细讲解，因为不属于本节知识，就不多说。好!！我们继续加条件，在 div1 里面 div2 的后面再放入一个 ID 为 div3 的长宽均为 100 像素的蓝色(#009)区域块，代码如下CSS 代码如下： #div1width:300px; height:300px; background:#900;#div2wi
48、dth:100px; height:100px; background:#090;#div3width:100px; height:100px; background:#009;acolor:#fff; HTML 代码如下： 可容纳内联元素和其他块状元素是不是下面这个效果是不是和自己事先想象的不一样，本以为蓝色会处于绿色的右侧，可是却位于下侧，如果你再加几个 div4，div5 同样的他们还是继续位于前一个下面，垂直排列，这就是块状元素概念中说的“块状元素排斥其他元素与其位于同一行”说白了，就是块状元素比较霸道，谁都别想和他坐同一行，甭管你是和他有亲戚关系的块状元素还是毫无联系的内联元素，都不
49、行，都到下面一行待着去，看看例子中，绿色方块和蓝色方块是不是各处同一行，内联元素 a 也别想和他处一行，但是事情是没有绝对的，块状元素不是不允许其他元素和他处一行嘛，不是比较霸道嘛，没关系，咱有办法，具体什么办法，我们后面会详细讲解，知识不属于本节内容，就也不多说了，大家留意后面的教程唷!到这里，我想大家对“块状元素”的概念已经比较清楚了，下面通过例子给大家继续解释“内联元素”的概念，当然还是继续加条件，加个什么条件呢，在 a 的后面再加一个内容为“Love CSS”的链接，所有链接的背景设置为淡橙色(#F93)CSS 代码如下： #div1width:300px; height:300px; background:#900;#div2width:100px; height:100px; background:#090;#div3width:100px; height:100px; background:#009;acolor:#fff; bac
