10个CSS简写能力让你永久受用

　　本日，狂风彬彬清算了一些CSS简写能力，它们着实是CSS最常用的写法，可是太多的人行使Dreamweaver这种所见即所得软件来编写CSS，使得代码过于痴肥。不外不要紧，看过本文之后，你一能能把握CSS代码优化的能力，此后让你的每一个CSS样式表都看起来整洁而简短吧。

属性值为0

誊写原则是假如CSS属性值为0，那么你不必为其添加单元(如:px/em)，你也许会这样写:

padding: 10px 5px 0px 0px;

试试这样吧:

padding: 10px 5px 0 0;

移除选择器

　　选择器是你在为一些元素应用CSS样式时的根基要领，好比h1, h2, h2, div, strong, pre, ul, ol等等…假如你行使了class(.类名)或ID(#id名),那么就不消再在声明CSS时包括选择器了。

div#logowrap

实行甩掉多余的选择器吧:

#logowrap

在这个例子中所谓的谁人选择器就是div

*总爱和你恶作剧

　　要明智的行使*而停止它在整个CSS样式表中乱恶作剧，*是个通配符，你可以行使它来为你的计划部门或所有举办一系列CSS声明。譬喻:

* {
    margin: 0;
}

这个声明会将全部元素的margin值配置为0，同样的，为了严谨起见，你可以实行这样配置:

#menu * {
    margin: 0;
}

这样的声明是指将#menu下的全部元素的margin设为0。

配景

　　配景(background)属性也许会包括配置配景致、配景图、配景图的位置和配景图一再方法的参数，你也许会写成:

background-image: url(”logo.png”);
background-position: top center;
background-repeat: no-repeat;

着实可以写成:

background: url(logo.png) no-repeat top center;

颜色

　　颜色(color)属性在CSS凡是指定为一个十六进制的值,一个#加6位数，他的简写方法是假如颜色值由成对儿呈现的三对而数字构成，你可以省略掉没对中的一个数字。

　　#000000 可以写成 #000, #336699 可以写成 #369

　　这种简写能力只合用于成对呈现的颜色值，其余颜色值不合用这种能力，好比:

　　#010101, #223345, #FFF000

Margin(外边距/空缺边)

声明CSS magin值得时辰凡是会写成这样:

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

可以写成:

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

原文链接:http://blog.bingo929.com/10-css-shorthand-tips.html

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!