整理及优化CSS代码的七个原则[译]
作者:暴风彬彬 来源:彬Go 发布时间:2009-04-23 12:35:00
英文原文:http://www.smashingmagazine.com/2008/08/18/
译文原文:http://blog.bingo929.com/7-principles-optimized-css.html
作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML、CSS、Javacript、Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞速发展,很多设计师已经不再考虑这条30KB的理想准则。随着越来越受欢迎的CSS布局和Javascript对网站用户体验的强化,使得这种现象越来越普遍,尤其是对于大型网站来说,仅仅一个CSS文件就已经超过了30KB的上限。
但是即便如此,现在也有很多准则来帮助你在完成CSS布局后进行CSS代码的压缩和优化。CSS代码优化的目的并不仅仅是减少CSS文件的大小,它还能让你的CSS代码更有条理、更高效。在彬Go,你将会学到更多关于CSS代码优化的知识,这能帮你更熟悉CSS代码的规范性。熟悉这些概念还能让你成为更全面的网页设计师,从而写出更优化的CSS代码。
您还可以参阅暴风彬彬曾经讲解过的《10个CSS简写技巧让你永远受用》。
1.使用简写
如果你现在还对简写一点都不了解,那你就又写落伍了,不过幸好,学起来并不是很难。使用简写是一种让代码减少的最简单方法。没有比现在更适合实践代码简写的时候了,还等什么,一起来看看吧。
Margin、border、padding、background、font、list-style和outline 都是可以进行简写的属性。CSS简写就是不再使用不同的相类似属性的声明…
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
你可以把它们简写成这样:
p { margin: 10px 20px 30px 40px; }
浏览器可以通过不同数量的属性值来解释你定义的CSS代码,请看图解:
上面的简写图解说明的是依据不同的属性值可以进行不同的缩写,这种方法同样适用于padding和Border-width属性。
Font的简写对于缩小代码量很有帮助,而且能让你少打很多字母; )
Font简写的例子。注:如果没有定义某个属性值的话,将继承副级元素的定义或使用默认值。
如果你对以上简写方法已经了如指掌,你还可以看看以下两个简写教程(英文),也许会对你有所帮助:
CSS Shorthand Guide(CSS简写指导)
Efficient CSS with shorthand properties(高效CSS属性的简写)
猜你喜欢
- 奥运来了,三大门户网站都加上了奥运主题。加上下面代码你的网站也拥有奥运主题了:<style type="text/
- 很早前就遇到这个空值的属性,它既出现在 html 文档中,也出现在 xml 中,一直都回避,放之任之,反正也不影响文档的正确性。隐隐约约过了
- 先看看单条 SQL 语句的分页 SQL 吧。 方法1: 适用于 SQL Server 2000/2005 代码如下:SELECT TOP 页
- 【先锋缓存类】Ver2004作者:孙立宇、apollosun、ezhonghua官方网站:http://www.lkstar.com 技术支
- 怎么样才能设计出漂亮的网页?怎么样才能做好网页设计工作,现在许多人还停留在网页制作的水平上,认为只要用好了网页制作软件,就能搞好网页设计了,
- 大家都知道索引对于数据访问的性能有非常关键的作用,都知道索引可以提高数据访问效率。为什么索引能提高数据访问性能?他会不会有“副作用”?是不是
- 有感于中国互联网设计界十几年的变化,从网页设计师变身界面设计师,和近一两年来兴起的转型交互设计师。大多数都是随着一个行业的兴起而前赴后继的投
- 从大的发展来看,网站就是一块试验田,一块在错误中成长、在错误中变强变大的试验田。这决定了互联网产品的成长路线,一定是一个反复修正和迭代的曲线
- LCase:转成小写 UCase:转成大写 下面是ASP中的代码,可以直接演示效果的。 代码如下:<% dim s
- <% pagenum=55'指定打印行数 %> <HTML> <HEAD> <
- 在SQL查询中,关键词Like可提供模糊查询功能,它通常与通配符一起使用。1 Like条件适用数据库字段类型 &nbs
- CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技
- 简介模板方法模式,是行为型的设计模式。定义一个操作中的算法的骨架,而将一些步骤延迟到子类当中,使得子类可以不改变一个算法的结构即可重新定义该
- 去过新浪或者搜狐吗?虽然我们都不愿意看广告,但是它们做广告的技术我们却应该学到手,这不,又一种很流行的做法儿,做成那种两边对称的对联式的广告
- Microsoft office Access Database Engine 错误 '80040e14' Insert I
- 黑体是视觉设计师常用的一款字体,特别是针对广告的 Banner 等。根据 * 的相关介绍,有关黑体的定义可以认为:黑體与白体
- 从概念上讲,大多数关系数据库系统都是类似的:它们都由一组数据库组成,且每个数据库都包含一组表。但是,所有的系统都有自己的管理数据的方法, M
- Blog的全名应该是Web log,中文意思是“网络日志”,后来缩写为Blog,而博客(Blogger)就是写Blog的人。从理解上讲,博客
- SQL Server 6.5作为面向中小型企业的网络数据库服务系统,提供了 与众多高级数据库管理器相同的运行性能,向传统的数据库厂商发起了强
- 不加(0)的用法:set rs=conn.execute(sql)'将这个结果赋给rs这时要读取这个记录集第一个字段的数据就用rs(