4.2. Определение стилей в специальной таблице
Читая предыдущий раздел, некоторые, скорее всего, несколько раз поду мали: “Ну и где же здесь обещанное удобство? Неужели
удобнее написать <SPAN
STYLE="text-style: italic;">,
чем просто <I>?”
Рис. 4.4. Веб-страница
написанная с элементарным применением CSS
Все верно, в некоторых случаях Сев-запись действительно немного длиннее, но
мы и не утверждали, что теперь нужно использовать только CSS, ~ в некоторых
случаях можно воспользоваться и старыми тегами, ничего в этом предосудительного
нет. Однако с помощью CSS мы имеем, во-первых, гораздо более широкие
возможности, а во-вторых, получаем удобство работы над собственно стилями. В предыдущем
разделе вы это удобство почувствовать не могли, поскольку в учебных целях мы
записывали все свойства стилей как значения атрибута STYLE=. Этот способ широко
применяется, но лишь в тех случаях, когда нужно применить какой-либо стиль к
отдельно взятому фрагменту. А в большинстве случаев используют так называемые
таблицы, стилей.
Вы, наверное, обратили внимание на то, что в предыдущем примере есть много
повторений стилевых свойств. Повторяющиеся свойства можно определить для
каждого тега HTML заранее, и они будут впоследствии применяться к нему
автоматически.
Стили элементов
Таблица стилей обычно располагается в заголовке HTML-документа, в разделе <HEAD>. Она занимает место
между тегами <STYLE> и </STYLE>.
Синтаксис таблицы стилей таков. Вы пишете имя элемента HTML, для которого
определяете стиль, а после него следует блок определения стиля, заключенный в
фигурные скобки. Например, в нашем примере можно написать так:
<STYLE> BODY { background-color: #ВАВААО; color: rgb(29,29,24); }
</STYLE>
Пробелы здесь не имеют никакого значения, так же, как и переводы строк.
После этого в самом тексте HTML-документа достаточно указать тег <BODY>, и к нему
автоматически будут применены данные цвета фона и текста.
Пока что мы вроде бы не получили никакой видимой экономии, хотя скоро вы
увидите, что имеет смысл располагать стилевые свойства <BODY> именно в таблице стилей. Чтобы
продемонстрировать экономию, пойдем дальше. В нашем примере мы три раза
выравнивали заголовки по центру (еще хорошо, что три, а не пятьдесят шесть).
Вместо этого можно просто написать в таб
лице стилей:
Н1,Н2 { text-align: center; }
и после этого просто указывать в документе теги <Н1 > или <Н2>,
содержи мое которых будет автоматически центрироваться. Обратите внимание на
то, что в таблице стилей, чтобы определить стиль сразу для нескольких
элементов, мы перечислили их через запятую.
Если вы помните, у нас еще оставались в теге <BODY> три “отмененных” атрибута: LINK=, ALINK= и
VLINK=. Вместо них рекомендуется определить стили для различных псевдоклассов элемента <А>. Это делается так:
A:link,A:visited
{ color: #634438; } A:active { color: black; }
Как видите, для элемента <А>
определены три псевдокласса (имена кото рых отделяются двоеточием): link — для гиперссылок, visited —
для посе щенных гиперссылок и active
— для активных. Кроме того, во второй версии CSS (CSS Level
2) для тега<А> определены еще псевдоклассы hover (гиперссылка,
над которой находится указатель мыши) и focus (выбран
ная
гиперссылка). Однако в броузере Internet Explorer версии 5
поддерживается только первый из них. Например, если написать
A:hover { color: white; }
то при наведении указателя мыши на ссылку она будет подсвечиваться белым
цветом. Это уже похоже на динамическое взаимодействие с пользователем!'
Далее, в нашем примере мы два раза определяли одинаковый стиль для
горизонтальной линии. Проще, конечно, написать в таблице стилей:
HR { margin-top: 24px; width: 75%; }
и потом в текст документа вставлять только тег <HR>, и тогда, если не указано иное, линия
получится такой, какой нужно.
Стили классов
Все это хорошо, конечно, но как быть дальше? Ведь в тексте нашего примера
несколько раз (в данном случае два, но могло бы быть и гораздо больше!)
определяется один и тот же стиль для текста эпиграфа, другой стиль для
основного текста и третий для подписи к эпиграфу... Хорошо бы тоже определить
их в таблице стилей, однако в нашем 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>