手册:界面/样式表

MediaWiki:Common.css是在活动皮肤的样式表之后加载的一个层叠样式表。 此样式表在所有皮肤 中加载，并附加了一个类似的特定于皮肤的样式表，名为“MediaWiki:皮肤名.css”（见下文）。 尽管Special:AllMessages上只列出了Monobook.css，但其他特定于皮肤的样式表仍然有效。

如果$wgAllowUserCss 设置为true，则用户只能通过创建带有小写标题的用户子页面来自定义自己的界面（见下文）。

除非启用$wgAllowSiteCSSOnRestrictedPages ，否则全局样式表不会加载到特殊的受限页面，如登录或参数设置。

They also won't load if safemode is used.

样式表列表

全局样式表

These are stylesheets that affect all users of the wiki, depending on their setup — what skin they use, their user group, etc.

• MediaWiki:Common.css - 对于所有皮肤和所有用户，MobileFrontend除外
• MediaWiki:skinname.css - 每个皮肤，skinname是皮肤的PHP文件中该变量的值，例如MediaWiki:Vector.css, MediaWiki:Monobook.css
• User group CSS - 每个用户组，例如MediaWiki:Group-sysop.css
• MediaWiki:Noscript.css - 适用于不使用JavaScript查看的用户；可替换为body.client-nojs选择器
• MediaWiki:Print.css - 适用于页面的“可打印版本”
• MediaWiki:Mobile.css - 对于移动主题，与Extension:移动版前端 一起使用
• MediaWiki:Filepage.css - 专门针对使用共享文件页面（外部存储库）的本地文件页面。
• MediaWiki:Apioutput.css - for the web (not JSON) results of API queries

个人样式表

这些样式表只有您自己和具有editusercss 权限的用户（通常是界面管理员）才能编辑。

• User:Example/common.css - 所有皮肤 - 在MW v1.17中引入
• User:Example/skinname.css - 每个皮肤，例如User:Example/vector.css和User:Example/monobook.css
• User:Example/global.css - 根据wiki家族，如果此家族中使用了Extension:GlobalCssJs

In the case of conflicting style settings for a piece of content, the resulting setting depends primarily on specificity. For two rules of the same specificity, it depends on order between and within stylesheets: the last wins. See also cascading order. The order can be overriden with the indication !important, but this should generally be avoided.

CSS selectors

In the Monobook skin, the CSS selectors relevant for the style of the page body include the following. As far as possible, examples are given, which show the result for the current style settings:

• :link – unvisited link – example: help:index ; default: help:index
• :visited – visited link
• :link#contentTop
• :link.external – http://example ; default: http://example
• :link.extiw – interwiki link in page body –  ; default: en:example
• :link.image – link from full image to image description page
• :link.internal – link to file itself (Media:), and links from thumbnail and magnifying glass icon to image description page (note that color and font size specified for a.internal are only applicable in the first case) – Media:example.png
• :link.new – doesnotexist ; default: doesnotexist
• .allpagesredirect – abc – redirects in Special:Allpages and Special:Prefixindex
• body.ns-0, ..., body.ns-15 (namespaces)
• div#bodyContent
• div#column-content
• div#editsection
• div#globalWrapper
• div#tocindent
• div.tocline
• h1.firstHeading
• h2
• h3
• small – example
• table.toc
• :link 和 :visited – It's a common mistake to use a instead of :link or :visited to style links (unvisited and visited, respectively). Whereas later pseudoclasses apply only to links, a applies to both links and named anchors (e.g. <a name="bookmark">).

• #p-lang a – for interlanguage links

One may also have the style depend on the value of an attribute, e.g. with the selectors:

• :link[title = "User:username"]}}
• link[title = "pagename"]}}
• link[href = "full url "]}}

to color-code or highlight particular users (including oneself) and/or links to particular pages (like the bolding of watched pages on Recent Changes).

See also

The watchlist and Recent Changes use two classes:

• .autocomment
  example
• .new (see below)

The page history has classes autocomment and:

• .user
• .minor

Thus the font specified for user applies in the page history, but not in the watchlist or Recent Changes.

Edit page

• Edit box: textarea#wpTextbox1

example1

• Edit summary box: input#wpSummary

example2

Non-display

One extreme style for a text is display:none;, i.e., not displaying it, e.g.

p<span style="display:none;">q</span>r → pqr

To allow a text to optionally have this style, specify a class or id for it; a user who wants to hide it can then correspondingly specify in their personal CSS:

.classname {display: none;} or #id {display: none;}

Non-displayed links do not work, as opposed to links in a very small font, compare:

p<span style="display:none;">[[q]]</span>r gives pqr

p<small><small><small><small><small>[[q]]</small></small></small></small></small>r gives pqr

It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in links, etc.

While display: none; produces nothing, visibility: hidden; produces blank spaces replacing the content; its opposite is visibility: visible;.

Example:

p<span style="visibility: hidden;">q</span>r gives pqr

Try inspecting the page with the Developer tools probably provided with your browser to find the hidden element.

If you would like to view the hidden text, you could use an add-on for your browser. For example, the Web Developer add-on is available for Firefox and Chrome. You could add it to your browser and then choose "Misc." -> "Display Hidden Elements" in that toolbar, to make all hidden elements appear.

Non-print

One can exclude content from being printed (if the browser supports CSS) by declaring the content to be of the "noprint" class:

<div class="someclass noprint">This will not appear in the print version.</div>

Style depending on a parameter or variable

Variable class or ID

A class or ID can depend on the result produced by a template or on a template parameter, e.g., class="abc{{{1|def}}}". For one or more of the possible class names, the style of that class can be defined. If the class is undefined it is ignored, so the standard style is used. In the simplest case, we have e.g., class="abc{{{1}}}" and define class abcdef. If the parameter value is "def", it applies.

If a page for general use only makes sense when styles are defined for certain classes, then these have to be specified in the page MediaWiki:Common.css, which applies for all users and all skins, as far as not overridden.

Variable style parameter value

Wikitext like

<span style="display:{{{3|none}}}">Wed</span>

displays "Wed" if parameter 3 is defined, but its value is not "none", and displays nothing if parameter 3 is undefined or "none". If the value of parameter 3 is a display style other than none, that style is applied.

参见

• Help:皮肤
• Manual:CSS
• Manual:Gallery of user styles
• Category:Snippets with CSS