Осваиваем каскадные таблицы стилей

Этой статьей мы начнем ряд практических занятий, посвященных каскадным таблицам стилей (cascading style sheets, CSS), которые используются в HTML-документах для управления визуальным представлением информации. Основная цель, которую преследует данный миницикл (автор планирует посвятить данной теме не более 3 статей), дать теоретическую и практическую основу для рассмотрения технологии Dynamic HTML, базирующейся на CSS и скриптовых языках и позволяет создавать HTML-страницы содержимое которых может изменяться после их полной загрузки в браузер.
План данного мини-цикла таков: в этой статье мы раcсмотрим некоторые общие вопросы использования таблиц стилей, затем, в следующем номере, обратимся к конкретным примерам, а завершим наш разговор обсуждением роли таблиц стилей в HTML 4.0 и технологии Dynamic HTML.
В силу того что спецификация CSS-1 наиболее полным образом представлена в браузере Microsoft Internet Explorer 4.0, мы будем рассматривать примеры использования таблиц стилей именно в этом браузере.

Что такое таблицы стилей

Изначально язык HTML разрабатывался для того, чтобы обеспечить способы задания структуры документа и его основных элементов — заголовка, основного текста, списков и т.п. Таким образом, сам язык HTML не давал авторам действительно полного контроля над тем, как создаваемый документ будет выглядеть в браузере. Спустя некоторое время стали появляться дополнительные тэги, позволявшие описывать именно визуальные аспекты документов, — к этому приложила руку и фирма Netscape и фирма Microsoft. Это внесло определенную путаницу, причем не столько из-за того, что те или иные расширения языка HTML поддерживались только на данной платформе, сколько благодаря тому, что была нарушена сама концепция языка HTML. Все-таки структуризация документа и его визуализация — две совершенно разные вещи.
Чтобы поправить сложившуюся ситуацию, комитет W3C принял спецификацию, обеспечивавшую возможность задания именно визуального представления документа. Такая спецификация получила название Cascading Style Sheets, level 1. Она доступна на Web-узле комитета W3C по адресу:

http://www.w3.org/TR/REC-CSS1-961217

Таблицы стилей позволяют авторам задавать такие характеристики, как отступы, цвета, фоновые изображения, шрифты, и распространяются как на весь документ, так и на его отдельные элементы — параграфы, списки, таблицы и т.п. Новая спецификация HTML 4.0 предлагает например, даже использовать таблицы стилей вместо большинства атрибутов тэгов, описывающих визуальное представление того или иного элемента HTML-документа.
Спецификация Cascading Style Sheets, level 1, описывает более 70 атрибутов, которые могут использоваться в тэгах языка HTML. В Microsoft Internet Explorer 4.0 полностью поддерживается данная спецификация, ряд расширений, предложенных Cascading Style Sheets, level 2, таких, как фильтры и курсоры, а также онлайновые стили, описанные в спецификации HTML 4.0.

Таблицы стилей на примере

Рассмотрим следующий пример. Пусть у нас имеется документ, в котором основной заголовок описан тэгом <Н1>, заголовки разделов — тэгом <Н2>, а сам текст тэгом <Н5>.

Пример1.
Предположим, что данный документ занимает довольно большой объем и нам необходимо изменить цвет текста всех параграфов, описываемых тэгами <Н5>. Это рутинная работа, которая до появления таблиц стилей заняла бы большое количество времени.
Если же мы оформим все используемые в документе тэги <Нх> в виде таблицы стилей:

<style TYPE="text/css">

H1     {COLOR: black;font-style: normal}
H2     {COLOR: black;font-style: normal}
H5     {COLOR: black;font-style: normal}
</style>

и включим ее в состав нашего документа перед блоком , то для изменения цвета всех параграфов, описываемых тэгами <Н5>, нам нужно будет всего лишь изменить значение атрибута font-color в таблице;
Пример2.

<style TYPE="text/css">
H1     {COLOR: black;font-style: normal}
H2     {COLOR: black;font-style: normal}
H5     {COLOR: blue;font-style: normal}
</style>

Изменение цвета произойдет по всему документу для всего текста,описанного тегами<h5>.Если далее мы захотим, чтобы заголовки <h2>имели цветовой фон,мы просто добавляем в таблице стилей соответствующий атрибут:
Пример3.

<style TYPE="text/css>
H1     {COLOR: black;font-style: normal}
H2     {OLOR: black;font-style: normal;background:yellow}
H5     {COLOR: black;font-style: normal}
</style>

