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 ...
随机推荐
- CCASS四种交收指令
CCASS 提供了4种类型的指令:ATI: Account Transfer Instruction 账户转移指令,用于本券商各个仓位上的转移STI: Stock Segregate Account ...
- 为什么使用spring Struts 等框架开发
转载自:http://www.cnblogs.com/sharpxiajun/p/3936268.html 今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入, ...
- CSRF——攻击与防御
CSRF——攻击与防御 author: lake2 0x01 什么是CSRF攻击 CSRF是Cross Site Request Forgery的缩写(也缩写为XSRF),直译过来就是跨站请求伪造的意 ...
- [AWS] Install the AWS cli
On Windows, just download the installer and install it. Configure: aws configure In your aws console ...
- Linux Top 命令解析 比较详细--转
TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中C ...
- 一行代码实现iOS序列化与反序列化(runtime)
一.变量声明 为便于下文讨论,提前创建父类Biology以及子类Person: Biology: @interface Biology : NSObject { NSInteger *_hairCou ...
- linux(centos)上配置nginx、mysql、php-fpm、redis开机启动<转>
原文 http://levi.cg.am/archives/2925 I.nginx开机启动 在/etc/init.d/目录下创建脚本 1 vi /etc/init.d/nginx 更改脚本权限 1 ...
- .net验证控件
一.客户端验证(用户体验,减少服务器端压力) 二.服务器端验证(防止恶意攻击,客户端js很容易被绕过) 验证控件:RequiredFieldValidator:字段必填:RangeValidator: ...
- JavaScript回调函数的理解
这里是个人对回调函数的一段理解 <!DOCTYPE html> <html> <head> <title>回调函数</title> < ...
- ASP.NET菜鸟之路之Response小例子
背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. Response.Write Redirect ...