CSS-club – настройка внешнего вида сайта

КлубыCSS-club – настройка внешнего вида сайта

Deleted

Введение

Основы CSS

Веб-инструменты

Понять CSS без хотя бы поверхностных знаний о HTML невозможно, поэтому в этой части мы рассмотрим HTML-элементы, их положение в разметке, а также селекторы, которые определяют к каким HTML-элементам будут применяться соответствующие правила. Обращайте внимание на надписи html и css рядом с примерами кода, чтобы не запутаться в языках.

Итак, что такое HTML? Это язык разметки, используемый для определения структуры веб-страниц. HTML состоит из ряда элементов, включающих в себя открывающий тег с некоторыми атрибутами, содержимое и закрывающий тег:

<p>Текст.</p>

<p> — открывающий тег. p — один из возможных типов HTML-элементов, обозначающий параграф. Подробнее о типах можно узнать на сайтах-справочниках (читать не нужно).
Текст. — содержимое элемента.
</p> — закрывающий тег. Должен содержать слеш перед типом элемента.

Для стилизации веб-страниц используется CSS — формальный язык, состоящий из набора правил, которые применяются к элементам веб-страницы. Правила в CSS состоят из селекторов, а также свойств и значений, которые заключены в фигурные скобки:

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

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

Не пугайтесь количеству CSS-свойств! Важных и часто используемых правил от силы штук 30, а по их названию можно понять, за что они отвечают.

Чтобы стилизовать элемент <p>Текст.</p>, в CSS мы бы указали в селекторе его тип. Такой селектор называется селектором типа:

p {
  color: red;
}

Данное правило будет применяться ко всем элементам <p> на странице. Оно изменит цвет текста (color) в них на красный.

Чтобы иметь возможность стилизовать одинаковые типы элементы по-разному, разработчики могут добавлять к открывающему тегу атрибут class:

<p class="b-anime_description">Текст.</p>

class — это название атрибута. Оно должно быть отделено пробелом от типа элемента или других атрибутов. Названия атрибутов и их назначение могут быть найдены в справочнике атрибутов (читать не нужно).
b-anime_description — это значение атрибута. Оно должно быть записано через знак равно от названия атрибута в кавычках. Значений у атрибута class может быть несколько, все они должны разделены пробелами.

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

.b-anime_description {
  color: red;
}

Селекторы типа и селекторы класса подсвечиваются по-разному для наглядности.

Правила, указанные после такого селектора, будут применены ко всем элементам любого типа, у которых одно из значений атрибута class будет соответствовать b-anime_description. Пример:

<p class="b-anime_description">Красный текст</p>
<div class="b-anime_description m-0">Красный текст</div>
<p class="m-0">Черный текст по умолчанию</p>

Если мы хотим изменить цвет текста только для элементов с классом b-anime_description и определённого типа, необходимо указать селектор типа, а затем дополнить его селектором класса:

div.b-anime_description {
  color: red;
}

Селектор типа всегда пишется в начале составного селектора, а селектор класса и другие селекторы всегда пишутся после. Обратите внимание, что никаких пробелов между селекторами нет. Если такое правило применить к html-примеру выше, то красным цветом будет обладать только второй элемент <div class="b-anime_description m-0"></div>.

Чтобы указать правила для элементов с одним классом, полностью соответствующим определённому значению, можно использовать селектор атрибута:

[class="b-anime_description"] {
  color: red;
}

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

В селекторах атрибутов необязательно указывать значения. К примеру, селектор [class] будет работать для всех элементов, у которых есть атрибут class.

Селектор атрибута может выбирать элементы по значению с помощью параметров поиска. К примеру, селектор [class~="b-anime_description"] со знаком тильды перед знаком равно будет искать в наборе значений атрибута class точное соответствие одного из значений, т.е. будет полностью соответствовать обычной записи селектора класса — .b-anime_description.

Селекторы атрибутов чаще всего используются для стилизации элементов ввода <input> с разными назначениями. К примеру:

input[type="text"] {
  /* Стили для текстового поля */
}

input[type="submit"] {
  /* Стили для кнопок отправки форм */
}

В этих правилах используются селекторы типа и селекторы атрибута одновременно, чтобы точнее определить необходимые для стилизации элементы, т.к. подобные атрибуты могут быть и у других типов HTML-элементов (к примеру, у отдельного элемента кнопки <button>).

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

#profiles_show {
  color: red;
}

В отличие от атрибута class, в этом атрибуте может быть только одно значение, а сам элемент с таким идентификатором должен быть только один в веб-документе.

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

