CSS缩写大全

为什么80%的码农都做不了架构师？>>>   

精简CSS可以优化网页速度，降低文件大小，同时能使代码简约可读，下面是以往项目中总结的一些缩写技巧和有过出错的经历，新手们可以参考一下。

    使用CSS缩写性质让你能够把多个性质／属性对（property/attributepair）压缩进CSS样式表的一行代码里，简化开发，提高工作效率。

一、margin和padding缩写

例：

.sample-margin1{

    margin-top:15px;

    margin-right:20px;

    margin-bottom:12px;

    margin-left:24px;

    //padding同理

}

缩写后：

.sample-margin1{

    margin:15px 20px 12px 24px;

    //padding同理

}

缩写规则：按顺时针方向来写(按上、右、下、左的顺序)，属性之间由空白隔开。如果相关属性相同，可以按以下的写法:

.sample-margin2{

    margin:上 右 下 左;

    margin:上 左右 下;

    margin:上下 左右;

    margin:全部(等于上右下左);

    //padding同理

}

二、border缩写：

例：

.sample-border1{

    border-top-width:1px;

    border-top-style:solid;

    border-top-color:#cccccc;

}

.sample-border2{

    border-top:1px solid #cccccc;

    border-left:1px solid #cccccc;

    border-right:1px soli #cccccc;

    border-bottom:1px solid #cccccc;

}

缩写后：

.sample-border1{

    border-top:1px solid #ccc;

}

.sample-border2{

    border:1px solid #ccc;

}

如果是3条边有颜色，为了简化代码你可以这样写：

.sample-border3{

    border:1px solid #ccc;

    border-top:none;

    //左、右、下边框有颜色，上边框为空

}

    缩写规则：如果四条边的颜色和宽度相同可以简写成以上形式，16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#0044DD可以缩写为#04D;其他颜色值同理。字体宽度normal用400代替,bold用700代替。

 

三、background缩写

例：

.sample-background{

    background-color:#ccc;

    background-image:url(sample.gif);

    background-repeat:repeat-x;

    background-attachment:scroll;

    //scroll是背景图像随对象内容滚动为默认值，可以不写

    background-position:top right;

}

缩写后：

.sample-background{

    background:#ccc url(sample.gif) repeat-x top right;

    //属性依次为：颜色-背景图-X轴平铺-背景图像位置(背景图片路径不需要加引号)

}

 

四、font缩写：

例：

.sample-font{

    font-style:italic //设置或检索对象中的字体样式

    font-variant:normal //设置或检索对象中的文本是否为小型的大写字母

    //前2项如果没有特殊设置，可以不写，用默认值即可

    font-weight:bold;

    font-size:12px;

    line-height:20px;

    font-family:"宋体";

}

缩写后：

.sample-font{

    font:bold 12px/20px "宋体";

    //属性依次为：字体的粗细 - 字体大小/行高 - 文本的字体

}

五、list-style缩写：

例：

.sample-list{

    list-style-image:url(sample.gif);

    list-style-position:outside;

    list-style-type:circle;

}

缩写后：

.sample-list{

    list-style:circle inside url(sample.gif);

}

    

    属性依次为：预设标记 - 标记位置 - 标记图片(标记图片路径不需要加引号)，预设标记和标记图片可二选一，如果二者都定义，则标记图片覆盖预设标记，不过在项目中基本没有都不用，都是用背景图片进行定义

六 其他缩写：

1、样式明确定义单位，除非值为0

.sample-uint{

    width:100px;

    height:50px;

    font-size:9pt;

    //值为0可不填单位

    margin:0;

    padding:0;

}

2、可以给标签定义通用属性，减少重复定义

p{...}

h1{...}

img{...}

3、给所有能重复使用的元素定义类

.red{...}

.nav{...}

.tfoot{...}

4、为网站缩写初始化样式，避开浏览器的不兼容问题，使用组选择器减少重复定义

body, dl, dt, dd, ul, ol, li,

div, pre, code, p, blockquote,

form, fieldset, legend, input,

button, textarea, label{

    margin:0;padding:0;

}

body{

    font:12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;

}

html{

    color:#404040;

    background:#fff;

    overflow-y:scroll;

}

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

.sample-cancel-limit{

div#content {...}

fieldset.details {...}

//改为

#content {...}

.details {...}

}

    在给一个元素定义class或者id，你可以省略前面的元素限定，因为id在一个页面里是唯一的，页class可以在页面中多次使用，你限定某个元素意义不大，还会增加文件的尺寸。

如果你只是想把相关模块的样式放在一起，也为了看起来清晰，也可以这么做，自己把握，不建议这样写。

6、不需要重复定义可继承的值

    CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。具体哪些属性可以继承，哪些不能继承可以百度一下。

7、多重class定义

.one{...}

.two{....}

<div class="one two">...</div>

    如果样式表中有相关的样式，可以给标签另写样式，实现定义多个class来减少代码冗余和重用效率，多个样式间用空隔隔开。

8、使用子选择器

.son{...}

.son li{...}

.son li a{...}

    合理的使用子选择器可以帮助你节约大量的class和id定义，更有效的控制页面元素。

9、删除空格和注释

    在发布网站的时候，你可以删除CSS文件里的空格和注释并压缩CSS文件，这样可以减小文件的大小

10、其他

    网站也有很多相关的缩写文章，高手们都会有总结自己的缩写技巧，具体缩写规则可以根据实际项目里的情况而定。规则是人的，规则也是灵活的。

转载于:https://my.oschina.net/i33/blog/62181