Как изменить стиль гиперссылки css - Исправление ошибок и поиск оптимальных решений проблем

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

Назад
Обзор: Styling text
Далее

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

Для изучения вам потребуется:	Основы компьютерной грамотности, базовые знания 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 homepage</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

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

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

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

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

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

color (en-US) для цвета текста.
cursor для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
outline (en-US) для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния 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
Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>

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

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

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

Активное изучение: Стилизуйте ссылки самостоятельно

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

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <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
 Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p></textarea>

  <h2>CSS Input</h2>
  <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>Output</h2>
  <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  font-size: 1.2rem;n  font-family: sans-serif;n  line-height: 1.4;n}nna {n  outline: none;n  text-decoration: none;n  padding: 2px 1px 0;n}nna:link {n  color: #265301;n}nna:visited {n  color: #437A16;n}nna:focus {n  border-bottom: 1px solid;n  background: #BAE498;n}nna:hover {n  border-bottom: 1px solid;n  background: #CDFEAA;n}nna:active {n  background: #265301;n  color: #CDFEAA;n}';
  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 page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

Далее, CSS:

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"] выбирает элементы <a>, но только если они имеют атрибут href со значением содержащим «http» где-то внутри него.

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

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

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

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

Для начала HTML:

<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></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 у элемента <ul> и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае <body>).
Элементы <li> по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
четвёртое правило — которое стилизует элемент <a> — самое сложное; давайте пройдёмся по нему шаг за шагом:
- как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline (en-US) — мы не хотим, чтоб они портили нам вид.
- Далее мы устанавливаем display на inline-block — элементы <a> являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block, мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
- Теперь только изменение размера! Мы хотим заполнить всю ширину элемента <ul>, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <ul> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <a> в списке и удаляет его margin. Сделано!
- Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.

Примечание: Обратите внимание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.

Заключение

Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.

Назад
Обзор: Styling text
Далее

Источник

От автора: интернет был основан на ссылках. Именно идея того, что мы можем кликать/нажимать на ссылки и переходить с одной веб-страницы на другую сделала фразу «серфить интернет» бытовой. Стилизация ссылок CSS помогает сделать их какими угодно. Хотя в HTML они отличаются от обычного текста даже без CSS.

Ссылки имеют синий цвет (просмотренные – фиолетовый). У них есть подчеркивание. В демо представлена самая простейшая ссылка.

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

Хотите взять другой шрифт, сменить цвет, удалить подчеркивание и перевести все буквы в верхний регистр? Конечно, почему нет?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

a {

color: red;

text—decoration: none;

text—transform: uppercase;

}

Уже намного лучше! Но зачем останавливаться? Давайте рассмотрим пару других способов стилизации ссылок для завершения UX.

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

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

Hover (:hover): когда курсор расположен над ссылкой без клика

Visited (:visited): ссылка, по которой пользователь переходил ранее, но на которую сейчас не наведен курсор

Active (:active): ссылка в процессе нажатия. Состояние очень быстрое – когда кнопка нажата, но до завершения щелчка.

Ниже представлена ссылка из предыдущего демо. Сперва попробуйте навести курсор на нее без клика. Обратите внимание, под ссылкой появляется подчеркивание. Кликните на нее и зажмите – так вы увидите активное состояние ссылки, когда ее цвет становится черным. Отпустите кнопку мыши, и ссылка станет фиолетовой еще до ее посещения.

Концепция ссылки кажется простой, но там много чего происходит – и CSS дает нам невероятную мощь по настройке UX!

Ссылки как кнопки

На эту тему ведутся споры, но мы можем с помощью CSS превратить текстовую ссылку в кнопку.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

a {

background—color: red;

color: white;

padding: 1em 1.5em;

text—decoration: none;

text—transform: uppercase;

}

Отлично! Давайте добавим нашей кнопке интерактивности и применим полученные в предыдущем разделе знания. При наведении курсора кнопка будет темно-серой, черной по клику и светло-серой после посещения:

