Добавление CSS-стилей к HTML-документу

В этой главе:

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

  • Внутренняя таблица стилей

  • Встроенный стиль

  • Кэширование

Таблицы стилей бывают двух видов - внутренние и внешние - в зависимости от того, где определены стили: непосредственно на самой странице или во внешнем файле, связанном с веб-страницей.

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

Внешняя таблица стилей - обычный текстовый файл, содержащий весь CSS-код. В его содержимое не должны входить никакие HTML теги, поэтому тег <style> там указывать не нужно, при сохранении текстового файла со стилями надо установить расширение ".css", имя файла может быть любым.

Для подключения внешней таблицы стилей, вам нужно прикрепить ее к HTML-документу с помощью тега <link>, который должен располагаться внутри тега <head> или с помощью встроенного в CSS правила @import.

Подключение стилей с помощью тега <link>

1
2
3
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

тег <link> должен содержать три атрибута:

  • rel="stylesheet" - указывает тип ссылки; в данном случае это ссылка на таблицу стилей

  • type="text/css" - указывает тип файла, на который ссылается тег

  • href="/styles.css" - определяет путь к внешнему CSS-файлу, который может отличатся в зависимости от того, где вы его храните

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

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

В отличае от тега <link>, правило @import используется внутри тега <style>. Для подключения внешней таблицы стилей после ключевого слова @import используется url(), в скобках указывается путь к внешнему CSS-файлу, который может быть заключен в кавычи: url('/main.css');. Использование url() для указания пути к CSS-файлу необязательно, можно просто написать: @import "путь_к_файлу";, в этом случае путь обязательно должен быть указан в кавычках.

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

1
2
3
4
<style>
  @import url(main.css);
  @import url(каталог/main2.css);
</style>

После правила @import можно добавлять обычные CSS-стили, если, например, вы хотите создать стиль, который нужно применить только к одной веб-странице, используя для форматирования остального содержимого таблицу стилей, описанную во внешнем CSS-файле:

1
2
3
4
5
<style>
  @import url(main.css);
  @import url(каталог/main2.css);
  p { color: red;}
</style>

Примечание: правило @import не обязательно должно располагаться в теге <style>, его так же можно включать во внешние таблицы стилей.

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

Внутренняя таблица стилей

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

1
2
3
4
5
6
7
<head>
  <style>
    hr { color: sienna; }
    p { margin-left: 20px; }
    body { background-image: url("images/back40.gif"); }
  </style>
</head>

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

Совет: если веб-страница имеет внутреннюю таблицу стилей, а вы хотите использовать внешнюю таблицу стилей, то всего лишь вырежьте CSS-код, расположенный между тегами <style> (без самих тегов). Потом создайте новый текстовый документ и вставьте в него CSS-код. Сохраните файл с расширением .css, например styles.css, и подключите его к вашей веб-странице, используя тег <link> или правило @import.

Встроенный стиль

Под встроенным стилем подразумевается использование глобального атрибута style непосредственно в том элементе, который необходимо стилизовать. В качестве значения атрибута указываются CSS-свойства:

1
<div style="border: 1px solid red; background-color: yellow;">Элемент div</div>

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

Примечание: встроенный стиль используется в тех редких случаях, когда необходимо определить стиль только для одного элемента, и нет более удобного способа это сделать. Тем не менее, почти всегда можно избежать применение встроенного стиля, добавив к нужному элементу уникальный идентификатор или класс.

Кэширование

Кэш браузера - это обычная папка на жестком диске, содержащая временные файлы, которые загружаются при просмотре веб-станицы, как правило, она так и называется "cache". Используется кэш браузера для более быстрой загрузки страниц в интернете при их повторном посещении.

Современные браузеры устроены таким образом, что практически всю информацию, которую пользователь запрашивает в Сети (интернет), они сохраняют на локальном жёстком диске компьютера. Делается это для того, чтобы не скачивать одни и те же файлы при каждом запросе пользователя, то есть с целью экономии трафика, а также ускорения работы браузера. Сам процесс сохранения часто запрашиваемых файлов называется кэширование - caching. Использование кэша (cache) позволяет браузеру загружать страницы, к которым пользователь уже обращался гораздо быстрее, поскольку большая часть файлов, из которых состоит веб-страница, уже загружена на компьютер и вместо того, чтобы тратить время на скачивание файлов заново, он достаёт необходимые файлы прямо из кэша.

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

Есть два пути решения этой проблемы: переименовать CSS файл или принудительно заставить браузер перезагрузить все содержимое веб-страницы (просто вручную обновив страницу), чтобы браузер обновил файлы кэша.