h4 {font-size: 12pt }
h4 {font-size: 1pc }
3.2. Включение CSS в HTML-документ
Для включения CSS в HTML-документ можно воспользоваться одним из четырех способов либо их комбинацией:
•применить внешние стили (в виде отдельного текстово- го .css-файла) с помощью тега <link>;
•встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью тега <style>;
•применить внешние стили с помощью директивы
@import;
•применить inline-стиль, т.е. назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style.
При подключении внешних таблиц стилей рекомендуется файлам давать расширение css, чтобы упростить задачу и серверному, и клиентскому программному обеспечению в идентификации содержания файла.
Внешние стили (external style sheets)
Применяются с помощью тега <link>, который должен располагаться исключительно внутри тега <head>:
<link rel="stylesheet" type="text/css" href="styles.css" media="all">
Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае – styles.css) и применит к документу содержащиеся в нём стили. Файл должен содержать только CSSинструкций.
Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте, достаточно в каждом из них всего лишь вписать одну строку с элементом <link>.
57
Рассмотрим более подробно тег <link>:
Вид: <link>
Индивидуальные атрибуты: rel, type, href, media Стандартное отображение: нет
Тег <link> определяет взаимосвязь между документами. Каждый тег <link> должен содержать атрибут rel и href. Атрибут rel определяет тип ссылки, а атрибут href адрес ссыл-
ки. Указанный ниже код означает, что документ glossary.html является глоссарием терминов для текущего документа.
<link rel="glossary" href="glossary.html">
Атрибут type сообщает обозревателю, как обрабатывать подключаемый файл. Для CSS файлов его значение должно указывать-
ся как text/css.
Атрибут media указывает того, к отображению на каких устройствах применяется данная таблица стилей:
<link rel="stylesheet" href="aural.css" type="text/css" media="aural">
В табл. 3.3 приведены значения, которые может принимать параметр media. Допускается написание нескольких значений через запятую.
|
Таблица 3.3 |
|
Имена устройств отображения |
|
Все типы устройств |
all |
|
aural |
Синтезатор речи |
braille |
Тактильное устройство Брайля для слепых |
embossed |
Печатающее устройство Брайля |
handheld |
Переносное устройство (например, пейджер) |
Принтер |
|
projection |
Проектор |
screen |
Графический дисплей |
tty |
Неграфический дисплей (терминал, телетайп) |
tv |
Телевизор |
58
Таблицы стилей документа (document style sheets)
Таблицы стилей документа называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенная таблица стилей). В этом случае CSS-инструкции располагаются между открывающим и закрывающим тегами <style>:
Вид: <style> … </style>
Индивидуальные атрибуты: type Стандартное отображение: нет
Атрибут type обязателен для указания, он подтверждает что инструкции по визуализации оформлены именно с применением CSS. Для этого используется следующее значение атрибута: text/css. Пример использования тега:
<style type="text/css">
h1 {text-align: center;} </style>
Сам тег <style> (в отличие от <link>) может находиться в любой части документа, но обычно его размещают внутри тега <head>, чтобы обозреватель Интернет раньше начал корректно визуализировать HTML-документ на экране.
Подключение внешних стилей через директиву
Директива @import позволяет включать в свою таблицу стилей другие таблицы стилей. Она должна содержать адрес импортируемой таблицы стилей. Следующие две директивы эквивалентны и демонстрируют правила написания данной директивы:
@import "mystyle.css"; @import url(styles.css);
59