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

翻譯 | 小愛

學(xué)習(xí)使用編寫更少的CSS代碼，從而可以幫助你提升工作效率，實(shí)現(xiàn)更快地加載網(wǎng)站頁面。

同樣的功能，最后結(jié)果都是一樣的，一行就可以實(shí)現(xiàn)的，千萬不要寫多行，有人可能會說，一行書寫不易讀，但請想一下！如果一行就可以完成的效果，而你必須將所有內(nèi)容都寫成多行，那會使 CSS 文件太長且更難以閱讀，不是嗎？

準(zhǔn)備好了嗎？，讓我們開始吧！

以下是多個(gè)網(wǎng)頁中最常用的 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個(gè)小實(shí)例，是不是很方便，大大減少了CSS代碼，提升了工作效率，是不是很方便？如果你還知道其他簡寫技巧的話，請記得與我們一起來分享！

今天的內(nèi)容，請先將其保存起來以備將來使用。

感謝你的閱讀。

學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號

在一行中就可以完成的7個(gè)CSS代碼技巧！

學(xué)習(xí)更多技能請點(diǎn)擊下方公眾號

在一行中就可以完成的7個(gè)CSS代碼技巧！

學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號