Manual:CSS

This page is a translated version of the page Manual:CSS and the translation is 100% complete.

这是“CSS”的重定向页面。要想查找CSS扩展，请参阅扩展: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: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參考資料将为你提供一个 "最新 "的指南，介绍各种元素的语法和基本用法。

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稍有不同。
  - 用於MediaWiki.org上（針對所有使用者）所有的皮肤的CSS（MediaWiki命名空間）
  - Vector皮肤CSS（MediaWiki命名空間）

您可以為其他維基媒體基金會的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);
}

如果您想要使用自定义字体，这些字体必需安装在系统本地。

参见