2天快速掌握DIV+CSS布局实战教程

需积分: 9 53 浏览量更新于2024-07-28 收藏 3.72MB PDF 举报

"天轻松驾驭DIV+CSS教程是一个针对初学者设计的实用指南，旨在帮助读者在短时间内掌握基本的HTML和CSS布局技巧。作者kwoojan和KwooShung意识到，许多初次接触DIV+CSS的人可能会感到困惑，因为网络上的教程往往理论多而实践少，缺乏针对性。他们注意到，观看视频教程可能过于枯燥，不适合快速学习和吸收，特别是对于没有耐心或时间紧迫的人来说。该教程的核心理念是通过实例教学，以实践操作为主导，帮助学员建立清晰的学习路径。它强调了XHTML（一种HTML版本）与CSS的结合，而非通常所说的“DIV+CSS”，后者在中国的教育和讨论中被广泛使用，但实际上是不严谨的术语。教程明确指出，尽管这个名称在中国流行，但它并不能精确表达页面布局的本质。教程承诺在短短两天内教会读者如何运用这两种技术，适合那些希望快速入门或者寻求提升现有技能的初学者。同时，作者也提醒读者，如果已经有一定经验并且觉得内容过于基础，可以选择退出，因为教程的主要目标是引导新手入门。在学习过程中，鼓励大家积极参与讨论，提出问题，但同时也要求保持专业和尊重，对于发现的错误和不足，欢迎提出，但避免使用侮辱性的语言。此外，教程还提供了一些学习资源链接，如CSS学习网站、论坛和教程网站，以及一个学习讨论群组，方便学员交流和获取进一步的支持。这是一份富有实践性和指导性的资源，可以帮助读者更好地理解和掌握DIV+CSS的基础知识，提高网页布局和设计能力。"

- 16 -

CSS 选择器共有三种：标签选择器、 ID

ID 选择器、类选择器。

为了后面的对选择器的解释更容易理解，在这里先打个比喻，如果把你所处的环境

视为 HTML 页面的话，环境里的每一个人则相当于 HTML 页面内标签元素，每个人都有

一个 ID( 身份证 ) ，那么 html 中的每一个标签也都有自己的 ID ，大家都知道 ID 是唯一

的，不可能重复。

【标签选择器】

一个完整的 HTML 页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签

采用相应的 CSS 样式， ( 在大环境中你可能出于不同的位置，但是不管怎么样，你总

是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里

都是这身衣服 ) 比如，在 style.css 文件中对 p 标签样式的声明如下：

则页面中所有 p 标签的背景都是 #900( 红色 ) ，文字大小均是 12px ，颜色为 #090( 绿色 )

，这在后期维护中，如果想改变整个网站中 p 标签背景的颜色，只需要修改

background 属性就可以了，就这么容易！

【 ID

ID 选择器】

ID 选择器在某一个 HTML 页面中只能使用一次 ( 当然也可以用好几次，不过就不符合

W3C 标准了，那页面也就不是标准页面喽 ~ ，咱们的目的不就是为了做标准的页面么

，所以建议大家不要在同一个 html 页面中多个标签拥有共同的 ID) ，就像在你所处的

环境中，你只有一个 ID( 身份证 ) ，不可能重复！相信大家也能看出来， ID 选择器更

具有针对性，如：先给某个 HTML 页面中的某个 p 标签起个 ID ，代码如下：

<p id="one"> 此处为 p 标签内的文字 </p>

在 CSS 中定义 ID 为 one 的 p 标签的属性，就需要用到 # ，代码如下：

这样页面中的某个 p 就会是 CSS 中定义的样式。

【类选择器】

这种选择器更容易理解了，就是使页面中的某些标签 ( 可以是不同的标签 ) 具有相同

的样式，就像国庆中某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举

花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢 ~ 呵呵，和

font-size:12px;

background:#900;

color:090;

}

#one{

font-size:12px;

background:#900;

color:090;

}

- 18 -

大家运行一下上面的例子， div1 里面的两个标签是不是样式一样，这就是通用选择器的强

大之处，不管里面有多少个标签都会将样式加到所有标签内，如果 div1 里面得所有的标签

都有一部分相同的 CSS 代码，那么可以把这部分代码提取出来，用通用选择器来定义，这

样可以大大缩减代码，但是如果 div1 里面只要有一个和其他元素没有相同的代码，就不能

用通用选择器来定义，这也就是 CSS 通用选择器不灵活的一点。现在大家明白为什么通用

选择器是选择器里面功能最强大的但又是用的最少的选择器了吧 ~~ 呵呵

对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，

所以要对 HTML 内的所有的标签进行重置，会将下面的代码加到 CSS 文件的最顶端

1 *{margin:0; padding:0;}

为什么要这么用呢，因为每种浏览器都自带有 CSS 文件，如果一个页面在浏览器加载页面

后，发现没有 CSS 文件，那么浏览器就会自动调用它本身自带的 CSS 文件，但是不同的

浏览器自带的 CSS 文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的

页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对对 HTML 标签重

置，就是上面的代码了，但是这样也有不好的地方，因为 HTML4.01 中有 89 个标签，所以

相当于在页面加载 CSS 的时候，先对这 89 个标签都加上了 {margin:0; padding:0;}

，

在这里我不建议大家这么做，因为 89 个标签中需要重置的标签是很少数，没有必要将所有

的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下：

1 body,div,p,a,ul,li{margin:0; padding:0;}

<!--

#div1 *{

background:#eee;/* 设置 DIV1 里面所有的元素背景均为灰色 */

color:#333;/* 设置置 DIV1 里面所有的元素的字体颜色均为黑色 */

}

-->

</style>

</head>

<body>

</div>

</div>

</body>

</html>

剩余132页未读，继续阅读

回音

粉丝: 0
资源: 7

2天快速掌握DIV+CSS布局实战教程

两天驾驭DIV+CSS.pdf

2天驾驭div+css.

轻松驾驭div+css

2天驾驭DIV+CSS 2.02版

2天驾驭DIV+CSS(全新发布2.0.2版本).pdf

2天实战指南：轻松驾驭DIV+CSS，避开理论迷雾

2天快速掌握DIV+CSS布局精髓

两天快速掌握DIV+CSS布局实战教程

red hat aaaaaaaaaaa

稀缺年鉴，2000-2021年中国钢铁工业年鉴合集-最新出炉.zip

最新资源