CSS 魔法与你


CSS 魔法与你


——关于文章排版时CSS运用的简明介绍


评分: +2+x

前言

在基于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]]
  • 谷歌字体或者EtinjatEtinjat字体收集上翻翻有没有好看的字体,即使正文不换字体,标题也还是可以发挥的。挑好字体后使用@import方式放进版式代码。
@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页面的特色是一大堆莫名其妙的容器套在一起。它的大致结构如下:

01_page_structure.png

版头

版头的结构从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;
}
02_header_gradient.png

因为我们使用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;
}
03_header_gradient.png

Logo

修改Logo其实很简单,只需要这样(前提是你有一张方形的图片,在基础Sigma-9版式下,这张图片的宽度应该是100px):

#header {
    background-image: url('<图片链接>');
}

修改主标题和副标题

版头上最重要、也最常被修改的元素是

CC BY-SA 114514.810