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

God is a man

Hello world! Hello Everyone

 
 
 

日志

 
 

css中id和class 的区别  

2009-09-09 10:00:26|  分类: 网页制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

ID与Class区别,有的新手对此非常迷茫,不知道什么时候该用id,什么时候该用class。这两个选择器让新手左右为难。

一、在web标准中是不容许重复ID的,例如 div id="a" 不容许重复2次;而class所定义的是类,理论上可以无限重复。以根据需要多次引用。

  

二、属性的优先级问题:ID 的优先级要高于class,我们在下面的代码中有示例说明。

  

三、方便JS等客户端脚本的引用,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单与快捷。

代码:

<!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>

<meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>52css.com</title>

<style. type="text/css">

<!--

#YourHomePage {

color:red

}

.YourHomePage {

color:blue

}

-->

</style>

</head>

<body>

<div id="YourHomePage" class="YourHomePage">

52css.com - Div+CSS XHTML XML 教程大全 <br />

52css.com - Div+CSS XHTML XML 教程大全

</div>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------------------

class是设置标签的类。

  

id是设置标签的标识。

  

class属性用于指定元素属于何种样式的类。

  

如样式表可以加入:

  

.baobao { color: lime; background: #ff80c0 }

  

使用方法:class="baobao"

 

 id属性用于定义一个元素的独特的样式。如一个CSS规则:

 

#binbin { font-size: larger }

  

使用方法:id="binbin"

  

id是一个标签,用于区分不同的结构和内容,就象你的名字,如果一个屋子有2个人同名,就会出现混淆;

 

class是一个样式,可以套在任何结构和内容上,就象一件衣服;

  

概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

  

一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事 线,你可以通过CSS,javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class= "Gandalf", class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。

  

至于 ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中 很少会出现大于一次的情况。

  

归纳成一句话就是:Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。

  

在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用。

-----------------------------------------------------------------------------------------------------------------------------------

按照字面的意思,id是指一个元素在整个文档中的“唯一标志”,而class则是它所属的“类别”。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。

  

但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单:

  

那些只会在页面中出现一次的元素应该用id来表示。比如页头(header) 页尾(footer),导航菜单(main-menu)等。但是真的这么简单么?

我先举几个例子来说明我所遇到的尴尬:

大多数的页面都是两栏布局的:一个主栏(main column),一个侧栏(side column)。就像这样:

css中id和class 的区别 - john - God  is a man

OK,我们会用两个div来表示它们。问题来了,应该使用id还是class?按照常规的理解,一个页面只会有一个主栏,一个侧栏咯,所以当然应该用id。文档写成这:

<div id="main-col"></div>
<div id="side-col"></div>

#main-col { float: left; width: 700px;}
#side-col { float: right; width: 200px; }

也是很赏心悦目的,不是么?所以我决定用id。

于是页面做好了,网站做好了,上线了,运营了,访问量大了。这时候公司决定,嗯,我们应该在一些页面中加几个通栏广告。“通栏”哦!这就意味着它必须横跨主栏和侧栏,把它们俩拦腰截断。于是我们重新“发明”一个样式:banner,让banner来一个clear:both; 然后放到页面中间去阻止掉两个栏的浮动。然后再在banner的后面继续分两栏。下面是示意图:

css中id和class 的区别 - john - God  is a man

所以HTML应该是这样:

<div id="main-col"></div>
<div id="side-col"></div>

<div class="banner></div>

<div id="main-col"></div>
<div id="side-col"></div>


问题轻松解决(多亏偶经验丰富啊,表扬一下自己,咔咔。)。唯独只有一个问题:main-col和side-col这两个id重复了。这个问题其实也不麻烦,把它们全部改成class不就好啦(甚至,不去改它,我就不信浏览器会给我报错,哼)。

1,但是,我这不是自己给了自己一个嘴巴么?当初还信誓旦旦的说,main-col只会出现一次,所以用id……。所以教训就是,main-col和side-col,或是left-col, right-col ,extra-col, xxx-col,这些用来分栏布局的样式,都给我用class。嗯,记在本本上。
2,设计页面的时候,在页头和主菜单之间放了一个搜索框(search-box)。既然我们的页头(header),导航栏(main-menu),登录框(login-box)都用的是id,和它们在一起的search-box也应该用id咯?呃,小心啊,老板很可能会让你在页尾也放一个搜索框的,你用id你就死定了。所以search-box应该用class。不过这样怪怪的,凭什么login-box用id,而search-box却用class呢?
3,慢着,你以为导航栏就可以保证唯一了么?我来讲一个例子:
css中id和class 的区别 - john - God  is a man

喏,老板要来一点不同的,让把导航栏放在左侧。这个没问题,用一个ul就搞定拉。我把它的id设置成main-menu但是过了一会儿,他说,嗯,为了可用性(咳咳。。),我们需要把菜单分成两部分。就像:

css中id和class 的区别 - john - God  is a man

  评论这张
 
阅读(2417)| 评论(1)

历史上的今天

评论

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

页脚

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