a {

background—color: red;

color: white;

padding: 1em 1.5em;

text—decoration: none;

text—transform: uppercase;

}

a:hover {

background—color: #555;

}

a:active {

background—color: black;

}

a:visited {

background—color: #ccc;

}

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

О, и курсоры!

Мы уже довольно далеко зашли в стилизации ссылок, и есть один компонент, который мы не можем игнорировать — курсор. Курсор показывает положение мыши на экране. Мы привыкли к обычной черной стрелке:

При наведении курсора мы можем заменить стрелку на руку (:hover) – так будет проще понять, что со ссылкой можно взаимодействовать:

a:hover {

cursor: pointer;

}

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

Автор: Geoff Graham

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Источник

В этой статье мы расскажем, как стилизовать ссылки с помощью свойств 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>

Для оформления ссылки как кнопки потребуются следующие свойства: 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, чтобы придать кнопкам определенную высоту. В конце мы устанавливаем белый цвет для текста.

Заключение

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

Источник

Для управления видом различных ссылок в CSS используются псевдоклассы, которые
указываются после селектора A через двоеточие. В табл. 1
приведены допустимые псевдоклассы и их описания.

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

Свойство	Описание
A:link	Определяет стиль для обычной непосещенной ссылки.
A:visited	Определяет стиль для посещенной ссылки.
A:active	Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover	Определяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот
же эффект, что и применение стиля к селектору A. Поэтому
этот псевдокласс можно опустить.

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

Одно из наиболее популярных применений CSS — это скрытие подчеркивания
у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь
может сразу не догадаться, что текст, который он видит, является ссылкой. Все
ведь уже привыкли — раз подчеркивание используется, значит это ссылка.
Но при правильном применении отсутствие подчеркивания у ссылок может придать
определенный эффект сайту. Часто делается, что при наведении курсора, ссылка
становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект
одновременно (пример 1).

Пример 1. Подчеркивание у ссылки и изменение ее цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { 
    text-decoration: none; /* Убирает подчеркивание для ссылок */
   } 
   A:visited { text-decoration: none; } 
   A:active { text-decoration: none; }
   A:hover {
    text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */
    color: red; /* Цвет ссылки */
   } 
  </style>
 </head> 
 <body>
    <p><a href="1.html">Пример ссылки</a></p>
 </body> 
</html>

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

Подчеркнутые и надчеркнутые ссылки

Еще один пример демонстрирует использование в ссылках подчеркивания
и надчеркивания одновременно. При этом эффекте тонкие линии будут
появляться над и под ссылкой при наведении на нее курсора. Это достигается
применением свойства text-decoration: underline
overline в селекторе A:hover.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
   <style type="text/css">
    A:link { text-decoration: none; }
    A:visited { text-decoration: none; }
    A:active { text-decoration: none; }
    A:hover { 
     text-decoration: underline overline; /* Ссылка подчеркнутая и надчеркнутая */
     color: red; /* Цвет ссылки */
   } 
  </style>
 </head>
 <body>
   <p><a href="1.html">Пример ссылки</a></p>
 </body>
</html>

Изменение размера ссылки

Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.

Пример 3. Изменение размера ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { text-decoration: none; }
   A:visited { text-decoration: none; }
   A:active { text-decoration: none; }
   A:hover { 
    font-size: 24px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: red; /* Цвет ссылки */
   }
  </style>
 </head>
 <body>
   <p><a href="1.html">Пример ссылки</a></p>
 </body>
</html>

Изменение цвета подчеркивания

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

Пример 4. Создание подчеркивание другого цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { color: blue; text-decoration: none; }
   A:hover { color: red; text-decoration: underline; }
   .link { color: blue; }
  </style>
 </head>
 <body>
  <p><a href="1.html"><span class="link">Ссылка</span></a></p>
 </body>
</html>

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

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