Естественно, этого же эффекта можно достигнуть использовав таблицы, но представьте себе что вместо изменения всего одной строки вам нужно n-e число раз написать <TABLE><TR><TD bgcolor="yellow">... </TD></TR></TABLE> Помимо достаточно очевидного упрощения визуального представления документов таблицы стилей позволяет достигать различных эффектов,практически не реализуемых просто средствами языка HTML. На показано,как средствами таблиц стилей можно наложить один текст на другой.
Пример4.
Текст HTML-документа,показанного в браузере,выглядит следующим образом:

<html>
<head>
<title>Heading 1</title>
<style type="text/css">
BODY {color       : orange;
      font-family : tahoma;
      bacground   : black;}
.style1 {color      : white;
         margin-top : -110px;
         font-family: tahoma;
         font-size  : 48px;
         text-align : center;}
.style2 {font-family: tahoma;
         font-size  : 100px;
         font-weigh : bold;
         margin-top : 25px;
         text-align : center;}
</style>
</head>
<body>
<p align="center">
Это-обычный текст,стиль которого задан стилем тега BODY
</p>
<span class="style2">
<p>Таблицы стилей</p>
</span>
<div class="style1">
<p>
Могут использоваться для достижения различных
визуальных эффектов
</>
</div>
</body>
<html>

Создание таблиц стилей

Давайте рассмотрим основные правила создания таблиц стилей.

Синтаксис:

При создании таблиц стилей от вас требуется нестолько знание языка HTML,сколько понимание основных принципов терминологии.Так,все объявления стилей называют правилами(rules).Например,правило для мзменения цвета всего текста,описанного тегом <h2>,на синий будет выглядеть так:
<h2>{color: blue;}
Правила,в свою очередь,состоят из двух частей-селектора и описателя. Селектором называется элемент,к которому применяется данное правило,-H2 внашем примере,а описателем-часть правила,задающая новые атрибуты селектора.Описатель также состоит из двух частей-атрибута и значения.Атрибут одну из визуальных характеристик селектора. Таким образом,в нашем примере.
Все правила описываются в следующем формате:

Тег {атрибут: значение}

Возможно задание одноименных атрибутов одновременно для нескольких тэгов:

H2 H3 H4 {color: blue;}

Помимо группировки тэгов мы также можем группировать атрибуты:

H2 {color: blue;
    background: yellow;
    font-size : 20px;}

Здесь мы указываем, что все заголовки <Н2> должны отображаться синим цветом на желтом фоне шрифтом размером в 20 пикселов. Группируя атрибуты, не забывайте указывать между ними символ ";" а также следите за парностью открывающей и закрывающей фигурных скобок.

Включение таблиц стилей в документы

Для включения таблиц стилей в HTML-документы существует три различных способа, рассматриваемых ниже.

Использование тэга

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

<LINK REL=STYLESHEET TYPE="text/css"
   HREF="http://www.cpress.ru/style/main.css" TITLE="mainstyle">

Это обеспечивает ссылку на внешнюю таблицу стилей main.css, заданную атрибутом HREF тэга . Тип ссылки задается атрибутом TYPE, необязательный атрибут TITLE задает описание таблицы стилей. Файл, в котором располагается таблица стилей, обычно имеет расширение .css и содержит описание стилей, которые предполагается использовать в данном документе. Например, файл с таблицей стилей может иметь следующее содержание:

BODY         {color : orange;
         font-family: tahoma;
          background: black;}
.style1            {color: white;
               margin-top: -110px;
              font-family: tahoma;
                font-size: 48px;
               text-align: center;}
.style2       font-family: tahoma;
                font-size: 110px;
               font-weigh: bold;
               margin-top: 25px;
               text-align: center;}

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

Использование тэга <STYLE>

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

<style type="text/css">
<!-
.style1            {color: white;
               margin-top: -110px;
              font-family: tahoma;
                font-size: 48px;
               text-align: center;}
->
</style>

С использованием пары тэгов <STYLE>...</STYLE> возникает одна проблема. Все дело в том, что мы должны указывать таблицу стилей в каждом документе. Это увеличивает размер документа. Обычно создаваемые таким образом таблицы стилей используют для изначальной разработки стиля ряда документов, а затем выносят их в отдельный css-файл и подключают его с помощью тэга .
Тэг <STYLE> может иметь ряд атрибутов. К ним относятся: DIR, MEDIA, ID, LANG, TITLE и TYPE. Браузер Netscape Navigator 4 поддерживает также атрибут SRC, который может использоваться для указания внешнего css-файла. Это используется для того, чтобы компенсировать отсутствие поддержки директивы ©import.
Атрибуты DIR, ID, LANG и TITLE являются общими для всех тэгов HTML 4.0 и не несут никакой специфической информации. Атрибут MEDIA позволяет задать способ вывода информации. Возможны следующие значения этого тэга:

