第8课:组织元素(span和div)

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可以被用来组织一个或多个块元素。

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

<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;}

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

小结

在第7课和第8课,你已经学习了idclass这两个选择器(selector)以及spandiv元素。

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

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5237.html

(5)
江山如画的头像江山如画管理团队
上一篇 2020年2月25日 上午10:57
下一篇 2020年2月25日 上午11:09

99%的人还看了以下文章

  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    4.2K0
  • 6个实例教你学会JavaScript的箭头函数

    在看别人JS代码时,经常会看到一些类似下面代码的箭头函数,如果你没有接触过箭头函数,估计要看晕了,这些都是什么东西?今天中国网页设计通过6个实例,教给大家掌握箭头函数的语法及使用。

    2018年2月17日
    1.9K0
  • 第13课:浮动元素(float)

    我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理: 举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示: 如何实现这个效果? 上例的HTML代码如下所示: <div id=”picture”><…

    2020年2月25日
    2.0K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    5.1K0
  • 页面编码为UTF-8的项目中servlet中文显示乱码的解决方法

    servlet中文显示乱码:
    1、servlet中输出中文字符
    2、servlet接收表单传值并显示,表单字段含中文。

    网页制作 2020年2月23日
    1.9K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    2.3K0

发表回复

登录后才能评论