Как вставить ссылку в css

Как добавить адрес к тексту ссылки?

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

Строка браузера при наведении курсора на ссылку

Рис. 1. Строка браузера при наведении курсора на ссылку

Чтобы пользователи сразу видели куда ведёт ссылка, мы можем автоматически добавить адрес к тексту ссылки через CSS. Для этого используем псевдоэлемент ::after и свойство content в сочетании с функцией attr() и значением href .

a::after

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

content: '[' attr(href) ']';

Пользовательский текст берётся в двойные или одинарные кавычки. Аналогично можно выводить и желаемые символы:

content: '�� ' attr(href);

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

Пример 1. Вывод адреса после текста ссылки

Следует помнить, что текст, добавляемый через ::after , является частью ссылки, а значит, на него распространяется стиль элемента . Поэтому данным методом, в частности, нельзя убрать подчёркивание у адреса ссылки через text-decoration, оставляя подчёркивание у самой ссылки.

a::after < content: '[' attr(href) ']'; text-decoration: none; /* Вот это работать не будет */ >

См. также

content
quotes
relative и absolute
Аккордеон меню
Анимация ссылок при наведении
Атрибуты ссылок
Всплывающая подсказка
Доступность
Игра с картинками
Не только текст
Отображение атрибутов элемента
Псевдоэлементы
Псевдоэлементы ::after и ::before
Работа с кавычками
Функция attr()

2.7. CSS-ссылки

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

Основной способ оформления ссылок заключается в стилизации подчеркивания ссылки и изменении цвета текста ссылки. Также можно изменить внешний вид курсора с помощью свойства cursor .

Оформление гипертекстовых ссылок

Содержание:
1. Псевдоклассы состояний гипертекстовых ссылок
2. Выборка отдельных ссылок
3. Подчеркивание ссылок
4. Изображения для ссылок
5. Использование фонового изображения
6. Ссылки-кнопки
7. Примеры оформления ссылок

1. Псевдоклассы состояний гипертекстовых ссылок

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

Непосещенная — a:link
Посещенная — по которой уже выполнялся переход — a:visited
Не нажатая — над которой находится указатель мыши — a:hover
Нажатая — которая удерживается мышью — a:active

Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:

a:link < color: #497DDD; border-bottom: 1px dashed; >a:visited < color: #EF7D55; >a:hover < color: #154088; border-bottom: .07em solid; >a:active

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

2. Выборка отдельных ссылок

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

3. Подчеркивание ссылок

Добавление подчеркивания только при наведении на ссылку:

a < text-decoration: none; >a:hover

Внешний вид нижней границы ссылки:

4. Изображения для ссылок

Добавить изображение для ссылки можно с помощью CSS-свойства background-image . Так как элемент является строчным a , то предварительно его нужно преобразовать в блочный элемент a .

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

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

a[href$=".pdf"] < background-image: url(images/pdf.png); >

Символ href$ в селекторе атрибута дает браузеру команду найти все атрибуты href , заканчивающиеся определенным образом (в данном случае .pdf ) и добавить к ссылке соответствующий значок.

5. Использование фонового изображения

Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение:

6. Ссылки-кнопки

Благодаря свойствам background-color , border и padding , ссылкам можно придать вид прямоугольных кнопок, а, меняя отображение тех или иных свойств ссылок при наведении курсора мыши a:hover , добавить интересные эффекты.

buttons-design

