Что дальше?

Вот мы и познакомились с таблицами стилей CSS. В качестве домашнего задания автор советует вам сделать что-нибудь конкретное, чтобы узнать их еще ближе, так сказать, "подержать в руках". Вы можете, скажем, переделать сайт Sample site 3 с использованием таблиц стилей. Или поэкспериментировать с другими Web-страницами.

О стилях рассказывать больше нечего (ну, почти нечего). Существует фирменная документация, имеется описание стандарта CSS на сайте WWWC http://www.w3c.org, так что дополнительную информацию по этому вопросу вы найдете. И, наконец, ничто не может дать вам так много, как личный опыт.

А теперь давайте еще раз взглянем на наши страницы. Да-а-а... Не очень-то и много возможностей дает нам HTML, чтобы расположить их элементы так, как нам хочется. Фреймы, таблицы, стили — что только мы не использовали, и все равно остаются какие-то ограничения. А нам хочется просто задать координаты и размеры, скажем, фрагмента текста, чтобы он точно "лег" на это место без всяких там фреймов и таблиц. Как это делают дизайнеры-полиграфисты.

Значит, хочется... Что ж, читайте дальше!

Дополнительные параметры

Стандарт CSS предоставляет целый набор дополнительных атрибутов, задающих особые параметры элементов страницы. Эти параметры задаются на вкладке Extensions диалогового окна CSS Style Definition, которая показана на Рисунок 10.23.

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

ГЛАВА 10. Каскадные таблицы стилей

