После знакомства с HTML и базовой терминологией CSS пришло время приступить к стилизации HTML-документа. Но какой способ подключения CSS к проекту является предпочтительным? Существует 3 варианта — встроенные стили (inline), внешние таблицы стилей и внутренние таблицы стилей.
Вы разберётесь в каждом из них и подготовитесь к возможным трудностям при применении CSS. Также вы познакомитесь с понятиями каскадирования, наследования и специфичности и узнаете, как с их помощью разрешать конфликты CSS.
Внешний CSS
Существует 3 способа применения CSS к HTML-файлу. Первый — внешний файл стилей, и это один из самых распространённых способов стилизации сразу нескольких страниц. Всё, что вам нужно сделать — это вставить ссылку на внешний .css-файл с помощью HTML-элемента <link>, а атрибут <href> должен указывать на файл в вашей файловой системе. Это необходимо для того, чтобы браузер нашёл CSS-код. В противном случае страница останется без оформления.
Элемент <link> может также содержать атрибут type, который определяет тип подключаемого файла. В случае с CSS-файлом его значение должно быть text/css. А зачем нужен атрибут rel? Он определяет отношение между текущим документом и подключаемым файлом CSS. Поскольку вы подключаете таблицу стилей, значение должно быть stylesheet.
Внутренний CSS
Как подсказывает название, внутренняя таблица стилей размещается внутри HTML-документа в секции <head>. Все правила оформления прописываются внутри элемента <style>, который требует закрывающего тега.
Этот способ стилизации применяется довольно редко и годится лишь в том случае, если вы хотите задать уникальные стили для одной страницы. Если же у сайта много страниц, вам быстро надоест копировать внутренние стили на каждую из них, не говоря уже об утомительной правке даже одной строчки в коде.
Встроенный CSS
Чтобы стилизовать конкретный HTML-элемент, вы можете добавить атрибут style прямо в открывающий тег, например <p> или <h1>. Такой способ называется встроенной стилизацией. После перечисления всех свойств, таких как color или font-size, не забудьте завершить их точкой с запятой (;).
Встроенные стили следует использовать только в крайнем случае. Они смешивают структуру HTML и контент, что затрудняет чтение и редактирование кода. Единственная оправданная ситуация для использования inline-стилей — если у вас есть доступ только к телу HTML-страницы.
Каскадный порядок в CSS
Когда вы ходите по магазинам, наверняка бывали ситуации, когда вы и другой покупатель одновременно тянулись к одному и тому же товару. Помните, кто из вас уступил? Примерно такая же «борьба» происходит между стилями, когда к одному элементу применяются сразу несколько правил. Как понять, какое из них победит?
Каскадный порядок определяет приоритеты следующим образом:
- Встроенные стили (inline styling)
- Внутренние таблицы стилей (internal stylesheet)
- Внешние таблицы стилей (external stylesheet)
- Стили по умолчанию в браузере (browser defaults)
Встроенные стили обычно прописываются внутри секции <body>, поэтому они применяются последними и имеют наивысший приоритет. Внутренние стили переопределяют внешние, так как обычно идут после них. Другими словами, чем ближе стиль к элементу или селектору, тем выше его приоритет.
Специфика в CSS
Специфичность — это принцип ранжирования CSS, который помогает браузеру определить, какое правило «побеждает» в случае конфликта. Представьте, что вы повар и получаете заказ на сэндвич. На стикере написано: «Один сэндвич с сыром» и «Один сэндвич с сыром и дополнительными помидорами».
Какой сэндвич вы приготовите? С точки зрения CSS, браузер выбирает наиболее специфичное правило, и оно переопределяет менее детальные. Это значит, что повар должен добавить дополнительные помидоры — без сомнений.
У каждого селектора есть своё место в системе ранжирования специфичности:
- Встроенные стили (inline styling) всегда имеют наивысший приоритет.
- Селекторы по id всегда более специфичны, чем универсальные и атрибутные.
- Контекстные селекторы всегда более специфичны, чем одиночные селекторы элементов.
- Классы всегда «побеждают» любое количество селекторов по тегам. Именно поэтому заголовок из примера отображается синим, а не чёрным.
Подробнее о правилах ранжирования и формуле расчёта специфичности можно прочитать на W3Schools.
Наследование в CSS
В реальной жизни дети наследуют некоторые черты от родителей, а некоторые — нет. То же самое касается и CSS: дочерние элементы могут унаследовать значения свойств родительского элемента, но не всегда. Например, если вы задали цвет шрифта и размер одному элементу, все элементы внутри него унаследуют эти свойства, если только вы не примените стили напрямую к дочерним элементам.
Правил довольно много — какие свойства наследуются, а какие нет — но со временем вы начнёте в этом разбираться по мере изучения CSS.
Сброс всех значений свойств в CSS
Иногда хочется начать с чистого листа и сбросить стили всех элементов или их родителей до исходного состояния. Для этого используется свойство all.
Существует 3 типа значений, которые можно применить:
- initial: сбрасывает все свойства элемента или его родителя до начальных значений.
- inherit: сбрасывает все свойства до значений, унаследованных от родителя.
- unset: сбрасывает свойства до значений родителя, если они наследуемы. Если нет — до начальных значений.
Каскадный порядок в CSS
Правильный ответ — синий. Каскадный порядок означает, что стили «спускаются» сверху вниз, позволяя последующим правилам переопределять предыдущие. В этом примере оба значения color имеют одинаковый селектор и одинаковую специфичность, что значит, что второе правило имеет более высокий приоритет.
Сброс всех значений свойств в CSS
Правильный ответ — unset. Являясь частью свойства all, значение unset позволяет сбросить все свойства, применённые к элементу или его родителю, до значений родителя или до начальных значений, если эти свойства не наследуются. В примере значение unset сбросит цвет pink до цвета шрифта по умолчанию, заданного браузером.
Применение внешнего CSS
Чтобы подключить внешний .css файл к вашему HTML-документу, используйте элемент <link> и поместите его в раздел <head>. Одним из главных преимуществ этого способа стилизации страниц является то, что один файл может изменить внешний вид всего сайта.
Знакомство с CSS-препроцессорами
CSS прошёл большой путь — от простых правил для таблиц до создания адаптивных элементов и не только. В результате CSS-код становится всё более сложным и трудным в сопровождении. Разработчики используют CSS-препроцессоры, чтобы облегчить себе работу, сделать её более организованной и поддерживаемой.
CSS-препроцессор — это скриптовый язык, который расширяет возможности обычного CSS. Он позволяет использовать более сложные концепции программирования (операции, функции и т.д.) при написании привычного CSS-синтаксиса и избегать повторения кода.
Существует несколько CSS-препроцессоров, самые старые и популярные из них — Sass и Less. Каждый из них по-своему уникален. Несмотря на начальную сложность, после освоения они помогают существенно сократить время разработки и расширяют возможности обычного CSS.