/*общие стили для всех кнопок*/ a < display: inline-block; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; margin: 15px 25px; padding: 15px 20px; font-size: 20px; font-weight: bold; font-family: 'Montserrat', sans-serif; transition: 0.4s ease-in-out; >/*кнопка 1*/ .one a < border-radius: 10px; color: #EC4D3C; background-color: white; background-image: -webkit-radial-gradient(#FCD2D1 2px, rgba(255, 0, 0, 0) 2px); background-image: -o-radial-gradient(#FCD2D1 2px, rgba(255, 0, 0, 0) 2px); background-image: radial-gradient(#FCD2D1 2px, transparent 2px); background-size: 12px 12px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.one a:hover < background-size: 16px 16px; >/*кнопка 2*/ .two a < border-radius: 10px; color: #F17434; background-color: white; background-image: -webkit-repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px), -webkit-repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: -o-repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px), -o-repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px), repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.two a:hover < background-image: -webkit-repeating-linear-gradient(left, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: -o-repeating-linear-gradient(90deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: repeating-linear-gradient(90deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px); >/*кнопка 3*/ .three a < border-radius: 10px; color: #36454A; background: -webkit-linear-gradient(top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: -o-linear-gradient(top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: linear-gradient(to top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); box-shadow: 2px 2px 3px black; >.three a:hover < background: -webkit-linear-gradient(bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: -o-linear-gradient(bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: linear-gradient(to bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); >/*кнопка 4*/ .four a < border-radius: 10px; color: #598428; background: -webkit-linear-gradient(70deg, #C3D600, #C3D600 50%, #A5B400 50%); background: -o-linear-gradient(20deg, #C3D600, #C3D600 50%, #A5B400 50%); background: linear-gradient(20deg, #C3D600, #C3D600 50%, #A5B400 50%); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.four a:hover < background: -webkit-linear-gradient(-110deg, #C3D600, #C3D600 50%, #A5B400 50%); background: -o-linear-gradient(-160deg, #C3D600, #C3D600 50%, #A5B400 50%); background: linear-gradient(-160deg, #C3D600, #C3D600 50%, #A5B400 50%); >/*кнопка 5*/ .five a < border-radius: 10px; color: #40382D; box-shadow: inset 0 -5px 0 #40382D; >.five a:hover < box-shadow: inset 0 -60px 0 #40382D, 2px 2px 3px rgba(0, 0, 0, 0.3); color: #DECDA5; >/*кнопка 6*/ .six a < border-radius: 10px; color: #CEA640; background: #FFF79A; border-bottom: 5px solid #E1B442; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); >.six a:hover < box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); >/*кнопка 7*/ .seven a < color: #45A0A4; background: -webkit-linear-gradient(right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat; background: -o-linear-gradient(right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat; background: linear-gradient(to right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat; background-size: 70% 5px; >.seven a:hover < background-size: 100% 5px; >/*кнопка 8*/ .eight a < border-radius: 10px; background: #E8CCB5; color: #B05151; padding: 15px 30px; position: relative; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.eight a:before, .eight a:after < content: ""; display: inline-block; position: absolute; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #F58262; box-shadow: inset 0 -2px 0 #B05151; opacity: 0; transition: .5s ease-in-out; >.eight a:before < left: 13px; >.eight a:after < right: 13px; >.eight a:hover:before, .eight a:hover:after < opacity: 1; >/*кнопка 9*/ .nine a < color: #E7E5DD; text-shadow: 1px 1px black; background: url(https://html5book.ru/wp-content/uploads/2015/01/borger-grey.png) repeat-x; border-bottom: 1px solid #bfc1ad; border-left: 1px solid #bfc1ad; border-right: 1px solid #bfc1ad; >.nine a:hover < background-position: 300px 0; >/*кнопка 10*/ .ten a < color: #E7E5DD; border-radius: 25px; border: 3px solid #E7E5DD; >.ten a:hover < color: #BDB9AB; background: #E7E5DD; >.ten a span < opacity: 0; padding-left: 5px; padding-right: 5px; font-weight: bold; transition: 0.4s ease-in-out; >.ten a:hover span < opacity: 1; padding-left: 10px; padding-right: 10px; color: #BDB9AB; >/*кнопка 11*/ .eleven a < box-sizing: border-box; border: 1px solid white; color: white; font-size: 12px; font-style: italic; font-weight: 400; letter-spacing: 1.2px; line-height: 1; padding: 15px 40px; position: relative; >.eleven a:after

7. Примеры оформления ссылок

Гипертекстовые ссылки можно оформить различными способами, но основной прием оформления основывается на изменении внешнего вида ссылки при наведении на нее курсором мыши — состояние ссылки a:hover .

styling-links

