Bubblings Blog

css样式缩写知多少

css缩写 不仅能高效率的控制页面表现,而且还能使css文件变得更小、更有条理,也是 前端工程师必备的素质之一。虽然《精通css》中没有专门介绍缩写的专题,但是在各章零碎的都有所提及,所以还是做一个总结,也方面日后查阅。

1.色值缩写

色值的缩写比较简单,一般最常用的就是两种情况,如:

color:#336699

可以缩写成

color:#369    

2.background缩写

背景在css中也经常用到,涉及到背景的相关属性及值如下:

background-color: color;
background-image:url(...);
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed; 
background-position: X Y;

常见的缩写方式:

background:url(...) no-repeat 0 0;    //纯背景图片
background:#ccc url(...) no-repeat 0 0;    //背景颜色+图片
background:transparent none repeat scroll top left;    //也可把属性补全

3.font缩写

font属性多数情况下都采用简写方式,涉及到font的相关属性如下

font-style:normal || italic || oblique;
font-variant:normal || small-caps;
font-weight:normal || bold || bolder || || lighter || (100-900);
font-size: 字体大小;
line-height: normal || length;
font-family:name,...;

常见的缩写方式如下:

font:12px/20px \5B8B\4F53;    //字号+行高+字体
font:bold 12px/20px \5B8B\4F53;    //粗体+字号+行高+字体
font:italic bold 12px/20px serif;    //斜体+粗体+字号+行高+字体
font:italic small-caps bold 12px/20px serif;
//斜体+小型的大写字母+粗体+字号+行高+字体

4.margin/padding缩写

盒模型中margin/padding也经常采用缩写形式

/* margin缩写 */
margin:1px;    //四个外边距相同,等同于margin:1px 1px 1px 1px;
margin:1px 2px;//上下边距为1px,左右边距为2px,等同于margin:1px 2px 1px 2px
margin:1px 2px 3px;    //右边距和左边距相同,等同于margin:1px 2px 3px 2px;
margin:1px 2px 3px 4px;    //上右下左的边距分别为1px 2px 3px 4px

padding缩写与margin基本一致,这里就不在赘述

5.border/outline缩写

border的常用属性及值如下

border-width:边框宽度;
border-style: none || solid || dashed || dotted || ...;
border-color: 色值;

一般缩写如下:

border:1px solid #ccc;    //边框为1px灰色实线
/* 当然 也可以单独定义某个边框 */
border-right:2px dashed #000;    //右边框为2px黑色虚线
/* 也可以根据每个属性缩写 */
border-width:1px 2px 3px 4px;
border-style:solid dashed dotted double;
border-color:red black blue pink;
/* 还有更简单的定义方式 */
border:solid;//边框为3px黑色实线
//border-width默认为3px,border-color默认为黑色
/*说明 border缩写时,border-style属性是不可省略的*/

outline缩写和border很类似,一般缩写如下:

outline:1px solid #666;
//对应值分别outline-width,outline-style,outline-color

先总结到这里,以后有机会再补充。