CSS 全名為 *Cascading Style Sheets。*又称串樣式列表、级联样式表、串接样式表、阶层式样式表、階層式樣式表），用容易理解的話來説就是一個能為HTML增添樣式，例如：改變字體的顔色，大小以及粗細。
External CSS, Internal CSS & Inline CSS 的优先顺序 #
Inline > Internal OR External
插入 CSS 的方法大致上分爲 3個：External CSS， Internal CSS，Inline CSS，瀏覽器的優先級別分別是 Inline > Internal & External。
如果同時 Internal CSS 與 External CSS 都對同一個標簽做出不同的樣式的話，瀏覽器會同時渲染 Internal 以及 External，但我們所看到的將會是較後面的。
CSS 最主要的功能就是美化 HTML 文本，用 CSS 我可以爲網站添加背景顏色，有或是有文本我也可以更改文字顏色，還是我更改圖片的尺寸等等，這些都是 CSS 的最常見的功能。
HTML就是一個個的格子，CSS 能做的是就是調整這個格子以及內容的呈現方（也就是之前文章所描述的“裝潢” style），例如我可以將邊邊角角給修飾掉，讓這個格子圓潤。
<body></body> 也是一個格子，就像現在看到的我只需要將背景添加 style 就行了。
下图是很棒的一个图片例子了解 padding``border``margin 的分别：padding 是内容以及边框（border）之间的空间，border 是边框，margin 是边款（border）以及外面内容之间的空间。
CSS Box ModelSource
CSS 長度單位 #
了解了 padding``boarder``margin 的分别后，就是认识长度单位: px``em``vw``vh 的分别
px = 像素單位 （pixel）
em = 是 「M」的寬度
rem = 「M」的倆目的。但是用的是最上層「root」的大小
vw vh = 是時視窗寬度的比例
何時該用哪個單位？Noob’s Space 的建議 #
- 想要印成固定大小的 PDF 或紙張 → 使用
mm、cm、pt，當成 Word 來用就對了 - 想要設
border→ 使用px - 想要設字體大小、
padding/margin→ 使用rem可以讓你固定比例又保持 a11y - 跟視窗大小有關的排版→ 使用
vw、vh、vmin、vmax
CSS 漸變
Photo byPaul Berthelon Bravo/Unsplash
黃昏之所以這麼讓人著迷，除了短暫之外另一點就是天空從熱色調過渡到冷色調的漸變的過程，除了夕陽，大自然也有不少因為光線亮度的變化，也是漸變的效果。這些漸變的效果除了能在繪圖軟件，調色做出來之外，支持 CSS3 的瀏覽器也能有漸變的效果。
這篇的文章的背景就是用 uiGradients 漸變效果製作的。uiGradients - Beautiful colored gradients
Google 的 Chrome 的市佔率相當的高，對於對於網絡的標準有相當的話語權，所以在Google 推出的教程在大部分瀏覽器都通用，但因爲各家瀏覽器都是使用不同的架構這也包括過期的瀏覽器，所以語法上有些不同。 background: #C6FFDD; /* fallback for old browsers / background: -webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD); / Chrome 10-25, Safari 5.1-6 / background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD); / W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
CSS 在不同瀏覽器的語法都不同。
如果有所顧慮可以在 CodePen 的沙盒環境調整CSS的效果。CodePen Project
CSS 色彩參考 #
CSS Nesting 巢狀 #
CSS nesting 可以更好的維持可讀性，也更好的維護，這樣如果要修改一些屬性並不需要來回查找。
Conclusion #
這些基本的理論知識雖然能直接問 Chatgpt 就能得到比我這篇更好的答案，不過有些知識還是親自實踐，應用在一些感興趣的專案會比較容易加深記憶點。
CSS 的功能越來越豐富，有些互動的功能可能也不需要用到 Javascript就能實現互動的效果。