css中Class与ID的区别

个class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个class可以定义剧本中每个人物的故事线,你可以通过css教程,网页特效等来使用这个类。因此你可以在一个页面上使用class="frodo" ,class="gandalf",class="aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的 class。
  
至于id,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头<masthead>,一个内容区域和一个页脚等组成),一般使用id比较理想,因为一个id在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
  
归纳成一句话就是:class可以反复使用而id在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个id不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。(刚才在 dreamweaver中试了一下,确实,并没有出错)
  
在实际应用的时候,class可能对文字的排版等比较有用,而id则对宏观布局和设计放置各种元素较有用。

其它看法

id与class的区别

另外,形如id="aaa"定义的,在css中是这样设置其样式的:
#aaa{ 样式列表 }
而以class="bbb"形式定义的,在css中应该这样设置其样式:
.bbb{ 样式列表 }
(注意前面有一个点)

用途:
 class元素分2种,关 联的和独 立的. 关联的用于html的相关tag的,比如
h1.redone{color:red}
<h1 class= redone> 字体为红色的 <h1>
<h1> 字体是黑色的 <h1>

独 立的元素可以用于所有的html元素的,比如
.classname {property:value}

id元素和独 立的class功能相似,区别是id 是唯一的而且对于网页特效操作html 元素有帮助,

#idname {property: value}

概念定义:

id是元素的名称,可以供网页特效或其它脚本程序来访问该元素对象,而class是该元素的css类名。

id的值在整个当前网页中应该是唯一的,即某一个元素定义了id="aaa",那么这个网页中其它的元素的id就不能定义成aaa,而class则可以。

id与class的使用原则

据说w3c对于id与class的设定是id具有唯一性,class 具有普遍性。所以我们这里的使用原则也是依据这一特性建立的。id是不能重复的,所以在 xhtml的结构中,大结构一定是用id。比如标志、导航、主体内容、版权。这些呢接我自己制定的规范命名为#logo , #nav , #content , #copyright 这些是雷打不动的命名。有人说布局排版用id,配色背景用class,其实这是不正确的,id与布局排版没有直接关系,class与配色也不是对等的。有人呢为了麻烦全都用id或是全都用class,全都用class呢还有可理解,全都用id就不正常了,这有悖id唯一性。如果每个id都不一样,那非累死不可。我通过实践总结的使用原则是:id需要具有唯一性,并且尽量在外围使用。而class具有可重复性,并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改,这样的做法就会让所有的class都成为id的子级或是孙级。你可以有两个儿子但你能有两个爸爸吗,就是这个道理。在我们写 css的时候可以写成这样 #father .child {…} 尽量不要让class包含id,.father #child {…}如果写成这样显得有点可笑 。当然这也不是铁定的,特殊情况需要特殊对待嘛。但是通常情况下这种形式的必要性不大。

以上就是id与class使用原则,归总起来一句话:id是唯一的并是父级的,class是可以重复的并是子级的。

id与class的使用技巧

1. 子级的命名的包含父命名中的部分为开头。这样方便在编写css时明确层次关系。

2. class中的子级最好不用id。当然特殊情况特殊对待。

3. class的命名最好命名用大小写合用。例 .newmovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是ie以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。

其实上面讲的都是一些大家都明白的内容,只是我捡了个漏先写下来算是一个总结。希望大家对于id与class的使用提出自己的新观点新思路。一起总结出最适合也最有效率的规范来。

若出现重复定义时,从优先级来看是:

style > id > class > 缺省的html元素

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

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

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

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

时间: 2024-08-01 21:30:32

css中Class与ID的区别的相关文章

CSS中Class与ID的区别,Margin与Padding的区别

核心提示:Class可以反复使用而ID在一个页面中仅能被使用一次.有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题. Class可以反复使用而ID在一个页面中仅能被使用一次.有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题. 这两个区别都是比较容易混淆的问题,尤其是Class与ID,相信很多人并没有仔细了解过之中区别.以下是我的一些理解: 1. Clas

div+css中Class与ID的区别_经验交流

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

CSS中em和px的区别

Font-size:1.5em; 其实在国外CSS编写中,使用em作为单位是很多的,一是人性化考虑,二是受到美国劳工部Section508法案的强行限制.那么在网页设计中,常用到的度量单位一共有三种,分别是px/em/pt: *px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的,国内的网站很多都是采用px作为单位的. *em单位名称为相对长度单位.相对于当前对象内文本的字体尺寸.在国外使用的很多.众多先进浏览器[IE除外的基本都是]都支持字体调整. *pt单位名称为点(

css中link和@import的区别分析详解

导入CSS文件主要有两种方式: 链接式(link)  代码如下 复制代码 <link rel="stylesheet" href="style.css" type="text/css"/>   导入式(@impot) <style type="text/css">      @import url("style.css"); </style> 以上是这两种方式的语法区别.

CSS中display与visibility的区别

css|区别 起因: 前几天在做一个图片无间隙滚动的效果,要利用到一个隐藏的层. 问题: 之间复制以前文字滚动的效果代码(文字滚动时无错误),结果发现页面被拉长了一倍,也就是隐藏的层. 解决: 查CSS手册后发现了隐藏内容原来是有区别的,一种是保留对象的物理空间,一种是不保留. ------------------------------- display:none CSS1 隐藏对象.与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间 visibility:h

css中margin和padding用法区别介绍

用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. CSS边距属性定义元素周围的空间,通过使用单独的属性,可以对上.右.下.左的外边距进行设置,也可以使用简写的外边距属性同时改变所有的外边距. 边界(margin):元素周围生成额外的空白区,"空白区"通常是指其他元素不能出现且父元素背景可见的区域. padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的"补白"(或者叫"留白"),因

css中visibility与display属性区别比较

浏览器支持 所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 internet explorer (包括 ie8)都不支持 "inherit" 和 "collaps教程e" 属性值. 所有主流浏览器都支持 display 属性. 注释:任何版本的 internet explorer (包括 ie8)都不支持 "inherit"."inline-table"."run-in"."

解决CSS中 display 与 visibility 的区别_基础教程

span为内联/inline元素,给他宽度赋值是没有效果的. span为内联/inline元素,给他宽度赋值100px+float:right;可以看到有了宽度. 这个li被定义为内联/inline,设置宽度没有效果 test test 这个li被定义为内联/inline+float:left,设置宽度有效果 test test

javascript-css属性中的px和em区别

问题描述 css属性中的px和em区别 css属性中的px和em的区别是什么?百度说的好专业..看不懂..麻烦大神们给通俗易懂的解释一下.. 解决方案 CSS中em和px的区别CSS中em和px的区别CSS中em与px区别 解决方案二: 所有未经调整的浏览器都符合: 1em=16px. 解决方案三: 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位; 3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器