CSS主题版式指南：如何制作属于你的版式
评分: +10+–x
著作信息

你好，Brella！

你好！访问者！你准备好了吗？

CSS版式，也就是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等等文件样式的计算机语言。简单来说，CSS可以用来修饰网页，若将网页内容比作一间屋子，那么CSS就是装修屋子用的东西。
我们的网站网页基本都是由内容和样式构成，网页上的文字和图片都是内容，而文字的字体、大小、颜色、展示方式等等都是样式。基于Wikidot，让我们能够更加方便地向他人展示我们的内容，CSS的插入也变得不那么繁琐。

接下来，我将向你介绍：如何通过更改一个完好的CSS样版来制作属于你的CSS。1

首先，我们来认识一下CSS中的基础设置，

这是CSS中的某一段

body{
background-color:red; -----------这是用于设定背景色的，同样“background-color”可以用在其他段落
}
h1{
color:orange; -----------这是用于设定主标题的颜色用的，同样“color”可以用在其他段落
text-align:center; -----------这是用于设定主标题的位置用的，center，居中。同样“text-align”可以用在其他段落，你还可以使用left，right
}
.a{
font-family:"Exo 2"; -----------这是当div块的定义为scr时字体的样式，前提是该字体必须被载入，同样“font-family”也可以用在其他段落
font-size:20px; -----------这是当div块的定义为scr时字体的大小，同样“font-size”可以用在其他段落
}
/* 该字段不予编译  */ -----------用“/* */”框起来的字段在CSS中不会被编译
.b{
background-color:green;
font-size:20px;
color:red;
}

接下来让我们通过实例来展示以上的某一段，我们以设定div为例，运行以上代码。将以下部分放置到页面前：

[[module CSS]]
.b{
background-color:green;
font-size:20px;
color:red;
}
[[/module]]

在页面中输入：

[[div class="b"]]
CSS版式，也就是层叠样式表(英文全称:Cascading Style Sheets)
[[/div]]

效果：

CSS版式，也就是层叠样式表(英文全称:Cascading Style Sheets)

你需要更改颜色？
你可以前往：https://www.qtccolor.com/findColor.aspx
或者：http://www.brella.top/ColorEditer.html
从而选择颜色，16进制代码、RGB值以及颜色的单词都可以！

以上部分便是最基础的CSS样式，接下来我们来点深入的。

我们来使用HTML语块，HTML是一个独立的计算机网页编程语言，WIkidot的页面经过解析后同样为HTML语言构成。
比如：

[[html]]
<style>
supsilon{
background-color:green;
font-size:20px;
color:red;
}
</style>
<supsilon>我的Supsilon段落。</supsilon>
[[/html]]

效果：


HTML可以做到更多事情，甚至Wikidot语法做不到的，但这里不做过多阐述。

得到你的CSS！

如何快速修改？你可以使用Ctrl+F输入下面的段落来查找！

SCR SUpsilon

SCR旧版式


作者: BrellaBrella
修改: Super Dr GreenSuper Dr Green
我们来参考SCR旧版式，你可以点击旧版式代码查看全部源代码。点击SUpsilon检视器查看效果

我们来着手修改它：
这是其中控制背景的一段：

div#container-wrap {
    background: url(http://scr-wiki.wikidot.com/local--files/component:theme/scr-black-body.png) top left repeat-x;
    /*
    background: var(--container-wrap);
*/
}

上述CSS代码中，你可以着手修改它的背景图片，也就是http://scr-wiki.wikidot.com/local--files/component:theme/scr-black-body.png，背景图片是装饰版头的玩意，你可以选择修改。
背景图片的原理便是一张长图片重复显示构成了背景，你可以选择修改"repeat"来控制它。

我们接着来修改标识：

#header {
    height: 140px;
    position: relative;
    z-index: 10;
    padding-bottom: 22px;
    background: url(http://scr-wiki.wikidot.com/local--files/component:theme/scr-logo.png) no-repeat left 20px !important;
    background-size: 150px 140px !important;
    max-width: none;
}

