嘿，小朋友。
我是Fish^12。想学CSS吗？这就是一份入门指南。
编写一份CSS指南的最大问题在于，我并非第一个做这件事的人。CSS与HTML、JavaScript并称网页设计三巨头，网络上早已有了专门深挖它用法细节的内容；MDN网络文档、Codepen、StackOverflow等等。如果你想要一份更细致全面的CSS指南，站外有大量资源可供使用。
但是，我可以告诉你如何在SCP维基内利用CSS。
前言：本指南面向纯新手。任何对CSS稍有了解的朋友都可以轻松地给这篇文章投个down。此外，本指南需要用户能够使用电脑；虽然用手机也能操作，但会相当蛋疼。
让我们从最简单的引用块（blockquote）开始。
性感列车即将离站。
一个牢靠的div；这是每位SCP新人写手最先学到的东西之一。它让你可以轻松创建测试记录、采访转录、行动后报告等等。经典。
如果你不知道怎么创建引用块，纯文本形式长这样：
[[div class="blockquote"]]
性感列车即将离站。
[[/div]]
注意：“div”是“division”（部分）的缩写；本质上，它是一种将网页分割成部分的手段。还有其他种类的手段，但现在，你只需要知道这一个。
很有趣，只是……它是怎么运作的？底层代码长什么样？如果我想改变它的外观，要怎么做？
为此，我们必须解锁第一把武器。
检查工具
让我们回到引用块那里。
性感列车即将离站。
右键点击。当你用右键点击网页（或者说任何元素；在当前语境下，你应当右键点击引用块），会弹出一个快捷菜单。大致长这样。
返回
前进
刷新
另存为
打印
查看页面源代码
检查
在最下面，你会看到一个“检查”选项；点它。
这会打开一个侧边栏；看起来会很复杂，所以现在只关注上半截的“元素”（element）选项卡就好。
它应该长这样。
<div class="blockquote">
<p>性感列车即将离站。</p>
</div>
点击那个“blockquote”。
下半截的“样式”（style）选项卡将详细显示与引用块相关的所有CSS。
div.blockquote {
border: 1px dashed #999;
background-color: #f4f4f4;
padding: 0 1em;
margin: 1em 3em;
}
此时此刻，你获得了通往万物的钥匙。这个侧边栏让你能够编辑任何网页并实时查看变化。
你可以修改现有的变量……
background-color: #f4f4f4 -> #b3ebf2;
……添加新的样式……
border-radius: 100%;
……以及删除任何你不需要的样式。
border-color: #999 -> transparent;
但是，等一下。很酷，但是这些修改都是暂时的。如果我刷新页面，这些改动就会消失。
那我们要如何保存这些修改呢？
CSS模块（CSS Module）
Wikidot有一种模块，让你能够在文章当中插入CSS，它叫——你猜对了，就叫CSS模块。它长这样。
[[module css]]
[[/module]]
若想真正影响你的页面，我们只需要将先前搅过的代码复制到这个模块中。
让我们拿引用块来试试。
[[module css]]
div.blockquote {
background-color: #b3ebf2;
border-radius: 100%;
border-color: transparent;
}
[[/module]]
现在，我们先前设置的所有样式都应用到了引用块上。每个引用块都会反映出这些更改。
性感列车即将离站。
提高班
让我们结合新学到的知识和我们的自由，做一次大胆的尝试。
我们要放过那个可怜的引用块，转而创造新生命。
首先，我们必须给它起个名字命名。我给我的起名叫……shadan。
[[module css]]
.shadan {
}
[[/module]]
注意：要创建一个新div，你需要在开头加上一个句点（.）。还有更多要点，但我们改天再聊。
好了，现在让我们给小家伙加上一些样式。我要添加一串更复杂的随机样式，主要是让你看看我们能做到些什么。
[[module css]]
.shadan {
border: 1rem double black;
box-shadow: 1rem 1rem lightblue;
background: linear-gradient(45deg, orange, purple);
color: white;
padding: 1rem;
margin: 1em 3em;
text-align: center;
}
[[/module]]
现在我们设置好了想要的样式，可以调用这个div了！
[[div class="shadan"]]
性感列车即将离站。
[[/div]]
它会变成……
性感列车即将离站。
搞定！
总结
这是学习（或者说复制，随便吧）CSS的绝对最基础内容。页面上的所有元素都可以按需进行检查和更改，然后你可以在CSS模块中应用这些更改。
CSS是我充满热情的东西，但它基本上就像学习一门新语言。学习基本步骤需要时间，精通则需要更多时间。我至今也称不上擅长。但这又怎么可能阻止我们呢？
欢迎下次收听；我还有更多计划。