CSS样式表优化更整洁而简短

2019-03-14 22:38:38于丽

margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;

让我们试试把值为0的单位去掉,并把4条声明合并成一条声明:

margin:0 10px 0 10px;

当你生命padding、margin、border(还有一些其他属性)时,记得要把按照顺时针的方向来声明属性值,也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法,看看属性中上和下、左和右是否值是相等的,如果是那么就可以进一步优化了,你可以省略掉后两个值,剩下的两个值前者指上下,后者指左右:

margin:0 10px;

它是指左右的值为10px,上下的值为0; Padding(内边距)
padding的简写技巧等同于margin:

padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;

可以写成:

padding: 0 10px;
Borders(边框)
  边框的简写方式相比其它生命来说会比较复杂,很多CSSer一开始都容易记混它的简写顺序,如果你想声明一个1像素宽的实线黑色边框,可能会写成:

border-width:1px;
border-style:solid;
border-color:#000;

其实可以写成:

border:1px solid #000;

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。
我们还可以为四个边设置不同的宽度:

border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

可以简写成:

border-width:1px 2px 3px 4px;

最后,我们还可以只设置左和右的边的样式:

border-right:1px solid #000;
border-bottom:1px solid #000;

虽然并没减少多少代码,但暴风彬彬建议写成这样:

border:1px solid #000;
border-width:0 1px 1px 0;

先设置四个边的默认风格,然后声明具体的哪个边要显示。 文字
  文字属性也有很多可能会用到的属性值,像背景一样,你可能会声明这种复杂的文字样式:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:150%;
font-family:宋体, Arial, sans-serif;

其实可以优化成一行:

font:italic small-caps bold 1em/150% 宋体, Arial, sans-serif;
列表

list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);