CSS shorthand 属性

分享于 

5分钟阅读

Web开发

  繁體 雙語

介绍

使用CSS的主要优点之一是网页下载时间的大幅减少。 要设置文本样式,你必须反复使用 <font> 标签。 你可能还用表格。嵌套表格和间隔gif布局了你的站点。 现在所有的表示信息都可以放在一个CSS文档中,每个命令只列出一次。

为什么要停止使用 CSS shorthand 属性,你可以减少CSS文档的大小。

字体

使用:

font: 1em/1.5embolditalicserif

。而不是

font-size: 1em;line-height:1.5em;font-weight: bold;font-style: italic;font-family:serif

如果指定了 font-sizefont-family,则这里 CSS shorthand 属性将只能工作- 省略了和CSS规则将被忽略。 另外,如果不指定 font-weightfont-style 或者 font-varient,那么这些值将自动默认为 normal 值,因这里请记住。

Background

使用:

background: #fff url(image.gif) no-repeattopleft

。而不是

background-color: #fff;background-image: url(image.gif);background-repeat: no-repeat;background-position:top left;

在 background CSS shorthand 属性中省略这些命令,浏览器将使用默认值。 如果你离开 background-position 命令,那么将在容器左上角放置任何 background 图像,然后在水平和垂直方向重复。

列表

使用:

list-style:discoutside url(image.gif)

。而不是

list-style: #fff;list-style-type: disc;list-style-position: outside;list-style-image: url(image.gif)

如果你不使用 shorthand 规则中的任何CSS命令,浏览器将使用缺省值,即 discoutsidenone ( 例如 )。 无图像)。

margin & padding

对于 margin 和 padding,有许多不同的CSS shorthand 命令,具体取决于包含元素的有多少边的margin 或者 padding 值:

四个不同的值

使用:

margin:2px1px3px4px (top, right, bottom, left)

。而不是

margin-top: 2px;margin-right: 1px;margin-bottom: 3px;margin-left:4px

三个不同的值

使用:

margin:5em1em3em (top, rightandleft, bottom)

。而不是

margin-top: 5em;margin-right: 1em;margin-bottom: 3em;margin-left:1em

两个不同的值

使用:

margin: 5% 1% (top andbottom, rightand left)

。而不是

margin-top: 5%;margin-right: 1%;margin-bottom: 5%;margin-left: 1%

一个不同的值

使用:

margin:0 (top, bottom, rightand left)

。而不是

margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left:0

上面 规则也适用于 paddingborder ( 有关 border的更多信息,请参见 below )。

边框

使用:

border:1pxblacksolid

。而不是

border-width: 1px;border-color: black;border-style:solid

使用:

border-right:1pxblacksolid

。而不是

border-right-width: 1px;border-right-color: black;border-right-style:solid

( 你可以替换为 topbottom 或者 left。)

可以方便地将 上面 CSS shorthand 规则与 margin 和 padding 所使用的shorthand 规则结合使用,如显示的below。

此框上的边框可以通过下面的CSS命令实现:

border:8pxsolid #336;border-left:10pxsolid #ccf;border-top:10pxsolid #ccf

你可以使用以下方法实现完全相同的效果:

border:8pxsolid #336;border-width:10px8px8px10pxborder-color: #ccf #336 #336 #ccf

结束语

CSS shorthand 属性很好 ! 它们是减少CSS文档中包含的代码数量,允许更快的下载时间和更容易编辑的一种好方法。 现在谁能跟你争论?


Short  PROP  Shorthand  
相关文章