Руководство:CSS
- Страница "CSS" перенаправляет сюда. Для просмотра страницы расширений, перейдите на Extension:CSS.
Правила каскадных таблиц стилей (CSS) во многом определяют внешний вид MediaWiki: размер шрифта, цвета, пробелы, логотип и фоновое изображение, а также то, отображается ли содержимое сайта или скрыто.
Чтобы изменить внешний вид экранного отображения MediaWiki (то, как оно выглядит в браузере), вы можете поместить CSS в MediaWiki:Common.css. Этот файл - это страница в вашей вики, а не файл, как index.php или load.php, поэтому вы не можете найти его, посмотрев структуру каталога на вашем сервере, и он не связан с вашей Главной страницей или любой другой страницей изначально. Первоначально страница состоит только из однострочного комментария. Чтобы найти его, введите MediaWiki:Common.css в поле поиска на главной странице своей вики. Он будет отображаться как файл с адресом примерно https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css. (Для редактирования требуется следующее разрешение: "администратор интерфейса")
To change the way MediaWiki pages print, you put CSS into MediaWiki:Print.css on your wiki.
CSS можно использовать для изменения стиля всей вики, например, чтобы сделать фона другим цветом, или вы можете использовать встроенный CSS для стиля конкретных текстовых частей в своей вики.
For example green text can be accomplished by doing <span style="color:green">green text</span>.
If you want to make all text on the wiki larger you can add the code body { font-size: larger; } to MediaWiki:Common.css.
For mobile version use MediaWiki:Mobile.css.
If $wgAllowUserCss is enabled on your wiki, individual users can create custom stylesheets just for themselves at Special:MyPage/<skin_name>.css (for example Special:MyPage/vector.css if they are using the vector skin). Special:MyPage/common.css allows the creation of personal stylesheets for all skins.
You can also create custom skins for 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 ← 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, MDN CSS Reference will provide you an "up-to-date" guide to syntax and basic usage of the various elements.
Предостережения
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).
При необходимости пользовательские таблицы стилей можно временно деактивировать с помощью параметра URL safemode=1.
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 MediaWiki:Common.css.
If you copy CSS, watch if it depends on additional CSS.
For example, jsFiddle has a checkbox for "Normalized CSS".
This sets margins to 0 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):
- Legacy general (all skins that use CSS) CSS built in to core
- General and Vector CSS built-in to core
- 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.
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 $wgAllowSiteCSSOnRestrictedPages configuration setting to allow custom CSS to work on these pages.
Using the url() function
For privacy reasons, Wikimedia sites are configured to reject loading resources from external servers using the url() 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:
.my-class {
background: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/some_image.svg");
}
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:
@font-face {
font-family: 'GochiHand';
src: local("Gochi Hand"),
url(https://xyz.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2);
}
If you wish to use custom fonts, they need to be installed locally on your system.
См. также
- Руководство:Интерфейс/JavaScript
- Руководство:Интерфейс/Таблицы стилей
- Extension:CSS
- Расширение:TemplateStyles
- Manual:Coding conventions/CSS
$wgUseSiteCss$wgAllowUserCss- Категория:Расширения пользовательского интерфейса
- Категория:Расширения шкурок
- Category:Snippets with CSS