pan和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)。
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5237.html