常用css简写

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);

 

你可能感兴趣的:(css)