几个常用 CSS 属性的简短写法

精简 CSS 代码有很多种方法,但其中最常用的方法可能就是使用属性的简短形式。

具有简短写法的 CSS 属性很多,但是常用的属性无外乎字体、列表、背景、边框、透明等几种,所以在此对这几种属性的简短写法做个归纳,备忘。

font 属性

font 属性涉及到字体、字号、行高等好几个属性,使用简短写法的时候可以节省好多代码量。虽然并非所有属性都要定义,但是一般来说 font-sizefont-family 是必不可少的,以下是 font 的几个属性与其对应的默认值:

/* font 各属性与默认值 */
font-variant: normal;
line-height: normal;
font-family: varies;
font-weight: normal;
font-style: normal;
font-size: medium;

以上 6 个属性可以合并成一行,根据 W3C 规范,各属性前后排列顺序依次为:

/* 字体各属性前后顺序 */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

再看以下几个示例:

font: 14px Georgia, serif;
font: 14px/1.4 Georgia, serif;
font: italic lighter 14px/1.4 Georgia, serif;
font: italic small-caps lighter 14px/1.4 Georgia, serif;

可以看到,一行代码就可以代替一段代码,而且看起来还更优雅一些,就是单独查找某个属性的时候有点不太方便,看着眼花。

list 属性

list 有三个属性,这三个属性分别定义:typeimageposition,它们的属性名和默认值分别如下:

list-style-type: disc;
list-style-image: none;
list-style-position: outside;

list 只有三个属性,并不复杂,但是我们仍然可以将这三个属性合并为在一行中,根据 W3C 规范,写法如下:

/* list 属性简短写法 */
list-style: [list-style-type] [list-style-position] [list-style-image];

/* 示例 */
list-style: none;
list-style: disc;
list-style: disc outside;
list-style: disc outside url(bg.png);

一如既往的简单,基本上就是简写了 list 属性的名称,然后按顺序排列一下属性的值即可。

background 属性

很多样式表中都会多次定义 background 属性,每次都要重复其 5 个属性的话,那代码量可会成倍的增加呢。下面是其 5 个属性名及其默认值:

/* background 的各属性及其默认值 */
background-attachment: scroll;
background-color: transparent;
background-position: top left;
background-repeat: repeat;
background-image: none;

根据 W3C 规范,将其 5 个属性合并起来的写法如下:

/* background 属性简短写法 */
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

/* 示例 */
background: #777;
background: url(images/bg.png) 0 0;
background: #777 url(images/bg.png) repeat-x 0 0;
background: #777 url(images/bg.png) repeat-x fixed 0 0;

对于 background 简短写法而言,不同的标签的使用方法和效果都有一些细微差别,欲知详情者,请至官方文档查看。

border 属性

border 属性更为简单,它 3 个属性以及默认值如下:

/* border 各属性及其默认值 */
border-width: none;
border-style: none;
border-color: none;

根据 W3C 规范,其简短写法如下:

/* border 属性简短写法 */
border: [border-width] [border-style] [border-color];

/* 示例 */
border: 1px solid #111;
border: 2px dotted #222;
border: 3px dashed #333;

当然也可以为 4 个边框定义不同的样式:

border-bottom: 1px solid #777;
border-right:  2px solid #111;
border-left:   2px solid #111;
border-top:    1px solid #777;

结语

使用 CSS 简短写法一般都可以大大节省时间和代码量,如果还没开始使用的,赶紧使用,我担保你会越用越喜欢。

Via Top 5 CSS Shorthand Properties

Posted on 2011-04-17

No Comments

Leave a Comment