MediaWiki

手冊:CSS

This page is a translated version of the page Manual:CSS and the translation is 100% complete.
Languages:
这是“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/<skin_name>.css中为自己创建自定义的CSS（例如：Special:MyPage/vector.css，如果用户是使用向量皮肤的話）。 Special:MyPage/common.css允许为所有皮肤创建个人的CSS。

你也可以為MediaWiki创建自定义的皮肤。

帮助

CSS的语法、属性和值都必须正确，否则就不能正確生效。 万维网联盟（W3C）是一个检查如何直接从标准中正确编写CSS極好的参考：

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

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

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

参见

Retrieved from "https://www.mediawiki.org/w/index.php?title=Manual:CSS/zh&oldid=6229254"