CSS 简写属性

引言

使用CSS的主要优势之一是显著减少了网页下载时间。 过去，要设置文本样式，你必须一遍又一遍地使用 <font> 标签。 你可能也使用表格、嵌套表格和间隔 GIF 来布局你的网站。 现在，所有这些表现层信息都可以放在一个CSS文档中，每个命令只列出一次。

但为什么不更进一步呢？ 通过使用CSS简写属性，你可以进一步减小你的CSS文档的大小。

字体

用途

font: 1em/1.5em bold italic serif

...而不是

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

这CSS简写属性只有在同时指定 font-size 和 font-family 时才有效——省略任何一个，该CSS规则将被完全忽略。 此外，如果你没有指定 font-weight、font-style 或 font-varient，那么这些值将自动默认为 normal，因此也要记住这一点。

背景

用途

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

...而不是

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

从背景CSS简写属性中省略任何这些命令，浏览器将使用默认值。 如果你省略了 background-position 命令，则任何背景图像都将放置在容器的左上角，然后水平和垂直重复。

列表

用途

list-style: disc outside url(image.gif)

...而不是

list-style: #fff;

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

省略任何这些CSS命令，浏览器将使用默认值，即 disc、outside 和 none（即没有图像）。

边距和内边距

有许多不同的CSS边距和内边距的简写命令，具体取决于包含元素的哪些边具有相同的 margin 或 padding 值

四个不同的值

用途

margin: 2px 1px 3px 4px (top, right, bottom, left)

...而不是

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

三个不同的值

用途

margin: 5em 1em 3em (top, right and left, bottom)

...而不是

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

两个不同的值

用途

margin: 5% 1% (top and bottom, right and left)

...而不是

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

一个不同的值

用途

margin: 0 (top, bottom, right and left)

...而不是

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

上述规则也适用于 padding 和 border（有关 border 的更多信息，请参见下文）。

Border

用途

border: 1px black solid

...而不是

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

用途

border-right: 1px black solid

...而不是

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

（你可以用 top、bottom 或 left 替换 right。）

上述CSS简写规则可以方便地与边距和内边距使用的简写规则结合，如下所示。

 

此框上的边框可以通过以下方式实现CSScommand

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

你可以通过使用

border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf

结论

CSS简写属性很棒！ 它们是减少文档中代码量的绝佳方法，从而实现更快的下载速度和更轻松的编辑。 还有谁能反对呢？CSS文档，从而实现更快的下载速度和更轻松的编辑。 还有谁能反对呢？