全域關鍵字與文字數值
CSS 的樣式屬性除了長度、顏色或角度單位，有些時候也會使用一些「全域關鍵字」或「文字」作為屬性值，這篇教學會介紹 CSS 提供的全域關鍵字 inherit、initial、unset、revert 和 revert-layer，以及一些特殊作用的文字數值，例如虛擬元素的文字換行、單引號、雙引號...等。
快速導覽：
全域關鍵字：inherit、initial、unset
CSS 最初提供三個全域關鍵字，分別是：inherit、initial、unset，這三個關鍵字可用於「所有的樣式屬性」，三個關鍵字說明如下：
| 全域關鍵字 | 說明 |
|---|---|
| inherit | 繼承，繼承父元素的樣式屬性。 |
| initial | 還原樣式的初始值。 |
| unset | 元素預設的繼承行為 ( 參考「樣式的繼承與聯集」)。 |
下方的程式碼執行後，當 div 的樣式屬性設定為 unset，繼承的行為就和完全不設定相同，會繼承文字樣式顏色，但不會繼承邊框邊距，如果設定 inherit，則會完全繼承，設定 initial 則完全不繼承。
<!-- HTML 程式碼 -->
<div class="a">
<div>oxxo.studio</div> <!-- 這個 div 使用預設值 -->
<div class="b">hello world</div>
<div class="c">hello world</div>
<div class="d">hello world</div>
</div>
<!-- CSS 程式碼 -->
<style>
.a {
font-size: 30px;
color: red;
border: 1px solid black;
margin: 10px;
}
.b {
font-size: inherit;
color: inherit;
border: inherit;
margin: inherit;
}
.c {
font-size: initial;
color: initial;
border: initial;
margin: initial;
}
.d {
font-size: unset;
color: unset;
border: unset;
margin: unset;
}
</style>
全域關鍵字：revert、revert-layer
隨著瀏覽器的進步，CSS 後來又提供兩個全域關鍵字，分別是：revert、revert-layer，這兩個關鍵字主要用於「還原預設樣式屬性」，兩個關鍵字說明如下：
| 全域關鍵字 | 說明 |
|---|---|
| revert | 還原成瀏覽器所提供的預設樣式。 |
| revert-layer | 還原成上一層 @layer 的樣式。 |
首先看到 revert 關鍵字，下方範例會使用四個 button，button 元素有個特色，只要設定了「背景色或邊框」，整體預設樣式就會被覆蓋，而範例中透過 revert 關鍵字，就能適時地將部份樣式還原成預設樣式，甚至還可以搭配特殊樣式屬性 all，讓所有樣式屬性都還原成預設樣式。
更多參考：all 所有樣式、HTML 按鈕 button
<!-- HTML 程式碼 -->
<button>apple</button>
<button class="a">banana</button>
<button class="b">oxxo</button>
<button class="c">orange</button>
<!-- CSS 程式碼 -->
<style>
button {
border: 2px dashed #000;
font-size: 30px;
color: #f00;
}
.a {border: revert;} /* 還原 border */
.b {
font-size: revert; /* 還原 font-size */
border: revert; /* 還原 border */
}
.c {all: revert;} /* 全部還原 */
</style>
關鍵字 revert-layer 顧名思義是針對 @layer 的屬性值，也只有在 @layer 定義中才有作用，下方範例中會產生三個 CSS 分層，套用第一層時為紅色，套用第二層為藍色，套用第三層為綠色，當屬性值使用關鍵字 revert-layer 之後，就會套用上一層的樣式。
更多參考：CSS @layer 分層優先順序
<!-- HTML 程式碼 -->
<h2 class="a">apple</h2>
<h2 class="b">banana</h2>
<h2 class="c">oxxo</h2>
<h2 class="d">orange</h2>
<!-- CSS 程式碼 -->
<style>
@layer layer1 layer2 layer3;
@layer layer1 {
h2 {color: red;}
.a {color: revert-layer;} /* 還原上一層，但因為沒有上一層，採用系統預設黑色 */
}
@layer layer2 {
h2 {color: blue;}
.a, .b {color: revert-layer;} /* 還原上一層，呈現紅色 */
}
@layer layer3 {
h2 {color: green;}
.a, .b, .c {color: revert-layer;} /* 還原上一層，呈現藍色 */
}
</style>
特殊屬性數值：none 與 0
none 和 0 是屬於有點特別的屬性值，none 表示「無」，通常出現在具有「文字屬性」的樣式，0 則會出現在「數字屬性」的樣式，通常撰寫 0 就「不需要加上單位」，等同「0%、0px、0pt」，下方的範例執行後，會將一些樣式，套用 none 和 0 的數值。
<!-- HTML 程式碼 -->
<div class="a">oxxo</div>
<div class="b">apple</div>
<div class="c">banana</div>
<!-- CSS 程式碼 -->
<style>
.a {
margin: 10px;
padding : 10px;
border: none;
background : pink;
}
.b {
margin: 10px;
padding : 10px;
border: 1px solid #000;
background : orange;
}
.c {
margin: 0;
padding : 0;
border: 0 solid #000; /* 和 none 有點像，但意義不同 */
background : cyan;
}
</style>
文字數值與跳脫字元
樣式屬性的「文字數值」指的是「純文字」，常應用於「虛擬元素」的 content 屬性 ( 參考「虛擬元素選擇器」)，也常搭配 CSS 函式「attr()」一起使用 ( 參考「CSS 函式 ( 文字與清單計數 )」)，下方範例執行後，會使用虛擬元素，在 h2 的前後加上文字。
<!-- HTML 程式碼 -->
<h2 type="name">oxxo</h2>
<h2 type="fruit">apple</h2>
<!-- CSS 程式碼 -->
<style>
h2::before {
content: "123 ";
}
h2::after {
content: " <<" attr(type) ">>"
}
</style>
如果純文字裡需要使用「特殊符號」，例如單引號、雙引號、換行...等，則要使用「\」跳脫字元進行轉義，下方列出常用的跳脫字元 unicode，並用範例呈現相關效果。
| 跳脫字元 unicode | 說明 |
|---|---|
\\ |
斜線。 |
\' |
單引號。 |
\" |
雙引號。 |
\A、\a |
換行，必須與 white-space: pre; 一起使用。 |
<!-- HTML 程式碼 -->
<h2 type="name">oxxo</h2>
<!-- CSS 程式碼 -->
<style>
h2::before {
content: "123\"456\"\A\\789\\\a";
white-space: pre;
}
h2::after {
content: "\a<<" attr(type) ">>";
white-space: pre;
}
</style>
網址
「網址」常應用於「背景圖片」或「清單圖示」，支援「絕對路徑」和「相對路徑」，開啟下方的範例後，會在 div 裡放入背景圖片，以及替換清單的圖示。
<!-- HTML 程式碼 -->
<div></div>
<ul>
<li>oxxo</li>
<li>apple</li>
<li>banana</li>
</ul>
<!-- CSS 程式碼 -->
<style>
div {
width:200px;
height:225px;
background-image: url(https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg);
background-size: cover;
}
li::marker {
content: url(https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_chrome-16.png) " ";
}
</style>
網址也可以使用「十六進位的圖片編碼」或「SVG 圖片編碼」，這個做法可以減少網頁的 request 數量，但相對會增加網頁本身的大小，下方範例的背景圖片和清單圖示，使用十六進位圖片編碼和 SVG 圖片編碼。
<!-- HTML 程式碼 -->
<div></div>
<ul>
<li>oxxo</li>
<li>apple</li>
<li>banana</li>
</ul>
<!-- CSS 程式碼 -->
<style>
div {
width:200px;
height:200px;
background-size: cover;
background-image: url(data:image/png;base64,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)
}
li::marker {
content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" height="20px" viewBox="0 0 200 200" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path style="opacity:1" fill="%23fffefd" d="M -0.5,-0.5 C 74.5,-0.5 149.5,-0.5 224.5,-0.5C 224.5,74.5 224.5,149.5 224.5,224.5C 149.5,224.5 74.5,224.5 -0.5,224.5C -0.5,149.5 -0.5,74.5 -0.5,-0.5 Z"/></g><g><path style="opacity:1" fill="%23ff5916" d="M 67.5,170.5 C 65.9814,173.526 65.3148,176.859 65.5,180.5C 65.5034,183.025 65.8367,185.359 66.5,187.5C 67.6737,196.514 71.507,204.181 78,210.5C 78.6877,211.332 78.521,211.998 77.5,212.5C 48.2324,195.34 32.0657,169.674 29,135.5C 27.6436,114.26 31.9769,94.26 42,75.5C 42.6667,74.1667 43.3333,74.1667 44,75.5C 46.6601,86.484 52.1601,95.8173 60.5,103.5C 60.56,104.043 60.8933,104.376 61.5,104.5C 61.8333,103.667 62.1667,102.833 62.5,102C 62.0542,98.6499 61.3875,95.4833 60.5,92.5C 60.2665,87.1053 60.5998,81.772 61.5,76.5C 62.4915,71.9496 63.4915,67.2829 64.5,62.5C 74.5133,33.6547 94.1799,14.8213 123.5,6C 124.833,5.33333 126.167,5.33333 127.5,6C 125.539,9.21483 124.373,12.7148 124,16.5C 123.298,25.2032 123.632,33.8698 125,42.5C 128.058,50.2834 131.392,57.9501 135,65.5C 143.853,79.8737 152.187,94.5404 160,109.5C 161.897,115.485 163.73,121.485 165.5,127.5C 177.98,110.853 182.48,92.1865 179,71.5C 200.654,107.867 200.988,144.534 180,181.5C 168.36,199.822 152.194,211.989 131.5,218C 153.158,203.498 160.325,183.665 153,158.5C 150.433,164.069 147.433,169.403 144,174.5C 142.104,176.53 139.937,178.197 137.5,179.5C 137.158,172.876 135.658,166.543 133,160.5C 124.602,147.036 117.269,133.036 111,118.5C 109.524,113.594 108.524,108.594 108,103.5C 92.0711,117.283 86.0711,134.617 90,155.5C 91.8739,162.952 94.0405,170.285 96.5,177.5C 84.6868,173.684 77.3534,165.684 74.5,153.5C 70.7749,158.614 68.4415,164.281 67.5,170.5 Z"/></g><g><path style="opacity:1" fill="%23ff8e66" d="M 64.5,62.5 C 63.4915,67.2829 62.4915,71.9496 61.5,76.5C 61.0439,71.4045 62.0439,66.7378 64.5,62.5 Z"/></g><g><path style="opacity:1" fill="%23ffcbb9" d="M 60.5,92.5 C 61.3875,95.4833 62.0542,98.6499 62.5,102C 62.1667,102.833 61.8333,103.667 61.5,104.5C 60.8933,104.376 60.56,104.043 60.5,103.5C 60.7037,100.082 60.7037,96.4158 60.5,92.5 Z"/></g><g><path style="opacity:1" fill="%23ff895f" d="M 67.5,170.5 C 66.7081,176.13 66.3748,181.797 66.5,187.5C 65.8367,185.359 65.5034,183.025 65.5,180.5C 65.3148,176.859 65.9814,173.526 67.5,170.5 Z"/></g></svg>') " ";
}
</style>
小結
CSS 可以使用的特殊關鍵字不多，使用文字的情境也很單純，只要花一點點時間了解使用的情境和規則，就能輕鬆上手開始使用囉！
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～