CSS 魔法与你
——关于文章排版时CSS运用的简明介绍
前言
在基于Wikidot的SCP Wiki上,排版一篇文章需要使用Wikidot提供的标记语言(又称“Wikidot语法”或FTML(基金会文本标记语言),实质上是魔改版本的HTML),而实现更高级的效果或对某些排版元素的样式进行修改则需要使用Wikidot提供的CSS支持:
[[module CSS]] /* CSS代码 */ [[/module]]
CSS(层叠样式表,Cascading Style Sheets)是一种描述文档样式的标记语言,用于格式化HTML文档内元素的显示。简而言之,页面里每个部分的字体颜色、背景颜色、背景图片、边框、阴影都通过CSS定义。
在SCP Wiki,基本的页面样式由Sigma-9 版式定义。一般的文章排版只需使用Wikidot语法,涉及到页面元素样式的修改(居中、隐藏页面标题,修改版头标题内容等)才需要用到CSS语法。善用CSS语法能使你的页面丰富多彩。
这篇文章将给出通过CSS样式化Wikidot页面上各部分的快速参考与指导。我们将以从零开始制作一个基于Sigma-9的美学版式(我给它起名为“CSS与魔法版式”)为例——这一版式也将随后发布。
基础语法
这篇文章为两种人提供:
- 已经学过基本的CSS语法,但不熟悉Sigma-9版式与Wikidot页面的各种特性。
- 没有学过基本的CSS语法,但打算来抄代码。
所以关于CSS的语法本文不再赘述,请参考以下的网站和本站上的指导:
开始制作
在正式开始制作版式之前,我们需要做一些小小的准备:
- 首先,建立一个沙盒页。现在还不需要开始设计版式的展示页面,只需要放上基础的[[module CSS]]就好。我们接下来会往里面填代码。
[[module CSS]]
[[/module]]
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@300;400;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300;400;700;900&display=swap');
- 如果希望用变量控制版式,先放上根元素选择器,定几种默认颜色,以及几种基本字体,这样待会可以很方便地用上。
:root { --ac-one: 68, 95, 107; --ac-two: 127, 32, 0; --ac-one-light: 90, 160, 180; --ac-two-light: 206, 40, 0; --black: 12, 12, 12; --dark-grey: 64, 64, 64; --middle-grey: 127, 127, 127; --light-grey: 175, 175, 175; --very-light-grey: 210, 210, 210; --white: 245, 245, 245; --link-color: var(--ac-one-light); --link-color-np: var(--ac-two-light); --title-font: "Noto Serif SC", "Noto Serif", serif; --body-font: "Noto Sans SC", "Noto Sans", sans-serif; --mono-font: "Noto Sans Mono", monospace; }
页面结构
Wikidot页面的特色是一大堆莫名其妙的容器套在一起。它的大致结构如下:

版头
版头的结构从HTML源代码里看上去如下:
<div id="header"> <h1> <a><span>SCP基金会</span></a> </h1> <h2> <span>控制,收容,保护</span> </h2> <div id="search-top-box" class="form-search"> ... </div> <div id="top-bar"> ... </div> <div id="login-status"> ... </div> <div id="header-extra-div-1"> <span></span> </div> <div id="header-extra-div-2"> <span></span> </div> <div id="header-extra-div-3"> <span></span> </div> </div>
我们按照这些元素排列的顺序进行修改。
修改版头背景和Logo
在“版头”一节里首先不得不提到最最最最常用的两个修改——版头背景和Logo,但实际上,版头Logo是整个#header的背景图片,版头背景是#container-wrap的背景图片,它们都不在版头内部。
版头背景
可以用如下代码修改版头背景:
div#container-wrap { background-image: url("<图片链接>"); }
当然,更推荐的做法(当不需要过于复杂的背景时)我们可以用线性渐变绘制版头背景。这么做的好处是加载比图片快得多,而且不会损失清晰度。不仅如此,用代码绘制背景省去了制作图片的麻烦,可以随时调整。
div#container-wrap { background-image: linear-gradient(to bottom, #593781, #593781), /* ↑这个用来做最上面的背景 */ linear-gradient(to bottom, #999, #444, #999), /* ↑这个用来做导航栏的背景 */ linear-gradient(to bottom, black, black, black, transparent); /* ↑这个用来做导航栏后的阴影 */ background-size: 100% 140px, 100% 21px, 100% 180px; background-position: center top, center 140px, center top; background-repeat: repeat-x; }

因为我们使用CSS变量定义了一些基础颜色,我们可以把渐变也加入变量中,再用基础颜色代替变量,下面是我用在“CSS与魔法版式”中的例子:
... --header-height: 140px; --topbar-height: 21px; --bodyshadow-height: 20px; --header-gradient: to bottom, rgba(var(--ac-two), 0.3) 5%, rgb(var(--white)) 5%, rgb(var(--white)) 95%, rgba(var(--ac-one), 0.3) 95%; --topbar-gradient: rgb(var(--ac-one)) 0, rgb(var(--ac-one)) 100%; --body-gradient: rgba(var(--black), 0.1) 0, transparent 100%; ... div#container-wrap { background-image: linear-gradient(var(--header-gradient)), linear-gradient(var(--topbar-gradient)), linear-gradient(var(--body-gradient)); background-size: 100% var(--header-height), 100% var(--topbar-height), 100% var(--bodyshadow-height); background-position: center top, center var(--header-height), center calc(var(--header-height) + var(--topbar-height)); background-repeat: repeat-x; }

Logo
修改Logo其实很简单,只需要这样(前提是你有一张方形的图片,在基础Sigma-9版式下,这张图片的宽度应该是100px):
#header { background-image: url('<图片链接>'); }
修改主标题和副标题
版头上最重要、也最常被修改的元素是