DIV标签详细介绍
DIV标签详细介绍
div 是 division 的简写，division 意为分割、区域、分组。⽐⽅说，当你将⼀系列的链接组合在⼀起，就形成了⽂档的⼀个 division。
<div> 可定义⽂档中的分区或节（division/section）。<div> 标签可以把⽂档分割为独⽴的、不同的部分。它可以⽤作严格的组织⼯具，并且不使⽤任何格式与其关联。如果⽤ id 或 class 来标记 <div>，那么该标签的作⽤会变得更加有效。
id与class的区别
class⽤于元素组（类似的元素，或者可以理解为某⼀类元素），⽽id⽤于标识单独的唯⼀的元素。class可以在页⾯⾥⾯重复使⽤，id由于在页⾯⾥⾯只能出现⼀次，所以不能重复使⽤，所以尽量⽤class来写，这样能在页⾯⾥⾯重复引⽤你写的css，减⼩⼯作量和代码量。这种情况尽量⽤id：页⾯⼤的模块⾥⾯，⽤id来区分不同的模块，⽐如页⾯⾥⾯有这样的模块：最新新闻，推荐新闻等，就可以考虑⽤id来区分。还有⼀点，由于id是页⾯中唯⼀的，更多的是定义来留给给页⾯⾥⾯的javascript⽤。
补充：class和id在页⾯⾥⾯的使⽤⽅法：
－－－－－－－－－－－－－－－－－－－
class：
footer
id：
footer
定义class的css是⽤点：“.”，如.footer
定义id的css是⽤井号“#”，如#footer
如下⾯：
* {
margin: 0px;
padding: 0px;
}
body{
width:910px;
height:auto;
margin-left:auto;/*左右⾃动可以居中*/
margin-right:auto;
}
.header{
background-color: #F6F;
float: left;
height: 80px;
width: 910px;
}
.content{
background-color: #FCF;
float: left;
height: auto;
width: 910px;
margin-top: 20px;
padding-bottom:20px;
}
.left{
background-color: #930;
float: left;
height: 500px;
width: 290px;
margin-top: 20px;
margin-left: 10px;
display:inline;/*先把这个去掉看下，边距的问题，在IE6下双边据。加上这个就正常了*/
margin-right:10px;
}
.mid{
background-color: #F06;
float: left;
height: 500px;
width: 290px;
margin-top:20px;
}
.right{
float: right;
height: 500px;
width: 290px;
margin-top: 20px;
background-color:#0F0;
css表格样式
margin-right:10px;
display:inline;
}
.kuai{
background-color: #00F;
float: left;
height: 80px;
width: 890px;
margin-left:10px;
display:inline;
margin-top:10px;
}
.footer{
background-color: #000;
float: left;
height: 50px;
width: 910px;
margin-top: 20px;
}
－－－－－－－－－－－－－－－－－－－
如果单独使⽤ DIV ⽽不加任何 CSS-P, 那么它在⽹页中的效果和使⽤ <P></P> 是⼀样的。DIV标签应⽤于 Style Sheet（式样表）⽅⾯会更显威⼒，
当我们把 CSS-P ⽤到 DIV 中去以后，我么就可以严格设定它的位置。⾸先我们需要给这个可以被 CSS-P 控制的 DIV ⼀个 ID 或说是它的名字。⽐如说我们给下⾯这个 DIV 的名字是 truck。给名字的⽬的是我们以后可⽤ JavaScript 来控制它，⽐如说移动它或改变它的⼀些性质等等。
给层次取什么名字是随意的，名字可以是任何英⽂字母和数字，但第⼀个必须是字母。⽐如：header sidebar mainbady pagebody footer
DIV可选的属性
align，值=left/right/center/justify
DIV事件属性
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
DIV标准属性
class class_rule or style_rule 元素的类(class)
id id_name 元素的某个特定id。
style 样式定义内联样式定义。
title 提⽰⽂本显⽰于提⽰⼯具中的⽂本。
dir ltr | rtl 设置⽂本的⽅向。
lang 语⾔代码设置语⾔代码。
DIV与span的区别
DIV是块元素，SPAN是内嵌元素。块元素相当于内嵌元素在前后各加⼀个<br>换⾏。其实，块元素和⾏内元素也不是⼀成不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了。
DIV：基本上与span相似，或者说具有SPAN所有的功能，此外还具有SPAN不及的特⾊.DIV是⼀个块，也就是所谓的"容器"，它具有⾃⼰独⽴的段落，独⽴的标题，独⽴的表格，就如<html>.....</html>⼀样包括了⼀切.如:
<div class="mydiv">
<h1>独⽴的标题</h1>
<p>独⽴的段落</p>
<table>......</table>
－－－－－－－－－－－－－
</div>⽽这些SPAN是没有的!
SPAN 和 DIV 的区别在于，DIV(division)是⼀个块级元素，可以包含段落、标题、表格，乃⾄诸如章节、摘要和备注等。⽽SPAN 是⾏内元素，SPAN 的前后是不会换⾏的，它没有结构的意义，纯粹是应⽤样式，当其他⾏内元素都不合适时，可以使⽤SPAN。
SPAN标记有⼀个重要⽽实⽤的特性，即它什么事也不会做，它的唯⼀⽬的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。
<span> 标签被⽤来组合⽂档中的⾏内元素。span最初就是⽤来带class或者style属性的。它本⾝不具有明确的语义。因此在⽂本流中，我们需要对某些⽂字做样式上的改变，就⽤span括起来。
css调⽤
使⽤CSS样式表有哪⼏种⽅式？
1.HTML⽂件顶部植⼊样式表
2.HTML页⾯头部Head元素中调⽤
3.HTML元素中直接使⽤
4.使⽤link元素外部调⽤(连接到CSS样式表)
5.使⽤@import输⼊样式表
－－－－－－－－－－－－
1.HTML⽂件顶部植⼊样式表
所有的样式表信息都列于HTML⽂件的顶部，例：
<HTML>
<STYLE TYPE="text/css">
<!--
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
-->
</STYLE>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
植⼊样式表规则后，浏览器在整个HTML页⾯中都执⾏该规则。如果你想对⽹页⼀次性加⼊样式表，就可采⽤该⽅法。
<STYLE TYPE="text/css"> 设定采⽤MIME类型，这样以来，不⽀持CSS的浏览器可以忽略样式表。
注释标签<!-- and -->更为重要，是为了避免早期的某些浏览器不⽀持⼀些CSS⽽准备的，加上这个以后，就算不⽀持也不会被显⽰出来，被视为注释了，如果⽀持的话，那么就实现了CSS效果．有些⽼的浏览器（如MAC机⽤的IE 2.0）即使在设定了TYPE="text/css" 属性时也不能忽略样式表继续执⾏下⾯的命令，⽽且还会显⽰样式表的代码，⽽使⽤注释标签则可以避免发⽣这种情况。
－－－－－－－－－－－－－－
2.HTML页⾯头部Head元素中调⽤
从页⾯头部调⽤CSS，是将CSS写在页⾯的head元素中，然后在页⾯中调⽤。其语法结构如下：
<style>
选择符{属性：属性值;}
</style>
说明：页⾯所有样式都可以写在<style>和</style>之间。
使⽤头部调⽤的CSS，在页⾯中必须有相应的调⽤代码（其中类型选择符、通配选择符、使⽤类型选择符的⼦选择符、使⽤类型选择符的伪类选择符，不需要使⽤调⽤代码）。其中类选择符的调⽤代码如下：
<；元素名称 class="类选择符名称"></元素名称>
ID选择符的调⽤代码如下：
<；元素名称 id="id选择符名称"></元素名称>
⼀个使⽤头部调⽤的CSS⽰例如下：
<head> <!--页⾯头部内容开始-->
<title>头部调⽤样式</title>
<style> <!—定义CSS样式-->
.content{
width:400px;
height:100px;
color:#ffffff;
background:#333333;}
</style>
</head> <!--页⾯头部内容结束-->
<body class="body">
<div class="content">这是⼀个页⾯头部调⽤样式的⽰例。</div> <!—调⽤CSS样式-->
</body>
－－－－－－－－－－
3.HTML元素中直接使⽤
元素中直接使⽤样式的写法如下：
<；元素名称 ></元素名称>
说明：样式中直接使⽤CSS，语法是使⽤style标签。其中""中，样式的语法结构和独⽴样式表中完全相同。
下⾯是⼀个元素中直接使⽤样式的⽰例，其代码如下：
<div >
这是⼀个在元素中直接使⽤样式的⽰例。</div>
－－－－－－－－－－－－－－－－－－－－
4.使⽤link元素外部调⽤(连接到CSS样式表)
你可以将多个HTML⽂件都链接到⼀个中⼼样式表⽂件，这⾥是样式表功能发挥得淋漓尽致的地⽅，把CSS声明做成⼀个CSS⽂件有3个好处：⽹速处理速度会更快⼀些，尤其是多个⽹页共⽤⼀份CSS
样式表时更为出⾊；维护⽅便，只需要⼀次修改CSS⽂件就可以批量改变⽹页；维护个⼈知识产权，防⽌别⼈直接通过源码查看CSS语⾔．
使⽤⽅法：产⽣⼀个普通的⽹页，但使⽤<STYLE>规则，⽽是在<HEAD>内使⽤<LINK>标签，连接到CSS⽂件：
<HTML>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods
</H1>
<P>Amaze your friends! Squash your enemies!
</P>
</BODY>
</HTML>
说明：rel="stylesheet"指这个link和其href之间的关联样式为样式表⽂件。type="text/css"指⽂件类型是样式表⽂本。使⽤链接的样式表时，你⽆须使⽤注释标签。使⽤链接的形式调⽤样式表时，页⾯中调⽤样式的代码和使⽤头部调⽤样式时相同，依然使⽤class和id来调⽤类选择符和ID选择符。
现在⽣成⼀个单另的⽂本⽂件，起名mystyles.css (或者其任何你喜欢的名字)。⽂件内容如下：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
如同发布HTML⽂件那样，将这个CSS⽂件布到你的服务器中。在浏览器中观看⽹时，你会发现浏览
器将依照链接标签将有链接了的HTML ⽹页按照样式表的规则⽰，在HREF属性中你可以选择使⽤绝对相对URL。
－－－－－－－－－－－－
5.使⽤@import输⼊样式表
使⽤@import调⽤CSS的语法如下：
<style type="text/css" > @import url(css⽂件路径)；</style>
说明：@import的调⽤⽅法也可以写在CSS⽂件中，⽤来调⽤其他的CSS。
使⽤@import调⽤和使⽤link元素调⽤的区别在于，@import的调⽤⽅法只能使⽤在样式⽂件中，即只能在调⽤的样式⽂件（或者style元素）中才能正常使⽤，不能同其它⽅法结合使⽤，但输⼊法则可以。例：
<HTML>
<STYLE TYPE="text/css">
<!--
@import url(company.css);
H1 { color: orange; font-family: impact }
-->
</STYLE>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of
the Web Design Gods</H1>
<P>Amaze your friends! Squash
your enemies!</P>
</BODY>
</HTML>
⽽其中输⼊的 company.css⽂件内容如下：
H1 { color: green; font-family: times }
P { background: yellow; font-family: courier }
下⾯，是⼀个同时使⽤link和@import调⽤样式的⽰例，其代码如下：
<link href="style/main.css" rel="stylesheet" type="text/css" />
以上是在页⾯头部中使⽤link元素链接样式的代码。其链接的main.css⽂件中的代码如下：
url(css1.css);
.main{
width:750px;
border:1px solid #666666;
margin:100px auto;
padding:33px;
font-size:20px;}
该样式实现了从样式表中再次调⽤样式⽂件。
⼏种种调⽤样式表的⽅法，优先级是不同的。在元素中直接使⽤的CSS具有最先的，其次是从页⾯头部调⽤的CSS，最后是采⽤链接的形式调⽤的CSS。
－－－The end－－
－－－－－
CSS选择器
准确⽽简洁的运⽤CSS选择器会达到⾮常好的效果。我们不必通篇给每⼀个元素定义类（class）或ID，通过合适的组织，可以⽤最简单的⽅法实现同样的效果。在实际⼯作中，最常⽤的选择器有以下五类：
⼀、标签选择器：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。