CSS使用指导

> **注意：**由于Fandom的限制，移动端不会加载任何脚本，大多数样式也会在移动端页面被截除，故本页面所论述的内容仅在桌面版网页视图有效。
>
>

Newrooms Wiki作为一个艺术创作社区，难免要涉及对网页样式定制化的要求。然而由于Fandom定制化政策的限制以及Fandom迟迟不实装模板样式扩展，本站的CSS制定一直以来都是通过向MediaWiki:Common.css堆叠代码的方式实现的。MediaWiki:Common.css页面中的CSS会在任何用户访问任何本站wiki页面时加载，然而其中的部分CSS只会用于极个别页面，若在访问其它页面时也要加载冗余的CSS势必会造成流量的严重浪费，而随着社区对CSS的需求增多，MediaWiki:Common.css页面也已变得十分臃肿。为了在Fandom实装模板样式扩展之前方便大家为个别页面引入特定的CSS，我们编写了一个全站脚本和一个模板。如果你要为你的作品定制CSS，请遵照本页面中的论述。

你可以先通过W3School等在线资料学习CSS的写法。你可能会发现你需要顺带学习HTML

## 如何引入样式

### 创建CSS

首先你需要创建一个CSS页面，它的页面名应遵从“User:<你的用户名>/styles/<子页面名>.css”这一格式。你可以在下面的输入框输入子页面名，点击按钮后你会开始编辑这个子页面。

如果页面名正确地以“.css”结尾，你的编辑器应该处于CSS编辑模式。写完CSS代码并保存之后你可以在右边栏的页面工具中点击“页面信息”，你应该能查到页面的内容模型为“CSS”。如果不是，说明你的页面名没有以“.css”结尾，请换一个符合要求的页面名。如果需要删除误操作创建的页面，请联系管理员或内容版主。

这是好的这是不好的
CSS页面保存妥善后，根据CSS所适用的页面会有不同的处理：

仅用于个人页及其子页面
可不作进一步处理。
用于文章
需要移动至“Template:<文章页面名>.css”，并在CSS的末尾加上`/*<noinclude>[[分类:用于文章的CSS]]</noinclude>*/`。
如果是你的草稿完工并发布，文章中又引入了原来的“User:<你的用户名>/styles/<子页面名>.css”，请将文章中引入的CSS页面名也一并改为“Template:<文章页面名>.css”。
用于模板
需要移动至“Template:<模板名>/styles.css”，并在CSS的末尾加上`/*<noinclude>[[分类:用于模板的CSS]]</noinclude>*/`。
由于管理员有更改内容模型的权限，管理员可以直接将Template名字空间中尚不存在的页面的内容模型改为CSS，然后再创建CSS页面。

### 导入CSS

在页面中使用`{{CSS}}`模板即可向页面导入CSS的源码（不显示），而MediaWiki:Common.js脚本会将CSS导入到页面的HTML里。一个CSS页面被多次导入时，只有第一次会生效。如果在文章中使用，建议放在文末。

模板只需要一个匿名参数，即待嵌入CSS的页面名。例如用`{{CSS|Template:Level 0.css}}`会向页面嵌入Template:Level 0.css的源码，而脚本会将其加载进HTML里。如果CSS页面不存在，则会显示一条错误信息：

  **错误：提供给`{{CSS}}`模板的参数“<CSS页面名>”对应的页面不存在。**

为管理方便，只有MediaWiki、User或Template三个命名空间的CSS页面允许嵌入；如果传入的页面名不属于以上三个命名空间，则会显示一条错误信息：

  **错误：提供给`{{CSS}}`模板的页面名“<CSS页面名>”不属于User、MediaWiki或Template中的任何一个命名空间。**

另外确保待导入页面的内容模型是CSS。如果不是，则会显示一条错误信息：

  **错误：提供给`{{CSS}}`模板的参数“<CSS页面名>”对应页面的内容模型不是CSS。**

任一错误发生时，模板会向页面引入“嵌入CSS出错的页面”分类，提醒编辑者检查。

**脚本没有CSS语法检查功能，所以请确保你的CSS页面中的代码是没有错误的，以免导入页面HTML时出错。**你可以使用一些在线CSS检查工具检查CSS代码是否符合语法。（推荐W3C的CSS检查工具）

### 内联CSS

如果想直接在当前页面提供样式，你可以向`{{CSS}}`提供`content`参数。例如：

```
{{CSS|content=
/* 在这里写的CSS也能被导入！ */
}}

```

## 不适合用此种方法的情况

用这种方法引入的CSS是在网页HTML树加载完成后才加入的，所以从网页渲染到CSS生效有一段延迟时间，且CSS生效时页面可能会有非常显著（甚至突兀）的变化。如果页面的视觉效果对于这种变化非常敏感，建议还是使用行内样式（即HTML标签中的`style="..."`属性），除非你对伪类选择器有非常迫切的需求。（伪类选择器无法通过行内样式设定）

另外，如果CSS用于模板，而这个模板的用途十分广泛，你可以考虑联系管理员，让管理员将CSS加入MediaWiki:Common.css。

## CSS守则

**你的CSS不能违反Fandom的定制化政策**。如果站务认定你的CSS会对页面布局和读者阅读体验造成负面影响，站务会要求限期整改，超限后站务会删除相关代码甚至是删除整个页面；对于有严重负面影响的CSS代码，站务有权不经提前告知而直接删除相关代码，必要时可以破坏页面论处。

具体限制：

 File:页面布局示例.png
* 不允许修改wiki内容（对应网页HTML中的`<div id="content" class="page-content">`节点）以外的页面布局，包括重定向提示（对应网页HTML中的`<span class="mw-redirectedfrom">`节点）和父页面导航（对应网页HTML中的`<span class="subpages">`节点）。修改布局的操作包括但不限于隐藏和改变元素间的相对位置。
* 如果修改网页背景图片，要确保页首栏（对应网页HTML中的`<header class="fandom-community-header">`节点）的内容在背景图中仍然清晰可辨。如果页首栏因颜色与背景图相近而不可辨别，请考虑用CSS修改页首栏内容的颜色；极端情况下，背景图上端颜色比较繁杂，无法找到一个合适的颜色使页首栏内容在背景图中可辨，此时你可能需要放弃使用这个背景图。
* 涉及颜色样式时，请确保你的配色方案对于Fandom的亮色主题和深色主题均适配（页面右上角五个按钮中的第四个就是明暗主题的切换开关）。你需要用`.theme-fandomdesktop-light`和`.theme-fandomdesktop-dark`选择器来分别控制不同主题下的样式。可参考User:HyperNervie/CSS测试和User:HyperNervie/CSS测试.css中的案例。

亮色主题配色示范.png这是亮色主题下的配色暗色主题配色示范(寄).png在暗色主题继续用这个配色就寄了暗色主题配色示范.png所以应该换个配色
## 小贴士

* 善用浏览器的“审查元素”功能！
* 勤查资料！
* 少用`@import`！

注释
--

1. ↑ 注意讨论版不是MediaWiki软件提供的wiki功能，不属于wiki页面。
2. ↑ 我们不建议使用用户页的一级子页面是因为“User:<用户名>/<子页面名>.css”会被MediaWiki用作**个人CSS**。详情见mediawiki.org上对界面CSS功能的介绍。
3. ↑ 对于宽度不够的浏览器，页面没有右边栏，页面工具会处于页面底端。
4. ↑ 因为移动页面后，原页面会留下一个以`/* #redirect */ @import`开头的代码，而用`@import`语句导入CSS会有延迟。网不好的话有可能根本加载不出来