CSS中的class与id区别及用法
转自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区别及用法的更多相关文章
- CSS中rem、em的区别
引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...
- 简述Linq中.ToList(), .AsEnumerable(), AsQueryable()的区别和用法
[TOC] 这3个方法的功能完全不同, 应按照具体业务场景使用. AsQueryable() 先说说什么是 IQueryable IQueryable 是当前的 data provider 返回的类型 ...
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
- css中margin-left与left的区别
研究下拉菜单和弹出菜单时比较所得: 1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置 ...
- CSS中link与import的区别
一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...
- 外部引用CSS中 link与@import的区别
差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加 ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- 图论中DFS与BFS的区别、用法、详解…
DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...
- 图论中DFS与BFS的区别、用法、详解？
DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...
随机推荐
- NGUI如何使2D图片按像素1：1显示在屏幕上
NGUI版本为3.5.1. 将camera 设置为正交模式,size值设为1. UIRoot(2D)有3种缩放样式: 1.PixelPerfect.UI严格按照指定的像素大小显示,不会随着屏幕的分辨率 ...
- swift 构建类
参开 http://blog.csdn.net/chelongfei/article/details/49784633 在 Swift 中, 类的初始化有两种方式, 分别是 Designated In ...
- Best Coder Round#25 1003 树的非递归访问
虽然官方解释是这题目里的树看作无向无环图,从答案来看还是在“以1作为根节点”这一前提下进行的,这棵树搭建好以后,从叶节点开始访问,一直推到根节点即可——很像动态规划的“自底向上”. 但这棵树的搭建堪忧 ...
- MFC对话框显示BMP图片
1.MFC对话框显示BMP图片我们先从简单的开始吧.先分一个类: (一) 非动态显示图片(即图片先通过资源管理器载入,有一个固定ID) (二) 动态载入图片(即只需要在程序中指定图片的路径即可载入) ...
- ThinkPHP学习遇到的点问题（学习中，持续更新）
1.__ROOT__变量没有值的问题 今天遇到这个比较变态的问题,可能是我技术比较菜吧,搞了一个多小时,最后发现问题可能出现在 入口文件中定义的APP_NAME的名字和项目的跟目录名称相同了,比如我网 ...
- soj1001算法分析
题目简单描述: 给定一个长数串,输出可能的字母串解个数.(A对应1,Z对应26) 样例输入:25114 样例输出:6 样例解释:可能的字母串解:YJD.YAAD.YAN.BEJD.BEAAD.BEAN ...
- 【转】C#多线程示例
using System; using System.Threading; namespace ConsoleThread { class ThreadApp { static int interva ...
- jQuery的常见操作
1. 选择符: a) a > b 作为a子元素的b匹配的元素 b) a + b 作为后面直接同辈元素的b匹配的元素 c) a ~ b 作为后面 ...
- 【Learning Python】【第四章】Python代码结构(一）
这一章的主旨在于介绍python的代码结构 缩进 在很多的编程语言中,一般{}用于控制代码块,比如以下的一段C代码 if(var <= 10) { printf("....." ...
- NOPI导出加载模板
ListExcel导出(加载模板) /// <summary> /// List根据模板导出ExcelMemoryStream /// </summary> /// <p ...