68 Часть I. Новый взгляд на Web-приложение
2.3. Определение внешнего вида с помощью CSS
Каскадные таблицы стилей, или CSS, часто используются не только в Ajax, но и в классических Web-приложениях. CSS позволяют централизованно определять стили и применять их к элементам Web-страницы. В дополнение к таким понятиям, как цвет, обрамления, фоновые изображения, прозрачность и размер, таблицы стилей определяют способ взаимодействия элементов, в результате чего удается обеспечить достаточно сложные визуальные эффекты.
В классических Web-приложениях таблицы стилей позволяют единожды определять стиль и применять его к различным Web-страницам. Говоря об Ajax, мы уже не имеем в виду последовательное отображение различных страниц. В этом случае таблицы стилей позволяют создавать набор предопределенных представлений элементов и динамически изменять внешний вид интерфейса, затрачивая минимальное время на кодирование. В данном разделе мы рассмотрим основные примеры использования CSS, но прежде надо рассказать о том, как определяются правила CSS.
CSS задают стили документа, определяя правила. Обычно правила помещаются в отдельный файл, на который ссылается Web-страница. Правила стилей могут быть также определены в составе самой страницы, но такой подход не приветствуется.
Правило стиля состоит из двух частей: селектора и объявления стиля. Селектор определяет, к каким элементам относятся стили, а объявление задает свойства стилей, применяемых к этим элементам. Предположим, что мы хотим, чтобы заголовки первого уровня в составе документа (определенные посредством дескриптора <Н1>) выводились красным цветом. Для этого надо создать следующее правило:
hi { color: red }
Здесь селектор имеет очень простой вид. Он сообщает о том, что данный стиль применим ко всем элементам <Н1>. Объявление стиля также просто; оно модифицирует одно свойство. На практике и селекторы, и объявления стилей обычно бывают более сложными. Рассмотрим их возможные разновидности. Начнем с селекторов.
2.3.1. Селекторы CSS
Помимо указания типов HTML-дескрипторов, к которым применяются стили, мы можем ограничить правило определенным контекстом. Задать контекст молено различными способами: указывая тип HTML-дескриптора, тип класса или уникальный идентификатор элемента.
Рассмотрим сначала селекторы, которые задают типы дескрипторов. Например, если вам надо применить рассмотренный выше стиль только к элементам <Н1>, которые содержатся внутри элементов <DIV>, приведенное выше правило примет следующий вид:
div hi { color: red; }
Такие селекторы называют также селекторами на базе элементов, так как при определении, должен ли стиль применяться к элементу DOM, учитыва-
Глава 2. Знакомство с Ajax |
69 |
ется тип элемента. Мы можем также определять классы, которые не связаны с типами HTML-дескрипторов. Например, чтобы, определить класс с именем callout, который присутствует в цветном блоке, надо написать следующее выражение:
.callout { border: solid blue lpx; background-color: cyan }
Для того чтобы связать класс с элементом, надо указать в составе HTMLдескриптора атрибут class:
<div>I'll appear as a normal bit of text</div>
<div class='callout'>And I ' l l appear as a callout!</div>
С элементом можно связать несколько классов. Предположим, что мы определили класс loud следующим образом:
.loud { color: orange }
Ниже показано, как можно применить стили, определенные посредством классов loud и callout, к элементам документа.
<div class='loud'>I'll be bright orange</div>
<div class='callout'>I'11 appear as a callout</div> <div class='callout loud'>
And I ' l l appear as an unappealing mixture of both!
Текст, соответствующий третьему элементу <div>, будет отображаться оранжевым цветом в бирюзовом блоке с синим обрамлением. Для того чтобы улучшить внешний вид интерфейса, можно также объединять стили CSS.
Сочетая классы и правила на основе элементов, есть возможность определять классы, которые будут воздействовать только на конкретные типы элементов. Например:
span.highlight { background-color: yellow }
Этот стиль будет применим только к элементам <span>, для которых указан атрибут highlight. К элементам <span> без данного атрибута и к элементам других типов, содержащим атрибут class='highlight', правило применяться не будет.
Классы можно сочетать с указанием родительских и дочерних элементов. div.prose span.highlight { background-color: yellow }
Это правило применимо только к элементам <span> класса highlight, вложенным в элементы <div> класса prose.
В случае необходимости мы можем определять правила, которые относятся только к элементам, имеющим уникальный идентификатор. Этот идентификатор задается с помощью атрибута id. Конкретный идентификатор может быть указан в составе не более чем одного элемента, следовательно, подобные селекторы выбирают в документе один элемент. Для того чтобы выделить специальным образом кнопку, посредством которой закрывается документ, можно использовать правило, подобное следующему:
#close { color: red }
70 Часть I. Новый взгляд на Web-приложение
CSS также позволяет определять стили на базе псевдоселекторов. В браузере определен ограниченный набор псевдоселекторов. Например, в результате обработки представленного ниже выражения первая буква элемента будет иметь больший размер и отображаться полужирным шрифтом красного цвета.
*:first - letter { font-size: 500%; color: red;
f l o a t : l e f t ;
J
Ограничить область действия этого правила можно следующим образом:
p.illuminated:first-letter { font-size: 500%;
color: red; float: left;
}
Теперь оно применяется только к элементам <р> класса illuminated. Часто используются псевдоселекторы f i r s t - l i n e и hover. Последний изменяет внешний вид гипертекстовой ссылки, на которой располагается курсор мыши. Например, чтобы при наведении курсора на ссылку она выделялась желтым цветом, надо создать следующее правило:
a:hover{ color:yellow; }
Мы рассмотрели основные принципы формирования селекторов. В примерах, иллюстрирующих сказанное, присутствовали несложные декларации стилей. Рассмотрим декларации подробнее.
2.3.2. Свойства стилей
Стиль элемента HTML-страницы может быть задан различными способами. Для универсальных элементов, например <DIV>, существуют десятки способов указания стилей. Рассмотрим некоторые из них.
Для текста в составе элемента можно задать цвет, размер шрифта, его "вес" и начертание. Если требуемый шрифт не установлен на клиентской машине, есть возможность заменить его одним из существующих. Для того чтобы абзац отображался символами серого цвета, начертание которых напоминало бы текст на экране алфавитно-цифрового терминала, можно задать следующее правило:
.robotic{ font-size: 14pt;
font-family: courier new, courier, monospace; font-weight: bold;
color: gray;
Глава 2. Знакомство cAjax |
71 |
Можно сократить запись, объединив элементы шрифта.
.robotic{
font: bold 14pt courier new, courier, monospace; color: gray;
}
В любом случае свойства стилей записываются в виде пар "ключзначение", которые отделяются друг от друга точкой с запятой.
Средствами CSS можно задать расположение и размер элемента, определить границы и область заполнения для каждой стороны или для всех четырех сторон.
.padded{ |
padding: |
4px; } |
|
.eccentricPadded |
{ |
||
p a d d i n g - b o t t o m : |
8рх; |
||
p a d d i n g - t o p : |
2рх; |
||
p a d d i n g - l e f t : |
2рх; |
||
p a d d i n g - r i g h t : |
|
1брх; |
|
margin: |
l p x ; |
|
|
} |
|
|
|
Размеры элемента задаются свойствами width и height. Позиция элемента может быть абсолютной или относительной. Абсолютная позиция указывается с помощью свойств top и left и отсчитывается в пределах всей страницы. Относительная позиция вычисляется относительно других элементов.
Для указания цвета фона предусмотрено свойство background-color. Кроме того, можно также определить фоновое изображение, указав свойство background-image.
.titlebar{ background-image: url(images/topbar.png); }
Элементы можно скрыть с помощью свойства visibility:hidden или display:none. Если задано выражение visibility:hidden, элемент не отображается, но по-прежнему занимает место на странице, a display:none полностью удаляет элемент.
Мы обсудили основные свойства стилей, необходимые для создания интерфейсов Ajax-приложений, а в следующем разделе рассмотрим, как молено применить средства CSS на практике.
2.3.3. Простой пример использования CSS
Средства CSS можно применить для создания высококачественных Webстраниц, однако нас, разработчиков Ajax-приложений, больше интересует имитация тех компонентов пользовательского интерфейса, которые пользователи привыкли видеть, работая с настольными системами. На рис. 2.2 показаны пиктограммы в виде папок, поддерживаемые с помощью CSS.
CSS выполняют две основные функции, связанные с созданием интерфейсных компонентов, подобных тем, которые показаны в правом окне на рис. 2.2. Рассмотрим каждую из этих функций.
72 Часть I. Новый взгляд на Web-приложение
Рис. 2.2. Применение CSS для поддержки компонентов пользовательского интерфейса. Оба окна сгенерированы на основе одного и того же HTML-документа; различаются только таблицы стилей.
Влевом окне таблицы стилей используются лишь для позиционирования компонентов,
ав правом окне с их помощью были выбраны цвет и изображения
Использование CSS для размещения компонентов
Первая из упомянутых выше задач — это позиционирование элементов. Для внешнего элемента, представляющего само окно, задается абсолютная позиция.
div.window{ position: absolute; overflow: auto; margin: 8px; padding: Opx; width: 42Opx; height: 28Opx;
}
Для пиктограмм, находящихся в области содержимого, задается свойство float, в результате чего они располагаются в границах родительского элемента один за другим. После заполнения очередного ряда элементов форми-
руется следующий ряд. |
I |
|
div.item{ |
||
|
||
position: relative; |
|
|
height: 64px; |
|
|
width: 5 6px; |
|
|
float: left; |
|
|
padding: Opx; |
|
|
margin: 8px; |
|
|
} |
|
|
Элемент itemName, находящийся в составе элемента item, содержит текст, |
|
|
который располагается ниже пиктограммы. Это достигается установкой верх- |
|
|
ней границы, равной высоте графического изображения. |
|
|
div.item div.itemName{ |
|
|
margin-top: 48px; |
|
|
font: lOpx verdana, arial, helvetica; |
|
|
text-align: center; |
|
Глава 2. Знакомство с Ajax 73
Использование CSS для управления внешним видом компонентов
Вторая задача, выполняемая средствами CSS, — это формирование внешнего вида элементов. Графическое представление элементов определяется именем класса, например:
div.folder { background:
transparent url(images/folder.png) top left no-repeat;
}
div.filet background:
transparent url(images/file.png) top left no-repeat;
}
div.special{
background:
t r a n s p a r e nt url(images/folder_important.png) top lef t no-repeat;
}
Для свойства background стиля пиктограммы задаются значения, запрещающие повторение. Изображение размещается в верхнем левом углу элемента, и для него установлено значение прозрачности. (Окна, представленные на рис. 2.2, воспроизведены с помощью Firefox. Internet Explorer некорректно поддерживает прозрачность изображений .png; для устранения этого недостатка используются специальные приемы. В следующей версии этот недостаток, наверное, будет устранен. Если вам надо реализовать прозрачные изображения, одинаково отображающиеся во всех браузерах, надо использовать формат .gif.)
Для конкретных элементов указаны два класса. Один из них определяет положение в контейнере, а второй — используемую пиктограмму. Например:
<div |
class='item folder'> |
<div |
class='itemName'>stuff</div> |
<div |
c l a s s = ' i t e m |
<div |
class='itemName'>shoppin g l i s t < / d i v > |
Все изображения являются фоновыми. При определении стиля заголовка используется изображение, высота которого равна высоте строки, а ширина — одному пикселю. Для этого изображения задано повторение по горизонтали.
div.titlebar{
b a c k g r o u n d - c o l o r : background - image: b a c k g r o u n d - r e p e a t :
#0066аа;
u r l ( i m a g e s / t i t l e b a r _ b g . p n g ) ; r e p e a t - x ;
Полностью HTML-код компонента показан в листинге 2.1.
74 Часть I. Новый взгляд на Web-приложение
Листинг 2.1. Содержимое файла window.html
<htmixhead>
< ! — Ссылка на таблицы стилей —>
< l i n k r e l = ' s t y l e s h e e t ' t y p e = ' t e x t / e s s ' h r e f = ' w i n d o w . e s s ' />
</head>
<body>
< ! — Элемент окна верхнего уровня —>
<div class='window'> |
|
||
<div |
c l a s s = ' t i t l e b a r ' > |
|
|
< ! — Кнопки — > |
|
|
|
<span |
c l a s s = ' t i t l e B u t t o n ' |
i d = ' c l o s e ' X / s p a n > |
|
<span |
c l a s s = ' t i t l e B u t t o n ' |
i d = ' m a x ' X / s p a n > |
|
<span |
c l a s s = ' t i t l e B u t t o n ' id='min'></span> |
||
<div |
c l a s s = ' c o n t e n t s ' > |
|
|
<div |
c l a s s = ' i t e m |
f o l d e r ' > |
|
<div class='itemName'>Documents</div> |
|||
<div |
c l a s s = ' i t e m |
f o l d e r ' > |
|
<div |
c l a s s = ' i t e m N a m e ' > l o s t |
and found</div> |
|
< ! — Пиктограмма в окне —> |
|||
<div |
c l a s s = ' i t e m |
f o l d e r ' > |
|
<div |
c l a s s = ' i t e m N a m e l > s t u f f < / d i v > |
||
<div |
class='item |
|
|
<div |
class='itemName'>shopping list</div> |
||
<div |
class='item |
|
|
<div |
class='itemName'>things.txt</div> |
||
<div |
class='item |
special'> |
|
<div |
class='itemName'>faves</div> |
||
<div |
class='item |
|
|
<div |
class='itemName'>chapter 2</div> |
||
</body>
</html>
HTML-разметка определяет не внешний вид, а лишь структуру документа. Она также указывает, к каким частям документа должно быть применено форматирование. Для этой цели используются имена классов, уникальные идентификаторы и типы самих дескрипторов. Просматривая HTML-код, мы видим, например, что одни элементы содержатся в составе других, но не можем сказать, как они будут выглядеть на экране. Редактируя таблицы стилей, можно изменить внешний вид документа, сохранив его структуру. Это видно на рис. 2.2. Таблицы стилей для компонента показаны в листинге 2.2.
Глава 2. Знакомство с Ajax 75
Листинг 2.2. Содержимое файла window.сss
div.window{ position: absolute; overflow: auto;
background-color: feeefff; border: solid #0066aa 2px; margin: 8px;
padding: Opx;
/* 1 Размеры элемента */ width: 42Opx;
height: 280px;
}
div.titlebar{
/* 2 Текстура фона */ background-color: #0066aa; background-image: url(images/titlebar_bg.png); background-repeat: repeat-x; color:white;
border-bottom: solid black lpx; width: 100%;
height: 16px; overflow:hidden;
}
span.titleButton{ position: relative; height: 16px; width: 16px; padding: Opx;
margin: Opx lpx; Opx lpx; /* 3 Выравнивание */ float:right;
}
span.titleButtonfmin{ background: transparent
url(images/min.png) top left no-repeat;
}
span.titleButton#max{ background: transparent
url(images/max.png) top left no-repeat;
}
span.titleButton#close{ background: transparent
url(images/close.png) top left no-repeat;
}
div.contents { background-color: #e0e4e8; overflow: auto;
padding: 2px; height:240px;
}
div.item{
position : relative; height : 64px; width: 56px;
float: left;
Часть I. Новый взгляд на Web-приложение
color : #004488; font-size: 18; padding: Орх; margin: 4px;
}
div.item div.itemName {
/* 4 Позиционирование текста */ margin-top: 48рх;
font: 10px verdana, arial, helvetica; text-align: center;
}
div.folder{
background: transparent url(images/folder.png) top left no-repeat;
}
div.file{
background: transparent
url(images/file.png) top lef t no-repeat;
}
div.special{
background: transparent url(images/folder_important.png) top lef t no-repeat;
Мы уже рассмотрели ряд приемов, примененных в составе данных таблиц гилей и предназначенных для форматирования внешнего вида конкретных лементов. В листинге мы также отметили фрагменты, демонстрирующие озможности CSS: размещение на экране О, текстура ©, взаимное располосение элементов © и позиционирование текста относительно графики О.
CSS — важный элемент набора инструментальных средств для разработ- и Web-приложений. Как было показано выше, каскадные таблицы стилей южно применить не только для настройки внешнего вида отдельных Webграниц, но и для формирования пользовательского интерфейса, что имеет олыное значение при разработке Ajax-приложений.
\Л. Организация просмотра с помощью РОМ
ЮМ (Document Object Model) представляет документ (Web-страницу) роцессору JavaScript. Благодаря DOM появляется возможность управять структурой документа (рис. 2.3) из программы. Такая возможность райне важна для разработчиков Ajax-приложений. В классическом Webриложении все содержимое окна браузера регулярно обновляется при поучении с сервера потока, содержащего HTML-данные. Подготавливая ноый вариант документа, можно существенно изменить интерфейс. В Ajaxриложении большая часть изменений интерфейса осуществляется с помощью DOM. HTML-элементы в составе Web-страницы составляют древовидую структуру. Корнем данного дерева является дескриптор HTML, который редставляет весь документ. В нем содержится элемент BODY, соответству-
Глава 2. Знакомство с Ajax |
77 |
Рис. 2.3. HTML-документ представляется средствами DOM как древовидная структура, каждый элемент которой соответствует HTML-дескриптору
ющий телу документа. Он, в свою очередь, является корнем отображаемой структуры. В теле документа находятся таблицы, абзацы, списки и прочие элементы, которые могут содержать другие дескрипторы.
DOM-представление Web-страницы также имеет древовидную структуру, составленную из элементов, или узлов, которые содержат дочерние узлы, и т.д. Процессор JavaScript представляет корневой узел текущей Webстраницы посредством глобальной переменной document, которая выполняет роль стартовой точки для всех действий с DOM-данными. Структуру DOM определяет спецификация W3C. Для каждого элемента древовидной структуры существует один родительский элемент, любое, в том числе нулевое количество дочерних элементов, и любое количество атрибутов, хранящихся в ассоциативном массиве (т.е. массиве, для которого ключевым значением является не числовой индекс, а текст). На рис. 2.3 показана структура документа, код которого был представлен в листинге 2.2. Данная структура отображается с помощью инструмента Mozilla DOM Inspector (подробно он