Основы технологии CSS

Решение указанных проблем было найдено в 1996 году, когда Консорциумом 3W (WWW Consortium — W3C) была стандартизована технология каскадных (или иерархических) таблиц стилей (Cascading Style Sheets — CSS). Суть технологии CSS заключается в том, что она позволяет добавлять в HTML-код описание стиля страницы, содержащее такие атрибуты, как тип шрифта, цвет, отступы, способ выравнивания элементов текста и т. д. Другими словами, таблицы стилей по своему предназначению аналогичны шаблонам текстовых документов, используемым, например, в редакторе MS Word.

Используя CSS, Web-дизайнер может создать один файл с таблицей стиля и затем применить его ко всем страницам узла. Соответственно, любое изменение в таком файле приведет к автоматической корректировке всех использующих его страниц.

Иерархия таблиц стилей имеет два аспекта.

Во-первых, речь идет о том, что для одного Web-документа может существовать одновременно несколько таблиц стилей, образующих иерархию; например, может существовать таблица стилей, общая для всех страниц узла, но при этом для некоторых страниц может быть определен индивидуальный стиль. В таких случаях реализуется стиль самого нижнего уровня.

Во-вторых, иерархию образуют таблицы стилей, созданные автором узла (страницы) и посетителем: если созданные ими стили конфликтуют, то приоритет отдается авторскому стилю (хотя, следуя золотому правилу «клиент всегда прав», броузеры позволяют изменить иерархию на противоположную).

В настоящее время технологию CSS поддерживают броузеры Internet Explorer, Netscape Communicator и Opera версий 4.0 и выше. Однако на сегодняшний день существует несколько версий языка CSS, в силу чего одно и то же стилевое оформление страницы может отображаться разными броузерами по-разному. Считается, что стандартизованная версия CSS — CSS 1 — наиболее полно и корректно поддерживается броузерами Opera (версии 4.0 и выше) и MSIE (также версии 4.0 и выше). Тем не менее даже этими броузерами одна и та же страница, использующая стили, обрабатывается по-разному (рис. 4.36).

Рис. 4.36. Пример отображения одной и той же «стилизованной» страницы разными броузерами

Описание стилей, применяемых к документу в целом или к отдельным ег< элементам, может быть выполнено четырьмя способами:

с помощью тега <LINK>, указывающего на внешнюю таблицу стилей

с помощью тега <STYLE>, входящего в состав раздела заголовка документа;

используя механизм импорта (включения в текст документа) внешней таблицы стилей;

используя атрибут STYLE для конкретного элемента (элемент должен

находиться внутри тела документа).

Последний вариант является наименее предпочтительным, поскольку ot смешивает определение стиля с содержанием документа и тем самым своди! на нет все преимущества технологии CSS.

Как было отмечено выше, описание используемых стилей в отдельном файле имеет смысл в том случае, если вы планируете применять эти стили к нескольким страницам. Такой файл имеет расширение .ess и представляет собой обычный текстовый файл, содержащий описание на языке CSS необходимых стилей, Такой файл должен быть включен в ту же папку, что и остальные файлы сайта (к которым следует применить данный стиль), и размещен на Web-сервере.

Кроме того, в коде Web-страниц, которые будут использовать стили из этого файла, должна содержаться ссылка на него. Она создается с помощью тега <LINK>, располагающегося в заголовке страницы (то есть внутри тега <HEAD>):

Первые два атрибута этого тега сообщают броузеру, что на этой странице используется CSS. Третий атрибут — HREF — указывает на файл, который содержит описание стилей. В качестве значения этого атрибута указывается либо относительный путь к файлу (в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются), либо полный URL (если файл стилей находится на другом сервере).

Если описание стилей располагается непосредственно в Web-странице, то на это указывает атрибут TYPE тега <STYLE>:

<STYLE TYPE ="tcxt/css">...</STYLE>.

CSS предоставляет возможность присваивать один и тот же стиль не всем однотипным элементам страницы подряд, а избирательно. Для этого используются атрибуты CLASS или ID.

Последние версии HTML (начиная с 3.2) позволяют устанавливать указанные атрибуты для любого элемента страницы.

Атрибут CLASS применяется в том случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (в том числе разнотипных, например, для H1 и Н2).

В частности, описание стиля для класса bold_text (имя класса разработчик выбирает сам) может выглядеть следующим образом:

.bold_text {font-weiqht: bold; text-aliqn: center}.

Оно означает, что все элементы класса bold_text будут отображаться жирным шрифтом с выравниванием по центру страницы.

Чтобы применить данный стиль к конкретному элементу страницы, необходимо указать для него соответствующее значение атрибута CLASS.

Например, конструкция <Р CLASS="bold_tcxi">Teкcт параграфа</Р> позволяет присвоить конкретному параграфу стиль класса bold_text, а конструкция <Н2 CLASS="bold_Text">Teкcт заголовка</Н2> обеспечивает применение того же стиля к некоторому заголовку второго уровня.

Следует иметь в виду, что при написании названия класса в атрибуте CLASS должен учитываться регистр символов, использовавшийся при описании стиля.

Назначение стилей с помощью атрибута ID выполняется в тех случаях, когда данный стиль предполагается применить к единственному элементу страницы, имеющему уникальный идентификатор ID. Существует и чисто формальный признак, обеспечивающий различие в описании стиля класса и стиля элемента: первый начинается с точки (.), второй — с символа #.

Например, можно описать стиль #redtext {color : red} и затем использовать его для установки красного цвета для текста параграфа с идентификатором redtext:

<Р /D=«redtext»>Teкст параграфа</Р>.

Кроме того, CSS позволяет переопределять стиль для стандартных тегов HTML. Например, если создать стиль li {background-color: #FFFFFO; font-size: 14px;}, то элементы любого списка будут выводиться на красном фоне с использованием 14 кегля.

Следует отметить, что при всей универсальности языка CSS наиболее интересные эффекты от применения CSS относятся непосредственно к дизайну создаваемых Web-страниц. Речь идет о том, что при описании стиля разрешается указывать значения отступов вокруг объектов как отрицательные величины. Это позволяет накладывать один «слой» текста на другой и получать весьма привлекательные (а иногда и достаточно неожиданные) результаты. Например, на приведенном выше рис. 4.36 показан относительно простой пример использования CSS для создания визуальных эффектов на странице только с помощью шрифтов — в нем не используется вообще никакой графики.

Содержание раздела