英文 | https://javascript.plainenglish.io/7-tricks-to-write-css-code-in-one-line-64a4c9ffe57d

翻译 | 小爱

学习使用编写更少的CSS代码，从而可以帮助你提升工作效率，实现更快地加载网站页面。

同样的功能，最后结果都是一样的，一行就可以实现的，千万不要写多行，有人可能会说，一行书写不易读，但请想一下！如果一行就可以完成的效果，而你必须将所有内容都写成多行，那会使 CSS 文件太长且更难以阅读，不是吗？

准备好了吗？，让我们开始吧！

以下是多个网页中最常用的 CSS 代码，可以快速减少到一行，其效果也一样。

1、Background（背景）

background: #000 url(images/image.png) no-repeat left top;//vsbackground-color: #000;background-image: url(images/image.png)background-repeat: no-repeat;background-position: left top;

2、Animation(动画)

anmation: crazy 4s ease-in-out 0.5s 12 backwards;//vsanimation-name: crazy;animation-duration: 4s;animation-timing-function: ease-in-out;animation-deplay: 0.5s;animation-iteration-count: 12;animation-dirrection: backwards;

3、Font（字体）

font: itlaic bold 15px/1.2 Arial, sans-serif;//vsfont-style: italic;font-weight: bold;font-size: 15px;line-height: 1.2;font-family: Arial, sans-serif;

4、Margin（边距）

margin: 10px 5px 10px 5px;//vsmargin-top:10px;mrgin-right: 5px;margin-bottom: 10px;margin-left: 5px;

5、List（列表）

list-style: dic outside url('img/shape.png')// vslist-style-type: disc;list-style-position: outside;list_style-image: url('img/shape.png')

6、 Padding（填充）

padding: 1em 3px 30px 5px;//Vspadding-top: 1em;padding-right: 3px;padding-bottom: 30px;padding-left: 5px;

7、Border（边框）

border: 1px solide #000//vsborder-width: 1px;border-style: solid;border-color: #000

这7个小实例，是不是很方便，大大减少了CSS代码，提升了工作效率，是不是很方便？如果你还知道其他简写技巧的话，请记得与我们一起来分享！

今天的内容，请先将其保存起来以备将来使用。

感谢你的阅读。

在一行中就可以完成的7个CSS代码技巧！

学习更多技能
请点击下方公众号

在一行中就可以完成的7个CSS代码技巧！

学习更多技能请点击下方公众号

学习更多技能
请点击下方公众号