div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。
<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
id与class的区别
class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。class可以在页面里面重复使用，id由于在页面里面只能出现一次，所以不能重复使用，所以尽量用class来写，这样能在页面里面重复引用你写的css，减小工作量和代码量。这种情况尽量用id：页面大的模块里面，用id来区分不同的模块，比如页面里面有这样的模块：最新新闻，推荐新闻等，就可以考虑用id来区分。还有一点，由于id是页面中唯一的，更多的是定义来留给给页面里面的javas
补充：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;
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。给名字的目的是我们以后可用 JavaS
给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。比如：header sidebar mainbady pagebody footer
DIV可选的属性
align，值=left/right/center/justify
DIV事件属性
on
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.使用@imp
－－－－－－－－－－－－
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元素中直接使用
元素中直接使用样式的写法如下：
<元素名称 style="属性:属性值"></元素名称>
说明：样式中直接使用CSS，语法是使用style标签。其中""中，样式的语法结构和独立样式表中完全相同。
下面是一个元素中直接使用样式的示例，其代码如下：
<div style="width:400px; height:100px; background-color:#cccccc;font-size:18px;">
这是一个在元素中直接使用样式的示例。</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.使用@imp
使用@imp
<style type="text/css" > @imp
说明：@imp
使用@imp
<HTML>
<STYLE TYPE="text/css">
<!--
@imp
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和@imp
<link href="style/main.css" rel="stylesheet" type="text/css" />
以上是在页面头部中使用link元素链接样式的代码。其链接的main.css文件中的代码如下：
.@imp
.main{
width:750px;
border:1px solid #666666;
margin:100px auto;
padding:33px;
font-size:20px;}
该样式实现了从样式表中再次调用样式文件。
几种种调用样式表的方法，优先级是不同的。在元素中直接使用的CSS具有最先的，其次是从页面头部调用的CSS，最后是采用链接的形式调用的CSS。
－－－The end－－
－－－－－
CSS选择器
准确而简洁的运用CSS选择器会达到非常好的效果。我们不必通篇给每一个元素定义类（class）或ID，通过合适的组织，可以用最简单的方法实现同样的效果。在实际工作中，最常用的选择器有以下五类：
一、标签选择器：
标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。如：
p { font:12px;}
em { color:blue;}
dl { float:left; margin-top:10px;}
二、id选择器：
我们通常给页面元素定义id。例如定义一个层 <div id="menubar"></div> 然后在样式表里这样定义：
#menubar {
margin:0 auto;
background:#ccc;
color:#c00;
}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
id选择器也同样支持后代选择器，例如： #menubar p { text-align:center; line-height:20px;; } 这个方法主要用来定义层和那些比较复杂，有多个“唯一后代”的元素。
注：样式表文件就是专门存放CSS样式代码的文件，后缀以 .css 结尾的。
三、类（class）选择器：
在CSS里用一个点开头表示类别选择器定义，例如：
.da1 {
color:#f60;
font-size:14px ;
}
在页面中，用class="类别名"的方法调用： <span class="da1">14px大小的字体</span> 这个方法比较简单灵活，可以随时根据页面需要新建和删除，但需要避免多class综合症。
四、群组选择器：
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.www_52css_com,#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}
使用组群选择器，将会大大的减化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率与CSS文件体积。
五、后代选择器：
后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式，例如这样：
li strong {
font-style:italic;
font-weight:800;
color:#f00;
}
#main p {
color:#000;
line-height:26px;
}
#sider .con span {
color:#000;
line-height:26px;
}
.www_52css_com p span {
color:#f60;
}
#sider ul li.subnav1 {
margin-top:5px;
}
第一段，就是给li下面的子元素strong定义一个斜体加粗而且套红的样式。其他以此类推。
后代选择器的使用是非常有益的，如果父元素内包括的HTML元素具有唯一性，则不必给内部元素再指定class或id，直接应用此选择器即可.
最常用的五类css选择器《转》
http://hi.baidu.com/srm111/blog/item/7386b2c591fa54c338db4977.html
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS中定义<style type="text/css"></style
<style type=text/css>
定义css样式
</style>
也可以不写type=text/css直接<style>定义css样式</style>你可以试一下，但一定要放在<haed></head>之间.
如：类别选择器
<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.on
color:red;
font-size:18px;
}
.two{
color:green;
font-size:20px;
}
-->
</style>
</head>
<body>
<p class="on
<p class="two">class选择器2</p>
</body>
</html>
不定义在<body></body>也可以用
如<p style="line-height:25px">内容</p>表示这个段落之间的文字行高为25px
这样也能用.但达不到css样式的重用和灵活，建议先定议后使用其实还是要加的，属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单，当然通常不加也没有什么事。
style中的<!--和-->是为了避免早期的某些浏览器不支持一些CSS而准备的，加上这个以后，就算不支持也不会被显示出来，被视为注释了，如果支持的话，那么就实现了CSS效果．
评论