1. 程式人生 > >你務必知道的css簡寫

你務必知道的css簡寫

evel 屬性 時間 英文單詞 dev 強調 編寫 web pre

簡寫屬性是可以讓你同時設置其他幾個 CSS 屬性值的 CSS 屬性。使用簡寫屬性,Web 開發人員可以編寫更簡潔、更具可讀性的樣式表,節省時間和精力。

CSS 規範定義簡寫屬性的目的在於將那些關於同一主題的常見屬性的定義集中在一起。比如 CSS 的 background 屬性就是一個簡寫屬性,它可以定義 background-colorbackground-imagebackground-repeatbackground-position 的值。類似地,最常見的字體相關的屬性可以使用 font 的簡寫,盒子(box)各方向的外邊距(margin) 可以使用 margin 這個簡寫。

一:沒有指定的值會被設置為它的初始值。這意味著,它將會覆蓋之前設置的值;例如

background-color: red;
background: url(images/bg.gif) no-repeat top right;

以上樣式不會將 background 的 color 值設置為 red,而是 background-color 的默認值 transparent,因為第二條規則優先。

二:簡寫屬性不強調特定順序。這適用於那些些屬性使用不同類型的值時,因為這個時候順序並不重要。但當幾個屬性可以設置相同值的時候,就沒那麽簡單了。處理這些情況分以下幾種類型:

1.處理和盒子(box)邊界(edge)相關的屬性時,比如 border-stylemargin 或者 padding, 始終使用一致的1個到4個值的語法表示這些邊界:

技術分享圖片 1個值的語法:border-width: 1em — 這一個值表示所有的邊框寬度
技術分享圖片 2個值的語法:border-width: 1em 2em — 第一個值表示垂直方向的,即 top 和 bottom;第二個值表示水平方向的,即 left 和 right
技術分享圖片 3個值的語法:border-width: 1em 2em 3em — 第一個值表示 top;第二個值表示水平方向的,即 left 和 right; 第三個值表示 bottom
技術分享圖片

4個值的語法:border-width: 1em 2em 3em 4em — 這四個值分別表示 top、right、bottom、left,總是按此順序,即從 top 開始的順時針順序(Top-Right-Bottom-Left 首字母與英文單詞 trouble 的順序一致:TRBL)

2.同樣,在處理和盒子的角相關的屬性時,比如 border-radius,也始終使用一致的 1個到4個值的語法表示:

技術分享圖片 1個值的語法:border-radius: 1em — 這一個值表示所有的表框角度的半徑
技術分享圖片 2個值的語法:border-radius: 1em 2em — 第一個值表示 top-left 和 bottom-right 方向的角;第二個值表示 top-right 和 bottom-left 方向的角
技術分享圖片 3個值的語法:border-radius: 1em 2em 3em — 第一個值表示 top-left 方向的角 ,第二個值表示top-right 和 bottom-left 方向的角,第三個值表示 bottom-right 方向的角
技術分享圖片

4個值的語法:border-radius: 1em 2em 3em 4em — 這四個值分別表示top-left、 top-right、 bottom-right 、bottom-left 方向的角。總是按此順序,即從top-left開始的順時針順序

Background 屬性

background 有以下屬性:

" style="color: rgb(128, 0, 128);">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;

簡寫的形式實際上等價於以上普通屬性再加上 background-attachment: scroll 以及 CSS3 中的一些附加屬性。

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;

這個簡寫聲明實際上等價於以上普通屬性再加上 font-variant: normalfont-size-adjust: none (CSS2.0 / CSS3),font-stretch: normal (CSS3)。

Border 屬性

對於 border 來說,寬度、顏色和類型是可以被簡寫到一個聲明裏的。比如:

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

可以簡寫成:

border: 1px solid #000;

Margin 和 Padding 屬性

margin 和 padding 值的簡寫版本類似。下面的 CSS 聲明:

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

和下面的聲明是一樣的(註意,值是從 top 順時針開始的:top、right、bottom、接著是 left)

margin: 10px 5px 10px 5px;

你務必知道的css簡寫