雙18期|CSS揭祕之簡寫屬性

語言: CN / TW / HK
ead>

theme: channing-cyan highlight: a11y-dark


持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第13天,點選檢視活動詳情

雙18期|CSS揭祕之簡寫屬性

tips:每個技術點都值得優學優寫:18期

一、寫在前面

css 簡寫屬性瞭解嗎?前端程式設計師肯定是常見常用,但平時很少有這個提法,所以當被問及的時候,可能會有點蒙,但這是一個“正經”的詞彙和名稱,相信系統學過 CSS 的同學會對簡寫屬性(Shorthand properties)有印象。

導讀:本文將歸納 CSS 中常見的簡寫屬性,包括它們的用法以及簡寫的優缺點。

①all:通用簡寫屬性

②font:字型

③background:背景

④border:邊框

⑤margin 和 padding:外邊距和內邊距

二、CSS常見簡寫屬性

2.1 通用簡寫屬性:all

CSS 提供了一個通用的簡寫屬性 all,它可以應用於文件裡所有的屬性。它的目的是改變屬性的繼承模型。

CSS 的 shorthand(簡寫) 屬性 all 可以用於同時將這些繼承值中的一個應用於(幾乎)所有屬性。 它的值可以是其中任意一個(inherit, initial, unset, or revert)。 這是一種撤銷對樣式所做更改的簡便方法,以便回到之前已知的起點。

```md inherit:設定該屬性會使子元素屬性和父元素相同。實際上,就是 "開啟繼承".

initial:設定屬性值和瀏覽器預設樣式相同。如果瀏覽器預設樣式中未設定且該屬性是自然繼承的,那麼會設定為 inherit。

unset:將屬性重置為自然值,也就是如果屬性是自然繼承那麼就是 inherit,否則和 initial一樣。

revert:目前僅被很少瀏覽器支援。 ```

例如像下面這樣:例子中有兩個 div,第一個 div 應用了樣式選擇器 div 的樣式, 第二個通過 類選擇器 unset-all 設定 all 為 unset,重置了幾乎所有樣式。

```html

這是一段文字

這是另一段文字,它將被充值樣式

```

```css div { background-color: red; border: 2px solid green; }

.unset-all { all: unset; } ```

下面是一張效果圖

image.png

2.2 簡寫屬性:font

font 屬性可以用來作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡寫,或將元素的字型設定為系統字型。

font 的語法

```md [ [ <'font-style'> || || <'font-weight'> || <'font-stretch'> ] ? <'font-size'> [ / <'line-height'> ] ? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar = [ normal | small-caps ]

<'font-style'> – font-style CSS 屬性允許你選擇 font-family 字型下的 italic 或 oblique 樣式。 <'font-variant'> – font-variant 屬性是font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian (en-US)等屬性的簡寫。你也可以使用簡寫 font 設定font-variant在 CSS Level 2 (Revision 1) 中的值(即normal 或 small-caps)。
<'font-weight'> – font-weight CSS 屬性指定了字型的粗細程度。一些字型只提供 normal 和 bold 兩種值。 <'font-stretch'> – font-stretch 屬性為字型定義一個正常或經過伸縮變形的字型外觀,這個屬性並不會通過伸展/縮小而改變字型的幾何外形,如font-feature-settings和font-variant屬性,它僅僅意味著當有多種字型可供選擇時,會為字型選擇最適合的大小。 <'font-size'> – font-size CSS 屬性指定字型的大小。因為該屬性的值會被用於計算 em 和 ex 長度單位,定義該值可能改變其他元素的大小。
<'line-height'> – line-height CSS 屬性用於設定多行元素的空間量,如多行文字的間距。對於塊級元素,它指定元素行盒(line boxes)的最小高度。對於非替換的 inline 元素,它用於計算行盒(line box)的高度。 <'font-family'> – CSS 屬性 font-family 允許您通過給定一個有先後順序的,由字型名或者字型族名組成的列表來為選定的元素設定字型。 ```

應用舉例

設定 font 非簡寫的寫法 css .text{ font-style: oblique; font-weight: normal; font-size: 1em; line-height: 1.8; font-family: Arial, sans-serif; }

設定 font 簡寫的寫法 css .text{ font: oblique normal 1em/1.8 Arial, sans-serif; }

2.3 簡寫屬性:background

background 是一種 CSS 簡寫屬性,用於一次性集中定義各種背景屬性, 包括 color, image, origin 與 size, repeat 方式等等。

