Как использовать CSS для стилизации гиперссылок на веб-страницах

May 2, 2024

Если вы знакомы с HTML, вы знаете, что вы можете контролировать цвет текста и гиперссылок на веб-странице. Но с каскадными таблицами стилей вы можете сделать гораздо больше. Некоторые теги, такие как тег привязки гиперссылки, имеют так называемые псевдоклассы, связанные с различными состояниями тега. Например, тег гиперссылки имеет четыре состояния; ссылка, посещенная, наведенная и активная.

Когда ссылка не используется (не выбрана), это ссылка на сайт псевдокласс или государство. посетил состояние после того, как ссылка была использована. зависать состояние, когда мышь проходит по ссылке и активный состояние, когда вы нажимаете на ссылку. Волшебство CSS заключается в том, что каждое состояние ссылки контролируется независимо через псевдоклассы. Таким образом, вы можете установить различные свойства для каждого состояния. Вы можете использовать любое свойство, связанное с тегом привязки гиперссылки в CSS.

В приведенном ниже примере мы установим для состояния связи красный цвет, для посещенного состояния - фиолетовый (# 400040), для наведения и активных состояний - красный, подчеркнутый и курсив.

Заметка--Стрелка

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

Как видите, мы установили для свойства color красный цвет для всех состояний, кроме состояния посещения, для которого мы установили пурпурный цвет. Поскольку мы хотим, чтобы гиперссылка была подчеркнута только для состояний наведения и активного состояния, мы установили для свойства text-украшение значение none для двух других состояний. Наконец, мы установили курсивный стиль курсивом для состояния наведения и активного состояния, что приведет к тому, что текст станет курсивом, когда вы перейдете по ссылке или нажмете на нее, и мы вернули текстовое оформление обратно, чтобы подчеркнуть. Это всего лишь простой пример. Вы можете сделать свои стили настолько простыми или причудливыми, насколько пожелаете. Однако есть несколько вещей, которые нужно запомнить.

Веб-браузеры отличаются тем, как они справляются с этим. Обычно, если для свойства задано определенное значение, оно будет наследоваться (передаваться) любым состояниям, перечисленным после него. В нашем примере выше, первым состоянием, перечисленным в нашем коде, было состояние ссылки, и мы установили для свойства color красный цвет. В большинстве случаев это будет передаваться в другие три состояния, если мы не изменим его с помощью кода, как мы делали для посещенного состояния. Кроме того, если бы мы не установили текстовое оформление обратно, чтобы подчеркнуть, текст для hover и активных состояний не был бы подчеркнут, потому что мы отключили его в первом состоянии. Но вы не можете рассчитывать на все браузеры, чтобы сделать это. Поэтому лучше всего устанавливать все свойства для каждого состояния индивидуально.

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

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

Видео инструкция: Курс HTML и CSS - CSS разметка страницы в две колонки [ Урок 14 ] (May 2024).

Как использовать CSS для стилизации гиперссылок На веб-страницах HTML, псевдоклассы, связанные с различными состояниями тега, псевдокласс, гиперссылка, кодирование гиперссылок в CSS, псевдокласс CSS, состояния CSS, состояние тега, необычные ссылки на веб-странице с CSS, модные ссылки

Предыдущая статья

Следующая статья

Wix Сайт с нуля - Wix Pro Галерея 1

May 2024

Галерея Wix Pro очень универсальна, но проста в настройке и использовании. Давайте посмотрим, что он может сделать для вас.Как и следовало ожидать от Wix, галерея Wix Pro отзывчива и отлично...

компьютеры

Опубликуйте свое цифровое искусство с Blurb

May 2024

Blurb.com - это веб-платформа для публикации и маркетинга, предлагающая программное обеспечение Blurb BookSmart.р, Это бесплатное программное обеспечение для верстки книг, которое облегчает его...