CSS入门教程——div和span

2016-02-20 01:16 9 1 收藏

岁数大了，QQ也不闪了，微信也不响了，电话也不来了，但是图老师依旧坚持为大家推荐最精彩的内容，下面为大家精心准备的CSS入门教程——div和span，希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发】

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修改为

pspan style="color:red"我在div内，也在span内，/span属性为box。/p

以上只是关于div和span的简单介绍，而实际应用中div和span的用法是非常灵活的。

来源:http://www.tulaoshi.com/n/20160220/1633571.html

上一篇：小三就像创可贴受伤了就拿来贴
下一篇：创意经典QQ分组：看得见我极力隐匿旳悲伤

看过《CSS入门教程——div和span》的人还看了以下文章更多>>

CSS入门教程——链接(a)

标签： Web开发

链接(a) 对于很多追求页面美观的站长来说，默认的链接样式实在是太难以容忍了。而且它们也很难和网站的风格相吻合。不过有了CSS之后我们就不用担心了。下面就看看如何修改网页的链接样式。 1. 改变整个页面的链接样式。style type="text/css" a:link { color: #FF0000; text-decoration: none; } a:visited { c...

SPAN和DIV的区别

标签： Web开发

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。下面以一个实例来说明这两个属性的区别。代码：＜span＞SPAN标记有一个重要而...

样式表CSS中div、span和center元素

标签： Web开发

div和span用来为内容指定样式或绑定脚本。虽然大多数HTML元素可以通过style属性来设置样式信息，但是许多HTML元素有自己默认的样式，该样式可能和style定义的样式混合甚至冲突，是我们不希望看到的。如：strong style = “color: red”I am strong!/strong。和其他html元素不同，div和span没有默认的显示样式。所以可以通过它们来指定样式...

CSS样式表中SPAN和DIV的区别

标签： Web开发

CSS入门教程——盒子(box)

标签： Web开发

CSS盒子(CSS box) 首先要清楚，CSS中没有box这个属性。CSS的盒子(box)是由以下几个部分组成的：内容(content)、填充(padding) 、边框 (border) 和边界( margin)。盒子的内容当然是必须有的，而填充、边框和边界都是可选的。如果把CSS的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；而填充...

查看更多精彩>>