代码教程

本篇教程以全站CSS内容为基础。
本页面以后室中文代码教程的基础改编而来。
如果本页面出现问题，你可以对页面进行**合理**的修改。

**提示:** 此教程正在完善中。

#### 属性标签:id

属性标签"id"的作用即为命名~~(毕竟谁不想给自己的代码起一个“好听”的名字呢)~~，你可以将它理解为它能给这个属性标签所包含的内容加一个特殊且唯一的标记。它的用法大致如此：

* 代码
* 效果

<span id="写代码真的好难累">你好啊</span>

你好啊
代码示例 1-4

#### 属性标签:class

**注:此属性根据全站CSS的不同，效果可能有所变化。**属性标签"class"的作用为添加类目，它与“id”的唯一区别就是可指定多个对象，以改变文本的样式。下面举几个栗子：

* 代码
* 效果

<span class="heimu">此段内容使用了class:"heimu"（来源于萌娘百科）</span>

此段内容使用了class:"heimu"（来源于萌娘百科）
代码示例 1-5 [黑幕]

* 代码
* 效果

<span class="spoilerblur">此段内容使用了class:"spoilerblur"</span>
##### 　附注

将鼠标移到模糊块上试试？通过如此，可以产生一个防剧透（模糊）的效果。你可以将它用于一些加密文件上，**但请注意，模糊字的大量使用会严重影响观感**。

此段内容使用了class:"spoilerblur"
代码示例 1-6 [模糊字]

* 代码
* 效果

<span class="countdown" style="display:none;">还有<span class="countdowndate">January 01 2023 00:00:00</span>就到新年啦！</span>
##### 　附注

此段内容使用了class:"countdown"，来源于Fandom开发者社区。更多用法请在这里查看。

还有January 01 2024 00:00:00就到新年啦！
代码示例 1-7 [倒计时]

#### 属性标签:title

属性标签"title"可以为其中所包含的内容添加一个当鼠标悬停于其上时显示出的文字。

* 代码
* 效果

<span title="你看到我了吗？">把鼠标放在这段文字上试试！</span>

把鼠标放在这段文字上试试！
代码示例 1-8

* 代码
* 效果

 <span class="heimu" title="你知道的太多了">此段内容结合了class:heimu与title标签</span>

此段内容结合了class:heimu与title标签
代码示例 1-9

#### 属性标签:style

属性标签"style"是属性标签中最重要的一部分，也是你的创作过程中一定会用到的内容。你想要给一段文字上色也好，调整位置也好，调整大小也好，更改字体也好，都需要用到这个，每一个style标签中的具体属性都要用到“;”（英文分号）进行分割，比如<div style="color:green;font-family:黑体">这个样子。<br>'''本文第二章内容将就style中的各个可添加属性展开。'''

## 二:特殊文本样式

### color颜色

* 代码
* 效果

<span style="color:red;">Hello World</span>
##### 　附注

恭喜你，这行字变成红色了，如果你想更随心所欲一些，可以搜索一下十六进制颜色码用在这里，玩得开心！

Hello World
代码示例 2-1

在示例2-1中采用了颜色对应英文的方式来更改字体的颜色。你还可以通过十六进制颜色码来表示颜色。下面一个例子集合了这两种表达方法：

* 代码
* 效果

<span style="color:PaleVioletRed">这是另一段</span><span style="color:#FF1493">色彩斑斓</span><span style="color:Thistle">的文字</span>

这是另一段色彩斑斓的文字
代码示例 2-2

* 代码
* 效果

<span class="spoilerblur"><span class="ua-animation ua-shrink">忽大忽小的文字！</span>
##### 　附注

这是忽大忽小的文字。

忽大忽小的文字！
代码示例 1-6 [模糊字]

同样的，你还可以通过rgba方法来表达颜色。下面的例子就使用了rgba方法来显示文字。

* 代码
* 效果

<span style="color:rgba(230,207,103,0.5)">这是一段透明的带颜色文字</span>

这是一段透明的带颜色文字
代码示例 2-3

### font-family字体

