仓酷云
标题:
DIV教程之在Mozilla UI中优化CSS文件的划定规矩
[打印本页]
作者:
山那边是海
时间:
2015-1-15 23:20
标题:
DIV教程之在Mozilla UI中优化CSS文件的划定规矩
每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。
破洛洛文章简介：在MozillaUI中誊写高效力CSS.
原文地点：WritingEfficientCSSforuseintheMozillaUI
以下文档形貌了使用在MozillaUI中优化CSS文件的划定规矩。第一部分是关于Mozilla款式体系分类划定规矩的一样平常性会商。在懂得这个体系的基本上，后续部分包括了一些指南，誊写能够使用这个款式体系理论长处的款式的指南。
款式体系怎样分类划定规矩
款式体系把划定规矩分为四年夜类。了解这些类是很主要的，由于关于划定规矩的婚配来讲他们是起首要思索的。以后的段落中会利用“主选择符”这个说法。主选择符是指选择符最右侧的部分(终极要婚配的谁人元素，而不是它的先人元素)。比方，在以下划定规矩中：
aimg,div>p,h1+[title]{}
主选择符是“img”,“p”,和“[title]“。
ID划定规矩
ID选择符作为主选择符的划定规矩。
比方：
button#backButton{}/*ID种别的划定规矩*/
#urlBar[type="autocomplete"]{}/*ID种别的划定规矩*/
treeitem>treerow>treecell#myCell:active{}/*ID种别的划定规矩*/
Class划定规矩
假如一条划定规矩有一个指定的class作为主选择符，就被回进此类。
比方：
button.toolbarButton{}/*基于class的划定规矩*/
.fancyText{}/*基于class的划定规矩*/
menuitem>.menu-left[checked="true"]{}/*基于class的划定规矩*/
Tag划定规矩
假如主选择符不是ID大概class，那末下一个类极可能就是tag分类。假如一条划定规矩指定tag为主选择符，就被回进此类。
比方：
td{}/*基于tag的划定规矩*/
treeitem>treerow{}/*基于tag的划定规矩*/
input[type="checkbox"]{}/*基于tag的划定规矩*/
全局划定规矩
除以上分类以外都回进此类。
比方：
[hidden="true"]{}/*全局划定规矩*/
*{}/*全局划定规矩*/
tree>[collapsed="true"]{}/*全局划定规矩*/
款式体系怎样婚配划定规矩
款式体系从最右侧的选择符入手下手向左边挪动来婚配一条划定规矩。款式体系会一向向左婚配选择符直到划定规矩婚配终了大概因为堕落中断婚配。
关于划定规矩分类的第一步产生在主选择符种别基本上。这个分类的目标是把那些不必要华侈工夫婚配的划定规矩过滤出来。这是明显提拔功能的重点。关于一个给定的必要婚配的元素，划定规矩越少，款式的衬着越快。比方，元素有一个ID，那末只要和元素ID婚配的ID划定规矩会被检索。只要和元素的class婚配的class划定规矩会被检索。只要和tag婚配的tag划定规矩会被检索。全局划定规矩老是会被检索。
高效CSS指南
制止全局划定规矩
确保划定规矩不以全局分类停止
不要给ID分类划定规矩指定标署名大概class
假如有一条款式划定规矩是以ID选择符为主选择符的，就别再多此一举的加上标署名了。ID都是独一的，因而加上标署名反而会无谓地拖慢婚配历程。(当有分歧元素利用统一类名，而又必要静态地改动个中一个元素的类名来针对分歧情形使用分歧款式时是个破例。)
BAD–button#backButton{}
BAD–.menu-left#newMenuIcon{}
GOOD–#backButton{}
GOOD–#newMenuIcon{}
不要给class分类划定规矩指定标署名
和以上划定规矩相似，一切的类名也是独一的。标签和类名联缀的写法是一个常规(可是，假如计划的变动使得必要改动标签就会有天真性的成绩，由于也必要改动class—最好选器具有严厉语义的名字，这类天真性也是分别款式表的方针之一)。
BAD–treecell.indented{}
GOOD–.treecell-indented{}
BEST–.hierarchy-deep{}
只管把划定规矩使用到最明白的类上。
拖慢体系最年夜的一个缘故原由是有太多的tag分类划定规矩了。经由过程给元素增添类名，能够把这些tag类里的划定规矩分一部分往class分类，就能够不必要华侈工夫来试图给一个标签婚配那末多的的划定规矩了。
BAD–treeitem[mailfolder="true"]>treerow>treecell{}
GOOD–.treecell-mailfolder{}
制止儿女选择符
CSS中，儿女选择符(descendant)[注1]的耗能高的可骇，特别是选择符的划定规矩是在tag大概全局分类中。子选择符(childselector)则常常是真正所需。假如没有主题模块一切者的明白同意，UICSS中克制利用儿女选择符。
BAD–treeheadtreerowtreecell{}
BETTER,BUTSTILLBAD(seenextguideline)–treehead>treerow>treecell{}
Tag类划定规矩中最好不要包括儿女选择符
制止利用具有tag类划定规矩的儿女选择符。这会分明地增添婚配工夫（特别是这些划定规矩会被屡次婚配时）。
BAD–treehead>treerow>treecell{}
BEST–.treecell-header{}
当心子选择符的利用
要当心利用子代选择符。假如有其余体例能够不必，就不要用子选择符。特别是子选择符被大批利用在RDF树和相似的菜单中时。
BAD–treeitem[IsImapServer="true"]>treerow>.tree-folderpane-icon{}
要注重模版中来自RDF的属性是能够复制的！能够使用这一点把RDF属性复制到必要改动谁人属性的子元素上。
GOOD–.tree-folderpane-icon[IsImapServer="true"]{}
倚赖承继
懂得并利用那些能够承继的属性。XULwidgetry[注2]已明白设置了，因而能够把list-style-image大概font划定规矩使用到父级标签上，它将浸透进匿名内容。因而就不必要华侈工夫为那些匿名内容写划定规矩了。
BAD–#bookmarkMenuItem>.menu-left{list-style-image:url(blah);}
GOOD–#bookmarkMenuItem{list-style-image:url(blah);}
上例中，款式化匿名内容的需求（没有了解list-style-image能够承继）招致了一条class类划定规矩。实在这条划定规矩应当属于最明白的一类—ID类划定规矩。
要记着，特别是那些匿名内容，它们都有一样的class。下面谁人欠好的例子招致必要反省每一个菜单的图标是不是包括在bookmarks菜单项中。这长短常可骇的奋发损耗（有良多菜单）；除bookmarks菜单以外，这条划定规矩不该该被其他任何菜单想反省。
利用-moz-image-region
把一堆图片放到一个独自的图片文件中，并用-moz-image-region[注3]选中会有明显的功能提拔。()
注1:儿女选择符(descendantselector)子选择符(childselector)是有区分的。单从字面来说，儿女选择符，望文生义包含儿子、孙子、重孙子等一切儿女;子选择符只是指儿子，就不论那帮孙子了。
注2:XULwidgetry不分明是啥。
注3:貌似设法和如今说的CSSsprites办法差未几，要晓得这但是十年前(2000年)的文章啊。–糖伴西红柿
</p>
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
作者:
爱飞
时间:
2015-1-17 21:58
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
作者:
不帅
时间:
2015-1-21 12:20
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
作者:
admin
时间:
2015-1-30 18:08
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。
作者:
分手快乐
时间:
2015-2-6 14:50
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。
作者:
兰色精灵
时间:
2015-2-16 18:02
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.
作者:
因胸联盟
时间:
2015-3-5 08:38
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
作者:
变相怪杰
时间:
2015-3-12 03:05
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
作者:
再现理想
时间:
2015-3-19 18:18
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。
欢迎光临 仓酷云 (http://ckuyun.com/)
Powered by Discuz! X3.2