HTML: Популярный самоучитель, Чиртик Александр Анатольевич

HTML: Популярный самоучитель

на обложку

Чиртик Александр Анатольевич

Шрифт:

Наверное, теперь понятно, почему технология CSS получила большое распространение вскоре после разработки и реализации ее поддержки в браузерах. Кроме того, с использованием каскадных таблиц стилей можно создавать документы, которые по-разному отображаются на различных типах устройств: от карманного ПК до проектора.

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

10.2.

Внешние и встроенные таблицы стилей

Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Данные файлы являются обычными текстовыми файлами, созданными, например, в редакторе Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS (например, mystyle.css). Внешние таблицы стилей подключаются к документу при помощи HTML-элемента LINK. При этом используются следующие атрибуты этого элемента:

• href – задает URI файла с подключаемой таблицей стилей;

• rel – для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;

• type – при подключении CSS задается значение text/css;

• media – задает тип устройства, для которого применяется подключаемая таблица стилей (эта замечательная возможность будет рассмотрена далее).

HTML-элемент LINK задается при помощи одиночного тега <LINK>, который помещается в шапке документа. Для одного и того же документа можно подключать неограниченное количество таблиц стилей. Пример подключения двух внешних таблиц стилей:

<HEAD>

<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 будет отображаться курсивом.