转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html

我们平常在用DIV CSS制作Xhtml网页页面时，常会用到class 和id来选择调用CSS样式属性。对学习CSS的新手来说class和id可能比较模糊，同时不知道什么时候该用class，什么时候又用id，以及它们用法与限制是怎么样的。接下来我们就来详细了解CLASS与ID基本属性及用法。

Class 在程序中称“类”，同时在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名如： .css5{属性：属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器。如： .css5{属性：属性值;} 选择器在html调用为“<div class="css5">我是class例子</div> ”如果不知道怎么引用CSS，那就可以了解下css引用。

而且class(类)在同一个html网页页面可以无数次的调用相同的class类，在这里例子里则可以在对应的网页里可以无数次调用选择“css5”。这也说明class一般是用来调用css中的预配制属性的，比如说有一个预配制属性为如这里的“.class01{属性：属性值;} ”，这样就可以像调用函数一样不用再一个网页页面里重复的配置一个“类”属性，而只需要写上一个class类选择，就可以在同一个页面里任何位置调用选择具有相同的CLASS类。

ID是表示着标签的身份，在JS脚本中会用到id，当JS要修改一个标签的属性时，JS会将id名作为该标签的唯一标识进行操作。也就是说ID只是页面元素的标识，供其他元素脚本等引用。假如你的页面里出现了两个ID那JS效果特性较出现逻辑错误不知道依据哪个ID来改变其标签属性。 在CSS里的ID不一定为JS而设置的，但是同样ID在页面里也只能出现一次，并且是唯一性。虽然可能我们才学DIV+CSS爱好者在一个页面里同时调用相同的ID多次但是仍然没有出现页面混乱错误，但是我们为了W3C及各个标准我们也要遵循ID在一个页面里唯一性。以免出现浏览器兼容问题。

Div css 页面中的ID是怎么个用法呢？
通常我们在CSS样式定义的时候 以“#”来开头命名id名称如：#css5{属性:属性值;} 这个也有点像class的定义，只是class是以小写句号“.”开头命名，而ID是以“#”好开头定义。那id是怎么个用法呢？ Css里的ID用法与class用法一样，只是把class换成id。如例子：在CSS样式定义ID --- #css5{height:25px;width: 200px;} ,调用ID --- <div id="css5">我是ID例子</div>。

接下来我们来看下完整关于CLASS和ID实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>DIV CSS中CLASS与ID实例 - -DIV+CSS-www.divcss5.com</title>

<style>

.css5{ width:100px; height:100px; border:1px solid #000; float:left; }

.css5_class{ background:#FFF;} /* 背景白色 */

#css5_id{ background:#FF0000;} /* 背景红色 */

</style>

</head>

<body>

<div class="css5 css5_class">我在浏览器下浏览，内容背景将是白色</div>

<div class="css5" id="css5_id">我在浏览器下浏览，内容背景将是红色</div>

</body>

</html>

接下来我们分析一下以上实例：class="css5 css5_class" 怎么是这样的？这里是相当于调用选择了class类css5与css5_class 。class="css5" id="css5_id" 这里同样是选择调用了class类 :css5和id :css5_id 。

id和class属性是网页中两个通用的属性，它们协同工作使整个页面变得丰富多彩。当我们为一个元素定义样式时。可以使用id，也可以使用class。但是我们也应该注意这两者的区别。

1，在css样式表中书写时，id选择符前面应该加前缀符号‘#’，而class选择符前面应该加前缀符号‘.’。

2，id属性一般在一个页面中只可以使用一次，而class可以被多次引用。

3，id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可以应用到任何结构和内容上。

4，在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，然后再为它定义样式：而class相反，它先定义好一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。

5，目前浏览器都能允许在同一个页面内出现多个相同属性值的id，一般情况下也能正常显示，不过当使用javascript通过id来控制元素时就会出现错误。

6，在实际应用时，class更多的被应用到文字版块以及页面修饰等方面，而id更多地被用来实现宏伟布局和设计包含块，或包含框的样式。

CSS中的class与id区别及用法的更多相关文章

  1. CSS中rem、em的区别

    引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...

  2. 简述Linq中.ToList(), .AsEnumerable(), AsQueryable()的区别和用法

    [TOC] 这3个方法的功能完全不同, 应按照具体业务场景使用. AsQueryable() 先说说什么是 IQueryable IQueryable 是当前的 data provider 返回的类型 ...

  3. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  4. css中margin-left与left的区别

    研究下拉菜单和弹出菜单时比较所得: 1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置 ...

  5. CSS中link与import的区别

    一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...

  6. 外部引用CSS中 link与@import的区别

    差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加 ...

  7. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  8. 图论中DFS与BFS的区别、用法、详解…

    DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...

  9. 图论中DFS与BFS的区别、用法、详解？

    DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...

随机推荐

  1. ubuntu 安装MTK 移动终端usb驱动

    lsusbBus 001 Device 002: ID 8087:8000 Intel Corp. Bus 001 Device 001: ID 1d6b:0002 Linux Foundation ...

  2. odi 12.2.1.1新特性

    ODI 12.2.1.1现在已经发布,也可以OTN上下载,主要变化: Hyperion Essbase and Hyperion Planning 知识模块 Hyperion Essbase and ...

  3. HW职责 (Hardware Engineer)

    硬件设计就是根据产品经理的需求PRS(Product Requirement Specification),在COGS(Cost of Goods Sale)的要求下,利用目前业界成熟的芯片方案或者技 ...

  4. Java Swing 第03记 布局管理器

    几种Swing常用的布局管理器 BorderLaout 它将容器分为5个部分,即东.南.西.北.中,每一个区域可以容纳一个组件,使用的时候也是通过BorderLayout中5个方位常量来确定组件所在的 ...

  5. 解决Oracle+weblogic系统死机的问题

    前段时间发布的系统(Oracle+weblogic)频繁挂掉,每天早上9点.下午2点高峰期就挂,纠结了很长时间,最终解决,方法描述下. 执行select count(*),status from v$ ...

  6. POI打印Excel报表

    1.将POI组件中的jar包放入项目中路径下的WEB-INF/lib目录中 2.在javabean中创建一个poi的java文件,中间出了创建getXXX(),setXXX()方法外,加入readRe ...

  7. CDH5X 安装oozie报错To enable Oozie web console install the Ext JS library.

    最近在CDH5.X 安装oozie 服务,服务安装完毕,访问oozie server ui,报如下错误: 页面提示: Oozie web console is disabled.To enable O ...

  8. 探索软件工程道路上的我 V (Θ∀Θ＃)

    开发语言:Java 开发工具:UltraEdit 小伙伴博客:http://www.cnblogs.com/hyating/ github地址:https://github.com/JUNYU217/ ...

  9. BigDecimal

    BigDecimal需要创建对象进行计算(用不同的方式做运算) BigDecimal num1 = new BigDecimal("5"): BigDecimal num2 = n ...

  10. Tableview RefreashControl 下拉之后马上返回

    Tableview RefreashControl 下拉之后马上返回 原因很简单: 我把  [self.tableView setContentInset:UIEdgeInsetsMake(0, 0, ...