css第8课.docVIP

第8课：组织元素（span和div） span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。 在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用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; } 查看示例 当然，你也可以采用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; } 查看示例 在上例中，我们仅仅将div和span使用在一些很简单的方面，譬如文本和背景色等。但其实这两个元素都可用于作更加复杂的处理，比如。。。不过这里我们暂并不作介绍。之后我们还将对它们作深入了解。 小结 在第7课和第8课，你已经学习了id和class这两个选择器（selector）以及span和div元素。 现在，你应该可以分类或标识差不多一篇文档中的所有部分了，这可是向着精通CSS的方向迈进了一大步哦！在第9课，我们将向你介绍盒状模型（box model）。