在定义样式的时候,有时候会将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更多地被用来实现宏伟布局和设计包含块,或包含框的样式。

html css中id和class的区别比较的更多相关文章

  1. html中id name class的区别(转)

    HTML 中 id与name 区别 一个name可以同时对应多个控件,比如checkbox和radio 而id必须是全文档中唯一的 id的用途 1) id是HTML元素的Identity,主要是在客户 ...

  2. CSS中rem、em的区别

    引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...

  3. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  4. css中margin-left与left的区别

    研究下拉菜单和弹出菜单时比较所得: 1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置 ...

  5. html元素中id和name的区别

    可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Nam ...

  6. CSS中link与import的区别

    一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...

  7. 外部引用CSS中 link与@import的区别

    差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加 ...

  8. css中import与link用法区别

    方式:引入CSS的方法有两种,一种是@import,一种是link @import url('地址');//注意,这种方式可以放在页面也可以放在css文件中<link href="地址 ...

  9. 在表单(input)中id和name的区别

    但是name在以下用途是不能替代的: 1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.因为有许多name会同时对应多个控件,比如checkbox和radio,而id必须是 ...

随机推荐

  1. contest7.20(暴力专练)

    此次练习的地址:  http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26732#overview 密码 acmore Problem A(P ...

  2. CodeForces 706C Hard problem (水DP)

    题意:对于给定的n个字符串,可以花费a[i]  将其倒序,问是否可以将其排成从大到小的字典序,且花费最小是多少. 析:很明显的水DP,如果不是水DP,我也不会做.... 这个就要二维,d[2][max ...

  3. POJ 3673 Cow Multiplication (水题)

    题意:给你两个数,求所有的数位的积的和. 析:太水了,没的说,可以先输入边算,也可以最后再算,一样.. 代码如下: #include <cstdio> #include <strin ...

  4. IE取消访问剪贴板设置

    1. 启动IE. 2. Internet选项. 3. “安全”选项卡. 4. 自定义级别. 5. “安全设置-Internet区域”->脚本->允许对剪贴板进行编程访问(启用)

  5. IIS支持其他类型下载

    路径:IIS--默认网站属性-->http 头-->MIME映射 -->文件类型 -->新类型

  6. MEF 编程指南(六):导出和元数据

    声明导出解释了部件导出服务的基础知识和价值观(Values).有时候出于种种原因,导出关联信息是非常必要的.通常,用于解释关于功能公共契约的具体实现.允许导入满足约束要求的导出,或者导入所有可用的实现 ...

  7. 如何将mysql表结构导出成Excel格式的(并带备注)

    http://www.liangchan.net/liangchan/4561.html 1.使用一个mysql管理工具:SQLyog,点击菜单栏“数据库”下拉的最后一项: 导出的格式如下: 2.要想 ...

  8. Codeforces Gym 100286G Giant Screen 水题

    Problem G.Giant ScreenTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/con ...

  9. delphi TToolBar

    工具栏  的属性 xe4的事件 Customizable OnCustomizeCanDelete OnCustomizeCanInsert OnCustomized OnCustomizeAdded ...

  10. api.connectionType 判断当前网络技术经验

    使用  api.connectionType 判断当前网络的时候,需要注意,要加入大小写转换,三星返回的网络是大写 3G /** * 返回当前是否联网 * 周枫 * 3g 4g wifi none * ...