CSS中.和#区别
一.问题来源
制作导航栏,参考别人的代码,发现的。
二.解析
2.1 概述
id:用来定义页面中大的样式,如栏目划分,顶部,正文,底部等;用#top的形式来定义;
class:用来定义一些比较细节的样式,如具体的一个菜单,一行文字等,用.text的形式来定义。
定义HTML中的标签,如ul,img,p等时,直接写:img{}。
2.2 区别
#main和.main有什么区别:#main 定义的是ID为"main"这个元素的样式,.main 的意思是新建一个名为"main"的样式
#main 只能定义ID为"main"这个元素的样式。.main 一但定义以后,可以让其他的元素来调用,方法为class="main",用#定义CSS样式,在调用时必须用ID,用.定义CSS样式,在调用时必须用CLASS。用#定义的样式,一般都是定义结构框架,一些大的容器,且在同一个页面只能出现一次;而且.定义的样式,一般都是起修饰作用或多次重复的样式。还一点就是在同一
个层里同时出现ID和CLASS样式,ID更优先于CLASS。
一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class="Gandalf", class="Aragorn"来区分不同的故事线。还有一点非常重要的是
你可以在一个文档中使用任意次数的Class。
至于 ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
2.3 注意
class可以在页面里面重复使用,id由于在页面里面只能出现一次,所以不能重复使用,所以尽量用class来写,这样能在页面里面重复引用你写的css,减小工作量和代码量。
这种情况尽量用id:页面大的模块里面,用id来区分不同的模块。比如页面里面有这样的模块:最新新闻,推荐新闻等。就可以考虑用id来区分。
还有一点,由于id是页面中唯一的,更多的是定义来留给给页面里面的 javascript用。
参考51CTO,链接忘了。
CSS中.和#区别的更多相关文章
- css中单位px、pt、em和rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- CSS中的class与id区别及用法
转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...
- CSS中单位px和em,rem的区别
PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
- css中px,em和rem的区别
css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- 彻底弄懂css中单位px和em的区别(转)
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了e ...
随机推荐
- 电商H5制作常使用的排版方式
在很多电商网站或者APP中,经常会出现一些精美夺目的活动宣传海报,吸引着用户点击.购买.如今,电商们可以把海报搬到微信中,做出面向用户群大.传播快的H5制作.那么,制作电商H5制作时可以使用哪三种排版 ...
- windows form (窗体) 之间传值小结
windows form (窗体) 之间传值小结 windows form (窗体) 之间传值小结 在windows form之间传值,我总结了有四个方法:全局变量.属性.窗体构造函数和deleg ...
- 软件设计模式 B卷
软件设计模式 试 卷(作业考核 线上) B 卷 学习中心: 院校学号: 姓名 (共 页 ...
- msyql 字节问题
MySQL 数据库的varchar类型在4.1以下的版本中的最大长度限制为255,其数据范围可以是0~255或1~255(根据不同版本数据库来定).在 MySQL5.0以上的版本中,varchar数据 ...
- 解决拼团首页swiper组件手动轮播卡顿问题
解决 swiper lag , 可能是渲染背景backface-visibility后导致卡顿吧! //以下代码添加到.swiper-wrapper中 -webkit-perspective: 300 ...
- C++重载解析
重载解析(overloading resolution)的规则决定了编译器为一个函数调用选用哪个函数定义.一般过程如下: 将名称相同的函数/模板函数找到并创建候选列表 从中挑选参数数目正确,符合完全匹 ...
- HDU 4622 多校第三场1002 后缀自动机
比赛的时候我是用后缀数组的,但是T了. 赛后看了解题报告说,后缀数组貌似是卡你常数的时间,我算了下复杂度O(T * Q * n).这是10 ^ 8,但是考虑到每次询问的时候都要重新构造字符,所以那个n ...
- HDOJ 5073 Galaxy 数学 贪心
贪心: 保存连续的n-k个数,求最小的一段方差... .预处理O1算期望. .. Galaxy Time Limit: 2000/1000 MS (Java/Others) Memory Lim ...
- YYModel 源码历险记 代码结构
前言 因为公司需要开发一个内部使用的字典转模型的项目,所以最近也是在看关于字典转模型的内容.有Mantle,jsonModel,MJExtension等众多框架,最后还是选择了先从YYModel源码读 ...
- 使用python求字符串或文件的MD5
使用python求字符串或文件的MD5 五月 21st, 2008 #以下可在python3000运行. #字符串md5,用你的字符串代替'字符串'中的内容. import hashlib md5=h ...