ФЭНДОМ


CSS3

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. На Фэндоме доступна спецификация CSS3, подключаемая при помощи одноимённого расширения (по умолчанию оно автоматически подключено на всех проектах). Фэндом также поддерживает Flexbox.

Редактирование CSS доступно всем зарегистрированным пользователям, однако для изменений в рамках википроекта необходимы права администратора. Само же использование CSS немногим отличается от такового вне Фэндома.

Грамматически род сокращения CSS трудноопределим: поскольку это иноязычная и не звуковая аббревиатура, наиболее логичным является её отнесение к множественному числу по опорному слову «таблицы», однако возможны и иные трактовки.

Описание

Основным предназначением CSS является стилизация документа (в рамках Фэндома всё это относится к оформлению веб-страниц), то есть задание его внешнего вида — цвет текста, шрифт, границы, фон, и т.д. Основной целью разработки CSS было отделение логической структуры документа (созданной, например, с помощью HTML) от визуальной составляющей. Такое разделение приводит к упрощению и большей гибкости работы со страницей, а также позволяет уменьшить количество повторяющегося кода.

Разработка CSS началась в 1990-ых годах, так как возникла необходимость привести Web к некоторым стандартам. Изначально потребности в оформлении удовлетворялись средствами HTML, однако со временем Консорциум Всемирной паутины заинтересовался CSS, после чего в 1996 году была опубликована первая спецификация (CSS1). На данный момент актуальной «версией» является CSS3, которая до сих пор активно развивается; также идёт разработка стандарта CSS4 (однако пока почти все планируемые изменения находятся на начальной стадии создания).

Синтаксис

Синтаксис языка достаточно прост и в общем случае выглядит примерно так:

/* Некоторое правило CSS */
селектор: { свойство: значение; }

В этом небольшом фрагменте описывается базовая структура правил:

  • Текст, заключенный в /* */ является комментарием. Использование комментариев не является обязательным, но приветствуется, особенно в случае громоздкого кода.
  • Селектор задаёт, какие элементы будут изменены данным кодом;
  • Свойство указывает характеристику, которая будет изменена, а значение — как именно это произойдёт.

Немного иначе добавляется код в том случае, если мы хотим изменить оформление элемента непосредственно на странице (в данном случае в теге добавляется атрибут «style»; для стилей не указывается селектор, а только нужные свойства и их значения):

<div style="свойство: значение; свойство: значение; ...">Фрагмент текста</div>

Селекторы

В CSS есть возможность задавать разные виды селекторов, которые можно разбить на несколько групп:

  • Базовые селекторы;
  • Комбинированные селекторы;
  • Селекторы псевдоклассов;
  • Селекторы псевдоэлементов;
  • Селекторы атрибутов.

Базовые селекторы

В самом простом случае у некоторого тега может быть класс или идентификатор (<div class="class_name"></div> и <div id="id_name"></div>). Если у класса нет ни того, ни другого, в качестве селектора можно указать сам тег. Отдельно можно выделить универсальный селектор «*», который затрагивает все элементы, однако его использование не рекомендуется (и даже может привести к нарушению Условий использования).

Также существует возможность комбинировать селекторы (например, можно совместить селектор тега и класса).

/* Селектор для всех div */
div { color: black; }
 
/* Селектор для всех элементов с классом class_name */
.class_name { color: red; }
 
/* Селектор для элемента с идентификатором id_name */
#id_name { color: green; }
 
/* Селектор для всех тегов <p> с классом class_name */
p.class_name { color: blue; }

Комбинированные селекторы

Такие селекторы являются сочетанием нескольких базовых селекторов. Понимание работы комбинированных селекторов довольно важно, поскольку многие из стандартных элементов Фэндома (инфобоксы, кнопки, поля, и т.д.) активно используют их; также применение базовых селекторов может затрагивать куда больше элементов, чем хотелось бы (особенно если применяется только селектор тега).

Между базовыми селекторами ставится один из пяти разделителей:

  • «,» (перечисление);
  • « » (пробел; селектор потомков);
  • «>» (дочерний селектор);
  • «~» (Селектор всех соседних элементов);
  • «+» (Селектор соседнего элемента).

В таблице ниже будут приведены различия между этими селекторами (обратите внимание, что код ниже написан исключительно для демонстрации. Использование его на Фэндоме приведёт к серьёзным изменениям дизайна).

В качестве примера будет приведён следующий код:

<div>
  <p>P1 в div.</p>
  <p>P2 в div.</p>
  <section><p>P3 в div (и в section).</p></section>
</div>
 
