第八课:元素组(span和div)

元素<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模式。