CSS入门教程——div和span

春天没来 2012-05-20

展开全文

CSS入门教程——div和span

div和span是XHTML中比较特殊的标签。结合CSS他们可以实现许多方便的功能。

div和span是什么意思?

相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到<h1></h1>标签，你知道里面是标题，当你看到<p></p>标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样的意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。

下面我们就来看看div和span的应用实例。

块级标签<div>

实例页面。源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www./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内</p>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</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的宽度。