Macromedia Dreamweaver MX

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

Что же представляют собой каскадные таблицы стилей? Как они могут по­мочь нам? Как они создаются, в конце концов? И нужно ли их исполь­зовать?

Зачем они нужны

В конце предыдущей главы был приведен пример, когда таблицы стилей могут нам здорово помочь. Вспомним его еще раз.

Вы создали сложный Web-сайт с большим количеством объемистых стра­ниц. Текст этих страниц очень сложно отформатирован: обильно использу­ются различные шрифты разных цветов и размеров, жирное и курсивное выделения и т. п. В частности, все цитаты выделены красным курсивным шрифтом. Сайт создан, опубликован и достаточно давно работает; посети­тели довольны, никаких неполадок нет, все ошибки давно исправлены, и вы о своем сайте уже, честно говоря, забыли.

Вдруг, откуда ни возьмись, — распоряжение начальства: срочно выделить цитаты на сайте еще и уменьшенным шрифтом. (Этому начальству всегда нечего делать, как давать идиотские указания...) А цитат у вас хватает на всех страницах, вдобавок они разбросаны по всему тексту так, что их нужно еще и поискать. Вспомним также, что сайт очень большой, и страницы его также велики.

Ваши действия?

Чтобы уменьшить шрифт цитаты, его необходимо выделить и выбрать в раскрывающемся списке размеров нужный пункт. Сами понимаете, это крайне трудоемко. Можно также попытаться воспользоваться мощнейшими возможностями, предлагаемыми диалоговым окном Find and Replace. Но, чтобы это сделать, надо правильно ввести подстроки для поиска и замены, для чего нужно долго экспериментировать. Наконец можно воспользоваться регулярными выражениями, но это вообще занятие не для слабонервных. Выходит, так и придется форматировать цитаты вручную?

Почему мы вынуждены так поступать? Чтобы объяснить это, надо немного рассказать о принципах написания и хранения программ и используемых ими данных.

Возьмем любую программу, например Microsoft Word. Данные этой про­граммы (документ) находятся в одном файле (с расширением doc), а сама программа — в другом (исполняемый файл ехе). Если нужно изменить про­грамму (скажем, вы получили новую версию), вы просто переписываете файл программы, не трогая данные. Если вам надо изменить данные, то вы просто откроете их в программе и измените, а сама программа останется неизмененной.

В этом случае говорят, что данные и их представление (т. е. описание пра­вил отображения этих данных или программа, отображающая эти данные) хранятся отдельно. Преимущество такого подхода в том, что мы можем за­менить представление, не трогая сами данные, или отредактировать данные, не трогая представления. Все современные программные продукты строятся на таком принципе; благодаря этому мы можем установить на свой компь­ютер новую версию программы, сохранив созданные в ней данные.

Это обычные программы. А что же HTML?

Беда HTML в том, что данные и их представление хранятся в одном файле. Более того, они представляют собой единое целое. Откройте любой HTML - файл в текстовом редакторе (например, Блокноте) и посмотрите на него. Текст перемешан с тегами форматирования самым причудливым образом. Найти какую-то нужную информацию в "сыром" HTML-коде — проблема. И еще большая проблема — изменить способ ее представления: для этого надо "перелопачивать" весь файл с риском повредить сами данные. Это очень неудобно, но что ж поделаешь — таков уж этот HTML...

И все же было бы очень неплохо создать некий набор правил форматирова­ния различных фрагментов текста в зависимости от их назначения. Этот набор правил хранился бы в отдельном файле, независимо от содержимого Web-страницы. А в HTML-файл записать только сам текст, разбитый на логические фрагменты тегами <р> и <нп>. Таким образом, и данные хранят­ся отдельно от представления, и форматированы они гораздо "прозрачнее", и нужную информацию искать значительно проще.

У такого подхода есть еще одно преимущество: становится намного легче изменять представление страниц. Скажем, если нам нужно изменить фор­матирование какого-либо типа фрагментов текста, мы просто корректируем соответствующие ему правила в файле правил. После этого Web-обозре­ватель при следующей загрузке этой страницы покажет все так, как нам на­до. Таким образом, мы можем наконец-то изменить вид наших многостра­дальных цитат редактированием всего одного файла вместо того, чтобы править все страницы.

Хорошо? А как вам понравится, если окажется, что все это существует уже достаточно давно, с 1997 года? Да-да, существует и называется каскадными таблицами стилей.