这行代码是SCR的标志，基于旧版式的设置，这玩意会在版头的左边。
修改http://scr-wiki.wikidot.com/local--files/component:theme/scr-logo.png，亦可以修改"repeat"设置来控制它是否重复。"background-size"可以修改它的大小（长、宽），务必将其调整至你认为行的设置。
当你想要插入图片时，务必将它进行抠图为透明png格式（就像这个），否则会出现一些问题。

以上便是SCR旧版式的简单修改步骤

SCR新版式


作者: BrellaBrella

我们来修改SCR新版式！
你可以点击这里来查看第一版本（没有麻烦的CSS内置伪标题设置）效果，点击这里查看全部源代码！
你亦可以点击这里来查看第二版本（有麻烦的内置伪标题设置，不过效果更好）效果。

我们先来说说伪标题设置和非伪标题设置的区别，
非伪标题能让你直接在控制台中更改网站标题副标题。
而伪标题则需要你在控制台中更改后仍需要到CSS代码中更改。
SCR现行版式为第一版本。

好的！我们现在开始修改吧！Brella？
没问题！

新版式使用居中标题，而旧版式使用靠左标题，看你的选择。

我们先来更改第一版本吧！

/* 设置新文本样式 */
#header h1 a::before, #header h2::before {
  color: var(--accentColor);
  font-family: 'Exo 2', '黑体', sans-serif;
  text-shadow: none;
}

这里可以设置文本样式（font-family），也就是字体，不过，值得注意的是，只有下载了该字体的人才能看见。不过不用担心，你可以使用"@import url('')"来引入字体。
你可以使用Google Fonts来引入字体。可惜的是，该网站在大陆内已经被墙。不用担心，SCR新版式为你提供了黑体和Exo 2！

如果你想要引入一款字体，请在开头输入由google fonts生成的语句（google fonts会在你选择字体后告诉你该怎么办），比如：

@import url('https://fonts.googleapis.com/css?family=Exo+2');

这是放在css开头的，

这是语法：

font-family: 'Exo 2';

好，我们继续！
修改标识

:root {
  --accentColor: #1EB5E8;
  --lgurl: url("http://scr-wiki.wdfiles.com/local--files/component:theme/scr-logo.png");
}

不用我多说了，这个在前面已经介绍过了，替换里头的链接为你的标识图片。

你可能会好奇，为什么新版式没有背景图片？
答案在这里：

body {

    color: #000000;
    background-color: #aeaeae;
    background-image: linear-gradient(
        to bottom,
        #2f2f2f, #2f2f2f 143px,
        #414141 90px, #414141 100px,
        #aeaeae 165px, #aeaeae 100%);
    background-repeat: no-repeat;
}

SCR使用的是颜色背景，通过修改上述的16进制码，你也可以得到别具一格的背景！

接下来我们来说说有伪标题的第二版本：
上述操作完以后，你可以选择继续操作：
要设置内置伪标题，首先在版式中加入以下内容：

#header h1 span, #header h2 span { font-size: 0; display: none; }

这是用于隐藏Wikidot的默认标题。

接着，将如下内容

/* 新文本变量设置 */
#header h1 a::before {
 /* content: var(--header-title, "SCR公司");  */ /* 停用 */
  color: #aaaaaa;
  font-weight: 300;
  font-size: 1.3em;
  --standard-shadow: 1px 1px 1px #000;

  bottom: -2em;
  text-shadow:
  1px 1px 1px #000;
}

改为 
/* 新文本变量设置 */
#header h1 a::before {
  content: var(--header-title, "你的大标题"); 
  color: #aaaaaa;
  font-weight: 300;
  font-size: 1.3em;
  --standard-shadow: 1px 1px 1px #000;

  bottom: -2em;
  text-shadow:
  1px 1px 1px #000;
}

在“你的大标题”处写入你的大标题。

这个也得改：

