编辑“WordPress中的CSS速记”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress进阶课题|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
我们可以通过一些方法来合并或简化[[CSS]]代码。如果使用得当，这些方法可以让样式表变得更加简单（加载速度也更快）易懂。

==合并选择符==
例如：
 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代码都能够进行合并或简化，本文只是介绍了一些最常见的用法。
==CSS速记相关资源==
*[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://skaiste.elekta.lt/Books/O%27Reilly/Bookshelfs/books/webdesign/css/ch02_02.htm O'Reilly's   Definitive CSS Guide: 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: Use Shorthand Properties]
*[http://www.communitymx.com/content/article.cfm?cid=A43B828960590F55&print=true Writing   Efficient CSS]
*[http://home.no.net/junjun/html/shorthand.html Introduction to CSS   Shorthand Properties]
*[http://www.sorehead.org/css/shorthand.html Sorehead's CSS shorthands]
*[http://hotwired.lycos.com/webmonkey/03/36/index0a.html Streamlining with   Web Standards]
*[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] 


==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|C]]
[[category:WordPress网站开发|C]]