Внешние таблицы стилей
Если сайт Web имеет множество страниц, то третий вариант таблиц стилей будет, вероятно, лучшим решением. Он позволяет применять одни стили оформления ко всем страницам, не требуя копирования линейных или встроенных таблиц стилей на каждую страницу.
Внешняя таблица стилей является отдельным документом, содержащим настройки property:value в том же формате, что и встроенная таблица стилей. Единственное различие состоит в том, что этот документ не содержит вокруг записей тегов <style>. Например, документ внешней таблицы стилей, содержащий описанные выше спецификации оформления тега <hr/>, включает в себя записи, показанные в листинге 3.6.
Stylesheet.css (документ)
hr {height:10px; width:50%; color:red; text-align:center}
Листинг 3.6. Документ внешней таблицы стилей (html, txt)
Этот отдельный документ создается с помощью текстового редактора и сохраняется как стандартный текстовый файл, обычно с расширением файла .css, чтобы идентифицировать его как документ таблицы стилей. Широко распространено сохранение этого документа таблицы стилей с именем Stylesheet.css в том же каталоге, где находятся страницы Web, к которым она применяется.
Документ внешней присоединяемой таблицы стилей содержит настройки стиля оформления, которые применимы ко всем страницам сайта Web. Поэтому все страницы, которые используют эту таблицу стилей, должны с ней "соединяться", чтобы сделать стили доступными для этих страниц. Соединение происходит с помощью тега <link>, кодируемого в разделе <head> страницы. Общая форма тега <link> показана в листинге 3.7.
<link href="url" type="text/css" rel="stylesheet" />
Листинг 3.7. Общая форма тега <link> (html, txt)
Атрибут href (hypertext reference) задает расположение присоединяемой таблицы стилей. Если таблица стилей находится в том же каталоге, что и страница Web, к которой она применяется, то эта запись является просто именем этого документа. Атрибут type определяет тип документа, с которым делается соединение (всегда "text/css"). Атрибут rel определяет взаимоотношения внешнего документа с данной страницей (всегда "stylesheet").
Если имеется документ таблицы стилей с именем Stylesheet.css, который расположен в той же папке, что и страница Web, то страница Web соединяется с этим документом с помощью следующего кода XHTML.
<head> <title>Пример присоединяемой таблицы стилей</title> <link href="Stylesheet.css" type="text/css" rel="stylesheet"/> </head>
Листинг 3.8. Соединение страницы Web с внешней таблицей стилей (html, txt)
Теперь страница Web имеет все доступные для нее настройки стиля оформления, заданные в документе Stylesheet.css. Эта присоединенная таблица стилей может служить для замены встроенных или линейных таблиц стилей, которые в противном случае должны были бы появиться на отдельных страницах Web. Как и в случае встроенных таблиц стилей, все теги, определенные селекторами в присоединенной таблице стилей, несут в себе объявленные стили оформления.
