Как изменить цвет ссылки в CSS?
В этой статье мы расскажем, как стилизовать ссылки с помощью свойств CSS (например. изменить цвет ссылки в CSS) Оформление ссылок зависит от состояния, в которых они находятся:
- Не посещенная ссылка: состояние ссылки по умолчанию. Оно определяется с помощью псевдокласса :link.
- Посещенная ссылка: стилизуется с помощью псевдокласса :visited.
- Активная: ссылка, которая активируется нажатием. Задается с помощью псевдокласса: active.
- Ссылка, на которую пользователь навел курсор: стилизуется псевдоклассом :hover.
- Выделенная фокусом ввода: стилизуется с использованием псевдокласса :focus.
Пример оформления простой ссылки
<!DOCTYPE html>
<html>
<head>
<title>CSS links</title>
<style>
p {
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<p><a href="https://www.
herbalife.com">Example for a simple link</a></p>
</body>
</html>
По умолчанию не посещенные ссылки оформляются синим цветом, посещенные – фиолетовым, выделенные фокусом ввода – контуром, а активные – красным цветом.
Эти стили можно изменить, используя следующие свойства CSS. Пример использования свойства text-decoration:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 30px;
text-align: center;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Here is a link</a></b></p>
</body>
</html> Пример, в котором для оформления ссылки используется свойство background-color
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 30px;
text-align: center;
}
a:link {
background-color: coral;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: DarkMagenta;
}
a:active {
background-color: DarkSalmon ;
}
</style>
</head>
<body>
<p><b><a href="default. asp" target="_blank">This is a link</a></b></p>
</body>
</html>
asp" target="_blank">This is a link</a></b></p>
</body>
</html>Для оформления ссылки как кнопки потребуются следующие свойства: color, text-decoration, text-align, background color display, padding и другие.
Вот пример:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: DarkSalmon ;
border: none;
color: #FFFFFF;
padding: 25px 52px;
text-align: center;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-decoration: none;
font-size: 20px;
text-align: center;
cursor: pointer;
display: inline-block;
}
a:hover, a:active {
background-color: DarkRed ;
}
</style>
</head>
<body>
<body>
<a href="http://www.tennis.com" target="_blank">BUTTON</a>
</body>
</body>
</html>Свойства, указанные в псевдоклассе :hover, могут применяться и к другим элемента, а не только к ссылкам.
Ссылки могут быть стилизованы так, чтобы в определенных ситуациях выглядеть и вести себя как кнопки. Навигационное меню размечено как список, содержащий ссылки. Его можно оформить так, чтобы оно выглядело как набор кнопок управления. Пример
<!DOCTYPE html>
<html>
<head>
<style>
body,html {
margin: 0;
font-family: sans-serif, arial, helvetica;
}
ul {
padding: 0;
width: 100%;
}
li {
display: inline;
}
a {
outline: none;
text-decoration: none;
display: inline-block;
width: 19.5%;
margin-right: 0.625%;
text-align: center;
line-height: 3;
color: white;
}
li:last-child a {
margin-right: 0;
}
a:link, a:visited, a:focus {
background: DarkSalmon ;
}
a:hover {
background: DarkRed ;
}
a:active {
background: red;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Tournaments</a></li><li><a href="#">Scores</a></li><li><a href="#">
News</a>
</li>
<li><a href="#">Videos</a></li><li><a href="#">PLAYERS & RANKINGS</a></li>
</ul>
</body>
</html>Давайте рассмотрим, что именно происходит в примере, приведенном выше.
<ul> мы устанавливаем нулевой отступ, устанавливая и ширину 100% внешнего контейнера, (в нашем случае <body>).Элементы <li> будут располагаться отдельной строке. Таким образом, мы создадим горизонтальный список ссылок.
Самым сложным является правило номер четыре, которое стилизует элемент <a>. Мы начали с отключения стиля текста, используемого по умолчанию. Затем мы установили display: inline для элементов списка. Для ссылок мы задаем display: inline-block, чтобы иметь возможность их масштабировать.
Элементы <a> являются строчными по умолчанию. Но нам нужно изменить их размер. Свойство inline-block позволяет сделать это.
Для определения размеров заполним всю ширину элемента <ul>, оставляя небольшое пространство между каждой кнопкой. После этого устанавливаем ширину и расстояние между каждой кнопкой. Затем задаем line-height: 3, чтобы придать кнопкам определенную высоту.
Надеюсь, эта статья предоставила вам всю необходимую информацию о ссылках и их стилизации.
Пожалуйста, оставьте ваши комментарии по текущей теме материала. За комментарии, дизлайки, лайки, подписки, отклики низкий вам поклон!
Вадим Дворниковавтор-переводчик статьи «Styling CSS Links»
Внешние ссылки. HTML, XHTML и CSS на 100%
Внешние ссылки. HTML, XHTML и CSS на 100%ВикиЧтение
HTML, XHTML и CSS на 100%
Квинт Игорь
Содержание
Внешние ссылки
Внешними называют ссылки на объекты, расположенные вне текущей страницы. Это могут быть картинки, другие страницы сайта, мультимедийные приложения.
Основой внешних ссылок является URL-адрес объекта, на который вы собираетесь сослаться.
Для создания гиперссылок в HTML служит элемент A, который требует наличия закрывающего тега.
Внутри элемента располагается текст, который будет выделен как ссылка. На самом деле, чтобы сообщить человеку, что в каком-то месте сайта у вас расположена ссылка, совершенно не обязательно писать прямым текстом адрес следующей страницы. Язык HTML дает возможность «замаскировать» адрес под текст ссылки. Получается, что у вас отдельно есть текст ссылки, который должен внятно описывать, что пользователь увидит, перейдя по ней, и отдельно находится адрес страницы, на которую будет сделан переход при щелчке кнопкой мыши на ссылке. Между тегами <A> и </A> располагается именно текст ссылки.
Адрес документа для перехода записывается в элементе A в качестве значения атрибута href. Таким образом, перемещение по сайту становится удобным, легким и прозрачным для пользователя. Ему абсолютно все равно, где находится документ, на который указывает ссылка, он видит только текст описания.
В листинге 2.12 представлен пример создания ссылки на HTML-страницу и рисунок.
Листинг 2.12. Создание ссылок
<html>
<head>
<title>Ссылки</title>
<body>
<a href=»aboutme.html»>Обо мне</a><br />
<a href=»myfoto.jpg»>Мое фото</a>
</body>
</html>
Пример отображения ссылок в браузере показан на рис. 2.12.
Рис. 2.12. Ссылки
Текст ссылки отображается подчеркнутым, а указатель мыши меняет вид при наведении на ссылку.
Когда посетитель сайта щелкнет кнопкой мыши на ссылке, он перейдет на страницу, которая указана в качестве адреса.
Что же делать, если нужно организовать быстрое перемещение в рамках одной страницы? Здесь тоже помогут ссылки.
Данный текст является ознакомительным фрагментом.
Символические ссылки.
Жесткие ссылки.Символические ссылки. Жесткие ссылки. Немного теорииВ системах Unix довольно часто возникает необходимость иметь для одного и того же файла или каталога разные имена. При этом одно из имен логично назвать основным, а все другие — его псевдонимами. В терминологии Unix такие
11.3. Внешние DNS-серверы
11.3. Внешние DNS-серверы Если в локальном файле /etc/hosts не найдено записи о нужном имени, то компьютер должен запросить эту информацию у DNS-сервера. Для этого нужно знать IP-адрес этого самого сервера. Как система его узнает? Из файла /etc/resolv.conf, который должен выглядеть примерно
Внешние ссылки на сайт из Интернета
Внешние ссылки на сайт из Интернета
Мощный инструмент изучения компаний с применением ресурсов Интернета – это просмотр ссылок на сайт с помощью оператора Link.
Синтаксис этого оператора варьируется в зависимости от того, с какой информационной системой вы работаете. Тем
Глава 6 Внешние ссылки
Глава 6 Внешние ссылки Можно много говорить о растущей роли пользовательских факторов, важности создания хорошего контента, семантическом ядре, но факт остается фактом: без достаточного количества внешних ссылок, ведущих на разные страницы вашего сайта, он будет
Приобретите внешние ссылки на свой сайт
Приобретите внешние ссылки на свой сайт Если вы грамотно проработали и внедрили все эти пункты, то уже на следующий день вы получите первых посетителей на свой сайт.Через две недели сайт будет находиться в Google, а посещаемость будет расти с каждым днем за счет
Внешние тестировщики
Внешние тестировщики
В Google работает много талантливых ребят, но мы отлично понимаем, что и наши возможности имеют пределы.
Новые амбициозные проекты появляются без предупреждения, и им часто нужны узкоспециализированные профессионалы для тестирования. Мы не всегда
Ссылки на внешние компоновочные блоки
Ссылки на внешние компоновочные блоки Вдобавок к указанию пространства имен с помощью ключевого слова C# using, необходимо указать компилятору C# имя компоновочного блока, содержащего реальное CIL-определение соответствующего типа. Выше уже упоминалось, что многие базовые
Ссылки на внешние компоновочные блоки
Ссылки на внешние компоновочные блоки С помощью любого редактора создайте новый файл, назвав его CilTypes.il. Сначала вы должны указать список внешних компоновочных блоков, используемых текущим компоновочным блоком (в нашем примере мы будем использовать только типы из
Внешние переменные
Внешние переменные
Переменная, описанная вне функции, является внешней.
Внешнюю переменную можно также описать в функции, которая использует ее, при помощи ключевого слова extern. Описания могут выглядеть примерно так:int errupt; /* Три переменные, описанные вне функции
Внешние устройства
Внешние устройства Акустические системы В главе, посвященной звуковым платам, мы уже говорили, что для хорошего звука самой дорогой и продвинутой «звуковушки» недостаточно! Львиная доля ответственности за качество звучания лежит именно на акустических системах (в
14.4 Внешние определения
14.4 Внешние определения программа: внешнее_определение внешнее_определение программавнешнее_определение: определение_функции описаниеопределение_функции: спецификаторы_описания opt описатель_функции инициализатор_базового opt тело_функцииописатель_функции: описатель (
Внешние повреждения
Внешние повреждения
Внешние повреждения – то, на что необходимо обратить внимание еще до того, как вы заплатите деньги.
В первую очередь осмотрите корпус ноутбука на наличие трещин. По большому счету о подобных дефектах вам должны будут сказать сразу. Кроме того, если они
Внешние программы
Внешние программы ОО-системы состоят из классов, образованных компонентами (features), в частности, подпрограммами, содержащими инструкции. Что же является правильным уровнем модульности (granularity) для интегрирования внешнего программного продукта?Конструкция должна быть
У13.1 Внешние классы
У13.1 Внешние классы При обсуждении интеграции внешнего не объектного ПО с объектной системой отмечалось, что компоненты являются тем уровнем, на котором нужно осуществлять интеграцию. Когда же речь идет об интеграции с ПО, созданным на другом объектном языке, уровнем
Внешние ТВ-тюнеры
Внешние ТВ-тюнеры
Внешние тюнеры характеризуются тем, что изготавливаются в отдельном корпусе, а не в виде платы, и выглядят более эстетично, чем набор микросхем, припаянных к плате.
Тюнеры этого типа могут подключаться к компьютеру или напрямую к монитору.Все
Внешние DVB-тюнеры
Внешние DVB-тюнеры Внешние DVB-тюнеры представляют собой небольшое устройство для приема сигнала со спутниковой антенны и обработки его в цифровую форму. Обычно эти устройства подключаются к компьютеру посредством интерфейса USB2.0, но также существуют специальные модели
CSS селектор Ссылка
❮ Предыдущий Следующий Ссылка ❯
справка CSS w3ii ‘регулярно тестируются со всеми основными браузерами.
В CSS, селекторы шаблоны , используемые для выбора element(s) вы хотите стиль.
«CSS» столбец указывает , в какой CSS версии свойство определено (CSS1, CSS2, or CSS3) .
| селектор | пример | Пример описания | CSS |
|---|---|---|---|
. class | .intro | Выбирает все элементы с | 1 |
| # id | #firstname | Выбирает элемент с | 1 |
| * | * | Выбирает все элементы | 2 |
| element | p | Выбирает все <p> элементы | 1 |
| element,element | div, p | Выбирает все <div> элементы и все <p> элементы | 1 |
| element element | div p | Выбирает все <p> элементы внутри <div> элементы | 1 |
| element > element | div > p | Выбирает все <p> элементы , где родитель является <div> элемента | 2 |
| element + element | div + p | Выбирает все <p> элементы, которые размещаются сразу после <div> элементы | 2 |
| element1 ~ element2 | р ~ уль | Выбирает каждый <ul> элемент , который предшествует <p> элемента | 3 |
| [ attribute ] | [target] | Выбирает все элементы с целевым атрибутом | 2 |
| [ attribute = value ] | [target=_blank] | Выбирает все элементы с target=»_blank» | 2 |
| [ attribute ~= value ] | [title~=flower] | Выбирает все элементы с атрибутом заголовка , содержащие слово «flower» | 2 |
| [ attribute |= value ] | [lang|=en] | Выбирает все элементы со значением атрибута Ланг , начиная с «en» | 2 |
| [ attribute ^= value ] | a[href^=»https»] | Выбирает каждый <a> элемент которого href значение атрибута начинается с «https» | 3 |
| [ attribute $= value ] | a[href$=». pdf»] | Выбирает каждый <a> элемент которого значение атрибута HREF заканчивается «.pdf» в «.pdf» | 3 |
| [ attribute *= value ] | a[href*=»w3ii»] | Выбирает каждый <a> элемент которого href значение атрибута содержит подстроку «w3ii» | 3 |
| :active | a:active | Выбор активной ссылки | 1 |
| ::after | p::after | Вставьте что — то после того, как содержание каждого <p> элемента | 2 |
| ::before | p::before | Вставьте что — то перед содержимым каждого <p> элемента | 2 |
| :checked | input:checked | Выбирает каждый проверяется <input> элемент | 3 |
| :disabled | input:disabled | Выбор каждого инвалида <input> элемент | 3 |
| :empty | p:empty | Выбирает каждый <p> элемент , который не имеет детей (including text nodes) в (including text nodes) | 3 |
| :enabled | input:enabled | Выбирает каждый включен <input> элемент | 3 |
| :first-child | p:first-child | Выбирает каждый <p> элемент , который является первым потомком своего родителя | 2 |
| ::first-letter | p::first-letter | Выбирает первую букву каждого <p> элемента | 1 |
| ::first-line | p::first-line | Выбирает первую строку каждого <p> элемента | 1 |
| :first-of-type | p:first-of-type | Выбирает каждый <p> элемент , который является первым <p> элемент своего родителя | 3 |
| :focus | input:focus | Выбирает входной элемент, который имеет фокус | 2 |
| :hover | a:hover | Выбор ссылки при наведении мыши | 1 |
| :in-range | input:in-range | Выбор входных элементов со значением в пределах указанного диапазона | 3 |
| :invalid | input:invalid | Выбирает все элементы ввода с недопустимым значением | 3 |
| :lang( language ) | p:lang(it) | Выбирает каждый <p> элемент с lang атрибут равен «it» (Italian) | 2 |
| :last-child | p:last-child | Выбирает каждый <p> элемент , который является последним потомком своего родителя | 3 |
| :last-of-type | p:last-of-type | Выбирает каждый <p> элемент , который является последним <p> элемент своего родителя | 3 |
| :link | a:link | Выбирает все непосещенные ссылки | 1 |
| :not( selector ) | :not(p) | Выбирает каждый элемент , который не является <p> элемент | 3 |
| :nth-child( n ) | p:nth-child(2) | Выбирает каждый <p> элемент , который является вторым ребенком своего родителя | 3 |
| :nth-last-child( n ) | p:nth-last-child(2) | Выбирает каждый <p> элемент , который является вторым ребенком своего родителя, считая от последнего ребенка | 3 |
| :nth-last-of-type( n ) | p:nth-last-of-type(2) | Выбирает каждый <p> элемент , который является вторым <p> элемент своего родителя, считая от последнего ребенка | 3 |
| :nth-of-type( n ) | p:nth-of-type(2) | Выбирает каждый <p> элемент , который является вторым <p> элемент своего родителя | 3 |
| :only-of-type | p:only-of-type | Выбирает каждый <p> элемент , который является единственным <p> элемент своего родителя | 3 |
| :only-child | p:only-child | Выбирает каждый <p> элемент , который является единственным потомком своего родителя | 3 |
| :optional | input:optional | Выбирает элементы ввода без каких — либо «required» атрибут | 3 |
| :out-of-range | input:out-of-range | Выбор входных элементов со значением вне указанного диапазона | 3 |
| :read-only | input:read-only | Выбирает элементы ввода с «readonly» для «readonly» Указанный атрибут | 3 |
| :read-write | input:read-write | Выбирает элементы ввода с «readonly» для «readonly» атрибут не указан | 3 |
| :required | input:required | Выбирает элементы ввода с «required» атрибута , указанного | 3 |
| :root | :root | Выбирает корневой элемент документа | 3 |
| ::selection | ::selection | Выбирает часть элемента, который выбирается пользователем | |
| :target | #news:target | Выбирает текущий активный #news элемент (щелкнув по URL, содержащего это имя якоря) | 3 |
| :valid | input:valid | Выбирает все элементы ввода с допустимым значением | 3 |
| :visited | a:visited | Выбирает все посещенные ссылки | 1 |
❮ Предыдущий Следующий Ссылка ❯
Создание стильных ссылок с помощью CSS.
Как простой текст, кнопки, текст с иконками… | by aliceytBasic CSS
В виде обычного текста, кнопок, текста со значками и изображением
На заре Интернета синий и подчеркнутый текст, вкрапленный среди черного текста и изображений на веб-страницах, был стандартом для ссылок. .
В настоящее время синие подчеркнутые ссылки могут не соответствовать эстетике вашего дизайна. Мы можем стилизовать наши подчеркнутые ссылки разными цветами, а также другими способами, такими как кнопки, текст со значками и изображениями.
Чистый вид против беспорядкаВ этой статье я расскажу вам о стиле ссылки по умолчанию, а затем покажу вам общие стили для ссылок и как их создать в CSS:
- Стиль по умолчанию
- Ссылки, которые выглядят как любой другой текст
- Кнопки
- Текст, сопровождаемый иконкой
- Изображения в виде ссылок
Ссылки соединяют один веб-ресурс с другим.
Мы используем их для подключения одного веб-сайта к другому и перехода от одного раздела к другому на том же веб-сайте. Мы также используем ссылки для запуска нового черновика электронной почты в почтовом клиенте пользователя, телефонного звонка и загрузки файлов.
Все эти функции зависят от вашего HTML-кода. Подробности можно найти в моей статье «Анатомия HTML-ссылок» (которая удобно иллюстрирует, как ссылка выглядит в статье на Medium).
Создать ссылку так же просто, как написать строку в документе HTML.
Click me
По умолчанию браузеры отображают приведенную выше ссылку в виде подчеркнутого текста синим цветом, что является остатком стиля с первых дней веб. Несмотря на то, что это стиль по умолчанию, мы почти не видим эти ссылки в традиционном стиле на современных веб-сайтах.
Непосещенная ссылка, над которой наведен курсор Активная ссылкаПосещенная ссылка Преимущество стиля по умолчанию, по общему признанию, заключается в том, что ссылка делается очевидной, но недостатком является то, что это приводит к визуальному беспорядку и потенциально может перегрузить пользователей.
Поскольку пользователи уже привыкли к ссылкам, которые выглядят как обычный текст, чистый дизайн имеет приоритет над очевидными ссылками.
Олли Уильямс, автор CSS Tricks, приводит несколько примеров:
Скриншот Yahoo.com 1990-х годов ЖИРНЫЙ ТЕКСТ Medium — это пример сайта, который использует этот особый стиль в заголовках статей на своей главной странице.Популярные сайты отказались от подчеркивания: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году они удалили подчеркивания со своей страницы результатов поиска, ведущий дизайнер Google Джон Уайли утверждал, что это сделало ее более чистой.
Это может быть создано с использованием text-decoration, color и font-weight свойств тега привязки:
-
Text-decorationприсвоено значениенетдля удаления подчеркнутого стиль на анкерной бирке -
Цвет: черныйитолщина шрифта: полужирныйокрашивает выделенный жирным шрифтом текст вчерный.
Результат
Код
href получает значение # в качестве заполнителя для относительного или абсолютного пути к веб-ресурсу. например https://www.google.comПримечание. Этот стиль следует применять осторожно и последовательно. Если он используется, он должен быть зарезервирован только для ссылок. Любой контент, который необходимо выделить, не должен быть выделен жирным шрифтом, чтобы не сбивать пользователей с толку.
Следовательно, важно обеспечить отображение курсора при наведении на него указателя мыши.
ТЕКСТ С ПРОМЕЖУТОМ Google.com использует этот стиль для своих ссылок в верхнем и нижнем колонтитулах, и это обычный веб-дизайн. Подчеркнутый текст отображается в состоянии наведения (когда курсор касается ссылки). Для создания этого стиля используйте text-decoration, color, и margin:
-
ext-decorationиcolorдля создания черного текста без подчеркивания и -
полядля создания пробелов между ссылками. -
a:hoverселектор, чтобы добавить подчеркнутый стиль к обычному тексту в состоянии наведения.
Примечание. Текстовое оформление удаляется во всех состояниях, прежде чем мы добавим его обратно в состояние наведения с помощью селектора a:hover .
Результат
Код Примечание. Хотя заполнение дает нам тот же визуальный эффект, мы используем поля для создания пробелов между элементами HTML.
Создание ссылки в виде кнопки может быть простым или сложным, в зависимости от того, хотите ли вы добавить эффект нажатия кнопки.
Послесловие: читатель предупредил меня, что мы должны включить
role="button"в html для интерактивных элементов, которые вызывают ответ при активации пользователем. Это заставит элемент отображаться как кнопка управления для программы чтения с экрана. Подробности см. в документации MDN по ARIA: роль кнопки .
ИЗМЕНЕНИЕ ЦВЕТА ФОНА ПРИ НАВЕДЕНИИ
Medium использует простой стиль для своей кнопки. Ярко-зеленый цвет темнеет при наведении на него указателя мыши.Чтобы создать этот эффект,
- удалите подчеркнутый текст, используя
text-decoration: none, - добавьте пробел внутри кнопки, используя
padding фоновый цветв состоянии наведения.
font-family и border-radius установлены только для того, чтобы ссылка больше походила на ссылку на Medium.
Результат
Код
МЕНЯЕТ ЦВЕТ ШРИФТА ПРИ НАВЕДЕНИИ
У Booking.com есть ссылка, которая меняет цвет шрифта своей ссылки при наведении. Чтобы создать эффект, вам нужно всего лишь изменить значение свойства color селектора a:hover . Остальные изменения аналогичны предыдущему примеру, но с некоторыми изменениями, чтобы он больше походил на ссылки на Booking.com.
Результат
Код
Apple использует ссылку со значком шеврона для ссылок навигации по продуктам.
Мы можем создать ссылку с иконкой, используя иконки из Font Awesome. Как и раньше, нам нужно удалить подчеркнутый текст в ссылке, а затем добавить обратно в селектор a:hover .
Чтобы создать этот эффект,
- добавьте значок в html-файл (используя html-код, указанный в Font Awesome),
- удалите подчеркнутый текст, используя
text-decoration: none, - добавить пробел между текстом и значком с
полем, - изменить цвет текста
, - добавить обратно стиль подчеркивания в состоянии наведения.
Результат
Код
Другой часто используемый стиль заключается в том, чтобы окружить изображение тегом привязки, таким образом создавая ссылку из изображения. Строго говоря, это не совсем стиль, так как нам не нужен CSS для создания этого стиля.
Для этого вместо текста, используемого в качестве исходной привязки (содержимое между , вместо этого мы добавляем изображение.
Чтобы создать этот эффект, вам нужно всего лишь добавить элемент img в HTML-документ, и изображение станет кликабельным.
Результат
Код
Фото Луки Оннибони на UnsplashСтили ссылок в этой статье часто встречаются на веб-сайтах. Хотя они могут не выглядеть как традиционные синие текстовые ссылки без линий, мы настолько привыкли к такому дизайну, что удобство использования больше не является проблемой, поскольку мы можем легко отличить ссылку от обычного текста на основе ее контекста.
Я намеренно не учел стили активного и посещенного состояния ссылки, так как в последнее время я редко сталкиваюсь с ними. Но если вы хотите стилизовать их, вы всегда можете настроить таргетинг на состояния, используя следующие псевдоклассы:
-
a:ссылка: непросмотренная ссылка, не нажатая -
a:посещенная: посещенная, нажатая ссылка -
a:hover: ссылка, когда пользователь наводит на нее указатель мыши -
a:active: ссылка, когда на нее нажимают
- Стилизация ссылок с реальным подчеркиванием
Псевдоклассы ссылок CSS — WebFX
Псевдоклассы ссылок дают веб-дизайнерам возможность стилизовать различные состояния ссылок HTML.
Псевдоклассы CSS, обычно используемые для стилизации гиперссылок: :link , :visited , :hover , :active и :focus . Пример:
/* По умолчанию */ a { color: blue; } /* Непосещенные ссылки */ a:ссылка { цвет: синий; } /* Посещенные ссылки */ a:visited { color: Purple; } /* Состояние наведения */ a:hover { color: red; } /* Состояние фокусировки */ a:focus { color: orange; } /* Состояние активировано */ a:active { color: green; } Обзор
Вот описание каждого псевдокласса:
-
:link— выбирает непросмотренные ссылки. -
:visited— выбирает посещенные ссылки. -
:hover— состояние, которое возникает, когда пользователь наводит указатель мыши на ссылку. -
:active— состояние, которое происходит, когда пользователь нажимает на ссылку. Это очень короткий момент между нажатием на ссылку и фокусировкой или момент между нажатием и переходом на другую веб-страницу. Поскольку это состояние обычно длится недолго, его легче увидеть, если щелкнуть ссылку и нажать кнопку мыши, не отпуская кнопку мыши. -
:focus— состояние, которое возникает, когда пользователь фокусируется на ссылке. Это состояние можно увидеть при переходе по ссылке или после нажатия на ссылку.
Технически, из пяти наиболее часто используемых псевдоклассов для ссылок только два — :link и :visited — на самом деле являются псевдоклассами ссылок , специально разработанными для ссылок HTML ( ) элементы. Остальные три — :hover , :active и :focus — называются динамическими псевдоклассами и могут использоваться в других элементах HTML.
Комбинирование псевдоклассов
Для большей специфичности CSS можно использовать комбинацию псевдоклассов. Например, вы можете захотеть изменить внешний вид, когда пользователь наводит курсор на посещенную ссылку, а не на не посещенную ссылку.
a:link { цвет: синий; } a: посетил { цвет: фиолетовый; } a:link:hover { цвет: зеленый; } a:visited:hover { цвет: красный; } В предыдущем примере, когда пользователи наводят курсор на непросмотренную ссылку, ее текст привязки становится зеленым.
Но если это посещаемая ссылка, якорный текст станет красным.
Порядок псевдоклассов
Из-за специфики CSS ссылки могут соответствовать нескольким псевдоклассам одновременно. Вот почему порядок правил стилей в ваших таблицах стилей имеет решающее значение. Примером одновременного сопоставления двух псевдоклассов является щелчок по ссылке.
В начале события щелчка ссылка на короткое время соответствует обоим состояниям :hover и :active , поскольку указатель мыши все еще находится над ссылкой, пока ссылка активируется.
Мы знаем, что если два селектора равны по специфичности, по умолчанию побеждает селектор, расположенный дальше по таблице стилей. Таким образом, если правило стиля :active выше правила стиля :hover , пользователи никогда не увидят применяемое правило стиля :active , потому что :hover правило стиля заменяет его.
Чтобы все правила стиля псевдокласса ссылок отображались успешно, предлагается следующий порядок :
a { } a:link { } a:visited { } a:hover { } a:focus { } a: active { } Нечувствительность к регистру
Спецификации псевдокласса W3C допускают использование любого типа регистра. Это означает, что имена псевдоклассов должны быть написаны заглавными, строчными буквами или любым другим стилем регистра. Однако наиболее распространенной практикой является написание имен псевдоклассов строчными буквами.
Все эти варианты псевдоклассов :link будут работать и технически эквивалентны друг другу:
a:link { } a:LINK { } a:LiNk { } a:lInK { } Интервалы перед и После имен псевдоклассов
Не должно быть никаких пробелов до и/или после двоеточия ( : ), предшествующего имени псевдокласса.
Например, запись правила стиля как такового не будет правильно отображаться в браузерах:
/* Пробелы до и после двоеточия (:) не будут работать */ а : ссылка { цвет: зеленый; } /* Пробелы перед двоеточием (:) не работают */ a :link { color: green; } /* Пробелы после двоеточия (:) не работают */ a: link { color: green; } Псевдоклассы ссылок в современных браузерах
В современных веб-браузерах :link и :visited будут вести себя иначе, чем другие псевдоклассы, чтобы защитить конфиденциальность истории просмотра посетителем. Современные браузеры теперь ограничивают свойства CSS, которые будут отображаться в правилах стиля, включающих :ссылка и :посетили псевдокласса. Короче говоря, правила стиля для :link и :visited не могут отличаться, за исключением свойств цвета.
Например, вы не можете назначить им разные значения background-image или дать им разные значения display .
В современных браузерах следующий пример не будет работать так, как вы ожидаете. Посещенные ссылки будут отображать , а не заглавными буквами; они будут в нижнем регистре, как непросмотренные ссылки.
HTML
Непосещенная ССЫЛКА Посещенная ССЫЛКА
CSS
/* Непосещенные ссылки отображаются в all-lowercase */ a:link { text-transform: lowercase; } /* Посещенные ссылки отображаются заглавными буквами */ a:visited { text-transform: uppercase; } Результат
Для полного объяснения проблемы с псевдоклассами :link и :visited прочитайте эту статью: Почему псевдокласс :visited является странным.
Связанный контент
- Создание идеальной гиперссылки — это не так просто, как вы думаете
- Разработка гиперссылок: советы и рекомендации
- Руководство по атрибутам загрузки HTML5
Ссылки CSS Tailwind — Flowbite
Начните с компонента ссылки, чтобы включить гиперссылки на страницы и внешние веб-сайты, применяемые к таким элементам, как встроенный текст, кнопки, карточки, внутри абзацев и т.
д.
Гиперссылки — отличный способ снизить показатель отказов текущей страницы и побудить посетителей просматривать ваш веб-сайт и стать постоянным пользователем.
Ссылка по умолчанию #
Используйте этот пример, чтобы установить стили по умолчанию для встроенного элемента ссылки.
Изменить на GitHubВключить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
- HTML
Скопировать в буфер обмена
Подробнее
Подробнее
Кнопка #
Этот пример можно использовать для установки гиперссылки на компонент кнопки.
Включить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
- HTML
Скопировать в буфер обмена
Подробнее
Подробнее
Абзац #
Используйте этот пример, чтобы установить ссылку внутри абзаца с подчеркиванием.
Изменить на GitHubВключить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
- HTML
Скопировать в буфер обмена
Бесплатные обновления, которые будут предоставляться, основаны на дорожной карте, которую мы изложили для этого проекта.
Также возможно, что мы будем предоставлять дополнительные обновления вне дорожной карты.
Бесплатные обновления будут предоставляться в соответствии с дорожной картой, разработанной нами для этого проекта. Также возможно, что мы предоставим дополнительные обновления вне дорожной карты.
Значок ссылки #
Этот пример можно использовать для установки пользовательского значка SVG внутри элемента гиперссылки.
Изменить на GitHubВключить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
- HTML
Скопировать в буфер обмена
500 000 человек и компаний создали более миллиона приложений с помощью Glide.
Читайте их истории
500 000 человек и компаний создали более миллиона приложений с помощью Glide. <а href="#"> Читайте их истории
CTA-ссылка #
Используйте этот пример, чтобы установить гиперссылку на элемент CTA с текстом и пользовательским значком.
Изменить на GitHubВключить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
- HTML
Скопировать в буфер обмена
Начните работу с нашей системой проектирования Figmaw3.org/2000/svg">
<путь д="M0.00195312 15.062C0.00195312 12.2905 2.46546 10.0413 5.50085 10.0413h20.9998V20.0827H5.50085C2.46546 20.0827 0.00195312 17.8334 0.00195312 15.062Z" fill="#A259FF"/> < clipPath> Начните работу с нашей системой проектирования Figma000244141)"/>
Ссылка на карту #
Используйте этот пример для установки гиперссылки на компонент карточки.
Изменить на GitHubВключить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
- HTML
Скопировать в буфер обмена
Важные технологические приобретения 2021
Вот крупнейшие приобретения корпоративных технологий в 2021 году в обратном хронологическом порядке.
Примечательные технологические приобретения в 2021 году
Вот крупнейшие приобретения корпоративных технологий в 2021 году в обратном хронологическом порядке.
Ссылка на изображение #
Этот пример можно использовать для установки гиперссылки на изображение внутри компонента карточки.
Изменить на GitHubВключить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
- HTML
Скопировать в буфер обмена
Важные технологические приобретения 2021
Вот крупнейшие приобретения корпоративных технологий в 2021 году в обратном хронологическом порядке.
<дел>
<а href="#">
<дел>
<а href="#">
Примечательные технологические приобретения в 2021 году
Вот крупнейшие приобретения корпоративных технологий в 2021 году в обратном хронологическом порядке.
<а href="#">
Читать далее
<дел>
<а href="#">
