CSS速记

1条评论

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

#1
想问一下手机问题,请去我博客看最新文章~