CSS的簡寫屬性

NO IMAGE

工作中常會看到有人這樣寫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;
不定時更新,歡迎關注 ❤

CSS的簡寫屬性

相關文章

java多線程系列:ThreadPoolExecutor源碼分析

java多線程系列:ThreadPoolExecutor

利用高效的css提高你的開發效率~(下)

利用高效的css提高你的開發效率~(上)