<p>P4 не в div.</p>
<p>P5 не в div.</p>
Описание Код Результат
Перечисление
Через запятую указываются все элементы, которые должны быть изменены (все div и все p).
div, p {
  background-color: yellow;
}
Selector-comma
Селектор потомков
Код будет применён ко всем p, находящимся внутри div.
div p {
  background-color: yellow;
}
Selector-space
Дочерний селектор
Действует почти как селектор потомков, но код будет применён только к тем элементам, которые являются "детьми" родительского элемента (Строка «P3...» имеет родительский элемент section, а не div).
div > p {
  background-color: yellow;
}
Selector-grsign
Селектор всех соседних элементов
Код будет применён ко всем «соседям» элемента (то есть таким элементам, которые находятся на одном уровне).
div ~ p {
  background-color: yellow;
}
Selector-til
Селектор соседнего элемента
Код будет применён только к прилегающим к элементу «соседям».
div + p {
  background-color: yellow;
}
Selector-plus

Селекторы псевдоклассов

Псевдоклассы описывают некоторые состояния, в которых может находиться объект. Синтаксис селекторов псевдоклассов выглядит следующим образом:

Селектор:псевдокласс { свойство: значение; }


Chess-table

«Шахматная таблица» и код для неё

Существует немало разновидностей псевдоклассов (с которыми можно ознакомиться тут), но большинство из них практически не используются в «повседневной» деятельности. Тем не менее, использование псевдоклассов вроде :nth-child(n), :first-child и :last-child позволяет разнообразить дизайн (например, создать «шахматную» таблицу или красиво оформить её начало/конец), а :hover позволяет влиять на оформление элемента при наведении на него.

Селекторы псевдоэлементов

Псевдоэлементы описывают некоторый фрагмент элемента. Синтаксис селекторов псевдоэлементов выглядит следующим образом:

/* Два двоеточия! */
Селектор::псевдоэлемент { свойство: значение; }

На данный момент существует 5 псевдоэлементов:

Css-triangle

Треугольник у аватара создан с помощью псевдоэлемента.

  • ::first-line — предназначен для изменения оформления первой линии текста;
  • ::first-letter — предназначен для изменения оформления первой буквы текста;
  • ::before — позволяет добавить контент до элемента;
  • ::after — позволяет добавить контент после элемента;
  • ::selection — отвечает за выделение элемента пользователем.

Псевдоэлементы можно встретить на некоторых страницах Фэндома: например, на стене обсуждения; их использование даёт дополнительные, но весьма специфические возможности по изменению оформления.

Селекторы атрибутов

С помощью подобных селекторов можно изменить оформление элементов с некоторым атрибутом.   Синтаксис селекторов атрибутов выглядит следующим образом:

[атрибут] { свойство: значение; }

Также существуют и другие вариации селектора атрибутов (когда он равен заданному значению, когда начинается или заканчивается на нужные символы, и т.д.; с полным списком можно ознакомиться тут). Использование подобного рода селекторов довольно специфично и чаще всего не требуется даже при комплексном оформлении википроекта.

Приоритет селекторов

В некоторых случаях селекторы могут пересекаться друг с другом. В этом случае действуют несколько правил:

  • У элементов есть разный приоритет:
    • Наименьший приоритет у селекторов тегов;
    • Далее идут селекторы классов;
    • Далее идут селекторы идентификаторов;
    • Наивысшим приоритетом обладает код, написанный непосредственно у элемента (а не в классе).
  • Если есть два и более одинаковых селектора, то учитываться будет последний.

!important

Одним из ключевых элементов разметки является особое правило «!important», который переопределяет приоритет селектора. Если сразу несколько селекторов задействуют !important, то будет необходимо снова определить их приоритет.

Стоит отметить, что использование !important считается нежелательным и должно применяться только в тех случаях, когда это действительно необходимо.

Свойства

В CSS существует большое количество свойств, которые направлены на изменения различных аспектов элементов: фон, цвет текста, шрифт, дизайн границ, размер, тени, анимация, и т.д. Со списком свойств можно ознакомиться тут или тут (первая ссылка на английском языке, вторая — на русском).

Единицы измерения

В CSS существуют различные виды единиц измерения:

  • px (пиксели) — по своей сути базовая единица измерения. Не имеют привязки к другим элементам.
  • % (Проценты) — размер элемента задаётся в процентах от размера родительского элемента.
  • em — особая единица измерения, где 1em равен текущему размеру шрифта. Зависит от размера шрифта в родительском элементе.
  • rem — работает почти так же, как и em, но размер задаётся относительно «базового» размера шрифта (в случае с em несколько вложенных друг в друга элементов с размером шрифта 1.5em привели бы к постоянно увеличивающемуся шрифту).
  • Относительно размера экрана:
    • vw — 1vw = 1% ширины окна;
    • vh — 1vh = 1% высоты окна;
    • vmin — минимальное среди vw и vh;
    • vmax — максимальное среди vw и vh.

Также ещё есть такие единицы измерения как сантиметры (cm), миллиметры (mm), дюймы (in), точки (pt), равные 1/72 дюйма и пики (pc), равные 1/6 дюйма. На данный момент они практически не используются.

Цвета

