| |
e, as
the font-size gets larger, so does the size of the initial
c aP- ^ ...
Рис. 4.14. Абзацы с начальными заглавными буквами
Глава 4. Каскадные списки стилей 2 0 7
Настройка внешнего вида гиперссылок
Если в HTML-коде Web-страницы специальное форматирование для элемента
привязки (т.е. гиперссылки) не определено, Web-браузеры подчеркивают текст
гиперссылки и, как правило, используют один цвет (например, синий) для ото-
бражения непосещенных ссылок и другой (например, пурпурный) для посещен-
ных ссылок. Каскадные списки стилей дают вам возможность выбора: можно ос-
тавить определение внешнего вида гиперссылок за Web-браузером посетителя
или самим установить, как они должны выглядеть. Например, можно написать
правила каскадного списка стилей, которые будет изменять цвет шрифта, цвет
фона и даже при желании удалить выделение подчеркиванием. Более того, для
различных гиперссылок можно применять различные стили. Так, например, для
гиперссылок, внедренных в другие элементы Web-страниц, цвет фона можно ос-
тавить без изменения. Тем не менее, для гиперссылок меню навигации можно
использовать различные цвета фона или внедрить изображения, которые выделят
эти гиперссылки в рамках всего содержимого страницы. Можно даже создать
правила списка стилей для создания специального эффекта, который изменяет
внешний вид ссылки при выделении ее указателем мыши.
ПРАКТИКУМ
Для настройки внешнего вида гиперссылок необходимо добавить на страницу пра-
вила, задающие значения свойств одного, отдельных или всех четырех псевдоклас-
сов дескрипторов привязки:
a:link Непосещенная ссылка.
a:visited Посещенная ссылка. Это означает, что в журнале посещенных
ссылок Web-браузера содержится элемент, соответствующий адресу
перехода по ссылке (т.е. URL-адрес, указанный в атрибуте href
гиперссылки). ' -
a:hover Указатель мыши посетителя находится над гиперссылкой.
a:active Указатель мыши посетителя находится над гиперссылкой и посе-
титель нажимает или отпускает левую кнопку мыши (или правую
кнопку для мыши, настроенной налевшей).
Например, для установки темно-зеленого цвета непосещенных и пурпурного
цвета посещенных гиперссылок поместите на страницу следующие правила кас-
кадного списка стилей:
a:link {color:darkgreen}
a:visited {color:magenta}
При необходимости удаления выделения гиперссылок подчеркиванием вы
должны обеспечить другой метод выделения. Например, можно изменить тип
шрифта ссылок или изменить цвет их фона. Однако, какой бы метод вы не из-
брали, его нужно применять ко всем классам гиперссылок. Для применения од-
ного и того же стиля ко всем гиперссылками удалите ссылку на цсевдокласс из
правила списка стилей, как показано в следующем примере:
a {text-decoration:none; background-color:yellow}
208 Глава 4. Каскадные списки стилей
В приведенном примере свойство text-decoration, значение которого равно
"попе", убирает подчеркивание гиперссылок, а свойство background-color ис-
пользуется для установки желтого цвета фона гиперссылок. Обратите внимание,
что Web-браузеры будут применять содержащиеся в этом правиле объявления к
дескрипторам привязки (а) всех псевдокалассов гиперссылок. Таким образом,
при использовании приведенного выше правила каждая гиперссылка на Web-
странице будет иметь желтый цвет фона, а подчеркивание текста гиперссылок
будет отсутствовать.
Для создания дополнительных эффектов можно воспользоваться псевдоклас-
сом "hover" для изменения внешнего вида гиперссылок при подведении к ги-
перссылками указателя мыши. При создании такого эффекта можно пользовать-
ся любым типом форматирования. Так, например, при необходимости вывода на
экран текста гиперссылки шрифтом, размер которого в 1.5 раза больше размера
текущего шрифта, курсивом и с голубым цветом фона, вставьте на страницу сле-
дующее правило:
a:hover {font-size:I.5em; font-style:italic; background-color:cyan}
И в качестве последнего шага в настройке внешнего вида гиперссылок на
Web-сайте можно сделать так, чтобы ссылки на страницы этого сайта отличались
от ссылок на страницы, внешние по отношению к данному сайту. Такой же
стиль форматирования можно применить для сайтов, имеющих две зоны — для
всех пользователей и только для зарегистрированных членов. В таком случае вы
можете помочь обычным посетителям избежать нажатий ссылок, которые выво-
дят на экран окно ввода пароля для перехода в зону сайта, доступную только
для зарегистрированных членов. Для организации такого типа форматирования
необходимо присвоить каждому типу гиперссылок класс списка стилей, который
будет форматировать ссылки требуемым образом.
Например, предположим, что необходимо, чтобы все гиперссылки на другие
Web-сайты (т.е. внешние гиперссылки) выводились светло-зеленым цветом шриф-
та, пурпурным цветом фона без подчеркивания. Более того, требуется, чтобы
только внешние ссылки при наведении на них указателя мыши меняли цвет шриф-
та на белый. Нет проблем. Добавьте на страницу следующие правила списка стилей:
а.external {color:lightgreen; background-color:purpl
|
|
