Content deleted Content added
No edit summary Tags: Reverted Mobile edit Mobile web edit |
Reverting edit(s) by 102.45.18.254 (talk) to rev. 1297657178 by Annh07: Unexplained content removal (UV 0.1.6) |
||
Line 1:
{{Information page|H:CSS|WP:CSS}}
[[Cascading Style Sheets]] allows for flexible formatting of a page. They should be used instead of [[Help:Table|tables]] for non-tabular content whenever possible, because they can be [[Help:User style|manipulated by the reader]] or overridden by an author if your CSS is embedded in another page via a [[Help:Template|template]].
== Levels of CSS settings ==
Style may be chosen specifically for a piece of content, see e.g., [[Help:Table#Color; scope of parameters|color; scope of parameters]]
Alternatively, style is specified for CSS selectors, expressed in terms of elements, classes, and ID's. This is done on various levels:
Author style sheets, in this order:
''Note: See [[WP:CLASS]] for a list of all the style sheets loaded.''
===MediaWiki core style-sheets===
Per skin: [[mw:Gallery of user styles|MediaWiki Manual:Gallery of user styles]] etc.
Typically loaded style sheets:
*[https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/common/shared.css common/shared.css]
*[https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/common/commonPrint.css common/commonPrint.css]
;Skin-specific main file:
e.g., [https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/monobook/main.css monobook/main.css] (normal skin for PC's), [https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/chick/main.css chick/main.css] (normal skin for handhelds)
;Browser-specific fixes (also skin-specific):
Examples for Monobook:
*For Firefox: [https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/monobook/FF2Fixes.css monobook/FF2Fixes.css]
*For Internet Explorer: [https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/monobook/IE60Fixes.css monobook/IE60Fixes.css] [https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/monobook/IE70Fixes.css monobook/IE70Fixes.css]
*For Opera: [https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/monobook/Opera6Fixes.css monobook/Opera6Fixes.css] [https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/monobook/Opera7Fixes.css monobook/Opera7Fixes.css] [https://phabricator.wikimedia.org/diffusion/SVN/browse/trunk/phase3/skins/monobook/Opera9Fixes.css monobook/Opera9Fixes.css]
===Site-wide style-sheets===
* Site-wide for all skins (desktop view only): [[MediaWiki:Common.css]]
* Site-wide for all skins (mobile view only): [[MediaWiki:Mobile.css]]
* Site-wide per skin: [[MediaWiki:Vector.css]], [[MediaWiki:Monobook.css]], etc.
* Site-wide for user groups: [[MediaWiki:Group-user.css]], [[MediaWiki:Group-autoconfirmed.css]], etc.
* Site-wide for specialist purposes: [[MediaWiki:Print.css]], [[MediaWiki:Noscript.css]], [[MediaWiki:Filepage.css]]
* Site-wide if gadgets loaded: see [[Wikipedia:Gadget]] for more information
Note: MediaWiki sites other than English Wikipedia may use <code>MediaWiki:Gadget-site.css</code> instead of MediaWiki:Common.css.
===Page-specific style-sheets===
Page-specific style-sheets may be introduced through [[Wikipedia:TemplateStyles|TemplateStyles]]. Pages, particularly templates, may also have inline CSS.
Some pages have their own CSS, e.g., [[MediaWiki:FileUploadWizard.css]]
===User-specific style-sheets===
* Global user-specific for all skins: [[meta:Special:MyPage/global.css]]
* User-specific for all skins: [[Special:MyPage/common.css]]
* User-specific per skin: e.g., [[Special:MyPage/vector.css]], or [[Special:MyPage/skin.css]] for your current skin
* User-specific CSS loaded through JavaScript, e.g., loaded at [[Special:MyPage/common.js]]
* User-specific web-wide browser settings: local file referred to in the browser settings, or directly set in the browser
Note that in CSS terminology, the user-specific style sheets are ''not'' [[Help:User style|user style sheets]].
===Usage===
An HTML element may be just taken from the wikitext (see [[Help:HTML in wikitext|HTML in wikitext]]), e.g., span, or the result of translating wikitext, e.g., the <code><nowiki>'''...'''</nowiki></code> code is changed into {{tag|b}}, or part of the code for the skin.
A class may be produced by the software, e.g., ns-''namespace number'' for the HTML-element "body", and extiw for an interwiki link in the page body, or taken from the wikitext.
Similarly, an ID may be produced by the software, e.g., bodyContent, or taken from the wikitext.
In the case of conflicting style settings for a piece of content, the resulting setting depends primarily on the indication "!important". Secondarily, if both are important, the user wins, if neither is, the author wins. Tertiarily it depends on specificity. Only lastly, it depends on order between and within style sheets: the last wins. Thus, a User:''username''/monobook.css does not win from MediaWiki:Monobook.css (both author, not user) if the specificity of the latter is greater. See also [http://www.w3.org/TR/REC-CSS2/cascade.html cascade].
== Supported elements ==
Line 6 ⟶ 68:
{{Further2|the [http://www.w3.org/TR/2011/REC-CSS2-20110607/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification]}}
== CSS in wikitext ==
You can use CSS styling in HTML elements in your code (see [[Help:HTML in wikitext]] for a list of elements supported by MediaWiki) like you would in normal HTML markup.
For example, a {{tag|div}} element with a green border and its contents floated to the right would be created with
<syntaxhighlight lang="html">
<div style="float:right; border:thin solid green;">
Here comes a short paragraph that is<br />
contained in a "div" element that is<br />
floated to the right.
</div>
</syntaxhighlight>
<div style="float:right; border:thin solid green;">
Here comes a short paragraph that is<br />
contained in a "div" element that is<br />
floated to the right.
</div>
which would produce the box to the right.
Some wikitext elements allow you to insert CSS styling directly into them. An example is the table syntax:
{{-}}
<syntaxhighlight lang="wikitext">
{| style="your style here"
|-
|your table stuff
|}
</syntaxhighlight>
{{Further2|[[Help:Tables]]}}
== MediaWiki existing styles ==
Line 79 ⟶ 169:
<syntaxhighlight lang="html"><span style="display:{{{3|none}}}">Wed</span></syntaxhighlight>
will display "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.
==Wiki headings==
Wiki headings use the following default CSS:
<section begin="HTML_section" />
{| class="wikitable"
|-
! Wikimarkup !! [[HTML]] !! Style
|-
| {{nowrap|1=<code>= Heading =</code>}} || {{tag|h1|o}} ||
<syntaxhighlight lang="css">
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.8em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;
</syntaxhighlight>
|-
| {{nowrap|1=<code>== Heading ==</code>}} || {{tag|h2|o}} ||
<syntaxhighlight lang="css">
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.5em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;
</syntaxhighlight>
|-
| {{nowrap|1=<code>=== Heading ===</code>}} || {{tag|h3|o}} ||
<syntaxhighlight lang="css">
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.2em; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
</syntaxhighlight>
|-
| {{nowrap|1=<code>==== Heading ====</code>}} || {{tag|h4|o}} ||
<syntaxhighlight lang="css">
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
</syntaxhighlight>
|-
| {{nowrap|1=<code>===== Heading =====</code>}} || {{tag|h5|o}} ||
<syntaxhighlight lang="css">
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
</syntaxhighlight>
|-
| {{nowrap|1=<code>====== Heading ======</code>}} || {{tag|h6|o}} ||
<syntaxhighlight lang="css">
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
</syntaxhighlight>
|-
|}<section end="HTML_section" />
== See also ==
| |||