站长赚钱网赚钱论坛

 找回密码
 立即注册
查看: 171|回复: 1

[网站模板论坛] html css中id和class的区别

[复制链接]

554

主题

1091

帖子

3140

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3140
发表于 2018-1-3 13:59:21 | 显示全部楼层 |阅读模式
html css中id和class的区别比较
大家好,今天给大家分享的是id和class的区别比较
id和class属性是网页中两个通用的属性,它们协同工作使整个页面变得丰富多彩。当我们为一个元素定义样式时。可以使用id,也可以使用class。但是我们也应该注意这两者的区别。
1,在css样式表中书写时,id选择符前面应该加前缀符号‘#’,而class选择符前面应该加前缀符号‘.’。
2,id属性一般在一个页面中只可以使用一次,而class可以被多次引用。
3,id作为元素的标签,用于区分不同结构和内容,而class作为一个样式,它可以应用到任何结构和内容上。
4,在布局思路上,一般坚持这样的原则:id是先确定页面的结构和内容,然后再为它定义样式:而class相反,它先定义好一类样式,然后再页面中根据需要把类样式应用到不同的元素和内容上面。
5,目前浏览器都能允许在同一个页面内出现多个相同属性值的id,一般情况下也能正常显示,不过当使用javascript通过id来控制元素时就会出现错误。
6,在实际应用时,class更多的被应用到文字版块以及页面修饰等方面,而id更多地被用来实现宏伟布局和设计包含块,或包含框的样式。
好了,今天的id和class的区别比较就分享到这里,也许大家对id和class深入研究感兴趣。

回复

使用道具 举报

554

主题

1091

帖子

3140

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3140
 楼主| 发表于 2018-1-3 14:00:02 | 显示全部楼层
一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class="Gandalf", class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。
至于 ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
归纳成一句话就是:Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。(刚才在Dreamweaver中试了一下,确实,并没有出错)
在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|站长赚钱网赚钱论坛 ( 皖ICP备13004459号 )

GMT+8, 2018-5-20 21:45 , Processed in 0.490711 second(s), 22 queries .

Powered by 冯站长之家 Discuz! X3.4

© 2001-2017 冯站长之家论坛

快速回复 返回顶部 返回列表