CSS 缩写(CSS Abbreviations)

CSS 缩写可以帮助减少CSS文件的大小,优化 CSS 文件的加载速度提高性能,并且让 CSS 代码更容易阅读。 CSS 中有很多属性都有缩写方式,例如:字体、背景、边框、外边距、内边距等等。本文就是对 CSS 中常用的缩写方式做了一个总结,对于初学者者来说,应该是不错的参考资料。

颜色 – color

十六进制的颜色值,如果两个值相同,可以缩短一半。

例如:color: #f00;

等价于:

color: #ff0000;

可以看到,红色的十六进制的颜色值为:#ff0000;,两个相同的 ff 缩写成了 f,两个相同的 00 缩写成了一个 0,后面的两个 00 也缩写成了一个 0。必须是这种两两一组,连续 3 组的值都相同才能缩写。

像这样 #880188#018888 或者 #888801,只要有一组连续的两个值不同,就不能采用缩写了。

字体 – font

语法:font: font-style | font-variant | font-weight | font-size | line-height | font-family

例如:font: normal small-caps bold 14px/1.5em '宋体',arial,verdana;

等价于:

font-style:normal;
font-variant:small-caps;
font-weight:bold;
font-size:14px;
line-height:1.5em;
font-family:'宋体',arial,verdana;

注意,简写时 font-size 和 line-height 只能通过斜杠/组成一个值,不能分开写。

盒子大小 – box size

>盒子大小的缩写主要用于两个属性:margin 和 padding。盒子有上下左右四个方向(顺序是:top | right | bottom | left),这里以 margin 属性为例(padding 属性的缩写规则完全一样):

外边距 – margin

语法:margin: margin-top | margin-right | margin-bottom | margin-left

例如:margin: 10px 20px 10px 20px;

等价于:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

盒子大小的缩写,除了按边的顺序缩写外,4 个边的属性值(向下两边相对应,左右两边相对应)有相同的时候也是可以缩写的,有以下 3 种情况:

  1. 4 个边的值都相等,采用一个值表示。缩写成:margin: 10px;
  2. 上下两边相等,左右两边也相等,采用两个值表示。第一个值表示向下两边的边距(省略了下边距的值),第二值表示左右两边的值(省略了左边距的值)。缩写成:margin:10px 20px;
  3. 上下两边不相等,左右两边相等,采用三个值表示。第一个值表示上边距,第二值表示左右两边的值(省略了左边距的值),第三个值表示下边距。缩写成:margin:10px 20px 15px;

内边距 – padding

语法:padding: padding-top | padding-right | padding-bottom | padding-left

具体的缩写规则请参考外边距(margin)属性。

背景 – background

语法:background: background-color | background-image | background-repeat | background-attachment | background-position

例如:background:#F00 url(header_bg.gif) no-repeat fixed left top;

等价于:

background-color: #f8f8f8;
background-image: url(logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

  • color: transparent
  • image: none
  • repeat: repeat
  • attachment: scroll
  • position: 0% 0%

边框 – border

语法:border: border-width | border-style | border-color

例如:border: 1px solid #e9e9e9;

等价于:

border-width:1px;
border-style:solid;
border-color:#e9e9e9;

圆角半径 – border-radius

border-radius 是 CSS3 中新加入的属性,用来实现圆角边框,4 个角的顺序是:top-left、top-right、bottom-right、bottom-left。

语法:border-radius: top-left | top-right | bottom-right | bottom-left

例如:

-moz-border-radius: 10px 10px 0;
-webkit-border-radius: 6px 6px 0;
border-radius: 6px 6px 0;

等价于:

-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

圆角半径的缩写与盒子大小的缩写类似,与除了按角的顺序缩写外,4 个角的属性值(上左和下右角相对应,上右与下左角相对应)有相同的时候也是可以缩写的,有以下 3 种情况:

  1. 4 个角的值都相等,采用一个值表示。缩写成:border-radius: 10px;
  2. 上左和下右角相等,上右与下左角也相等,采用两个值表示。第一个值表示上左和下右角的半径(省略了下右角的值),第二值表示上右与下左角的半径(省略了下左角的值)。缩写成:border-radius:10px 20px;
  3. 上左和下右角不相等,上右与下左角相等,采用三个值表示。第一个值表示上左角的半径,第二值表示上右与下左角的半径(省略了下左角的值),第三个值表示下右角的半径。缩写成:border-radius: 10px 10px 0;

列表样式 – list-style

语法:list-style: list-style-type | list-style-position | list-style-image

例如:list-style: square outside url(dashed-cycle.png);

等价于:

list-style-type: square;
list-style-position: outside;
list-style-image: url(dashed-cycle.png);

SHARE THIS PAGE

免责声明:本站文章中的观点都是作者个人观点,并没有以任何方式反映他所属机构的意见。

发表评论