CSS - средство для создания лучших сайтов

Леха ББ aka Alexys

Спецвыпуск Xakep, номер #027, стр. 027-032-3

<div class="hdr2" style="text-align: left;"> Хочу налево :)</div>

Оживление страниц с помощью CSS

Выше описаны 3 формы использования CSS'а. Какую когда и куда совать - решать тебе. Но с помощью CSS'а можно не только управлять шрифтами. CSS может частично заменить Java Script, но намного более интересных вещей можно добиться при совместном использовании CSS с Java Script'ом, SSI и др.

Не стоит раскатывать губы по поводу того, что CSS может полностью заменить JS или Flash. Не для того он предназначен. Да и не было бы тогда ничего кроме CSS'а. Но вот изменение вида ссылки при наведении и нажатии на нее мыши - очень даже легко. Для этого нужно описать стили для линков (тэг <a>, если еще не забыл) в нескольких состояниях: новые ссылки - куда не ступал броузер человека, посещенные ссылки - куда уже ступал раз или больше, ссылки при наведении мыши. Начни описывать стили ссылок с общего описания (фактически все новенькие линки):

a {font-family: Tahoma; color: black; font-size: 11px; font-weight: normal; text-decoration: none; font-style: normal; text-align: left;}

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

a:visited {font-family: Tahoma; color: magenta; font-size: 11px; font-weight: normal; text-decoration: none; font-style: normal; text-align: left;}

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

a:hover {color: blue; text-decoration: underline;}

При наведении ссылка будет становиться синей и подчеркнутой. Можно также сделать и изменение цвета фона под ссылкой, смещение ссылки в сторону и т.п. (a:hover {color: blue; text-decoration: underline; margin-left: 20px; background-color: yellow;}), только по ходу экспериментов следи, чтобы у тебя ничего не уезжало.

a:active описывает вид ссылки в момент нажатия на нее. Лично у меня такой момент длится намного меньше секунды (столько же длился даже на первом пне), так что я почти ничего не успеваю заметить. Уж не для тормозов ли ее придумали :)?

Если хочешь сделать новые и старые линки одинаковыми, то можно сделать запись более компактной:

a, a:visited {font-family: Tahoma; color: black; font-size: 11px; font-weight: normal; text-decoration: none; font-style: normal; text-align: left;}

При надобности использовать несколько видов ссылок на странице используй классы. Обзови их для удобства a1, a2 и т.д.

.a1, .a1:visited {font-family: Arial; font-size: 12px; color: blue;}

.a1:hover {color: black;}

Вызов таких классов происходит как обычно:

<a class="a1" href="http://www.xakep.ru">www.xakep.ru</a>