Помощь:Каскадные таблицы стилей

Информационная страница Википедии

Каскадные таблицы стилей позволяют гибко форматировать страницу. Их следует использовать вместо таблиц для нетабулярного контента, когда это возможно, поскольку ими может манипулировать читатель или автор может их переопределить, если ваш CSS встроен в другую страницу через шаблон .

Уровни настроек CSS

Стиль может быть выбран специально для части контента, например, цвет; область параметров

В качестве альтернативы, стиль указывается для селекторов CSS, выраженных в терминах элементов, классов и идентификаторов. Это делается на разных уровнях:

Создайте таблицы стилей в следующем порядке:

Примечание: список всех загруженных таблиц стилей см. в WP:CLASS .

Основные таблицы стилей MediaWiki

Для каждого скина: Руководство MediaWiki: Галерея пользовательских стилей и т. д. Обычно загружаемые таблицы стилей:

  • общий/общий.css
  • общий/общийPrint.css
Основной файл, специфичный для скина

например, monobook/main.css (обычный скин для ПК), chick/main.css (обычный скин для карманных устройств)

Исправления, специфичные для браузера (также специфичные для скина)

Примеры для Monobook:

  • Для Firefox: monobook/FF2Fixes.css
  • Для Internet Explorer: monobook/IE60Fixes.css monobook/IE70Fixes.css
  • Для Opera: monobook/Opera6Fixes.css monobook/Opera7Fixes.css monobook/Opera9Fixes.css

Таблицы стилей для всего сайта

Примечание. Сайты MediaWiki, отличные от англоязычной Википедии, могут использовать MediaWiki:Gadget-site.cssвместо MediaWiki:Common.css.

Таблицы стилей для конкретных страниц

Специфичные для страницы таблицы стилей могут быть введены через TemplateStyles . Страницы, в частности шаблоны, также могут иметь встроенный CSS.

Некоторые страницы имеют собственный CSS, например, MediaWiki:FileUploadWizard.css

Пользовательские таблицы стилей

  • Глобальный пользовательский для всех скинов: meta:Special:MyPage/global.css
  • Пользовательский для всех скинов: Special:MyPage/common.css
  • Пользовательский для каждого скина: например, Special:MyPage/vector.css или Special:MyPage/skin.css для вашего текущего скина
  • Пользовательский CSS, загружаемый через JavaScript, например, загруженный в Special:MyPage/common.js
  • Настройки веб-браузера для конкретного пользователя: локальный файл, указанный в настройках браузера, или установленный непосредственно в браузере

Обратите внимание, что в терминологии CSS пользовательские таблицы стилей не являются пользовательскими таблицами стилей .

Использование

HTML-элемент может быть просто взят из викитекста (см. HTML в викитексте ), например, span, или результатом перевода викитекста, например, '''...'''код изменен на <b>...</b>, или частью кода для скина.

Класс может быть создан программным обеспечением, например, ns- номер пространства имен для HTML-элемента «body» и extiw для интервики-ссылки в теле страницы, или взят из вики-текста.

Аналогично идентификатор может быть создан программным обеспечением, например, bodyContent, или взят из викитекста.

В случае конфликтующих настроек стиля для фрагмента контента результирующая настройка зависит в первую очередь от указания "!important". Во-вторых, если оба важны, выигрывает пользователь, если ни один из них не важен, выигрывает автор. В-третьих, это зависит от специфичности. И только в последнюю очередь, это зависит от порядка между таблицами стилей и внутри них: выигрывает последний. Таким образом, User: имя пользователя /monobook.css не выигрывает у MediaWiki:Monobook.css (оба автора, а не пользователя), если специфичность последнего больше. См. также каскад.

Поддерживаемые элементы

MediaWiki поддерживает большую часть CSS, за исключением атрибута url(). В более ранних версиях были некоторые ошибки в поддержке CSS.

CSS в викитексте

Вы можете использовать стили CSS в элементах HTML в своем коде (см. Help:HTML в викитексте для получения списка элементов, поддерживаемых MediaWiki), как и в обычной разметке HTML.

Например, <div>...</div>элемент с зеленой рамкой и его содержимым, смещенным вправо, будет создан с помощью

< div  style = "float:right; border:thin solid green;" >
Здесь находится короткий абзац, который < br  />
содержится в элементе "div", который < br  />поплыл вправо.</ див >

Ниже представлен короткий абзац,
заключенный в элемент «div», который
смещен вправо.

что создаст поле справа. Некоторые элементы wikitext позволяют вам вставлять стили CSS непосредственно в них. Примером может служить синтаксис таблицы:

{| style = "ваш стиль здесь" |- | ваши вещи на столе |} 

Существующие стили MediaWiki

Вы можете использовать тип стиля, который уже предопределен MediaWiki или сайтом, который вы посещаете. Вы также можете создать стиль, который будет уникальным для вашей страницы.

Векторный стиль — это стиль по умолчанию, его можно просмотреть здесь: MediaWiki:Vector.css

Вы присвоите своему CSS-тегу существующий «класс»

Пожалуйста, разместите здесь список существующих классов.

Советы и рекомендации

Неотображаемый

На встроенной странице можно скрыть комментарии в одной версии и показать их в другом представлении. Один крайний «стиль» для текста — не отображать его, с

. '' имя_класса '' { дисплей : нет } # '' идентификатор '' { дисплей : нет }    

и т. д.

Неотображаемые ссылки не работают (в отличие от ссылок, набранных очень мелким шрифтом).

Его нельзя использовать для удаления текста в выражениях для имен шаблонов, имен параметров, значений параметров, имен страниц в ссылках и т. д.