可以在一次宣告中定義一個或多個屬性:background-clip、background-color、background-image、 background-origin、background-position、background-repeat、background-size, 和 background-attachment。

```md ① background-clip:設定元素的背景(背景圖片或顏色)是否延伸到邊框、內邊距盒子、內容盒子下面。 可選值有: border-box:背景延伸至邊框外沿(但是在邊框下層)。 padding-box:背景延伸至內邊距(padding)外沿。不會繪製到邊框處。 content-box:背景被裁剪至內容區(content box)外沿。 text:背景被裁剪成文字的前景色。

② background-color:設定背景色

③ background-image:設定背景圖

④ background-origin:規定了指定背景圖片background-image 屬性的原點位置的背景相對區域。 注意:當使用 background-attachment 為 fixed 時,該屬性將被忽略不起作用。 可選值有: border-box:背景圖片的擺放以 border 區域為參考; padding-box:背景圖片的擺放以 padding 區域為參考; content-box:背景圖片的擺放以 content 區域為參考; inherit:設定該屬性會使子元素屬性和父元素相同。實際上,就是 "開啟繼承"。

⑤ background-position:為每一個背景圖片設定初始位置。這個位置是相對於由 background-origin 定義的位置圖層的。

⑥ background-repeat:定義背景影象的重複方式。背景影象可以沿著水平軸,垂直軸, 兩個軸重複,或者根本不重複。設定背景圖時,這個值很關鍵。

⑦ background-size:設定背景圖片大小。圖片可以保有其原有的尺寸,或者拉伸到新的尺寸, 或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。 注意:沒有被背景圖片覆蓋的背景區域仍然會顯示用background-color屬性設定的背景顏色。 此外,如果背景圖片設定了透明或者半透明屬性,襯在背景圖片後面的背景色也會顯示出來。

有趣的是,它有兩個值 contain 和 cover,是的和 object-fit 的那兩個值一樣,表達的意義和所起的效果也一樣。

⑧ background-attachment:決定背景影象的位置是在視口內固定,還是隨著包含它的區塊滾動。

/ 關鍵 屬性值: scroll,fixed 和 local/ // 此關鍵屬性值表示背景相對於元素本身固定,而不是隨著它的內容滾動(對元素邊框是有效的)。 background-attachment: scroll;

// 此關鍵屬性值表示背景相對於視口固定。即使一個元素擁有滾動機制,背景也不會隨著元素的內容滾動。 background-attachment: fixed;

// 此關鍵屬性值表示背景相對於視口固定。即使一個元素擁有滾動機制,背景也不會隨著元素的內容滾動。 background-attachment: local;

```

