Оформление веб-страницы с использованием стилей
Стили классов
Все это хорошо, конечно, но как быть дальше? Ведь в тексте нашего примера несколько раз (в данном случае два, но могло бы быть и гораздо больше!) определяется один и тот же стиль для текста эпиграфа, другой стиль для основного текста и третий для подписи к эпиграфу… Хорошо бы тоже определить их в таблице стилей, однако в нашем HTML--документе все они расположены внутри элементов <DIV>, поэтому надо определить несколько различных стилей для одного элемента. Оказывается, это тоже можно сделать! Для этого, правда, придется использовать несколько более длинную запись, однако это все равно удобнее и короче, чем всякий раз определять атрибут STYLE= или задавать другие атрибуты.
Итак, у нас должно быть три различных стилевых варианта для элемента <DIV>. В CSS они называются классами. Чтобы отличить эти элементы друг от друга, у них придется установить атрибут CLASS=, приблизительно так:
<DIV CLASS="epig">...</DIV><DIV CLASS="pdps">...</DIV><DIV CLASS="ab">...</DIV>Имена классов выбираются произвольно. В данном случае мы образовали их от слов “эпиграф”, “подпись” и “абзац”. В таблице стилей эти классы можно определить так:
<STYLE> 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>Между прочим, другие элементы (причем практически все) также могут иметь атрибут CU\SS=. Если надо, чтобы определение класса было доступно всем элементам, его можно определить так:
<STYLE> pdps { font-style: italic; text-align: right; } </STYLE>То есть, при определении не указывается имя конкретного элемента HTML, а указывается только имя класса, которое в любом случае начинается с точки (но только в таблице стилей, а при обращении к классу в тексте документа точка не ставится). В данном примере мы определяли классы только для элемента <DIV>. Более того, в таком определении предполагается (то есть мы как бы помним), что элемент класса pdps будет вложен в элемент класса epig. Хотя, с другой стороны, наше определение pdps годится не только для подписи под эпиграфом, но и для любой другой, если она вдруг потребуется.
Кстати, кроме стилевых свойств элементов HTML и классов, мы можем определять свойства так называемых идентификаторов. Дело в том, что у каждого элемента HTML может быть атрибут ID= – его уникальное имя в данном документе (этот атрибут играет большую роль при динамическом взаимодействии с пользователем, так что с ним нам еще придется не раз столкнуться). Если вы хотите определить в таблице стилей свойства для элемента, имеющего определенный идентификатор ID=, это можно сделать так:
<STYLE> #cool { color: white; background-color: black; ) </STYLE>Тогда элемент по имени cool (например <DIV ID="cool">) будет наделен указанными свойствами (в данном случае белым цветом символов на черном фоне). Только не забывайте, что в каждом HTML-документе каждый идентификатор ID= должен быть уникальным, то есть не может быть двух и более элементов с одинаковым значением атрибута ID=.
Ладно, это мы немного отвлеклись, так что давайте посмотрим на новый вариант странички Сергея Сергеева целиком.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>Домашняя страница Сергея Сергеева</TITLE> <STYLE> <!-- BODY { background-color: #BABAA0; 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> <H1>Домашняя страница Сергея Сергеева</H1> <DIV STYLE="text-align: center;"> <A HREF="#skazka">СКАЗКА «Иван-царевич и серый заяц»</A> <A HREF="#rasskaz">Рассказ«МОЛОТОК»</A> </DIV> <BR> <DIV STYLE="font-size: larger;"> <SPAN STYLE="font-weight: bold;">Сергей Сергеев</SPAN> Smdash; писатель-авангардист, автор 20 рассказов. <BR>В жизни большой любитель собак и компьютерных игр. <BR> <BR>Некоторые его рассказы вы можете прочитать прямо здесь.</DIV> <HR> <H2><A NAME="skazka">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ</A><BR> <SPAN STYLE="font-style: italic; ">СКАЗКА</SPAN></H2> <DIV STYLE="text-align: right ;"> <DIV CLASS="epig"> Ну, погоди!.. <DIV CLASS="pdps">(Из мультфильма)</DIV> </DIV> </DIV> <BR> <DIV CLASS="ab">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV> <DIV CLASS="ab">Долго ли, коротко ли, ...</DIV> <DIV CLASS="ab">...И они жили долго и счастливо и умерли в один день.</DIV> <HR> <H2><A NAME="rasskaz">МОЛОТОК</A> <BR> <SPAN STYLE="font-style: italic;">рассказ</SPAN> </H2> <DIV STYLE="text-align: right;"> <DIV CLASS="epig">Мы кузнецы, и дух наш молод. <DIV CLASS="pdps">(Из песни)</DIV> </DIV> </DIV> <BR> <DIV CLASS="ab">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа)</DIV></BODY> </HTML>