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

Автор: Александр Головко Дата публикации:

Последнее обновление:

Третья статья из цикла «подключение CSS» посвящена внешним таблицам стилей. Использование внешних таблиц — самый гибкий, мощный, удобный и правильный способ соединить HTML и CSS.

Суть способа в том, что CSS выноситься в отдельный файл (или файлы). А в HTML указывается, какие именно CSS-файлы к нему нужно применить.

Представляем внешнюю таблицу

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

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

Тег link для внешних таблиц стилей

Для подключения внешнего CSS используется тег link.

Знакомься, тег link:

устанавливает связь с внешними документами, чаще всего с таблицами стилей;
должен располагаться в секции head;
в одном документе может быть несколько тегов link.

Примеры подключения CSS

<link rel="stylesheet" type="text/css" href="css/main.css" />

Как правило, используются три атрибута:

rel — отвечает за установку взаимосвязи и в данном случае имеет значение "stylesheet";
type — MIME-тип подключаемого объекта. У нас это таблица стилей — значит тип "text/сss";
href — абсолютный или относительный путь к самому CSS-файлу.

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

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

<link rel="stylesheet" type="text/css" href="css/main.css" /> <!--Основной CSS--> 
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> <!--Дополнительный CSS подключается автоматически, если страница выводится на устройство печати-->

Пример подключения CSS с использованием условных комментариев (ie6.css будет подключен только, если страница просматривается с помощью браузера, который идентифицируется, как IE6):

<link rel="stylesheet" type="text/css" href="css/main.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css"/>
<![endif]-->

Достоинства внешних CSS

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

Один и тот же CSS-файл может «обслуживать» сколько угодно HTML-страниц. Объем HTML уменьшится, вносить изменения, общие для всех страниц сайта, значительно проще.
Можно разделить правила на логические блоки (общие стили, стили для конкретных разделов сайта), расположить их в нескольких разных CSS-файлах и, для отдельных страниц, подключать только нужные. Только учти, что тут палка о двух концах — с одной стороны получаем меньший размер подключенного CSS (ненужные файлы стилей не грузятся), с другой стороны — больше мелких файлов со стилями — это больше обращений к серверу, что, понятно, не очень хорошо скажется на быстродействии.
Можно выделять стили для конкретных браузеров и подключать их с помощью условных комментариев. Это используется для укрощения особо упрямых браузеров. Правда, с помощью условных комментариев так же можно подключить и вложенную таблицу, но выглядеть такая конструкция будет реально громоздко.

Резюме

Использование внешних таблиц стилей — самый удобный и грамотный способ связать воедино HTML и CSS. Надеюсь, вывод ясен. В реальных проектах используй именно внешние таблицы стилей.

Xiper