WordPress中的CSS速记

我们可以通过一些方法来合并或简化CSS代码。如果使用得当，这些方法可以让样式表变得更加简单（加载速度也更快）易懂。

目录

[隐藏]

• 1 合并选择符
• 2 速记属性
• 3 CSS速记相关资源
• 4 相关条目

合并选择符

例如：

h1{    margin:0; font-weight:bold; font-size:130%; color:blue;    padding-left:5px; padding-top:10px}h2{    margin:0; font-weight:bold; font-size:120%;           color:navy; padding-left:5px}h4 {    margin:0; font-weight:bold; font-size:105%;           font-style:italic; color:blue; padding-top:1.5em}

我们可以进一步简化以上代码。从下面可以看出，CSS允许用户合并同类选择符，并给这些选择符一个共同声明。看下文的选择符如何被合并在同一行并用逗号隔开：

h1, h2, h4 {font-weight:bold}h1, h4 {color:blue}h1, h2 {padding-left:5px}h1, h2, h4 {margin:0}h1 {font-size:130%;padding-top:10px}h4 {padding-top:1.5em;font-size:105%;font-style:italic}h2 {font-size:120%;color:navy}

速记属性

速记CSS属性在一个声明中设置多个相关属性。常见属性包括background, border, font, padding以及margin。

页边空白的长度、补白与边框的属性都按照顺时针方向排列，如最上、右、最下、左：

.box {margin-top: 10px; margin-right: 20px;margin-bottom: 10px; margin-left: 20px; }

利用CSS速记法合并以上代码：

.box {margin: 10px 20px 10px 20px; }  

当margin（页边空白）的值有重复时，还可以用其它方法进行简化。在上面的例子中，最上以及最下方的页边空白都是10px，而左侧、右侧的页边空白则是20px，因此可以进一步简写为：

.box {margin: 10px 20px}  

我们还可以简化边框代码。下面是一个输入框的边框CSS代码：

.box {border-top: 1px; border-right: 1px; border-bottom: 1px;      border-left: 1px; border-color: blue; border-style: solid}

简写后成为：

.box {border: 1px blue solid}  

不是所有CSS代码都能够进行合并或简化，本文只是介绍了一些最常见的用法。