Как стилизовать ссылки с помощью CSS: подробное руководство для начинающих

В этом уроке мы поговорим о том, как стилизовать веб-ссылки с помощью CSS. Ссылки являются центральной частью любого веб-сайта. Они позволяют вам перемещать посетителей к другим его частям, ссылаться на источники, чтобы подчеркнуть то, что вы делаете, помогают читателям находить более релевантные сообщения в блогах и многое другое.

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

Стандарты ссылок и стиль ссылок по умолчанию

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

 <a href="https://torquemag.io/">TorqueMag</a>

Как видите, он состоит из нескольких частей:

• <a> — это оператор для создания элемента ссылки. Почему a ? Потому что в HTML ссылки также называются тегами привязки .
• href="" — все, что заключено в двойные кавычки, указывает на эту ссылку. Это адрес, на который попадет тот, кто нажмет на него.
• TorqueMag – это текст ссылки, которая появляется на странице, например, вот так (не нажимайте на нее, эта ссылка никуда не ведет).
• </a> — части, которые закрывают элемент ссылки и сообщают браузеру, что здесь заканчивается текст ссылки.

Пока так легко.

Как выглядит ссылка по умолчанию

Что становится интересным, так это когда вы смотрите на то, как этот тип ссылки выглядит на странице. Вы, наверное, видели это раньше.

Если вы объявите какую-либо старую ссылку в документе HTML и не предоставите никакой информации о стиле, она примет стиль по умолчанию:

1. Текст ссылки выделен синим цветом, а сама ссылка подчеркнута.
2. Когда вы наводите на него мышь, курсор меняется на значок маленькой руки.
3. При нажатии на нее она на секунду становится красной.
4. Как только вы перейдете по ссылке, ее цвет изменится на фиолетовый.
5. Когда вы переходите по ссылке с помощью клавиши табуляции на клавиатуре, вокруг нее появляется синяя окантовка.

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

Изучение состояний ссылок

Что-то, что также становится очевидным из вышеизложенного, это то, что ссылки имеют разные состояния, которые влияют на то, как они выглядят. Вы можете ориентироваться на них с помощью различных псевдоклассов CSS, которые позволяют вам влиять на их индивидуальный стиль. Это:

• a — это вышеупомянутый тег привязки. Он нацелен на все ссылки на всех этапах.
• a:link — для обычной непосещенной ссылки. С технической точки зрения, :link нацелен на все теги привязки, которые имеют атрибут href . На самом деле он используется не так часто. Многие люди просто a , так как теги привязки без атрибута href довольно редки, поэтому часто нет необходимости в этом типе дифференциации.
• a:visited — описывает ссылку, которую текущий пользователь посещал ранее, то есть она существует в истории браузера.
• a:hover — определяет стиль, который отображается, когда пользователь наводит курсор мыши на ссылку.
• a:active — Кратковременно видимый стиль в момент клика по ссылке.
• a:focus — ссылка, которая находится в фокусе, например, по которой пользователь перешел с помощью клавиши табуляции. hover и focus часто сочетаются друг с другом.

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

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

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

Оправдание ожиданий пользователей

И последнее отступление, прежде чем мы перейдем к тому, как вы можете вносить изменения в стиль ссылок с помощью CSS, — это поговорить об ожиданиях пользователей. Причина, по которой вы, скорее всего, легко распознали ссылки по умолчанию как ссылки, заключается в том, что определенные настройки по умолчанию были укоренены в нас как пользователях в течение очень долгого времени.

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

На практике это означает:

• Убедитесь, что ссылки каким-то образом выделены. Цвета или подчеркивание — все в порядке, если вы выделяете ссылки на странице. Избегайте таких вещей, как курсив или полужирный шрифт .
• Обеспечьте обратную связь, изменяя ссылки при наведении курсора и, в меньшей степени, при нажатии ( a:active , помните?). Вы также не должны возиться с превращением курсора в символ руки, чтобы обозначить интерактивный элемент.

Далее мы расскажем вам, как изменить все вышеперечисленное. Однако имейте в виду, что вы должны делать это умеренно, чтобы не расстраивать своих пользователей.

Как изменить стиль текста ссылки с помощью CSS

Давайте сначала поговорим о том, как изменить текстовую часть ссылки, так как именно она составляет ее суть.

Изменение цвета текста ссылки

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

