Создание сайтов (самоучитель)
4.2 Определение стилей в специальной таблице Читая предыдущий раздел, некоторые, скорее всего, несколько раз поду мали: "Ну и где же здесь обещанное удобство? Неужели удобнее написать <SPAN STYLE="text-style: italic;>, чем просто <I>?"
Рис.4.4. Веб-страница написанная с элементарным применением CSS
Все верно, в некоторых случаях Сев-запись действительно немного длиннее, но мы и не утверждали, что теперь нужно использовать только CSS, ~ в некоторых случаях можно воспользоваться и старыми тегами, ничего в этом предосудительного нет. Однако с помощью CSS мы имеем, во-первых, гораздо более широкие возможности, а во-вторых, получаем удобство работы над собственно стилями. В предыдущем разделе вы это удобство почувствовать не могли, поскольку в учебных целях мы записывали все свойства стилей как значения атрибута STYLE=. Этот способ широко применяется, но лишь в тех случаях, когда нужно применить какой-либо стиль к отдельно взятому фрагменту. А в большинстве случаев используют так называемые таблицы, стилей.
Вы, наверное, обратили внимание на то, что в предыдущем примере есть много повторений стилевых свойств. Повторяющиеся свойства можно определить для каждого тега html заранее, и они будут впоследствии применяться к нему автоматически.
Стили элементов
Таблица стилей обычно располагается в заголовке html-документа, в разделе <head>. Она занимает место между тегами <STYLE>и </STYLE>. Синтаксис таблицы стилей таков. Вы пишете имя элемента html, для которого определяете стиль, а после него следует блок определения стиля, заключенный в фигурные скобки. Например, в нашем примере можно написать так:
<STYLE>BODY{background:#ВАВААО; color:rgb(29,29,24);}
</STYLE>
Пробелы здесь не имеют никакого значения, так же, как и переводы строк. После этого в самом тексте html-документа достаточно указать тег <body>, и к нему автоматически будут применены данные цвета фона и текста.
Пока что мы вроде бы не получили никакой видимой экономии, хотя скоро вы увидите, что имеет смысл располагать стилевые свойства <body> именно в таблице стилей. Чтобы продемонстрировать экономию, пойдем дальше. В нашем примере мы 3 раза выравнивали заголовки по центру (еще хорошо, что три, а не пятьдесят шесть). Вместо этого можно просто написать в таб лице стилей:
Н1,Н2 { text-align: center;}
и после этого просто указывать в документе теги <Н1 > или <Н2>, содержи мое которых будет автоматически центрироваться. Обратите внимание на то, что в таблице стилей, чтобы определить стиль сразу для нескольких элементов, мы перечислили их через запятую.
Если вы помните, у нас еще оставались в теге <body> три "отмененных" атрибута: LINK=, ALINK= и VLINK=. Вместо них рекомендуется определить стили для различных псевдоклассов элемента <А>. Это делается так:
A:link,A:visited {color:#634438;} A:active {color:black;}
Как видите, для элемента <А> определены 3 псевдокласса (имена кото рых отделяются двоеточием): 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= или задавать другие атрибуты.
Итак, у нас должно быть 3 различных стилевых варианта для элемента<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:black; )
Тогда элемент по имени cool (например<DIV ID="cool> ) будет наделен указанными свойствами (в данном случае белым цветом символов на черном фоне). Только не забывайте, что в каждом html-документе каждый идентификатор ID= должен быть уникальным, т.е. не может быть двух и более элементов с одинаковым значением атрибута ID=.
Ладно, это мы немного отвлеклись, так что давайте посмотрим на новый вариант странички Ивана целиком.
<!DOCTYPE html><html><head>
<ТITLE>Домашняя страница Сергея Cepreeвa</title>
<STYLE>
<!--
BODY{background:#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>.
Внешние стилевые таблицы
Еще 1 замечательное свойство стилевых таблиц заключается в том, что с помощью одной таблицы, находящейся в отдельной файле, можно задавать стили для целого набора веб-страниц. Это, кстати, очень важно при разработке больших сайтов, поскольку, во-первых, способствует сохра нению единства стиля, а во-вторых, предоставляет возможность быстро изменить что-либо сразу во многих файлах проекта. Для этого следует просто написать всю таблицу стилей (без тегов <STYLE>и </STYLE> ) в отдельном файле с расширением .css, а затем "подключить" ее во всех html- документах, которые должны ее использовать. Например, если файл таблицы стилей называется mainstyle.css, то в раздел <head> каждого из использующих ее html-документов, нужно вставить такую строку:
<LINK REL="Stylesheet" HREF="mainstyle.css" tYPE="text/css>
Атрибут TYPE= указывать не обязательно, но лучше это сделать (кстати, это можно делать и в теге <STYLE> ). Во-первых, это признак хорошего тона, а потом мало ли что - кдруг пользователю, к примеру, попадется какой-нибудь сумасшедший браузер, использующий для стилевых таблиц по умолчанию не CSS, а, допустим, JASS.
Есть и другой способ "подключения" стилевой таблицы из кнешнего файла - директива @import. Она употребляется следующим образом:
<STYLE>@import url (mainstyle.css); </STYLE>
Как видите, эта директива должна находится между тегами <STYLE>и </STYLE>, поскольку она не является элементом языка html (как тег <LINK> ). Ее использование менее предпочтительно, поскольку браузеры могут интерпретировать ее по-разному.
