从零开始HTML＃020——5分钟-class 类

标签

#020_Ent_class

上节课我们讲到块级元素 div 标签的使用，当我们使用 div 的时候，为了达到一些特殊效果——这块 div 用这种样式，那块 div 用那种样式的时候，我们就需要给这些 div 分 class 类。

对 HTML 进行分类，使我们能够为元素的类定义CSS 样式。为相同的类设置相同的样式，为不同的类设置不同的样式。果然，中文真是拗口。（以下加粗的类，和普通的类注意理解的时候分开）

单独的"类"

假设现在我们需要设置一些信息块，这些信息块搭载的是同类型的信息，例如

用 div 包裹信息块

我们用 div 包裹这个信息块的时候，通过改变 div 的属性 class，将这个块设置为 臣-武官 chen-wuguan类。这时候在 css 文件中如下设置——

对 chen-wuguan 和 chen-wenguan 两个类进行设置

这时，页面 div class="chen-wuguan" 包裹的信息块的显示会变成这样——

单个块元素通过类设置样式

不同的"类"

当我们需要在显示不同类型的信息时，采取不同的样式，那我们就需要再设置一个新的类——

div class1 包裹关羽， div class2 包裹诸葛

因为在 css 中已经把这两个 类 的样式设置好了，那么直接刷新刚才的文网页看效果图。

两个不同样式的类

相同的"类"

接着继续补充信息，根据信息块的类型，用对应的类的 div 块元素将他们包裹起来——

再添加两个信息块

注意，有些不一样

span 的"类"

前面的代码里面相信大家都看到了，每个段落元素 p 里面，开头两个中文汉字都会带有一个

名字

这样的元素标签，这也是我们上一节课讲过的内容——内联元素 span 。

不过为什么只有张飞这个 有效，而其他人的 class="green" class="white" 没有效果呢?

span 没有效果的原因

因为在 css 中，我们没有设置 span.green 和 span.white 这两个内联元素的样式，所以这里虽然给所有人的名字都加了 span ，但是因为没有设置样式，所以其他人的名字只能按照缺省值来显示了。

这就是最简单的 class ，那么如果我只想单独的针对某一个元素，而不是针对一种类型的元素呢？这样就要讲到 id 属性了。那么下节课，让我们一起来学习 id 属性的用法。