Внешние таблицы стилей — Xiper
Третья статья из цикла «подключение 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. Надеюсь, вывод ясен. В реальных проектах используй именно внешние таблицы стилей.
Внешние таблицы стилей в CSS: понятие и характеристика
Вы здесь
Главная → Блог → CSS → Внешние таблицы стилей в CSS: понятие и характеристика
Дата:14.05.15 в 9:54
Раздел:
Таблицы внешних стилей обеспечивают наиболее рациональный и удобный способ привязки страницы CSS к HTML-документу.
Сущность данной операции главным образом заключается в собрании CSS стилей в отдельном файле.
Представление внешней таблицы стилей
Таблицы внешних стилей являются не более, чем обычным текстовым документом в формате css. Однако данный формат не является единственно возможным, но его использование считается традиционным и позволяет избежать несоответствий в работе старых браузеров.
Документ css включает в себя только кодировку стилей веб ресурса и комментарии к ним (комментарии оставляют программисты для удобства работы с кодом). Если в файле будет прописана некоторая html-кодировка, которая отвечает за структуру сайта, то считывание документа css может быть нарушено.
Подключение с link
Оператор link обеспечивает привязку css-документа, а именно таблицы внешних стилей с html-документом. Также стоит отметить, что принципиально важно размещение тега link. Он располагается в родительском теге head. Также допускается присутствие двух и более тегов link на странице.
Пример:
<head> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head>
В данной строке присутствуют 3 атрибута, присущих тегу link. Первый из них – rel. Он обеспечивает связь между файлами и чаще всего имеет значение stylesheet. Следом идет атрибут type, который присваивает определенный тип документу связи. Для таблиц стилей используется тип text/css. Ну и в конце следует оператор относительной или абсолютной ссылки к CSS-документу – href.
Также стоит отметить существование атрибута media. Данный атрибут позволяет подключать индивидуальные таблицы стилей к документу. К примеру особая таблица стилей для печатного устройства выводв подключается так:
<link rel="stylesheet" type="text/css" href="css/style.css" /> <!--ведущий CSS--> <link rel="stylesheet" type="text/css" href="css/printing.css" media="print" /> <!--вспомогательный CSS для вывода особых стилей на устройствах печати-->
Подключение условного комментирования с помощью вспомогательного файла CSS:
<link rel="stylesheet" type="text/css" href="css/style.
css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/comment.css"/>
<![endif]-->Положительные стороны использования внешнего CSS
- Использование внешних таблиц стилей значительно упрощает и оптимизирует работу робота с интернет ресурсом.
- Первое, что следует отметить – значительное сокращение объема команд CSS. Также несомненным плюсом вложенного файла CSS является возможность использования одного файла с правилами для неограниченного количество файлов html. Это облегчает работу программиста в случае внесения каких-либо изменений в оформление сайта.
- Также использование внешних таблицей стилей позволяет разбить правила на логические блоки, которые будут присваиваться для определенных частей контента. При чем файлов CSS может быть несколько. С одной стороны это уменьшает объем файла с правилами, однако с другой стороны это увеличивает количество обращений сервера к данным файлом. Это приводит к ухудшению показателя быстродействие интернет ресурса.
- Еще одно достоинство вложенных CSS-файлов заключается в том, что можно создавать индивидуальный комплекс правил для определенных браузеров. Для этого и существует операция подключения условного комментирования. Это обычно используется при создании кросбраузерной верстки под старые версии IE.
Оценок: 4 (средняя 5 из 5)
Оценка:
Ключевые слова:
Подключение CSS в документ
Понравилась статья? Расскажите о ней друзьям:
Еще интересное
Комментарии CSS
❮ Предыдущий Далее ❯
CSS-комментарии не отображаются в браузере, но могут помогите задокументировать исходный код.
Комментарии CSS
Комментарии используются для объяснения кода и могут помочь при редактировании исходного кода позднее.
Комментарии игнорируются браузерами.
Комментарий CSS помещается внутри элемента
Мой Заголовок
Здравствуйте! Мир!
Этот абзац оформлен с помощью CSS.
Комментарии CSS не отображается в выходных данных.