`
bleach0608
  • 浏览: 62074 次
  • 性别: 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

    首先,从语法上看,`id`和`class`的选择器在CSS文件中以不同的符号表示。`id`选择器使用井号`#`作为前缀,如`#exampleId`,而`class`选择器则使用点`.`作为前缀,如`.exampleClass`。 其次,`id`和`class`在页面中...

    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,中文意为“类”,在CSS中作为选择器时,用于选取具有相同...

    css id,class命名与seo

    将CSS与SEO结合,通过合理的ID和Class命名,可以增强页面的可读性,帮助搜索引擎更好地理解网页内容,从而提升SEO效果。下面我们将详细讨论CSS ID和Class的命名策略以及其与SEO的关系。 1. CSS ID命名: - `wrap`...

    大家看了就明白了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的区别比较

    首先,`id` 和 `class` 在 CSS 样式表中的表示方式不同。`id` 选择器前缀是 `#` 符号,例如 `#header`,而 `class` 选择器前缀是 `.` 符号,如 `.main-content`。这种差异使得开发者能快速区分两者,便于编写和阅读...

    Trashycss没有class的一次性CSS库

    而"Trashy.css"是一个独特的一次性CSS库,正如其标题“Trashycss没有class的一次性CSS库”所示,它与传统的CSS库有所不同,它不依赖于类选择器(`class`)。这个库是由JavaScript开发人员创建的,主要针对那些需要...

    HTML、CSS里面关于 id、class、name 属性的区别和用法.docx

    HTML、CSS中关于id、class和name属性是网页开发中的基础概念,它们各自有着不同的用途和应用...在CSS中,class和id用于定位和应用样式,而在JavaScript和服务器交互中,name和id则扮演着传递数据和标识元素的重要角色。

    HTML、CSS里面关于 id、class、name 属性的区别和用法.pdf

    HTML、CSS 中的 id、class 和 name 属性都是用来标识和区分网页元素的重要特性,但它们各有不同的用途和应用场景。 1. **id 属性** - **唯一性**:id 是文档中每个元素的唯一标识符,必须在整个文档内保持唯一,不...

    CSS2.0 中文手册

    1. **选择器**:CSS2.0中的选择器包括标签选择器、类选择器、ID选择器、属性选择器和伪类等。例如,`p`用于选取所有段落,`.class`用于选取具有特定类的元素,`#id`用于选取具有特定ID的元素。此外,组合选择器如`E ...

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

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

    css中文手册 css样式表

    **CSS中文手册与CSS样式表** CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档呈现的样式语言。它控制着网页的布局,让网页的设计更加丰富多样,使内容和表现分离,...

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

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

    Python-python写的用来找到css中没有用到的代码片段并删除

    3. **比对分析**:将HTML中的class和id与CSS选择器进行匹配,找出没有匹配到的选择器。 4. **删除无用规则**:最后,程序会从原始CSS文件中删除未匹配到的规则,生成一个新的、精简的CSS文件。 5. **备份与替换**...

    CSS中文完全参考手册

    2. 选择器:CSS提供多种选择器,包括标签选择器(如`p`)、类选择器(如`.class`)、ID选择器(如`#id`)、属性选择器(如`[attr]`)等,以及组合选择器(如`h1+p`)。 3. 属性与值:每个样式声明由属性和对应的值...

Global site tag (gtag.js) - Google Analytics