WordPress中的CSS速记

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

导航: 上一页 | 首页 | WordPress中文论坛 | WordPress主机 | CMS程序 | 论坛程序 | ECShop | ShopNC | PowerEasy

我们可以通过一些方法来合并或简化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速记相关资源[ ]


相关条目[ ]

取自“https://www.zzbaike.com/wiki/WordPress中的CSS速记?oldid=40349”