Способы подключения таблиц стилей

Строковые (inline) таблицы стилей

Строковые таблицы стилей включаются непосредственно в оформляемый HTML-элемент посредством глобального атрибута style. Например, мы можем выделить параграф текста с помощью следующей записи:

<p style="color: green; font-size: 13px;">
  Это выделенный абзац текста.
</p>

Обратите внимание, данная строковая таблица стилей относится только к содержащему ее HTML-элементу, поэтому, мы не указываем селектор, а сами объявления стилей перечисляем в одну строку без фигурных скобок.

Внутренние (internal) таблицы стилей

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

<head>
  <title>Пример внутренней таблицы стилей</title>
  <style>
    p {
      color: green;
      font-size: 13px;
    }
  </style>
</head>

определяет оформление всех параграфов на странице.

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

Наконец, внешние таблицы стилей — это способ подключения каскадных таблиц в HTML-документы из отдельных файлов. Разметка веб-страницы хранится в HTML-файле, а ее оформление — в отдельном файле с расширением css. Связь между веб-страницей и относящейся к ней внешней таблицей стилей устанавливается посредством тега link в разделе мета-данных HTML-документа:

<head>
  <title>Пример внешней таблицы стилей</title>
  <link rel="stylesheet" href="mystyle.css" />
</head>

Здесь атрибут rel (от англ. relationship, т. е. отношение) содержит ключевое слово "stylesheet", и таким образом определяет подключаемый файл, как таблицу стилей, а атрибут href содержит путь к этому файлу.

Из всех трех перечисленных способов подключения каскадных таблиц внешние таблицы стилей являются наиболее предпочтительными по следующим причинам:

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

Существует три основных способа подключения каскадных таблиц стилей в HTML, соответствующие трем видам CSS, а именно:

  • строковые (inline),
  • внутренние (internal) и
  • внешние (external) таблицы стилей.