Форматирование текста с использованием каскадных таблиц стиля (CSS)

Во Flash 5 отформатировать текст, выводимый в динамическое поле, можно было, только используя поддержку плейером некоторых тегов HTML. Этих скромных возможностей вполне достаточно, если разметить нужно небольшой текст. Но тобы качественно отформатировать объемный фрагмент текста (например, такая потребность может dозникнуть, если при помощи Flash реализуется сайт или рекламная презентация), требовались огромные усилия. Действительно, представьте, что вам необходимо выделить из основного текста название компании красным цветом, жирным подчеркнутым курсивом. Конечно, один раз несложно набрать:

Имя_Компании


Но если имя встречается в тексте десятки раз? Ведь каждый раз придется повторять одно и то же описание. А если элементов, к которым применяется стиль, отличный от основного, довольно много (гиперссылки, списки, сноски и т. д.). Тогда текст описания aорматирования значительно превысит по объему основной текст. Мало того, что вам придется выполнять скучную и рутинную работу по копированию одних и тех же наборов тегов для всех подлежащих выделению элементов, так еще существенно возрастет вес итогового текста, что немаловажно с учетом малой скорости передачи данных в Интернете.


Нельзя ли сделать так, чтобы наборы тегов, задающие стиль отображения каждого из типов элементов, сохранялись лишь единожды, а элементы [ранили лишь ссылки на них? Попыткой решения этой задачи стало появление во Flash MX класса Text Format, позволяющего создавать стили, не связанные с каким-то конкретным текстом. Таким образом, данный класс дает возможность отделить представление текстовой информации от ее содержания, благодаря чему одно описание стиля может быть применено к сколь угодно большому числу текстовых фрагментов.

К сожалению, класс Text Format на практике довольно малоэффективен по следующим причинам:

• Чтобы применить стиль, задаваемый объектом класса TextFormat, к нужному участку текста, необходимо указать индексы граничных символов соответствующей подстроки. Если текст содержит сотни или тысячи символов, то определить номера начинающего фрагмент символа и символа, его завершающего, очень сложно. И дело даже не в том, что трудно подсчитать знаки. Просто такие символы, как пробелы, переносы строк, знаки табуляции, не визуализируются, но являются абсолютно полноценными знаками и должны быть учтены.

• Класс TextFormat дает возможность провести разметку текста лишь до компиляции фильма.


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

Итак, как в случае форматирования текста с использованием HTML, так и при применении для этого класса TextFormat имеются существенные недостатки. Первый подход связан с избыточностью описания разметки, второй — излишне трудоемок и не может быть использован для форматирования текста, подгружаемого в уже скомпилированный фильм. А нельзя ли создать инструмент, который, обладая достоинствами как HTML, так и класса TextFormat, был лишен их недостатков. Можно. Причем для этого не нужно придумывать чего-то принципиально нового. В традиционных web-технологиях задача отделения описания представления документа от его содержания успешно решена еще в 1996 году, когда была разработана технология CSS (Cascading Style Sheets — каскадные таблицы стилей). Во Flash MX 2004 появилась возможность форматирования текста с использованием CSS первой версии, носителем которой является класс StyleSheets, Это, без сомнений, большой шаг вперед, существенно облегчающий создание во Flash проектов, со-держащих объемные фрагменты текста.

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


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

В этом разделе мы подробно разберем особенности форматирования текста с использованием CSS. Чтобы овладеть этими навыками, вам не обязательно знать технологию каскадных стилей. Основы CSS мы кратко рассмотрим в рамках данного раздела. Полученных базовых сведений вам будет вполне достаточно, так как Flash-плейер поддерживает лишь наиболее важные элементы CSSI. Единственное, чтобы разобраться в особенностях CSS, вы должны понимать основные идеи HTML.

Основные положения технологии CSS

В этом подразделе мы изучим ключевые идеи CSS-форматирования. Все примеры будут приведены для HTML-страниц (так как многие из описываемых возможностей Flash-плейером не поддерживаются).

Грубо говоря, CSS позволяет определить, в каком стиле должен отображаться текст, заключенный в некоторый тег(для обозначения этого текста обычно используется термин «элемент»). Например, если вы хотите, чтобы текст ссылки выводился зеленым курсивом с размером шрифта в 50 пунктов, вам следует создать следующее правило:

A:{color:#00FF00; font-style:italic; font-size:50}

Чтобы использовать данное правило, его нужно связать с HTML-документом (или текстовым полем — в случае ActionScript).


При этом все ссылки в нем отобразятся в заданном стиле. При создании НТМ L-страницы наиболее просто связать CSS-правило и документ можно, поместив его в специальный тег

3айдите на наш сайт



Открыв созданный HTML-документ в браузере, вы увидите, что ссылка отобразилась именно так, как мы хотели. Замечательно!

Разберемся, как же задаются правила CSS. Любое правило имеет два основных элемента: селектор и описание. Упрощенно мы можем читать, что селектор — это имя тега, текст внутри которого должен быть задан в стиле, приведенном в описании. Если быть более точными, то селектор нужно понимать как идентификатор элемента или группы элементов, к которым должен быть применен стиль.


Описание стиля в правиле представляет собой набор пар свойство — значение, заключенных в фигурные скобки. В «настоящем» CSS свойств более 100. BCSS, поддерживаемом Flash-плейером, их на порядок меньше. Многие свойства совпадают по названию с соответствующими тегами или атрибутами тегов (например, атрибут SIZE тега FONT и свойство font — size). Подавяющее же большинство свойств имеет уникальные имена (а некоторые даже не имеют аналогов в HTML). Отделяются пары свойство — значение друг от друга при помощи точки с запятой.

Одно или несколько правил, помещенных в тег STYLE или внешний CSS-файл, называются таблицей стилей.

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

В{text-decoration:underline}

Если нескольким селекторам должен соответствовать один стиль, их нужно перечислить через за-пятую:

Н1, Н2, НЗ {color:#00FF00; font-style:italic}

Если какая-то характеристика должна быть присуща всем стилям, нужно ввести так называемый универсальный селектор. Он обозначается символом «*». Например, в результате интерпретации следующего кода весь текст в документе будет задан курсивным шрифтом:



<Н1>Столица нашей родины — Москва


Если элемент, обозначаемый тегом X, помещается в текст тега Y, то элемент X называется потом-ком Y. Например, в ледующем коде элемент «Москва» является потомком элемента «Столица нашей родины - Москва»:

<Н1>Столица нашей родины - <Е> Москва


Потомок наследует все характеристики стиля предка. Если некоторые свойства собственного стиля потомка имеют значения, отличные от величин аналогичных свойств стиля предка, то они перекрывают их. Например, если размер шрифта у предка — 20 пунктов, а у потомка — 22 пункта, то текст потомка отобразится шрифтом с 22-м кеглем. Если у потомка имеются свойства, которых нет у предка, то они добавляются в результирующий стиль.

Элемент с нулевой степенью вложения наследует стиль, принятый в документе по умолчанию. В случае HTML такому стилю соответствует стиль, связанный с тегом , В ActionScript стиль по умолчанию зависит от параметров текстового поля. Настроить стиль по умолчанию под себя позволяет универсальный селектор.

Степень вложения тегов не ограничена. Поэтому возможно наследование стилей, образованное многими «поколениями».

В CSS возможно задавать стиль для элементов Y, вложенных в тег X. Для этого нужно использовать следующий синтаксис:

X Y {property:value...}

Например, следующая таблица стилей делает текст, помещенный в теги H1 и В, синим. Но если элемент В вложен в элемент Н1, его текст будет красным:

Н1 {color:#0000FF}
В {color:#0000FF}
H1 В {color:#FF0000}

Если В является потомком А второго и более поколения, для задания его стиля служит следующая запись:

А*В {property:value...}

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

H1 [atr='value']{property:value...},

здесь:

• H — имя тега;

• atr — имя атрибута;

• value — значение, которое должно быть присуще атрибуту.

В HTML группа элементов одного типа может быть выделена в класс. Для этого в задающий их тег вводится атрибут class. Например:

<Н1 class-'myClass'> Данный элемент будет принадлежать классу myClass

Чтобы создать отдельный стиль для элементов типа X, относящихся к классу myClass, необходимо использовать следующий синтаксис:

X.myClass {property:value...}

Если к одному классу относятся элементы разных типов, то задать стиль класса следует через уни-версальный селектор:

*.myClass {property:value...}

Или проще:

.myClass {property:value...}

Выделять элементы в класс стоит, если одна или несколько их характеристик должны отличаться от аналогичных свойств всех остальных элементов данного типа (или типов). Так, следующий код делает ссылки на сайты издательств «Новое знание» и «Питер» красными, а все остальные — си-ними:



Посетите сайт издательства
"Новое знание"
<Р><А CLASS= 'myClass' HREF='http://www.piter.com'> Посетите сайт
издателества "Питер"

<А HREF='http://www.bhv.ru'> Посетите сайт издательства BHV


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

ID — это атрибут тега, позволяющий задать уникальное имя элемента. Например:

<Н1 ID='special'> Данный элемент должен быть уникальным

Чтобы создать индивидуальный стиль для элемента типа H1 с ID 'special', нужно набрать:

H1#special {property:value...}

Следующий код делает все гиперссылки синими, а ссылку на сайт «Нового знания» — красной:



Посетите сайт издательства
"Новое знание"
<Р><А HREF='http://www.piter.com'> Посетите сайт издательства "Питер"


Чрезвычайно важным для практики понятием CSS является псевдокласс. Псевдоклассы позволяют различать разные состояния одного и того же элемента. Для нас будут интересны псевдоклассы элемента <А href> (гиперссылки).

• link. Соответствует незадействованной ранее гиперссылке в обычном состоянии.

• visited. Описывает обычное состояние ссылки, по которой ранее уже осуществлялся переход.

• hover. Состояние гиперссылки при наведении на нее указателя мыши.

• active. Состояние гиперссылки при ее нажатии.

В качестве примера использования псевдоклассов приведем код, задающий для каждого состояния гиперссылки отдельный стиль:



Посетите сайт издательства "Питер"


Язык CSS может использоваться с любым структурированным форматом документов, например, с приложениями, написанными на языке XML (extensible Markup Language). Фактически XML-приложения зависят от таблиц стилей больше, чем HTML-приложения, так как в первом случае разработчики могут создавать свои собственные теги, которые не могут быть отображены про-граммами просмотра. Вы можете разметить XML-документ произвольными тегами, а затем сделать их описание при помощи CSS (оно должно быть сохранено во внешнем файле). Браузер, анализируя XML-документ, будет интерпретировать каждый тег исходя из его CSS-описания. Подобный подход позволяет довольно эффективно создавать сайты и другие структурированные документы.

Приведем пример совместного применения XML и CSS. Пусть у нас имеется следующий XML-документ:


War and Peace
L.N.Tolstoy
Third Volume
First Part

Since the end of 1811th...



Каждому его элементу мы должны поставить в соответствие некоторый стиль. Для этого во внеш-нем ess-файле (назовем его styles) сохраняем следующее описание:

BOOK {font-family:sans-serif}
HEADLINE {display:block; font-size:30; font-weight:bold; text-align:center}
AUTHOR {display:block; font-size:25; font-style:italic; text-align:center}
VOLUME {display:block; font-size:23; color:#000055; text-align:center}
PART {display:block; font-size:23; text-align:center;
text-decoration:underline}
TEXT {text-indent:10; font-size:18; text-align:left; margin-left:5}

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



Сохраняем XML-документ и пробуем его открыть при помощи браузера. В результате отобразится довольно неплохо структурированный текст.

Используя ХМL-разметку, можно весьма просто и качественно форматировать самые сложные до-кументы. Flash-плейер также поддерживает введение собственных тегов, что позволяет применить полученные выше навыки на практике.

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