你務必知道的css簡寫
簡寫屬性是可以讓你同時設置其他幾個 CSS 屬性值的 CSS 屬性。使用簡寫屬性,Web 開發人員可以編寫更簡潔、更具可讀性的樣式表,節省時間和精力。
CSS 規範定義簡寫屬性的目的在於將那些關於同一主題的常見屬性的定義集中在一起。比如 CSS 的 background 屬性就是一個簡寫屬性,它可以定義 background-color、background-image、background-repeat 和 background-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-style
、margin
或者 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個值的語法: |
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個值的語法: |
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: normal
和 font-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簡寫