一.问题来源

  制作导航栏,参考别人的代码,发现的。

二.解析

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中.和#区别的更多相关文章

  1. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  2. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  3. CSS中的class与id区别及用法

    转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...

  4. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  5. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  6. css中px,em和rem的区别

    css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...

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

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

  8. 彻底弄懂css中单位px和em,rem的区别 转的自己看

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

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

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

随机推荐

  1. AngularJS测试二 jasmine测试路由 控制器 过滤器 事件 服务

    测试应用 1.测试路由 我们需要检测路由是否在运作,是否找到了,或者是404了.我们要确认路由事件触发了,预期的模板是否真的加载了.既然路由会改变页面的地址(URL)和页面内容,我们需要检测路由是否被 ...

  2. 获取contenteditable的内容 对html进行处理 兼容 chrome、IE、Firefox

    var html = $(this).html();if(html){ var lineSign = html.indexOf('<div>'); if(html.indexOf('< ...

  3. dubbo源码分析三:consumer注册及生成代理对象

    本章我们将分析一下consumer向注册中心注册,并获取服务端相应的信息,根据这些信息生产代理对象的过程和源码. 1.类图 上图展示了部分消费者注册及生成代理对象过程中需要使用到的类和接口,其中: s ...

  4. 【protobuf进阶】读取proto实体里的extensionObject对象的方法

    //设置扩展对象 ProtoBuf.Extensible.AppendValue //读取扩展对象 ProtoBuf.Extensible.GetValue 最近通过C#的TcpClient调用jav ...

  5. sqlserver 查找某个字符在字符串中第N次出现的位置

    例如:查找'A,' 在'A,B,C,D,A,B,C,D,C,D,B,A,C,E,'中第二次出现的位置怎么实现,SQL 中有这样的函数吗? SQL code /* 方法很多,这里简单写一个 返回@fin ...

  6. 解决"the currently displayed page contains invalid values"

    原因是你的工程的根目录少了default.properties(有点项目工程这个文件名称是project.properties)这个文件,导致不能选择target:   解决办法: 在工程根目录下建立 ...

  7. cocos2d-x3.0 Physics新的物理引擎

    1.说明: 3.0以后将box2d和chipmunk这两个物理引擎进行了封装,使用起来很的便利 2.详细用法: 1.创建物理世界场景 auto scene = Scene::createWithPhy ...

  8. PHP安全编程:HTTP请求欺骗(转)

    一个比欺骗表单更高级和复杂的攻击方式是HTTP请求欺骗.这给了攻击者完全的控制权与灵活性,它进一步证明了不能盲目信任用户提交的任何数据. 为了演示这是如何进行的,请看下面位于http://exampl ...

  9. 用PHP迭代器来实现一个斐波纳契数列(转)

    斐波纳契数列通常做法是用递归实现,当然还有其它的方法.这里现学现卖,用PHP的迭代器来实现一个斐波纳契数列,几乎没有什么难度,只是把类里的next()方法重写了一次.注释已经写到代码中,也是相当好理解 ...

  10. Eclipse快捷键 10个最有用的快捷键(转)

    Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升.    ...