|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
目前我们的站就是div+CSS做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
CSS进修越深切,我们必要存眷的细节的地方就越多,明天我们经由过程11个注重点来进步CSS的网页衬着效力。
1、十六进制的色彩值对位数与巨细写
编写十六进制色彩值时你大概会用小写字母或省略成3位数,关于这写法没找到的确的数据证实对扫瞄器的衬着效力是不是有影响,但十六进制的色彩值默许尺度是年夜写及6位数标注。在未知情形下不但愿冒险而下降了衬着的效力。
*不同意-color:#f3a;
*倡议用-color:#FF33AA;
2、display与visibility的差别
他们用于设置或检索是不是显现工具。display埋没工具不保存物理空间,visibility为埋没工具保存占有的物理空间。当扫瞄器衬着被占有的物理空间时,会有所损耗资本。
*不同意-visibility:hidden;
*倡议用-display:none;
3、border:none;与border:0;的区分
和display与visibility的干系相似,分离不保存与保存空间。更多的是border:0;只管能够埋没失落边框,但它会为你保存border-color/border-style的利用权。
*不同意-border:0;
*倡议用-border:none;
4、不宜用太小的背景图片平展
一张宽高1px的背景图片,固然文件体积十分之小,但衬着宽高500px的板块必要反复平展2500次。进步背景图片衬着效力跟图片尺寸及体积有关,最年夜的图片文件体积坚持约70KB。
*不同意-宽高8px以下的平展背景图片
*倡议用-权衡适中体积及尺寸的背景图片
5、慎用IE滤镜
IE的滤镜除对照损耗资本外也有兼容性成绩。傍边有让PNG通明的滤镜,可接纳GIF或JPG似透非透的举措来制止利用此滤镜。倡议只在IE6使用GIF通明,由于IE7以上已撑持了PNG通明。
*不同意,滥用IE滤镜由于损耗资本外也有兼容性成绩。
*倡议用,最好选择别的办法能制止利用滤镜。
6、*{margin:0;padding:0;}制止扫瞄器款式差别
*号通配符把一切标签都初始化一遍,扫瞄器的衬着损耗必定的资本。有部分在标签在分歧扫瞄器上几近无差别,或是某些已不保举利用的标签(由于你不会往用它),它们不需通配符要从头初始化一遍如许做能节俭一点资本。
*不同意,利用*号通配符
*不同意,divspanbuttonbtable等标签归入通配符把持表里添补款式
*倡议用,有选择性地利用通配符把持表里添补款式。
7、不要增加分外的标签来形貌class或id
假如你有一个选择器是以id作为关头选择符,请不要增加过剩标署名上往。由于ID是独一的,你不要为了一个不存在的来由而下降了婚配的效力。
*不同意-button#backButton{}
*不同意-.menu-left#newMenuIcon{}
*倡议用-#backButton{}
*倡议用-#newMenuIcon{}
8、只管选择最特别的类来寄存选择器
下降体系效力的一个最年夜缘故原由是我们在标签类顶用了过量的选择符。经由过程增加class到元素,我们能够将种别举行再细分为class类,如许就不必为了一个标签华侈工夫往婚配过量的选择符了。
*不同意-treeitem[mailfolder="true"]>treerow>treecell{}
*倡议用-.treecell-mailfolder{}
9、制止子孙选择符
子孙选择符是CSS中最耗资本的选择符。他真的长短常的耗资本,特别是在选择器利用标签类或通用类的时分。良多情形中,我们真正想要的是子选择符。除非有明白申明,在UICSS中是严禁利用子孙选择符的。
*不同意-treeheadtreerowtreecell{}
*好一点,但仍是不可(参照下一条)-treehead>treerow>treecell{}
10、标签类中不要包括子选择符
不要在标签类中利用子选择符。不然,每次元素的呈现,城市分外地增添婚配工夫。(出格是中选择器仿佛多数会被婚配的情形下)
*不同意-treehead>treerow>treecell{}
*倡议用-.treecell-header{}
11、寄望一切子选择符的利用
当心地利用子选择符。假如你能想出一个的不利用他的办法,那末就不要利用。出格是在RDF树和菜单会频仍地利用子选择符,像如许。
*不同意-treeitem[IsImapServer="true"]>treerow>.tree-folderpane-icon{}
请记着RDF的属性是能够在模板中被复制的!使用这一点,我们能够复制那些想基于该属性改动的子XUL元素上的RDF属性。
*倡议用-.tree-folderpane-icon[IsImapServer="true"]{}
更好的控制页面布局。不用多说。 |
|