Связь HTML и XHTML-документов с таблицами стилей CSS
+3

Связь HTML с CSS

Здравствуйте, уважаемые читатели!

Сегодня я расскажу вам о том, как же связывать таблицы стилей CSS, необходимые для визуального представления документов с их содержимым.
Напомню, что в документах HTML и XHTML содержится структура веб-страниц (их содержимое), а таблицы стилей CSS отвечают за их визуальное представление. Это полностью соответствует концепции web 2.0, согласно которой должно быть четкое разделение содержимого, представления и поведения на web-странице. Существует несколько способов, позволяющих привязать таблицы стилей к структуре документа:

  • с помощью тега <link>;
  • с помощью тега <style>;
  • c помощью директивы @import.

Приведу пример, содержащий все эти способы

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Связь HTML с CSS</title>
<link href="style.css" type="text/css" rel="stylesheet" media="all"/> <!-- Ссылка на таблицу стилей style.css -->
<style type="text/css">
@import url(style2.css); /* Имортируем внешнюю таблицу стилей style2.css */
li {font-style: italic;} /* Правила вложенной таблицы стилей */
</style>
</head>
<body>
	<h3>Способы связи HTML или XHTML-документов с таблицами стилей CSS</h3>
	<ul>
		<li>c помощью тега link;</li>
		<li>c помощью тега style;</li>
		<li>c помощью директивы import.</li>
	</ul>
</body>
</html>

А так приведенный пример будет выглядеть в браузере

Связь с помощью тега link

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

<link href="style.css" type="text/css" rel="stylesheet" media="all"/>

В результате присоединения style.css мы получаем серый цвет фона и заголовок красного цвета.

body {background-color: #999999;} /* Серый цвет для фона */
h3 {color: red;} /* Красный цвет заголовка */

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

Атрибуты тэга link

Атрибут type указывает на тип загружаемых данных. Для присоединения таблицы стилей необходимо указать type=»text/css».
Атрибут rel отвечает за установку взаимосвязи. В данном случае имеет значение stylesheet.
В значении атрибута href указывается URL файла с таблицами стилей. Адрес можно указывать либо относительный, либо абсолютный. В примере выше он относительный.
И последний атрибут media. Значение этого атрибута определяет, для каких средств визуального представления будет использована таблица стилей. Значение all, как в примере, указывает на то, что стили будут применяться для всех средств представления документа.
Приведу часто используемые значения media:
all — указывает для всех устройств;
screen — для предствления документа на мониторе;
print — для вывода документа на печать.
С помощью тега link можно присоединить не одну таблицу стилей, а сразу несколько

<link href="style1.css" type="text/css" rel="stylesheet" media="all"/>
<link href="style2.css" type="text/css" rel="stylesheet" media="all"/>

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

И еще про одну очень интересную возможность тега link — возможность создания альтернативных таблиц стилей.

Альтернативные таблицы стилей

Применение альтернативных таблиц стилей дает пользователю право выбора таблицы для отображения документа. Для этого значение атрибута rel следует указать alternate stylesheet, а также прописать названия стилей в значении атрибута title

<link href="style1.css" type="text/css" rel="alternate stylesheet" title="Стиль 1" />
<link href="style2.css" type="text/css" rel="alternate stylesheet" title="Стиль 2" />

В результате пользователь сможет выбрать стиль, и браузер переключится на него. При выборе «Стиль 2» отображение будет формироваться соответственно правилам, указанным в таблице стилей style2.css.
Данная функция поддерживается браузерами Firefox, последними версиями Safari, а также Internet Explorer начиная с 8 версии.

Элемент style

С помощью тега style можно включать таблицы стилей непосредственно в документ

<style type="text/css">
body {color: red;}
h1 {font-size: 20px;}
</style>

Данный тег в обязательном порядке должен содержать атрибут type. И для случая с CSS его значение должно быть type=»text/css».
Элемент style должен начинаться с <styletype=»text/css»> . Между этими открывающими и закрывающими тегами включают таблицы стилей. Такие таблицы стилей, включенные непосредственно в документ с помощью тега style, называют вложенными таблицами стилей.
Для элемента style, по аналогии с link, можно добавить атрибут media. Его функции и значения аналогичны описанным выше.

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

Во вложенные таблицы стилей можно также включать ссылки на внешние таблицы стилей с помощью элемента @import.

Директива @import

Директива @import это своеобразный аналог элемента link

@import url(style.css);

@import, так же как и link, указывает документу на загрузку внешней таблицы стилей. Отличия между ними заключаются в синтаксисе и месте размещения. Директива @import должна располагаться внутри тега и причем первой записью, выше всех остальных

<style type="text/css">
@import url(styles.css);
body {color: red;}
</style>

С помощью @import можно подгрузить во внешнюю таблицу стилей одну или несколько других, а также с легкостью переносить их в другие таблицы.

@import url(style.css);
@import url(base.css);
@import url(page.css);

И все они будут участвовать в представлении документа. В отличии от link, здесь уже нельзя будет выделить альтернативные таблицы стилей. URL файла CSS можно указывать как относительный, так и абсолютный.

Вот и все! Теперь вы знаете как присоединить таблицы стилей к HTML или XHTML-документам.
Удачи!

+3
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: CSS, HTML теги: , , . Прямая ссылка на запись.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *