CSS - 自定義屬性：初學者的友好指南
你好，未來的 CSS 巫師們！? 今天，我們將踏上一段令人興奮的旅程，探索 CSS 自定義屬性的世界。別擔心你對編程還是新手——我將成為你的友好導師，我們會一步步來。到了這個教學的結尾，你將會用你的 CSS 超能力讓朋友們感到驚奇！
CSS 自定義屬性是什麼？
讓我們從基礎開始。CSS 自定義屬性，也稱為 CSS 變量，就像是神奇的容器，存放著你可以在整個樣式表中使用的值。想像它們是你可以存放你喜歡的顏色、大小或其他 CSS 值的小盒子。
為什麼使用自定義屬性？
- 可重用性：寫一次，到處使用！
- 靈活性：在一個地方改變值，到處看到變化。
- 可維護性：更容易更新和管理你的樣式。
語法：如何聲明和使用自定義屬性
讓我們來看看一些代碼！這是如何聲明一個自定義屬性的方法：
:root {
--my-favorite-color: #ff6347;
}在這裡，我們創建了一個名為 --my-favorite-color 的自定義屬性，並給它一個可愛的番茄紅色值。:root 選擇器意味著這個變量在我們整個文檔中都可用。
要使用這個屬性，我們使用 var() 函數：
.tomato-text {
color: var(--my-favorite-color);
}現在，任何帶有 tomato-text 類的元素都會有我們喜歡的番茄紅色！
可能的值：你可以在自定義屬性中存儲什麼？
自定義屬性非常通用。你可以存儲幾乎任何 CSS 值：
| 值類型 | 示例 |
|---|---|
| 顏色 | --main-color: #3498db; |
| 長度 | --spacing: 20px; |
| 字符串 | --font-family: 'Arial', sans-serif; |
| 數字 | --z-index: 100; |
| 計算 | --width: calc(100% - 20px); |
应用範圍：你在哪裡可以使用自定義屬性？
簡單的答案？到處！你可以在任何 CSS 屬性值中使用自定義屬性。讓我們看一些例子：
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--main-font: 'Helvetica', sans-serif;
--spacing: 20px;
}
.button {
background-color: var(--primary-color);
color: white;
font-family: var(--main-font);
padding: var(--spacing);
margin-bottom: var(--spacing);
}
.section {
border: 2px solid var(--secondary-color);
}CSS 自定義屬性 - 設置值
你可以在 CSS 中設置自定義屬性的值，但你知道你也可以在 JavaScript 中設置它們嗎？這為動態樣式設置提供了無限可能！
// 使用 JavaScript 設置自定義屬性值
document.documentElement.style.setProperty('--primary-color', '#e74c3c');CSS 自定義屬性 - 分割顏色
這裡有一個很酷的技巧：你可以將顏色分割成它們的組成部分，並為每部分使用自定義屬性！
:root {
--red: 255;
--green: 99;
--blue: 71;
}
.tomato-background {
background-color: rgb(var(--red), var(--green), var(--blue));
}CSS 自定義屬性 - 阴影
自定義屬性使得像 box-shadow 這樣的複雜屬性變得更加易於管理：
:root {
--shadow-color: rgba(0, 0, 0, 0.2);
--shadow-offset-x: 5px;
--shadow-offset-y: 5px;
--shadow-blur: 10px;
}
.shadowed-box {
box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color);
}CSS 自定義屬性 - 渐变
使用自定義屬性，渐變變得遊刃有餘：
:root {
--gradient-start: #3498db;
--gradient-end: #2ecc71;
}
.gradient-background {
background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
}CSS 自定義屬性 - 网格
自定義屬性可以使你的網格佈局更加靈活：
:root {
--grid-columns: 3;
--grid-gap: 20px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}CSS 自定義屬性 - 变换
變換變得更加易於閱讀和維護：
:root {
--rotate-angle: 45deg;
--scale-factor: 1.2;
}
.transformed-element {
transform: rotate(var(--rotate-angle)) scale(var(--scale-factor));
}CSS 自定義屬性 - 總結
你可以將自定義屬性與單位類型結合：
:root {
--base-size: 10;
}
.sized-element {
width: calc(var(--base-size) * 1px);
height: calc(var(--base-size) * 2px);
}CSS 自定義屬性 - 使用級聯
自定義屬性遵循 CSS 级聯，意味著你可以為特定元素覆盖它們：
:root {
--text-color: black;
}
.dark-theme {
--text-color: white;
}
p {
color: var(--text-color);
}CSS 自定義屬性 - :root
我們已經使用了很多 :root。它是一個特殊的伪類，代表文檔樹的根元素，通常是 <html> 元素。它是定義全局自定義屬性的好地方。
CSS 自定義屬性 - 結合使用 !important
自定義屬性可以與 !important 結合使用：
.override-color {
color: var(--text-color) !important;
}CSS 自定義屬性 - 备用值
你可以為自定義屬性提供备用值，以防它未定義：
.fallback-example {
color: var(--undefined-color, blue);
}CSS 自定義屬性 - @property
@property 規則是一個令人興奮的新特性，它允許你定義自定義屬性的特性：
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}這定義了一個名為 --my-color 的自定義屬性，它必須是一個有效的顏色值，不從父元素繼承，並具有初始值 #c0ffee。
亲爱的学生们，以上就是今天的全部内容！我們一起學習了很多，從 CSS 自定義屬性的基礎到一些進階技巧。記住，掌握這些概念的關鍵是练习。所以，去實驗吧，用你的新 CSS 超能力創造出惊人的设计！
下次見，快樂編程！?????
Credits: Image by storyset