Каскадные таблицы стилей CSS — это довольно позднее нововведение. Если сам HTML появился в 1989 году, то таблицы стилей — только в 1997. Мало того, таблицы стилей не считаются частью HTML, а "гуляют сами по себе", как кошка Киплинга. И если вы зайдете на сайт WWWC (http:// www.w3c.org), то увидите, что на описание HTML ведет одна гиперссылка, а на описание CSS — другая.

Связано это с тем, что WWW была создана учеными как средство для обмена текстовыми документами, a HTML был языком, с помощью которого создавали эти документы. Для ученых главным было содержимое документа, а не его оформление. Поэтому первые версии HTML не включали даже средств для размещения на Web-страницах графических изображений, не то что для сложного форматирования текста. Но время шло, и в Интернет пришел обыватель, тотчас потребовавший от Web-дизайнеров "сделать ему красиво". А Web-дизайнеры, в свою очередь, потребовали от разработчиков стандарта HTML средств, облегчающих им работу.

Так и возникли каскадные таблицы стилей. В настоящее время приняты спецификации CSS1 и CSS2, идет работа над CSS3. Однако современные Web-обозреватели, да и то самые последние их версии, полностью поддерживают только CSS1 и, частично, CSS2.

Но даже стандарт CSS1 таблиц стилей предлагает такое, что вы ахнете. Куда там HTML с его примитивным форматированием!

Недостатки таблиц стилей и их преодоление

Настала пора поговорить о недостатках таблиц стилей. Всего их два:

сравнительная "молодость" стандарта CSS, из-за которой его поддерживают только сравнительно новые программы Web-обозревателей, выпущенные после 1997 года;
крайняя несовместимость между реализациями поддержки таблиц стилей в разных Web-обозревателях, в основном в старых версиях Internet Explorer и Navigator.

Теперь рассмотрим эти недостатки подробнее.

Как мы уже говорили, CSS — довольно молодой стандарт. Он был принят в 1997 году, уже после того, как многие разработчики выпустили на рынок свои программы Web-обозревателей. Конечно, наиболее популярные из них в то время — Internet Explorer и Navigator — вскорости обзавелись поддержкой недавно принятого стандарта. Но очень и очень многие программы не знали о его существовании. И такие "неграмотные" программы используются до сих пор, в частности, в США и Европе, на множестве старых компьютеров, которые там все еще в ходу.

Так какие же Web-обозреватели поддерживают таблицы стилей?

Во-первых, это, конечно, популярнейший Microsoft Internet Explorer. Полная поддержка стандарта CSS появилась в нем, начиная с версии 4.0, хотя некоторые элементы, как говорят, поддерживались еще в приснопамятной 3.0. (Помнится, эта версия принимала файлы таблиц стилей с расширением ess за видеофильмы. С чего бы это?) Версии 5.0 и 5.5 поддерживают расширенный набор атрибутов стилей, как стандартных, так и фирменных, не определенных в стандарте. Полное описание атрибутов стилей, поддерживаемых Internet Explorer, вы можете найти на сайте Microsoft для разработчиков: http://msdn.microsoft.com. Поверьте — их очень много, и среди них есть совсем уж экзотические. И Dreamweaver поддерживает далеко не все из них.

Во-вторых, следующий по популярности Netscape Navigator. Таблицы стилей он также стал поддерживать, начиная с версии 4.0. Набор поддерживаемых им атрибутов стилей невелик и практически не включает нестандартные, фирменные. Хотя последние версии этой программы — 6.0 и 7.0 — полностью поддерживают стандарт CSS1. Полный список поддерживаемых Navigator атрибутов стилей вы можете найти на сайте Netscape: http://developer.netscape.com.

В третьих, новейшие Web-обозреватели: Opera и Mozilla. У них, как говорят разработчики, все с поддержкой стилей в порядке. На самом же деле, у каждой программы свои причуды...

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

Но если ваша аудитория будет включать достаточно большой процент пользователей таких "несовместимых" программ, вам придется принимать особые меры, чтобы сделать ваши страницы доступными для них. Какие это меры, объяснять особо не нужно: вы должны полностью отказаться от стилей, где можно, заменить их тегами и атрибутами HTML, а где нельзя -отказаться от всех "наворотов", предлагаемых CSS. Конечно, ваши страницы от этого во многом проиграют, но их, по крайней-мере, смогут просмотреть посетители.

Dreamweaver идет вам навстречу в этом нелегком труде. Чтобы сделать вашу страницу совместимой со старыми программами Web-обозревателей, просто откройте ее в окне документа и выберите пункт 3.0 Browser Compatible подменю Convert меню File. На экране появится диалоговое окно Convert to 3.0 Browser Compatible, показанное на Рисунок 10.39.

Определение стиля

Группа переключателей Туре задает элементы страницы, к которым будет применен вновь создаваемый стиль:

переключатель Make Custom Style (class) позволяет создать новый стилевой класс. Если вы его включите, то в комбинированном списке Name сможете ввести имя создаваемого стилевого класса, например .cit;
переключатель Redefine HTML Tag позволяет создать стиль переопределения тега. Если выбран этот переключатель, в раскрывающемся списке Tag вы сможете выбрать нужный тег;
переключатель Use CSS Selector позволяет создать стиль-селектор. Он же позволит вам создать псевдостиль гиперссылок или комбинированный стиль наподобие H1 I или I.cit. Если включен этот переключатель, в комбинированном списке Selector может быть введено имя создаваемого комбинированного стиля или селектора. Развернув этот список, вы сможете выбрать нужный псевдостиль.

Вторая группа переключателей Define In задает, в какой таблице стилей будет находиться вновь создаваемый стиль:

если выбран верхний переключатель, в расположенном правее раскрывающемся списке вы сможете выбрать имя файла внешней таблицы стилей, привязанной к этой странице. Также вы можете выбрать пункт (New Style Sheet File), чтобы создать новую таблицу стилей. В последнем случае после нажатия кнопки ОК на экране появится диалоговое окно сохранения файла, где вы сможете ввести имя файла новой таблицы стилей;
если выбран переключатель This Document Only, стиль будет помещен во внутреннюю таблицу стилей.

Параметры абзаца

Параметры текстового абзаца задаются на вкладке Block диалогового окна CSS Style Definition. Здесь же задаются параметры, применяемые к нетекстовым элементам страницы, таким как графические изображения и таблицы. Эта вкладка показана на Рисунок 10.9.

Параметры фона

Параметры фона элемента страницы задаются на вкладке Background диалогового окна CSS Style Definition. Эта вкладка показана на Рисунок 10.8.

Параметры маркеров списка

Параметры, задающие вид маркеров списка, задаются на вкладке List диалогового окна CSS Style Definition. Эта вкладка показана на Рисунок 10.22.

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

HTML предоставляет вам некоторые способы изменить маркер или нумерацию позиций списка. CSS предлагает практически те же возможности.

Параметры местонахождения

Вкладку Positioning диалогового окна CSS Style Definition мы рассмотрим позже, когда будем изучать свободно позиционируемые элементы. Сейчас атрибуты, устанавливаемые с ее помощью, нам не пригодятся.

Параметры рамки

Параметры, определяющие цвет и толщину рамки вокруг элемента страницы, задаются на вкладке Border диалогового окна CSS Style Definition. Эта вкладка показана на Рисунок 10.17.

Параметры размеров и размещения

Параметры, задающие размеры и размещение элемента страницы, задаются на вкладке Box диалогового окна CSS Style Definition. Эта вкладка показана на Рисунок 10.10.

Ширину и высоту элемента страницы вы можете задать в комбинированных списках Width и Height. Эти размеры могут быть заданы как абсолютные величины или процентное значение от ширины или высоты родительского элемента (например, самой страницы). Единица измерения, как обычно, выбирается в раскрывающемся списке, расположенном справа от соответствующего комбинированного списка. Чтобы вернуть Web-обозревателю управление размерами элемента страницы, выберите значение auto или вообще очистите соответствующий комбинированный список.

Параметры шрифта

Взгляните еще раз на Рисунок 10.6. На нем, как вы помните, показана вкладка Туре диалогового окна CSS Style Definition. На этой вкладке задаются параметры шрифта текста.

Сам шрифт выбирается в комбинированном списке Font. Вы можете выбрать один из шрифтов либо ввести его имя вручную. Правда, при этом вы должны быть уверены, что этот шрифт гарантированно установлен на компьютерах пользователей, или специально позаботиться об этом. (Например, распространить файл шрифта среди всех потенциальных посетителей вашего Web-сайта.)

В комбинированном списке Size задается размер шрифта. На Рисунок 10.7 этот список показан в раскрытом виде. Вы можете либо ввести числовое значение в одной из поддерживаемых CSS величин, либо выбрать в списке предопределенное, абсолютное или относительное.

В общем, в этом комбинированном списке можно найти три вида пунктов:

пункты — числовые значения. Задают размер шрифта в одной из поддерживаемых CSS единиц измерения;
пункты xx-small, x-small, small, medium, large, x-large и xx-large, задающие одно из предопределенных значений размера шрифта;
пункты larger и smaller, задающие относительный размер шрифта. Пункт larger увеличивает шрифт на одну позицию в списке предопределенных значений, а пункт smaller — уменьшает.

Как уже говорилось, вы можете также вводить нужные числовые значения прямо в этом списке.

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

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

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

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

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

Р ( font-size: 9pt } HI { font-size: 24pt;

text-align: center } .copyright { font-size: 8pt;

font-style: italic;

text-align: right }

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

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

<HTML>

<HEAD>

<ТITLЕ>Стили</ТITLЕ>

<LINK REL="stylesheet" HREF="10.l.css">;

<STYLE>

H1 { font-size: 16pt; color: #00FF00 } I { font-size: larger } </STYLE> </HEAD> <BODY>

<Н1>Заголовок</Н1>

<Р>Параграф

<HR>

<Р CLASS="copyright">

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

</BODY> </HTML>

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

Поддержка внутренних стилей

Вот мы и выяснили все о том, как Dreamweaver поддерживает внутренние и внешние таблицы стилей. А что же внутренние стили? А с внутренними стилями ситуация сложнее.

Дело в том, что Dreamweaver поддерживает внутренние стили не полностью. Он отображает на экране результаты их применения, но не предлагает никаких удобных инструментов для создания внутренних стилей и управления ими. По мнению автора, это самый большой и досадный его недостаток. Так что, если вы хотите привязать к какому-либо элементу страницы внутренний стиль, то вам придется править HTML-код вручную либо пользоваться диалоговым окном Tag Editor. Как это сделать?

Давайте рассмотрим работу с внутренними стилями на примере. Откроем все ту же нашу многострадальную страницу 10.2.htm, раскрасим текст заголовка в зеленый цвет, а текст, выделенный курсивом, увеличим в размерах на одну ступень. И сделаем мы это разными способами.

Сначала займемся курсивным текстом. Выделите его, щелкнув по нужной кнопке секции тегов, и выберите в контекстном меню пункт Edit Tag <название тега>. После этого выберите в списке, расположенном в левой части диалогового окна Tag Editor, пункт Style Sheet/Accessibility. Окно примет вид, показанный на Рисунок 10.34.

Применение стилей

После того как вы зададите атрибуты стиля, нажмите кнопку ОК диалогового окна CSS Style Definition. Вы также можете нажать кнопку Apply, чтобы сохранить стилевые установки без закрытия этого диалогового окна. Чтобы отказаться от создания нового стиля, нажмите кнопку Cancel (хотя таблица стилей при этом все-таки будет создана).

После того как стиль сохранен в таблице (внешней или внутренней — неважно), его нужно применить к выделенному фрагменту текста или целому абзацу. Конечно, если это стиль переопределения тега, его не надо никак применять — Web-обозреватель использует заданные в нем установки при обработке соответствующего тега. Другое дело стилевой класс — нам нужно будет самим указать, что данный текст форматируется с его использованием.

Предположим, что вы задали для тега <р> шрифт Verdana размером 9 пунктов. Теперь задайте для тега <BODY> светло-желтый цвет фона, но сохраните эту установку не во внешней таблице стиля, а в самой Web-странице 10.2.htm. Для этого в диалоговом окне New CSS Style (см. Рисунок 10.5) включите переключатель This Document Only. Это пригодится нам в дальнейшем, когда мы будем изучать работу со стилями.

Создайте еще два стиля для наших экспериментов. Первый из них будет называться centered, а второй — red. (Как вы уже догадались, это стилевые классы, и поэтому для их создания нужно выбрать переключатель Make Custom Style (class) и ввести их имена в меню Name.) Для первого стиля задайте выравнивание текста посередине, а для второго — красный цвет текста. Сохраните их также во внешней таблице стилей 10.2.css.

После всех этих манипуляций наша страница примет вид, показанный на Рисунок 10.24, а панель CSS Styles — на Рисунок 10.25.

Как видите, в списке CSS-стилей отображаются три пункта: No CSS Style centered и red. Первый пункт обозначает отсутствие любого стиля, т. е. элемент страницы будет форматироваться по умолчанию. Два других задают созданные нами стилевые классы. Заметьте, что стили, переопределяющие теги, здесь не отображаются, и это правильно.

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

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

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

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

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

Работа с таблицами стилей в Dreamweaver

Вы уже много узнали о таблицах стилей. И, наверно, вас уже давно мучает вопрос: а что же Dreamweaver? Поддерживает ли он работу с таблицами стилей? И если поддерживает, то насколько? И почему автор не упомянул об этом ни слова, а все заваливал нас примерами на этом ужасном и ни капельки не понятном HTML? Неужели нам все-таки придется создавать стили вручную?!!

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

Но зачем же понадобилось столько исходного кода? Для того чтобы вы поняли, что такое таблицы стилей и как они работают. А разъяснить это проще всего на примерах, написанных на языках HTML и CSS. К тому же, знать языки HTML и CSS Web-дизайнеру совсем не вредно, наоборот, полезно. Лишние знания — багаж необременительный и зачастую оказывающийся совсем не лишним.

В этом есть, правда, еще один резон. Дело в том, что Dreamweaver не поддерживает удобное создание и присвоение элементам страницы встроенных стилей. Единственный способ создавать их — вводить вручную в мини-редакторе HTML или пользоваться диалоговым окном Tag Editor, описанным в главе 2.

Справка по атрибуту color в панели Reference

Рисунок 10.1. Справка по атрибуту color в панели Reference

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

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

Webстраница использующая стили

Рисунок 10.2. Web-страница, использующая стили

Так что же мы получим в результате?

Во внешней таблице стилей для тега <HI> задаются шрифт размером 24 пункта и выравнивание текста параграфа по центру. Однако во внутренней таблице стилей для того же тега задается размер шрифта 16 пунктов и зеленый цвет текста. Какому определению стилю верить?

Web-обозреватель "верит" обоим. Точнее, делает следующее. К определению стиля, сделанному во внешней таблице, добавляет определение, сделанное во внутренней таблице. А если определение затрагивает один и тот же атрибут (в нашем случае — размер шрифта), берется определение, сделанное во внутренней таблице. И результирующий стиль тега <HI> будет иметь такой вид:

H1 { font-size: 16pt;

text-align: center; color: #00FF00 }

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

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

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

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

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

<Р CLASS="copyright">

Авторские <SPAN STYLE="font-style: normal ">права</SРАМ>.

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

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

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

Панель CSS Styles

Рисунок 10.3. Панель CSS Styles

Чтобы создать новый стиль, выберите пункт New CSS Style контекстного или дополнительного меню либо нажмите одноименную кнопку (Рисунок 10.4), расположенную в правом нижнем углу панели CSS Styles. Также вы можете активизировать окно документа и выбрать пункт New style подменю CSS Styles контекстного меню или одноименный пункт одноименного подменю, находящегося в меню Text. В результате любого из этих действий на экране появится диалоговое окно New CSS Style, показанное на Рисунок 10.5.

Кнопка New CSS Style

Рисунок 10.4. Кнопка New CSS Style

Диалоговое окно New CSS Style

Рисунок 10.5. Диалоговое окно New CSS Style

Вкладка Type диалогового окна New CSS Style

Рисунок 10.6.Вкладка Type диалогового окна New CSS Style

Введя нужные данные, нажмите кнопку ОК для создания стиля или Cancel — для отказа от этого.

Давайте предположим, что мы хотим переопределить стиль тега <р> и поместить определение этого стиля в новую таблицу стилей, которую затем привяжем к новой Web-странице 10.2.htm. Для этого сначала выберите педостигается тот или иной эффект. Дело в том, что атрибутов стилей, которые здесь будут описаны, довольно много, и примечания получатся слишком большими. Если вам понадобится выяснить синтаксис какого-то атрибута CSS, обратитесь к электронному руководству, поставляемому в составе Dreamweaver. Как его вызвать, вы уже знаете.

Комбинированный список

Рисунок 10.7. Комбинированный список Size, задающий размер шрифта

В раскрывающемся списке, расположенном правее Size, выбирается единица измерения размера шрифта. Этот список доступен только тогда, когда в Size выбрано или введено числовое значение. Всего здесь доступно девять пунктов, представляющих девять единиц измерения, поддерживаемых стандартом CSS. Все они перечислены и описаны в табл. 10.2.

Вкладка Background

Рисунок 10.8. Вкладка Background диалогового окна CSS Style Definition

Селектор цветов Background Color задает цвет фона. Значение по умолчанию зависит от программы Web-обозревателя.

В комбинированном списке Background Image задается графическое изображение, которое будет использоваться в качестве графического фона страницы. Вы можете ввести имя нужного файла или выбрать пункт попе, убирающий графический фон. Если вы не хотите вводить имя файла вручную, щелкните кнопку Browse и выберите нужный файл в диалоговом окне Select File.

Обычно графическое изображение, использующееся в качестве фона, значительно меньше в размерах, чем сама страница. В этом случае Web-обозреватель многократно повторяет это изображение, выкладывая своего рода "мозаику", занимающую всю страницу. Управлять тем, как будет повторяться это изображение, можно с помощью раскрывающегося списка Repeat. Здесь доступны четыре пункта:

no-repeat — отключает повторение. Изображение помещается на страницу всего один раз, в левом верхнем углу элемента;
repeat — включает повторение изображения по горизонтали и вертикали (поведение по умолчанию);
repeat-x — включает повторение изображения только по горизонтали; repeat-y — устанавливает повторение изображения только по вертикали.

Когда вы прокручиваете содержимое окна Web-обозревателя, то вместе с содержимым Web-страницы прокручивается и графический фон, если он есть. Некоторые Web-обозреватели поддерживают одну забавную возможность: можно запретить прокрутку графического фона, зафиксировав его на месте. Это может придать странице некоторую оригинальность, однако при прокрутке отнимет больше ресурсов компьютера. И сделать это можно с помощью раскрывающегося списка Attachment. Пункт scroll этого списка заставляет графический фон прокручиваться (поведение по умолчанию), a fixed — фиксирует его на месте.

Также некоторые Web-обозреватели позволяют вам поместить графический фон в нужное место страницы. Для этого предназначены раскрывающиеся списки Horizontal Position и Vertical Position. Вы можете ввести в них числовые значения соответственно горизонтальной и вертикальной координат графического фона. В раскрывающихся списках, расположенных правее, выбирается одна из единиц измерения, поддерживаемых CSS.

Кроме того, в раскрывающемся списке Horizontal Position доступны три пункта:

left — выравнивание графического фона по левому краю элемента страницы (поведение по умолчанию);
center — выравнивание по центру;
right — выравнивание по правому краю.

В раскрывающемся списке Vertical Position доступны также три пункта:

top — выравнивание графического фона по верху элемента страницы (поведение по умолчанию);
center — выравнивание по центру; bottom — выравнивание по низу.

Очевидно, что задавать эти параметры нужно, предварительно задав соответствующие параметры других атрибутов стиля, перечисленных на вкладке Background. А для достижения необходимого результата наверняка придется поэкспериментировать.

Вкладка Block диалогового

Рисунок 10.9. Вкладка Block диалогового окна CSS Style Definition

В комбинированном списке Word Spacing задается величина дополнительного пространства, помещаемого между словами. Введите нужную величину и выберите в расположенном правее раскрывающемся списке единицу измерения. Здесь доступны все единицы измерения, кроме процентов. Пункт normal комбинированного списка Word Spacing убирает дополнительное расстояние между словами текста.

В комбинированном списке Letter Spacing задается величина дополнительного пространства, помещаемого между символами. Введите нужную величину и выберите в расположенном правее раскрывающемся списке единицу измерения. Здесь доступны все единицы измерения, кроме процентов. Пункт normal комбинированного списка убирает дополнительное расстояние между символами текста.

Комбинированный список Vertical Alignment задает вертикальное выравнивание элемента страницы относительно родителя. Здесь доступны следующие пункты:

baseline — выравнивание базовой линии элемента страницы по базовой линии текста родителя (поведение по умолчанию);
sub — помещает текст ниже остального текста, имитируя нижний индекс;
super — помещает текст выше остального текста, имитируя верхний индекс;
top — выравнивание элемента страницы по верхнему краю родительского элемента;
text-top — выравнивает верхний край элемента страницы по верхнему краю текста родителя;
middle — помещает середину элемента страницы на половину высоты шрифта выше базовой линии текста родителя;
bottom — выравнивание элемента страницы по нижнему краю родительского элемента:
text-bottom — выравнивает нижний край элемента страницы по нижнему краю текста родителя.

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

Как бы то ни было, для того чтобы получить в окне Web-обозревателя необходимый результат, вам придется поэкспериментировать с разными значениями этого атрибута. Рассказать, как будет выглядеть тот или иной элемент страницы при том или ином значении, невозможно — его нужно видеть своими глазами. (Это, впрочем, справедливо и для многих других параметров элементов страниц, задаваемых в Dreamweaver.)

Раскрывающийся список Text Align задает горизонтальное выравнивание текста в абзаце. Здесь доступны четыре пункта:

left — выравнивание по левому краю (поведение по умолчанию);
center — по центру;
right — по правому краю;
justify — по ширине.

В поле ввода Text Indent задается величина отступа красной строки. Эта величина может быть как положительной, так и отрицательной (выступ). В раскрывающемся списке, расположенном правее, выбирается единица измерения.

В раскрывающемся списке Whitespace задается поведение пробелов внутри текста абзаца. Здесь доступны три пункта:

normal — задает обычное отображение текста, т. е. Web-обозреватель может переносить строки по пробелам, если они (строки) не будут помещаться в родительском элементе;
рrе — превращает текст абзаца в фиксированно отформатированный. Как вы помните из главы 5, такой текст отображается так, как он введен в исходном HTML-коде, с учетом пробелов, возвратов каретки и т. п. Одним словом, текст ведет себя так, словно заключен внутрь тега <PRE>;
nowrap — запрещает перенос текста по пробелам. Вам будет необходимо поставить в нужные места строк теги разрыва текста <BR>, если вы хотите, чтобы они все-таки переносились. Это может быть полезно, если вы захотите контролировать, как текст будет переноситься на другую строку.

Раскрывающийся список Display задает поведение элемента страницы. В нем доступно очень много пунктов:

попе — элемент вообще не будет присутствовать на странице, словно он и не задан в ее коде;
inline — элемент страницы ведет себя как отдельный символ текста (встроенный элемент);
block — элемент страницы ведет себя как абзац текста (блочный элемент); list-item — элемент страницы ведет себя как пункт списка;
run-in — встраивающийся элемент. Если за таким элементом идет блочный элемент, он становится первым символом блочного элемента, в противном случае он сам становится блочным элементом;
compact — компактный элемент. Если за таким элементом идет блочный элемент, он форматируется как однострочный встроенный элемент и помещается на левой границе блочного элемента (если эта граница задана). В противном случае он сам форматируется как блочный элемент;
marker — маркер списка;
table — таблица;
inline-table — таблица, отформатированная как встроенный элемент;
table-row-group — строки секции тела таблицы;
table-header-group — строки секции заголовка таблицы;
table-footer-group — строки секции "поддона" таблицы;
table-row — строка таблицы;
table-column-group — группа колонок таблицы;
table-column — колонка таблицы;
table-cell — ячейка таблицы;
table-caption — заголовок таблицы.

Вкладка Box диалогового

Рисунок 10.10. Вкладка Box диалогового окна CSS Style Definition

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

left - "прижимает" элемент к левому краю страницы. Все остальное содержимое страницы "обтекает" "освобожденный" элемент;
right — "прижимает" элемент к правому краю страницы;
nоnе — оставляет элемент в "потоке" текста (поведение по умолчанию).

На Рисунок 10.11 показано графическое изображение, вынесенное за пределы "потока" текста и выровненное по правому краю (атрибут Float был установлен в right).

Графическое изображение

Рисунок 10.11. Графическое изображение, выровненное по правому краю

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

В списке Clear доступны четыре пункта:

left — если "освобожденный" и текущий элементы должны находиться слева, то текущий элемент перемещается ниже "освобожденного";
right — то же самое, только справа; both — то же самое, с обеих сторон;
nоnе — разрешает "освобожденному" и текущему элементам занять одну и ту же горизонтальную позицию (поведение по умолчанию).

На Рисунок 10.12 показано уже знакомое нам графическое изображение, выровненное по правому краю. Внизу вы видите текстовый абзац, находящийся в другой горизонтальной позиции. Значения атрибута Clear и у изображения, и у абзаца должны быть установлены в right, иначе ничего не получится.

Графическое изображение

Рисунок 10.12. Графическое изображение и текстовый абзац, размещенные в разных горизонтальных позициях

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

А теперь мы с вами подходим к самому интересному.

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

Величины отступов задаются в группе элементов управления Padding. В нее входят раскрывающиеся списки Тор (задает отступ сверху), Right (справа), Bottom (снизу) и Left (слева). Единицы измерения выбираются, как обычно, в раскрывающихся списках, расположенных справа. Учтите, что доступны только абсолютные единицы — процентов нет.

Группа элементов управления Margin аналогична группе Padding хотя бы тем, что в нее также входят раскрывающиеся списки Тор (задает величину отступа сверху), Right (справа), Bottom (снизу) и Left (слева). Однако, в отличие от Padding, списки этой группы задают расстояние между границей элемента и другими элементами страницы. Единицы измерения выбираются также в раскрывающихся списках справа. В отличие от атрибутов группы Padding, здесь доступны относительные единицы измерения — проценты, т. е. вы можете задать отступ как процент от соответствующего размера родителя.

Текст с отступами заданными атрибутами стилей

Рисунок 10.13. Текст с отступами, заданными атрибутами стилей

Обе этих группы создают на странице свободное пространство. Но, если свободное пространство, полученное с помощью элементов группы Padding. принадлежит текущему элементу страницы, то созданное с помощью группы Margin — не принадлежит ему, а точнее, принадлежит самой странице. Это можно использовать для получения различного рода эффектов, наподобие тех, что изображены на Рисунок 10.14 и 10.15.

На Рисунок 10.14 изображен текстовый абзац, расположенный на странице с отступами слева и справа, равными 1 см. Эти отступы были созданы с помощью элементов управления группы Margin. Сравните его с Рисунок 10.15, где эти же отступы были созданы с помощью группы Padding. (Для вашего удобства для этого абзаца был задан светло-серый фон.) Как видите, в первом случае создаются отступы от границ абзаца до границ родителя (в нашем случае — страницы), т. е. создаваемое свободное пространство не является частью абзаца. Во втором же случае создаваемые отступы находятся внутри абзаца, между его границами и его же содержимым; и свободное пространство, как видите, принадлежит самому абзацу.

Вы можете комбинировать эти два способа создания свободного пространства. Взгляните, например, на Рисунок 10.16. И попробуйте догадаться, какие атрибуты стиля были заданы в этом случае.

Текстовый абзац

Рисунок 10.14. Текстовый абзац с отступами, созданными с помощью группы атрибутов Margin

Текстовый абзац

Рисунок 10.15. Текстовый абзац с отступами, созданными с помощью группы атрибутов Padding

Текстовый абзац

Рисунок 10.16. Текстовый абзац с отступами, созданными с помощью групп атрибутов Padding и Margin

Если вы хотите задать одинаковые отступы со всех сторон, то можете включить флажок Same for All, находящийся в соответствующей группе элементов управления. После этого введите нужную величину отступа в комбинированный список Тор (остальные списки станут недоступными). Флажок Same for All включен по умолчанию, т. к. отступы для элемента страницы, как правило, задаются одинаковыми со всех сторон.

Пользуясь атрибутами стиля, задаваемыми на вкладке Box диалогового окна CSS Style Definition (см. Рисунок 10.10), вы можете в некоторой степени обойтись без таблиц. В частности, если вы используете таблицы для задания отступа или отступов вокруг текста (иначе говоря, просветов), то теперь можете от них отказаться. В самом деле, атрибуты стилей Margin и Padding предпочтительнее, так они как не обладают недостатками, в изобилии присущими таблицам.

Вкладка Border диалогового

Рисунок 10.17. Вкладка Border диалогового окна CSS Style Definition

Рамка рисуется по воображаемой границе элемента страницы (Рисунок 10.18). Значит, вы можете задать расстояние от границы до содержимого элемента, используя атрибуты группы Padding. А расстояние от границы до "соседей" этого элемента задается атрибутами Margin. Эти атрибуты задаются на вкладке Box диалогового окна CSS Style Definition (подробнее см. выше).

Рамка вокруг абзаца

Рисунок 10.18. Рамка вокруг абзаца (фон абзаца для удобства сделан светло-серым)

Группа комбинированных списков Style задает стиль линии рамки: будет ли она сплошная, точечная или вообще невидимая. Всего в каждом из этих списков доступны девять пунктов:

nоnе — рамка отсутствует (поведение по умолчанию);
dotted — точечная линия;
dashed — пунктирная линия;
solid — сплошная линия;
double — двойная линия;
groove - "вдавленная" трехмерная линия;
ridge - "выпуклая" трехмерная линия;
inset — элемент страницы напоминает выпуклый трехмерный прямоугольник (Рисунок 10.19);
outset — элемент страницы напоминает вдавленный трехмерный прямоугольник (Рисунок 10.20).

Как видите, стандарт CSS предоставляет вам довольно много различных стилей для рамок. Пользуясь ими, вы можете создавать довольно интересные вещи, например, подобие стандартных кнопок Windows. (Забегая вперед, можно отметить, что и вести себя они будут как обычные кнопки, если вы кое-что измените в их коде.)

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

Кроме того, в этих комбинированных списках доступны три пункта, задающие предопределенные значения толщины рамки:

thin — тонкая рамка; medium — средняя; thick — толстая.

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

Элемент страницы

Рисунок 10.19. Элемент страницы, созданный с использованием стиля рамки inset

Элемент страницы

Рисунок 10.20. Элемент страницы, созданный с использованием стиля рамки outset

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

Опять же, если вы хотите задать одинаковые параметры для всех сторон рамки, включите флажок Same for All, находящийся в соответствующей группе элементов управления. После этого задайте нужные параметры в списке или селекторе цвета, которые станут после этого доступными.

Да, рамка обычно делается одинаковой со всех сторон. Но Dreamweaver и таблицы стилей позволяют вам задать различные стили, значения ширины и цвета для каждой стороны рамки отдельно. Вы даже можете убрать какие-то из сторон рамки или вообще оставить только одну сторону. Такой пример показан на Рисунок 10.21. Здесь мы задали для левой стороны значение thick, а для остальных сторон — 0. Кроме того, мы задали величину отступа Padding слева равной 0,5 см, а с других трех сторон убрали его совсем. Попробуйте сделать так же!

Вертикальная линия слева от текста абзаца

Рисунок 10.21. Вертикальная линия слева от текста абзаца

Вкладка List диалогового

Рисунок 10.22. Вкладка List диалогового окна CSS Style Definition

В раскрывающемся списке Туре задается вид маркера или нумерации позиций списка. Здесь доступны девять пунктов:

disc — маркер в виде кружка с заполнением (поведение по умолчанию для маркированных списков);
circle — маркер в виде окружности без заполнения;
square — маркер в виде маленького квадратика, с заполнением (на компьютерах Apple Macintosh отображается без заполнения);
decimal — нумерация арабскими цифрами (поведение по умолчанию для нумерованных списков);
lower-roman — нумерация малыми римскими цифрами; upper-roman — нумерация большими римскими цифрами; lower-alpha — нумерация малыми латинскими буквами; upper-alpha — нумерация большими латинскими буквами;
nоnе — нет ни маркера, ни нумерации (поведение по умолчанию для обычных текстовых абзацев).

В поле ввода Bullet Image вводится имя файла графического изображения, которое будет использоваться в качестве маркера. Вы можете ввести его вручную или щелкнуть кнопку Browse и выбрать нужный файл в диалоговом окне Select File. Заметьте, что если задан графический маркер, установки атрибута Туре теряют силу.

Раскрывающийся список Position задает местонахождение маркера или нумерации. Здесь доступны два пункта. Если выбран пункт inside, то маркер (нумерация) располагается внутри границ текстового абзаца, т. е. принадлежит ему. Если же выбран пункт outside, то маркер (нумерация) размещается за пределами границ абзаца. Таким образом, если задано значение inside, позиция списка выглядит компактнее, а если outside — текст позиции будет лучше читаться. Значение по умолчанию — outside.

Вкладка Extensions

Рисунок 10.23. Вкладка Extensions диалогового окна CSS Style Definition

Группа раскрывающихся списков Page Break пригодится, если вы планируете дать возможность пользователю распечатать вашу Web-страницу на принтере. С помощью списков этой группы вы можете дать команду драйверу принтера выполнить прогон листа до или после печати какого-либо элемента страницы и продолжить печать с нового листа. Это может быть полезно, если вы хотите предотвратить появление "висячих" строк или если вы разработали хитроумный печатный дизайн, где одни элементы помещаются на левых, а другие — на правых листах (если используется двусторонняя печать). В этом случае воспользуйтесь раскрывающимися списками Before и After, задающими прогон листа соответственно перед и после текущего элемента страницы.

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

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

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

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

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

Группа раскрывающихся списков Visual Effect управляет визуальным представлением текущего элемента страницы. В частности, с ее помощью вы можете применить к элементу такое замечательное нововведение, появившееся в Internet Explorer 4.0, как фильтры и преобразования.

Но сначала обратимся к раскрывающемуся списку Cursor. С его помощью вы можете задать вид курсора мыши, который он примет при наведении на текущий элемент страницы. Это может быть очень забавно.

Все доступные формы курсора мыши перечислены в табл. 10.3.

Webстраница 10 2 htm после задания всех стилей

Рисунок 10.24. Web-страница 10.2.htm после задания всех стилей

Панель CSS Styles после задания всех стилей

Рисунок 10.25. Панель CSS Styles после задания всех стилей

Имейте в виду также следующее. Если вы задали стиль вида, скажем, H1. right (гибрид стилевого класса и переопределения тега), Dreamweaver отобразит его как right в списке стилей. При этом он позволит вам присвоить его любому элементу страницы, что будет неправильно, т. к. этот стиль будет работать только в теге <HI>. Очень досадно, но если вы используете в своих страницах подобные гибридные стили, вам придется самим помнить о них и выполнять только корректные присвоения.

Так как же применить стилевой класс к элементу страницы? Если у вас открыта панель CSS Styles, вам достаточно только выбрать нужный стиль в списке. Естественно, перед этим вы будете должны выделить в окне документа элемент страницы, к которому хотите применить стилевой класс.

Давайте поставим текстовый курсор на заголовок нашей страницы и щелкнем по стилевому классу centered. После этого выделим слова "Web-страничка" и щелкнем по стилевому классу red. Что получится? (Ответ см. на Рисунок 10.26.)

Страница 10 2 htm

Рисунок 10.26. Страница 10.2.htm после применения стилевых классов centered и red

Теперь поставьте текстовый курсор куда-нибудь на текст заголовка и взгляните на окно CSS-стилей. Dreamweaver подсветит в списке стилевой класс сentered. To же самое произойдет с классом red, если вы поместите текстовый курсор на выделенную красным надпись. Таким образом, вы всегда будете знать, с помощью какого стилевого класса отформатирован тот или иной элемент страницы.

Но что делать, если панель CSS Styles у вас закрыта? Специально для такого случая в меню Text и контекстном меню предусмотрено подменю CSS Styles. В верхней части этого подменю перечислены все созданные вами к этому моменту стилевые классы. Выбранный класс будет выделен галочкой. Само собой, также присутствует пункт None, позволяющий убрать форматирование с использованием стилевого класса.

Вообще, Dreamweaver (как и многие популярные Windows-приложения, например, Microsoft Word) ценен тем, что почти любое действие в нем можно выполнить несколькими различными способами. Вам остается только выбрать тот способ, который придется вам больше по душе.

Панель CSS Styles в режиме правки стилей

Рисунок 10.27. Панель CSS Styles в режиме правки стилей

Чтобы изменить необходимый стиль, выделите его и выберите пункт Edit контекстного или дополнительного меню. Также вы можете дважды щелкнуть по нужному пункту списка стилей. После этого на экране появится диалоговое окно CSS Style Definition, в котором вы сможете выполнить требуемые изменения. После нажатия кнопки ОК все сделанные изменения сохранятся и будут тотчас применены.

Удалить стиль вы можете, воспользовавшись пунктом Delete контекстного или дополнительного меню. Но проще и нагляднее нажать кнопку Delete Style (Рисунок 10.28) в правом нижнем углу панели CSS Styles. Естественно, перед этим вы должны будете выбрать нужный стиль в списке.

Кнопка Delete Style панели CSS Styles

Рисунок 10.28. Кнопка Delete Style панели CSS Styles

Стиль удаляется сразу же, без всякого предупреждения. Форматирование всех элементов страницы, к которым был применен удаленный стиль, приводится к виду по умолчанию. Однако атрибуты CLASS и их значения в тегах этих элементов все же сохраняются, и если вы в дальнейшем создадите стилевой класс с таким же названием, он будет тотчас к ним применен.

Также Dreamweaver предоставляет вам возможность создать копию выбранного стиля. Это может быть полезно, если вы хотите создать новый стиль, слегка переделав уже существующий. Для этого выберите нужный стиль и воспользуйтесь пунктом Duplicate контекстного или дополнительного меню.

На экране появится уже надоевшее вам диалоговое окно CSS Style Definition. Ну а с ним-то вы знаете, что делать.

Кнопка Edit Style Sheet панели CSS Styles

Рисунок 10.29. Кнопка Edit Style Sheet панели CSS Styles

После этого на экране появится диалоговое окно Edit Style Sheet, показанное на Рисунок 10.30.

Большую часть этого диалогового окна занимает список стилей, определенных во внутренней таблице (если таковая есть), и внешних таблиц стилей, привязанных к этой странице. Вы видите, что этот список в нашем случае содержит два пункта. Нижний пункт обозначает стиль, переопределяющий тег <BODY>. (Помните, мы задали для тела документа светло-желтый цвет Верхний же пункт обозначает внешнюю таблицу стилей 10.2.css, привязанную к нашей странице. Заметьте, что этот пункт помечен специальным значком.

Под списком находится небольшое текстовое поле, где выводится код определения выбранного в списке стиля. Так что вы сразу можете видеть, что з* стиль попал вам под руку... т. е. под мышку.

Диалоговое окно Edit Style Sheet

Рисунок 10.30. Диалоговое окно Edit Style Sheet

Левее списка находятся пять кнопок. Перечислим их по порядку.

Кнопка Link позволяет привязать к странице внешнюю таблицу стилей. Если вы на нее нажмете, на экране появится диалоговое окно Link External Style Sheet, показанное на Рисунок 10.31. В поле ввода File/URL введите имя файла внешней таблицы стилей, которую вы хотите привязать к своей странице. Если вы не хотите вводить ее вручную, щелкните кнопку Browse и выберите нужный файл в диалоговом окне Select File. После этого нажмите кнопку ОК для привязки таблицы стилей или Cancel — для отказа от этого.

Диалоговое окно Link External Style Sheet

Рисунок 10.31. Диалоговое окно Link External Style Sheet

В диалоговом окне Link External Style Sheet имеется также группа переключателей Add As. Переключатель Link (включен по умолчанию) выполняет обычную привязку таблицы стилей с помощью тега <LINK>; это, собственно, делается почти всегда. А переключатель Import позволяет вам импортировать внешнюю таблицу стилей, т. е. перенести все содержимое внешней таблицы стилей во внутреннюю. Однако такой возможностью пользоваться не рекомендуется, поскольку команда CSS @import, с помощью которой выполняется импортирование, поддерживается далеко не всеми программами

Web-обозревателей. А, кроме того, при импортировании возможен неразрешимый конфликт стилей, когда во внутренней и внешней таблицах оказывается два стиля с одинаковым именем. (При импортировании механизм "каскадности" не работает.)

Однако вернемся к диалоговому окну Edit Style Sheet.

Кнопка New позволит вам создать новый стиль. После ее нажатия на экране появится уже диалоговое окно CSS Style Definition. В нем вы сможете создать новый стиль, а, возможно, и новую внешнюю таблицу стилей.

Кнопка Edit позволит вам отредактировать существующий стиль. Не будем рассказывать, как это делается, — вы уже это знаете. Чтобы вызвать нужный стиль для редактирования, также можно дважды щелкнуть по нужному пункту списка.

Кнопка Duplicate позволит вам создать стиль, являющийся точной копией уже существующего стиля, выбранного в списке. Это полезно, если вы хотите создать новый стиль, взяв за основу уже существующий и слегка его подредактировав.

Кнопка Remove удаляет выбранный стиль.

И, наконец, кнопка Done закрывает диалоговое окно Edit Style Sheet. Вы также можете нажать кнопку закрытия окна, находящуюся в его заголовке.

Ну, вот и все. С кнопками мы разобрались. Но остается вопрос: как все-таки добраться до внешней таблицы стилей? Как ее отредактировать? Как, в конце концов, удалить ссылку на нее?

Очень просто.

Чтобы отредактировать внешнюю таблицу стилей, выберите в списке стилей соответствующий ей пункт и нажмите кнопку Edit или просто дважды щелкните по этому пункту. На экране появится еще одно диалоговое окно Edit Style Sheet, но в нем будет отображаться содержимое внешней таблицы стилей. В этом-то окне вы и сможете отредактировать ее содержимое. Не верите? Посмотрите на Рисунок 10.32.

Чтобы удалить ссылку на внешнюю таблицу стилей, воспользуйтесь все той же кнопкой Remove.

Выше мы рассматривали, как можно привязать к Web-странице еще одну таблицу стилей. Это можно было сделать в диалоговом окне Edit Style Sheet. Однако это совсем не обязательно — то же самое вы можете выполнить, нажав кнопку Attach Style Sheet (Рисунок 10.33) в правом нижнем углу панели CSS Styles либо выбрав пункт Attach Style Sheet, расположенный в контекстном и дополнительном меню этой же панели. Также этот пункт находится в подменю CSS Styles меню Text и контекстном меню окна документа. При выборе этого пункта на экране появится диалоговое окно Select File, где вы сможете выбрать нужный файл. После нажатия кнопки Select выбранная таблица стилей будет тотчас привязана к странице.

Содержимое внешней

Рисунок 10.32. Содержимое внешней таблицы стилей 10.2.сss в диалоговом окне Edit Style Sheet

Кнопка Attach Style Sheet панели CSS Styles

Рисунок 10.33. Кнопка Attach Style Sheet панели CSS Styles

Если вы считаете, что сделали удачную внутреннюю таблицу стилей, и хотите сохранить ее в отдельном файле как внешнюю (экспортировать таблицу стилей), то Dreamweaver поможет вам и в этом случае. Для этого выберите пункт Export Style Sheet, расположенный в контекстном и дополнительном меню панели CSS Styles. Также этот пункт располагается в подменю CSS Styles, находящемся в меню Text и контекстном меню окна документа. После выбора этого пункта на экране появится стандартное диалоговое окно сохранения файла Windows. Введите имя файла и нажмите кнопку сохранения.

Диалоговое окно

Рисунок 10.34. Диалоговое окно Tag Editor (выбрана вкладка Style Sheet/Accessibility)

Собственно определение тега вводится в поле ввода Style. Введите в него текст font-size: larger. И нажмите кнопку ОК. После этого шрифт курсивного текста увеличится в размерах — наш внутренний стиль работает!

Теперь примемся за заголовок. И используем мини-редактор HTML, описанный еще в главе 2 этой книги. Конечно, можно работать в режиме отображения кода окна документа. Но мини-редактор HTML несколько удобнее, т. к. вы можете видеть одновременно и саму страницу, и нужный фрагмент кода.

Поместите текстовый курсор в текст заголовка и выберите в контекстном меню пункт Edit Tag <H1>... Результат этого действия показан на Рисунок 10.35.

Вставьте в тег <H1> атрибут STYLE и присвойте ему значение color: #00FF00;. Должно получиться так, как показано на Рисунок 10.36.

Миниредактор HTML

Рисунок 10.35. Мини-редактор HTML, отображающий HTML-код тега <Н1>

Измененный HTMLкод в миниредакторе HTML

Рисунок 10.36. Измененный HTML-код в мини-редакторе HTML

Теперь закройте мини-редактор, нажав клавишу <Enter>. (Нажатие клавиши <Esc> позволит вам отменить сделанные изменения.) И посмотрите на заголовок. Он позеленел, но не от злости, а от того, что мы применили к нему встроенный стиль.

Так что вы можете создавать в Dreamweaver и встроенные стили. Однако имейте в виду, что в этом случае вам придется полагаться только на свое знание HTML и CSS — Dreamweaver почти не автоматизирует ваш труд. А узнать побольше о HTML и CSS вам помогут интерактивные руководства, поставляемые вместе с этой замечательной программой.

Диалоговое окно Design Time Style Sheets

Рисунок 10.37. Диалоговое окно Design Time Style Sheets

В этом окне находятся два списка. В списке Show Only at Design Time перечислены таблицы стилей времени редактирования. В списке Hide at Design Time перечислены таблицы стилей времени просмотра. Точнее, не сами таблицы стилей, а имена файлов, в которых они сохранены.

Чтобы добавить файл в один из списков, нажмите кнопку со знаком "плюс", находящуюся над ним. После этого вам останется выбрать нужный файл в диалоговом окне Select File и нажать кнопку открытия.

Чтобы удалить файл из списка, выберите его и нажмите кнопку со знаком "минус", находящуюся над списком.

После нажатия кнопки OK Dreamweaver примет ваши указания к сведению. Причем, немедленно.

Для примера вы можете открыть страницу 10.2.htm и задать в качестве таблицы времени редактирования 10.1.htm, а в качестве таблицы времени просмотра — 10.2.htm. Получившийся результат показан на Рисунок 10.38.

Страница 10 2 htm

Рисунок 10.38. Страница 10.2.htm, для которой были заданы временные таблицы, в окне документа Dreamweaver и в окне Web-обозревателя

Диалоговое окно

Рисунок 10.39. Диалоговое окно Convert to 3.0 Browser Compatible

Чтобы преобразовать страницу, использующую стили, в совместимую со старыми программами, включите один из переключателей в группе Convert: либо CSS Styles to HTML Markup, либо Both. (О переключателе Layers to Table мы поговорим потом, а сейчас вы пока можете не обращать на него внимания — стилей он все равно не затрагивает.) После этого нажмите кнопку ОК для запуска преобразования, либо Cancel — для отказа от него.

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

Попробуйте преобразовать в "совместимый" вид страничку 10.2.htm. Посмотрите на Рисунок 10.40 — даже встроенный стиль преобразовался! Хотя фон страницы, заданный в стиле, переопределяющем тег <BODY>, Dreamweaver все же "потерял". Ну и растяпа!..

Результат преобразования

Рисунок 10.40. Результат преобразования страницы 10.2.htm (на переднем плане)

Создание стилей

Перед тем как начать экспериментировать со стилями, откройте Web-страницу 1.1.htm, созданную нами в самом начале изучения Dreamweaver. Над ее содержимым мы и будем издеваться. Только пересохраните ее под именем 10.2.htm, выбрав пункт Save As в меню File или нажав комбинацию клавиш <Ctrl>+<Shift>+<S>.

Вся работа со стилями протекает в панели CSS Styles Dreamweaver, показанной на Рисунок 10.3. Чтобы вызвать ее на экран, либо выберите в меню Window пункт CSS Styles, либо нажмите комбинацию клавиш <Shift>+<F11>.

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

Таблица 10.1. Псевдостили гиперссылок


	Псевдостиль	Описание
	A: link	Применяется ко всем гиперссылкам документа
	A: active	Применяется ко всем активным гиперссылкам документа
	A: visited	Применяется ко всем посещенным гиперссылкам документа
	A: hover	Применяется к гиперссылке, на которую указывает курсор мыши

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

<ТIТLЕ>Псевдостили</ТIТLЕ> <STYLE>

A: link { color: tCC0000;

background-color: #FFFFFF; text-decoration: none } A: activ

e { color: #FFFFFF;

background-color: #CC0000; text-decoration: none } A: visited

{ color: #CC0000;

background-color: ttFFFFFF; text-decoration: line-through } A: hover

{ color: #FFFFFF;

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

</STYLE>

</HEAD>

<BODY>

<P><A НRЕF="">Гиперссылка 1</А></Р>

<P><A НRЕF="">Гиперссылка 2</А></Р>

<P><A НRЕF="">Гиперссылка 3 </А></Р>

</BODY>

</HTML>

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

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

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

Единицы измерения поддерживаемые стандартом CSS

Таблица 10.2. Единицы измерения, поддерживаемые стандартом CSS


	Единица измерения	Описание
	pixels	Пикселы
	points	Пункты
	in	Дюймы
	cm	Сантиметры
	mm	Миллиметры
	picas	Пики
	ems	Размер буквы "m" текущего шрифта
	exs	Размер буквы "х" текущего шрифта
	%	Проценты от размера шрифта родительского элемента

В комбинированном списке Weight задается величина "жирности" шрифта. Вы можете ввести числовое значение "жирности" от 100 до 900, либо выбрать одно из предопределенных абсолютных или относительных значений. Как и в списке Size, здесь доступны пункты трех типов:

пункты — числовые значения. Задают "жирность" шрифта в числах от 100 до 900. Обычный шрифт имеет значение 400, жирный — 700;
пункты normal и bold, задающие соответственно обычный и жирный шрифт;
пункты bolder и lighter, задающие относительную "жирность" шрифта. Пункт bolder увеличивает "жирность" на одну позицию в списке предопределенных значений, а пункт lighter — уменьшает.

В раскрывающемся списке Style вы можете выбрать "стиль" шрифта, а именно, будет ли он являться курсивом или нет. Доступны три пункта: normal — обычный шрифт, italic — курсив и oblique — зависит от конкретной программы Web-обозревателя, но обычно тоже курсив.

В раскрывающемся списке Variant задается вид малых букв шрифта. Пункт normal задает нормальный их вид, a small-caps делает их похожими на уменьшенные заглавные буквы.

В комбинированном списке Line Height задается вертикальный размер строки текста. Значение normal задает размер по умолчанию, вычисляемый самим Web-обозревателем. Чтобы задать свой размер, введите его вручную и выберите единицу измерения. Раскрывающийся список, задающий единицу измерения, находится правее. Если вы его откроете, то увидите, что он имеет новый пункт multiple; он задает умножение размера по умолчанию на введенное вами число.

В раскрывающемся списке Case задается вид текста: будет ли он отображаться только большими или только маленькими буквами. Здесь доступны четыре пункта:

capitalize — каждое слово текста отображается с большой буквы; uppercase — текст отображается только большими буквами; lowercase — только маленькими буквами;
nоnе — текст отображается как он набран, без всяческих преобразований (поведение по умолчанию).

Группа флажков Decoration задает дополнительное "украшение" текста: подчеркивание, надчеркивание или зачеркивание. Здесь доступно пять флажков:

underline — подчеркивает текст (поведение по умолчанию для гиперссылок); overline — надчеркивает текст; line-through — зачеркивает текст;
blink — заставляет текст мерцать (поддерживается только старыми версиями Navigator);
попе - убирает все эти "украшения" (поведение по умолчанию для остального текста).

Селектор цветов Color задает цвет текста.

Формы курсора мыши

Таблица 10.3. Формы курсора мыши, доступные для задания в раскрывающемся списке Cursor


	Пункт раскрывающегося списка Cursor	Вид курсора мыши
	hand	"Указующий перст", появляющийся при наведении курсора мыши на гиперссылки
	crosshair	Перекрестье, "прицел"
	text	Текстовый курсор
	wait	Песочные часы, обозначающие, что Windows "думу думает"
	default	Обычная стрелка
	help	Обычная стрелка с вопросительным знаком справа
	e-resize	Стрелка вправо, "на восток"
	ne-resize	Стрелка вверх и вправо, "на северо-восток"
	n-resize	Стрелка вверх, "на север"
	nw-resize	Стрелка вверх и влево, "на северо-запад" .
	w-resize	Стрелка влево, "на запад"
	sw-resize	Стрелка вниз и влево, "на юго-запад"
	s-resize	Стрелка вниз, "на юг"
	se-resize	Стрелка вниз и вправо, "на юго-восток"
	auto	Управление формой курсора мыши передается Web-обозревателю. Поведение по умолчанию

Имейте, однако, в виду, что перед тем, как задавать форму курсора мыши для каких-то элементов вашей страницы, подумайте, нужно ли это. Скажем, если при наведении курсора мыши на текст он будет принимать форму песочных часов, пользователь вас, мягко говоря, не поймет. Поэтому сначала уясните, что обозначает та или иная форма курсора. Не от нечего же делать Windows ее меняет!

А вот раскрывающийся список Filter даст в ваши руки неограниченные возможности по созданию графических спецэффектов. Например, вы можете сделать графическое изображение или текст заголовка размытым или заставить его плавно появляться и так же плавно исчезать. Поверьте — это выглядит потрясающе! И задать эти спецэффекты вы сможете с помощью раскрывающегося списка Filter, но... Описание фильтров может растянуться на целую главу — такой это мощный инструмент, поэтому мы не будем описывать их здесь. Если вы заинтересовались фильтрами или преобразованиями, найдите хорошую книжку по CSS или, что еще лучше, обратитесь на сайт Microsoft за нужной документацией.

Таблица стилей в этом случае имеет

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

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

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

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

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

<STYLE>

.cit { font-size: smaller;

font-style: italic } I {color: #00FFOO } HI I { color: #FF0000;

font-size: larger } </STYLE>

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

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

<Р CLASS="cit">Этo цитата.</Р>

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

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

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

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

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

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

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

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

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

Таблицы стилей и шаблоны

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

Но вот вы открыли одну из основанных на шаблоне страниц и решили создать для нее внутреннюю таблицу стилей, дополняющую ту, что находится в шаблоне. Но как это сделать? Ведь внутренняя таблица стилей записывается в HTML-заголовок страницы, куда, как было сказано ранее, хода нет!

Не думайте об этом! Используйте те же, уже знакомые вам, инструменты для создания новых стилей. Единственное: вы не можете переопределить

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

Дело в том, что при создании шаблона Dreamweaver MX создает еще одну изменяемую область по имени head. Эта изначально пустая область находится в HTML-заголовке страницы, внутри тега <HEAD>. Когда вы создаете в Web-странице внутреннюю или привязываете к ней внешнюю таблицу стилей, необходимый код помещается как раз в эту область. Вы можете посмотреть HTML-код страницы, основанной на шаблоне, и убедиться в этом сами.

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

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

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

Управление стилями

Осталось рассмотреть, как в Dreamweaver осуществляется управление стилями, в частности, изменение и удаление (как создавать новые стили, вы уже знаете).

В верхней части панели CSS Styles вы уже заметили два переключателя: Apply Styles и Edit Styles. Мы не рассматривали их, т. к. они пока что нам были не нужны. Но сейчас они пригодятся.

Как видите, по умолчанию включен переключатель Apply Styles, и список панели CSS Styles имеет вид, показанный на Рисунок 10.3. Говорят, что панель CSS Styles работает в режиме применения стилей. При этом вы можете щелкнуть по любому пункту этого списка, и Dreamweaver тотчас применит соответствующий стиль к выделенному вами элементу страницы. Но, к сожалению, править стили при этом неудобно: вы не можете выбрать стиль без того, чтобы он не был применен. Что же делать?

Включите переключатель Edit Styles. Панель в этом случае примет такой вид, как на Рисунок 10.27. Она переключится в режим правки стилей, в котором очень удобно именно управлять стилями, не опасаясь, что услужливый Dreamweaver применит выбранный стиль к выделенному вами элементу страницы.

Как видите, список стилей в этом режиме имеет несколько другой вид — он стал иерархическим. В качестве ветвей списка выступают таблицы стилей и Web-страницы, в которых сохранен тот или иной стиль. Более того, в этом случае Dreamweaver правильно показывает ВСЕ заданные вами стили, даже переопределения тегов! Это же просто замечательно: теперь нам видно все. что мы нагородили! Но Dreamweaver идет дальше: он показывает даже сам код определения стилей — в правой колонке списка. (Правда, если этот код достаточно велик, вам придется прокручивать список по горизонтали, но это не вина Dreamweaver.)

Управление таблицами стилей

Кроме манипуляций над отдельными стилями, Dreamweaver предоставляет возможность управлять целыми таблицами стилей. Вы можете редактировать их, создавать и удалять, а также присоединять к документу внешние таблицы и экспортировать внутренние таблицы во внешний файл.

Как правило, нужда редактировать саму таблицу стилей возникает нечасто. Dreamweaver предоставляет достаточно мощные средства правки стилей по отдельности, вне зависимости от того, где они сохранены. Но если все же вам понадобится отредактировать таблицу стилей, выполните одно из нижеперечисленных действий:

нажмите кнопку Edit Style Sheet (Рисунок 10.29) в правом нижнем углу панели CSS Styles;
дважды щелкните по свободному пространству списка стилей (он должен находиться в режиме правки стилей, т. е. должен быть включен переключатель Apply Styles);
выберите пункт Edit Style Sheet в контекстном или дополнительном меню панели CSS Styles;
выберите пункт Edit Style Sheet в подменю CSS Styles контекстного меню окна документа или меню Text.

обозревателей поддерживают все атрибуты CSS.

Внимание

Далеко не все программы Web- обозревателей поддерживают все атрибуты CSS. Поэтому перед тем, как применить тот или иной атрибут, справьтесь в руководстве по CSS, поставляемым с Dreamweaver MX.

Dreamweaver не всегда корректно отображает

Внимание

Dreamweaver не всегда корректно отображает элементы страницы, к которым было применено специальное CSS-форматирование. Чтобы увидеть правильные результаты использования того или иного атрибута стилей, воспользуйтесь Web-обозревателем.

Временные таблицы стилей

Еще одна из новых возможностей Dreamweaver MX — это поддержка так называемых временных таблиц стилей. Временные таблицы стилей действуют не все время, а только тогда, когда вы редактируете свою Web-страницу в среде Dreamweaver (таблицы времени редактирования), но не действуют в Web-обозревателе. Другие таблицы могут, наоборот, быть отключены, когда вы редактируете страницу в Dreamweaver (таблицы времени просмотра), а действовать только в Web-обозревателе. Иногда такие таблицы стилей бывают полезны.

Как же работать с временными таблицами стилей? Очень просто!

Выберите пункт Design Time Style Sheets в контекстном или дополнительном меню панели CSS Styles. Этот пункт также доступен в подменю CSS Styles контекстного меню окна документа и меню Text. На экране появится диалоговое окно Design Time Style Sheets (Рисунок 10.37).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<?><FONT COLOR="#FF0000">Это цитата.</FONT></P>

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

<P><FONT COLOR="#FF0000" size="-1">Это цитата.</FONT></P>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cit { color: #FF0000;

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

Здесь мы поместили в определение стиля помещен новый атрибут font-size, задающий размер шрифта. И присвоили ему значение smaller, задающее шрифт на одну ступень меньший, чем у родительского элемента.

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

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

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

H1 | { color: #FF0000;

font-size: smaller }

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

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

H1 I { color: #FF0000;

font-size: smaller }

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

<Н1>Курсивный заголовок</Н1> А следующий текст:

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

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

будет отображаться как обычно. А такой стиль:

I.cit { color: #FF0000;

font-size: smaller }

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

<i class="сit:">Маленысий зеленый курсивчик

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

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

<Р ID="cit">это цитата.</Р>

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

#cit { font-size: smaller; font-style: italic }

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

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

.cit { font-size: smaller;

font-style: italic } I { color: #00FF00 } HI I { color: #FF0000;

font-size: larger }

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

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

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

BODY ( background-color: #000000 )

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

background-color.

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

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