CSS进阶篇——简写属性 (shorthand properties)

Posted 2022-10-03 老梁写代码

有些情况下，多个 CSS 属性值可以整合成一串值，每个值之间用空格隔开。

边距

margin 属性可以将 ：

• margin-top
• margin-right，
• margin-bottom
• margin-left

整合成一条属性：property: top right bottom left'。

所以，下面这段代码：

p 
    margin-top: 1px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 20px;

可以简写成：

p 
    margin: 1px 5px 10px 20px;

padding 也一样。

如果属性值只有两个（比如 padding: 1em 10em;），那么第一个值表示头部和底部，第二只表示左边和右边。

边框

border-width 也有同样的用法。可以将 border-width，border-color 和 border-style 整合成一个 border 属性。

比如，下面这段代码：

p 
    border-width: 1px;
    border-color: red;
    border-style: solid;

可以简化为：

p 
    border: 1px red solid;

宽度 / 颜色 / 样式的组合也可以作用于 border-top 和 border-right 等。

字体

字体相关的属性也可以聚合成一条：

p 
    font: italic bold 12px/2 courier;

font 属性的四个取值分别代表

• font-style
• font-weight
• font-size
• line-height
• font-family。

以上属性可以全部结合起来一起用，例如：

p 
    font: 14px/1.5 "Times New Roman", times, serif;
    padding: 30px 10px;
    border: 1px black solid;
    border-width: 1px 5px 5px 1px;
    border-color: red green blue yellow;
    margin: 10px 50px;