Начало работы с CSS
В этой статье вы узнаете, как легко добавлять информацию о стилях и форматировании на веб-страницы с помощью CSS – каскадных таблиц стилей.
Подключение CSS в HTML-документы
CSS можно прикрепить как отдельный документ или встроить в сам документ HTML. Есть три метода включения CSS в HTML-документ:
- Внутренние таблицы стилей – использование атрибута style в начальном теге HTML.
- Встроенные таблицы стилей – использование элемента <style> в разделе заголовка документа.
- Внешние таблицы стилей – использование элемента <link>, указывающего на внешний файл CSS.
Примечание. Внутренние стили имеют наивысший приоритет, а внешние стили – наименьший. Это означает, что если вы указываете стили для элемента как во внутренней, так и во внешней таблице стилей, конфликтующие правила стиля во внутренней таблице стилей переопределят внешнюю таблицу стилей.
Внутренние таблицы стилей
Внутренние стили используются для применения уникальных правил стиля к элементу путем помещения правил CSS непосредственно в начальный тег. Его можно прикрепить к элементу с помощью атрибута style.
Атрибут style включает серию пар – свойств и значений CSS. Каждая пара «свойство: значение» разделяется точкой с запятой (;), как если бы вы выполняли запись во встроенных или внешних таблицах стилей. Но это должно быть все в одной строке, то есть без разрыва строки после точки с запятой, как показано здесь:
<h1 style="color:red; font-size:30px;">"Заголовок"</h1>
<p style="color:green; font-size:23px;">Параграф</p>
<div style="color:blue; font-size:15px;">Текст</div>
Использование внутренних стилей обычно считается плохой практикой. Поскольку правила стиля встроены непосредственно в тег HTML, это приводит к смешению кода с содержимым документа, что затрудняет поддержку кода и сводит на нет цель использования CSS.
Примечание. Стилизовать псевдоэлементы и псевдоклассы с помощью встроенных стилей стало почти невозможно. Поэтому вам следует избегать использования атрибутов стиля в вашем коде. Использование внешних таблиц стилей является предпочтительным способом добавления стилей в документы HTML.
Встроенные таблицы стилей
Встроенные стили влияют только на документ, в который они встроены.
Встроенные стили определяются в разделе <head> документа HTML с помощью элемента <style>. Вы можете применить любое количество элементов <style> в документе HTML, но они должны располагаться между тегами <head> и </head>. Давайте посмотрим на пример:
<head>
<title>HTML страница</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Параграф</p>
<div>Текст</div>
</body>
</html>
Совет: Атрибут type тегов <style> и <link> (например, type = “text / css”) определяет язык таблицы стилей. Этот атрибут носит чисто информативный характер. Вы можете опустить это, поскольку CSS является стандартным языком таблиц стилей по умолчанию в HTML5.
Внешние таблицы стилей
Внешняя таблица является предпочтительней, когда стиль необходимо применить к большинству страниц веб-сайта.
Внешние стили содержат все правила стилей в отдельном документе, на который вы можете ссылаться из любого HTML-файла на вашем сайте. Внешние стили являются наиболее гибкими, поскольку с их помощью вы можете изменить внешний вид всего веб-сайта, изменив только один файл.
Вы можете прикрепить внешние стили двумя способами – путем связывания и импорта.
Связывание внешних таблиц стилей
Перед связыванием нам нужно сначала создать таблицу стилей. Давайте откроем ваш любимый редактор кода и создадим новый файл. Теперь введите следующий код CSS в этот файл и сохраните его как «style.css».
body {
background: lightyellow;
font: 19px Arial, sans-serif;
}
h1 {
color: pink;
}
Внешнюю таблицу стилей можно связать с HTML-документом с помощью тега <link>. Тег <link> находится внутри раздела <head>, как вы можете видеть в следующем примере:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>HTML страница</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Параграф или текст.</p>
</body>
</html>
Совет: Среди всех трех методов, использование внешней таблицы стилей – лучший метод определения и применения стилей к HTML-документам. Как видно на примере, затронутый HTML-файл требует минимальных изменений разметки.
Импорт внешних таблиц стилей
Правило @import – это еще один способ загрузки внешних стилей. Оператор @import указывает браузеру загрузить внешнюю таблицу и использовать ее стили.
Вы можете использовать его двумя способами. Самый простой – в заголовке вашего документа. Обратите внимание, что другие правила CSS все еще могут быть включены в элемент <style>. Вот пример:
<head>
<title>Пример импортированной таблицы стилей CSS</title>
<style>
@import url("/examples/css/style.css");
p {
color: red;
font-size: 17px;
}
</style>
</head>
<body>
<h1>Стили для этого заголовка определены в импортированной таблице стилей.</h1>
<p>Стили этого абзаца определены во встроенной таблице стилей.</p>
</body>
</html>
Точно так же вы можете использовать правило @import для импорта таблицы стилей в другую таблицу стилей.
<head>
<title>Пример оператора CSS @import</title>
<style>
@import url("/examples/css/layout.css");
@import url("/examples/css/color.css");
body {
color:red;
font-size:15px;
}
</style>
</head>
<body>
<div>
<h1>Импорт внешней таблицы стилей</h1>
<p>Стили HTML элемента определены в layout.css, а цвета - в color.css.</p>
</div>
</body>
</html>
Примечание. Все правила @import должны находиться в начале таблицы стилей. Любое правило, находящееся в самой таблице стилей, переопределяет конфликтующие правила в импортированных таблицах. Однако импорт одной таблицы стилей в другую таблицу не рекомендуется из-за проблем с производительностью.