HTML довольно ограничен, когда дело доходит до визуального оформления веб-страниц. CSS (каскадные таблицы стилей) был представлен в декабре 1996 года Консорциумом World Wide Web (W3C) для обеспечения лучшего способа оформления HTML-элементов.
С помощью CSS очень легко определять размер и шрифт для текста, цвета для текста и фона, выравнивание текста и изображений, пространство между элементами, границы и контуры для элементов и многие другие стилевые свойства.
Добавление стилей в HTML-элементы
CSS может быть прикреплен как отдельный файл или встроен в сам HTML-документ. Существует три способа включения CSS в HTML-документ:
- Встроенные стили (Inline) — использование атрибута
styleв самом теге HTML. - Внедренные стили (Embed) — использование элемента
<style>в разделе<head>документа. - Внешние стили (External) — с помощью элемента
<link>указывающего на внешний файл CSS.
В этом материале мы рассмотрим все эти способы управления стилями.
Встроенные стили имеют самый высокий приоритет, а внешние таблицы стилей самый низкий. Это означает, что если вы укажете стили как во встроенных, так и во внешних таблицах стилей, конфликтующие правила во встроенной таблице переопределят правила во внешней.
Встроенные стили (Inline)
Встроенные стили используются для применения уникальных правил к элементу путем помещения CSS-правил непосредственно в начальный тег. Его можно прикрепить к элементу с помощью атрибута style.
Атрибут style включает ряд пар свойств и значений CSS. Каждая пара свойство: значение разделяется точкой с запятой (;), так же, как вы пишете во встроенную или внешнюю таблицу стилей, но одной строкой, т. е. после точки с запятой не должно быть разрыва строки.
В следующем примере показано, как установить color и font-size для текста:
<h1 style="color:red; font-size:30px;">Это заголовок</h1>
<p style="color:green; font-size:18px;">Это абзац.</p>
<div style="color:green; font-size:18px;">Это какой-то текст.</div>Использование встроенных стилей считается плохой практикой. Поскольку правила стилей встроены непосредственно в тег html, это приводит к тому, что разметка смешивается с содержимым документа, что делает обновление или поддержку кода очень трудоемкой.
Чтобы узнать подробнее о различных CSS-свойствах, см. CSS Свойства.
Невозможно стилизовать псевдо-элементы и псевдо-классы с помощью встроенных стилей. Для этого используйте внешние таблицы стилей.
Внедренные стили (Embed)
Встроенные или внутренние таблицы стилей влияют только на документ, в котором они находятся.
Встроенные таблицы стилей определены в разделе <head> HTML-документа с помощью тега <style>. Вы можете определить любое количество элементов <style> в разделе <head>.
В следующем примере демонстрируется, как CSS-правила встраиваются в веб-страницу.
<head>
<style>
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>Внешние стили (External)
Использование внешних таблиц стилей предпочтительно, когда нужно применять стили для многих страниц.
Внешняя таблица стилей содержит все правила в отдельном документе, который вы можете связать с любым HTML-документом на вашем сайте. Внешние таблицы стилей являются наиболее гибкими, поскольку с их помощью вы можете изменить внешний вид всего веб-сайта, обновив только один файл.
Вы можете прикрепить внешние таблицы стилей двумя способами — с помощью ссылки (link) или импорта (import) .
Прикрепление стилей с помощью <link>
Внешняя таблица стилей может быть связана с HTML-документом с помощью тега <link>.
Тег <link> должен находится внутри раздела <head>, как в этом примере:
<head>
<link rel="stylesheet" href="css/style.css">
</head>Прикрепление стилей с помощью @import
Правило @import — это еще один способ загрузки внешней таблицы стилей. Оператор @import указывает браузеру импортировать внешнюю таблицу стилей и использовать ее стили.
Вы можете использовать его двумя способами. Самый простой способ — использовать его внутри элемента <style> в разделе <head>. Обратите внимание, что другие CSS-правила все еще могут быть включены в элемент <style>.
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>Точно так же вы можете использовать правило @import для импорта одной таблицы стилей в другую.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}Все правила @import должны появляться в начале таблицы стилей. Любое правило, определенное в самой таблице стилей, переопределяет конфликтующие правила в импортированных таблицах стилей. Однако импортировать таблицу стилей в другую таблицу стилей не рекомендуется из-за проблем с производительностью.