#header h2::before {
 /* content: var(--header-subtitle, "安全 • 收容 • 研究"); */ /* 停用 */
  color: #ff0000;
  font-weight: 600;
  font-size: 1.22em;
  --standard-shadow: 1px 1px 1px #000;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
  white-space: pre;
}

改成： 
#header h2::before {
  content: var(--header-subtitle, "你的副标题");
  color: #ff0000;
  font-weight: 600;
  font-size: 1.22em;
  --standard-shadow: 1px 1px 1px #000;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
  white-space: pre;
}

在“你的副标题”处写入你的副标题。

到此为止，SCR新版式的简单更改已经介绍完了。

SCP Sigma-9

作者: AelannaAelanna
修改: MScarletMScarlet、Dr DevanDr Devan、Sekai_sSekai_s
点击这里查看效果，点击这里查看全部源代码。

此版式为创作者们提供了Bauhaus字体！

我们开始！

div#container-wrap {
    background: url('https://scp-wiki-cn.wdfiles.com/local--files/component%3Atheme/body_bg.png') top left repeat-x;
}

这是背景设置，修改其链接改为你的背景或选择不修改。 
#header {
    height: 140px;
    position: relative;
    z-index: 10;
    padding-bottom: 22px; /* FOR MENU */
    background: url('https://scp-wiki-cn.wdfiles.com/local--files/component%3Atheme/logo.png') 10px 40px no-repeat;
    background-size: 100px 100px;
}

修改其链接，换成自己的标识，记得要更改至你认为行的尺寸！

至此，SCP Sigma-9版式介绍完毕。

还有吗？

当然了！

XUpsilon-21

作者: BrellaBrella
修改: by Hby H

点击这里查看效果，点击这里查看源代码
我们开始吧！

div#container-wrap {
    background: url(http://scr-wiki.wikidot.com/local--files/component:theme/scr-black-body.png) top left repeat-x;
}

这是背景设置，将其链接改为你自己的。 
div#header {
    background: url(http://xyz-studios.wikidot.com/local--files/major/xyz.png) 10px 40px no-repeat;
    background-position: 1em 4em;
background-size: 88px 88px;
}

这是标识设置，将这个改为你自己的标识，注意适合自己的尺寸！

xyz版式同样使用了伪标题，接下来修改它！

div#header h1 a:before {
    content: "xyz game up studios";
    color: rgb(255, 0, 0);
    text-shadow: 3px 3px 5px #000;
}

将content后面的东西改为你的大标题！
color是标题的颜色。 
div#header h2:after {
    content: "以团结之力，筑千仞高楼";
    font-weight: bold;
    color: rgb(102, 102, 102);
    padding: 19px 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,.8);
    white-space: pre;
}

将content后面的东西改为你的副标题！
color是标题颜色的设置。

至此，你已经看完了本指导的内容，去修改属于你的CSS吧！


什么？你还不会导入CSS？
教程如下：
1.建立版式页面（component:theme）
2.打开你的网站的管理台，前往外观与表现>布景主题>点击外部>输入“http://你网站的网址/component:theme/code/1”，不带引号。

你也可以直接导入CSS，如：

  • SCP Sigma-9 版式

http://www.scp-wiki.net/component:theme/code/1

  • SCR SUpsilon 旧版式

http://www.scr-wiki.top/local--files/component:theme/supsilon.css

  • SCR SUpsilon 新版式

http://www.scr-wiki.top/component:theme/code/1

你发现自己的CSS似乎出了故障？
你可以在CSS开头加上：

@import url('http://scp-wiki.wikidot.com/component:theme/code/1');

或者 
@import url('http://scr-wiki.wikidot.com/component:supsilon/code/1');
Footnotes
原创指导版式
页面版本: 51, 最后编辑于: 19 Mar 2022 15:47
编辑 评分 (+10) 标签 讨论 (3) 历史记录 附件 打印 网站工具 + 选项
© SCR公司
同时本站版权基于©XUpsilon-21
2020-2023
一切内容公开共享