CSS主题版式指南:如何制作属于你的版式
评分: +6+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
修改: MScarletMScarletDr DevanDr DevanSekai_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');

©SCR Corporation