Давайте рассмотрим вариант попроще:

<div class="b-comment">
  <span class="icon icon-flag"></span>
</div>
<div class="b-form">
  <span class="icon icon-flag"></span>
</div>

Два элемента одинакового типа с разными значениями атрибута class содержат по одному идентичному элементу.

Чтобы выбрать элемент, находящийся внутри другого элемента, в CSS существует комбинатор потомков — это просто символ пробела между двумя разными селекторами:

.b-comment .icon-flag {
  color: red;
}

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

Правило с таким селектором (.b-comment .icon-flag) будет работать для всех элементов, у которых атрибут class содержит icon-flag, а сами они вложены в элемент с атрибутом class, содержащим b-comment, причём находится эти элементы-потомки могут на любом уровне вложенности.

Чтобы выбрать элементы, находящиеся внутри элемента на один уровень ниже, существует комбинатор дочерних элементов, представленный символом угловой скобки:

.b-comment>.icon-flag {
  color: red;
}

Существуют и другие комбинаторы, о которых важно знать, если вы хотите лучше понимать и использовать CSS. Ряд селекторов может содержать множество различных селекторов и комбинаторов. Ознакомление с ними поможет лучше разбираться в правилах, которые уже есть в стиле Шикимори, а также правильно составлять свои селекторы.

Важной особенностью Шикимори являются уникальные идентификаторы (атрибуты id), которыми обладают почти все страницы сайта. Используя знания о селекторах идентификаторов и комбинаторах потомков, вы можете написать правила для отдельных страниц Шикимори, имеющих такие идентификаторы. Сам идентификатор можно найти у элемента <body>, который представляет собой контейнер для содержимого HTML-документа — этот элемент является родительским для большинства элементов сайта. Пример главной страницы профиля:

<html>
  <head>…</head>
  <body id="profiles_show" class="p-profiles p-profiles-show">
    <header class="l-top_menu-v2">…</header>
    <section class="l-page">…</section>
    <div class="b-to-top">…</div>
  </body>
</head>

Используя селектор идентификатора со значением атрибута id необходимой страницы, вы сужаете действие соответствующих правил до одной единственной страницы. Например, чтобы изменить цвет подзаголовков блоков вы можете использовать общий код для всего сайта:

.subheadline {
  color: red;
}

А можете использовать уточняющий селектор идентификатора #profiles_show и комбинатор потомков, определив таким образом правила только для тех подзаголовков, которые находятся на главной странице профиля:

#profiles_show .subheadline {
  color: red;
}

Такое правило будет работать только для элементов, у которых значение атрибута class содержит subheadline, а сами они являются потомками элемента с атрибутом id равным profiles_show.

Таким образом вы можете написать несложную тему, которая будет затрагивать только профиль, а на остальной сайт влиять не будет.

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

В предыдущей части мы уже использовали селекторы и писали правила, хотя единственном свойством было color: red;. В этой части рассмотрим важные особенности CSS — каскад, специфичность и наследование, а также соответствующие особенности пользовательских стилей на Шикимори.

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

p {
  color: red;
  font-size: 16px;
}
p {
  color: green;
}

К элементам p на странице будет применяться значение color из последнего правила, а значение font-size — из первого.

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

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

Последними к элементам применяются «инлайновые» стили, записанные в атрибуте style. Пример:

<p class="text" style="color: green;">Текст.</p>

Такие стили не получится изменить с помощью механизмов каскада.

На крупных сайтах не редки случаи, когда к одному элементу могут применяться свойства из разных селекторов. Для определения применяемых к элементу свойств используется ещё один механизм разрешений конфликтов — специфичность.

Различные типы селекторов имеют разное влияние на элементы страницы. Например, селектор элементов менее специфичен, а селектор класса более специфичен. Чтобы точнее определить специфичность, используется система баллов. Баллы определяется количеством каждого из типов селекторов в данном правиле. Баллы разделены на три категории с различной «весовой категорией», каждой из которых соответствуют свои виды селекторов: селекторы типов и псевдоэлементов добавляют баллы в 3-ю категорию, селекторы классов, селекторы атрибутов и псевдоклассов — во 2-ю категорию, а селекторы идентификаторов — в 1-ю.

Универсальный селектор *, различные комбинаторы, а также отрицающий псевдокласс :not() не влияют на специфичность. Если специфичность одинакова, то используются значения свойств и последнего правила в каскаде.

Рассмотрим такие селекторы:

