`
haohappy2
  • 浏览: 326283 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

the usage difference between id and class for css

阅读更多

定义格式:
另外,形如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 是唯一的而且对于javascript操作html 元素有帮助,
#idname {property: value}
概念定义:
id是元素的名称,可以供js或其它脚本程序来访问该元素对象,而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则对宏观布局和设计放置各种元素较有用

分享到:
评论

相关推荐

    CSS减肥工具Firefox插件CSS Usage

    标题中的“CSS减肥工具Firefox插件CSS Usage”指的是一个针对Firefox浏览器的扩展,该扩展专门设计用于优化和精简CSS(层叠样式表)代码。CSS是网页设计中用于控制布局和样式的语言,但随着时间的推移,CSS文件可能...

    Firefox浏览器插件Firebug和CSS减肥工具CSS Usage(清理无用CSS样式的CSS精简工具)

    注意,说了这么久,大家一定知道了CSS Usage是一个扫描冗余CSS样式的工具,可以清理多余的CSS样式, 但是,你一定要扫描足够多的网页,尽可能地找到最多的样式。 同时,CSS Usage还提供给我们关于CSS某个选择器被...

    Beginning HTML5 and CSS3 For Dummies

    Introducing you to the syntax and structure of the languages, this helpful guide shows you how to create and view a web page, explains ideal usage of HTML5 and CSS3, walks you through the CSS3 rules ...

    css_usage.zip

    标题“css_usage.zip”暗示了这个压缩包可能包含与CSS(层叠样式表)的使用相关的资源或工具,可能是为了帮助优化和简化CSS代码。描述中提到“过滤网站中没有必要的CSS”,这指的是减少CSS代码的冗余,提高网页加载...

    Firefox_css_usage-0.2.9.zip

    《Firefox CSS Usage插件详解与应用》 在Web开发领域,优化网页性能是至关重要的,而CSS(Cascading Style Sheets)作为控制网页样式的重要工具,其精简和优化直接影响到页面加载速度和用户体验。Firefox的CSS ...

    Responsive Web Design with HTML5 and CSS3(PACKT,2ed,2015)

    With mobile internet usage still rising, and tablets changing internet consumption habits, you need to know how to build websites that will just ‘work’, regardless of the devices used to access ...

    Firefox插件 CSS Usage

    css usage是一个基于firebug的firefox扩展,可以用来查看页面中的CSS的使用情况,可以清楚的查看css文件中所有的规则在你的网站中的 真实的使用情况。可以查看一个网站中多个页面中的css使用情况——这个很好,可以...

    css Usage.zip

    第一步,我们需要安装Firefox,或者确定你...第四步,在浏览器中打开我们要优化的页面(本地的页面也可以),点击右下角的firebug小图标,打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。

    FireFox_css_usage-0.2.9

    FireFox_css_usage-0.2.9 过滤网站中没有必要的CSS 简化CSS代码非常方便

    可以添加CSS Usage插件的firefox浏览器

    可以添加CSS Usage插件的firefox浏览器,其他版本都不能添加,只有这个版本可以的,喜欢就下载吧!

    HTML5.and.CSS3.Building.Responsive.Websites.pdf

    Packed with examples and a thorough explanation of modern techniques and syntax, the second module provides a comprehensive resource for all things “responsive.” You'll explore the most up-to-date ...

    YuNetsurf v3.0.0 for D6-XE10 HTML5 CSS 解析

    YuNetSurf is a HTML5 parser and tree builder with CSS3 tokeniser, parser, and selection engine for Delphi (Embarcadero / CodeGear / Borland). HTML Parser and Tree Builder Parse HTML, good and bad. ...

    英文原版-PeopleSoft for the Oracle DBA 2nd Edition

    PeopleSoft for the Oracle DBA, Second Edition stands on the boundary between the PeopleSoft application and the Oracle database. This new edition of David Kurtz‘s book is freshly revised, showing ...

    AN12900 Secure Over-the-Air Prototype for Linux Using CAAM and Mender

    ### AN12900: Secure Over-the-Air Prototype for Linux Using CAAM and Mender #### 1. Introduction Over-the-Air (OTA) updates represent an efficient method for Original Equipment Manufacturers (OEMs) ...

    CSS_Hack_for_Web2.0

    CSS_Hack_for_Web2.0

Global site tag (gtag.js) - Google Analytics