你正在进入一个古怪的世界。是的，古怪，因为这篇指南正在为你揭示一个更广阔、更复杂之世界的冰山一角——远比这个维基更加宏大。本文旨在帮助你理解元素的功能，并在你写文时提供一定帮助；但这并不代表着你在这里学到的 CSS 或是其他语言能够在维基之外也派上用场。如果你更需要后者，那么你或许可以在一些参考网站中寻找线上课程。

但在深潜入代码的世界之前，让我们先复习一下基础：你在这个维基里使用的常规格式被称为维基语法（Wikidot syntax），一套旨在让用户能够快捷轻松地使用主要格式（例如粗体、斜体、表格等）的规则。

然而，一旦你试图尝试一些更独特的东西，你就不得不面对“真正”的语言了——它们通常是为互联网开发者、设计师与其他编程职业准备的。它们并不来自于 Wikidot，但我们今天将探讨几种不同的使用方法。

在开始之前，你可以先阅览一下这些通过代码实现了富有创意的新奇效果的文章，来认识代码能够带来的可能性：

• SCP-3125，密码输入端
• SCP-499-FR，折叠与文本框的样式
• SCP-5999，访问远程终端
• SCP-369-FR，惊喜！
• 以及更多。

CSS——也就是层叠样式表——是一种用于定义一件物品外观的语言。它允许你指定一个东西的大小、形状、颜色以及一些其他元素。当你想要自定义自己的文章时，有 99% 的可能要用上 CSS；幸运的是，它很简单。我们开始吧。

想要为文本分组并为它们应用代码，主要有两种方式：div 元素与 span 元素。

这是一个 span 元素，它指定了一段文本，并且允许你改变这段文本的风格，同一行内的其他文本不会受到影响。

想要一个结束 div 块，必须要使用一个换行符。也就是说，不同 div 元素不能共存于一行文本以内。

那么现在让我们来看看，它们是怎么生效的。

这是一个最基础的空白 div 盒子。由于我们没有给它任何定义，因此这个 div 实际上完全没有改变什么；接下来让我们把这个盒子变成想要的样子。

在这里，我们将放上一系列的 CSS 声明，一种用于定义背景颜色、边框之类特性的小代码。比如说，我想要一个亮蓝色的背景。

每一则 CSS 声明都有着相同的格式：一个 CSS 属性，也就是这里的 background-color，它指向了背景，告诉代码我们接下来要改变什么东西；接下来是一个冒号，以及一个值，说明了具体改变的内容。你可以在这里检查颜色名，注意是英文。颜色的值也可以是一个十六进制代码（或者 RGB，或者其他不怎么常用的用于定义颜色的代码）甚至是一张你想要在背景里展示的图像链接。声明最终以分号结束，随后可以再加上其他的声明。

这个过程里最困难的一点就在于，你要搞清楚不同属性和值的准确名字：你需要用心一遍遍练习来掌握它们，但在此之前，你可以借助参考列表来得到一些有用的信息和细节。

通过其他的值，就可以快速地优化我的 div 文字框！

这里，我们连续用了好几个值来定义同一个属性的不同特点：我需要一个边框，所以我首先定义了它的宽度（1px），然后是它的外观（solid 也就是实线，如果不定义的话它有可能是虚线），最后是它的颜色（black，黑色）。但你有可能会注意到，这个盒子的内外间距都不太令人满意。

margin 和 padding 属性分别定义了外边距与内边距，也就是这个盒子到外部内容之间上下左右的间距，以及盒子内的元素到边框的上下左右间距。如果你想让盒子看起来好看一点，那么它们几乎是必须的，尤其是内边距（padding），它能使盒子里的内容更便于阅读。

+ 布局信息- 关闭

通过在属性后添加 -top、-bottom、-right、-left，你可以轻易改变它对应的上下左右边距。例如：

[[div style="background-color: gold; margin: 1em; padding: 0.5em; padding-bottom: 1.5em;"]]
文本
[[/div]]

---

文本

- 关闭

这里使用的长度单位“em”能够调整尺寸适应其他文字。如果你的盒子里有很大号的文本，那么边距也会对应地调整为更合适的大小。不过，你也可以用像素（px）或者其他固定的单位来定义。

接下来让我们打磨一下这个盒子，让它更有特色。

我把盒子变成了圆角，并加上了一个阴影，但是阴影有点太伤眼了，而且我们希望把它放到盒子上面。对于阴影属性（box-shadow），前两个 px 值分别代表了水平和垂直的阴影（x 轴和 y 轴）。因此让我们把垂直阴影变负，并加上第三个值来给阴影添加一个模糊，使它更为柔和。

既然我们已经有阴影了，为什么不给它加个颜色呢。

就是这样，你已经创造了一个 div 盒子！这个过程看起来可能稍微有点复杂，毕竟我们用到了很多你可能闻所未闻的属性，但它就是这么工作的；你只需要了解这些代码的用处与功能。而对此，只有一个方法：尝试。如果你想用最常用的属性练练手，可以使用类似这个的在线工具，你很快就能靠自己完成它！

Span 元素作用的方式与 div 盒子完全相同，属性也基本一样，只是有部分特性无法应用到一小段文字上。