可以改变文字的字体样式，俗称字体。
**如果这个字体没有被本Wiki搭载**，那么只有电脑（ios设备除外）上装有这个字体的人才能看到你设置的这个字体。比如你设置字体为汉仪文黑，那么只有电脑上装有汉仪文黑这个字体的人才能看到（这段话就是这个字体哦，如果你没有装这个字体，那么你看到的应该是设备默认的字体）。**所以，不要用你的电脑上安装的字体，别人看不到变化。**

**如果本Wiki搭载了某个字体**，那么所有人（电脑端）都能看到。

以下为本Wiki搭载的中文字体列表：

**ZCOOL XiaoWei** ***注意：此字体默认大小较小，请注意字号。***

使用方法: <span style="font-family:ZCOOL XiaoWei;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Ma Shan Zheng**

使用方法: <span style="font-family:Ma Shan Zheng;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Long Cang** ***注意：此字体默认大小较小，请注意字号。***

使用方法: <span style="font-family:Long Cang;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Zhi Mang Xing** ***注意：此字体不易辨识，请慎用。***

使用方法: <span style="font-family:Zhi Mang Xing;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Noto Serif SC**

使用方法: <span style="font-family:Noto Serif SC;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Genshin75W**

使用方法: <span style="font-family:Genshin75W;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Genshin55W**

使用方法: <span style="font-family:Genshin55W;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**CangerW02**

使用方法: <span style="font-family:CangerW02;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

其实一些系统中一般自带的字体也可以使用。比如：等线、楷体、宋书等。

此外，还有一些通过外部字体库可以调用的字体，详情请见Freefonter字体库

### 样式：作者与附注信息块

如果你想在你的文最下方注明作者（或合著人/上传人等），你可以使用Author模板。使用格式如下：
`{{Author|作者=|图像来源=|附注=}}`
下面举一个例子：`{{Author|作者=An Average Backroom Writer|图像来源=https://unsplash.com/photos/koy6FlCCy5s|附注=如果你对本文有什么建议，请留言，谢谢！}}`
效果：

<< 查看作者与附注内容>> 收起作者与附注内容

An Average Backroom Writer << **作者**
https://unsplash.com/photos/koy6FlCCy5s << **图像来源**
如果你对本文有什么建议，请留言，谢谢！ << **附注**

当然，有时为了方便，你也可以直接使用一个折叠来注明作者信息，就像这样：
效果：

**> 查看作者与关于信息**

**< 隐藏作者与关于信息**

作者: Backrooms
图像来源：https://unsplash.com/photos/xxx

### 样式：折叠密码模块

一些"传说"等隐藏内容较多的页面包括一个假的"登录"框，提示用户输入密码。但其实不需要真正的输入，因为点击该框将显示下一节内容并自动填充密码。这可以通过下面这一长串代码来实现。

`<div style="background-color:white; color:#AAAAAA; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">`

`<span class="mw-customtoggle-password mw-customtoggle-password2"><div class="mw-collapsible" id="mw-customcollapsible-password2">输入密码</div></span>`

`<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password"><div class="mw-customtoggle-password mw-customtoggle-password2"> 示例密码</div></div></div>`

`<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password"><big>已自动填充已缓存密码，欢迎 {{USERNAME}}。</big><br /><br />[示例内容]</div>`

在实践中，这段代码会产生这样的结果：

输入密码
 示例密码
已自动填充已缓存密码，欢迎，无名的流浪者。

[示例内容]

当然，你也可以对这个折叠样式进行进一步的美化，如下所示：（来源：员峤）

`[[File:The MEG's Logo (Thanks to Egglord1).png|right|215x215px]]
<div style="background-color: #FAFAD2; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">
'''警告：'''<br>
<code>以下内容已被M.E.G加密，请输入有效凭证。</code>

'''原因：''' <code>你并未获取浏览这个文件的许可，它要求更高的许可等级。</code>
</div>

<div style="background-color:#FAFAD2; color:#888888; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">
<span class="mw-customtoggle-password mw-customtoggle-password2"><div class="mw-collapsible" id="mw-customcollapsible-password2">
输入密码</div></span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password">
<div class="mw-customtoggle-password mw-customtoggle-password2">
4R415T51G1Rr4</div>
</div>
</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password">
<br />
<div style="text-align: center><code>'''凭证有效。'''</code></div>
<br />
<div class="mw-customtoggle-first"><span style="color:blue;">'''<code><big><u><div style="text-align: center">> 打开文件</div></u>'''</big></code></span></div><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-first">[示例内容]</div></div>`

