Manual:CSS/zh


 * "CSS" redirects here. For the extension, see Extension:CSS.

层叠樣式表（Cascading style sheet，CSS）決定了 MediaWiki 中許多的外觀和感覺：諸如字體大小、顏色、空格、標誌和背景的圖片，甚至決定了網站的內容顯示或隱藏.

要改變MediaWiki螢幕顯示（就是它在瀏覽器中看起來的樣子）的样式和感覺，你可以把樣式表放在之中. 这个文件是你的wiki中的一个页面，而不是像index.php或者load.php这样的文件，所以你无法通过查找服务器的目录结构来找到它，也无法初始链接至主页或者其他页面. 这个页面一开始只包含一行注释. 在wiki主页面的搜索框中输入MediaWiki:Common.css就可以找到它. It will appear as a file with an address something like https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css. (Requires the following permission to edit: "interface administrator")

要显示MediaWiki页面在变更之后的区别，请将MediaWiki:Print.css放到你的Wiki中.

樣式表可以用來改變整個wiki的样式，例如讓背景換成不同的顏色，或是你可以使用内链樣式表，樣式化你wiki文本中的特定範圍. 例如可以用這樣的代碼實現. 如果你想讓wiki上的所有文字變大，你可以把代碼加到MediaWiki:Common.css內. 移动版使用 MediaWiki:Mobile.css

如果你的wiki中已经启用，用户可以在Special:MyPage/&lt;skin_name&gt;.css中创建，例如：Special:MyPage/vector.css，如果用户使用vector形式的建立的个人定制页. 那么就要用“Special:MyPage/common.css”建立个人定制页面.

你也可以為MediaWiki建立客製化版型.

帮助
CSS语法，属性和值必须正确，否则某些内容将无法正常工作. World Wide Web Consortium (W3C)是检查如何直接从标准正确编写CSS 极好参考：


 * https://www.w3.org/TR/CSS21/propidx.html - CSS 2.1 Index of properties &larr; very helpful
 * http://www.w3.org/TR/CSS21/indexlist.html - CSS 2.1 Index of everything
 * http://www.w3.org/TR/CSS21/cover.html#minitoc - CSS 2.1 Table of Contents

维基百科给了一个很好的例子：overview of CSS.

如果你喜欢参照其他网站和观看如何编辑高级定制化页面，请参照Mozilla开发者网络高级定制化页面，它会为你提供一个各种形式的编程方法.


 * Mozilla開發人員網路CSS參考資料

注意事项
确保HTML的语法正确. 如果只是顾及定制后的外形而忽略电脑的兼容性（如，搜索引擎、文本编辑、浏览器等）这是一种不好的做法.

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



定制化页面的规范
现在，许多定制化页面都依赖于“重置”或“常规化”的定制页面，以便所有浏览器都能正常工作. 但MediaWiki没有上述所说的设置，虽然内置有定制化样式表，如通用的commonElement.css、普通的commonContect.css、普通的commonInterface.css和.

如果你复制这个网站的定制化页面，请看一下它是否依靠其他网站的定制化页面.

例如，JSFiddle的CSS复选框. 将 设置为 ，并重置列表上的数字. 由于这类没有在MediawWiki上使用. 因此不应该将此编码载入维基上.

jsfiddle具有导入定制化(CSS)功能. 如果你在维基百科上测试，你应该按照这个程序去测试：


 * [/load.php?debug=true&lang=en&modules=mediawiki.legacy.shared&only=styles&skin=vector 旧式通用定制化核心（所有的被定制化网页的外观）]
 * [/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector 通用高级定制页的核心值]
 * [/load.php?debug=true&lang=en&modules=site&only=styles&skin=vector 定制化页面网站（MediaWiki的命名空间）]
 * [/load.php?debug=true&lang=en&modules=ext.gadget.site-styles&only=styles&skin=vector 用於MediaWiki.org上所有外觀（針對所有使用者）的CSS（MediaWiki命名空間）]
 * [/load.php?debug=true&lang=en&modules=site.styles&only=styles&skin=vector Vector外觀CSS（MediaWiki命名空間）]
 * [/load.php?debug=true&lang=en&modules=site.styles&only=styles&skin=vector Vector外觀CSS（MediaWiki命名空間）]

您可以為其他基金會wiki調整URL中的域名. 通過匯入這些，您可以獲得讓您的CSS與基金會wiki上的CSS互相作用的更佳主義.



在Special:UserLogin或Special:Preferences中樣式不能工作？
預設情況下，網站CSS自訂（例如MediaWiki:Common.css）不會對登入與偏好設定頁面產生影響. 這是為了保護登入流程安全，并允許使用者移除無需要的自訂內容，而不干擾它. 如果您不關心安全風險，您可以使用配置設定允許自訂CSS在這些頁面工作.

Using the url function
For privacy reasons, Wikimedia sites are configured to reject loading resources from external servers using the  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:

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:

If you wish to use custom fonts, they need to be installed locally on your system.

