欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS中的class与id区别及用法

程序员文章站 2023-02-20 21:40:21
我们平常在用DIV CSS制作Xhtml网页页面时，常会用到class 和id来选择调用CSS样式属性。 CLASS与ID基本属性及用法： Class 在程序中称“类”，同时在CSS中也书面语也叫“类”。 在CSS样式中以小写的“点”及“.”来命名如： .css5{属性：属性值;} ,而在html页 ......

 

 

我们平常在用div css制作xhtml网页页面时，常会用到class 和id来选择调用css样式属性。

class与id基本属性及用法：

class 在程序中称“类”，同时在css中也书面语也叫“类”。

在css样式中以小写的“点”及“.”来命名如： .css5{属性：属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的css又叫css选择器。

如： .css5{属性：属性值;} 选择器在html调用为“<div class="css5">我是class例子</div> ”如果不知道怎么引用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实例：

  1.  <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"  "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
  5. <title>div css中class与id实例 - -div+css-www.divcss5.com</title> 
  6. <style> 
  7. .css5{ width:100px; height:100px; border:1px solid #000; float:left; } 
  8. .css5_class{ background:#fff;} /* 背景白色 */ 
  9. #css5_id{ background:#ff0000;} /* 背景红色 */ 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div class="css5 css5_class">我在浏览器下浏览，内容背景将是白色</div>  
  14. <div class="css5" id="css5_id">我在浏览器下浏览，内容背景将是红色</div>  
  15. </body> 
  16. </html> 

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

本页通过css实例与class类和id分别的讲解，相信您能从此深刻认识和区分它们并且灵活。特别注意：在命名id和class类的时候特别要注意大小写，id和class是对大小写非常敏感的，最好以英文开头，不要用中文命名css类名。欢迎来到divcss5希望本页对你有帮助！  

文章出处和来源网址：

上一篇： python实现简单flappy bird

下一篇： 你打娘胎里就懒

推荐阅读