效果：

File:The MEGN's Logo (Thanks to Egglord1).png

**警告：**

`以下内容已被M.E.G.N.加密，请输入有效凭证。`

**原因：** `你并未获取浏览这个文件的许可，它要求更高的许可等级。`

输入密码

4R415T51G1Rr4

`**凭证有效。**`

**`> 打开文件`**[示例内容]

### 样式：扫描动画折叠

觉得普通折叠看起来太简单、用惯了？那么不如来试试这个**动画**模板吧~

**{{AnimatedCollaspe|num=xxx|content=这里放内容}}**

把你要隐藏的内容（可以有代码）放进去就可以啦~

比如
{{AnimatedCollaspe|content=<font color="0000FF"><center>可恶，这个机密内容竟然被你看到了</center></font>}}

效果（点一下试试）：

**WARNING**
**模因标记触媒检测到生命迹象。即将进行基因组核查。**
请注意，你正在进行未经允许的访问
如未拥有指定权限密钥，模因定位将即刻生效

*-- Gene Checking Loading --*
 访问者:   无名的流浪者

 基因密钥:  GENE#01-170513303212PW0813SF

 基因密钥:  *GENE#01-170513303212PW0813SF*

可恶，这个机密内容竟然被你看到了

你也可以去AnimatedCollaspe模板页面查看一下实现美化内容的代码，然后复制到你的文里，修改这个动画中的部分内容（一定不要改模板哦！）。如果你不太熟悉代码，使用这个模板即可。如果你想在文中使用多个这个模板，请更改num的值（前边基本格式里的xxx）。

### 拓展：进度条

FDBR支持一些定制的进度条

例如：

`<div class="progress"><span class="text">没有标签的基本进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

没有标签的基本进度条50%

其中“没有标签的基本进度条”是进度条的名字，可以随便改；而"width: 50%"中的50%指的是进度条的宽度；最后的“50%”指的是进度条的进度。

像这样的进度条还有很多种，可以进行自定义处理。（下面列出几个常用的）

不需要进度条名称：

`<div class="progress"><span class="text"></span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

50%

暗色进度条：

`<div class="progress dark"><span class="text">一个黑黑的进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

一个黑黑的进度条50%

冰火两重天（误）进度条：

`<div class="progress gradient"><span class="text">左边蓝右边红</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

左边蓝右边红50%

圆角进度条：

`<div class="progress round"><span class="text">圆角进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

圆角进度条50%

动画进度条：

`<div class="progress animated"><span class="text">动画进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

动画进度条50%

一个暗色圆角动画进度条：

`<div class="progress dark round animated"><span class="text">一个暗色圆角动画进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果是这个样子

一个暗色圆角动画进度条50%

### 渐变颜色

首先我们需要知道，对于一个div元素，在竖直方向上，元素的最底层为background-color，其上为background-image，再上方即为文本。你可以通过background-origin属性来设置div元素中content、border与padding部分的相对位置。在水平方向上，从最外部到最内部，依次为margin、border、padding、content。这对我们设置背景和文本的颜色有非常大的作用。

纯颜色的背景渐变在这些内容中是最简单的，因为它一般只需用到一个具体的属性，即background-image。在这个属性中嵌入渐变方式与渐变颜色即可达成渐变的目的：

* 代码
* 效果

<div style="background-image:linear-gradient(0deg, #00BFFF, #00FFFF, #1E90FF);height:100px;width:100px">Gradient!</div>
##### 　附注

这是一个竖直（0deg）线性（linear）渐变的的背景区块示例。

Gradient!
代码示例 1-1

* 代码
* 效果

<div style="background-color:black;background-image:radial-gradient(white, rgba(255,255,255,.2) 20px);height:100px;width:100px;border-radius:50px"></div>
##### 　附注

这是一个辐射（radial）渐变的的背景区块示例；rgba是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha（透明度）的色彩空间，Alpha=1视为完全不透明，rgba(255,255,255,.2)即Alpha=0.2的白色。与之相似的有opacity属性，我们可以通过其更改文本或背景块的透明度，后文将具体介绍。

代码示例 1-2