欢迎光临
我们一直在努力

CSS | CSS常见简写属性

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

CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS 的 background 属性就是一个简写属性,它可以定义 background-colorbackground-imagebackground-repeat 和 background-position 的值。类似地,最常见的字体相关的属性可以使用 font 的简写,盒子(box)各方向的外边距(margin) 可以使用 margin 这个简写。

棘手的边界情况

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

  1. 没有指定的值会被设置为它的初始值。这听起来似乎本来就很合理的样子,但这确实意味着,它将会覆盖之前设置的值。因此:
background-color: red;
background: url(images/bg.gif) no-repeat top left;
  1. 以上样式不会将 background 的 color 值设置为 red,而是 background-color 的默认值 transparent,因为第二条规则优先。
  2. 关键词 inherit 只可以应用于单独属性(individual properties),如果应用于一个简写属性(shorthand property),则必须整体应用,而能对简写属性值的每一个部分单独应用。由于单独属性的漏掉的值会被它们的初始值(initial value)替代,因此不可能允许单个属性通过省略继承的 。这意味着让一个属性的值使用继承值的唯一方法就是使用值是 inherit 的普通属性(longhand property)。
  3. 简写属性不试图强制它们替代属性的值的特定顺序。这适用于当这些属性使用不同类型的值时,因为这个时候顺序并不重要。但当几个属性可以设置相同值的时候,就没那么简单了。

Background 属性

background 有以下属性:

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

可以简写成一行声明:

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

简写的形式实际上等价于以上普通属性再加上 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: normal 和 font-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;

List-style属性

list-style包括三个属性,他们的顺序是任意的。但要注意list-style-img属性将会覆盖掉list-style-type属性,无论他们的顺序如何,下面是简写的列子:

list-style-type: square;

list-style-position: inside;

list-style-image: url(image.gif);

可以简写成:

list-style: square inside url(image.gif);

Margin 和 Padding 属性

margin 和 padding 值的简写版本类似。下面的 CSS 声明:

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

可以简写成:

margin: 10px 5px 10px 5px;
赞(0) 打赏
未经允许不得转载:散人研 » CSS | CSS常见简写属性
分享到: 更多 (0)

评论 抢沙发

1 + 2 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