`

[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则不会有所改变。

分享到:
评论

相关推荐

    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 包含选择...

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

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

    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-...

    lab-css-recipes-clone:克隆食谱页面并了解HTML和CSS基础的练习

    确保在整个练习中使用class和id选择器。 请记住,仅在要修改该类型的每个元素时才使用类型选择器 使用单个外部CSS样式表为所有页面设置样式 使用提供的图像在页面上构造适当的元素: 苹果派图片的背景 食谱份量/...

    【JavaScript源代码】JS实现多重选项卡切换轮播图.docx

     轮播动画来提升页面的颜值和交互性能,下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图。 轮播图简介:在一个网站的某一特定模块,通过电脑上鼠标点击或鼠标移入、手机上...

    html的基础

    讲述了以及总结了html的基础知识 第四章css样式表 1.1样式表的基本语法: 1.2样式表的基本结构: 1.3样式规则: 1.4类样式(class): 1.5 ID样式 1.6常用类样式属性: 1.7常用背景属性: 1.8常用方框属性: ...

    JavaScript基础教程第8版

    书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...

    asp.net知识库

    事务隔离性的一些基础知识 在组件之间实现事务和异步提交事务(NET2.0) 其它 在.NET访问MySql数据库时的几点经验! 自动代码生成器 关于能自定义格式的、支持多语言的、支持多数据库的代码生成器的想法 发布Oracle...

    jQuery详细教程

    $("div#intro .head") id="intro" 的 &lt;div&gt; 元素中的所有 class="head" 的元素 三. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语...

    h4界面开发

    &lt;link href="css/b3.css" rel="stylesheet" type="text/css" /&gt; &lt;div id="box"&gt; &lt;div class="sy_1"&gt; &lt;div class="sy_2"&gt; &lt;span class="sy_fl"&gt;欢迎来到濮阳市城乡规划局!今天是2013年11月13日 星期三&lt;/span&gt;...

    html入门到放弃笔记

    1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点:必须通过指定的客户端软件才能访问服务器...

    ExtAspNet_v2.3.2_dll

    -修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion...

    十天学会ASP.net--我认为ASP.NET比ASP难很多,希望大家做好准备

    &lt;asp:textbox id="password2" runat="server" textmode="password" cssclass="textbox"/&gt; 宋体" font-size="9pt" text="请填写" runat="server"/&gt; 宋体" font-size="9pt" text="确认失败" runat="server"/&gt; ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion...

    零基础学ASP.NET 2.0电子书&源代码绝对完整版1

    Create_tb_class.sql 创建表class。 Create_tb_article.sql 创建表article。 Create_Index_test.sql 创建索引。 Alter_Index_test.sql 修改索引。 Del_Index_test.sql 删除索引。 Create_View_article...

Global site tag (gtag.js) - Google Analytics