HTML: Популярный самоучитель
Шрифт:
Наверное, теперь понятно, почему технология CSS получила большое распространение вскоре после разработки и реализации ее поддержки в браузерах. Кроме того, с использованием каскадных таблиц стилей можно создавать документы, которые по-разному отображаются на различных типах устройств: от карманного ПК до проектора.
Чтобы использовать таблицы стилей в документах, нужно сначала научиться их создавать, не так ли? Именно с рассмотрения особенностей создания таблиц стилей и начнем.
10.2. Внешние и встроенные таблицы стилей
Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Данные файлы являются обычными текстовыми файлами, созданными, например, в редакторе Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS (например, mystyle.css). Внешние таблицы стилей подключаются к документу при помощи HTML-элемента LINK. При этом используются следующие атрибуты этого элемента:
• href – задает URI файла с подключаемой таблицей стилей;
• rel – для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;
• type – при подключении CSS задается значение text/css;
• media – задает тип устройства, для которого применяется подключаемая таблица стилей (эта замечательная возможность будет рассмотрена далее).
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>), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML-элемента LINK.
Кроме подключения внешних таблиц стилей, ссылаясь на них при помощи элемента LINK, можно подключать внешние таблицы стилей и из самих таблиц стилей. Это позволяет существенно сократить объем таблиц стилей, если в них предполагается наличие одинаковых фрагментов. Подключение внешней таблицы выполняется при помощи ключевого слова @import. Правило CSS в таком случае имеет следующий формат:
@import url(«URI внешней таблицы стилей»);
Пример подключения внешней CSS может выглядеть так:
...
P {font-size: 16pt}
@import url("external_stylesheer.css"); /*подключение таблицы стилей*/
...
В примерах данной главы используются встроенные таблицы стилей. Однако имейте в виду, что это сделано только потому, что, во-первых, примеры небольшие и создавать для них два файла просто нерационально, а во-вторых, такие примеры проще помещать в книгу и они так лучше воспринимаются. На практике удобнее использовать внешние таблицы стилей. Тогда не придется при изменении стиля одного элемента заново выкладывать на сервере все содержимое документа: достаточно обновить файл с измененной таблицей стилей.
10.3. Записи таблицы стилей
Таблицы стилей представляют собой множество записей, называемых правилами. Каждое правило CSS состоит из двух частей: селектора и объявления стиля. Селектор несет в себе информацию, достаточную для нахождения в документе элементов, к которым применяется стиль. Объявление стиля представляет собой набор пар свойство/значение, заключенный в фигурные скобки {}. Синтаксис правила CSS следующий:
селектор {свойство: значение; свойство: значение; ...}
При объявлении стиля может быть задано как значение только одного свойства, так и значения сразу нескольких свойств CSS. В последнем случае пары свойство/значение отделяются друг от друга символом ;.
То, что обозначено в приведенном примере как селектор, может быть названием HTML-элемента (например, P, STRONG, H1), идентификатором фрагмента документа (#par1, #tabl1), именем стилевого класса (.par1, P.par1) или более сложной конструкцией, описанной ниже.
Свойство представляет один из предопределенных строковых идентификаторов, обозначающих тот или иной параметр, поддерживаемый для HTML-элемента (например, color, backgroundcolor, font-family). Тип присваиваемого значения зависит от конкретного параметра.
Одни и те же правила отображения могут применяться к нескольким различным селекторам. В этом случае запись в таблице стилей будет иметь следующий вид:
селектор, селектор, ... {свойство: значение; свойство: значение; ...}
Свойства CSS, которые можно задать для различных элементов, существенно отличаются. Часть их мы рассмотрим на примерах в тексте книги. Более полный перечень свойств с их описаниями вы сможете найти в приложении 2.
Правила отображения HTML-элементов
Рассмотрим самое простое применение CSS – задание стиля текста (или прочего содержимого), содержащегося внутри определенных HTML-элементов. Для этого нужно указать в качестве селектора название HTML-элемента (или нескольких HTML-элементов), например:
H1 {color: red; font-family: arial}
H2, H3 {color: blue; font-family: courier}
P {font-style: italic}
Теперь все заголовки первого уровня будут отображаться красным цветом шрифтом Arial, заголовки второго и третьего уровней будут отличаться только размером шрифта, а текст внутри каждого HTML-элемента P будет отображаться курсивом.