/*общие стили для всех ссылок*/ a < text-decoration: none; display: inline-block; padding: 5px 10px; letter-spacing: 1px; margin: 0 20px; font-size: 24px; font-family: 'Fredoka One', cursive; transition: .3s ease-in-out; >/*первая ссылка*/ .s1 < color: #FFD201; letter-spacing: 1px; border-bottom: 1px solid transparent; border-top: 1px solid transparent; >.s1:hover < border-bottom: 1px solid #FFD201; border-top: 1px solid #FFD201; >/*вторая ссылка*/ .s2 < color: #969696; text-shadow: 1px 1px black; letter-spacing: 1px; border-bottom: 2px solid transparent; >.s2:hover < color: #F54318; border-bottom: 2px solid #F54318; box-shadow: 0 1px 0 white, 0 2px 0 #969696; >/*третья ссылка*/ .s3 < color: #BA7D67; border: 2px solid transparent; >.s3:hover < border: 2px solid #BA7D67; >/*четвертая ссылка*/ .s4 < color: #2AABBA; font-style: italic; padding-left: 35px; background: url(https://html5book.ru/wp-content/uploads/2019/04/pdf-icon.png) no-repeat left; text-decoration: underline; >.s4:hover < color: #C9D414; >/*пятая ссылка*/ .s5 < color: #CBB8AA; position: relative; >.s5 < text-shadow: 1px 1px white, 2px 2px #6A5F55; >.s5:hover < text-shadow: 1px 1px 1px #6A5F55; >/*шестая ссылка*/ .s6 < color: #E7805E; border-bottom: 1px dashed; >.s6:hover < border-bottom: 1px solid #9B8381; >/*седьмая ссылка*/ .s7 < color: #D5A39C; >.s7:hover < transform: scaleX(1.1); >/*восьмая ссылка*/ .s8 < color: #92B8C5; text-shadow: 1px 1px 1px #555555; >.s8:hover < position: relative; top: 2px; left: 2px; >/*девятая ссылка*/ .s9 < color: #B2BBC0; text-shadow: 1px 0 #4D575D; >.s9:hover < transform: rotate(-5deg); >/*десятая ссылка*/ .s10 < color: #B79DCC; position: relative; >.s10:after < content: ""; display: block; position: relative; width: 100%; margin: auto; border-bottom: 3px dashed #C1CF00; bottom: -5px; transition: .5s ease-in-out; >.s10:hover:after < width: 0; >/*одиннадцатая ссылка*/ .s11 < background-image: linear-gradient(#FE5568 50%, #FE5568 50%), linear-gradient(silver 50%, silver 50%); background-position: center bottom; background-repeat: no-repeat; background-size: 0 2px, 100% 2px; color: #1E3A52; padding-bottom: 3px; transition: .5s ease-in-out; >.s11:hover < background-size: 100% 2px, 100% 2px; color: #FE5568; >/*двенадцатая ссылка*/ .s12 < background-image: linear-gradient(#EE5E4F 50%, #EE5E4F 50%), linear-gradient(silver 50%, silver 50%); background-position: center bottom; background-repeat: no-repeat; background-size: 0 .063em, 100% .063em; color: #607584; padding-bottom: .188em; transition: background-size .5s; >.s12:hover < background-size: 100% .063em, 100% .063em; background-position: left bottom; >/*тринадцатая ссылка*/ .s13 < color: #34495e; line-height: 1.2; position: relative; padding: 0 14px; text-transform: uppercase; >.s13:after < content: ""; height: 100%; min-width: 4px; background: #34495e; position: absolute; left: 0; bottom: 0; transition: .5s; >.s13:hover:after < min-width: 100%; background: #95a5a6; opacity: .35; >/*четырнадцатая ссылка*/ .s14 < border-bottom: 2px solid #5be; color: #555; background-image: linear-gradient(180deg, transparent 65%, #5bf 65%); background-position: 0% 100%; background-repeat: no-repeat; background-size: 100% 0%; >.s14:hover

Стилизация ссылок

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

Для изучения вам потребуется:	Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS.
Вы узнаете:	Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.

Давайте посмотрим на некоторые ссылки

Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в Создании гиперссылок. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.

Состояния ссылок

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

Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link .
Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited .
Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс :hover
Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя HTMLElement.focus() (en-US)) — стилизуется используя псевдокласс :focus .
Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active

Стили по умолчанию

Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).

p>a href="https://mozilla.org">A link to the Mozilla homepagea>p>

p  font-size: 2rem; text-align: center; >

Вы заметите несколько вещей при изучении стилей по умолчанию:

Ссылки подчёркнуты.
Не посещённые ссылки синие.
Посещённые ссылки фиолетовые
Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав Ctrl + F7 , прежде чем это будет работать).
Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).

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

Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.

Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:

color (en-US) для цвета текста.
cursor для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
outline для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.

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

Стилизация некоторых ссылок

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

Чтобы начать, мы выпишем наши пустые наборы правил:

a  > a:link  > a:visited  > a:focus  > a:hover  > a:active  >

Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа LoVe Fears HAte.

А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:

body  width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; > p  line-height: 1.4; > a  outline: none; text-decoration: none; padding: 2px 1px 0; > a:link  color: #265301; > a:visited  color: #437a16; > a:focus  border-bottom: 1px solid; background: #bae498; > a:hover  border-bottom: 1px solid; background: #cdfeaa; > a:active  background: #265301; color: #cdfeaa; >

Также мы дадим некий пример HTML к которому применяется CSS:

