CSS书写时，很多时候一个选择符会有多个不同的声明，例如我们描述一个人时，我们不但可以描述这个人的身高，还可以描述这个人的体重、相貌等其他的属性，如果我们逐个列出这些属性就会增大CSS文件的容积。这时我们可以通过按照以下方式，把应用到一个选择符上的多个属性简写到一个声明里面，这样不但可以减少文件的容积，还可以使CSS属性看起来更加规整，容易后期修改，下面我们看几个具体的应用案例。
外边距(margin)的简写：
比如：margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px;
可以写成：margin:10px 20px;
或者：margin:10px 20px 10px 20px;
再或者：margin:10px 20px 10px;
注意：简写后的顺序是“上-左右-下”，“上-右-下-左”，“上下-左右”
内边距(padding)的简写：同上
颜色的简写：
比如：color:#FFFFFF
可以写成：color:#FFF
或者：color:white
边框的简写：
比如：border-width:1px; border-style:solid; border-color:#FFFFFF;
可以写成：border:1px solid :#FFFFFF;
或者写成：border:1px solid :#FFF;
背景的简写：
background-color:#FFFFFF; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;
可以写成：background:#FFF url(background.gif) no-repeat fixed 0 0;
字体的简写：
font
简写：font:italic small-caps bold 12px/1.5em arial,verdana;
等效于：
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
链接统一定义：
为了避免每个链接都要给出css来定义，可以用这样的伪类来定义：
a:link {color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#000099; text-decoration:underline;}
a:active{color:#000000; text-decoration:none;}
用body来定义网页：
body{
margin:0 auto;
padding:0; border:0;
font-size:12px; text-align:center;
font-family: “宋体”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;
}
margin:0 auto;的意思就是网页居中，很多初学者都不知道div+css如何使网页居中，其实就这么简单。
padding:0; border:0;是定义所有的内补丁和边框为0，当然你特殊声明的除外。
font-family: “宋体”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;是定义网页文字的字体，默认会按照这个顺序来显示。如果出现英文的话，英文的默认字体 是Arial。
评论(0)