新型SEO思维就是从一个全新的层次上提升seo优化的水平,达到网络信息最佳化的展示效果!
马海祥博客 > 网站制作 > css教程 > CSS样式表文件的优化方法及技巧

CSS样式表文件的优化方法及技巧

时间:2016-10-27   文章来源:马海祥博客   访问次数:

今天,整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS,使得代码过于臃肿。

CSS样式表文件的优化方法及技巧-马海祥博客

CSS代码优化的最大好处就是能够显着减少CSS文件的大小,其实还有很多其他益处,臃肿而杂乱的CSS样式表会使你遇到问题是难以调试,尤其是当一个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。

不过没关系,看过本文之后,你一能能掌握CSS代码优化的技巧,今后让你的每一个CSS样式表都看起来整洁而简短吧。

一、使用CSS缩写

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读(具体可查看马海祥博客《CSS常用代码使用技巧大全》的相关介绍)。

CSS缩写的主要规则如下:

1、颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:

#000000可以缩写为#000;

#336699可以缩写为#369;

2、盒尺寸

通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1;

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3

property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:

margin:1em 0 2em 0.5em;

3、边框(border)

边框的属性如下:

border-width:1px;
border-style:solid;
border-color:#000;

可以缩写为一句:border:1px solid #000;

语法是border:width style color;

4、背景(Backgrounds)

背景的属性如下:

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

5、字体(fonts)

字体的属性如下:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

6、列表(lists)

取消默认的圆点和序号可以这样写list-style:none;

list的属性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

可以缩写为一句:list-style:square inside url(image.gif);

二、明确定义单位,除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px;width:100em。

只有两个例外情况可以不定义单位:行高和0值。

除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。

三、区分大小写

当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的,为了避免这种错误,马海祥建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的(具体可查看马海祥博客《看看那些能提高效率却容易被人忽略的CSS细节》的相关介绍)。

四、取消class和id前的元素限定

当你写给一个元素定义CSS中class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,class可以在页面中多次使用,你限定某个元素毫无意义。例如:

ExampleSourceCode
div#content{/*declarations*/}
fieldset.details{/*declarations*/}

可以写成:

ExampleSourceCode
#content{/*declarations*/}
.details{/*declarations*/}

这样可以节省一些字节。

五、默认值

CSS中通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在CSS样式表一开始就先定义所有元素的margin和padding值都为0,像以下这样:

ExampleSourceCode
*{
margin:0;
padding:0;
}

六、利用CSS继承

如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式,这样你可以很好的维护你的代码,并且还可以减少代码量。

那么,本来这样的代码:

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

可以写成:

#container{font-family:Georgia,serif; }

七、使用多重选择器

你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如:

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

八、使用外部样式表

这个原则始终是一个很好的设计实践,不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。

内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。

九、提升CSS性能的规则

1、修复解析错误。

2、避免使用多类选择符。IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确。

3、移除空的css规则。这个规则不包含任何属性,类似:.foo { }空规则的产生原因一般来说是为了预留样式,去除这些空规则无疑能减少css文档体积(具体可查看马海祥博客《网站CSS代码优化的7个原则》的相关介绍)。

4、正确使用display的属性。由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。

CSS会检查一下几点:

display:inline后不应该再使用width、height、margin、padding以及float。

display:inline-block后不应该再使用float。

display:block后不应该再使用vertical-align。

display:table-*后不应该再使用margin或者float。

5、不滥用浮动。虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。CSS一旦检测出样式文件中有超过10次的浮动便会提示警告。

6、不滥用web字体。对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

7、不声明过多的font-size。这是设计层面的问题,设计精良的页面不会有过多的font-size声明。

8、不在选择符中使用ID标识符。主要考虑到样式重用性以及与页面的耦合性。

9、不给h1~h6元素定义过多的样式。全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。

10、不重复定义h1~h6元素。

11、值为0时不需要任何单位。

12、标准化各种浏览器前缀。通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:

.foo {-moz-border-radius: 5px;border-radius: 5px; }

13、使用CSS渐变等高级特性,需指定所有浏览器的前缀。

14、避免让选择符看起来像正则表达式。CSS3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,需谨慎使用。

15、遵守盒模型规则。

马海祥博客点评:

合理的CSS样式表不仅仅会节省后期的维护成本,也会对加载性能等方面产生影响。另外,你还要考虑对CSS进行压缩,除去注释和空格,以使得网页加载得更快。

本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/css/1683.html,注明出处;否则,禁止转载;谢谢配合!

相关热词搜索: css css优化

上一篇:利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
下一篇:CSS样式表中px、em和rem单位的区别与使用特点

今日话题更多>

SEO研究院 更多 >>