WordPress: CSS Shorthand：修订间差异

2008年8月25日 (一) 16:01的最新版本

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缩略代码。

@@ 第1行： / 第1行： @@
 These are techniques for [[WordPress:WordPress_Housekeeping#Site Optimization|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.
+这些方法是用于[[WordPress:WordPress_Housekeeping#Site Optimization|压缩, 结合, 缩写]]你的CSS代码。使用得当，CSS代码会使得你的样式表更小（这样样式表载入会更快），阅读也更容易。
 == Grouping selectors ==
+== Grouping 选择符 ==
 For example:
+例如：
+<pre>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}</pre>
 <pre>h1 {margin:0; font-weight:bold; font-size:130%; color:blue;
@@ 第13行： / 第27行： @@
 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能将选择符聚合在一起，并且使得这些选择符共享一个声明。看看选择符可以怎样组合在一组中，用逗号分开？
 <pre>h1, h2, h4 {font-weight:bold}
@@ 第21行： / 第37行： @@
 h4 {padding-top:1.5em;font-size:105%;font-style:italic}
 h2 {font-size:120%;color:navy}</pre>
+<pre>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}</pre>
 == Shorthand properties ==
+== Shorthand 属性 ==
 CSS shorthand properties set several related properties with one declaration. The most common are <tt>background, border, font, padding</tt>, and <tt>margin</tt>.
+CSS shorthand 属性使用一个声明设置几个相关的属性。最常见的是<tt>background, border, font, padding</tt>, and <tt>margin</tt>。
 Lengths for margins, padding, and borders are sequenced in '''clock-wise positions''': ''top'', ''right'', ''bottom'', ''left'', e.g. :
+Margins，padding，和borders的长度列在'''clock-wise positions''': ''顶上方'', ''右边'', ''底部'', ''左边'', 等等 :
+<pre>.box {margin-top: 10px; margin-right: 20px;
+     margin-bottom: 10px; margin-left: 20px; }</pre>
 <pre>.box {margin-top: 10px; margin-right: 20px;
@@ 第32行： / 第68行： @@
 Consolidate all of that into [[WordPress:Glossary#CSS|CSS]] shorthand and it abbreviates to:
+将所有变为[[WordPress:Glossary#CSS|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 [[WordPress:Glossary#CSS|CSS]] code for a box:
+你也可以streamline边框代码。下面有个框的[[WordPress:Glossary#CSS|CSS]]边框代码。
+<pre>.box {border-top: 1px; border-right: 1px; border-bottom: 1px;
+     border-left: 1px; border-color: blue; border-style: solid}</pre>
 <pre>.box {border-top: 1px; border-right: 1px; border-bottom: 1px;
@@ 第45行： / 第94行： @@
 This can all be consolidated down to the [[WordPress:Glossary#CSS|CSS]] shorthand of:
+这个代码可以缩略为[[WordPress:Glossary#CSS|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 资源===
 * [http://www.w3.org/TR/REC-CSS2/selector.html W3's CSS-2 Selector Specifications]
 * [http://www.w3.org/TR/REC-CSS2/about.html#shorthand W3.or's CSS-2 Shorthand Properties]
@@ 第62行： / 第120行： @@
 * [http://home.no.net/junjun/html/shorthand.html Introduction to CSS shorthand properties]
 * [http://www.sitepoint.com/article/966 Sitepoint's Introduction to CSS Shorthand]
+* [http://www.w3.org/TR/REC-CSS2/selector.html W3's CSS-2 选择符规定]
+* [http://www.w3.org/TR/REC-CSS2/about.html#shorthand W3.or's CSS-2 Shorthand属性]
+* [http://skaiste.elekta.lt/Books/O'Reilly/Bookshelfs/books/webdesign/css/ch02_02.htm O'Reilly's Definitive CSS 指南: Grouping]
+* [http://www.websiteoptimization.com/speed/tweak/grouping/ WebSiteOptimization's CSS: Group Selectors and Declarations]
+* [http://www.websiteoptimization.com/speed/tweak/shorthand/ WebSiteOptimization's CSS: 使用Shorthand 属性]
+* [http://www.communitymx.com/content/article.cfm?cid=A43B828960590F55&print=true 编写有效的 CSS]
+* [http://home.no.net/junjun/html/shorthand.html CSS Shorthand 属性介绍]
+* [http://www.sorehead.org/css/shorthand.html Sorehead的 CSS shorthands]
+* [http://hotwired.lycos.com/webmonkey/03/36/index0a.html Streamlining with Web Standards]
+* [http://home.no.net/junjun/html/shorthand.html CSS shorthand 属性介绍]
+* [http://www.sitepoint.com/article/966 Sitepoint的CSS Shorthand介绍]

WIKI使用导航

站长百科导航

站长专题