层叠样式表(‘‘CSS’’)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

CSS知识由浅入深,大致由下列要点构成:

  • 层叠作用规则
  • 选择器与类(class)、伪类
  • CSS属性与默认值
  • 实际应用

我们推荐您前往以下页面进行基础学习:

在灰机wiki使用CSS

在灰机,所有管理员以上级别的用户可以在一定条件下自定义站点CSS。具体方法是将站点需要使用的CSS文件添加到所在站点的CSS页面:

  • 方法一Mediawiki:Common.css(灰机不支持针对特定用户的css页面编辑),该页面的脚本会在全站点默认加载,但会被CDN缓存,回源时间最长不超过24h,可以通过?debug=1指令暂时绕过进行调试,详情参考:帮助:Huiji缓存
  • 方法二:通过零件挂载的Gadget:xxx.css页面添加,这里的脚本是按需加载,即只有满足了零件本身的加载逻辑才会生效,与方法一类似,这里的脚本会被CDN缓存。
  • 方法三(需要开发者权限):通过html模板中的<style></style>标签插入一段CSS代码,这里的脚本只会在调用嵌套了html模板的页面加载生效,但不会被CDN缓存,因此无需调试或等待刷新缓存。
    • 注意,如果在template模板中嵌套html模板来装载CSS,如果该模板被多次加载,CSS也会被多次加载,因此最好在嵌入方式仅被加载一次的情况下使用这种方法。
方法 加载方式 会否被CDN缓存 特性
全局加载 MediaWiki默认
按需加载 MediaWiki零件提供
未安装Gadget扩展无法使用
按需加载 不会 灰机wiki提供
非灰机wiki平台无法使用
参考:帮助:站点JS编辑

需要注意的问题

在修改CSS的过程中,您需要注意以下问题:

  • 请不要使用CSS修改属于灰机wiki的皮肤区域,包括但不限于头部、页脚、侧边栏、广告等。请确保您的编辑符合用户协议的约定。
  • 请不要过度修改CSS,以免造成读者阅读困难。(比如将背景设为半透明可能会造成阅读障碍。)
  • 修改CSS后,测试时应在url后加上?debug=1来绕过服务器缓存。
  • 修改CSS后,应尽可能在更多的浏览器上测试(其表现可能完全不同),并且需要照顾手机浏览器。

外部库

为了您的方便,下列外部库已经全局加载,可以直接使用。

模块化

MediaWiki:Common.css中的CSS代码将会全局加载。但是当开发者试图编写一套复杂的CSS代码时,单页显然是不够的。请参阅帮助:零件学习如何编写高扩展性的前端模块。考虑到复用等情况,编写CSS模块时,应当避免硬编码(hard code)颜色,尽量调用主题中预设好的色彩。

常用代码

在进行大规模的修改颜色时,应注意选择器的书写,灰机默认埋下了名为.huiji-css-hook的类,您可以善加利用,以下面的代码为例,可以避免过度选择,影响到talkpage和special页面、ns-0以外的命名空间页面样式。

修改背景颜色

#wiki-outer-body.huiji-css-hook {
  background-color: #F4F0E7;
  color: #000;
}

使用背景图片

#wiki-outer-body.huiji-css-hook{
    background:url(https://huiji-public.huijistatic.com/xinglugu/uploads/a/a2/13.jpg);
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-position: center;
}

修改字体

body {
    font-family: "Lantinghei SC","Open Sans",Arial,"Hiragino Sans GB","Microsoft YaHei","微软雅黑","STHeiti","WenQuanYi Micro Hei",SimSun,sans-serif;
}
avatar