• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > html css中id和class的区别比较

html css中id和class的区别比较

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含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深入研究感兴趣。

您可能想查找下面的文章:

  • 解析width:100%;与width:auto;的区别
  • 该不该使用ID选择器?浅谈对CSS的ID选择器的使用建议
  • 简要讲解CSS中的类型选择器、ID选择器、类选择器
  • 让IE6支持兼容min-width、max-width CSS样式属性的方法
  • 兼容IE6、IE7的min-width、max-width写法
  • CSS Grid布局教程之网格单元格布局
  • CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
  • CSS Grid布局教程之什么是网格布局
  • 使用CSS Grid布局实现网格的流动
  • hideFocus(虚线框处理小技巧)

相关文章

  • 2017-08-06ie placeholder属性的兼容性问题解决方法
  • 2017-08-06完美解决调用上级目录中的css样式文件的路径问题
  • 2017-08-06HTML CSS样式基础(必看篇)
  • 2017-08-06网页制作 默认Web字体样式
  • 2017-08-06用CSS手写导航条没有任何图片附效果图
  • 2017-08-06学习web标准的十个重要理由总结
  • 2017-08-06css实现兼容火狐、IE的LI奇偶行颜色交替方法
  • 2017-08-06纯CSS实现商品图片点击放大效果
  • 2017-08-06傲游极速模式下a:hover使用了宋体字则不能正常显示下划线
  • 2017-08-06css中id和class的定义格式、使用技巧及选择

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • DIV+CSS的叫法是不准确的
    • 绝对令人的惊叹的CSS3折叠效果(3D效果)整理
    • CSS DIV元素与SPAN元素的区别
    • 关于游览器对CSS的渲染
    • Web移动端Fixed布局的解决方案
    • css控制水平衡线hr标签样式去掉其阴影效果
    • 使用不带单位的line-height
    • 纯css 制作音谱跳动效果
    • css 的border属性改变hr颜色小示例
    • DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有