我们在设计css的时候可以使用CSS缩写,这样可以减少你的CSS文件的大小,更容易阅读和查找。
css缩写的主要规则如下:
margin/padding
通常,你会遇到以下三种情况。
margin-top:1px;
margin-right:10px;
margin-bottom:5px;
margin-left:20px;
margin-top:5px;
margin-right:5px;
margin-bottom:5px;
margin-left:5px;
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:5px;
然后我们会在CSS缩写后让你目瞪口呆。以下是结果。
margin:1px 10px 5px 20px;
margin:5px;
margin:0 10px 0 5px;
书写顺序是页边距:右上左下,
在CSS中,值为0时可以省略单位,就像第三种写法一样。
填充和边距基本相同。
怎么样?是不是很惊喜?没错,CSS缩写就是这么来的。
border
通常写道:
border-width:1px;
border-style:solid;
border-color:#000;
缩写后:
border:1px solid #000;
书写顺序:边框:宽度边框线型颜色;
Background
通常写道:
background-image:url(bg.png);
background-color:#00f;
background-repeat:no-repeat;
background-position:0 0;
缩写后:
background:url(bg.png) #00f no-repeat 0 0;
书写顺序:背景:背景图片颜色重复类型的位置;
background:image color repeat position;
Font
通常写道:
Font series:' Song Ti;
font-size:2em;
line-height:180%;
font-weight:800;
缩写后:
Font, 800 2em/180%' Song Ti;
书写顺序:字体:粗体字号/行高字体;
使用字体缩写时,至少要有两项:字号和字体。
字体:字号字体;
Color
通常写道:
color:#000000;
color:#001188;
缩写后:
color:#000;
color:#018;
十六进制颜色值,如果每两位数的值相同,可以缩写一位。