Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Внешние таблицы стилей в CSS: понятие и характеристика

Раздел: 

Таблицы внешних стилей обеспечивают наиболее рациональный и удобный способ привязки страницы 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.