在定义样式的时候,有时候会将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. [iOS基础控件 - 6.12.1] QQ菜单管理 UITabBarController 控制器管理

    A.需求 1.类似QQ.微信顶部或者底部的窗口转换导航条 2.给每个页面添加相应内容   B.UITabBarController 1.基本概念: (1)内容高度 iOS7之前内容高度为:屏幕高度 - ...

  2. CodeForces 589B Layer Cake (暴力)

    题意:给定 n 个矩形是a*b的,问你把每一块都分成一样的,然后全放一块,高度都是1,体积最大是多少. 析:这个题,当时并没有完全读懂题意,而且也不怎么会做,没想到就是一个暴力,先排序,先从大的开始选 ...

  3. Linux设置禁止用户登陆

    Linux设置禁止用户登陆 vim /etc/shadow 第二栏(密码栏)设为*,会丢失密码 usermod -L username # -L Lock; -U Unlock chsh userna ...

  4. linx目录结构

    linux中的命令一般存放在/bin目录下的: 以下为linux下的基本目录结构和作用: /根目录./boot引导程序,内核等存放的目录./sbin超级用户可以使用的命令的存放目录./bin普通用户可 ...

  5. Unity3D - 关于Dynamic和Static

    含有Collider和RigidBody的GameObject, Unity视之为Dynamic 含有Collider的GameObject, Unity视之为Static 如果Static的物体发生 ...

  6. ADO.NET 快速入门(十五):ADO 应用转换为 ADO.NET

    这是一个已经移植到 .NET 的 ADO 应用的例子.也演示了单向.只读.快速 DataReader 的使用.它演示如何使用 DataView 类从 DataSet 获取一个 Table 和 操作一个 ...

  7. SqlServer更新视图存储过程函数脚本

    --视图.存储过程.函数名称 DECLARE @NAME NVARCHAR(255); --局部游标 DECLARE @CUR CURSOR --自动修改未上状态为旷课 SET @CUR=CURSOR ...

  8. Ectouch修改虚拟销售数量的方法

    1.参考:http://zhidao.baidu.com/link?url=5OEkRlKqtRcmnO6iyW2pq-gw1aj-1S6QdImmBkQZHHt6tcvT50aIf_1nibP3T6 ...

  9. Eclipse下如何导入jar包【转载】

    我们在用Eclipse开发程序的时候,经常想要用到第三方的jar包.这时候我们就需要在相应的工程下面导入这个jar包.以下配图说明导入jar包的步骤. 1.右击工程的根目录,点击Properties进 ...

  10. POJ 3281 Dining 网络流最大流

    B - DiningTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.ac ...