Стили классов
Все это хорошо, конечно, но как быть дальше? Ведь в тексте нашего примера несколько раз (в данном случае два, но могло бы быть и гораздо больше!) определяется один и тот же стиль для текста эпиграфа, другой стиль для основного текста и третий для подписи к эпиграфу... Хорошо бы тоже определить их в таблице стилей, однако в нашем HTML--документе все они расположены внутри элементов
<DIV>
, поэтому надо определить несколько различных стилей для одного элемента. Оказывается, это тоже можно сделать! Для этого, правда, придется использовать несколько более длинную запись, однако это все равно удобнее и короче, чем всякий раз определять атрибут STYLE= или задавать другие атрибуты.
Итак, у нас должно быть три различных стилевых варианта для элемента
<DIV>
. В CSS они называются классами. Чтобы отличить эти элементы друг от друга, у них придется установить атрибут CLASS=, приблизительно так:
<DIV CLASS="epig">...</DIV> <DIV CLASS="pdps">...</DIV> <DIV CLASS="ab">...</DIV>
Имена классов выбираются произвольно. В данном случае мы образовали их от слов “эпиграф”, “подпись” и “абзац”. В таблице стилей эти классы можно определить так:
DIV.epig { text-align: justify; font-size: smaller; width: 130; }
DIV.pdps { font-style: italic;
text-align: right; }
DIV.ab { text-align: justify;
text-indent: 2em; }
Между прочим, другие элементы (причем практически все) также могут иметь атрибут CU\SS=. Если надо, чтобы определение класса было доступно всем элементам, его можно определить так:
pdps { font-style: italic;
text-align: right; }
То есть, при определении не указывается имя конкретного элемента
HTML,
а указывается только имя класса, которое в любом случае начинается с точки (но только в таблице стилей, а при обращении к классу в тексте документа точка не ставится). В данном примере мы определяли классы только для элемента <DIV>. Более того, в таком определении предполагается (то есть мы как бы помним), что элемент класса pdps будет вложен в элемент класса epig.
Хотя, с другой стороны, наше определение pdps годится не только для подписи под эпиграфом, но и для любой другой, если она вдруг потребуется.
Кстати, кроме стилевых свойств элементов
HTML
и классов, мы можем определять свойства так называемых
идентификаторов.
Дело в том, что у каждого элемента
HTML
может быть атрибут ID= — его уникальное имя в данном документе (этот атрибут играет большую роль при динамическом взаимодействии с пользователем, так что с ним нам еще придется не раз столкнуться). Если вы хотите определить в таблице стилей свойства для элемента, имеющего определенный идентификатор ID=, это можно сделать так:
#соо1 { color: white; background-color: black; )
Тогда элемент по имени cool (например
<DIV ID="cool">
) будет наделен указанными свойствами (в данном случае белым цветом символов на черном фоне). Только не забывайте, что в каждом HTML-документе каждый идентификатор ID= должен быть уникальным, то есть не может быть двух и более элементов с одинаковым значением атрибута ID=.
Ладно, это мы немного отвлеклись, так что давайте посмотрим на новый вариант странички Сергея Сергеева целиком.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТITLE>Домашняя страница Сергея Cepreeвa</TITLE>
<STYLE>
<!--
BODY { background-color: #BABAAO;
color: rgb(29,29,24);
}
H1,H2 { text-align: center;
} A:link,A:visited { color: #634438;
} A:active { color: black;
} HR { margin-top: 24px;
width: 75%; ) DIV.epig { text-align: justify;
font-size: smaller;
width: 130; } DIV.pdps { font-style: 'italic;
text-align: right;
} DIV.ab { text-align: justify;
text-indent: 2em; }
-->
</STYLE>
</HEAD>
<BODY> <Н1>Домашняя страница Сергея Сергеева</Н1>
<DIV STYLE="text-align: center;"><A HREF="#skazka">CKА3KА &1аquо;Иван-царевич и серый зaяц»</A>
<А HREF="#rasskaz">PaccKa3 «МОЛОТОK»</A>
</DIV>
<BR>
<DIV STYLE="font-size: larger;">
<SPAN STYLE="font-weight:
bold;">Сергей Сергеев</SPAN> Smdash; писатель-авангардист, автор 20 рассказов.<BR>
В жизни большой любитель собак и компьютерных игр.<ВR>
<ВR>
Некоторые его рассказы вы можете прочитать прямо здесь.</DIV>
<HR>
<Н2><А NAME="skazka">ИBAH-ЦAPEВИЧ И СЕРЫЙ ЗАЯЦ</А><ВR>
<SPAN STYLE="font-style: italic; ">CKА3KА</SPAN></H2>
<DIV STYLE="text-align: right
;">
<DIV CLASS="epig">
Ну, погоди!..
<DIV CLASS="pdps">(Из мультфильма)</DIV>
</DIV>
</DIV> <BR>
<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV>
<DIV CLASS="ab">Дoлгo ли, коротко ли, ...</DIV>
<DIV CLASS="ab">...И они жили долго и счастливо и умерли в один день.</DIV>
<HR>
<Н2><А NAME="rasskaz">МОЛOTOK</A>
<BR>
<SPAN STYLE="font-style: italic; ">paccкaз</SPAN>
</H2>
<DIV STYLE="text-align: right;">
<DIV CLASS="epig"> Мы кузнецы, и дух наш молод. <DIV CLASS="pdps">(Из песни)</DIV>
</DIV>
</DIV>
<BR>
<DIV CLASS="ab">Этo случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>
</BODY>
</HTML>
При этом результат получится таким же, как и в предыдущем случае, просто сама запись намного компактнее, да и удобнее.
Кроме того, в ней легче ориентироваться. Взглянув на исходный текст, мы сразу можем по имени класса найти, где абзац, а где эпиграф. В предыдущем примере выискивать нужные места текста среди нагромождения стилевых свойств было гораздо труднее.
Наверное, вы обратили внимание на странные сочетания
<!--
и
-->
, которые появились в нашем примере около тегов
<STYLE>
. Вообще говоря, в такие символьные сочетания (это, кстати, тоже теги) в HTML-докумен-тах заключают комментарии. То есть все, что находится между этими тегами, игнорируется броузером. Но в данном случае мы пользуемся тем, что внутри STYLE -блока действуют законы синтаксиса не HTML, a CSS. Так что те броузеры, которые “понимают” тег
<STYLE>
и, следовательно, CSS, “поймут” и то, что в данном случае это не символы комментария, и проинтерпретируют таблицу стилей, как положено. А те броузеры (в основном, старые), которые CSS не понимают, воспримут содержимое таблицы стилей как комментарий. (Если не поставить теги комментариев, то эти броузеры, проигнорировав тег
<STYLE>
как непонятный им, скорее всего станут выводить на экран все содержимое таблицы стилей.) Таким же образом мы будем “обманывать” старые броузеры при использовании тега
<SCRIPT>.