Вы можете изменить цвет текста ссылки несколькими способами: цвет слов и различные системы обозначения цветов, такие как HEX-код, rgb() / rgba() , hsl() / hsla() и т. д.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

Вот как это выглядит на странице:

Чаще всего вы будете использовать что-то вроде HEX или rgb() . Использование имен цветов крайне редко за пределами простых тестовых случаев.

Используемая цветовая система зависит от различных факторов, таких как совместимость браузера или необходимость прозрачности. Однако, как вы можете видеть, назначение цвета ссылкам довольно просто с помощью свойства color , и оно работает одинаково для всех других состояний ссылки. Следовательно, вы также можете легко изменить цвет текста для :hover или :focus .

Настройка цвета фона

Помимо изменения цвета текста, вы также можете изменить цвет фона ваших ссылок и их различные состояния. Это так же просто, как использовать свойство background-color .

Вот разметка для приведенного выше примера:

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

Другие параметры оформления текста

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

Это может иметь смысл для определенных дизайнов, однако это менее распространенные способы стилизации ссылок с помощью CSS.

Вот разметка для достижения вышеуказанных эффектов:

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

Работа с подчеркиванием

Как мы узнали в начале, ссылки по умолчанию подчеркнуты. Если вы хотите избавиться от этого, вы можете использовать text-decoration: none; (что является наиболее распространенным использованием свойства text-decoration ).

 a { text-decoration: none; }

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

 a { text-decoration: none; } a:hover { text-decoration: underline; }

Кроме того, вы можете использовать border: bottom; вместо text-decoration: underline; чтобы добавить строку под вашими ссылками. Раньше люди использовали это, потому что это предлагало лучшие варианты стиля. Однако в наши дни у нас есть новые свойства для стандартного метода underline , которые позволяют больше настроек.

Например, text-underline-offset позволяет контролировать расстояние между текстом и линией под ним при использовании text-decoration . text-decoration-thickness позволяет вам установить пользовательскую ширину строки. Таким образом, ехать через border уже не так необходимо, как раньше.

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

Изменение стиля курсора при наведении

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

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

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

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

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

 a { cursor: pointer; }

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

Если вы изучите, как они это делают с помощью инструментов разработчика вашего браузера, вы найдете следующий фрагмент кода:

 a { cursor: url(../images/hand.cur),pointer; }

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

Внесите изменения в a: focus

Стилизация для focus — важный помощник в обеспечении доступности, поэтому убедитесь, что он остается на месте. По умолчанию выделение происходит с помощью свойства outline , которое создает вокруг него рамку.

Вы спросите, почему outline , а не border ?

Потому что outline не занимает места на странице. Вместо этого он располагается поверх фона элемента. Таким образом, фокусировка на ссылке не изменяет скачки макета страницы или что-то подобное.

Итак, какие еще варианты оформления у вас есть для сфокусированной ссылки?

Много их. Он принимает все, от background-color до color , font-size , box-shadow , что угодно.

Вот как добиться вышеперечисленного:

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

Используя a:focus , вы можете делать практически все, что захотите. Однако одним из самых интересных приложений может быть то, что вы также можете просто настроить браузер по умолчанию, используя свойство outline .

 a:focus { outline: 3px dotted green; }

Вот как это выглядит на странице:

Кнопки и блоки ссылок

Конечно, ссылки — это не просто текстовые ссылки. В некоторых местах они часто отображаются в виде полей, например в меню навигации, в виде частей форм или призывов к действию.

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

Есть несколько способов добиться этого, от простого добавления отступов до таких систем, как flexbox или grid. Ниже приведен лишь один пример того, как можно это сделать, вариантов гораздо больше.

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

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

Включите значки в свои ссылки

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

Вот как это сделать. Сначала HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

Затем CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

a[href^="http"] предназначен только для тегов привязки, адрес которых начинается с http в href="" . К ним разметка добавляет фоновое изображение, которое является значком, устанавливает для него запрет на повторение, перемещает его полностью вправо и центрирует по вертикали. Остальная часть разметки определяет размер значка и создает небольшое пространство между ним и текстом.

Заключительные мысли: стиль CSS для ссылок

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

Какой ваш любимый способ оформления ссылок с помощью CSS? Любые другие советы, чтобы поделиться? Пожалуйста, сделайте это в комментариях!