Чтобы просмотреть скрытый текст, загрузите Web Developer Toolbar для Firefox здесь, затем выберите Разное → показать скрытые элементы на этой панели инструментов. Это заставит все скрытые элементы появиться.

Непечатный

Можно исключить контент из печати, объявив его принадлежащим к классу «noprint»:

< div  class = "someclass noprint" > Это не будет отображаться в печатной версии. </ div >

Основные блоки стиля

Скриншот рабочего стола с комментариями примера статьи , демонстрирующий блоки стилей
  • column-content – ​​общее пространство, в пределах которого находится контент.
  • firstHeading – класс тега заголовка вверху каждой страницы
  • contentSub – название вики сразу под основным заголовком, но над основным текстом
  • контент – белый фон, тонкая рамка, в которой находится контент главной страницы.
  • bodyContent – ​​основное содержимое страницы в поле контента

Класс portlet — это стиль, используемый всеми блоками div вокруг основного контента. Определенные блоки, использующие этот класс:

  • p-cactions – идентификатор списка вкладок, связанных со страницей, над основным содержимым (страница, обсуждение, редактирование и т. д.), вверху.
  • p-personal – идентификатор списка ссылок, связанных с пользователем, над основным контентом (имя пользователя, обсуждение и т. д.), вверху.
  • p-logo – идентификатор блока, содержащего логотип, вверху слева.
  • p-navigation – идентификатор блока, содержащего навигационные ссылки в левой части страницы
  • p-search – блок, содержащий кнопки поиска
  • p-tb – блок, содержащий ссылки на панели инструментов
  • p-lang – блок, содержащий межъязыковые ссылки

Нижний колонтитул в нижней части страницы включает блоки со следующими идентификаторами

  • нижний колонтитул – общий блок-контейнер нижнего колонтитула
  • f-poweredbyico – изображение, работающее на MediaWiki, которое обычно располагается справа на странице
  • f-list – идентификатор списка, содержащего все фрагменты текста внизу страницы

Стиль в зависимости от параметра или переменной

Переменный класс или идентификатор

Класс или идентификатор могут зависеть от результата, полученного с помощью шаблона, или от параметра шаблона, например . Для одного или нескольких возможных имен классов может быть определен стиль этого класса. Если класс не определен, он игнорируется, поэтому используется стандартный стиль.class="abc{{{1|def}}}"

В простейшем случае мы имеем eg и определяем класс abcdef. Если значение параметра равно "def", то оно применяется.class="abc{{{1}}}"

Если страница для общего использования имеет смысл только тогда, когда стили определены для определенных классов, то они должны быть указаны на странице MediaWiki:Common.css , которая применяется ко всем пользователям и всем скинам, если только не переопределяется.

Значение параметра переменного стиля

Викитекст, который гласит:

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

отобразит "Wed", если параметр 3 определен, но его значение не равно "none", и ничего не отобразит, если параметр 3 не определен или равен "none". Если значение параметра 3 — стиль отображения, отличный от "none", применяется этот стиль.

Заголовки Вики

Заголовки Wiki используют следующий CSS по умолчанию:

Wiki-разметкаHTMLСтиль
= Heading =<h1>
цвет : # 000000 ; фон : нет ; переполнение : скрыто ; разрыв страницы после : избегать ; размер шрифта : 1.8em ; семейство шрифтов : ' Linux Libertine' , Georgia , Times , serif ; верхнее поле : 1em ; нижнее поле : 0.25em ; высота строки : 1.3 ; отступ : 0 ; нижняя граница : 1px сплошной # AAAAAA ;                       
== Heading ==<h2>
цвет : # 000000 ; фон : нет ; переполнение : скрыто ; разрыв страницы после : избегать ; размер шрифта : 1.5em ; семейство шрифтов : 'Linux Libertine' , Georgia , Times , serif ; верхнее поле : 1em ; нижнее поле : 0.25em ; высота строки : 1.3 ; отступ : 0 ; нижняя граница : 1px сплошной # AAAAAA ;                       
=== Heading ===<h3>
цвет : # 000000 ; фон : нет ; переполнение : скрыто ; page-break-after : избегать ; размер шрифта : 1.2em ; начертание шрифта : жирное ; margin -top : 0.3em ; margin - bottom : 0 ; высота строки : 1.6 ; padding - top : 0.5em ; padding - bottom : 0 ;                     
==== Heading ====<h4>
цвет : # 000000 ; фон : нет ; переполнение : скрыто ; page-break-after : избегать ; размер шрифта : 100 %; начертание шрифта : жирное ; margin -top : 0.3em ; margin-bottom : 0 ; высота строки : 1.6 ; padding - top : 0.5em ; padding - bottom : 0 ;                     
===== Heading =====<h5>
цвет : # 000000 ; фон : нет ; переполнение : скрыто ; page-break-after : избегать ; размер шрифта : 100 %; начертание шрифта : жирное ; margin -top : 0.3em ; margin-bottom : 0 ; высота строки : 1.6 ; padding - top : 0.5em ; padding - bottom : 0 ;                     
====== Heading ======<h6>
цвет : # 000000 ; фон : нет ; переполнение : скрыто ; page-break-after : избегать ; размер шрифта : 100 %; начертание шрифта : жирное ; margin -top : 0.3em ; margin-bottom : 0 ; высота строки : 1.6 ; padding - top : 0.5em ; padding - bottom : 0 ;                     

Смотрите также

Взято с "https://en.wikipedia.org/w/index.php?title=Help:Каскадные_таблицы_стилей&oldid=1249515065"