Создание буквицы

Хотя существует псевдоэлемент :firstletter, он не очень хорошо поддерживается в настоящее время. Поэтому для создания буквицы можно использовать тег. Он позволяет отделить первую букву от абзаца. Свойство float также имеет не лучшую поддержку. В рассматриваемом примере к нему было добавлено свойство width, чтобы работать с Internet Explorer (и все равно оно плохо работает на Мac). Без свойства float заглавная буква будет выше, чем остальные буквы в строке, хотя это тоже может оказаться приемлемым. .dropcap {font: bold 200 % sans-serif; color: teal; width: 24pt; float: left; } Жили были дед и бабка...

Произвольные курсоры

Произвольные курсоры CSS2 описывает возможность задания произвольных курсоров. В сие Windows курсоры хранятся в файлах с расширением cur и представляют с. растровое изображение размером 32 x32 или меньше, обычно 16- цветное. Иногда курсоры также могут быть анимированными, в этом случае файл имеет расширение ani. В соответствии со спецификацией CSS2 браузер должен загружать файл курсора, расположенный по указанному URL - точно так же, как и в случае загрузки шрифта. Свойство принимает форму списка значений курсоров, разделенных запятыми. Таким образом, правило CSS #specialcursor {cursor: url("robot.cur"), url("robot.cur"), default;} задает курсор, принимающий один из двух видов: robot.cur или robot.cur, либо вид курсора по умолчанию, когда пользователь проводит указатель мыши над элементом, чей атрибут ID имеет значение speciaicursor. Впрочем, учтите, что, как и в случае с изменением цвета ссылок, изменение формы курсора может привести некоторых пользователей в недоумение по оду значения нажимаемой области.

Панель навигации с эффектами

Вертикальная панель навигации на основе списка с эффектами изображения. Воспользовавшись фоновым изображением и селектором :hover, можно создать список навигации, в котором у каждого элемента будет привлекательный фон. Для впечатляющих результатов нужно добавить контрастное фоновое изображу ние для состояния hover, как показано в примере. body { font: bold 15px Georgia, Times, serif; color: black; } a { color: white; text- decoration: none; display: block; } a:link { color: white; } a:visited { color: yellow; } a:hover { color: white; background-image: url(back.gif); } a:active { color: red; } #nav, #nav a, #nav li { width: 100 px; margin: 0 ; padding: 0; list-style-type: none; } li{ background-image: url(linkback.gif); border-bottom: 3px solid white; } Обратите внимание, что установлено фоновое изображение как для элемента списка, так и для состояния hover. В результате будет получена панель навигации с роскошным дизайном и профессиональными визуальными эффектами.

Красивые ссылки

CSS имеет несколько параметров для изменения стиля ссылок. Свойство Значение NS IE A:link 4+ 4+ A:visited 4+ 4+ A:active 4+ 4+ A:hover 6+ 4+ Обозначения: NS - Netscape Navigator, IE - Internet Explorer, 4+ - версия браузера 4 и выше. Как видно из таблицы, поддержка селектора a:hover появилась в Netscape только начиная с 6 версии, а до этого просто отсутствовала, что вызывало у многих пользователей недоумение. СелекторыA:link Определяет стиль для обычной непосещенной ссылки. A:visited Определяет стиль для посещенной ссылки. A:active Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. A:hover Определяет стиль для ссылки при наведении на нее мышью. Не поддерживается браузером Netscape до 6 версии. Одно из наиболее популярных применений CSS - это убирание подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли - раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и то и другое одновременно. Параметр hover не работает в Netscape до 6 версии, поэтому его следует использовать осторожно. Пример 1. Использование параметра HOVER A:link {text-decoration: none} // убирает подчеркивание для ссылок A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline; color: red;} // делает ссылку красной и подчеркнутой при наведении на нее курсора Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной. Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением параметра text- decoration: underline overline в A:hover. Пример 2. Использование подчеркивания в ссылках A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline overline; color: red;} // ссылка подчеркнутая, надчеркнутая и красного цвета Третий пример показывает, как изменять размер ссылки при наведении на нее курсора. Пример 3. Изменение размера ссылки A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {font-size: 24; font- weight: bold; color: red;} // ссылка изменит свой размер на больший

Главная