CSS/tutorials/lesson8

来自开放百科 - 灰狐
（版本间的差异）
跳转到： 导航, 搜索
(以内容'{{top news}} ==第8课：组织元素（span和div）== span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。 在这一课中...'创建新页面)
 
(→‎小结)
 
（未显示1个用户的3个中间版本）
第10行： 第10行：
  
 
==用span组织元素==
 
==用span组织元素==
 +
span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。
 +
 +
让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子：
 +
 +
<nowiki> <p>早睡早起
 +
使人健康、富裕又聪颖。</p></nowiki>
 +
 +
假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用<span>标签来标记上述每一点好处。然后，我们将这几个span设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。
 +
 +
<nowiki> <p>早睡早起
 +
使人<span class="benefit">健康</span>、
 +
<span class="benefit">富裕</span>
 +
和<span class="benefit">聪颖</span>。</p></nowiki>
 +
 +
相应的CSS代码如下：
 +
 +
span.benefit {
 +
  color:red;
 +
}
 +
 +
[[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson8-ex1.html 显示示例]
 +
 +
当然，你也可以采用id来为span元素添加样式。不过正如我们在上一课所学的，如果采用id的话，你必须为这三个span元素各自分别指定一个唯一的id。
  
 
==用div组织元素==
 
==用div组织元素==
 +
如前面例子所示，span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。
 +
 +
除去这点区别，div和span在组织元素方面相差无几。让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表：
 +
 +
<nowiki> <div id="democrats">
 +
<ul>
 +
<li>富兰克林·D·罗斯福</li>
 +
<li>哈利·S·杜鲁门</li>
 +
<li>约翰·F·肯尼迪</li>
 +
<li>林登·B·约翰逊</li>
 +
<li>吉米·卡特</li>
 +
<li>比尔·克林顿</li>
 +
</ul>
 +
</div>
 +
<div id="republicans">
 +
<ul>
 +
<li>德怀特·D·艾森豪威尔</li>
 +
<li>理查德·尼克松</li>
 +
<li>杰拉尔德·福特</li>
 +
<li>罗纳德·里根</li>
 +
<li>乔治·布什</li>
 +
<li>乔治·W·布什</li>
 +
</ul>
 +
</div></nowiki>
 +
 +
在这里，我们可以采用跟上例同样的方法来处理样式表：
 +
 +
#democrats {
 +
  background:blue;
 +
}
 +
#republicans {
 +
  background:red;
 +
}
 +
 +
[[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson8-ex2.html 显示示例]
 +
 +
在上例中，我们仅仅将div和span使用在一些很简单的方面，譬如文本和背景色等。但其实这两个元素都可用于作更加复杂的处理，比如。。。不过这里我们暂并不作介绍。之后我们还将对它们作深入了解。
  
 
==小结==
 
==小结==
 +
在[[CSS/tutorials/lesson7|第7课]]和第8课，你已经学习了id和class这两个选择器（selector）以及span和div元素。
 +
 +
现在，你应该可以分类或标识差不多一篇文档中的所有部分了，这可是向着精通CSS的方向迈进了一大步哦！在[[CSS/tutorials/lesson9|第9课]]，我们将向你介绍盒状模型（box model）。
  
 
{{comment}}
 
{{comment}}
  
 
[[Category:CSS]]
 
[[Category:CSS]]

2010年10月16日 (六) 06:57的最后版本

目录

[编辑] 第8课：组织元素（span和div）

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

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

[编辑] 用span组织元素

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

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

 <p>早睡早起
 使人健康、富裕又聪颖。</p>

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

 <p>早睡早起
 使人<span class="benefit">健康</span>、
 <span class="benefit">富裕</span>
 和<span class="benefit">聪颖</span>。</p>

相应的CSS代码如下： 

span.benefit {
 color:red;
}

Icon-example.gif 显示示例

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

[编辑] 用div组织元素

如前面例子所示，span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。

除去这点区别，div和span在组织元素方面相差无几。让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表： 

 <div id="democrats">
 <ul>
 <li>富兰克林·D·罗斯福</li>
 <li>哈利·S·杜鲁门</li>
 <li>约翰·F·肯尼迪</li>
 <li>林登·B·约翰逊</li>
 <li>吉米·卡特</li>
 <li>比尔·克林顿</li>
 </ul>
 </div>
 <div id="republicans">
 <ul>
 <li>德怀特·D·艾森豪威尔</li>
 <li>理查德·尼克松</li>
 <li>杰拉尔德·福特</li>
 <li>罗纳德·里根</li>
 <li>乔治·布什</li>
 <li>乔治·W·布什</li>
 </ul>
 </div>

在这里，我们可以采用跟上例同样的方法来处理样式表： 

#democrats {
 background:blue;
}
#republicans {
 background:red;

}

Icon-example.gif 显示示例

在上例中，我们仅仅将div和span使用在一些很简单的方面，譬如文本和背景色等。但其实这两个元素都可用于作更加复杂的处理，比如。。。不过这里我们暂并不作介绍。之后我们还将对它们作深入了解。

[编辑] 小结

在第7课和第8课，你已经学习了id和class这两个选择器（selector）以及span和div元素。

现在，你应该可以分类或标识差不多一篇文档中的所有部分了，这可是向着精通CSS的方向迈进了一大步哦！在第9课，我们将向你介绍盒状模型（box model）。

Comment-32x32.png

<discussion>characters_max=300</discussion>

来自“http://wiki.huihoo.com/wiki/?title=CSS/tutorials/lesson8&oldid=40504”
分享您的观点
个人工具
名字空间

变换
操作
导航
工具箱