您的位置:首页 > Web前端 > css > 正文

CSS样式优化

更多 时间:2014-4-13 类别:Web前端 浏览量:591

CSS样式优化

CSS样式优化

一、css代码优化作用与意义


1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少,便于日后维护
3、让自己写的css代码更加专业。

 

二、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代码

 

2.避免使用Hack

Hack是一个糟糕的东西,它会为不同浏览器定义一样的代码,使得CSS繁冗。现在我们知道使用条件性注释来代替hack,他们在IE6和IE7中是被认可的,甚至IE团队也推荐这样使用。使用条件性注释服务于符合浏览器特性专用的CSS代码,因此,更小的、核心的CSS代码用来服务于遵从标准的浏览器,只有需求条件出现的时候(比如IE),才会去下载额外的CSS文件!

 

3、CSS重用优化
 

这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,如下:


.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}


他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同(你可能需要了解CSS居中),我们就可以提取他们相同属性


优化后:


.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }

 

 

  • 4. 把 Stylesheets 放在 HTML 页面头部
  •  
  • 浏览器在所有的 stylesheets 加载完成之后,才会开始渲染整个页面,在此之前,浏览器不会渲染页面里的任何内容,页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部,页面渲染就不仅仅是在等待 stylesheet 的加载,还要等待 html 内容加载完成,这样一来,用户看到页面的时间会更晚。
  •  
  •  
  •  
  • 5. 避免使用 CSS Expressions
  •  
  • Background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )
  • Expression 只有 IE 支持,而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行,页面滚动 (scroll) 时也会执行,甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道,expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。
  •  
  •  
  • 6. 避免使用 Filter
  •  
  • IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器,停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素(使用到该 filter 样式)渲染时都会被浏览器分析一次,而不是像一般的背景图片渲染模式:使用过该背景图片的所有元素都是被浏览器一次性渲染的。针对这种情况,最好的解决办法就是使用 PNG8。
  •  
  •  
  •  
  • 7、尽可能少的使用css images

    能通过代码或字符实现的,就不用图片去解决。比如“可能感兴趣的人”展开气泡上下三角、返回顶部的箭头、“更多”后面的»符号等。既减小CSS图片请求,又不会面临若干套皮肤升级困难的问题,仅通过对CSS的color、backgroud等属性的控制,就可以换色了。

     

    8、尽量使用CSS3等新技术

    尽量使用CSS3实现功能,即非图片类的元素效果图,如圆角、阴影、渐变、半透等效果,可以通过样式控制,而无需切图的元素,在得到设计师认可后,不用图片,只做样式控制。满足高级浏览器的视觉,IE系列不能显示的,有原则的放弃。不仅为速度助力,还在放弃低级浏览器的大方向前进一步。

  •  

     

    三、十句CSS学习顺口溜

     

  • 1、IE边框若显若无,须注意,定是高度设置已忘记;

    2、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;

    3、三像素文本慢移不必慌,高度设置帮你忙;

    4、兼容各个浏览须注意,默认设置行高可能是杀手;

    5、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;

    6、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。

    7、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。

    8、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。

    9、IE浮动双边距,请用display:inline拘。

    10、列表横向排版,列表代码须紧靠,空隙自消须铭记。

  •