帮助:在WIKI里引用CSS类样式

预制类样式于mediawiki:common.css

• 优点：全局加载
• 缺点：如果 mediawiki:common.css 没有精细的管理和足够清晰的注释，难免会造成样式污染

使用#css函数写于要加载的页面上

• 用法：

{{#css:
.heimu {
    background-color: #252525;
    color: #252525;
    transition: color 0.5s;
}

.heimu:hover {
    color: #ffffff;
}
}}

• 优点：优先级最高，可覆盖 mediawiki:common.css 相同类样式名的样式,具体用法见：插件:CSS
• 缺点1：如果使用在模板页面里，大量重复引用该模板的页面会有非常多的代码冗余，影响seo的收录
  • 解决办法：代码仓库#防止多次加载#css导致页面冗余
• 缺点2：#css不支持带有链接的样式写法，如果有写链接，会导致整个#css函数内的内容全部失效

使用标签<bstyle>

• 用法类似#css：

<bstyle>
.heimu {
    background-color: #252525;
    color: #252525;
    transition: color 0.5s;
}

.heimu:hover {
    color: #ffffff;
}
</bstyle>

• 优点：类似#CSS，但是可以写带链接的样式，比如定义背景图片为静态图片地址
• 缺点：bstlye标签内无法解析WIKI语法

预制一个#widget页面进行加载

• 基本使用方法：建立一个widget名字空间下的页面，使用style标签把样式全部包起来。

<style>
.heimu {
    background-color: #252525;
    color: #252525;
    transition: color 0.5s;
}

.heimu:hover {
    color: #ffffff;
}
</style>

• 优点：随用随加载，并且方便管理。多用于多页面组合实现的功能或大型工具，比如地图工具。关于具体用法见：
• 缺点：原理和#css一样，如果使用在模板页面里，大量重复引用该模板的页面会有非常多的代码冗余，影响seo的收录。
  • 解决办法：代码仓库#防止多次加载#css导致页面冗余

预制一个Gadget页面进行加载

• 和widget类似，但是要注意，gadget拥有自己一套独特的引用和安装流程，详见 帮助:Gadget

用style=""的方式写在模板里封装

• 优点：好调试
• 缺点：大量重复引用该模板的页面会有非常多的代码冗余在编辑页面上，直接占用页面容量，页面很容易写满。