`
bleach0608
  • 浏览: 61204 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

css中class与id的区别

    博客分类:
  • CSS
阅读更多
这两个区别都是比较容易混淆的问题,尤其是Class与ID,相信很多人并没有仔细了解过之中区别。以下是我的一些理解:
  
  1.Class与ID的区别
  
  一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class="Gandalf",class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。
  
  至于ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
  
  归纳成一句话就是:Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。(刚才在Dreamweaver中试了一下,确实,并没有出错)
  
  在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用。
  
  2.Margin与Padding的区别
  
  两者都是代替表格最重要的作用->分割块的好方法,区别在于Margin是不同的Tag间互相隔离的距离而Padding是同一元素中不同内容分割使用,这在表格中最看得清楚。尤其是当对一个区域加载了背景样式之后,Padding下的内容背景色会发生改变,而Margin则不会有所改变。
分享到:
评论

相关推荐

    CSS中CLASS和ID的区别.doc

    CSS中CLASS和ID的区别.doc CSS中CLASS和ID的区别.doc

    div+css中Class与ID的区别

    "div+css中Class与ID的区别" 在 HTML 和 CSS 中,Class 和 ID 是两个常用的选择器,用于选择和样式化网页元素。然而,这两个选择器有着根本的区别,了解它们的差异非常重要。 首先,让我们从 Class 开始。Class 是...

    CSS常用Class名

    整理了一些CS中常用Class名,包括class、id 、css文件名的常用命名规则

    详细了解CSS中的class与id区别及用法

    对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用id,以及它们用法与限制是怎么样的。接下来我们就来详细了解CLASS与ID基本属性及用法。 Class 在程序中称“类”,同时在CSS...

    CSS网页布局ID和Class类的命名介绍

    本篇文章主要讲解了CSS网页布局中的ID和Class类的命名规则和使用原则。对于开发者来说,命名规则是一项非常重要的技能,因为它可以影响到整个网站的可读性、可维护性和可扩展性。 一、类名命名规则 类名命名规则...

    大家看了就明白了css样式中类class与标识id选择符的区别小结

    Css 样式中类 class 与标识 id 选择符的区别小结 Css 样式中类 class 与标识 id 选择符是两个基本的选择符,它们都是用来在 HTML 元素中应用样式的,但是它们之间存在着一些关键的区别。 类选择符(Class) 类选择...

    Class与ID区别 margin和padding区别 CSS学习笔记

    CSS学习笔记 - Class与ID区别、margin和padding区别 在CSS学习中,有两个非常重要的概念:Class与ID和margin与padding。虽然它们都是CSS中的基本概念,但是许多初学者却不知道它们的区别和使用场景。 Class与ID...

    html css中id和class的区别比较

    1,在css样式表中书写时,id选择符前面应该加前缀符号‘#’,而class选择符前面应该加前缀符号‘.’。 2,id属性一般在一个页面中只可以使用一次,而class可以被多次引用。 3,id作为元素的标签,用于区分不同结构...

    css中id和class的定义格式、使用技巧及选择

    而以class=bbb形式定义的,在css中应该这样设置其样式:.bbb{ 样式列表 }(注意前面有一个点) ID与CLASS的使用技巧 1. 子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。2. CLASS中的子级...

    css id,class命名与seo

    css文件的命名也seo可以更好配合,具体见内容,包含普遍对应名称

    JQUERY选择器 id选择器<br> 2)  $('.class')  css选择器,class类名<br>

    2) $('.class') css选择器,class类名 3) $('element') 标签选择器,例如p,h1,div 4) $('*') 全选择器,可选择所有的html标签(影响范围较大甚用) 5) $('sele1,sele2') 用‘,'逗号隔开可以选择...

    CSS Id 和 Class

    CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置”id” 和 “class”选择器。 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性...

    atom-css-class-checker:此插件检查 HTML 文件中使用的类和 id 与 CSS 文件中描述的类和 id 的匹配

    atom-css-class-checker 包此包扫描 html 标记并显示项目的 CSS 文件中未指定哪些类。 它还提供跳转到 CSS 类/id 定义的功能如何使用Ctrl-Alt-O-切换插件Ctrl-B - 开源

    CSS网页布局中ID与class的理解

    XHTML CSS网页布局中ID与class的理解应用:  要是XHTML与CSS能面向对象。。太阳应该从北边升起了。但是,凡事都应该带着OO的思想来看问题,也勉强可以凑数拉。其实,早在零几年就有人提出了OO-style,不过已找不到...

    div+css样式表的id和class常用命名规则

    div+css样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上,但id只能是一个。所以就开始查一些相关的div+css样式表id和class的常用命名规则,请大家参考一下:  首先讲一下div+...

    前端必须掌握的css选择器方法

    下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...

Global site tag (gtag.js) - Google Analytics