在上一讲中我们学会了如何给网页元素设置类，并添加样式。
这节课我们接着讲class更巧妙的用法。
就是，可以给 HTML 元素赋予多个 class。
如下：

<h1 class="title1 red p10">柯南与花仙子的故事</h1>

样式表部分：

<style type="text/css">
.title1{
  font-size:20px;
}
.red{
  color:red;
}
.p10{
  padding-top:10px;
}
</style>

最终标题的效果是，字号20px，字体颜色为红色，上边距为10px的一个效果（ps：至于边距的详细信息，我们会在之后的课程中讲到。）。
这么处理的目的是能简化代码。便于控制指定元素的样式或者行为。

举一个例子：
下面有四个标题，都有不同的样式。

<h2 class="title1">柯南与花仙子的故事</h2> 
//设置为字号12px，颜色绿色，上边距10px，投影为右下偏移1px没有模糊度的灰色投影，下边距15px。

<h2 class="title2">苍老师的一天</h2>
//设置为字号12px，颜色绿色，上边距10px，投影为右下偏移1px没有模糊度的灰色投影。

<h2 class="title3">从前有个人后来他死了</h2>
//设置为字号12px, 颜色绿色，上边距10px。

<h2>从前有个人他死了之后再也没活过来</h2>

样式表部分：

<style type="text/css">
h2{
  font-size:10px;
}
.title1{
  font-size:12px;
  color:green;
  padding-top:10px;
  text-shadow:1px 1px 0px gray;
  padding-bottom:15px;
}
.title2{
  font-size:12px;
  color:green;
  padding-top:10px;
  text-shadow:1px 1px 0px gray;
}
.title3{
  font-size:12px;
  color:green;
  padding-top:10px;
}
</style>

大家会发现，四个标题的样式中有很多重复的声明。
如果每个标题赋予不同的可识别度较高的多个类：

<h2 class="title ts1 pb15">柯南与花仙子的故事</h2> 
<h2 class="title ts1">苍老师的一天</h2>
<h2 class="title">从前有个人后来他死了</h2>
<h2>从前有个人他死了之后再也没活过来</h2>

样式表部分：

<style type="text/css">
h2{
  font-size:10px;
}
.title{
  font-size:12px;
  color:green;
  padding-top:10px
}
.ts1{
  text-shadow:1px 1px 0px gray
}
.pb15{
  padding-bottom:15px
}
</style>

这么一看，代码少了不少。
而且，只要看元素上的类名，就可以判断出这个类上大概作用着什么样的样式。
如果想去掉第二个标题上的投影，只要在类名中删除ts1就可以了。而不用去找样式表，再找到指定声明删掉。

有个问题：如果一不小心，写了两个相同的声明,值却不一样，那会怎么样？

.title{
  font-size:12px;
  color:green;
  padding-top:10px
  color:pink;
}

那它的颜色是绿色还是粉色的？
答案是粉色的。计算机在处理编程语言的时候，可以理解为从上往下处理代码的。至少在样式表这里，后面出现的声明会覆盖前面处理的声明。所以，以后面的声明为主。

相关英语：

red = 红色
green = 绿色
gray = 灰色（#808080）