Пример 5. Ссылки разных цветов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A { font-size: 14px; color: red; }
   A.link1 { font-size: 12px; color: green; }
   A.link2 { font-size: 14px; color: blue; }
  </style>
 </head>
 <body>
  <p>| <a href="1.html">Ссылка 1</a> | 
   <a href="2.html" class="link1">Ссылка 2</a> | 
   <a href="3.html" class="link2">Ссылка 3</a> |</p>
  </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Разные ссылки на одной странице

Источник

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

ссылки без подчёркивания;
декоративное подчёркивание;
выделение фоновым цветом;
рамки;
рисунок возле ссылки.

Далее указанные методы оформления ссылок рассматриваются более подробно.

Ссылки без подчёркивания

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

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

Пример 1. Отсутствие подчёркивания у ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
text-decoration: none; /* Убираем подчёркивание */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration, они наследуют свойства селектора a.

Подчёркивание ссылок при наведении на них курсора мыши

Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration: none, следует воспользоваться псевдоклассом :hover. Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).

Пример 2. Подчёркивание ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

Декоративное подчёркивание ссылок

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom, которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed, получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3. Пунктирное подчёркивание для ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
color: blue; /* Цвет ссылок */
text-decoration: none; /* Убираем подчёркивание */
}
a:hover {
border-bottom: 1px dashed blue; /* Добавляем синее пунктирное подчёркивание */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

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

Рис. 1. Использование пунктира для выделения ссылки

Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.

Пример 4. Двойное подчёркивание ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
color: blue; text-decoration: none;
}
a:hover {
border-bottom: 4px double red;
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

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

Использование фонового цвета

Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background, присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover, тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).

Пример 5. Фон под ссылкой

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
padding: 2px; /* Поля вокруг текста ссылки */
text-decoration: none; /* Убираем подчёркивание */
}
a:hover {
background: #f73; /* Цвет фона при наведении на ссылку курсора */
color: yellow; /* Новый цвет текста */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

Фон под ссылкой точно соответствует области текста, поэтому в примере для селектора a добавлено свойство padding, создающее поля вокруг текста (рис. 2).

Рис. 2. Изменение цвета фона при наведении на ссылку курсора

Рамка вокруг ссылки

При использовании рамок со ссылками возможны два варианта. Первый — рамка вокруг ссылок устанавливается заранее и при наведении на неё курсора меняет свой цвет. И второй — рамка отображается, только когда на ссылку наводится курсор.

В примере 6 показано, как изменять цвет рамки, используя свойство border. Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

Пример 6. Изменение цвета рамки у ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
border: 1px solid blue; /* Синяя рамка вокруг ссылок */
padding: 2px; /* Поля вокруг текста */
text-decoration: none; /* Скрываем подчёркивание */
}
a:hover {
border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding. Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background.

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

a {
  border: 1px solid transparent; /* Прозрачная рамка вокруг ссылок */
}
a:hover {
  border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */
}

Рисунки возле внешних ссылок

Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).