p> There are several browsers available, such as a href="https://www.mozilla.org/en-US/firefox/">Mozilla Firefoxa>, a href="https://www.google.com/chrome/index.html">Google Chromea>, and a href="https://www.microsoft.com/en-us/windows/microsoft-edge" >Microsoft Edgea >. p>

Объединение этих двух даёт нам такой результат:

Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:

Первые два правила не так интересны в этом обсуждении.
Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
Следующие два правила используют a:focus и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
- Нижнее подчёркивание создано используя border-bottom , а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»).
- Значение border-bottom установлено на 1px solid , без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.
Активное изучение: Стилизуйте ссылки самостоятельно

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

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.
```
div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> h2>HTML Inputh2> textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> p>There are several browsers available, such as a href="https://www.mozilla.org/en-US/firefox/">Mozilla Firefoxa>, a href="https://www.google.com/chrome/index.html">Google Chromea>, and a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edgea>.p>textarea > h2>CSS Inputh2> textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> a < >a:link < >a:visited < >a:focus < >a:hover < >a:active < >textarea > h2>Outputh2> div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">div> div class="controls"> input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;" /> input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;" /> div> div> 
```
```
var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var solution = document.getElementById("solution"); var styleElem = document.createElement("style"); var headElem = document.querySelector("head"); headElem.appendChild(styleElem); function drawOutput()  output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; > reset.addEventListener("click", function ()  htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); >); solution.addEventListener("click", function ()  htmlInput.value = htmlCode; cssInput.value = "p \n\na \n\na:link \n\na:visited \n\na:focus \n\na:hover \n\na:active "; drawOutput(); >); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); 
```
Добавление иконок в ссылки

Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.

Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:
```
p> For more information on the weather, visit our a href="weather.html">weather pagea>, look at a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipediaa>, or check out a href="http://www.extremescience.com/weather.htm" >weather on Extreme Sciencea >. p> 
```
```
body  width: 300px; margin: 0 auto; font-family: sans-serif; > p  line-height: 1.4; > a  outline: none; text-decoration: none; padding: 2px 1px 0; > a:link  color: blue; > a:visited  color: purple; > a:focus, a:hover  border-bottom: 1px solid; > a:active  color: red; > a[href*="http"]  background: url("external-link-52.png") no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; > 
```
Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

Также мы используем background-size для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.

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

И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст «http» таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*=»http»] выбирает элементы , но только если они имеют атрибут href со значением содержащим «http» где-то внутри него.

Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

Примечание: Не переживайте если вы ещё не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном (en-US) ; это объяснено в других местах

Стилизация ссылок в виде кнопок

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

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

Для начала HTML:
```
ul> li>a href="#">Homea>li> li>a href="#">Pizzaa>li> li>a href="#">Musica>li> li>a href="#">Wombatsa>li> li>a href="#">Finlanda>li> ul> 
```
А теперь наш CSS:
```
body, html  margin: 0; font-family: sans-serif; > 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: black; > li:last-child a  margin-right: 0; > a:link, a:visited, a:focus  background: yellow; > a:hover  background: orange; > a:active  background: red; color: white; > 
```
Что даёт нам следующий результат:

Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:
- Наше второе правило удаляет заданный по умолчанию padding у элемента и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае ).
- Элементы по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
- четвёртое правило — которое стилизует элемент — самое сложное; давайте пройдёмся по нему шаг за шагом:
  - как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline — мы не хотим, чтоб они портили нам вид.
  - Далее мы устанавливаем display на inline-block — элементы являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block , мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
  - Теперь только изменение размера! Мы хотим заполнить всю ширину элемента , оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет
    - Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.
    Примечание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.
    
    Заключение
    
    Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.
    
    Found a content problem with this page?
    - Edit the page on GitHub.
    - Report the content issue.
    - View the source on GitHub.
    This page was last modified on 3 авг. 2023 г. by MDN contributors.
    
    Добавить ссылку в css
    
    Можно ли сделать ссылку в CSS?
    Здравствуйте. Можно ли в CSS свойствах сделать ссылку на другую страницу? И если да, то как?
    
    Как в css задать ссылку на другую страницу
    Как в css задать ссылку на другую страницу? предположим есть див с классом 111, нужно написать.
    
    Изменение плавное CSS-свойства при нажатии на ссылку
    Доброй ночи, уважаемые форумчане. Подскажите, как можно реализовать данную задачу средствами.
    
    Добавить ссылку
    Здравствуйте, форумчане! Пожалуйста подскажите, как каждой ячейке столбца добавить ссылку.
    Похожие публикации: