заключена надпись. Стили для надписи заданы непосредственно внутри элемента DIV, но они сейчас нас мало интересуют. Совсем другое дело — атрибуты, заданные для A:link, A:visited и A:hover.

Вы наверняка помните по прошлым статьям, что границы outset делают блочный элемент, к которому они применены, как бы приподнятым, выпуклым, а inset-границы, наоборот, вдавленным — подобно нажатой и отжатой кнопке. В результате получается, что в нормальном состоянии блок с надписью приподнят, а при наведении на него курсора мыши он утапливается. И, заметьте, при этом мы не использовали никаких продвинутых средств типа JavaScript — все просто и одновременно красиво.

Теперь давайте разберемся, где эти самые псевдо-классы ссылок можно описывать.

Есть два варианта:

• заключить описание ссылок в тэги ;

• описать в отдельном файле со стилями (к примеру, styles.css). При этом для того, чтобы этот файл подгружался при запуске данной html-страницы, в любом месте между тэгами и нужно прописать:

``

Хочу обратить ваше внимание на то, что из-за специфической природы псевдоклассов и их необычного синтаксиса их нельзя задавать внутри элемента, в атрибуте style (как это делается для всех других стилей — к примеру,

).

У вас может возникнуть вполне резонный вопрос: «А что делать, если в одном месте страницы я хочу отобразить ссылку, оформленную по схеме X, а в другом месте — по схеме Y? Как быть, ведь воспользоваться атрибутом style нельзя?»

Однако и у этой проблемы есть решение. Причем, довольно простое. Достаточно только вспомнить о такой штуке как классы (см. МК № 31-32 (150-151)).

Класс, напомню, позволяет описать свойства CSS сразу для группы объектов. К примеру, если вы хотите определенные слова в тексте вашей веб-страницы выделить полужирным начертанием, красным цветом и поместить, скажем, на желтый фон, то вместо того, чтобы прописывать эти три свойства для каждого слова по отдельности, можно создать класс:

<style> .chtoto {color:red; background-color:yellow; font-weight:bold} </style>

Ну а затем в нужных местах пишем так:

<span class="“chtoto”">слово</span>

Преимущества такого подхода очевидны. Если таких мест, где нужно применить именно данное форматирование, на странице много, то прописать во всех этих местах class=“chtoto” намного легче, нежели каждый раз набирать целую строку с описанием стилей. К тому же, если нам вдруг понадобится изменить, к примеру, цвет текста этих слов, скажем, на синий, то нам не нужно будет менять описание стиля color во всех местах — достаточно только изменить его в одном лишь месте (в описании нашего класса chtoto).

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

<style> A.bar:link {…} A.bar:visited {…} A.bar:hover {…} A.menu:link {…} A.menu:visited {…} A.menu:hover {…} A.content:link {…} A.content:visited {…} A.content:hover {…} </style>

Названия классов могут быть какими угодно. Это не обязательно bar, menu или content — все, что только придет вам в голову. Ну и, понятное дело, вместо троеточий в примере в фигурных скобках вы прописываете те свойства, которыми хотите наделить свои ссылки. Далее, в тех ссылках, которые расположены в «панели», вы прописываете:

<a class="“bar”">

Для ссылок в «меню»:

</a><a class="“menu”">

И для ссылок в основной (содержательной) части страницы по аналогии:

</a><a class="“content”">

В результате ссылки, находящиеся в разных местах страницы, будут отображаться соответствующим образом. Такой подход применен сегодня чуть ли не на каждом первом сайте Сети. Кроме того, с таким совмещением псевдо-классов и классов CSS сегодня справляются все ведущие браузеры — IE, Opera и Netscape.

Кстати, в CSS псевдо-классы ссылок не оказывают влияния ни на один элемент, кроме А. Поэтому можно писать упрощенно:

:link {…} :visited {…} :hover {…}

Однако если вы используете классы, то писать «А» обязательно: A.boooom:link {…} и т. д.

