在样式表定义一个样式的时候，可以定义id也可以定义class。

1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."

2、id一个页面只可以使用一次；class可以多次引用。

3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；

4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时

css中的id和css的区别的更多相关文章

  1. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  2. css中使用id和class 的不同

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的样例中,全部拥有 center 类的 HTML 元素均为居中. 在以下的 HTML 代码中, ...

  3. 彻底弄懂css中单位px和em的区别(转)

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了e ...

  4. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  5. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  6. CSS中link和@import的使用区别

    我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML ...

  7. css中单位 px、em 的区别【转载】

    原文:http://www.admin10000.com/document/6267.html     在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了p ...

  8. Bootstrap.css 中请求googleapis.com/css?family 备忘录

    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...

  9. css中的单位和css中的颜色表示方法

    css中颜色的表示方式: 图片来源http://www.w3school.com.cn

随机推荐

  1. C#不同窗体间通信,数据传递

    在一个项目中,很多时候都需要在窗体间进行数据传递和通信,最觉见的是父子窗体之间的数据传递,比如登录ID,各个窗体都需要知道.有很多文章都写了这方面的问题,提出很多优秀的方法,鄙人不才,搜了一些资料之后 ...

  2. Eclipse下配置tomcat且使用eclipse开启debug模式，集成JAD反编译插件

    Eclipse运行Tomcat的2种方式 eclipse启动Tomcat服务输入http://localhost:8080/报404解决方法 Eclipse 中Tomcat 启动 与直接启动Tomca ...

  3. pandas 数据索引与选取

    我们对 DataFrame 进行选择,大抵从这三个层次考虑:行列.区域.单元格.其对应使用的方法如下:一. 行,列 --> df[]二. 区域   --> df.loc[], df.ilo ...

  4. Gradle tip #1: tasks

    With this post I would like to start series of Gradle-related topics I wish I knew when I first star ...

  5. [CareerCup] 1.4 Replace Spaces 替换空格

    1.4 Write a method to replace all spaces in a string with '%20'. You may assume that the string has ...

  6. Github克隆别人的库

    一. 首先在网站上进入别人的库(通过别人提供的链接或者自己在页面上查询),然后在右下方选择SSH,将链接复制下来. 二. 在你的电脑上新建一个与人家库名相同的文件夹,然后在文件夹上右击,在弹出菜单上选 ...

  7. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...

  8. Opencv step by step - 图像融合

    两个图像的融合就是像素的融合了,其实手动操作即可,用函数操作更方便了. 下面代码的作用是融合阿狸和doctor,很和谐有木有! #include <cv.h> #include <h ...

  9. zoeDylan.ImgChange 图片切换插件

    墨芈深夜发布插件——图片切换 附上下载地址:http://pan.baidu.com/s/17kKF3共享天地/[墨芈 插件]zoeDylan Plugins Code JS (function ($ ...

  10. WPF开发时光之痕日记本

       很久没有写东西了,新的一年新的开始吧. 很早就想自己开发一款日记本软件不仅自己使用,也可以让大家免费使用,最主要的是对自己有一个认可,自学WPF以来,感觉不很顺利,WPF的资料相对来说有点少,主 ...