Каскадные таблицы стилей или просто таблицы стилей (CSS — Cascading Style Sheets) — это набор правил, описывающих форматирование разных фрагментов HTML-кода и хранящихся отдельно от него. Одно такое прави­ло, отображающее форматирование какого-то одного фрагмента или одно­типной группы фрагментов кода, называется стилем. Таблицы стилей опи­сываются на особом языке CSS и хранятся в особых файлах с расширением css, хотя могут быть внедрены в саму Web-страницу.

Таблицы стилей, как и многое другое, лучше представить на примере. Да­вайте рассмотрим небольшой фрагмент классического, "чистого" HTML - кода, созданного без использования таблиц стилей.

<PXFONT COLOR="#FFOOOO"XI>3to цитата. </!X/PONTX/P>

Как видите, это одна из тех цитат, которые по приказу нашего гипотетиче­ского начальства должны были "измельчать". Давайте же все-таки доставим начальству это удовольствие.

<PXFONT COLOR= "# FFO 0 0 0" SIZE="-1"XI>3to цитата. </I></FONTX/P>

С одной цитатой мы справились без труда. А если их сотня? Нет, без таб­лицы стилей тут не обойтись. Перепишем наш пример с использованием стилей.

Сначала напишем саму таблицу стилей.

.cit { font-style: italic; color: #FF0000 }

Эта таблица стилей содержит определение всего одного стиля — cit. Такой стиль, имеющий уникальное имя (чтобы Web-обозреватель мог однозначно его идентифицировать), называется стилевым классом.

Этот стиль содержит определение параметров для двух атрибутов стиля. Первый атрибут — font-style — задает "стиль" текста; в нашем случае зна­чение italic делает текст курсивом, словно бы его поместили внутрь тега <i>. Второй атрибут — color — задает цвет текста. Как видите, два атрибута стиля cit заменили оба тега: и <font>, и <i>.

Собственно, красивое форматирование текста таблицы стилей, которое вы видите здесь, совсем не обязательно. Ваша таблица стилей может выглядеть и следующим образом:

.cit {font-style:italic;color: #FF0000}

Так она получается даже компактнее — весьма немаловажное достоинство во времена господства медленных каналов связи. Но, согласитесь, красиво отформатированный вариант легче читается.

Сохраним нашу таблицу стилей в файле styles. css. И давайте перепишем наш фрагмент HTML-кода так, чтобы он использовал эту таблицу стилей.

<Р CLASS="cit">3TO цитата.</Р>

Как видите, достаточно просто добавить в тег <р> атрибут class и в качестве значения присвоить ему имя определенного нами стилевого класса, в на­шем случае cit. Теперь этот фрагмент текста будет форматироваться кур­сивным красным шрифтом уменьшенного размера.

Но, кроме того, нам еще нужно добавить в секцию HTML-заголовка (тег <head>) нашей страницы ссылку на таблицу стиля, чтобы Web-обозреватель смог ее найти. Эта ссылка будет иметь следующий вид:

CLINK REL="stylesheet" HREF="styles. css" TYPE="text/css">

Вот теперь точно все!

Вы уже, наверно, догадались, что таблицу стилей, сохраненную в отдельном файле, можно использовать во многих Web-страницах. Более того, она может находиться вообще на другом сайте. В частности, фирма Microsoft, насколько известно автору, предлагает бесплатно воспользоваться библио­текой таблиц стилей, помещенной на ее сайте. (Внимание: информация непроверенная!)

Кроме того, Web-страница может ссылаться одновременно на несколько таблиц стилей. Например, так:

CLINK REL="stylesheet" HREF="styles1.CSS">

CLINK REL="stylesheet" HREF="styles2.css">

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

Но как же в этом случае уменьшить шрифт всех цитат? Для этого достаточ­но добавить в определение стилевого класса еще один атрибут и присвоить ему соответствующее значение. В этом случае таблица стилей будет иметь такой вид (вновь вставленный код выделен полужирным шрифтом):

.cit { color: #FF0000;

Font-style: italic; font-size: smaller }

Здесь МЫ поместили В определение СТИЛЯ помещен НОВЫЙ атрибут font - size, задающий размер шрифта. И присвоили ему значение smaller, задаю­щее шрифт на одну ступень меньший, чем у родительского элемента.

И это все! Никаких изменений в коде Web-страниц, ссылающихся на эту таблицу стилей, нам делать не нужно. Достаточно было только изменить файл таблицы стилей.

Удобно? Еще бы!

А еще с помощью таблицы стилей можно изменить внешний вид любого тега HTML. Для этого нужно просто переопределить его в таблице стилей следующим образом:

I { color: #FF0000;

Font-size: smaller }

После этого все фрагменты текста, заключенные внутрь тега ci> (курсив), будут отображаться уменьшенным шрифтом красного цвета. Такой стиль называется стилем переопределения тега.

А если вы создадите такой стиль:

HI I { color: #FF0000;

Font-size: smaller }

То уменьшенным шрифтом красного цвета будет отображаться только текст, заключенный внутрь тега <1>, который, в свою очередь, находится внутри тега <hi>. Вот такой:

<Н1><1Журсивный</1> заголовок</Н1>

А следующий текст:

<1>0бычный курсив</1>

<Н2Экспериментируем с <1>курсивом</1х/Н2>

Будет отображаться как обычно.

А такой стиль:

I. cit { color: #FF0000;

Font-size: smaller }

Будет применяться только к тексту, помещенному внутрь тега <1> с атрибу­том class, установленном в cit (своеобразный гибрид стилевого класса и переопределения тега; этот стиль так и называется — гибридный), т. е. к та­кому тексту:

<1 CLASS="cit">ManeHbKHfi зеленый курсивчик</1>

Как видите, тег <i> также поддерживает атрибут class. Вообще, его поддер­живают практически все теги, "отвечающие" за видимые элементы страни­цы. Так что проблем с форматированием страниц у вас возникнуть не должно.

Есть еще один способ применения стиля к элементу страницы: воспользо­ваться атрибутом id, который также поддерживается почти всеми тегами.

<Р ID="cit">3TO цитата.</Р>

Тогда определение стиля в таблице должно выглядеть следующим образом:

#cit { font-size: smaller;

Font-style: italic }

Такой стиль называется стилем-селектором.

Конечно, в одной таблице стилей вы можете определить одновременно не­сколько стилей:

.cit { font-size: smaller;

Font-style: italic }

I { color: #00FF00 }

HI I { color: #FFO000;

Font-size: larger }

Используя стили, можно задать для текста даже такие параметры, о которых и не мечтал "чистый" HTML. Например, можно создать рамку вокруг фраг-

Мента текста или сделать так, что при наведении курсора мыши на текст он (курсор) будет менять форму. Обо всем этом будет рассказано ниже.

С помощью таблиц стилей можно форматировать не только текст. Любому элементу страницы — изображению, таблице, горизонтальной линии — мо­жет быть присвоен стилевой класс.

Например, вы можете переопределить поведение тега <body> таким образом:

BODY { background-color: #000000 }

Здесь мы задали черный цвет фона страницы с помощью нового атрибута

Background-color.

К сожалению, это справедливо в полной мере только для последних версий Web-обозревателей. В частности, в старых версиях Navigator поддержка таб­лиц стилей очень ограничена и относится, в основном, к тексту. Но по­скольку старыми версиями этой программы вряд ли пользуется много наро­ду, вы можете использовать таблицы стилей в своих страницах без опасе­ния, что их "не поймут".

В составе Dreamweaver вместе со справочным руководством по HTML по­ставляется справочник по CSS. Чтобы вызвать его на экран, сначала вызо­вите панель Reference, выбрав пункт Reference в меню Window или нажав комбинацию клавиш <Shift>+<Fl>. После этого в раскрывающемся списке

Book этой панели выберите пункт O'REILLY CSS Reference. Чтобы про­смотреть справочную информацию по какому-либо атрибуту, достаточно выбрать его имя в раскрывающемся списке Style. Например, на рис. 10.1 представлена справочная информация по уже знакомому нам атрибуту

Color.

Мы познакомились с одной из двух разновидностей таблиц стилей — внеш­ней или привязанной. О второй их разновидности, а также об альтернатив­ном способе задания стиля для элемента страницы мы сейчас узнаем.

Три способа задания стиля

Всего стандарт CSS определяет три способа задания стиля для элемента страницы. Давайте перечислим их и дадим краткое описание каждому спо­собу.

1. Внешняя (или привязанная) таблица стилей. Стили сохраняются в отдель­ном файле с расширением css и привязываются к Web-странице с помощью особого тега <ыж>. Вы уже познакомились с внешними таб­лицами стиля, так что не будем сейчас подробно на них останавливаться.

2. Внутренняя (или внедренная) таблица стилей. Таблица стилей в этом слу­чае имеет тот же самый формат, что и внешняя, но располагается в сек­ции заголовка той же Web-страницы и помещается внутрь специального тега <STYLE>.

3. Внутренние (также встроенные или внедренные) стили. Определение стиля помещается прямо в нужный тег, для чего используется специальный атрибут STYLE.

С внешними таблицами стилей вы уже познакомились. Поэтому перейдем сразу к внутренним.

Внутренняя таблица стилей по своему устройству аналогична внешней. Раз­ница между ними в том, что внутренняя таблица стилей помещается прямо в заголовке HTML-файла. И, соответственно, может быть использована только в нем.

Давайте превратим внешнюю таблицу стилей, созданную выше, во внутрен­нюю. Это проще простого.

<STYLE>

.cit { font-size: smaller;

Font-style: italic }

I { color: #00FF00 }

HI I { color: #FFO000;

Font-size: larger }

</STYLE>

Как видите, ничего радикально не изменилось. Единственное, добавился парный тег <style>, определяющий таблицу стилей. Вся эта конструкция помещается в секции заголовка Web-страницы, т. е. внутри тега cheadx Са­мо собой, внутренняя таблица стилей может быть только одна на страницу.

Обращаться к внутренней таблице стилей можно так же, как и к внешней:

<Р CLASS="cit">3TO цитата.</Р>

Вот, собственно, и все о внутренних таблицах стилей.

Внутренние стили вообще помещаются внутри тегов, определяющих тот или иной элемент страницы. Делается это с помощью атрибута style, поддер­живаемого, как и class, практически всеми тегами.

<Р STYLE="font-size: smaller; font-style: italic">3TO цитата.</P>

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

В каких случаях следует применять тот или иной способ задания стилей? На этот случай есть простое правило: выясните, где и как часто будет исполь­зован тот или иной стиль.

Если стиль необходим во многих Web-страницах, вынесите его во внешнюю таблицу стилей. Например, если вы создали стиль основного текста страни­цы, который должен быть использован на всех страницах сайта, определите его в глобальную таблицу стилей, одну на весь сайт. Если какой-то стиль применяется не во всех страницах, а в их небольшом подмножестве, опре­делите его во второстепенной таблице стилей, которая будет использована только данным подмножеством страниц. В этом случае вы можете опреде­лить весь набор необходимых стилей в одной таблице, а можете "разбро­сать" его по нескольким; во втором случае не забудьте создать ссылки на все эти таблицы.

Если стиль должен быть использован в нескольких местах одной-един - ственной Web-страницы, смело переносите его во внутреннюю таблицу сти­лей. В результате внешние таблицы стилей не будут заполняться стилями, применяемыми только в одной странице, и их файлы сохранят компакт­ность. Можно, конечно, вынести все такие стили во внешнюю таблицу, ко­торая будет использоваться единственной страницей, но такой подход неоп­тимален.

Если же стиль должен быть использован в одном-единственном месте од­ной-единственной Web-страницы, внедрите его прямо в HTML-тег. Так он будет "ближе к месту действия" и не станет загромождать таблицы стилей, как внутреннюю, так и внешние.

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

Почему "каскадные"

В одной и той же Web-странице могут использоваться и внутренние стили, и таблицы стилей обоих видов: внешние и внутренняя. При этом "в работе" будут все определенные в них стили.

Но что делать, если какой-то стиль будет определен одновременно два или три раза? Одним словом, что делать, если произойдет конфликт стилей!

В этом случае каскадные таблицы стилей оправдывают свое название. Всту­пает в действие правило каскадности, разрешающее конфликт стилей. И разрешается он столь изящно, что нельзя не восторгаться. Эх, если бы так решались все конфликты на свете!..

Давайте рассмотрим пример. Предположим, у нас есть внешняя таблица стилей.

Р { font-size: 9pt }

HI { font-size: 24pt;

Text-align: center }

.copyright { font-size: 8pt;

Font-style: italic; text-align: right }

Здесь мы переопределили внешний вид текста, отформатированного тегами <р> и <Н1>, и задали новый стиль copyright. Атрибут text-align задает вы­равнивание текста параграфа; значение center задает выравнивание по цен­тру, a right — по правому краю.

Сохраним эту таблицу стилей в файле 10.l. css. И создадим небольшую Web - страницу.

<HTML>

<HEAD>

<Т1ТЬЕ>Стили</Т1ТЬЕ>

CLINK REL="stylesheet" HREF="10.1.CSS">

<STYLE>

HI { font-size: 16pt;

Color: #QQFFQQ }

I { font-size: larger }

</STYLE>

</HEAD>

<BODY>

<Н1>Заголовок</Н1>
<Р>Параграф 1.</Р>

<Р>Параграф <1>2</1>.</Р>

<HR>

<Р CLASS="copyright">

Авторские <SPAN STYLE="font-style: normal">npaBa</SPAN>.

</Р>

</BODY>

</HTML>

Сохраним эту страничку в файле 10.l. htm. И откроем в Web-обозревателе. То, что мы увидим в его окне, показано на рис. 10.2.

Здесь автор просто перевел результирующее определение стиля, хранящееся в памяти Web-обозревателя, на понятный вам язык. Оно-то и будет приме­нено к тексту, отформатированному с использованием тега <Н1>.

Говорят, что стиль, определенный во внутренней таблице, имеет приоритет перед стилем из внешней таблицы. Аналогично, внутренний стиль, поме­щенный внутрь тега, имеет приоритет перед и внутренней, и внешней таб­лицами стилей. Это и называется каскадностъю.

Давайте рассмотрим стиль copyright.

Во внешней таблице для него были заданы курсивный шрифт размером 8 пунктов и выравнивание по правому краю. Когда мы присвоили его эле­менту, отформатированному с помощью тега <р>, стиль copyright пол­ностью заменил определение стиля для тега <р>, сделанное в той же внеш­ней таблице. Из этого следует, что стили с именем (т. е. стилевые классы и гибридные стили) имеют приоритет перед переопределениями тегов.

Теперь рассмотрим подробнее последний параграф нашей странички. Вот он:

<Р CLASS="copyright">

Авторские <SPAN STYLE="font-style: погта1">права</ЗРАЫ>.

</Р>

Здесь присутствует новый, не знакомый нам тег <span>. Этот тег позволяет выделить фрагмент какого-либо текста и произвести над ним некоторые действия, например применить стиль. Что мы и сделали — применили к фрагменту текста новый стиль, встроенный в этот тег. Мы убрали курсив­ное выделение текста, и наши установки перекрыли определение стиля copyright, сделанное во внешней таблице стилей.

Каскадность — огромное преимущество. Благодаря ему мы можем сокра­тить размеры своих таблиц стилей до минимума. Нам достаточно будет про­сто переопределить необходимые атрибуты во внутренней таблице стилей или во внутреннем стиле, чтобы изменить Web-страницу до неузнаваемости. Web-обозреватель однозначно разрешает все конфликты стилей, пользуясь правилом каскадности и приоритета. А правило это звучит просто: своя рубашка, т. е. таблица стилей, ближе к телу... простите, тегу.

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

Псевдостили гиперссылок

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

Вы уже знаете, что для каждой ¥еЬ-страницы можно задать цвет фона, тек­ста и кодировку текста. Кроме того, НТМЬ позволяет вам также сменить цвета гиперссылок, отдельно — для непосещенных, отдельно — для посе­щенных и отдельно — для активной гиперссылки. Это позволяет немного оживить ¥еЬ-сайт, сделать его не похожим на другие. Но возможности, предлагаемые псевдостилями, несравнимо шире. Вы можете менять шрифт, начертание и даже убирать надоевшее подчеркивание у активной гипер­ссылки.

Но как же это делается? Обычным переопределением стилей во внешней или внутренней таблице.

Но сначала давайте перечислим все доступные в данный момент псевдости­ли. Как видно из табл. 10.1, всего их четыре.

Теперь давайте создадим небольшой пример Web-странички, использующей псевдостили.

<HTML>

<HEAD>

<Т1ТЬЕ>Псевдостили</ТТТЪЕ>

<STYLE>

A: link { color: #СС0000;

Background-color: #FFFFFF; text-decoration: none }

A: active { color: #FFFFFF;

Background-color: #CC0000; text-decoration: none }

A: visited { color: #CC0000;

Background-color: #FFFFFF; text-decoration: line-through }

A: hover { color: #FFFFFF;

Background-color: #CC0000; text-decoration: none }

</STYLE>

</HEAD>

<BODY>

<РХА HREF="">Гиперссьшка 1</А></Р>

<РХА HREF="">Гиперссьшка 2</АХ/Р>

<РХА HREF="">Гиперссьшка 3</АХ/Р>

</BODY>

</HTML>

Сохраните эту страницу в файле 10.2.htm и откройте в Web-обозревателе. Попробуйте провести курсором мыши над любой гиперссылкой и посмот­рите, что из этого получится.

Автор не будет подробно разбирать таблицу стилей и ее атрибуты. Попро­буйте разобраться в ней сами. Учтите только, что атрибут background-color задает цвет фона текста, а атрибут text-decoratlon — подчеркивание или зачеркивание текста. Значение line-through последнего задает зачеркивание текста, а попе — отсутствие подобного "украшения".

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