基本的 css 語法縮寫

縮寫 css 語法不但可以減少 css 檔案的大小,讓讀取速度加快,同時也更方便閱讀。會想寫這篇文章是因為以前有跟朋友介紹過 CSS 整形與優化工具,怕大家優化後也不清楚到底有什麼更動?或者是怕 css 出問題而不敢優化,所以在這邊我整理了幾個基本的 css 縮寫給大家,希望以後大家在寫 css 時能更瞭解他的原理。

CSS 語法縮寫 – 顏色

使用 16 進制的色碼,假設這6個數字裡頭每2個數字相同,就可以進行縮寫。舉例如下:

  • #000000 → #000
  • #880000 → #800
  • #aabbcc → #abc

參考上述情況可以了解,一定要是相鄰的文字一樣才能縮寫唷!

CSS 語法縮寫 – 區塊邊界

這邊我們最常應用的就是 margin 以及 padding 兩個屬性。根據自定邊界位置的不同,由簡入繁總共有四種寫法:

  • margin: 1px; (所有邊界都是 1px)
  • margin: 3px 4px; (上&下邊界是 3px,左&右邊界是 4px)
  • margin: 3px 1px 4px; (上邊界是 3px,左&右邊界是 1px,下邊界是 4px)
  • margin: 3px 4px 1px 2px; (上邊界 3px,右邊界 4px,下邊界 1px,左邊界 2px)

透過這個原理我們可以發現到,「上下」為一組「左右」為一組。所以如果邊界剛好是同樣的單位可以將他們合併起來,但要特別注意的是,如果你的上&下邊界相同,左&右不相同,還是請乖乖寫四次吧!至於這四次的位置擺放要如何快速記憶呢?請大家把它想成一個順時針的循環,剛好就是上右下左

CSS 語法縮寫 – 0

正統的 css 語法裡頭,所有的單位都不能省略,因為 css 不只一個單位,有px、pt、em、%…等等。但是 0 這個數字非常的奇妙,只有 0 後面可以不用加任何單位,因為寫不寫都沒影響。

只是有時候因為習慣問題,有的人還是會順手在 0 後面加單位,如果次數一多,也會佔幾 kb,既然我們目的就是要縮減 css 語法,所以還是建議大家不加單位。

CSS 語法縮寫 – 同屬性

只要是同個屬性都可以加他們的語法合併在一起,像是 border (邊框)、 background (背景)、 list (項目)

border 的合併

CSS

合併後為: border: 1px solid #000;

background 的合併

CSS

合併後為: background: #fff url("images/muki.gif") no-repeat fixed top left;

因為 background 的屬性很多,所以我強烈推薦要將他們做合併,否則你要設定多個背景會拖得很長。而合併後有的屬性也可以省略不打,省略的屬性會採系統默認值。

background 默認值如下:

  • image: none
  • repeat: repeat
  • attachment: scroll
  • position: 0% 0%
  • color: transparent

list 的合併

CSS

合併後:list-style: square inside url("images/muki.gif");

這邊列舉三個同屬性的合併,假設下次你碰到有類似的同屬性狀況,就可以嘗試將他們做合併喔^^

小結

以上都是基本的 css 縮寫,我想大家最常用到的也是這幾個語法,所以應該是夠大家使用了!!

其實把握一個重點,就是「同屬性的幾乎都可以進行縮寫」,多加嘗試就會找到更多的縮寫樂趣唷~

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
3 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tina Yeh
Tina Yeh
5 years ago

請問合併屬性有規定每種屬性放置的先後順序嗎?

muki
5 years ago
Reply to  Tina Yeh

合併屬性不用管先後順序,所以就照你自己習慣的順序擺放即可 ~~

Tina Yeh
Tina Yeh
5 years ago
Reply to  muki

謝謝~

粉絲團