合肥市高新区长江西路与科学大道交口5F创业园A座309 合肥网站建设 - 合肥网站制作 - 安徽网络公司
136 5560 1775
为政府搭建高效应用平台,为企业塑造良好形象,为网民营造美丽温馨家园!

css属性中class与id的区别

发布日期:2010-06-02  浏览次数:2387
     css属性中class与id的区别,我在前面的文章中已经讲过了。但还是有新手对此非常迷茫,不知道什么时候该用id,什么时候该用class。这两个选择器让新手左右为难。
   一、在web标准中是不容许重复id的,例如 div id="a"  不容许重复2次;而class所定义的是类,理论上可以无限重复。以根据需要多次引用。
   二、属性的优先级问题:id 的优先级要高于class,合肥网站建设在下面的代码中有示例说明。
   三、方便JS等客户端脚本的引用,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个id,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个id来得简单与快捷。
下面假设div的样式名称为main,如果属性为id就是 #main ,如果属性为class就是 .main

#main 定义的是id为"main"这个元素的样式
.main 的意思是新建一个名为"main"的样式
#main 只能定义id为"main"这个元素的样式
.main 一但定义以后,可以让其他的元素来调用,方法为class="main"

    用#定义css样式,在调用时必须用id,用.定义css样式,在调用时必须用class。用#定义的样式,一般都是定义结构框架,一些大的容器,且在同一个页面只能出现一次;而且.定义的样式,一般都是起修饰作用或多次重复的样式。还一点就是在同一个层里同时出现id和class样式,id更优先于class。

    一个class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个class可以定义剧本中每个人物的故事线,你可以通过css,javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class="Gandalf", class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的class。

    至于id,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域和一个页脚等组成),一般使用id比较理想,因为一个id在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。

要自己多动手写css代码,才能发现自己的不足.不能只看别人的,只抄别人的!

那么定义div应该使用class还是id呢

    css实战:id是狙击枪 class是双刃剑 合则两利分则两败

    想要做好网页结构,id与class都是必须熟练掌握的,所谓“两手抓,两手都要硬”。id就象狙击枪一样,可以帮助我们精准地定位要想要加载样式的元素;而class则是侠客的佩剑,信手拈来更加轻盈灵便,两者的结合能够实现结构良好且表现丰富的页面。

   然而现在有一种错误的观点,就是id完全可以用class来取代,事实上许多网页源代码也的确如此,打开来通篇class,找不到一个id。造成这种现象的理由有很多种,然而自table时代传下来的根深蒂固的“class=css”的观念才是本因。

   的确,class比id用途更广更灵活,但也必须意识到,class对于构建良好的网页布局结构远不如id有效。id的强制唯一性使得我们可以很容易通过id检索到我们需要的任意模块,而class则没有这个优势。虽然我们可以为模块定义唯一的class名,但前提是——只有制作者本人可以动网页样式。

   否则换一个稍微懒一些的伙计,看到样式相同便直接把前面的class拿来套用,其结果就是我们发现网页里有十几个模块都叫做“gonggao”或者“xinwen”,以至于为了区分还不得不加上大量的html注释,这样的结果显然并不是我们想要的。再者就是前面提到的,通过通用class所节省下来的代码,又不得不在每个单独定义的class中挥霍掉。

About Us

合肥启迈网络科技有限公司专业从事网站建设、网站优化、虚拟主机、域名 注册等网络服务。专业的设计团队、一流的服务态度和先进的网络技术让我 们在竞争激烈的网站设计这行业中蓬勃发展.......[ 查看详情]
服务热线:13655601775

Contact Us

网址:www.qimaikj.com

熊经理:13655601775
E-mail:qimai@qimaikj.com
地址:合肥市高新区长江西路与科学大道交口5F创业园A座309

免费咨询