Благодаря каскадным таблицам стилей внешний вид виджета можно легко привести в соответствие с оформлением существующего сайта.
Первый класс CSS, ajaxWebSearchBox, предназначен для оформления внешнего вида окна поиска. Окно должно позиционироваться на стра¬нице, поэтому в свойстве position класса должно быть значение absolute:
.ajaxWebSearchBox
position: absolute; background-color: #0d1e4a; width: 500px; \ padding: 1px;
Режим абсолютного позиционирования - это единственное обязатель¬ное требование. Все остальные свойства класса могут быть изменены по вашему вкусу. В данном примере окно поиска имеет темно-синий фон, ширина окна составляет 500 пикселов, и со всех четырех сторон предусмотрен отступ по 1 пикселу. Этот отступ будет выглядеть как рамка вокруг содержимого окна.
Следующий класс, ajaxWebSearchHeading, представляет оформление тек¬ста заголовка окна и гиперссылки, закрывающей окно с результатами поиска. Гиперссылка располагается в правом верхнем углу и позицио¬нирована абсолютно. Поэтому класс ajaxWebSearchHeading должен быть позиционирован относительно:
{
position: relative; background-color: #1162сс; font: bold 14px tahoma; . height: 21px; color: white; padding: Зрх Орх Opx 2px;

}
В этом классе единственное обязательное требование - необходимость относительного позиционирования. Все остальные свойства вспомога¬тельные и нужны только для сохранения единства оформления. Цвет фона заголовка светло-голубой, заголовок выводится жирным шриф¬том Tahoma белого цвета высотой 14 пикселов. Высота заголовка со¬ставляет 21 пиксел, а отступы по левому и верхнему краям - 1 пиксел.
Гиперссылка закрытия окна, как уже говорилось, позиционирована абсолютно
ajaxWebSearchCloseLink '
position: absolute; right: 5рх; top: Зрх;
text-decoration: none;
color: white; -
a:hover.ajaxWebSearchCloseLink color: red;

Элемент размещается в 5 пикселах от правого края ивЗш верхней границы, т. е. в правом верхнем углу. Текст ссылки въ шрифтом белого цвета без дополнительных эффектов. При на указателя мыши на ссылку ее текст окрашивается красным цв
Обратите внимание, что здесь не задействованы псевдоклассы < или active (см. далее). Для данной ссылки значение атрибута пг гда будет игнорироваться (потому что обработчик события вс вращает значение false), из-за чего ссылка никогда по-насто* сможет быть расценена как посещенная (visited) или активная (а
Следующий класс - ajaxWebSearchResults - служит для оформле нели результатов поиска:
В этом классе вообще нет свойств CSS, которые обязательно , были бы иметь какие-то определенные значения. Значения па ных здесь свойств просто призваны облегчить восприятие теи информации. Панель имеет светло-голубой цвет фона и рамку i ной 5 пикселов. Помимо всего прочего, можно определить стиль да сообщения о загрузке данных:
.ajaxWebSearchResults div
text-align: center; font: bold 14px tahoma; color: #0a246a;
Данный элемент не имеет имени класса, но это не мешает оформление элементов, дочерних по отношению к предыдущему, примере текст дочернего элемента центрируется по гориэ и выводится жирным шрифтом голубого цвета высотой 14 пикеЕдинственным обязательным требованием здесь является значение block свойства display. Благодаря этому каждая ссылка выводится в отдельной строке. Отступ шириной 5 пикселов обеспечивает допол¬нительное визуальное отделение ссылок друг от друга, чем облегчает их восприятие. Текст ссылок выводится шрифтом Tahoma высотой 12 пикселов. Цвет шрифта темно-синий, хорошо контрастирующий со светло-голубым фоном окна ajaxWebSearchResults.
При наведении указателя мыши на одну из таких ссылок цвет фона становится голубым, а цвет шрифта белым.
В последнем правиле этого примера определяются свойства псевдоклас¬са visited. С помощью этого класса интерфейс сможет по-особому выде¬лить уже посещенные ссылки, что поможет пользователю сохранить силы и время, избежав посещения страниц, на которых он уже был.
Как уже говорилось в этом разделе, данный виджет существенно отли¬чается от двух предыдущих виджетов, поэтому сейчас мы рассмотрим, как он должен использоваться.