嘿，小朋友。
我是Fish^12。想学CSS吗？这是我CSS系列的第二篇文章。在阅读这篇指南之前，请确保你已经掌握了前面的内容。
这次，我们要讨论CSS中一些更加技术性的方面。很无聊，我懂，但在我们接触那些更酷炫的玩意儿（比如制作版式）之前，你需要先掌握这些内容。
前言：本指南面向新手。任何了解选择器、类和:root的工作原理的朋友都可以给这篇指南投个down。
语法
上次，我们讲到了div语法中的句点（.）。还有其他使用井号（#）或者什么也不用的变体。请看。
#page-title {
text-indent: 1em;
}
这是一个ID。井号指定了一个在每个页面中只出现一次的元素（element），这也意味着ID会覆盖类（class）。一般来说，你不会自己创建这些东西，大多数情况下是去修改它们。
其他ID举例。
- #header
- #top-bar
- #side-bar
- #toc
- #footer
- #license-area
如果你想当个侦探，你可以根据每个ID的名字猜猜看它们所针对的内容。如果你用检查工具到处找找，你肯定能找到其中的一些。
.blockquote {
text-indent: 1em;
}
这是一个类。类通常会在一个页面里多次使用，这让你可以轻松地同时为多个元素设置样式（style）。我们在上一篇文章中讲过如何自己创建类。
其他类的举例。仅凭名字猜测它们的作用会有点困难，所以我会详细说明它们的用途。
- .owindow — 当你点击某人的用户信息、遇到错误或是保存文章时，改变弹出的窗口的样式。
- .page-options-bottom — 页面底部的所有选项，例如“编辑”和“历史记录”。
- .yui-navset — 控制一些选项卡的格式。
- .page-widget-box — 设置评分模块小框的样式。
p {
text-indent: 1em;
}
“嗨！我是个带缩进的段落。”
这是一个标签（tag），它针对了特定类型的元素，这里的“p”是段落（paragraph）的缩写。它基本上会针对每一行文字。如果你想让每段段首都缩进来模拟小说的质感，这个很实用。
其他标签举例。我还是会详细说明它们的用途。
- a — 设置链接或其他可交互文本的样式。
- h1 — 代表你用“+”能创建的那些标题。从h1到h5都是。
- tr — 代表表格的行，表格元素还包括td（数据单元格）和th（标题单元格）等。
- ul — 代表无序列表。用于创建列表。也有ol（有序列表）。
- li — 代表列表项。被列出的项目。与ul和ol共同使用。
注意：你也会在其他网站上找到这些标签；它们是HTML/CSS内置的，它们的命名规范并非Wikidot独有。很遗憾，你不能自己创建标签。
还记得我说过这些指南的核心是让你能够制作一个自己的版式吗？我刚才告诉你的所有类和选择器都是基础Sigma-10版式的一部分。你修改了它们，就会直接影响页面。
这是通往制作自己版式的一步。
语法：反击战
CSS在标准类之外提供了一项有力的补充，就是伪类（pseudo-classes）。它们通常能以简洁的方式提供超出标准选择器能力范围的实用性和特异性。
伪类有很多种类，但今天我们只聚焦于一种特定的伪类；它是一个能简洁、系统、一致地设置版式的工具。
:root {
--carbon: #323232;
}
.blockquote {
background: var(--carbon);
}
:root伪类让你能够自定义变量，方便访问。以这里为例，我们声明了变量--carbon等于#323232，所以每当我们使用var(--carbon)，它就会自动应用这个特定的颜色。
这有助于保持整个页面代码的一致性，让你可以编辑一次就修改所有用到这些变量的元素，让其他人更容易看清你的CSS布局，以及加快制作过程。
你也可以随意命名变量；我在这把它叫做carbon是因为我能轻松记住这个名字。
变量也不局限于颜色。
:root {
--carbon: #323232;
--customBorder: 0.4em double pink;
--importedFont: "Major Mono Display";
--standardWidth: "2em";
}
.blockquote {
color: var(--carbon);
border: var(--customBorder);
font-family: var(--importedFont);
padding: 10px var(--standardWidth);
}
这里，我们还自定义了边框、字体和尺寸。
此外，Sigma+和黑色标记笔版式都使用了变量来帮助设置样式，因此你可以直接更改这些既有的变量，无需修改整个类。
举例而言，如果你使用的是Sigma-10……
#header h1 a::before {
content: "SCP基金会" !important;
}
#header h2 span::before {
content: "控制，收容，保护" !important;
}
注意：!important属性会覆盖所有其它样式。要想覆盖!important属性，只能再添加一个特异度更高的!important属性。它的侵入性非常强，使用时可能很快就让页面乱成一团，因此最好永远不要使用这个属性！
……与其这样更改标题文本，不如……
:root {
--header-title: "SCP基金会";
--header-subtitle: "控制，收容，保护";
}
……这样做。简单又清晰。
:root是你能学到的最重要的伪类。它对版式的制作非常重要。
格式
虽然写CSS的手法没有绝对的对错之分，但有些方法确实更好。理想情况下，你的成品应该易读易用，这有助于他人理解你的代码，也能帮你在中断工作之后快速回到流程之中。
注意：每个页面只需要一个CSS模块。这意味着你所有的CSS代码都会放在这个模块当中，如果你不采取适当的反制措施，代码很快就会变得混乱不堪。
#page-title,#footer,.blockquote{text-indent:1em;box-shadow:1px 1rem pink;background-color:red;border:solid 1px orange;padding:1em 2rem 1vw 1vh;margin:2vw 3px;text-shadow:0 0 5px purple;}
太坏了！我到底该看哪？
如果我想把这段代码整理到能见人，它应该长这样。
#page-title,
#footer,
.blockquote {
text-indent: 1em;
box-shadow: 1px 1rem pink;
background-color: red;
border: solid 1px orange;
padding: 1em 2rem 1vw 1vh;
margin: 2vw 3px;
text-shadow: 0 0 5px purple;
}
这就好多了。一眼看去，我们可以立马看出这里使用的样式会应用到哪三个不同的类：#page-title、#footer和.blockquote。我们还可以看到长空格区分开了被声明的类和它们的样式。
要在每个样式的开头创建空格，你可以使用alt代码Alt+09或Tab键来快速插入一个长空格。此后，每次换行时，它都会自动为你添加一个长空格。非常方便，我建议你记住这个做法。
此外，我建议你在CSS中添加注释，这样可以让所有人（包括你自己）都能更好地浏览你的代码。
/*嗨！这是一条注释！这里的内容不会被解析。它可以让你在代码中添加说明或标记，在不影响CSS的前提下使代码更方便浏览。*/
.blockquote {
text-indent: 1em; /*你甚至可以在这添加注释！*/
}
/*这部分用于页面版头的内容！*/
#header {
background-color: green;
}
#account-options {
margin: 20px;
}
/*适当添加空格相当有用！*/
注意：我说“任何内容”的意思就是，你真的可以在注释里写任何内容。但别变成那种往注释里输入只有你自己才能理解的歌词的家伙。我们的目标是让你的代码更易使用，不是让它显得怪异。
结论
你现在更加熟悉Wikidot是如何设置其CSS的了。你也知道了如何着手设置:root来加速工作流程。有了这些知识，你离制作你自己的版式又近了一步。