Как вставить стили в HTML-документ

Чтобы стили вступили в силу, необходимо встроить их в документ. Существует несколько способов встраивания стилей в html-документ. Каждый из них хорош по своему. В этой статье рассмотрим эти способы.

Итак, разберёмся какие бывают стили:

  1. Встроенные стили. Подробнее
  2. Глобальные стили. Подробнее
  3. Внешние стили. Подробнее

Встроенные стили встраиваются напрямую к какому либо элементу при помощи атрибута style:

Если нужно не одно свойство, а несколько, то свойства разделяются точкой с запятой:

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


Глобальные стили встраиваются в элемент заголовка head при помощи элемента style:

В этом случае стили для заголовков h2 и h4 будут применены ко всему документу. Каждый заголовок h2 будет иметь полужирное начертание, за это отвечает свойство font-weight со значением bold, а каждый заголовок h4 будет иметь размер 20 пикселов, за это отвечает свойство font-size со значением 20px.


Внешние стили выносятся в отдельный файл. Этот файл имеет расширение .css и может подключаться к документу двумя методами:

  1. При помощи элемента link. Подробнее
  2. При помощи правила @import. Подробнее

В этом элементе присутствуют 2 атрибута, rel и href. Атрибут rel указывает на то, что к документу будет присоединена таблица стилей, поэтому его значение "stylesheet". В атрибуте href указывается ссылка на таблицу.


Существует правило @import, которое позволяет добавлять таблицу стилей указывая её url-адрес:

Здесь после правила @import указывается путь расположения таблицы стилей, он может быть абсолютным или относительным.


Также важно сказать про добавление комментариев в таблицах стилей. Комментарии добавляются между вот такими символами:

Комментарии это очень полезная штука позволяющая упростить задачу не только себе, но и другим людям. Например, чтобы понять для какого раздела написаны правила, можно написать:

Поделиться