Manual:CSS/zh

樣式表 (Cascading style sheet, CSS) 決定了 MediaWiki 中許多的外觀和感覺：諸如字體大小、顏色、空間、標誌和背景的圖片，甚至決定了網站的內容是顯示出來或隱藏起來的.

要改變MediaWiki螢幕顯示(就是它在瀏覽器中看起來的樣子)的風格和感覺，你可以把樣式表放在之中. This file is a page in your wiki, not a file like index.php or load.php, so you cannot find it by looking at the directory structure on your server, nor is it linked to your Main Page or any other page initially. The page initially consists of just a one-line comment. To find it, type MediaWiki:Common.css in the search box on the main page of your wiki. 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內. For mobile version use 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) is an excellent reference for checking how to write CSS correctly directly from the standards:


 * 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的语法正确，如果只是顾及定制后的外形而忽略电脑的兼容性（如，搜索引擎、文本编辑、浏览器等）这是一种不好的做法. Relying on styling to indicate meaning is a bad practice (e.g. for machine readability such as by search engines, screen readers using text-to-speech, and text browsers).

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

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

例如，JSFiddle的CSS复选框. 将 设置为 ，并重置列表上的数字，由于这类没有在MediawWiki上使用. 因此不应该将此编码载入维基上. This sets s to   and resets the numbers on ordered lists. Since none of this normalization CSS is running on MediaWiki sites, you should not use it when testing MediaWiki-related code.

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在這些頁面工作.

Custom fonts versus privacy
On Wikimedia sites, do not load custom fonts from external third-party servers. On Wikimedia wikis, you can load a 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); }