您当时的方位:主页 > 言语编程 > CSS

CSS入门教程——div和span

2014-10-22  

div和span是什么意思?

       相对与其他XHTML标签,div和span关于它们包括的元素是没有含义的。例如当你看到<h1></h1>标签,你知道里边是标题,当你看到<p></p>标签的时分你知道里边是一个新的天然段。但是div和span标签并没有这样含义。div仅仅一个分块的标签,他能够将网页分红几个区块。div里边或许包括一个标题,一个阶段,也或许包括图片在内的许多元素,乃至div也能够再包括div。而span是行级元素(行内标签),通常情况下它都用来界说一小段文字的款式。它们的另一个差异便是div会形成换行,而span则不会。

      当然了,div和span的详细含义和差异脱脱离实践是很难说清楚的。下面咱们就来看看div和span的使用实例。

块级标签<div>

    实例页面。源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
.box {
background-color: #EEFAFF;
width: 30%;
float: left;
}
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
text-align: center;
width: 100%;
color: #FFFFFF;
}

-->
</style>
</head>
<body>
<div class="box">
<div class="boxhead">我在div内,类为boxhead</div>
<p>我在div内,特点为box。</p>
<p>我在div内,特点为box。</p>
<p>我在div内,特点为box。</p>
<p>我在div内,特点为box。</p>
</div>
</body>
</html>

        在上面的比如中,咱们首先在页面内放了一个class为box的div,而在它的内部又放了一个class为boxhead的div。为了便与调查,咱们为div添加了布景色彩。下面咱们来看看对这两个div界说的前面教程中没有的特点:

        对box的特点:width: 30%;表明这个box div占页面宽度的30%,而起浮特点float: left; 则表明box div起浮在页面的左边。

        对boxhead的特点:width: 100%;因为boxhead div在box div之内,那么这儿的100%是指box的宽度。

行级标签<span>(行内标签)

    实例页面。本实例在上面实例的根底之上,只修正一段文本的色彩。修正如下代码:

将第一个“<p>我在div内,特点为box。</p>”修正为

<p><span style="color:red">我在div内,也在span内,</span>特点为box。</p>

以上仅仅关于div和span的简略介绍,而实践使用中div和span的用法是十分灵敏的。