Рис. 3. Выделение ссылки с помощью рисунка

Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a[href^=»http://»] {…}, как показано в примере 7.

Пример 7. Рисунок возле ссылки

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a[href^=»http://»] {
background: url(/example/image/blank.png) 100% 5px no-repeat; /* Рисунок */
padding-right: 18px; /* Отступ справа */
}
</style>
</head>
<body>
<p><a href=»1.html»>Обычная ссылка</a></p>
<p><a href=»http://htmlbook.ru»>Ссылка на сайт htmlbook.ru</a></p>
</body>
</html>

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right. Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left.

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*=»//»], он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

См. также

Последнее изменение: 11.03.2020

Источник

Ссылки или гиперссылки являются неотъемлемой частью сайта. Это позволяет посетителям перемещаться по сайту. Поэтому правильное оформление ссылок является важным аспектом создания удобного веб-сайта.

Посмотрите Руководство по ссылкам в HTML, чтобы узнать больше о том, как их создавать.

Ссылка может иметь четыре различных состояния— link, visited, active и hover. Эти четыре состояния ссылки могут быть оформлены по-разному с помощью следующих селекторов-псевдоклассов.

a:link — определяет стили для обычных или не посещенных ссылок;
a:visited — определить стили для ссылок, которые пользователь уже посетил;
a:hover — определяет стили для ссылки, когда пользователь наводит на нее указатель мыши;
a:active — определяет стили для ссылок, когда на них нажимают.

Вы можете использовать те же CSS-свойства, что и для обычного текста например, например, color, font, background, border и т. д. для каждого из этих селекторов, чтобы настроить стиль ссылок.

a:link {    /* unvisited link */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* visited link */
    color: #ff00ff;
}
a:hover {    /* mouse over link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* active link */
    color: #00ffff;
}

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

В общем случае порядок псевдоклассов должен быть следующим — :link, :visited, :hover, :active, :focus, чтобы они работали правильно.

Изменение стандартных стилей ссылок

Во всех основных браузерах, таких как Chrome, Firefox, Safari и т. д. , если вы не установите стили для ссылок, по умолчанию они будут подчеркнуты и будут использовать цвета ссылок браузера.

По умолчанию текстовые ссылки будут выглядеть следующим образом в большинстве браузеров:

Не посещенная ссылка подчеркнута и выделена синим цветом;
Посещенная ссылка подчеркнута и выделена фиолетовым цветом;
Активная ссылка подчеркнута и выделена красным цветом.

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

Теперь давайте посмотрим, как настроить ссылки, переопределив их стили по умолчанию.

Настройка пользовательского цвета ссылок

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

В следующем примере показано как это работает:

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

Удаление подчеркивания по умолчанию из ссылок

Если вам не нравится подчеркивание по умолчанию для ссылок, вы можете просто использовать CSS-свойство text-decoration, чтобы избавиться от него. Кроме того, вы можете применить другие стили к ссылкам, такие как background-color, border-bottom, font-weight: bold и т. д., чтобы ссылки визуально отличались от обычного текста.

На этом сайте используется свойство border-bottom для выделения ссылок в тексте.

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

a:link, a:visited {
    text-decoration: none; 
}
a:hover, a:active {
    text-decoration: underline;
}

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

Вы также можете сделать ваши обычные текстовые ссылки похожими на кнопки, используя CSS. Для этого нам нужно использовать еще несколько CSS-свойств, таких как background-color, border, display, padding и т. д. Об этих свойствах вы узнаете подробнее в следующих главах.

Следующий пример демонстрирует код для кнопки:

a:link, a:visited {
    color: white;    
    background-color: #1ebba3;    
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #099983;
    text-decoration: none;
    text-align: center;
    font: 14px Arial, sans-serif;  
}
a:hover, a:active {
    background-color: #9c6ae1;
    border-color: #7443b6;
}

Источник

Improve Article

Save Article

Read

Discuss

Improve Article

Save Article

Link is a connection from one web page to another web pages. CSS property can be used to style the links in various different ways.
States of Link: Before discussing CSS properties, it is important to know the states of a link. Links can exist in different states and they can be styled using pseudo classes.
There are four state of links given below:

a:link => This is a normal, unvisited link.
a:visited => This is a link visited by user at least once
a:hover => This is a link when mouse hovers over it
a:active => This is a link which is just clicked.

Syntax:

a:link {
    color:color_name;
}

color_name can be given in any format like color name (green), HEX value (#5570f0) or RGB value rgb(25, 255, 2). There is another state ‘a:focus’ which is used to focused when a user uses tab key to navigate through the links.
Default value of links:

By default the links created are underlined.
When mouse is hovered above a link, it changes to a hand icon.
Normal/unvisited links are blue.
Visited links a colored purple.
Active links are colored red.
When a link is focused, it has an outline around it.

Example

html

<!DOCTYPE html>

<html>

<head>

<title>CSS links</title>

<style>

p {

font-size: 25px;

text-align: center;

}

</style>

</head>

<body>

</body>

</html>

Output:

CSS Properties of Links: Some basic CSS properties of links are given below:

color
font-family
text-decoration
background-color

color: This CSS property is used to change the color of link text.
Syntax:

a {
    color: color_name;
}

Example:

html

<!DOCTYPE html>

<html>

<head>

<title>Link color property</title>

<style>

p {

font-size: 20px;

text-align:center;

}

/*unvisited link will appear green*/

a:link{

color:red;

}

/*visited link will appear blue*/

a:visited{

color:blue;

}

/*when mouse hovers over link it will appear orange*/

a:hover{

color:orange;

}

/*when the link is clicked, it will appear black*/

a:active{

color:black;

}

</style>

</head>

<body>

This link will change colours with different states.</p>

</body>

</html>

Output:

font-family: This property is used to change the font type of a link using font-family property.
Syntax:

a {
    font-family: "family name";
}

Example:

html

<!DOCTYPE html>

<html>

<head>

<style>

/*Initial link font family arial*/

a {

font-family:Arial;

}

p {

font-size: 30px;

text-align:center;

}

/*unvisited link font family*/

a:link{

color:Arial;

}

/*visited link font family*/

a:visited{

font-family:Arial;

}

/*when mouse hovers over it will change to times new roman*/

a:hover{

font-family:Times new roman;

}

/*when the link is clicked, it will changed to Comic sans ms*/

a:active{

font-family:Comic Sans MS;

}

</style>

</head>

<body>

id="link">GeeksforGeeks</a> a Computer Science

Portal for Geeks.</p>

</body>

</html>

Output:

Text-Decoration: This property is basically used to remove/add underlines from/to a link.
Syntax:

a {
    text-decoration: none;
}

Example:

html

<!DOCTYPE html>

<html>

<head>

<title>Text decoration in link</title>

<style>

/*Set the font size for better visibility*/

p {

font-size: 2rem;

}

/*Removing underline using text-decoration*/

a{

text-decoration: none;

}

/*underline can be added using

text-decoration:underline;

*/

</style>

</head>

<body>

Portal for Geeks.</p>

</body>

</html>

Output:

background-color: This property is used to set the background color of link.
Syntax:

a {
    background-color: color_name;
}

Example:

html

<!DOCTYPE html>

<html>

<head>

<title>background color</title>

<style>

/*Setting font size for better visibility*/

p{

font-size: 2rem;

}

/*Designing unvisited link button*/

a:link{

background-color: powderblue;

color:green;

padding:5px 5px;

text-decoration: none;

display: inline-block;

}

/*Designing link button when mouse cursor hovers over it*/

a:hover{

background-color: green;

color:white;

padding:5px 5px;

text-align: center;

text-decoration: none;

display: inline-block;

}

</style>

</head>

<body>

GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>

</body>

</html>

Output:

CSS Link Button: CSS links can also be styled using buttons/boxes. The following example shows how CSS links can be designed as buttons.
Example:

html

<!DOCTYPE html>

<html>

<head>

<title>Link button</title>

<style>

/*Setting font size for better visibility*/

p{

font-size: 2rem;

}

a {

background-color: green;

color:white;

padding:5px 5px;

border-radius:5px;

text-align: center;

text-decoration: none;

display: inline-block;

}

</style>

</head>

<body>

GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>

</body>

</html>

Output:

Источник

Improve Article

Save Article

Read

Discuss

Improve Article

Save Article

a:link => This is a normal, unvisited link.
a:visited => This is a link visited by user at least once
a:hover => This is a link when mouse hovers over it
a:active => This is a link which is just clicked.

Syntax:

a:link {
    color:color_name;
}

By default the links created are underlined.
When mouse is hovered above a link, it changes to a hand icon.
Normal/unvisited links are blue.
Visited links a colored purple.
Active links are colored red.
When a link is focused, it has an outline around it.

Example

html

<!DOCTYPE html>

<html>

<head>

<title>CSS links</title>

<style>

p {

font-size: 25px;

text-align: center;

}

</style>

</head>

<body>

</body>

</html>

Output:

CSS Properties of Links: Some basic CSS properties of links are given below:

color
font-family
text-decoration
background-color

color: This CSS property is used to change the color of link text.
Syntax:

a {
    color: color_name;
}

Example:

html

<!DOCTYPE html>

<html>

<head>

<title>Link color property</title>

<style>

p {

font-size: 20px;

text-align:center;

}

/*unvisited link will appear green*/

a:link{

color:red;

}

/*visited link will appear blue*/

a:visited{

color:blue;

}

/*when mouse hovers over link it will appear orange*/

a:hover{

color:orange;

}

/*when the link is clicked, it will appear black*/

a:active{

color:black;

}

</style>

</head>

<body>

This link will change colours with different states.</p>

</body>

</html>

Output:

font-family: This property is used to change the font type of a link using font-family property.
Syntax:

a {
    font-family: "family name";
}

Example:

html

<!DOCTYPE html>

<html>

<head>

<style>

/*Initial link font family arial*/

a {

font-family:Arial;

}

p {

font-size: 30px;

text-align:center;

}

/*unvisited link font family*/

a:link{

color:Arial;

}

/*visited link font family*/

a:visited{

font-family:Arial;

}

/*when mouse hovers over it will change to times new roman*/

a:hover{

font-family:Times new roman;

}

/*when the link is clicked, it will changed to Comic sans ms*/

a:active{

font-family:Comic Sans MS;

}

</style>

</head>

<body>

id="link">GeeksforGeeks</a> a Computer Science

Portal for Geeks.</p>

</body>

</html>

Output:

Text-Decoration: This property is basically used to remove/add underlines from/to a link.
Syntax:

a {
    text-decoration: none;
}

Example:

html

<!DOCTYPE html>

<html>

<head>

<title>Text decoration in link</title>

<style>

/*Set the font size for better visibility*/

p {

font-size: 2rem;

}

/*Removing underline using text-decoration*/

a{

text-decoration: none;

}

/*underline can be added using

text-decoration:underline;

*/

</style>

</head>

<body>

Portal for Geeks.</p>

</body>

</html>

Output:

background-color: This property is used to set the background color of link.
Syntax:

a {
    background-color: color_name;
}

Example:

html

<!DOCTYPE html>

<html>

<head>

<title>background color</title>

<style>

/*Setting font size for better visibility*/

p{

font-size: 2rem;

}

/*Designing unvisited link button*/

a:link{

background-color: powderblue;

color:green;

padding:5px 5px;

text-decoration: none;

display: inline-block;

}

/*Designing link button when mouse cursor hovers over it*/

a:hover{

background-color: green;

color:white;

padding:5px 5px;

text-align: center;

text-decoration: none;

display: inline-block;

}

</style>

</head>

<body>

GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>

</body>

</html>

Output:

CSS Link Button: CSS links can also be styled using buttons/boxes. The following example shows how CSS links can be designed as buttons.
Example:

html

<!DOCTYPE html>

<html>

<head>

<title>Link button</title>

<style>

/*Setting font size for better visibility*/

p{

font-size: 2rem;

}

a {

background-color: green;

color:white;

padding:5px 5px;

border-radius:5px;

text-align: center;

text-decoration: none;

display: inline-block;

}

</style>

</head>

<body>

GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>

</body>

</html>

Output:

Источник

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

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

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

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

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

Активное изучение: Стилизуйте ссылки самостоятельно

Добавление иконок в ссылки

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

Заключение

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

Ссылки как кнопки

О, и курсоры!

PSD to HTML

Заключение

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

Подчеркнутые и надчеркнутые ссылки

Изменение размера ссылки

Изменение цвета подчеркивания

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

Ссылки без подчёркивания

Подчёркивание ссылок при наведении на них курсора мыши

Декоративное подчёркивание ссылок

Использование фонового цвета

Рамка вокруг ссылки

Рисунки возле внешних ссылок

См. также

Изменение стандартных стилей ссылок

Настройка пользовательского цвета ссылок

Удаление подчеркивания по умолчанию из ссылок

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

html

html

html

html

html

html

html

html

html

html

html

html

Читайте также: