第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%的人还看了以下文章

  • CSS border-radius 深入学习(含可视化生成工具)

    没有学过CSS border-radius 的同学,请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法: .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角,如下图: 只输入一个数值,所有角都会被四舍五入,若要固定值可以使用 …

    2019年10月17日 网页制作
    3.6K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    4.7K0
  • 一句代码给图片加倒影-CSS3

    本文使用纯CSS代码给图片加倒影,CSS代码 : img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示: 完整代码: &lt…

    2019年8月18日
    2.8K0
  • 第14课:上传网页

    只要你有服务器空间和一个FTP工具就可以在因特网上发布自己的网站了。

    2018年1月18日
    4.3K1
  • 网页中的框架(详解)

    所谓框架便是网页画面分成几个框窗,同时取得多个 URL。 一、制作框架页面的步骤: 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接,在子框架中设定链接。 注意:框架页面是不含标签的 二、基本语法 <frameset> <frame src=”url”> <noframes&g…

    2020年4月11日
    10.7K0
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    4.0K0

发表回复

登录后才能评论