#club_pages_show a {
  color: green;
}
.p-club_pages .l-content .subheadline>a {
  color: red;
  font-size: 12px;
}
.l-content[class] .subheadline>a {
  color: blue;
  font-size: 16px;
}

В правилах указаны одинаковые свойства, но с разными значениями. Чтобы понять какие свойства и с какими значениями будут применены к элементу a, посчитаем специфичность, указывая категории баллов в скобках:

Первое правило содержит один селектор идентификатора (1), комбинатор потомков (–) и селектор типа (3). Его итоговая специфичность — 1, 0, 1

Второе правило содержит три селектора класса (2), три комбинатора — два потомка (–) и один дочернего элемента (–), а также один селектор типа (3). Итоговая специфичность — 0, 3, 1

Третье правило содержит на один селектор класса (2) и комбинатор потомка (–) меньше предыдущего, а также один дополнительный селектор атрибута (2) . Его специфичность — 0, 3, 1

Несмотря на порядок правил в каскаде, к элементу будет применено значение свойства color из первого правила, так как первая категория — самая важная и её баллы «перевешивают» баллы из других категорий. У второго и третьего правила одинаковая специфичность, поэтому по правилу каскада значение свойства font-size будет взято из последнего правила. В итоге ссылка будет иметь зеленый цвет и крупный шрифт.

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

Этот модификатор поможет вам изменить стили элементов, у которых они прописаны в атрибуте style.

<p class="text" style="color: green;">Текст.</p>

.text {
  color: red !important;
}

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

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

.p-profiles .profile-head .c-history .entry .misc {
  color: #7b8084 !important;
}
.p-profiles .profile-head .c-history .entry .misc.date {
  color: #9da2a8 !important;
}

Наследование стилей — ещё одна особенность CSS, о которой нужно знать и помнить при написании правил. Наследование контролирует, что происходит, если значение свойства элемента не определено. Если у элемента не определены значения наследуемых свойств, эти значения будут наследоваться от родительских элементов.

Яркими примерами наследуемых свойств являются color и font. Обычно они указываются в стилях один раз для корневого элемента html или контейнера видимых элементов body. Если у вложенных элементов не будет отдельных свойств, определяющих цвет и шрифт, то они будут наследовать эти свойства. Эта особенность позволяет разработчикам писать меньше CSS-правил.

Когда значение свойства элемента, которое не наследуется, не указано, элемент получает начальное значение этого свойства (как указано в описании свойства в справочниках). Например, у свойства position значением по умолчанию является значение static. Если у родительского элемента указано значение relative, у элементов-потомков значение не будет унаследовано и останется равным static.

Ключевое слово inherit, используемое как значение свойства, позволяет явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.

Ключевое слово initial, позволяет указывать для элемента его первоначальное значение. Хороший пример использования можно увидеть на сайте MDN: developer.mozilla.org

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

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

Следующим шагом является самостоятельное изучение CSS с помощью учебников и специализированных сайтов. Писать это тут бессмысленно, потому что на все прочие аспекты, помимо уже рассмотренных, Шикимори никак не влияет. Всё что описано в предложенных ниже статьях будет работать на Шикимори с учётом понимания описанного ранее. Всегда держите в голове рассмотренные проблемы со специфичностью и каскадом, которые неизбежно возникают при работе поверх уже имеющихся стилей! Знания лучше всего закрепляются на практике, поэтому изучив статьи пробуйте использовать полученные знания на Шикимори, чтобы понять, что ещё необходимо изучить, или спрашивайте в клубе, если застряли на каком-то непонятном моменте.

Подробнее о правилах в CSS:

Справочник CSS — изучайте только те правила, с которыми сталкиваетесь во время изучения других статей.
Псевдоклассы, псевдоэлементы
@-правила
Использование медиавыражений
Использование переменных в CSS

Узнав о псевдоклассах и псевдоэлементах, а также возможностях медиавыражений, можно приступать к изучению вёрстки. Не забывайте, что вы работаете только с CSS-правилами и не можете повлиять на расположение элементов в разметке — это накладывает некоторые ограничения, но также позволяет пропускать ненужные детали. Хорошие статьи на эту тему:

Узнав о работе At-правила @media и вёрстке, вы сможете лучше понимать адаптацию под мобильные устройства, а также смело отключить ещё одну важную особенность пользовательских стилей на Шикимори — использование медиа-запроса, в который оборачивается ваш стиль по умолчанию — не боясь сломать макет страницы. Отменяется это поведение добавлением любого медиа-запроса (даже пустого):

@media all { /* Пустой медиа-запрос */ }