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

Как сделать ссылку

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут href . В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).

Пример 1. Использование абсолютных ссылок

      
Поисковая система Яндекс
  

Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.

Примеры относительных адресов

/
/demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.

/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.

manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).

Пример 2. Использование относительных ссылок

      
Посмотрите на мою фотографию!
 
Как сделать такое же фото?
  

Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html . Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html .

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

mgncom

08.06.2011 11:28 9 386

Сейчас отображается просто картинка в шапке — а нужно сделать эту картинку (шапку) ссылкой

Ответы на пост (8) Написать ответ
09.06.2011 14:55

Находил недавно. Как домой приду скину ссылку. Но там фишка в том, что в div нужно вставить ссылку и у нее в стиле указать display: block; Тогда ссылка будет растягиваться на весь div и делать всю область активной.

09.06.2011 17:04

Так-то да. Элементарные вещи, автор ленится хоть чуть-чуть почитать про css.
Автору: покажи сайт. Меня пугает вот эта хрень: padding-right: 805px;

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 , добавить интересные эффекты.

/*общие стили для всех кнопок*/ 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 .

/*общие стили для всех ссылок*/ 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

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

Ссылка обычно содержит текст и адрес документа, на который следует перейти. При этом адрес на веб-странице явно не отображается и его можно увидеть во всплывающей строке браузера при наведении курсора на текст ссылки (рис. 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; /* Вот это работать не будет */ >

См. также

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