Глава 13 Создание приложений Ajax, не использующих сервер 525

13.2.3. Гибкое CSS-форматироеание

Без CSS наши Web-страницы выглядели бы так, как показано на рис. 13.4: серыми и неприглядными. Чтобы улучшить данный пример, мы применим к элементам правила стилевого оформления CSS. Стили позволяют легко редактировать свойства в будущем, не требуя редактирования HTML-файла. Первым элементом, для которого мы разработаем стиль, будет внешний контейнер div и строка заголовка.

Применение стиля к контейнеру и заголовку

Упомянутый ранее элемент divNewsHolder можно считать контейнером для нашего приложения. Он позволяет размещать программу чтения RSS-лент на странице и задавать ее ширину. Поскольку для представления остальных строк мы используем элементы div, они будут занимать 100% доступной им ширины страницы. Задавая ширину в контейнере, мы можем жестко задать размер остальных элементов, что облегчит их последующие обновления. Реализация сказанного с помощью CSS показана в листинге 13.2.

Листинг 13.2. Правила CSS для контейнера и заголовка

/ / О Элемент div контейнера #divNewsHolder{

width: бООрх;

border: 2px solid black; padding: Орх;

)

// © Элемент div заголовка #divNewsTitle{

font-size: 20px; height: 26px;

background-color: #BACCD9; // © Высота строки

J line-height: 26px;

//О Счетчик #spanCount{

//© Структура основана на "плавающих" элементах

float: right; font-size: 15рх; padding-right: 10px;

> •

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

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

Рис. 13.5. К элементам d i v контейнера и заголовка применены правила CSS

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

Последним этапом форматирования строки заголовка будет перемещение элемента spanCount О к правому краю заголовка {изначально он находится перед заголовком). Для этого используется свойство float ©, значение которого устанавливается равным right. Вследствие этого наш текст выравнивается по правому краю, независимо от ширины элемента-контейнера (причем на заголовок данное правило не влияет). Размер шрифта основного текста можно сделать немного меньше, чтобы он не так бросался в глаза, как заголовок. Свойство padding-right определяет смещение текста от правого края, чтобы он не соприкасался с границей контейнера. Теперь стилевое оформление контейнера и заголовка завершено; результат его применения показан на рис. 13.5.

На рис. 13.5 видно, что строка заголовка очень отличается от других строк, стиль которых мы еще не определили. Слово Loading располагается в правой части элемента div, а текст внутри элемента div центрирован по вертикали. Граница элемента div, представляющего контейнер приложения, окружает все остальные элементы.

Далее мы займемся стилевым оформлением оставшихся элементов div.

Стилевое оформление содержимого окна

Следующий этап — определение стиля среднего участка, или тела, нашего приложения (листинг 13.3). Раздел тела будет содержать отформатированную информацию RSS-ленты. Элементы div divNewsl и divNews2 наложатся друг на друга; это нужно для создания эффекта перехода. Для реализации этого эффекта мы будем так увеличивать прозрачность слоя, чтобы постепенно становился виден слой, расположенный под ним.

Листинг 13.3. Правила CSS для элементов div тела

//О Отформатировать divAd #divAd{

//© Задать ширину-

width: 100%;

//© Задать высоту height: 400рх;

//О Скрыть полосу прокрутки overflow: hidden;

//© Отформатировать границы border-top: 2px solid black;

Глава 13 Создание приложений Ajax, не использующих сервер 527

border-bottom: 2px solid black;

}

// © Задать стиль обоих элементов div новостей

#divNews1, #divNews2{

// в Задать ширину и высоту width: 100%;

height: 40Opx; background: #D9CCBA;

//О Задать относительное расположение position: relative;

//© Если необходимо, показать полосы прокрутки

overflow: auto;

// © Придвинуть элементы div к краю

left: Opx;

1

/ / О Разместить первый элемент d i v #divNewsl{top: Opx;}

// © Разместить второй элемент d i v #divNews2{top: -4Q0px;}

