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