АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2002 ГОД

Устрой себе легкую жизнь

• Все журналы \ Номер 10/181 `2002 от 11.03.2002 \ Устрой себе легкую жизнь

Никита СЕНЧЕНКО guru@bi.com.ua

(Продолжение, начало см. МК № 31—32, 34—35, 47, 49—52 (150—151, 153—154, 166, 168—171))
Сегодня тема очень «вкусная». Специально берег ее для одной из последних статей.

Мы поговорим о том, как с помощью каскадных таблиц оформлять ссылки, изменять вид курсора и html-форм. Но давайте по порядку.

Оформление ссылок.

Для начала позвольте напомнить, что ссылка — это указатель на другой html-документ или любой файл, размещенный по определенному адресу (URL), или же на часть текущего документа. Позвольте также напомнить (хотя уверен, что в этом нет необходимости), что ссылки задаются с помощью тэгов <A href=“URL”>.Внутрь этих тэгов может помещаться любой (строковый или блочный) элемент. Однако нас будут интересовать сегодня в основном текстовые ссылки.

Думаю, никто не будет возражать, что общее впечатление пользователя от html-страницы во многом зависит от того, насколько красиво и грамотно оформлены ссылки. По умолчанию IE подчеркивает ссылки и выделяет их синим цветом. Посещенные ссылки отображаются фиолетовым и также подчеркнуты. Довольно убогое, надо сказать, зрелище получается.

Но эта проблема решается очень легко. Еще в CSS1 были предусмотрены возможности управления видом текстовых ссылок. Давайте рассмотрим их подробнее.

Во-первых, можно написать так:

Такая ссылка будет отображаться неподчеркнутой и в красном цвете. Но это неинтересно и неудобно: не прописывать же нам одни и те же стили для каждого элемента А на странице! Тем более что в CSS существует «оружие», специально предназначенное для оформления ссылок. Имя ему —псевдоклассы (именно так они названы в официальных документациях).

Псевдоклассы имеют вид:

Таким образом, можно задавать вид ссылок во всех состояниях: с помощью A:link — для обычных ссылок, которые пользователь еще не посетил, A:visited — для уже посещенных ссылок, A:active — для «активных» ссылок (пользователь кликнул по ссылке, но документ, на который она указывала, еще не загрузился), A:hover — для ссылок, на которые наведен курсор. В фигурных скобках { } для каждого из этих псевдо-классов можно задавать любые стили (см. предыдущие статьи). Как обычно, они записываются в виде пар «свойство:значение»…

К примеру, мы хотим сделать ссылки неподчеркнутыми, жирными и отобразить их темно-синим цветом. Посещенные ссылки пусть будут иметь такой же вид, как и непосещенные, а при наведении курсора ссылки будут становиться, к примеру, оранжевыми и подчеркнутыми.

Тогда запишем так:

Что получилось — см. на рис. 1.

Скажу сразу, что A:active используется дизайнерами крайне редко, и потому я тоже больше не буду упоминать об этом псевдоклассе. Тем более что если для A:active собственное форматирование явным образом не задано, «активные» ссылки отображаются по умолчанию точно так же, как и непосещенные (A:link).

Наш пример довольно примитивен, поскольку создан лишь с целью продемонстрировать работу псевдоклассов. Как вы оформите ссылке на своей странице — исключительно дело вашей фантазии. И вкуса, конечно.

Чтобы закрепить материал, приведу еще один, уже более сложный пример:

Что получилось — см. на рис. 2.

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

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

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

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

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

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

Хочу обратить ваше внимание на то, что из-за специфической природы псевдоклассов и их необычного синтаксиса их нельзя задавать внутри элемента, в атрибуте style (как это делается для всех других стилей — к примеру, <H1 style=“color:red”>).

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

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

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

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

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

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

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

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

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

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

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

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

Курсоры

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

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

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

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

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

Что получается — см. на рис. 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 управлять формами?» Пожалуй, сегодня самое время уделить внимание и этой теме.

Для тех, кто не в курсе, форма — это все то, что находится между тэгами <FORM> и </FORM>. Сюда относится текстовое поле, «флажок», кнопка, выпадающее меню и т. д.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Идёт загрузка...

Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:
Комментарий:
Введите символы или вычислите пример: * Обновить