Ссылки

Как сделать красивые ссылки при помощи CSS

Автор: Семавин Антон
Добавлен: 00.00.0000

Что такое CSS я думаю Вы уже знаете из урока «Каскадные таблицы стилей – введение». Если нет, то обязательно изучите его.

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

Шаг #1. Пропишите в таблице следующий код:

A:link {color: #000000; text-decoration: none}
A:visited {color: #000000; text-decoration: none}
A:active {color: #000000; text-decoration: none}
A:hover {color: # FF0000; text-decoration: underline}

Сейчас разберем что здесь к чему.

Данные режимы будут отображать ссылки в 4х ситуациях:

A:link – Обозначает ссылку в покое, которую мы видим сразу после загрузки страницы. (по умолчанию она голубая).
A:visited – Ссылка, которую Вы уже нажимали (по умолчанию темно-фиолетовая).
A:active – Ссылка, если нажать на нее, но при этом не отпуская кнопку мыши отвести курсор в другое место.
A:hover – Ссылка при наведенном на нее курсоре.

Шаг #2. Займемся атрибутами.

2.1. Первое что нас интересует – это цвет ссылок (color: #000000;)

Поставьте значение нужного Вам цвета вместо того, что выделено красным.

2.2. Второе – подчеркнутые или нет ссылки (text-decoration: underline).

Здесь параметр underline – означает, что ссылка будет подчеркнута, none – не подчеркнута.

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

----------------
Антон Семавин - руководитель проекта Commerce-design.com «Центр коммерческого дизайна» Обучающие материалы по основам разработки фирменного стиля, статьи книги и многое другое Вы найдете по адресу http://commerce-design.com/

ВЕРСИЯ ДЛЯ ПЕЧАТИ | КОД ПУБЛИКАЦИИ | УСЛОВИЯ ПЕРЕПЕЧАТКИ

Последние Уроки в категории: CSS

Как сделать красивые ссылки при помощи CSS

Комментарии