MEDIA=SCREEN |PRINT|PROJECTION|BRAITLE|SPEECH|ALL

Атрибут TYPE задает MIME-тип информации, содержащейся в таблице стилей. В настоящее время это может быть:

TYPE="text/css"

для обычных таблиц стилей и

TYPE="text/javascript"

для таблиц стилей на JavaScrip.

Использование директивы @import

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

@import url (http://www.cpress.ru/style/main.css);

В настоящее время директива @import поддерживается
только в Internet Explorer 4.0.

Применение таблиц стилей

После того как мы научились включать таблицы стилей в документы, мы можем использовать сами стили. Это делается с помощью классов.

Классы

Как вы могли видеть в приведенном выше примере, мы использовали атрибут CLASS для указания определенного стиля элемента:

<div class="style1">
<p>
Могут использоваться для достижнния различны 
визуальных эффектов
</p>
</div>

А сам класс был описан в таблице стилей следующим образом:

.style1            {color: white;
               margin-top: -110px;
              font-family: tahoma;
                font-size: 48px;
               text-align: center;}

Все это в броузере выглядит так: Пример5.
Точка перед названием класса указывает на то, что мы описываем класс. Мы можем создавать классы для обычных тэгов и применять классы к различным тэгам. Для этого используется атрибут CLASS, который имеется у всех тэгов языка HTML. Рассмотрим еще один пример. Пусть мы описали стиль тэга <Н2> так:

H2 {color: blue;
    font-size: 20px;}

Тогда мы можем ввести еще один класс для данного тэга, например yellow:

H2.yellow {background: yellow;}

и использовать его следующим образом:

<body>
<h2>Это-заголовок уровня 2 <h2>
<h2 class="yellow">А это-заголовок уровня 2 класса .yellow</h2>  
</body>

Если же мы зададим класс как отдельный элемент:

.yellow {background: yellow;}

то мы сможем использовать его не только с тэгом <Н2>, как в предыдущем примере, а вообще с любым тэгом:

<body>
<h2 class="yellow">Это-заголовок уровня 2 <h2>
<h3 class="yellow">Это-заголовок уровня 3 <h3>
<h4 class="yellow">Это-заголовок уровня 4 <h4>

В то время как атрибут CLASS может использоваться совместно с любыми другими тегами языка HTML, существует два специальных тега, которые не форматируют документ, а используются для задания определенных областей в рамках документа. Тэг<DIV> Этот тэг используется для задания области в рамках документа, к которой применяется определенный стиль. Все, что располагается между тэгами <DIV> и </DIV>, рассматривается браузером как один элемент. Например:

<body>
<h3>
Данный документ состоит из текста описанного тегом h3,
а также области,
</h3>
<DIV CLASS="YELLOW">,к которй применен класс .yellow<DIV>
<h3>
и остального текста, к которому также применен тег h3.
</h3>  
<body>

Тег <SPAN>

Этот тэг используется для выделения определенного текста внутри параграфа. Например, мы можем применить класс .yellow к следующему предложению:

<body>
<h3>
В данном параграфе, который описан с помощью тега h3, 
то есть относится к заголовку 3-го уровня, есть
<SPAN CLASS="YELLOW"> область текста, к которой применен 
класс .yellow.</SPAN> 
Весь остальной текст отображается с помощью атрибутов по умолчанию,
используемых для тега h3.
</body>
</h3>

Указание стилей для отдельных тэгов

Существует еще один способ применения таблиц стилей — с помощью атрибута STYLE, который может присутствовать у любого HTML-тэга. Данный способ очень гибок и прост в использовании, но имеет свой недостаток — если мы захотим изменить ряд стилей, нам придется изменять их не в общей таблице, а у каждого тэга. В следующем примере показано, как задать красный цвет текста у обычного параграфа:

<P style="color: red">
Этот параграф имеет красный цвет 
</p> 
При использовании атрибута STYLE возможно указание и нескольких атрибутов стиля. Например:
<P style="color: red; font-size: 20px">
Этот параграф имеет красный цвет и размер 20 пикселов.
</p> 

В следующей статье мы рассмотрим основные группы
атрибутов и отдельные атрибуты, затем поговорим об
объекте STYLE, управлении стилями из JavaScript и разберем два подхода к этой технологии, предлагаемых
фирмами Microsoft и Netscape.

СЛЕДИТЕ ЗА ПОПОЛНЕНИЕМ ЭТОЙ СТРАНИЦЫ

Интернет магазин автомобильных запчастей