5.1 Внешние (связанные) и встроенные таблицы стилей
Внешние (связанные) таблицы стилей названы так потому, что помещаются в отдельных
файлах. Эти файлы являются обычными текстовыми файлами, созданными , например , в редакторе
Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS ( например,
mystyle.сss). Подключаются внешние таблицы стилей к документу при помощи HTML- элемента
LINK. При этом используются следующие атрибуты этого элемента:
href — задает URL файла с подключаемой таблицей стилей;
rel — для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;
type — при подключении CSS задается значение text/css;
media — задает тип устройства, для которого применяется подключаемая CSS.
HTML-элемент LINK задается при помощи одиночного тега <LINK>, который помещается
в шапке документа . Для одного и того же документа можно подключать неограниченное
количество таблиц стилей. Пример подключения двух внешних таблиц стилей:
<HEAD>
<LINK href = "mystyle.css" rel = "stylesheet" type = "text/css">
<LINK href = "mystyle_ex.css" rel = "stylesheet" type = "text/css">
</HEAD>
Встроенные таблицы стилей задаются внутри HTML-элемента STYLE (между парными
тегами <STYLE> и </STYLE>). Встроенные таблицы стилей могут быть двух классов:
1) если тег STYLE помещен в разделе HEAD документа, то данная таблица стилей
называется глобальной.
2) Если тег STYLE Используется для настройки стиля отдельного элемента html-
документа, то данная таблица стилей называется локальной.
При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента
STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае
совпадает с назначением одноименных атрибутов HTML-элемента LINK.
В примерах данной работы используются встроенные таблицы стилей. На практике удобнее
использовать внешние CSS. Тогда не придется при изменении стиля одного элемента заново
выкладывать на сервере все содержимое документа : достато чно обновить файл с измененной
таблицей стилей.
5.2 Записи таблицы стилей
Таблицы стилей представляют собой множество записей, часто называемых селекторами.
Каждая запись состоит из двух частей : наименования элемента ( имеются в виду не только HTML-
элементы ), которому назначаются правила отображения , и собственно правила отображения этого
элемента. Правила заключаются в фигурные скобки {}, например:
элемент {свойство: значение; свойство: значение; ...}
Как видно, в одной записи могут задаваться сразу несколько правил отображения, но ничто
не мешает задавать различные правила отображения одного элемента в отдельных записях. То, что
обозначено в приведенном примере как элемент, может быть названием HTML-элемента
(например, Р, H1), идентификатором фрагмента документа или определением стилевого класса.
Свойство представляет один из предопределенных строковых идентификаторов, обозначающих
тот или иной параметр отображения элемента (например, color, ground-color, font-family). Тип
присваиваемого значения зависит от конкретного параметра. Одни и те же правила отображения
могут назначаться нескольким различным элементам. В этом случае запись в таблице стилей
будет иметь следующий вид:
Элемент1, элемент2, .. {свойство: значение; свойство: значение; ...}
12
Параметры отображения (свойства), которые можно задать для различных элементов, суще-
ственно отличаются. Ввиду большого количества свойств их список в тексте работы полностью не
приводится, некоторые из них вынесены в приложение 1.