CFA LogoCFA Logo Computer
Загрузка поиска
Новости Компьютеры Прайс-лист [Новое] Прайс-лист [Б/У] Для ноутбуков Конфигуратор ПК Заказ, Оплата, Доставка Сервис объявления Драйвера Статьи Как нас найти Контакты
Новости
RSS канал новостей
Список материнских плат компании Biostar пополнился свежими моделями под поколения процессоров Intel ...
Похоже, что компания Gionee в эти дни очень сильно занята. Только недавно мы сообщали об анонсе ...
Компания Enermax в своем коротеньком пресс-релизе рассказала общественности о старте серии недорогих ...
SteelSeries представляет новую игровую клавиатуру APEX 150, которая дает игрокам высочайшую надежность ...
Пока в Сети живо обсуждают информацию о возможном выпуске компанией NVIDIA графического ускорителя ...
Самое интересное
Программаторы 25 SPI FLASH Адаптеры Optibay HDD Caddy Драйвера nVidia GeForce Драйвера AMD Radeon HD Игры на DVD Сравнение видеокарт Сравнение процессоров

АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 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 собственное форматирование явным образом не задано, «активные» ссылки Рис. 1отображаются по умолчанию точно так же, как и непосещенные (A:link).

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

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

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

Довольно изящный эффект, надо сказать. В роли ссылки здесь выступает уже не строковый, а блочный элемент: в тэги <DIV> заключена надпись. Стили для надписи заданы непосредственно внутри элемента DIV, но они сейчас нас мало интересуют. Совсем другое Рис. 2дело — атрибуты, заданные для 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.

Рис. 3   Рис. 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-форм.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рекомендуем ещё прочитать:






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

Ваше имя:
Ваша почта:

RSS
Комментарий:
Введите символы: *
captcha
Обновить





Хостинг на серверах в Украине, США и Германии. © www.sector.biz.ua 2006-2015 design by Vadim Popov