Прежде всего нам требуется определить стиль элемента divAd О, представляющего собой контейнер элементов span RSS-лент. Ширина © устанавливается равной 100%, а высота © — 400рх. Нам не нужно, чтобы в данной строке использовалась полоса прокрутки, поэтому значение свойства overflow О устанавливается равным hidden. Это означает, что если ширина какого-то элемента будет больше 400 пикселей, он будет частично не видим. Другие элементы div внутри данного контейнера позволяют использовать прокрутку, поэтому содержимое мы не потерям. После этого мы задаем стиль верхней и нижней границ © в виде черных линий шириной 2 пикселя. Боковые границы не требуются, поскольку для общего контейнера задана ненулевая границы. Если бы мы задали границу вокруг всей строки, ее ширина по бокам была бы равна 4 пикселям, а сверху и снизу — всего 2 пикселям, т.е. выглядела довольно несуразной.

Далее необходимо отформатировать два элемента div, вмещающих содержимое, — divNewsl и divNews2 ©. Их свойства можно задать одновременно, разделив их идентификаторы запятой. Значения ширины и высоты © задаются такими же, как у элемента div внешнего контейнера. Задание относительного (relative) положения элементов div © позволяет размещать их относительно родительского контейнера divAd, в отличие от абсолютного (absolute) размещения, привязанного к левому верхнему углу окна браузера. Свойство overflow элементов div © задается равным auto, что позволяет при необходимости отображать полосы прокрутки. Последний этап — установка левой позиции элементов © равной 0 пикселей, что позволяет выравнивать элементы div, чтобы между их краями не было промежутков.

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

Рис. 13.6. Применение правил CSS к элементам d i v тела

свойства положения. Поэтому вертикальное положение элемента divNewsl О устанавливается равным 0 пикселям. Таким образом, этот элемент будет прилипать к верхней границе родительского элемента div. Положение элемента divNews2 © устанавливается равным -400рх. Почему мы используем отрицательное значение? Дело в том, что, как показано на рис. 13.4 и 13.5, второй элемент div располагается ниже по странице, чем первый элемент div. Поскольку высоту контейнера мы установили равной 400 пикселям, элемент divNews2 необходимо поднять на эти 400 пикселей, чтобы он выровнялся по верху родительского элемента div (так же, как divNewsl). Обращаясь к рис. 13.6, мы видим, что, в отличие от рис. 13.5, два элемента div теперь накладываются друг на друга.

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

Настройка нижнего колонтитула

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

Листинг 13.4. Правила CSS для элемента d i v нижнего колонтитула .

Глава 13. Создание приложений Ajax, не использующих сервер 529

// © Центрировать текст text-align: center;

// О Добавить заполнение padding-top: 4рх;

padding-bottom: 4px;

}

//© Определить стиль элементов формы #divControls input{

//© Установить размер и цвета

width: lOOpx; background-color: #8C8C8C; color: #000000;

f o n t - s i z e : Юрх;

}

С элементом div нижнего колонтитула divControls мы соотносим такие правила CSS О, чтобы этот элемент согласовывался со строкой заголовка. Цвет фона © данного элемента выбран таким же, как у заголовка. Текст горизонтально выравнивается по центру элемента ©. Далее добавляется заполнение сверху и снизу О, чтобы содержимое не прилипало к границе. Добавлять границу к данному элементу div не обязательно, поскольку для средней строки определена верхняя граница, а три остальные границы определены для внешнего контейнера.

Последним этапом CSS-форматирования нижнего колонтитула будет применение стилей к элементам формы, чтобы они согласовывались с общим стилем приложения. Для обращения к элементам кнопок ©, расположенным в divControl, используется структура, сформированная следующим образом: имя элемента div, пробел и имя дескриптора. Это означает, что указанные свойства будут сопоставлены только с элементами, расположенными в данном дескрипторе div. Все остальные элементы страницы с таким же именем дескриптора этих свойств не получат.

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

На рис. 13.7 видны все свойства, соотнесенные с элементами div. Мы определили размеры, цвета, кегли, границы, заполнение и многое другое. Свойства CSS этих элементов можно настроить так, чтобы они соответствовали любой заданной теме Web-сайта или личным предпочтениям. Далее нам необходимо получить текст для нашего RSS-клиента!