Курсоры

Ну что ж, со ссылками разобрались. Теперь займемся курсором. По умолчанию обычный курсор-стрелка при наведении на ссылку превращается в «лапку». Однако на самом деле курсоров намного больше. Но обычными средствами заставить курсор принять какую-то особую форму невозможно. В каскадных таблицах такая возможность предусмотрена. За это отвечает атрибут cursor. Это довольно новомодное свойство, и появилось оно только в CSS2.

Рассмотрим пример:

</a><a href="“http://www.site.com”" style="“cursor:wait”">Ссылка на сайт</a>

Результат — на рис. 3.

Ну, Netscape, естественно, отдыхает и никаких признаков жизни не подает. В IE все работает. По крайней мере, в версиях 5.0 — 5.5.

В приведенном примере, в принципе, роль ссылки может выполнять не только строка, но и любой другой элемент, например картинка, — атрибут cursor все равно будет отрабатывать правильно. Мало того, он работает не только со ссылками, но и с любыми объектами HTML. Ну, например:

<img src="“example.gif”" style="“cursor:help”">

Что получается — см. на рис. 4.

Ниже привожу все возможные виды курсоров:

•auto — устанавливается автоматически (текстовой курсор, стрелка или «лапка» — в зависимости от объекта);

•crosshair — крест;

•default — по умолчанию;

•hand — «лапка»;

•text — текстовой курсор;

•help — вопросительный знак;

•wait — песочные часы;

•e-resize — стрелка вправо;

•ne-resize — стрелка вправо и вверх;

•nw-resize — стрелка влево и вверх;

•n-resize — стрелка вверх;

•se-resize — стрелка вправо и вниз;

•sw-resize — стрелка влево и вниз;

•s-resize — стрелка вниз;

•w-resize — стрелка влево.

Главное — не переусердствуйте с курсорами! Используйте свойство cursor очень осторожно.

Оформление html-форм.

И в завершение еще одна небольшая, но довольно интересная тема. Пока выходили в свет предыдущие статьи, я часто получал от читателей письма с вопросом «Как с помощью CSS управлять формами?» Пожалуй, сегодня самое время уделить внимание и этой теме.

Для тех, кто не в курсе, форма — это все то, что находится между тэгами

и

. Сюда относится текстовое поле, «флажок», кнопка, выпадающее меню и т. д.

Давайте сначала сделаем заготовку, что-то типа бланка анкеты (см. рис. 5). Подобного рода формы встречаются в Сети очень часто, и при разработке своего сайта вы наверняка столкнетесь с необходимостью такую форму создать.

Эта форма сделана без применения каскадных таблиц. На вкус и цвет, как известно, товарищей нет, но мне такая форма не по душе — слишком уж у нее мрачноватый вид получается, как в музее :-). Давайте-ка подключим свою фантазию и… CSS, конечно :-). И немного нашу форму приукрасим. Какие же атрибуты здесь можно использовать?

•border-style — задает границы полей и кнопок;

•border-color — задает цвета границ;

•background-color — задает цвет фона поля или цвет кнопки;

• все свойства font — задают тип (font-family), размер (font-size) или жирность (font-weight) текста, который или будет написан на кнопке, или будет вводиться пользователем в текстовое поле, к примеру;

•color — определяет цвет текста на кнопке или в текстовом поле;

•width и height — устанавливают соответственно ширину и высоту элемента;

•cursor — этот атрибут мы рассмотрели сегодня. Применять его в формах целесообразно только для кнопки.

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

Немного творческий исканий… и что же получилось в результате (см. рис. 6)?

Так, согласитесь, намного лучше. Вот код описания стилей для текстовых полей в данном примере:

.text {font-size:12; background-color:#778899; color:#FFFFFF; border: black solid 1px; font-weight:bold; font-family:"verdana"}

Опять же, все зависит от вашей фантазии. Так что дерзайте, главное — не переборщить.

На сегодня все. Удачи!

(Продолжение следует)