設定 background 的非簡寫寫法 css .text { background-color: #3ff5e1; background-image: url(/bg.png); background-repeat: no-repeat; background-position: top right; }

設定 background 的簡寫寫法 css .text{ background: #3ff5e1 url(/bg.png) no-repeat top right; }

下面是一個利用簡寫屬性 background, 設定漸變+透明背景色的示例:

css .box{ background: linear-gradient( 270deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.21) 52%, rgba(255, 255, 255, 0.24) 100% ); }

2.4 簡寫屬性:border

border 用於設定各種單獨的邊界屬性的簡寫屬性。border 可以用於設定一個或多個以下屬性的值: border-width, border-style, border-color。

語法提示:

```md border: || ||

line-width:邊框寬度

line-styly:邊框樣式,具有8種值,如下: solid 實線 dotted 圓點虛線 dashed 方形虛線 double 雙實線 groove 有雕刻效果的邊框 ridge 有浮雕效果的邊框 inset 有陷入效果的邊框 outset 有突出效果的邊框

color:邊框顏色 ```

下面是簡寫屬性 border 的應用示例和效果圖

image.png

```html

CSS 簡寫屬性

  • CSS 簡寫屬性:border solid 實線
  • CSS 簡寫屬性:border dotted 圓點虛線
  • CSS 簡寫屬性:border dashed 方形虛線
  • CSS 簡寫屬性:border double 雙實線
  • CSS 簡寫屬性:border groove 有雕刻效果的邊框
  • CSS 簡寫屬性:border ridge 有浮雕效果的邊框
  • CSS 簡寫屬性:border inset 有陷入效果的邊框
  • CSS 簡寫屬性:border outset 有突出效果的邊框

```

2.5 簡寫屬性:margin 和 padding

margin 和 padding 是最常用的兩個簡寫屬性,它們的簡寫規則一樣,如下:

```md 當只有一個值宣告時,該值會用於所有四個值。 例如 margin: 5px,表示上下左右的外邊距都是 5px。

當只有兩個值宣告時,第一個值用於上邊距和下邊距,第二個值用於左邊距和右邊距。 例如 margin: 5px 10px,表示上下外邊距為 5px,左右外邊距為 10px。

當有三個值宣告時,第一個值用於上邊距,第二個值用於左邊距和右邊距,第三個值用於下邊距。 例如,padding: 5px 10px 20px,表示上內邊距為 5px,左右內邊距為 10px,下外邊距為 20px。

當有四個值宣告時,其會按順序用於上、右、下、左邊距(按順時針)。 例如,padding: 5px 10px 15px 20px,表示上內邊距為 5px,右為 10px,下為 15px,左為 20px。 ```

需要注意的是,行內元素的邊距和寬高的特殊性。以 span 為例的行內元素的寬高邊距有效性:

width:無效。height:無效。

margin:left和right有效,top和bottom無效。

padding:left和right有效,top會覆蓋前面的元素,bottom會和後面的元素重疊。

三、簡寫的優缺點

3.1 簡寫的優點

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

例如下面這兩種寫法:

background 簡寫的寫法 css .text{ background: #5B9BD5 url(/bg.png) no-repeat bottom left; }

background 非簡寫的寫法 css .text{ background-color: #5B9BD5; background-image: url(/bg.png); background-repeat: no-repeat; background-position: bottom left; }

又如下面的例子:

padding 的簡寫寫法 css /*表示設定上下左右內邊距為:10px*/ .text{ padding: 10px; } padding 的非簡寫寫法 css .text{ /*設定上下左右內邊距為:10px*/ padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; }

上面的兩個例子可以明顯看出簡寫屬性的好處:更簡潔,更少的程式碼,更節約時間(前提是你掌握並熟悉這些寫法)。事實上,css 簡寫屬性的應用, 也是很多規範檢測工具和開發工具倡導的,它們通常會通過給可以簡寫但沒有簡寫的程式碼,給出類似波浪線的預警提示, 就像下面這樣:

image.png

3.2 簡寫的缺點

CSS 規範定義簡寫屬性的目的在於將那些關於同一主題的常見屬性的定義集中在一起。 注意是同一主題,也就是說簡寫是有規則的,這就意味著你需要花更多時間去記憶和熟練這些寫法。

此外,簡寫屬性語言通常不夠友好,例如

語義不夠友好的寫法 css .text{ padding: 10px 20px 5px 15px; }

語義更好的寫法,可以很快很容易看出上下左右的邊距是多少。 css .text{ /*設定上下左右內邊距為:10px,20px,5px,15px*/ padding-top: 10px; padding-right: 20px; padding-bottom: 5px; padding-left: 15px; }

還有例如, background: #5B9BD5 url(/bg.png) no-repeat bottom left;padding: 2px 5px 4px, 不熟悉簡寫語法的人,會有理解解讀負擔。也有說法說,簡寫屬性的效能開銷更大(但我認為這應該影響不大, 但是如果你只需要設定上邊距,那麼 padding-top 可能比 padding 更合適)。

綜上,使用 CSS 簡寫屬性的缺點有:

①學習成本更大,需要記憶簡寫語法。

②語義不友好,記憶理解負擔更大。

③會附加可能不想要的初始值。對於所有簡寫屬性,任何沒有被指定的值都會被設定為它們的初始值,但是這個初始值可能不是你想要的, 有時會帶來麻煩,所以,當你僅是設定某一個值時,不必使用簡寫屬性,因為那會附帶一些別的初始值。

四、寫在後面

①請注意瀏覽器相容性,儘管大多數現代瀏覽器已經完全支援這些簡寫屬性。

②簡寫屬性沒有指定的值會被設定為它的初始值,這意味著,在簡寫屬性中沒宣告某個具體值,它將會覆蓋之前設定的值。 例如設定了 background-color: blue;後面又設定了 background: url(/bg.png) no-repeat top right; 最後 background-color 的值會是預設值 transparent,而不是 blue。背景圖並不代表背景色,那是兩個屬性,儘管背景圖可能擋住了背景色。

③關於簡寫屬性的值的順序,當各個屬性的值使用不同型別表示時,順序很隨便。但是當這些屬性的值是相同型別的時,它們的順序就是特定的。 例如 border: dotted 5px #42b983; 和 border: 5px dotted #42b983;是一樣的效果。 但是 padding: 5px 6px; 和 padding: 6px 5px; 則是不同的意義。