CSS样式表文件的优化方法及技巧
今天,整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Dreamweaver这种所见即所得软件来编写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,注明出处;否则,禁止转载;谢谢配合!上一篇:利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
下一篇:CSS样式表中px、em和rem单位的区别与使用特点
您可能还会对以下这些文章感兴趣!
-
网站CSS代码优化的7个原则
整理和优化代码不仅是为了你的CSS文件大小,还包括了维护性和可读性,以上的原理并不只是针对CSS,它们还能应用到HTML,Javascript以及其他编程语言,CSS文件不只是为了呈现给你网站的最终用户,上面的原理可以帮助用户体验以及开发者经验,运用这些原则到你未来的项目……【查看全文】
-
如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢?有些朋友会发现,如果一行内容中有图片有文字……【查看全文】
-
CSS样式表文件的优化方法及技巧
今天,整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS,使得代码过于臃肿。CSS代码优化的最大好处就是能够显着减少CSS文件的大小,其实还有很多其他益处,臃肿而杂乱的CSS样式表会使你遇到问题是难以调试……【查看全文】
-
如何命名CSS文件及样式规范更利于SEO优化
一名专业的SEO(搜索引擎优化)有很多工作要做,其中对代码的优化是一个很关键的步骤,为了更加符合SEO优化的规范,我们就需要按照CSS+DIV的命名规则来建设我们的网站,当然这些CSS文件不用一次性全部新建出来,只需要制作到那个页面的时候再建立即可,但是在初步规划的……【查看全文】
-
清除CSS浮动的方法原理及优缺点评定
今天看到有个博友问如何清除网站页面的CSS浮动?因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及width height属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。 其实解决浮动引起的问题有多种方法,……【查看全文】
-
常见的一些CSS基础知识题
CSS指层叠样式表(Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中,外部样式表通常存储在 CSS 文件……【查看全文】
-
CSS常用代码使用技巧大全
这几天,一直忙于帮公司做新的网站,在设计和修改新模板页面的过程中,需要不停的调试CSS样式,有的部分还需要重新来写。为了便于以后再次使用,我特意将在网页制作过程中常使用的CSS代码的使用技巧整理成文章的形式,在马海祥博客上跟大家分享一下,一是便于以后自己在……【查看全文】
-
CSS无图片技术的实现方法有哪些?
什么是CSS无图片技术?CSS无图片技术就是在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术。如果我们尽可能的使用无图片技术来实现,明显可以提高页面的加载速度……【查看全文】
-
利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体、颜色、背景、图片等的控制,使网页能够完全依照设计者的想法来显示。CSS可以控制网页的显示,HTML标签中的属性也可以控制其显示,为什么还要有CSS呢?其中一个原因就是:……【查看全文】
-
background-position的使用方法及详细介绍
background属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-color、background-image、background-repeat、background-position、background-size……【查看全文】
分类目录
热点推荐
互联网更多>>
- 盘点2010年代这10年的重大网络安全事件 二十一世纪的第2个十年即将过去,在过去十年里有很多的重大网络安全事件发生,我们见证了过去十年,大量的数据……
- 基于高斯模糊原理的模糊图片的研究 高斯模糊(Gaussian Blur)的原理中,它是根据高斯曲线调节象素色值,它是有选择地模糊图像。说得直白一点,就是高……
- 互联网思维的一些特征 如今,互联网迅猛发展已经渗透人们生活各个方面,尤其是互联网正加快向传统行业渗透和融合,对传统行业提出严……
SEO优化 更多>>
-
百度冰桶算法5.0:保障移动搜索用户
为了提升移动搜索落地页体验,营造优质的移动…… -
SEO是什么?
对于刚入SEO行业的新人来说,要想做好网站的s…… -
百度搜索将推出飓风算法2.0:严厉打
为了营造良好的搜索内容生态,保护搜索用户的…… -
史上最全的网站SEO策略方案
在搜索引擎优化中,一个网站的SEO策略能最终影…… -
今年网站SEO优化要注意的6大策略
通俗的来说,SEO技术就是一种达到SEO效果所采用…… -
如何使用留言评论进行推广引流
随着新媒体的快速发展,留言评论变得随处可见…… -
网站收录量对于网站排名的影响作用
很多做SEO的朋友都会问,是不是网站收录越多网…… -
移动端手机站做站内优化的要点
随着移动流量的与日俱增,移动搜索引擎的功能……