首页 > 技术文章 > 常用css简写

chixiaojin 2013-08-18 19:29 原文

CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小,其实还有很多其他益处。臃肿而杂乱的CSS样
式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。

font(字体)
==========
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;

简写成顺序:font-style | font-variant | font-weight | font-size/line-height | font-family

font:italic small-caps bold 12px/1.5em arial,verdana;
Borders(边框)
=============
border-width:1px;
border-style:solid;
border-color:#000;

简写成顺序:border-width | border-style | border-color(先设置四个边的默认风格,然后声明具体的哪个边要显示。)

border:1px solid #D5D5D5;
border-width:0 0 1px 0;
background背景
==============
background-image: url(“logo.png”);
background-position: top center;
background-repeat: no-repeat;

简写成顺序:background-color | background-image | background-repeat | background-attachment | background-position

background:#FFF url(logo.png) no-repeat top center;
Margin(外)
Padding(内)
===========
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;

简写成顺序:top | right | bottom | left

margin:0 10px 0 10px;
list-style
==========
list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);

简写成顺序:list-style-type | list-style-position | list-style-image

list-style:square outside url(bullet.gif);

 

推荐阅读