zoukankan      html  css  js  c++  java
  • CSS中的class与id区别及用法

    转自http://www.divcss5.com/rumen/r3.shtmlhttp://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; 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更多地被用来实现宏伟布局和设计包含块,或包含框的样式。 

  • 相关阅读:
    Asp.Net MVC3 简单入门第一季(五) 通过Asp.Net MVC的区域功能实现将多个MVC项目部署到一个站点
    Asp.Net MVC3 简单入门第一季(一)环境准备
    Asp.Net MVC3 简单入门第一季(三)详解Controller之Filter
    Entity Framework快速入门一对零到一关系处理
    Html5 学习系列(一)认识HTML5
    程序员体检完事后的感受
    Asp.Net MVC3 简单入门第一季 【索引贴】
    实在忍不住,【转】一篇好文章!题目:【转】想要成功,请记住!
    Html5 学习系列(二)HTML5新增结构标签
    大学应该怎么读?
  • 原文地址:https://www.cnblogs.com/yueyingky/p/4441540.html
Copyright © 2011-2022 走看看