CSS - 所有屬性：初学者的全面指南

你好，未來的 CSS 巫師們！我很興奮能成為你們在這個精彩旅程中的導遊，一起探索 CSS 的世界。今天，我們將要探索一個強大但常被忽視的屬性，叫做 all。它就像一根魔杖，可以用一行代碼重置元素的所 styles。這不是很棒嗎？讓我們一起深入探討！

CSS - All

CSS `all` 屬性是什麼？

在我們深入細節之前，讓我們先了解 all 屬性是做什麼的。想像你正在粉刷一個房間，並想從頭開始。而不是逐個擦除每種顏色，如果你能一次性重置所有東西，豈不是很好？這正是 CSS 中的 all 屬性所做的！

all 屬性是一個簡寫，它將元素的所 styles 重置為它們的初始值或繼承值，除了 unicode-bidi 和 direction 屬性。這就像在你元素的 styles 上按下了重置按鈕。

組成屬性

現在，你可能會想，"到底 'all' 屬性意味著什麼？" 好吧，它包括了你可以用 CSS 設置的几乎所有東西！讓我們將其分解為以下類別：

盒模型屬性
排版屬性
顏色和背景屬性
布局屬性
動畫和過渡屬性
以及更多！

以下是一個表格，顯示了一些受 all 屬性影響的最常見屬性：

分類	屬性
盒模型	width, height, margin, padding, border
排版	font-size, font-family, line-height, text-align
顏色	color, background-color
布局	display, position, float
動畫	animation, transition

可能的值

all 屬性可以接受四個值之一。讓我們一一探討：

1. initial

.element {
all: initial;
}

這個值將所有屬性重置為 CSS 規範中定義的初始值。這就像將元素返回到它的"出廠設置"。

2. inherit

.element {
all: inherit;
}

這會讓元素從其父元素繼承所有屬性。這就像說，"嘿元素，只需複製你父親正在做的一切！"

3. unset

.element {
all: unset;
}

這是 initial 和 inherit 的組合。如果屬性是自然繼承的，它會像 inherit 一樣行動。如果不是，它會像 initial 一樣行動。

4. revert

.element {
all: revert;
}

這會將所有屬性重置為瀏覽器的默認樣式。這就像告訴瀏覽器，"忘掉我們做的一切，讓我們回到你的默認設置。"

語法

all 屬性的語法非常直接：

選擇器 {
all: 值;
}

其中 值 可以是我們剛才討論的四個選項之一：initial、inherit、unset 或 revert。

CSS all - 基本範例

讓我們通過一個真實世界的範例來將這些知識付諸實踐。想像你正在構建一個網站，並想創建一個"重置"按鈕，從元素中刪除所有樣式。以下是如何操作的：

<div class="styled-div">
<p>這是一個已設置樣式的段落。</p>
</div>
<button onclick="resetStyles()">重置樣式</button>

<style>
.styled-div {
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
font-family: Arial, sans-serif;
}

.styled-div p {
color: #0066cc;
font-size: 18px;
line-height: 1.5;
}

.reset {
all: initial;
* { all: unset; }
}
</style>

<script>
function resetStyles() {
document.querySelector('.styled-div').classList.toggle('reset');
}
</script>

在這個範例中，我們有一個帶有段落的已設置樣式的 div。當你點擊"重置樣式"按鈕時，它會切換 reset 類，使用 all 屬性來刪除所有樣式。

讓我們分解一下發生了什麼：