Как использовать псевдоклассы для стилей ссылок для программирования HTML5 и CSS3

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

Как создать стандартную ссылку

Добавление стиля в ссылку легко. В конце концов, (тег, который определяет ссылки) является только тегом HTML, и вы можете добавить стиль к любому тегу. Вот пример, где ссылки черные с желтым фоном:

a {цвет: черный; background-color: yellow;}

Это отлично работает, но ссылки немного сложнее, чем некоторые другие элементы. Ссылки фактически имеют три состояния :

• Обычный: Это стандартное состояние. Без добавления CSS большинство браузеров отображают невидимые ссылки как синий подчеркнутый текст.

• Посещенные: Это состояние включено, когда пользователь посещает ссылку и возвращается на текущую страницу. Большинство браузеров используют фиолетовый подчеркнутый стиль, чтобы указать, что ссылка была посещена.

• Наведение: Состояние зависания активируется, когда мышь пользователя задерживается над элементом. Большинство браузеров не используют состояние зависания в своих настройках по умолчанию.

Если вы применяете стиль к тегам на странице, стиль применяется ко всем состояниям всех якорей.

Как стиль состояний ссылок

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

Взгляните на код и посмотрите, как это делается:

linkStates. html a {цвет: черный; background-color: white;} a: visited {color: black; background-color: # FFFF33;} a: hover {color: white; background-color: black;}

Псевдо-классы и ссылки
Эта ссылка в норме
Эта ссылка была посещена
Мышь витает над этой ссылкой

Ничего особенного в ссылках в HTML-часть кода. Ссылки меняют свое состояние динамически, пока пользователь взаимодействует со страницей. Таблица стилей определяет, что происходит в разных состояниях. Вот как вы приближаетесь к объединению кода:

1. Сначала определите стиль обычной ссылки, создав стиль для тега.

   Если вы не определяете какие-либо другие псевдоклассы, все ссылки будут следовать обычным стилям ссылок.

2. Сделайте стиль для посещенных ссылок.

   Ссылка будет использовать этот стиль после посещения этого сайта во время текущего сеанса браузера. Селектор a: visited указывает ссылки, которые были посещены.

3. Сделайте стиль для зависающих ссылок.

   Стиль a: hover применяется к ссылке только при наведении курсора мыши на ссылку. Как только мышь покинет ссылку, стиль вернется к стандартному или посещаемому стилю, если это необходимо.

Лучшие методы ссылок

Стили ссылок имеют некоторые особые характеристики. Вы должны быть немного осторожны, как применять стили к ссылкам. При применении стилей к ссылкам рассмотрите следующие проблемы:

• Порядок важен. Обязательно сначала определите обычный якорь. Псевдоклассы основаны на стандартном стиле привязки.

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

• Проверка посещенных ссылок. Тестирование посещенных ссылок немного сложно, потому что после посещения ссылки он остается посещенным. Большинство браузеров позволяют удалять историю браузера, которая также должна очищать состояния ссылок до невидимого.

• Не изменяйте размер шрифта в режиме зависания. Наведение изменяет страницу в режиме реального времени. Стиль зависания с другим размером шрифта, чем обычная ссылка, может вызвать проблемы. Страница переформатирована, чтобы принять более крупный шрифт, который может быстро перемещать большой объем текста на экране. Безопаснее менять цвета или границы на зависании, но не на семейство шрифтов или размер шрифта.