Как подключить CSS к HTML

Начало работы с CSS

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

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

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

  1. Внутренние таблицы стилей — использование атрибута style в начальном теге HTML.
  2. Встроенные таблицы стилей — использование элемента <style> в разделе заголовка документа.
  3. Внешние таблицы стилей — использование элемента <link>, указывающего на внешний файл CSS.
Мы рассмотрим все три метода вставки 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>
Применение внутренних стилей CSS

Использование внутренних стилей обычно считается плохой практикой. Поскольку правила стиля встроены непосредственно в тег 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>
Применение встроенных стилей CSS

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

Внешние таблицы стилей

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

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

Вы можете прикрепить внешние стили двумя способами — путем связывания и импорта.

Связывание внешних таблиц стилей

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

body {
    background: lightyellow;
    font: 19px Arial, sans-serif;
}
h1 {
    color: pink;
}
Пример таблицы стилей CSS

Внешнюю таблицу стилей можно связать с 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>
Связывание таблицы стилей «style.css» с 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>
Пример использования встроенной и внешней таблицы CSS через оператор @import

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *