全域关键字与文字数值
CSS 的样式属性除了长度、颜色或角度单位，有些时候也会使用一些“全域关键字”或“文字”作为属性值，这篇教学会介绍 CSS 提供的全域关键字 inherit、initial、unset、revert 和 revert-layer，以及一些特殊作用的文字数值，例如虚拟元素的文字换行、单引号、双引号...等。
快速导览：
教学影片
搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。
全域关键字：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 可以使用的特殊关键字不多，使用文字的情境也很单纯，只要花一点点时间了解使用的情境和规则，就能轻松上手开始使用啰！
微信扫码关注
抖音扫码关注