你不得不瞭解的CSS資料型別

撿破爛的小z發表於2023-04-02

在我之前的開發中,CSS對於我來說,要用什麼找什麼,對CSS的瞭解並不算深入;在我剛開始深入學習CSS時,第一個遇到的就是CSS資料型別,我聽說過JS、TS的資料型別,CSS怎麼也有資料型別?但是隨著我對CSS資料型別的瞭解,CSS的大門也在緩緩為我開啟!!!

什麼是CSS資料型別?

引用《CSS新世界》中的介紹:

CSS資料型別的定義是CSS屬性中具有代表性的值,在規範的語法格式中,使用關鍵字外加一對尖括號表示。

怎麼去理解呢,我們可以去看看官方文件中對於 background-color的描述:

background-color : <color>  

上面語法示例中的 <color>就是我們說的CSS資料型別;

掌握CSS資料型別對了解CSS新世界的體系和快速學習CSS新特性非常有幫助!!!!!(切記)

為什麼要學習CSS資料型別?

首先我們要知道,在CSS中任何CSS屬性值,都一定包含一個或者多個資料型別!

在CSS2時代,CSS資料型別的概念並不重要,因為CSS常用的屬性翻來覆去就那麼幾個,這些屬性在我們工作中經常用到,久而久之我們也就都記住了。

但是!在CSS3到來的時代,由於各個CSS模組獨立發展,CSS3之後並不會再有統一的大版本變化,而是將CSS各個功能模組拆分為小模組獨立發展,這也就導致短時間內大量的CSS新屬性如雨後春筍般的冒了出來!

為了加速沒有爭議的CSS特性的標準化,W3C的CSS工作組做出了一項被稱為“Beijing doctrine”的決定,該決定將CSS劃分為更小的元件,並把這些元件成為模組。這些模組互相獨立,各自按照自己的速度走向標準化。

例如:CSS選擇器模組已經到了Level 4 了;彈性佈局模組還是 Level 1

如果此時我們還和CSS2那樣,只是憑藉經驗去記憶CSS的屬性值,去學習CSS的新特性,那麼學習起來肯定是十分痛苦的,因為效率非常低下!!!

因此CSS資料型別的優勢就出來了,我們無需記住數量繁多的CSS屬性值,只需要記住支援的資料型別即可!!

學習CSS資料型別有什麼用?

我們直接來舉個例子:

background-image 是一個非常常用的CSS屬性,我們來看看它的語法結構:

background-image : <image> | none 

上面的 <image> 就是一個CSS資料型別,它包括下面這些型別和函式:

  • <url>
  • <gradient>
  • element()
  • image()
  • image-set()
  • cross-fade()
  • paint()

也就是說,我們可以看到background-image屬性不僅支援url函式和漸變影像,還支援element()等函式!!

這是,我突然問你:CSS的mask-image屬性支援的屬性值有哪些呢?

這麼突然疑問,如果你沒有用過這個屬性,那相比一時半會你也想不出答案,讓我們來看看官方文件吧!

mask-image : none | <image> | <mask-source>

這個語法中出現了與background-image 一樣的 <image> 資料型別!!!這些就豁然開朗了!

這不就代表,background-image 支援的那些<url><gradient>element()image()等等這些屬性在mask-image中都是支援的?

這樣,我們透過理解CSS資料型別,就學會了mask-image這個語法的一半!

CSS資料型別的互通互聯

CSS資料型別除了可以幫助我們快速學習掌握CSS的語法,還能快速更新整個CSS世界的知識庫。

舉個例子:

我們都知道 background-image屬性是支援 paint()函式的,但是我們現在問你,mask-image屬性是否支援paint()函式?

此時,如果你是靠記憶實際屬性,由於你大腦中的記憶庫裡沒有相關資訊的儲備,因此你會疑惑,會不解,隨後去翻閱官方文件,甚至還要做一個小demo來確認一下。

但是,如果你記憶的是<image>型別,你可以迅速回答出:肯定支援,因為mask-image屬性值支援<image>資料型別,<image>資料型別中存在paint()函式。

因此,大家一定要關注CSS的資料型別,這可以讓我們學習CSS得新特性更迅速,理解CSS新特新更輕鬆!

試著學習幾個常見的CSS資料類型別。

在以後的工作生活中!嘗試去記住資料型別,而不是去記實際的每個屬性的屬性值吧;

用記住的資料型別,去延伸出實際的屬性值,也許會有額外的收穫!!!

相關文章