Как сделать ссылку css
Перейти к содержимому

Как сделать ссылку 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

Добавление CSS

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

Таблицы связанных стилей

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

Пример 1. Подключение таблицы связанных стилей

    Стили   

Hello, world!

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

Достоинства данного способа

  1. Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
  2. Можно изменять таблицу стилей без модификации веб-страниц.
  3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
  4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

Таблицы глобальных стилей

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

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

    Стили   

Hello, world!

В данном примере показано изменение стиля заголовка . На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

Внутренние стили

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

Пример 3. Использование внутренних стилей

    Стили   

Hello, world!

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

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

Пример 4. Сочетание разных методов подключения стилей

    Стили H1 

Hello, world!

Hello, world!

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.

Как вставить ссылку в HTML и оформить ее в CSS?

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

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

Навигация по статье:

  • Как вставить ссылку в HTML?
  • Как открыть ссылку в новой вкладке HTML?
  • Как делается картинка-ссылка HTML?
  • Как сделать ссылку на скачивание файла HTML?
  • Как сделать якорь на странице html?
  • Как изменить цвет ссылки в html?
  • Как сделать из ссылки кнопку?

Как вставить ссылку в HTML?

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

< a href = "//impuls-web.ru" >Как сделать ссылку на сайт ? < / a >

Кроме атрибута href, который задает адрес перехода, тегу можно задавать следующие атрибуты:

  • download – указывает на файл для скачивания.
  • name – якорь.
  • title — всплывающая подсказка при наведении.
  • accesskey — активация ссылки с помощью комбинации клавиш.
  • coords – задает координаты расположение активной области.
  • hreflang – определяет язык текста по ссылке.
  • rel — отношения между ссылаемым и текущим документами.
  • rev — отношения между текущим и ссылаемым документами.
  • shape — указывает форму области ссылки для изображений.
  • tabindex — последовательность переключения между ссылками при нажатии на клавишу Tab.
  • target — имя окна или фрейма, куда браузер будет загружать документ.
  • type — тип документа, на который осуществляется переход.

Большинство из данных атрибутов используются достаточно редко. Наиболее часто используемыми атрибутами являются href, download, target и name.

Как открыть ссылку в новой вкладке HTML?

Для открытия новой вкладке мы можем использовать атрибут target с атрибутом _blank.

< a href = "//impuls-web.ru" target = "_blank" >Как сделать ссылку на сайт ? < / a >
Более подробно, об этом я рассказывала в этой статье:

Как делается картинка-ссылка HTML?

Если вам нужно сделать картинку-ссылку в HTML, то для этого вам нужно просто поместить тег с адресом картинки в тег .

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

Как сделать ссылку на скачивание файла HTML?

Если вы хотите сделать на своем сайте ссылку для скачивания какого либо файла, то можете использовать HTML-код ссылки:

При клике по такой ссылке будет появляться всплывающее окошко с предложением сохранить файл на компьютере:

Скачать файл

Как сделать якорь на странице html?

Не редко бывают случаи когда нужно сделать прокрутку на какое-то место на странице. Особенно часто такая задача встречается при создании посадочных страниц (Lending Page). Для этого мы можем использовать атрибут name.

Давайте рассмотрим как сделать якорь на странице html на примере создания кнопки для быстрого перехода наверх сайта.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *