Моя домашняя страница

На этой странице вы найдете информацию обо мне и моих друзьях.

Чтобы сделать текст из элемента H1 синим, вместо обычного атрибута color элемента FONT нужно использовать следующее CSS-правило:

h1 { color: blue }

Собственно правило в CSS состоит из двух частей: селектора H1 и описания color: blue. Описание, в свою очередь, также имеет две части: свойство color и значение blue. В последующих разделах мы подробно разберем, что такое селектор, и, двигаясь дальше, узнаем, какие бывают свойства CSS и их значения.

В спецификации языка HTML 4 описано два правила описания таблиц стилей для HTML-документов. Первый – это вставка CSS-кода непосредственно внутрь HTML-документа. Второй – это запись таблицы стилей во внешнем файле и установка ссылки на этот файл в HTML-документе.

Чтобы добавить CSS непосредственно внутрь HTML, используется элемент STYLE, который должен располагаться внутри заголовка документа, то есть внутри элемента HEAD. В листинге 7.2 приведен пример простой HTML-страницы с записанной таблицей стилей внутри документа.

Моя домашняя страница

На этой странице вы найдете информацию обо мне и моих друзьях.

Для максимальной гибкости имеется возможность создавать внешние таблицы стилей. Если код таблицы стилей находится во внешнем файле, то вы имеете возможность использовать его во всех страницах сайта. Представьте, что ваш сайт насчитывает более 1000 страниц. Если вы захотите внести какие-то изменения, то вам придется изменять код на каждой странице. Используя внешние таблицы стилей, вы лишь один раз внесете изменения в CSS-файл таблицы стилей.

Для соединения HTML-документа с внешней таблицей стиля используется элемент LINK, который, как и элемент STYLE, рассмотренный выше, должен располагаться в заголовке документа внутри элемента HEAD. Код страницы со ссылкой на внешний файл таблицы стилей представлен в листинге 7.3.

Моя домашняя страница

На этой странице вы найдете информацию обо мне и моих друзьях.

Как вы заметили, элемент LINK имеет несколько атрибутов. Рассмотрим их названия и подробное описание:

• rel – тип соединения, который для таблиц стилей задается как stylesheet;

• href – местонахождение таблицы стилей, то есть адрес и имя файла. В нашем примере в листинге 7.3 это my_style.css;

• type – тип присоединяемой таблицы стилей. Поскольку элемент LINK может использоваться для присоединения и других файлов в HTML-документ, то желательно указать тип присоединяемого файла. Для таблиц стиля это значение text/css.

Чтобы показать тесную связь между таблицей стилей и структурной разметкой документа, добавим в наш пример больше цветов (листинг 7.4), используя элемент STYLE.