CSS 的简写属性

骑猪看日落 2023-05-29 02:22 3阅读 0赞

工作中常会看到有人这样写CSS

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

还有这样的:

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

总之冗余的代码很多，项目代码看起来就像一个粽子，看着不舒服。今天分享一个**CSS的简写属性**，让更多的人规范CSS代码，做到简单明了。

#### 一、定义 ####

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

`CSS` 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。

#### Border 属性 ####

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

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

可以简写成：

border: 1px solid #000;

#### Margin 和 Padding 属性 ####

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

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

和下面的声明是一样的（注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left）

margin: 10px 5px 10px 5px;
    padding: 10px 5px 10px 5px;

#### 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;

#### 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;

#### border-radius属性 ####

border-top-left-radius:     1em 5em;
    border-top-right-radius:    1em 5em;
    border-bottom-right-radius: 1em 5em;
    border-bottom-left-radius:  1em 5em;

可以简写成下面的：

border-radius: 1em/5em;

不定时更新，欢迎关注 ❤

![format_png][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xLzE2ZTI1MTg2NzcxZDc3Y2Q?x-oss-process=image/format,png