手冊:CSS

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

Languages:

"CSS" redirects here. For the extension, see 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: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/<skin_name>.css中为自己创建自定义的CSS（例如：Special:MyPage/vector.css，如果用户是使用向量皮肤的話）。 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标记的语法正确。只依靠定制样式来表示意义这是一种不好的做法（如，对于机器的可读性，如搜索引擎、將文字轉成聲音的屏幕阅读器、以及文本浏览器等）。

If necessary, custom style sheets can temporarily be deactivated using the safemode=1 URL parameter.

规范化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的功能。如果你是针对英语维基百科上的向量皮肤进行测试，主要的表应该是（按这个顺序）：

旧式通用（所有使用CSS的皮肤）的CSS已被内置于核心中
通用和向量的CSS已被内置在核心中
Site CSS（MediaWiki命名空间）
- MediaWiki.org使用小工具的扩展控制Site CSS，所以由MediaWiki:Gadget-site.css代替了MediaWiki:Common.css。这会导致加载的URL稍有不同。
  - 用於MediaWiki.org上（針對所有使用者）所有的皮肤的CSS（MediaWiki命名空間）
  - 向量皮肤CSS（MediaWiki命名空間）

您可以為其他維基媒體基金會的wiki們調整URL中的域名。通过导入这些，你可以更好地了解你的CSS是如何与維基媒體基金會的wiki上的CSS互动的。

在Special:UserLogin或Special:Preferences中的樣式不能工作？

預設情況下，site CSS的自訂內容（例如MediaWiki:Common.css）不會對登入與偏好設定頁面產生影響。這是為了保護登入流程安全，并允許使用者移除無需要的自訂內容，而不被它干擾。如果您不在意安全的風險，您可以使用$wgAllowSiteCSSOnRestrictedPages 配置設定允許自訂CSS在這些頁面工作。

Using the url() function

For privacy reasons, Wikimedia sites are configured to reject loading resources from external servers using the url() CSS function. This includes resources encoded in data URLs.

However, you can load resources that are hosted in the Wikimedia servers. For example, you can load an image from Wikimedia Commons and use it as a background image via CSS:

.my-class {
	background: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/some_image.svg");
}

You can also use a custom font family provided by Wikimedia's Universal Language Selector extension (see the list of fonts available on Wikimedia wikis).

Example CSS to load the Gochi Hand font:

@font-face {
  font-family: 'GochiHand';
  src: local("Gochi Hand"),
       url(https://xyz.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2);
}

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

参见