CSS/tutorials/lesson8

2010年10月16日 (六) 06:52的版本

span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。

在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。用span组织元素用div组织元素

span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。

让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子：

早睡早起使人健康、富裕又聪颖。

假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用标签来标记上述每一点好处。然后，我们将这几个span设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。

早睡早起使人健康、富裕和聪颖。

相应的CSS代码如下：

span.benefit {
 color:red;
}

当然，你也可以采用id来为span元素添加样式。不过正如我们在上一课所学的，如果采用id的话，你必须为这三个span元素各自分别指定一个唯一的id。

<discussion>characters_max=300</discussion>

@@ 第10行： / 第10行： @@
 ==用span组织元素==
+span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。
+让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子：
+ <p>早睡早起
+ 使人健康、富裕又聪颖。</p>
+假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用<span>标签来标记上述每一点好处。然后，我们将这几个span设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。
+ <p>早睡早起
+ 使人<span class="benefit">健康</span>、
+ <span class="benefit">富裕</span>
+ 和<span class="benefit">聪颖</span>。</p>
+相应的CSS代码如下：
+ span.benefit {
+  color:red;
+ }
+[[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson8-ex1.html 显示示例]
+当然，你也可以采用id来为span元素添加样式。不过正如我们在上一课所学的，如果采用id的话，你必须为这三个span元素各自分别指定一个唯一的id。
 ==用div组织元素==