Manual:CSS/zh

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

樣式表可以用來改變整個wiki的風格，例如讓背景換成不同的顏色，或是你可以使用行內樣式表，樣式化你wiki文本中的特定範圍. 例如 綠色文本 可以用這樣的代碼實現. 如果你想讓wiki上的所有文字變大，你可以把代碼加到內.

要改變MediaWiki螢幕顯示(就是它在瀏覽器中看起來的樣子)的風格和感覺，你可以把樣式表放在之中.

If code added to doesn't take effect immediately, you may have to do a hard refresh.

要改變MediaWiki頁面印刷出來的方式，請你將樣式表放在你wiki中的頁面.

如果你的wiki允許，個別的使用者都可以在Special:MyPage/.css (例如 ，如果他們使用vector版型)，建立只給他們個人使用的客製化樣式表. Special:MyPage/common.css可以在所有的版型中建立個人樣式表.

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

幫助
CSS syntax, attributes and values, must be correct or stuff won't work right. 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

Wikipedia gives a good overview of CSS.

If you prefer an easily consumable reference alongside demos of CSS features Mozilla Developer Network CSS Reference will provide you an "up-to-date" guide to syntax and basic usage of the various elements.


 * Mozilla Developer Network CSS Reference

Caveats
Be sure to keep your HTML markup semantic. 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).

Normalized CSS
Much CSS today relies on a "reset" or "normalize" CSS to make all browsers work the same. MediaWiki does not have a reset per se, though there are built-in stylesheets such as common/commonElements.css, common/commonContent.css, common/commonInterface.css, and.

If you copy CSS, watch if it depends on additional CSS.

For example jsFiddle has a checkbox for "Normalized CSS". 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 has a feature to import CSS. If you're testing against the Vector skin on English Wikipedia, the primary sheets should be (in this order):


 * [/load.php?debug=true&lang=en&modules=mediawiki.legacy.shared&only=styles&skin=vector Legacy general (all skins that use CSS) CSS built in to core]
 * [/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector General and Vector CSS built-in to core]
 * [/load.php?debug=true&lang=en&modules=site&only=styles&skin=vector Site CSS (MediaWiki namespace)]
 * Mediawiki.org controls site CSS with the Gadgets extension, so Mediawiki:Gadget-site.css is used in place of Mediawiki:Common.css. This results in a slightly different load URL.
 * [/load.php?debug=true&lang=en&modules=ext.gadget.site-styles&only=styles&skin=vector CSS for all skins (for all users) on MediaWiki.org (MediaWiki namespace)]
 * [/load.php?debug=true&lang=en&modules=site.styles&only=styles&skin=vector Vector skin CSS (MediaWiki namespace)]

You can adjust the domain in the URL for other WMF wikis. By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.

Styles not working on Special:UserLogin or Special:Preferences?
By default, site CSS customizations (e.g. MediaWiki:Common.css) do not take effect on the login and preferences pages. This is to preserve the security of the login process, and to allow users to remove any unwanted customizations without being interfered with. If you are not concerned about the security risks, you can use the configuration setting to allow custom CSS to work on these pages.