在正文里“直接”定义 span 和 div（也就是在正文代码里直接使用 style=" "）是一种简单的将 CSS 应用于文章的方法。然而，如果你使用一个 CSS 模块来这么做1Footnote 1.理想情况下，这也是你将同一规则应用于多个元素的方法，但我们先不讲这一点。 ，它会变得更方便。

CSS 模块是一个文本框，里面的内容不会在你的页面中直接展示出来，包含了一组直接应用于这个页面的 CSS 声明。这个维基的版式基本上不外乎就是超大的 CSS 模块，重定义了全局的美学元素——而就是从这里开始，一切变得有趣了起来。CSS 模块不仅能让你从零开始创造一个新的自定义元素，还可以设计修改那些已经默认设置的元素，你不能用 style=" " 来修改的那种。举例来说，以下的代码能让你修改 Wikidot 表格的设计：

[[module CSS]]
table.wiki-content-table {
    background-color: #CEF6CE !important;
    color: black !important;
}
table.wiki-content-table th {
    background-color: #3B0B17 !important;
    color: #F6CED8 !important;
}
[[/module]]

“table.wiki-content-table”是表格内容的 CSS 名字，而“th”则更精准地指向了标题格。在指定了新的背景和文本颜色后，我们加上了“!important”指令，来告诉浏览器这个属性应该覆写掉所有其他对颜色的定义。这一步不一定是必需的，但如果你尝试自定义一个 WIkidot 的默认属性却发现没生效，那么它就会显得很有用。注意：如果你的代码不需要“!important”也能生效，那就不要加上它。如果使用不当，这可能会毁掉你的代码。

也许你已经注意到了，我们使用的格式有所不同。的确，我们在这些模块里使用的标准 CSS 格式需要 1）更具可读性 2）明确每个 CSS 声明所应用于的元素，毕竟我们的模组并不仅仅作用于一个元素，而是整个页面。在 CSS 模组中推荐你使用以下格式：

元素名 {
    属性: 值;
    属性: 值;
    属性: 值;
}

注意，这里的空格和换行仅仅为可读性而添加：下面的模块同样可以生效，但毫无疑问读起来更费劲。

元素名{属性:值;属性:值;属性:值;}

现在你可能会开始思考怎么找到元素的名字，以便修改它：对此，你的电脑有一个专用工具，你或许已经使用过它了，元素检查器。我们稍后会继续介绍这个工具的用处，但现在你只需要记住，想要修改一个元素，只需要在它上面右键点击一下，选择“检查”，就可以在新打开的页面里找到它的名字。

这张图片中可以看到，我使用的 div 框名为“div.code”，或者更简单点，在 CSS 里就叫“.code”。

在你打开这个窗口之后，可以在它的左上角找到“选择一个元素检查”工具，就不用每次都去右键了。进阶提示：使用快捷键 Ctrl + Shift + C 可以快速开启这个。

现在让我们看看 CSS 模块的不同实际应用吧。

案例 1：你在文章中重复几次用到同样的 div 块，希望能简化你的代码，避免每次都复制一遍。那么接下来你需要定义一个 class——换句话说，定义一组将被同时应用于多个元素的规则。要这么做，在元素部分先点一个点，后面跟上你 class 的名字。

.yourclassname {
    padding: 1em;
    margin: 1em;
    background-color: gold;
    color: darkred;
    border: 1px dashed black;
}

想要将你的 class 应用在一个 div、span 或其他元素，只需要给它加上一个 class="yourclassname"。

案例 2：你在文章中重复几次用到同样的 div 块，但有时候想要修改一些细节。要这么做，你可以 1）使用不同的 class 2）给要修改的那个加上 style=" "。让我们来看看第一种办法。

.box {
    padding: 1em;
    margin: 1em;
    color: darkred;
    border: 1px dashed black;
}
.yellow {
    background-color: gold;
}
.blue {
    background-color: lightblue;
}

所有具有“box”class 的元素都将拥有它的属性，而你可以用第二个更具体的 class 来调整它的外观，在示例中是背景颜色。Class 的顺序并不重要。

但你也可以通过同时使用 class 和 style 来达到相同的效果，就像这样：

这两种方法没有高下之分，在具体情况中你可以选择自认为更直观、更方便的那种。

想要成为高级格式专家，最有效的方法就是：尝试。最棒的工具是页面检查器，你可以通过右键或 Ctrl + Shift + I 或 Ctrl + Shift + C 来进入（取决于你的浏览器）。

通过这个工具，你可以看到所有选定元素的属性，并且随意修改它们，查看实时结果。这些改动仅对你可见，不会影响到其他用户，刷新后就会重置，所以放手去尝试吧！这里是一个用于训练的随机盒子：

如果你喜欢这个，那么可以进一步地学习其他现有的格式，对比它们的代码来理解它们是怎么运作的。建议你在网站的任何页面都尝试一下这种方法，不过这里有一些带注释的有趣的例子供你尝试。P.S.：如果你对组件的使用好奇，你可能会对第二个分页的内容感兴趣。

如果你已经阅读并理解了上面的所有内容，就可以着手练习，准备在高级语法的领域中成为一名大师了。如果你关于修改代码有任何疑问，都可以来联系我（Wikidot 上是 Dr Lekter，Discord 上是 Lekter#1551）或者你所在分部的技术职员。

祝你好运，也希望你能将上面的技巧灵活运用，让文章更加精彩！