飞屋之域 Wiki

正如标题所示,这个页面是一个关于站内Css使用的教程,阅读该条目前,你需要先了解什么是Css,以及Css的用法,然后你可能会发现您还需要先学习html。

如何导入Css[]

由于Fandom定制化政策的限制,本站的CSS制定一直以来都是通过向MediaWiki:Common.css堆叠代码的方式实现的,你可以把它理解为全局资源。为了在Fandom实装模板样式扩展之前方便大家为个别页面引入特定的CSS,我们编写了一个全站脚本一个模板我们向Fandom Backrooms Wiki借鉴了一个全站脚本和一个模板,因为站长不会JavaScript。如果你要为你的作品定制CSS,请遵照本页面中的论述。

创建个人的Css[]

首先你需要创建一个CSS页面,它的页面名应遵从“User:<你的用户名>/styles/<子页面名>.css”。你也可以直接在你想要插入Css的页面中输入{{CSS|User:你的用户名/styles/你的用户名/styles/Css页面名.css}},这样可以减少创建Css页面后还要将Css导入某个页面的麻烦。
注意:创建css页面请确保标题结尾带有“.css”的字样,这就像文件的拓展名,没有它css编辑页面是不生效的

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

页面内联CSS[]

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

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


比如说,这个页面的Css就是以内联的方式插入的 /*打开编辑模式应该能看到下面的内联Css*/

Css编辑守则[]

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

具体限制:

  • 不允许修改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选择器来分别控制不同主题下的样式。

小贴士[]

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

注释[]