Total Pageviews

Saturday, 5 January 2013

CSS的简写规则和一些简单的CSS优化技巧

最下面的两个CSS技巧可以重点了解一下,也许可以给你带来一些意想不到的收获。

    颜色缩写  
    我们可以将#ff0099缩写成#f09,#ffffff,  
    缩写成#fff。(小技巧,用记事本等工具的替换功能,可直接输入#ff0099将CSS文件内全部替换成#f09)  
     
    使用 line-height 垂直居中  
    例如:line-height:22px;  
    固定宽度的容器需要一行垂直居中时,使用 line-height 即可。  
     
    背景(background)属性多参数简写  
    例如:  
    background-image: url("huceo.png");  
    background-position: top center;  
    background-repeat: no-repeat;  
    其实可以写成:  
    background: url(huceo.png) no-repeat top center;  
     
     
    背景图片路径不加引号  
    background:url("image/huceocom.gif") #999;   
    可以写为  
    background:url(images/huceo.gif) #999;   
     
    定位属性值为0的值可去掉单位(如:px/em)  
    例如:padding: 10px 8px 0px 0px;  
    简写:padding: 10px 8px 0 0;  
    有相等值可合并  
    例如:padding: 10px 8px 10px 8px;  
    简写:padding: 10px 8px;  
     
    Margin(外边距/空白边),Padding(内边距)声明:  
    例如:  
    margin-top:0px;  
    margin-right:10px;  
    margin-bottom:0px;  
    margin-left:10px;  
    简写:  
    margin:0 10px 0 10px;(上-右-下-左)  
    再简写:  
    margin:0 10px;(上下值为0,左右值为10)  
     
    Borders(边框属性)  
    例如:  
    border-width:1px;  
    border-style:solid;  
    border-color:#000;  
    简写:  
    border:1px solid #000;  
     
    多组共用属性  
    例如:规定h1到h6使用同一属性(英文逗号间隔)  
    h1,h2,h3,h4,h5,h6  
    margin:0;  
    padding:0;  
    font-size:12px;  
    font-weight:normal;  
    ....  
    当CSS中有相同属性时都可以归类到一起,使用共同属性  
     
    CSS简写技巧有很多,更具体的可以百度一下。建议大家尽量使用CSS简写来优化代码,减少文件体积。  
     
     
    清除容器浮动  
    #main {  
        overflow:hidden;  
    }  
     
    不让链接折行  
    a {  
        whitewhite-space:nowrap;  
    }  
     
    始终让 Firefox 显示滚动条  
    html {  
        overflow:-moz-scrollbars-vertical;  
    }  
    跨浏览器的支持  
    body, html {  
        min-height:101%;  
    }  
     
     
    最简单的 CSS 重置  
    * {  
       margin: 0; padding: 0  
    }  
     

CSS 图片拼合 (CSS sprites)

可有效降低图片文件的HTTP请求数,可以将多个小图片将以一定间距合并为一个大图片文件.例如,本站侧栏图标(包括搜索框图标)和评论框上面的三个图标(名称,邮箱,网址)都是拼合在一起的。
拼合完成后,系统自动给出background-position定位属性代码来显示拼合图片中的指定位置。
http://cn.spritegen.website-performance.org/

使用CSS压缩
百度一下,可以在应用框内直接压缩CSS文件
压缩后去除空格,代码可读性降低,但可以节省文件体积,加快下载速度。压缩后代码可读性差的问题不用担心,可以随时还原。为了维护修改更加方便,也可以将CSS原文件放在与压缩后的文件放在同一目录内,修改时对照下就行了