小程序开发

前端高手也不能错过的css常识

posttime:2017-06-21 19:37

1、不要实用过小的图片做背景平铺。举例宽高都是1px的图片用做背景平铺太耗费资源。1px 背景图。拼一个200*200像素的区域需要渲染40000次。耗费可不是一点半点

2、无边框。推荐的写法是 border:none。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。不过有个特点border:0  占用空间比border:none 少三个字节。input 设置border:none;的时候,在标准浏览器下显示无边框。但是在IE下是默认是input自带的边框需要设置border:0;这样就可以了

3、慎用 * 通配符。所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。 

4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。
5、样式放头上,脚本放脚下。不内嵌,只外链。 行内样式不推荐
6、坚决不用 CSS 表达式,耗费浏览器资源
7、使用 引用样式表,而不是通过 @import 导入。 (这样导致页面加载完毕,css 还么加载完)
8、一般来说,PNG 比 GIF 要小,小得多。再者,GIF 中有多少颜色是被浪费的,很值得优化。 (个别gif 甚至比png还小,优化需自己权衡)
9、千万不要在 HTML 中缩放图片,一者不好看,二者占资源。 (手机网站除外)
10、正文字体最好用偶数,12px、14px、16px,效果非常好。特例,15px。 
11、block、ul、ol 等上下留出至少一倍行距,左侧至少两倍行距,右侧随意。 
12、段落之间,至少要有一倍行距。 
13、强行指定某些元素的 line-height,正文 1.6 倍于文字大小,标题 1.3 倍。 
14、中文标点用全角。英文夹杂在中文中,左右空格,半角。 
15、中文字体的粗体和斜体,远离较好,利民利己。


上一篇:引用外部CSS的link和import方式的分析与比较
下一篇:CSS reset & 闭合div 适用于HTML5

您的疑惑,我们来解答

8年来我们为上百家企业提供了网站建设服务

感受专业服务,从来电咨询开始
010-6975976518611391767
在线咨询
X