注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

——挨踢民工 Playkid——

一个搞IT的人!也是一个被IT搞的人!因为迷恋互联网而一网情深、最后落网为虫!

 
 
 

日志

 
 
 
 

DIV标签详细介绍  

2011-03-23 21:02:14|  分类: 软件应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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;
 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元素中直接使用

元素中直接使用样式的写法如下:
<元素名称 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.使用@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文件中的代码如下:

.@import 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,通过合适的组织,可以用最简单的方法实现同样的效果。在实际工作中,最常用的选择器有以下五类:


一、标签选择器:
  标签选择器是直接将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">
<!--
.one{
  color:red;
  font-size:18px;
}
.two{
  color:green;
  font-size:20px;
}
-->
</style>
</head>
<body>
  <p class="one">class选择器1</p>
  <p class="two">class选择器2</p>
</body>
</html>


不定义在<body></body>也可以用
如<p style="line-height:25px">内容</p>表示这个段落之间的文字行高为25px
这样也能用.但达不到css样式的重用和灵活,建议先定议后使用其实还是要加的,属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单,当然通常不加也没有什么事。

style中的<!--和-->是为了避免早期的某些浏览器不支持一些CSS而准备的,加上这个以后,就算不支持也不会被显示出来,被视为注释了,如果支持的话,那么就实现了CSS效果.



  评论这张
 
阅读(3515)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016