Как включить CSS в HTML-страницы

Из этого материала вы узнаете, как легко добавлять информацию о стилях и как визуально форматировать веб-страницы с помощью CSS.

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

Теперь приступим к изучению CSS.

Включение CSS в документы HTML

CSS может быть прикреплен как отдельный файл или встроен в сам HTML-документ. Существует три способа включения CSS в HTML-документ:

Встроенные стили (Inline) — использование атрибута style в самом теге HTML.
Внедренные стили (Embed) — использование элемента <style> в разделе <head> документа.
Внешние стили (External) — с помощью элемента <link> указывающего на внешний файл CSS.

Теперь рассмотрим все способы подробнее.

Встроенные стили (inline) имеют самый высокий приоритет, а внешние таблицы стилей (external) имеют самый низкий. Это означает, что если вы укажете стили для элемента как во встроенных, так и во внешних таблицах стилей, конфликтующие правила стилей во встроенной таблице стилей переопределят внешнюю таблицу стилей.

Встроенные стили (Inline)

Встроенные стили используются для применения уникальных стилизационных правил к элементу путем помещения их непосредственно в сам тег с помощью атрибута style.

Атрибут style включает ряд пар свойств и значений CSS. Каждая пара "property: value" разделяется точкой с запятой (;), так же, как во встроенных или внешних таблицах стилей. Стили должны быть записаны одной строкой, в которой не должно быть разрыва, как показано здесь:

<h1 style="color:red; font-size:30px;">Это заголовок</h1>
<p style="color:green; font-size:22px;">Это абзац.</p>
<div style="color:blue; font-size:14px;">Это некоторый текстовый контент.</div>

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

Невозможно стилизовать псевдо-элементы и псевдо-классы с помощью встроенных стилей. Для этого используйте внешние таблицы стилей.

Внедренные стили (Embed)

Встроенные или внутренние таблицы стилей влияют только на текущий документ, в который они встроены.

Встроенные таблицы стилей должны быть определены в <head> разделе документа HTML с использованием элемента <style> . Вы можете определить любое количество элементов <style> в документе HTML, но они должны появляться между тегами <head> и </head>. Например:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Пример HTML Документа</title>
    <style>
        body { background-color: yellow; }
        p { color: #fff; }
    </style>
</head>
<body>
    <h1>Это заголовок</h1>
    <p>Это параграф текста.</p>
</body>
</html>

Атрибут type тега <style> и <link> (имеется в виду type="text/css") определяет язык таблицы стилей. Этот атрибут является чисто информативным. Вы можете пропустить его, поскольку CSS является стандартным языком таблиц стилей по умолчанию в HTML5.

Внешние стили (External)

Внешние таблицы стилей идеально подходят, когда их нужно применить ко многим страницам веб-сайта.

Внешняя таблица стилей содержит все правила в отдельном документе, на который вы можете ссылаться из любого HTML-файла на своем сайте. Внешние таблицы стилей являются наиболее гибкими, поскольку с помощью внешней таблицы изменив только один файл вы можете изменить внешний вид всего веб-сайта.

Вы можете прикрепить внешние таблицы стилей двумя способами — с помощью ссылки (link) или импорта (import) .

Прикрепление стилей с помощью <link>

Перед установкой ссылки нам нужно сначала создать таблицу стилей. Давайте откроем любой удобный редактор кода и создадим новый файл. Теперь введите следующий CSS-код внутри этого файла и сохраните файл как "style.css".

body {
    background: lightyellow;
    font: 18px Arial, sans-serif;
}
h1 {
    color: orange;
}

Внешняя таблица стилей может быть связана с HTML-документом с помощью тега <link>. Тег <link> должен находится внутри раздела <head>, как в следующем примере:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Мой HTML-документ</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Это заголовок</h1>
    <p>Это параграф текста.</p>
</body>
</html>

Среди всех трех методов использование внешней таблицы стилей является лучшим методом определения и применения стилей к HTML-документам. При их использовании, исходный HTML-файл требует минимальных изменений в разметке.

Прикрепление стилей с помощью @import

Правило @import — это еще один способ загрузки внешней таблицы стилей. Оператор @import указывает браузеру загрузить внешнюю таблицу стилей и использовать ее.

Самый простой способ использования — в заголовке (<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 должны появляться в начале таблицы стилей. Любое правило, определенное в самой таблице стилей, переопределяет конфликтующие правила в импортированных таблицах стилей. Однако импортировать таблицу стилей в другую таблицу стилей не рекомендуется из-за проблем с производительностью.