CSS简写小集

CSS简写小集攻略

简介

CSS简写指的是使用一行代码就能够完成多个 CSS 属性赋值的方式。它能够大幅度缩短 CSS 代码量，增加代码可读性和优雅度。

语法

通用语法格式如下：

selector {
    property1: value1;
    [property2: value2;]
    [property3: value3;]
    [...]
}

使用 CSS 简写格式，代码可以缩写成：

selector {
    property1: value1;
    property2: value2;
    property3: value3;
    [...]
}

其中，属性名可以通过驼峰式命名方式，如“background-color”可写成“backgroundColor"。

示例

例一

比如我们要给一个元素添加背景颜色、背景图像、背景重复方式和背景定位，一般的写法是：

background-color: #fff;
background-image: url("bg-img.jpg");
background-repeat: no-repeat;
background-position: center top;

而使用 CSS 简写后，我们可以这样写：

background: #fff url("bg-img.jpg") no-repeat center top;

例二

再比如，我们要设置文本颜色、字体大小、字体粗细、行高和对齐方式，一般的写法是：

color: #333;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
text-align: center;

而使用 CSS 简写后，我们可以这样写：

font: 700 14px/1.5 sans-serif;
color: #333;
text-align: center;

总结

CSS 简写策略虽然会影响到代码的阅读性，但其简单的写法和提高效益，会使你的工作更快、更流畅、更有效。在实际开发中，灵活运用 CSS 简写规范可以让你的代码更加简洁明了。