前端学堂(好切网)-Web前端开发,网页切图教程分享平台
前端学堂(好切网),PS网页切图,专业WEB前端外包网站
您的位置:首页 > 前端学堂 > HTML/CSS

CSS中class和id的区别,如何使用?

2017-04-05 09:15:03分类:HTML/CSS阅读(207)

我们在制作网站前端页面时,class和id的使用频率是非常高的,我们都知道使用class和id都可以调用css样式属性,但是很多新人对class和id的功能比较模糊,不知道什么时候该用class,什么时候该用id,接下来我们就详细了解class与id的区别与用法

class与id的区别

  • ID具有唯一性,Class具有普遍性。(ID是身份证,Class是姓名。前者唯一,后者可以重复。)
  • 在CSS中,ID的样式优先级高于Class。
  • ID是唯一的,所以尽量在结构外围使用,通常用于页面布局。
  • Class是可重复的,所以尽量在结构内部使用,通常用于样式定义。

 

class与id的用法

id具有唯一性,这个特性一定要牢记,很多新人经常忽略这点,导致页面中存在多个同样的id,导致js、锚链接等功能失效。

如果一个元素在页面中出现一次,并且需要在JS中添加动态效果的话就用ID,其他css样式设置尽量使用class。

不要滥用class而回避id

我们要做的就是class与id一起协作,并不是一定要减少id的使用,页面的顶部、底部、导航、主内容区等等,这些具有唯一性的元素,使用id是没有问题的。

class或id的合理命名

比如两列布局的左右侧多半是正文和辅助信息的关系,可以命名为:class=”main-content”和class=”sidebar”,而不建议使用class=”left”和class=”right”
在自适应Web设计如火如荼的今天,页面上的某个元素处在网页什么位置更像是个变量,所以通过位置来定义一个元素显然是会承受很多额外的维护成本和扩展成本。当改变发生的那一天,你发现自己的HTML代码变得文不对题。曾经的left跑到最上面去了,right变成了底部通栏,这都是很正常的变化。

原文链接:http://www.hqhtml.com/htmlcss/30.html,出自好切网(前端学堂),转载请注明出处。
标签:css技巧 web规范
相关阅读 ~
推荐文章

© 2016 好切网(hqhtml.com) 长春诺阳科技有限公司(网页前端切图) 版权所有 吉ICP备15007500号