Manual:CSS
- 这是“CSS”的重定向页面。要想查找CSS扩展,请参阅Extension:CSS 。
层叠样式表(Cascading style sheet,CSS)決定了 MediaWiki 中許多的外觀和感覺:諸如字體大小、顏色、空格、徽标和背景的圖片,甚至決定了網站的內容顯示或隱藏。
想要改變 MediaWiki 屏幕顯示(它在瀏覽器中看起來的樣子)的样式和感覺,你可以把樣式表放在 MediaWiki:Common.css 之中。 这个文件是你的 wiki 中的一个页面,而不是像 index.php 或者 load.php 这样的文件,所以你无法通过查找服务器的目录结构来找到它,也无法初始链接至主页或者其他页面。 这个页面一开始只包含一行注释。 在wiki主页面的搜索框中输入 MediaWiki:Common.css 就可以找到它。 它将以一個文件的形式出现,其地址类似于 https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css 這樣的型式。 (需要如下的权限才能编辑:“界面管理员”)
想要改变MediaWiki页面的打印的方式,你就要把CSS放到你的wiki上的MediaWiki:Print.css裏。
CSS可以用來改變整個wiki的风格,例如讓背景換成不同的顏色、或者你可以使用内联CSS来設計wiki中的特定文本的样式。
例如可以用<span style="color:green">green text</span>
這樣的代碼來做到绿色文本。
如果你想讓wiki上的所有文字變大,你可以把代碼body { font-size: larger; }
加到MediaWiki:Common.css內。
移动版使用的是MediaWiki:Mobile.css。
如果 $wgAllowUserCss 在你的 wiki 中被启用,个人用户可以在 Special:MyPage/<皮肤名>.css 中为自己创建自定义的 CSS(例如:Special:MyPage/vector.css,如果用户是使用 Vector 皮肤的話)。 Special:MyPage/common.css允许为所有皮肤创建个人的CSS。
你也可以為MediaWiki创建自定义的皮肤。
帮助
CSS的语法、属性和值都必须正确,否则就不能正確生效。 万维网联盟(W3C)是一个检查如何直接从标准中正确编写CSS極好的参考:
- https://www.w3.org/TR/CSS21/propidx.html - CSS 2.1 属性的索引← 相当有帮助
- http://www.w3.org/TR/CSS21/indexlist.html - CSS 2.1 一切的索引
- http://www.w3.org/TR/CSS21/cover.html#minitoc - CSS 2.1 目录
维基百科提供了一个很好的CSS概述。
如果你更喜欢在演示CSS功能的同时,提供一个容易消耗的参考资料,Mozilla開發人員網路CSS參考資料将为你提供一个 "最新 "的指南,介绍各种元素的语法和基本用法。
注意事项
一定要確保你的HTML标记的语法正确。 只依靠样式来表示意义是一种不好的做法(如,对于机器的可读性,如搜索引擎、使用文字轉语音的屏幕阅读器以及文本浏览器等)。
必要时可通过使用safemode=1
URL参数暂时禁用自定义样式。
规范化CSS
现今,许多CSS都依赖于“重置”或“规范化”CSS,以使所有的浏览器的表現都是相同的。 MediaWiki本身没有重置,尽管有内置的样式表,如common/commonElements.css、common/commonContent.css、common/commonInterface.css,以及 MediaWiki:Common.css。
如果你复制某個CSS,要注意它是否依赖于其他的CSS。
例如,jsFiddle就有一个 "规范化CSS "的复选框。
它會将margin
设置为0
,并重置列表上的数字。
由于这些规范化的CSS都没有在MediaWiki网站上运行,所以在测试MediaWiki相关的代码时,你不应该使用它。
jsfiddle有一个导入CSS的功能。 如果你是针对英语维基百科上的Vector皮肤进行测试,主要的表应该是(按这个顺序):
- 旧式通用(所有使用CSS的皮肤)的CSS已被内置于核心中
- 通用和Vector的CSS已被内置在核心中
- Site CSS(MediaWiki命名空间)
- MediaWiki.org使用小工具的扩展控制Site CSS,所以由MediaWiki:Gadget-site.css代替了MediaWiki:Common.css。 这会导致加载的URL稍有不同。
您可以為其他維基媒體基金會的wiki們調整URL中的域名。 通过导入这些,你可以更好地了解你的CSS是如何与維基媒體基金會的wiki上的CSS互动的。
在Special:UserLogin或Special:Preferences中的樣式不能工作?
預設情況下,site CSS的自訂內容(例如MediaWiki:Common.css)不會對登入與偏好設定頁面產生影響。
這是為了保護登入流程安全,并允許使用者移除無需要的自訂內容,而不被它干擾。
如果您不在意安全的風險,您可以使用$wgAllowSiteCSSOnRestrictedPages
配置設定允許自訂CSS在這些頁面工作。
使用url()函数
出于隐私原因,Wikimedia网站配置为拒绝使用url()
CSS函数从外部服务器加载资源。包括在数据URL中编码的资源。
但是您可以加载托管在Wikimedia服务器中的资源。例如您可以从Wikimedia Commons加载图像,并通过CSS将其用作背景图像:
.my-class {
background: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/some_image.svg");
}
您还可以使用Wikimedia的通用语言选择器提供的自定义字体系列(参见Wikimedia wiki上的可用字体表)。
加载Gochi Hand字体的CSS示例:
@font-face {
font-family: 'GochiHand';
src: local("Gochi Hand"),
url(https://xyz.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2);
}
如果您想要使用自定义字体,这些字体必需安装在系统本地。
参见
- 手册:界面/JavaScript
- 手册:界面/样式表
- Extension:CSS
- Extension:TemplateStyles
- 手册:代码编写约定/CSS
$wgUseSiteCss
$wgAllowUserCss
- Category:用户界面扩展
- Category:皮肤扩展
- Category:Snippets with CSS