КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Псевдостили гиперссылок
А теперь мы узнаем еще об одной интересной возможности, предлагаемой 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 последнего задает зачеркивание текста, а попе — отсутствие подобного "украшения".
Вообще, псевдостили лучше всего задавать во внешней таблице стилей, поскольку все таблицы сайта должны выглядеть одинаково. Тем более это касается гиперссылок. Представьте себе удивление и гнев посетителя, если на различных страницах гиперссылки отображаются разным цветом.
Работа с таблицами стилей в Dreamweaver
Вы уже много узнали о таблицах стилей. И, наверно, вас уже давно мучает вопрос: а что же Dreamweaver? Поддерживает ли он работу с таблицами стилей? И если поддерживает, то насколько? И почему автор не упомянул об этом ни слова, а все заваливал нас примерами на этом ужасном и ни капельки не понятном HTML? Неужели нам все-таки придется создавать стили вручную?!!
Успокойтесь. Все в порядке. Dreamweaver прекрасно поддерживает и внешние, и внутренние таблицы стилей и позволяет вам создавать стили, "понятные" самым последним на момент его выхода в свет Web-обозревателям. А применять созданные стили к элементам страницы вообще проще простого.
Но зачем же понадобилось столько исходного кода? Для того чтобы вы поняли, что такое таблицы стилей и как они работают. А разъяснить это проще всего на примерах, написанных на языках HTML и CSS. К тому же, знать языки HTML и CSS Web-дизайнеру совсем не вредно, наоборот, полезно. Лишние знания — багаж необременительный и зачастую оказывающийся совсем не лишним.
В этом есть, правда, еще один резон. Дело в том, что Dreamweaver не поддерживает удобное создание и присвоение элементам страницы встроенных стилей. Единственный способ создавать их — вводить вручную в мини-редакторе HTML или пользоваться диалоговым окном Tag Editor,описанным в главе 2.
Дата добавления: 2014-11-13; просмотров: 132; Мы поможем в написании вашей работы!; Нарушение авторских прав |