编辑“WordPress:CSS Shorthand”
该编辑可以被撤销。 请检查下面的对比以核实您想要撤销的内容，然后发布下面的更改以完成撤销。
| 最后版本 | 您的文本 | ||
| 第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. | 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. | ||
== Grouping selectors == | == Grouping selectors == | ||
For example: | For example: | ||
<pre>h1 {margin:0; font-weight:bold; font-size:130%; color:blue; | <pre>h1 {margin:0; font-weight:bold; font-size:130%; color:blue; | ||
| 第27行： | 第13行： | ||
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? | 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? | ||
<pre>h1, h2, h4 {font-weight:bold} | <pre>h1, h2, h4 {font-weight:bold} | ||
| 第37行： | 第21行： | ||
h4 {padding-top:1.5em;font-size:105%;font-style:italic} | h4 {padding-top:1.5em;font-size:105%;font-style:italic} | ||
h2 {font-size:120%;color:navy}</pre> | h2 {font-size:120%;color:navy}</pre> | ||
== Shorthand properties == | == Shorthand properties == | ||
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 properties set several related properties with one declaration. The most common are <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. : | Lengths for margins, padding, and borders are sequenced in '''clock-wise positions''': ''top'', ''right'', ''bottom'', ''left'', e.g. : | ||
<pre>.box {margin-top: 10px; margin-right: 20px; | <pre>.box {margin-top: 10px; margin-right: 20px; | ||
| 第68行： | 第32行： | ||
Consolidate all of that into [[WordPress:Glossary#CSS|CSS]] shorthand and it abbreviates to: | Consolidate all of that into [[WordPress:Glossary#CSS|CSS]] shorthand and it abbreviates to: | ||
.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: | 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: | ||
.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: | You can also streamline your border codes. Here is a border [[WordPress:Glossary#CSS|CSS]] code for a box: | ||
<pre>.box {border-top: 1px; border-right: 1px; border-bottom: 1px; | <pre>.box {border-top: 1px; border-right: 1px; border-bottom: 1px; | ||
| 第94行： | 第45行： | ||
This can all be consolidated down to the [[WordPress:Glossary#CSS|CSS]] shorthand of: | This can all be consolidated down to the [[WordPress:Glossary#CSS|CSS]] shorthand of: | ||
.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. | Not all CSS codes can be grouped and condensed, but this article has described the most common ones. | ||
===CSS Shorthand Resources=== | ===CSS Shorthand Resources=== | ||
* [http://www.w3.org/TR/REC-CSS2/selector.html W3's CSS-2 Selector Specifications] | * [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] | * [http://www.w3.org/TR/REC-CSS2/about.html#shorthand W3.or's CSS-2 Shorthand Properties] | ||
| 第120行： | 第62行： | ||
* [http://home.no.net/junjun/html/shorthand.html Introduction to CSS shorthand properties] | * [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.sitepoint.com/article/966 Sitepoint's Introduction to CSS Shorthand] | ||