html css中id和class的区别比较
在定义样式的时候,有时候会将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的区别比较的更多相关文章
- html中id name class的区别(转)
HTML 中 id与name 区别 一个name可以同时对应多个控件,比如checkbox和radio 而id必须是全文档中唯一的 id的用途 1) id是HTML元素的Identity,主要是在客户 ...
- CSS中rem、em的区别
引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
- css中margin-left与left的区别
研究下拉菜单和弹出菜单时比较所得: 1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置 ...
- html元素中id和name的区别
可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Nam ...
- CSS中link与import的区别
一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...
- 外部引用CSS中 link与@import的区别
差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加 ...
- css中import与link用法区别
方式:引入CSS的方法有两种,一种是@import,一种是link @import url('地址');//注意,这种方式可以放在页面也可以放在css文件中<link href="地址 ...
- 在表单(input)中id和name的区别
但是name在以下用途是不能替代的: 1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.因为有许多name会同时对应多个控件,比如checkbox和radio,而id必须是 ...
随机推荐
- jquery easyui的异步tree
1.创建一个简单的tree 结果如图: <script> $(function(){ $('#tt').tree(){ url:'要提交的url地址', checkbox:true, li ...
- Mysql知识要点总结
1.安装 要点:记得更改字符集 2.数据类型 常用数据类型:INT VARCHAR BLOG 3.操作数据库 SHOW DATABASES; CREATE DATABASE 名称; DROP DATA ...
- Ehcache(03)——Ehcache中储存缓存的方式
http://haohaoxuexi.iteye.com/blog/2114769 Ehcache中储存缓存的方式 目录 1 堆内存(MemoryStore) 1.1 指定可用内存 1 ...
- myeclipse 10创建maven项目
创建maven项目,这里使用的不是myeclipse自带的maven插件.而是自己 又一次安装的插件,就不啰嗦了,直接上图吧 1.先是安装maven插件.将maven插件解压把它放进E:\xuan\M ...
- leetcode || 53、Maximum Subarray
problem: Find the contiguous subarray within an array (containing at least one number) which has the ...
- DB9 公头母头引脚定义及连接
1.实物及引脚简单介绍 在做开发的时候常常会用到串行接口,一般9针的串行接口居多.例如以下图所看到的: 公头母头用于连接线的採用上图封装.但用于开发板的时候採用90度弯角插针的封装.例如以下图: 各引 ...
- SAP BW 通过视图创建数据源(无单位)
因业务明细表中数量没有单位,所以BW创建数据源时,需做增强 数据表: ZDB_H(抬头) ZDB_I(明细) ECC 系统中: 1.创建视图ZVDBWQ,因明细表中数量没有单位,所以创建视图时不包括数 ...
- Ruby on Rails Tutorial 第三章 静态页面
1.生成静态页面 $ rails generate controller StaticPages home help #生成主页和帮助页面的路由.控制器及静态页面 $ rails destroy ...
- jq实现竞拍倒计时
1jq的效果代码 //全局变量用于存储当前时间 var nows; function rightZeroStr(v) { ) { " + v; } return v + "&quo ...
- Debian5.04安装oracle11g 笔记
新安装了Debian5,成功安装了oracle11g.记录过程如下. 1.升级一下系统 #apt-get update #apt-get upgrade 2.安装需要的一些组件: # ...