; 
text-decoration:none} 
a.external:hover {color:white; font-style:bold} 
Затем примените класс external для всех внешних гиперссылок, как показа- 
но в следующем примере: 
<а class="external" href="www.NVBizNet2.com"> 
Ссылка на другой сайт 
X теперь представьте себе, что когда-нибудь вы решите изменить стиль всех 
внешних гиперссылок на сайте или изменить значение свойства hover этих ги- 
перссылок. Не ничего проще. Нужно только изменить значения свойств в одном 
или обоих правилах списка стилей, и стиль всех внешних ссылок на Web-сайте 
будет изменен. В этом-то и заключается мощь каскадных списков стилей.

Глава 4. Каскадные списки стилей 209 
Создание эффекта отбрасывания тени 
Несмотря на то что сеть Internet повидала немало изменений, одно осталось 
неизменным - загрузка и вывод на экран изображений (даже небольшого разме- 
ра) занимает больше времени, чем загрузка и визуализация страницы, содержа- 
щей только текст. Конечно, в этом нет ничего удивительного. Файлы графичес- 
ких изображений занимают больший объем, чем HTML-документы, поэтому для 
их передачи по Internet требуется больше времени. 
При необходимости создания трехмерного эффекта отбрасывания тени тек- 
стом баннера можно предположить, что потребуется преобразовать текст в изоб- 
ражение и только после этого наложить эффект. Тем не менее, графическое изоб- 
ражение текста баннера имеет намного больший размер, даже чем количество 
байт, необходимое для хранения двух копий самого текста. Поэтому для мини- 
мизации времени загрузки для баннеров желательно использовать только текст, а 
не его графическое изображение. Баннер можно создать с помощью операторов 
позиционирования каскадных списков стилей и обычного текста. 
Для создания текстового баннера с эффектом отбрасывания тени текстом (как 
показано на рис. 4.15) необходимо два текстовых элемента — один для текста 
баннера, а второй для его тени. Вставьте в список стилей правило для задания 
стиля и положения элемента баннера и еще одно правило для форматирования 
и позиционирования текста тени. Несмотря на то что текст баннера может быть 
любого цвета, для тени лучше использовать серый или черный цвет. 
ПРАКТИКУМ 
Давайте начнем с создания класса каскадного списка стилей, приведенного ниже, 
который позволяет требуемым образом отформатировать и установить положение 
баннера на Web-странице: 
.banner {position 
top 
left 
font-size 
font-family 
color 
absolute; 
7px; 
lpx; 
lOOpx; 
'arial black' 
red} 
Impact Arial Helvetica Verdana; 
' " • ' • • ' - • • ' - ' • - •• • • - ••^~• . . . — i 
Оравлв В*д Избранное Сервис 
J J -3 4 JU J ->-Ш- 
c j e j hnp //htmbvebdesign/ChaptertM/FigureO4-l 5 htm 
• M щ 1 1 1 mm %^^ 
Web Design 
Рис. 4.15. Текстовый баннер с эффектом отбрасывания тени

210 Глава 4. Каскадные списки стилей 
Затем добавьте на страницу класс отбрасывания тени, который использует тот 
же самый тип шрифта и тот же самый размер, что и класс banner. Как показано 
в следующем примере, для смещения текста тени относительно текста баннера 
задействуются свойства top и left, несколько отличные от соответствующих па- 
раметров класса banner! 
.shadow {position 
top 
left 
font-size 
font-family 
color 
absolute; 
15px; 
7px; 
lOOpx; 
1arial black' Impact Arial Helvetica Verdana; 
gray} 
В приведенном примере Web-браузер поместит класс, отмеченный стилем 
banner, на семь пикселей ниже верхнего края Web-страницы и на один пиксель 
правее ее левого края. Текст, отмеченный стилем shadow, будет расположен на 15 
пикселей ниже его края Web-страницы и на семь пикселей правее ее левого края. 
И, наконец, примените два определенные в списке стилей класса banner и 
shadow к идентичным текстовым элементам, содержащимся в двух контейнерах 
разделителях, как показано ниже: 
 
HTML & Web Design
 
HTML & Web Design
 
 
Для достижения требуемого эффекта поэкспериментируйте со значениями 
СВОЙСТВ top И left класса shadow. 
Использование графических границ 
Независимо от того, создаете ли вы сайт компании или свой личный, добавь- 
те заметную границу или панель вдоль левого края каждой страницы сайта. По- 
добное форматирование позволяет сделать внешний вид страниц более привле- 
кательным и, как результат, посетитель будет чувствовать себя более "уютно" и 
останется на са