第八课：元素组（span和div）

作者: meilin
位于: 职业教育

元素<span>和<div>用于文件中的组和结构，并经常与class和id一起使用。本课将进一步探讨
<span>与<div>的用法，因为这两个HTML元素实际上也是CSS的重要部分。

  • 带<span>的组
  • 带<div>的组

带<span>的组

<span>元素被称为中性组，它本身不给文件添加任何东西。但在CSS中，可以给文件的文字特殊部分添加视觉特性。这里以富兰克林的名言作为实例：

<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>

假设我们想强调早起的好处，可以用<span>标记。然后给每个标记添加一个class，并在样式表中定义：

<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>

CSS代码应该如下：

span.benefit {
color:red;
}

当然，你也可以用id给<span>-元素添加样式。但应记住，需要分别给三个<span>-元素施用唯一的id。

带<div>的组

前面的实例说明<span>被用于块级元素，而<div> 被用于组成一个或更多块级元素。除了这些区别以外，带<div>的组在某些方面也有相同之处。看看下面这个关于美国总统的实例，他们按照政治背景被分为两个列表。

<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>

<div id=”republicans”>
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>

在样式表中，我们可以利用组以同样方式分类：

#democrats {
background:blue;
}

#republicans {
background:red;
}

上面的例子，仅用<div> 与<span>给文字和背景色等简单的东西添加特性。实际上，这两个元素还能做更多事情，但不属于本课介绍的范围，我们将在后面的教程中单独讨论。

总结

第七和第八课，我们学习了选择器id和class，以及元素span和div的用法。下一课将教给你使用box模式。

下一篇:
前一篇: