在我之前的開發中,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資料類型別。
在以後的工作生活中!嘗試去記住資料型別,而不是去記實際的每個屬性的屬性值吧;
用記住的資料型別,去延伸出實際的屬性值,也許會有額外的收穫!!!