WordPress:CSS Shorthand

来自站长百科
跳转至： 导航、​ 搜索

These are techniques for condensing, combining, and shortening your CSS code. Used wisely, they can make your stylesheets smaller (so they will load a little faster) and easier to read.

这些方法是用于压缩, 结合, 缩写你的CSS代码。使用得当，CSS代码会使得你的样式表更小（这样样式表载入会更快），阅读也更容易。

Grouping selectors[ ]

Grouping 选择符[ ]

For example: 例如： 

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}


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}

The mouth-full of code above can be condensed into something a little more manageable. As shown below, CSS permits grouping selectors and giving them a shared declaration. See how the selectors can be grouped on one line with commas as separators?

上述的完整代码可以压缩为更容易管理的代码。如下显示，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}


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}


Shorthand properties[ ]

Shorthand 属性[ ]

CSS shorthand properties set several related properties with one declaration. The most common are background, border, font, padding, and margin.

CSS shorthand 属性使用一个声明设置几个相关的属性。最常见的是background, border, font, padding, and margin。

Lengths for margins, padding, and borders are sequenced in clock-wise positions: top, right, bottom, left, e.g. :

Margins，padding，和borders的长度列在clock-wise positions: 顶上方, 右边, 底部, 左边, 等等 : 

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

Consolidate all of that into CSS shorthand and it abbreviates to:

将所有变为CSS shorthand，缩略为： 

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

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

There are other modifications you can use when the margin values are repeated. In the example above, the top and bottom margins of 10px, and the left and right margins of 20px, would condense to:

Margin 参数值重复的时候，你也可以做其它的更改。在上述的例子中，顶上方和底部10px的页面空白，以及左右20px的页面空白，会压缩为： 

.box {margin: 10px 20px}

.box {margin: 10px 20px}

You can also streamline your border codes. Here is a border CSS code for a box:

你也可以streamline边框代码。下面有个框的CSS边框代码。 

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

This can all be consolidated down to the CSS shorthand of:

这个代码可以缩略为CSS shorthand： 

.box {border: 1px blue solid}

.box {border: 1px blue solid}

Not all CSS codes can be grouped and condensed, but this article has described the most common ones.

并不是所有的CSS代码都可以组合并且缩略，但是这篇文章介绍了最常见的CSS缩略代码。

CSS Shorthand Resources[ ]

CSS Shorthand 资源[ ]








取自“https://www.zzbaike.com/wiki/WordPress:CSS_Shorthand?oldid=9531”