Псевдостили гиперссылок

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

Вы уже знаете, что для каждой Web-страницы можно задать цвет фона, текста и кодировку текста. Кроме того, HTML позволяет вам также сменить цвета гиперссылок, отдельно — для непосещенных, отдельно — для посещенных и отдельно — для активной гиперссылки. Этр позволяет немного оживить Web-сайт, сделать его не похожим на другие. Но возможности, предлагаемые псевдостилями, несравнимо шире. Вы можете менять шрифт, начертание и даже убирать надоевшее подчеркивание у активной гиперссылки.

Но как же это делается? Обычным переопределением стилей во внешней или внутренней таблице.

Но сначала давайте перечислим все доступные в данный момент псевдостили. Как видно из табл. 10.1, всего их четыре.

Таблица 10.1. Псевдостили гиперссылок

Псевдостиль

Описание

A: link

Применяется ко всем гиперссылкам документа

A: active

Применяется ко всем активным гиперссылкам документа

A: visited

Применяется ко всем посещенным гиперссылкам документа

A: hover

Применяется к гиперссылке, на которую указывает курсор мыши

Теперь давайте создадим небольшой пример Web-странички, использующей псевдостили.

<HTML> <HEAD>

<ТIТLЕ>Псевдостили</ТIТLЕ> <STYLE>

A: link { color: tCC0000;

background-color: #FFFFFF; text-decoration: none } A: activ

e { color: #FFFFFF;

background-color: #CC0000; text-decoration: none } A: visited

{ color: #CC0000;

background-color: ttFFFFFF; text-decoration: line-through } A: hover

{ color: #FFFFFF;

background-color: #CC0000; text-decoration: none }

</STYLE>

</HEAD>

<BODY>

<P><A НRЕF="">Гиперссылка 1</А></Р>

<P><A НRЕF="">Гиперссылка 2</А></Р>

<P><A НRЕF="">Гиперссылка 3 </А></Р>

</BODY>

</HTML>

Сохраните эту страницу в файле 10.2.htm и откройте в Web-обозревателе. Попробуйте провести курсором мыши над любой гиперссылкой и посмотрите, что из этого получится.

Автор не будет подробно разбирать таблицу стилей и ее атрибуты. Попробуйте разобраться в ней сами. Учтите только, что атрибут background-color задает цвет фона текста, а атрибут text-decoration — подчеркивание или зачеркивание текста. Значение line-through последнего задает зачеркивание текста, а попе — отсутствие подобного "украшения".

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

На правах рекламы: v=|| +// +<

::  Меню ::

Введение

ЧАСТЬ I. КАК СДЕЛАТЬ ПРОСТЕЙШИЙ WEB-САЙТ
Глава 1. Как создаются Web-страницы
Глава 2. Основные принципы работы с Dreamweaver
Глава 3. Начинаем с текста
Глава 4. Рисунки, звуки, фильмы
Глава 5. Таблицы
Глава 6. Работа с Web-сайтом

ЧАСТЬ II. ЗАНИМАЕМСЯ ПРОФЕССИОНАЛЬНЫМ WEB-ДИЗАЙНОМ
Глава 7. Фреймы
Глава 8. Табличный дизайн
Глава 9. Использование шаблонов
Глава 10. Каскадные таблицы стилей
ЧАСТЬ III. ИСПОЛЬЗУЕМ НОВЕЙШИЕ ТЕХНОЛОГИИ
Глава 11. Свободно позиционируемые элементы
Глава 12. Анимация элементов Web-страниц
Глава 13. Использование сценариев
Глава 14. Метатеги и серверные директивы
ЧАСТЬ IV. ПИШЕМ СЕРВЕРНЫЕ ПРОГРАММЫ
Глава 15. Введение в серверное программирование
Глава 16. Формы
Глава 17. Простейшие серверные приложения
Глава 18. Создание интерактивных сайтов
Заключение
‹аминат в ванной комнате: описание и характеристики материала Ѓлагоустройство садовой территории Љому можно продать аварийное авто? Џреимущества покупки авиабилетов на Tickets.by
Џреимущества автоломбардов
На что обратить внимание, сдавая часы в ломбард
Ѓлагоустройство садовой территории


:: Реклама ::

  Как создаются Web-страницы?
 


:: Статистика ::


Індекс цитування
Яндекс.Метрика

:: Навигация ::

Главная
Гостевая книга
Добавить в избраное  

 

 

 


Copyright © Asentli, 2008-2010