`

[CSS基础知识]CSS中Class与ID的区别

阅读更多

(http://www.8go8.com/blog/post/20060612013036.html)

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

分享到:
评论

相关推荐

    HTML5+CSS3入门基础知识

    HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准,旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准,旨在提高网页的视觉效果和用户体验。本节课程将介绍 HTML5 和 CSS3 的基础知识,...

    html-5-css-3实训报告,html5和css3知识总结.docx

    HTML5 和 CSS3 实训报告知识点总结 HTML5 和 CSS3 是当前 web 开发中最重要...本文对 HTML5 和 CSS3 的基础知识点、实训报告、class 和 id 的区分、常用符号进行了总结和分析,为 web 开发者提供了有价值的参考资料。

    div+css网页布局学习

    二、CSS基础知识 * CSS是层叠样式表的简称,用于控制网页的样式和布局 * CSS的主要特点是将样式和结构分离,提高了网页的可维护性和可读性 * CSS的基本选择器包括标签选择器、类选择器、ID选择器等 三、Div标签的...

    div+css有实例,易学易懂

    3.1 CSS 的基础知识 3.1.1 什么是CSS 3.1.2 CSS 的语法 3.1.3 选择符 3.1.4 属性 3.1.5 伪类和伪元素 3.1.6 默认值 3.1.7 继承性 3.2 CSS 编码规范 3.2.1 CSS 基本书写规范 3.2.2 CSS 样式表书写顺序 3.3 怎样更好地...

    CSS网站布局实录 (第二版)PDF版

    第2章 XHTML与CSS基础 2.1 XHTML基础 2.2 选择合适的DTD 2.3 选择合适的标签 2.4 给CSS留下接口 2.5 良好的XHTML编写习惯 2.6 CSS语法结构 2.6.1 CSS属性与选择符 2.6.2 类型选择符 2.6.3 群组选择符 2.6.4 包含选择...

    网页设计及制作DIV+CSS实训指导书.doc

    二、CSS基础知识 * CSS选择器:tag选择器、class选择器、id选择器、属性选择器 * CSS继承性和层叠特性:了解CSS的继承机制和层叠特性对样式的影响 * CSS样式规则:选择器、属性、值 三、DIV+CSS布局技术 * DIV...

    html和css学习心得.doc

    HTML和CSS基础知识 在学习Web前端开发时,HTML和CSS是两个基础知识点。HTML(HyperText Markup Language)是一种标准通用标记语言,用来创建网页;CSS(Cascading Style Sheets)是一种样式表语言,用来控制网页的...

    3-html+css简答题.doc

    三、CSS基础知识 21. 什么是CSS?它的作用是什么?:CSS是层叠样式表的缩写,它的作用是用于描述HTML文档的样式和布局。 22. 如何在HTML页面中引入CSS?:可以使用link标签或style标签来引入CSS。 23. 什么是选择器...

    div+css网页标准布局实例教程

    一、XHTML CSS 基础知识 1. 文档类型 在 Dreamweaver 中新建 HTML 格式文档时,代码最上部会出现一句声明文档类型的语句:`&lt;!DOCTYPE ...

    Web前端开发基础:CSS控制图文混排.ppt

    --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能使用CSS控制图文混排 能力目标 CSS选择器类型 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 标签选择...

    html+css技能测试带答案).doc

    本测试包括了 HTML 和 CSS 的基础知识和实践问题,涵盖了 HTML 的基本结构、CSS 的选择器和样式规则、布局和排版等方面。 1. 在 HTML 显示单选框的代码是:。 知识点:HTML 表单控件,单选框的实现方式。 2. 写出...

    css基础知识之选择器使用示例

    复制代码代码如下:header&gt; &lt;nav class=”nav-main” id=”navigation”&gt;Here background&lt;/nav&gt;&lt;/header&gt;header nav { background-color: red;}#navigation { background-color: green;} &lt;p&gt;.nav-main { background-...

    韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》HTML学习笔记.pdf

    根据韩顺平的《轻松搞定网页设计HTML+CSS+JAVASCRIPT》HTML学习笔记.pdf,我们可以总结出以下HTML基础知识点: 1. HTML基本结构:HTML文档的基本结构包括、、三部分,其中是根元素,用于存放元数据,用于存放页面...

    《web前端开发基础》作业考核试题题库大全(精品文档).doc

    * CSS 选择器的使用:tag 选择器、class 选择器、id 选择器等 * CSS 属性的使用:color、background、font 等 * CSS 布局的实现:margin、padding、float 等 * CSS 的盒子模型:content area、padding area、border ...

    网上书店前台页面设计-Web程序开发基础(常用版).doc

    二、CSS基础知识 * CSS基本选择器:id、class、tag、universal等 * CSS样式属性:color、background、font、text-align、padding、margin等 * CSS布局技术:浮动、定位、display等 三、网页设计技术 * 网页结构...

    2023年web前端开发知识点总结.docx

    1. CSS选择器:CSS选择器是CSS规则的核心,常见的选择器有ID选择器、Class选择器、标签选择器、伪类选择器等。 2. CSS样式规则:CSS样式规则包括选择器和声明,声明是指样式的具体内容,例如字体、颜色、背景图像等...

    html知识点笔记整理

    HTML、CSS、JavaScript 基础知识点笔记 HTML HTML(HyperText Markup Language)是一种超文本标记语言,用于网页的创建和结构化。HTML 由标签组成,标签可以分为单标签和双标签。单标签只有一个组成,例如:` `...

    前端基础培训啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

    "前端基础培训" 前端基础培训是指使用 HTML、CSS、JavaScript 等技术来开发网站前端的内容展示和交互功能的培训。...前端基础培训的内容涵盖了 HTML、CSS、JavaScript 等技术的基础知识和高级知识。

    [WAMP网站开发] PHP连接MySQL数据库基础知识1

    PHP 连接 MySQL 数据库基础知识 本篇文章主要介绍 PHP 连接 MySQL 数据库的基础知识,为初学者提供了一个入门级的教学文章。文章涵盖了 HTML 布局首页、PHP 连接数据库以及 XAMPP 操作数据库的基础知识。 一、...

    58集团2017 校园招聘前端岗.pdf

    三、CSS 基础知识 1. Chrome 浏览器的私有样式前缀:-webkit-。 2. CSS3 设置圆角的属性名:border-radius。 3. # 是根据 id 来选择元素,. 是根据 class 来选择元素。 四、事件绑定 1. 自定义一个浏览器兼容的...

Global site tag (gtag.js) - Google Analytics