В CSS цвет можно задать следующим образом:

  • Существует 140 цветов, которые имеют свои имена (с полным списком можно ознакомиться на w3schools), а также зарезервированное слово для «прозрачного» цвета transparent.
  • Цвет можно задать в модели ru:RGB или в шестнадцатеричном формате: #ff0000, или в более развёрнутом виде rgb(255, 0, 0).
    • Также можно использовать расширенный формат RGBA, где добавляется значение альфа-канала (то есть прозрачности). В случае шестнадцатеричного формата прозрачность также задаётся числом от 0 до 255 #ff00ffee, а при развёрнутой записи принимает значение от 0 до 1 rgba(255, 0, 0, 0.5).
  • В CSS есть поддержка цветовой модели ru:HSL. Как и RGB, в ней есть поддержка прозрачности (hsl(240, 100%, 50%) и hsla(360, 100%, 50%, 0.5)).

Использование на Фэндоме

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

В целом можно выделить несколько простых, но полезных советов при редактировании CSS:

  • Пользуйтесь инструментами разработчика в браузере. В зависимости от браузера попасть в данное меню можно разными способами, но наиболее полезный и эффективный — нажать на интересующий вас элемент правой кнопкой мыши и выбрать «просмотреть код элемента». В инструментах разработчика можно узнать, какой код изменяет оформление и какие именно свойства используются; при необходимости можно быстро поменять значение некоторого свойства и посмотреть изменения. Также в инструментах разработчика часто есть удобная цветовая палитра и «пипетка», позволяющая взять цвет с экрана.
  • Перед добавлением кода проверяйте его в своём личном CSS или с помощью PortableCSSPad (о котором будет сказано ниже), так как добавление казалось бы правильного кода может привести к неожиданным последствиям.
    • Если вы используете личный CSS для проверки нового кода — не забывайте его очищать после проведения тестов, поскольку личный CSS имеет более высокий приоритет (об этом можно прочитать в справке).
  • Не забывайте проверять поддержку свойств браузерами, так как из-за отсутствия поддержки оформление может выглядеть совсем не так, как хотелось бы.

Добавление и редактирование

Стили для вики подгружаются с ряда MediaWiki-страниц, главной из которых является MediaWiki:Common.css — CSS с этой страницы будут загружаться на всех страницах вики во всех скинах. Кроме того, для каждого скина можно загружать отдельные стили, при помощи страниц вида MediaWiki:НазваниеСкина.css (пример: MediaWiki:Wikia.css — сценарии с этой страницы будут загружены только для скина Wikia).

Кроме того, существует отдельная страница для чата, её содержимое будет загружаться лишь в чате и не затрагивать прочее оформление. Она находится на странице MediaWiki:Chat.css.

При необходимости и желании CSS можно разместить на любой странице в пространстве MediaWiki, если её название заканчивается на .css. В отличие от страниц скинов это даёт возможность разделить код на фрагменты (например, отделить код оформления проекта от кода наград участников), но при этом накладывает одно ограничение: чтобы код заработал, его необходимо указать в импортах «главных» страниц (Common.css, Wikia.css, Chat.css, и т.д.).

Личные стили

Кроме общих для вики страниц, участники могут использовать личные подстраницы для загрузки стилей только для себя. Подстраницы именуются по следующему принципу: Участник:ИмяУчастника/название_скина_с_прописной_буквы.css (пример: Участник:ИмяУчастника/common.css).

Для применения CSS сразу ко всем вики на Фэндоме (только для одного участника, а не для всех участников википроектов), их необходимо добавить на страницу Участник:ИмяУчастника/global.css.

Импорт

CSS, как и JS, можно импортировать, а не копировать. Для этого есть два метода:

@import

Используя данный способ, вы сможете без особого труда импортировать нужные CSS. Для этого нужно всего лишь записать на самую первую строчку (выше не должно быть какого-либо кода, комментарии не считаются) следующее:
Для импорта в пределах одной вики:

@import url("/index.php?title=MediaWiki:PAGENAME.css&ctype=text/css&action=raw");


Для импорта с одной вики на другую:

@import url("http://URL_ВИКИ.wikia.com/index.php?title=MediaWiki:PAGENAME.css&action=raw&ctype=text/css");

importArticles

CSS можно импортировать при помощи JS, но этот метод не очень эффективен, так как JS загружается с некоторым опозданием и придётся ожидать проверки JS. Такой метод часто используют лишь на Fandom Open Source Library.

Сам метод импорта немногим отличается от импорта скрипта, для импорта локальной страницы CSS нужно использовать следующий код:

importArticles({
    type: "style",
    article: "MediaWiki:PAGENAME.css"
});

CSS и политика настроек

Из-за того, что CSS позволяет изменять и модифицировать почти любой элемент на вики, многие изменения запрещены Условиями использования и политикой настроек Фэндома. В частности, под строгим запретом находятся модификации глобального навигационного меню, значительные изменения в правой колонке, любые модификации динамического макета страницы, а также любые стили, которые могут преднамеренно либо неумышленно нести неудобства и/или вред участникам, препятствовать отображению текста статей, интерфейса и рекламных объявлений, негативно влиять на другие элементы сайта. Подробнее о политике настроек.

Ссылки

Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.