手记

CSS 的简写属性

定义

简写属性是让你同时设置其他几个 CSS 属性值的 CSS 属性。使用简写属性,Web 开发人员可以编写更简洁、更具可读性的样式表,节省时间和精力。

CSS 规范把简写属性定义为作用于同一主题的一组属性。比如 CSS 的background属性就是一个简写属性,它可以定义background-colorbackground-imagebackground-repeatbackground-position的值。同样,最常见的字体相关的属性可以使用font的简写,盒子(box)各方向的外边距 margin 可以使用margin的简写。

棘手的边缘情况

虽然它们使用起来非常方便,但在使用时,仍需牢记一些边缘情况:

没有指定的值会被设置为它的初始值。这听起来似乎本来就很合理的样子,但这确实意味着,它将会覆盖之前设置的值。因此:

background-color: red;
background: url(images/bg.gif) no-repeat top right;

以上样式不会将 backgroundcolor 值设置为red,而是background-color的默认值transparent,因为第二条规则优先。

关键词 inherit 可以应用于一个属性,但只能作为一个整体,而不是一个值的关键词。当漏掉的值被它们的初始值替代时,不可能允许单个属性通过省略继承的 。这意味着让这些特定值被继承的唯一方法,就是使用值是 inherit 的普通属性。

简写属性不试图强制它们替代属性的值的特定顺序。这适用于当这些属性使用不同类型的值时,因为这个时候顺序并不重要。但当几个属性可以设置相同值的时候,就没那么简单了。处理这些情况分以下几种类型:

处理和盒子(box)边界(edge)相关的属性时,比如border-stylemargin或者padding, 始终使用一致的1个到4个值的语法表示这些边界:

1个值的语法: border-width: 1em— 这一个值表示所有的边框宽度

2个值的语法: border-width: 1em 2em— 第一个值表示垂直方向的,即 top 和 bottom;第二个值表示水平方向的,即 left 和 right

3个值的语法: border-width: 1em 2em 3em— 第一个值表示 top;第二个值表示水平方向的,即 left 和 right; 第三个值表示 bottom

4个值的语法: border-width: 1em 2em 3em 4em— 这四个值分别表示 top、right、bottom、left,总是按此顺序,即从 top 开始的顺时针顺序(Top-Right-Bottom-Left 首字母与英文单词 trouble 的顺序一致:TRBL)

同样,在处理和盒子的角相关的属性时,比如border-radius,也始终使用一致的 1个到4个值的语法表示:

1个值的语法: border-radius: 1em— 这一个值表示所有的表框角度的半径

2个值的语法: border-radius: 1em 2em— 第一个值表示 top-left 和 bottom-right 方向的角;第二个值表示 top-right 和 bottom-left 方向的角

3个值的语法: border-radius: 1em 2em 3em— 第一个值表示 top-left 方向的角 ,第二个值表示top-right 和 bottom-left 方向的角,第三个值表示 bottom-right 方向的角

4个值的语法: border-radius: 1em 2em 3em 4em— 这四个值分别表示top-left、 top-right、 bottom-right 、bottom-left 方向的角。总是按此顺序,即从top-left开始的顺时针顺序

Background 属性

background 有以下属性:

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

可以简写成一行声明:

background: #000 url(images/bg.gif) no-repeat top right;

简写的形式实际上等价于以上普通属性再加上background-attachment: scroll以及 CSS3 中的一些附加属性。

Font 属性

下面的声明:

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

可以简写成下面的:

font: italic bold .8em/1.2 Arial, sans-serif;

这个简写声明实际上等价于以上普通属性再加上font-variant: normalfont-size-adjust: none(CSS2.0 / CSS3)font-stretch: normal(CSS3)

Border 属性

对于 border 来说,宽度、颜色和类型是可以被简写到一个声明里的。比如:

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

可以简写成:

border: 1px solid #000;
Margin 和 Padding 属性

marginpadding 值的简写版本类似。下面的 CSS 声明:

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

和下面的声明是一样的(注意,值是从 top 顺时针开始的:top、right、bottom、接着是 left)

margin: 10px 5px 10px 5px;

另请参阅

  • CSS Reference
  • Shorthand properties:background,font,margin,border,border-top,border-right,border-bottom,border-left,border-width,border-color,border-style,transition,transform,padding,list-style,border-radius.
  • CSS Key Concepts:CSS syntax,specificityandinheritance, thebox,layout modes and visual formatting models, andmargin collapsing, or theinitial,computed,usedandactualvalues. Definitions ofvalue syntax,shorthand properties and replaced elements.

作者:KikiAn
文章源自:developer.mozilla.org/zh-CN/docs/Web/CSS/Shorthand_properties

23人推荐
随时随地看视频
慕课网APP

热门评论

function

参考中文连接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

查看全部评论