Содержание

Цвет ссылок | htmlbook.ru

С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве атрибутов тега <body>. Атрибуты являются необязательными и если они не указаны используются значения по умолчанию.

link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).

alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.

vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb, где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет ссылок</title>
 </head>
 <body link="red" vlink="#cecece" alink="#ff0000" bgcolor="black">
  <p><a href="content.html">Содержание сайта</a></p>
 </body>
</html>

Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A.

visited — Стиль для посещенной ссылки.

active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

hover — Стиль для ссылки при наведении на нее мышью.

В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей. Для этого воспользуемся стилевым свойством color, оно задает цвет определенного текста, в данном случае, ссылок.

Пример 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">
   BODY {
    background: black; /* Цвет фона веб-страницы */
   } 
   A {
    color: red; /* Цвет ссылок */
   }
   A:visited {
    color: #cecece; /* Цвет посещенных ссылок */
   }
   A:active {
    color: #ffff00; /* Цвет активных ссылок */
   }
  </style>
 </head>
 <body>
  <p><a href="content.html">Содержание сайта</a></p>
 </body>
</html>

Задание цвета отдельных ссылок на странице

Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.

Для изменения цвета ссылки следует использовать атрибут в теге <a>, где #rrggbb — цвет в шестнадцатеричном представлении. Можно, также, использовать названия цветов или указывать цвет в формате: rgb (132, 33, 65). В скобках указаны десятичные значения красного, зеленого и синего цвета (пример 3).

Пример 3. Изменение цвета ссылки с помощью стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет ссылок</title>
 </head>
 <body link="#ffcc00" vlink="#cecece" alink="#ff0000" bgcolor="black">
  <p><a href="content.html">Содержание сайта</a></p>
  <p><a href="1.html">Интернет-маркетинг</a></p>
  <p><a href="2.html">Юзабилити</a></p> 
 </body>
</html>

В данном примере приведены три разных способа задания цвета с помощью стилей.

Как на странице сделать ссылки разных цветов?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Определить свой цвет ссылок для разных областей веб-страницы.

Решение

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

Для раздельного управления стилем разных ссылок рассмотрим два способа. Первый основан на контекстных селекторах. Смысл следующий. Ссылки меню располагаются внутри блока, например, <div>…</div>, а ссылки в тексте внутри блока <div>…</div>. Тогда стиль для разных ссылок получится таким.

<style>
  .menu a { color: red; }
  .content a { color: green; }
</style>

Запись .menu A означает, что стиль будет определен только для селектора A, который располагается внутри элемента с классом menu (пример 1).

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование контекстных селекторов</title>
  <style>
   .menu {
    padding: 5px; /* Поля вокруг текста */
    background: #066; /* Цвет фона */
   }
   .menu a {
    color: #ffc; /* Цвет ссылки */
   }
   .content {
    background: #ccc; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
   }
   .content a {
    color:#6f4a25; /* Цвет ссылок */
   }
  </style>
 </head>
 <body>
  <div>
   <a href="link1.html">Ссылка 1</a> | 
   <a href="link2.html">Ссылка 2</a> | 
   <a href="link3.html">Ссылка 3</a>
  </div>
  <div>
   <a href="link1.html">Ссылка 1</a> | 
   <a href="link2.html">Ссылка 2</a> | 
   <a href="link3.html">Ссылка 3</a>
  </div>
 </body>
</html>

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

Рис. 1. Ссылки, различающиеся по цвету

Второй способ состоит в использовании классов. Для ссылки, цвет которой надо определить, создаётся новый класс и добавляется к тегу <a> (пример 2).

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование классов</title>
  <style>
   a {
    color: orange; /* Цвет ссылки */ 
   }
   a.content {
    color: #6f4a25; /* Цвет ссылок */ 
    text-decoration: none; /* Убираем подчеркивание */ 
   }
   a.content:visited { 
    color: purple; /* Цвет посещенных ссылок */ 
   }
   a.content:hover {
    color: red; /* Цвет ссылок при наведении на них курсора мыши */ 
   }
  </style>
 </head>
 <body>
  <p>
    <a href="link1.html">Ссылка 1</a> | 
    <a href="link2.html">Ссылка 2</a> | 
    <a href="link3.html">Ссылка 3</a>
  </p>
  <p>
    <a href="link1.html">Ссылка 1</a> |  
    <a href="link2.html">Ссылка 2</a> | 
    <a href="link3.html">Ссылка 3</a>
  </p>
 </body>
</html>

Как изменить цвет ссылки в CSS?

В этой статье мы расскажем, как стилизовать ссылки с помощью свойств CSS (например. изменить цвет ссылки в CSS) Оформление ссылок зависит от состояния, в которых они находятся:

  • Не посещенная ссылка: состояние ссылки по умолчанию. Оно определяется с помощью псевдокласса :link.
  • Посещенная ссылка: стилизуется с помощью псевдокласса :visited.
  • Активная: ссылка, которая активируется нажатием. Задается с помощью псевдокласса: active.
  • Ссылка, на которую пользователь навел курсор: стилизуется псевдоклассом :hover.
  • Выделенная фокусом ввода: стилизуется с использованием псевдокласса :focus.

Пример оформления простой ссылки

<!DOCTYPE html> 
<html> 
<head> 
<title>CSS links</title> 
<style> 
p { 
   font-size: 30px; 
   text-align: center; 
   }          
</style> 
</head> 
<body> 
<p><a href="https://www.herbalife.com">Example for a simple link</a></p> 
</body>     
</html>

По умолчанию не посещенные ссылки оформляются синим цветом, посещенные – фиолетовым, выделенные фокусом ввода – контуром, а активные – красным цветом.

Эти стили можно изменить, используя следующие свойства CSS. Пример использования свойства text-decoration:

<!DOCTYPE html>
<html>
<head>
<style>
p { 
   font-size: 30px; 
   text-align: center; 
   }          
 
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Here is a link</a></b></p>
</body>
</html>

Пример, в котором для оформления ссылки используется свойство background-color

<!DOCTYPE html>
<html>
<head>
<style>
p { 
   font-size: 30px; 
   text-align: center; 
   }          
a:link {
  background-color: coral;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: DarkMagenta;
}
a:active {
  background-color: DarkSalmon ;
} 
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>

Для оформления ссылки как кнопки потребуются следующие свойства: color, text-decoration, text-align, background color display, padding и другие.

Вот пример:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
    background-color: DarkSalmon ;
    border: none;
    color: #FFFFFF;
    padding: 25px 52px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
    font-size: 20px;
    text-align: center; 
    cursor: pointer;
    display: inline-block;
}
a:hover, a:active {
    background-color: DarkRed ;
}
</style>
</head>
<body>
<body>
    <a href="http://www.tennis.com" target="_blank">BUTTON</a>
</body>
</body>
</html>

Свойства, указанные в псевдоклассе :hover, могут применяться и к другим элемента, а не только к ссылкам.

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

<!DOCTYPE html>
<html>
<head>
<style>
body,html {
  margin: 0;
  font-family: sans-serif, arial, helvetica;
}
ul {
  padding: 0;
  width: 100%;
}
li {
  display: inline;
}
a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: white;
}
li:last-child a {
  margin-right: 0;
}
a:link, a:visited, a:focus {
  background: DarkSalmon ;
}
a:hover {     
  background: DarkRed ;
}
a:active {
  background: red;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a href="#">Tournaments</a></li><li><a href="#">Scores</a></li><li><a href="#">
News</a>
</li>
<li><a href="#">Videos</a></li><li><a href="#">PLAYERS & RANKINGS</a></li>
</ul>
</body>
</html>

Давайте рассмотрим, что именно происходит в примере, приведенном выше. Для элемента <ul> мы устанавливаем нулевой отступ, устанавливая и ширину 100% внешнего контейнера, (в нашем случае <body>).

Элементы <li> будут располагаться отдельной строке. Таким образом, мы создадим горизонтальный список ссылок.

Самым сложным является правило номер четыре, которое стилизует элемент <a>. Мы начали с отключения стиля текста, используемого по умолчанию. Затем мы установили display: inline для элементов списка. Для ссылок мы задаем display: inline-block, чтобы иметь возможность их масштабировать.

Элементы <a> являются строчными по умолчанию. Но нам нужно изменить их размер. Свойство inline-block позволяет сделать это.

Для определения размеров заполним всю ширину элемента <ul>, оставляя небольшое пространство между каждой кнопкой. После этого устанавливаем ширину и расстояние между каждой кнопкой. Затем задаем line-height: 3, чтобы придать кнопкам определенную высоту. В конце мы устанавливаем белый цвет для текста.

Заключение

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

Данная публикация является переводом статьи «Styling CSS Links» , подготовленная редакцией проекта.

Как изменить цвет ссылки при наведении?

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A. Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).

Пример 1. Изменение вида ссылки

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Цвет ссылок</title> <style> a { color: #0075B2; /* Цвет обычной ссылки */ text-decoration: none; /* Убираем подчёркивание у ссылок */ } a:visited { color: #8F8E8E; /* Цвет посещённой ссылки */ } a:hover { color: #CE242B; /* Цвет ссылки при наведении */ text-decoration: underline; /* Добавляем подчёркивание */ } </style> </head> <body> <p><a href=»#»>Cras ingens iterabimus aequor</a> — завтра снова мы выйдем в огромное море.</p> </body> </html>

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited. Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.

Рис. 1. Вид ссылки при наведении

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

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон под ссылками</title> <style> a { color: #000080; /* Цвет обычной ссылки */ padding: 2px; /* Поля вокруг текста */ } a:hover { text-decoration: none; /* Убираем подчёркивание */ color: #FFFAC0; /* Цвет ссылки */ background: #AB4A9C; /* Цвет фона */ } </style> </head> <body> <p><a href=»#»>Audaces fortuna juvat</a> — счастье покровительствует смелым.</p> </body> </html>

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.

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

Автор и редакторы

Автор: Влад Мержевич

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

Редакторы: Влад Мержевич

seodon.ru | Учебник HTML — Меняем цвета ссылок

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

В старых версиях HTML существовали специальные атрибуты тега <BODY>, позволяющие изменять цвет ссылок на HTML-странице, это link, alink и vlink, но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS), а значит что? Вот и неправильно, не атрибут style, а так называемые внутренние стили. Для этого нам надо будет в «шапку» страницы (<HEAD>) вставить тег <STYLE type=»text/css»>…</STYLE>, а внутри него указать один или несколько следующих стилей:

<style type="text/css">
a:link {color:цвет}    /* цвет непосещенной ссылки */
a:visited {color:цвет} /* цвет посещенной ссылки */
a:hover {color:цвет}   /* цвет ссылки при наведении курсора мыши */
a:active {color:цвет}  /* цвет активной ссылки (в момент нажатия) */
</style>

C тегом <STYLE> вы пока еще не знакомы, но тут и учить нечего. Он используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.

Что касается самих стилей, то сначала там идет имя тега, к которому применяется стиль (в нашем случае это <A>), затем после двоеточия указывается к какой именно ссылке применяется стиль (link, visited, hover, active). Ну а то, что находится в фигурных скобках { } вам должно быть уже хорошо известно по предыдущим урокам. И не забывайте про совет: лучше всегда задавать цвет в HEX-формате со знаком решетка (#) впереди, а не писать имя цвета.

Пример изменения цвета ссылок в HTML-странице

<!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=Windows-1251">
<title>Изменение цвета ссылок на странице</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
 <p><a href="http://seodon.ru/">Как создать сайт</a></p>
 <p><a href="http://spravka.seodon.ru/">Справочники по HTML и CSS</a></p>
</body>
</html>

Результат в браузере

Если вы недавно были на страницах указанных в ссылках, то естественно ссылки будут сразу окрашены в «посещенный» цвет.

Изменяем цвет отдельных ссылок

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

Пример использования тегов

<!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=Windows-1251">
<title>Изменение цвета ссылок на странице</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
 <p><a href="http://seodon.ru/">Сайт Seodon.ru</a></p>

 <p>
  Здесь вы можете найти
  <a href="http://spravka.seodon.ru/">
   справочник по тегам HTML
  </a>
 </p>
</body>
</html>

Результат в браузере

Домашнее задание.

  1. Создайте три блока DIV и пусть их фон будет цвета #EEEEEE.
  2. Разместите в каждом DIV’е по одной ссылке. Пусть они ведут на любые сайты в интернете.
  3. В каждой ссылке сделайте так, чтобы при наведении на нее курсора мыши появлялась соответствующая подсказка.
  4. Пусть цвет непосещенной ссылки будет #FF0099, посещенной — #009933, при наведении курсора мыши — #0099FF, активной — #00FF66.

Посмотреть результат → Посмотреть ответ

Как изменить цвет ссылок в WordPress. Как добавить подчеркивание html, css

Как изменить цвет ссылок в WordPress. В некоторых темах WordPress менять цвет ссылок можно, не напрягаясь, в настройках темы из консоли. Когда делаешь первые шаги в изучении и строении сайта(пусть и на базе конструктора, как сейчас, или на голом html, как раньше, до эры простых в использовании конструкторов), очень увлекает процесс внешнего вида сайта и кажется значимым. Создатель сайта тщательно переберет с десяток тем, меняя до одури цвет, шрифт, виджеты, навешивая десятки плагинов для представления аватарки зарегистрированных пользователей и проч., проч, проч… Когда сайт создан и не один, то все это перестает быть важным. Ставишь тему, подгоняешь небольшие моменты, которые не устраивают, и, как говорится, наплевать. Сайт — для контента, а не для его безвкусного оформления. Не все мы прирожденные дизайнеры и эстеты, поэтому старайтесь придерживаться разумного минимализма. Птица красива полетом, а не оперением. Поверьте, что это не нужно. Ни вам, ни пользователям(если они вообще придут на ваш сайт), гораздо лучше, если гости заявятся неожиданно, а стол не накрыт, чем за обставленным столом остаться одному.

Итак, если в адаптивных настройках темы нет возможности поменять цвет ссылок, то на помощь придет всемогущий редактор. Во-первых, посмотрим, где находится файл класса ссылок — css. Для этого нужна борода Старик-Хоттабыча и заклинание(если браузер не дает такой функции в меню), а именно одновременное нажатие кнопок (горячих клавиш) ctrl+shirt+C или ctrl+shift+I или ctrl+U или F12 — я жму последовательно, удерживая по порядку. И первые два варианта мне нравятся больше, поскольку подсвечивают блоки, что визуально удобнее.

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

Но, будем менять через редактор файлов в панели управления сайтом. В Консоли — Внешний вид — Редактор — файл Таблица стилей

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

Далее я нахожу код нужного мне цвета в яндексе — #191970 — название понравилось —  MidnightBlue. Теперь — ручная работа, тут будьте внимательны:

меняю найденный код в строчках 144 и 145

text-decoration: none;
color: #8a6d3b;

на

text-decoration: underline;
color: #191970;

то есть, меняю цвет и добавляю подчеркивание (underline) к ссылке, потому что оно задано не было. Сохраняю изменения и обновляюсь. Ничего не происходит, странно. Я открываю другой браузер, захожу на сайт. Ссылки поменяли цвет, как мне требовалось. Значит тот браузер притормозил, что нередко происходит с людьми. Скорее всего ему нужно прочистить мозги, то есть очистить кэш.

Важно: если вы опасаетесь менять код, то можете делать так.

1. Скопируйте весь код в файл и сохраните на компьютере. Затем в редакторе меняйте код, обновляйте, проверяйте, и если что-то не устроит, вносите старый код обратно, и снова сохраняйте. чтобы вернуться.

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

Как изменить цвет ссылки в css

Здравствуйте уважаемые читатели. Сегодня мы поговорим как с помощью html и css изменить ссылку на Вашем сайте: поменять цвет, добавить или убрать подчеркивание.

Как изменить цвет ссылки с помощью HTML.

Как вы помните, ссылка вставляется следующим образом:

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

Как видим, ссылка поменяла свой цвет. Какой цвет теперь будет у ссылки, зависит от #FF0000. Это специальный цветовой код html, который присваивается каждому цвету всей цветовой палитры. Для того, чтобы определить какой код имеет тот или иной цвет ,советую прочитать статью палитра цвета html.

Как убрать подчеркивание.

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

Как видите, подчеркивание исчезло.

Как изменить цвет ссылки с помощью CSS.

Вышеописанный метод, несмотря на всю свою простоту, используется крайне редко. Как правило, для оформления веб-страницы используется таблица ститей style.css в которой прописывается оформление всех элементов страницы, в том числе, и ссылок.

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

Ну вот и все. Не забывайте оценивать статью и ставить лайки. Ну и, разумеется, комментируйте.

С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве атрибутов тега . Атрибуты являются необязательными и если они не указаны используются значения по умолчанию.

link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).

alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.

vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb , где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

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

Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A .

visited — Стиль для посещенной ссылки.

active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

hover — Стиль для ссылки при наведении на нее мышью.

В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей. Для этого воспользуемся стилевым свойством color , оно задает цвет определенного текста, в данном случае, ссылок.

Пример 2. Цвет ссылок, заданных через стили

Задание цвета отдельных ссылок на странице

Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.

Пример 3. Изменение цвета ссылки с помощью стилей

В данном примере приведены три разных способа задания цвета с помощью стилей.

Ссылка в HTML выглядит следующим образом:

По умолчанию ее цвет синий и она будет иметь подчеркивание.

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

Есть и другой способ изменить внешний вид ссылки. Для этих целей используются таблицы стилей CSS. Причем вы сможете задать значения для ссылок при различных условиях, будь-то активная ссылка (a:active), посещенная ссылка(a:visited) либо ссылка при наведении мыши (a:hover). Вот как это делается:

a <
color:#FF0000;
text-decoration:none
>

a:active <
color:#FF0000;
text-decoration:none
>

a:visited <
color:#666666;
text-decoration:none
>

a:hover <
color:#339900;
text-decoration: underline
>

CSS-ссылок для стилизации

С помощью CSS ссылки можно стилизовать по-разному.

Текстовая ссылка Текстовая ссылка Кнопка ссылки Кнопка ссылки

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

Ссылки могут быть стилизованы с любым свойством CSS (например, цвет , font-family , фон и др.).

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

Четыре состояния ссылок:

  • a: link — нормальная непосещаемая ссылка
  • a: посещено — ссылка, которую посетил пользователь
  • a: hover — ссылка, когда пользователь наводит на нее курсор
  • a: active — ссылка в момент нажатия

Пример

/ * непосещенная ссылка * /
a: ссылка {
цвет: красный;
}

/ * посетил ссылка * /
a: посетил {
цвет: зеленый;
}

/ * наведение указателя мыши на ссылку * /
a: hover {
color: hotpink;
}

/ * выбранная ссылка * /
a: активная {
цвет синий;
}

Попробуй сам »

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

  • a: hover ДОЛЖЕН идти после ссылки: и после: visit
  • a: active ДОЛЖЕН быть после a: hover

Оформление текста

Свойство text-decoration в основном используется для удаления подчеркивания в ссылках:

Пример

a: ссылка {
оформление текста: нет;
}

a: посещено {
текстовое оформление: нет;
}

a: hover {
украшение текста: подчеркивание;
}

a: активно {
оформление текста: подчеркивание;
}

Попробуй сам »

Цвет фона

Свойство background-color можно использовать для указания цвета фона для ссылок:

Пример

a: ссылка {
цвет фона: желтый;
}

a: посещено {
background-color: cyan;
}

a: hover {
background-color: светло-зеленый;
}

a: active {
background-color: hotpink;
}

Попробуй сам »

Кнопки связи

Этот пример демонстрирует более сложный пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде блоков / кнопок:

Пример

a: ссылка, a: посетил {
background-color: # f44336;
белый цвет;
отступ: 14px 25px;
выравнивание текста: по центру;
текстовое оформление: нет;
дисплей: строчно-блочный;
}

a: hover, a: active {
background-color: red;
}

Попробуй сам »

Другие примеры

Пример

В этом примере показано, как добавить другие стили к гиперссылкам:

а.one: link {color: # ff0000;}
a.one:visited {color: # 0000ff;}
a.one:hover {color: # ffcc00;}

a.two: link {color: # ff0000;}
a.two: посещено {color: # 0000ff;}
a.two: hover {font-size: 150%;}

a.three: link {color: # ff0000;}
a.three: visit {color: # 0000ff;}
a.three: hover {background: # 66ff66;}

четыре: ссылка {color: # ff0000;}
четыре: посетили {color: # 0000ff;}
a.four: hover {font-family: monospace;}

a.five: link {color: # ff0000; text-decoration: none;}
a.пять: посетили {color: # 0000ff; text-decoration: none;}
a.five: hover {text-decoration: underline;}

Попробуй сам »

Пример

Другой пример создания полей / кнопок ссылок:

a: ссылка, a: посещение {
background-color: white;
цвет: черный;
граница: 2 пикселя сплошного зеленого цвета;
отступ: 10 пикселей 20 пикселей;
выравнивание текста: центр;
текстовое оформление: нет;
дисплей: строчно-блочный;
}

a: hover, a: active {
цвет фона: зеленый;
цвет: белый;
}

Попробуй сам »

Пример

Этот пример демонстрирует различные типы курсоров (может быть полезно для ссылок):

auto

crosshair

default

e-resize

help

перемещение

n-resize

ne-resize

nw-resize

указатель

progress

s-resize

se-resize

sw-resize

text

w-resize

подождите

Попробуй сам »

Проверьте себя упражнениями!



Как изменить цвет ссылки в CSS

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

Используя CSS, мы можем стилизовать ссылки по-разному. Мы можем установить следующие состояния гиперссылки:

a: активный Используется для добавления стиля к активному элементу.
a: парение Он добавляет специальные эффекты к элементу, когда пользователь наводит указатель мыши на элемент.
а: ссылка Добавляет стиль непосещенной ссылке.
a: посетил Добавляет стиль к посещенной ссылке.

Следует отметить, что в определении CSS a: hover должно идти после a: link и a: visit , а также a: active должно идти после a: hover в чтобы быть эффективными.

Порядок объявления состояний гиперссылки:

Чтобы изменить цвет ссылки, мы должны использовать свойство color CSS.Имя цвета может быть дано в любом допустимом формате, например, имя цвета, значение rgb () или значение HEX.

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

Пример

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

Добро пожаловать на

javaTpoint.com

Проверить это сейчас

Выход

Пример

В этом примере мы применяем к ссылкам некоторые свойства CSS, такие как font-family, text-decoration и background-color . По умолчанию созданная ссылка подчеркнута, поэтому, чтобы удалить подчеркивание, мы можем использовать свойство text-decoration и установить для него значение none .

Добро пожаловать на

javaTpoint.com

Текст javaTpoint.com в строке выше — это гиперссылка.

Проверить это сейчас

Выход

Пример

Теперь есть еще один пример, в котором мы изменим цвет активных и посещенных ссылок, а также изменим цвет ссылки при наведении. По умолчанию посещенные ссылки окрашены в фиолетовый цвет, а активные ссылки — в красный, поэтому мы изменим их цвета, используя свойство color и псевдоклассы : посещено,: active и : hover .

Добро пожаловать на

javaTpoint.com

Текст javaTpoint.com в строке выше — это гиперссылка.

Проверить это сейчас

Выход

Когда программа запустится, мы получим следующий экран.

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

Когда ссылка находится в активном состоянии, она имеет красный цвет, как показано ниже.

Как изменить цвета ссылок в HTML

Вы можете стилизовать ссылки по-разному с помощью свойств CSS.Как правило, для стилизации ссылок используются свойства color, font-family и background-color.

Есть три способа изменить цвет ссылки: встроенный , внутренний и внешний .

Встроенный метод¶

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

Пример изменения цвета ссылки встроенным методом: ¶ 

  

  
     Название документа 
  
  
    
 Посетите наш веб-сайт .
Попробуйте сами »

Результат

Внутренний метод¶

Внутренний метод требует, чтобы вы использовали тег

Посетите наш веб-сайт .

Попробуйте сами »

Есть 4 состояния ссылок, которые могут быть стилизованы в зависимости от того, в каком состоянии они находятся:

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

При установке стиля для нескольких состояний ссылки следуйте этим правилам:

  • a: hover ДОЛЖЕН стоять после: link и a: loaded,
  • a: active ДОЛЖЕН идти после: hover.

Пример использования различных состояний ссылки: ¶ 

  

  
     Название документа 
    <стиль>
      
      ссылка {
        цвет: #ccc;
      }
      
      а: посетил {
        цвет: # 095484;
      }
      
      a: hover {
        цвет: # 8ebf42;
      }
      
      a: active {
        цвет: # 800000;
      }
    
  
  
    
 Посетите наш
      веб-сайт .
Попробуйте сами »

Как изменить цвета подчеркивания гиперссылки и текста привязки¶

Чтобы изменить цвет подчеркивания, в первую очередь необходимо удалить его со значением« нет »текста -decoration и установите значение «none», затем добавьте свойство border-bottom с шириной (в данном случае, используемой как ширина подчеркивания гиперссылки) и свойствами стиля границы (сплошная, пунктирная или пунктирная).Для цвета текста привязки используйте свойство color.

Пример изменения цвета подчеркивания гиперссылки и текста привязки: ¶ 

  

  
     Название документа 
    <стиль>
      a {
        текстовое оформление: нет;
      }
      ссылка {
        цвет: # 000;
        нижняя граница: сплошной 1px # ff0000;
      }
      а: посетил {
        цвет: # e600e6;
        нижняя граница: сплошной 1px # b3b3b3;
      }
      a: hover {
        цвет: # 2d8653;
        нижняя граница: 1px solid # 000099;
      }
    
  
  
    
 Посетите наш
      веб-сайт .
Попробуйте сами »

Пример стилизации ссылок указанными методами: ¶ 

  

  
     Название документа 
    <стиль>
      a.one:link {
        цвет: #ccc;
      }
      a.one:visited {
        цвет: # 095484;
      }
      a.one:hover {
        цвет: # 8ebf42;
      }
      а.two: link {
        цвет: #ccc;
      }
      a.two: visit {
        цвет: # 095484;
      }
      a.two: hover {
        размер шрифта: 150%;
      }
      a.three: link {
        цвет: #ccc;
      }
      a.three: visit {
        цвет: # 095484;
      }
      a.three: hover {
        фон: # 8ebf42;
      }
      a.four: link {
        цвет: #ccc;
      }
      a.four: visit {
        цвет: # 095484;
      }
      а.four: hover {
        семейство шрифтов: моноширинный;
      }
      a.five: link {
        цвет: # 095484;
        текстовое оформление: нет;
      }
      a.five: visit {
        цвет: # 095484;
        текстовое оформление: нет;
      }
      a.five: hover {
        оформление текста: подчеркивание подчеркивание;
      }
    
  
  
    
 Наведите указатель мыши на ссылки и посмотрите, как они будут изменены: 

    

       Эта ссылка меняет цвет 
    

    

       Эта ссылка изменяет размер шрифта 
    

    

       Эта ссылка меняет цвет фона 
    

    

       Эта ссылка изменяет семейство шрифтов 
    

    

       Эта ссылка изменяет оформление текста
Попробуйте сами »

Теперь мы продемонстрируем другой пример, в котором мы используем свойство цвета с его« наследуемым »значением.Это заставит элемент принять цвет своего родителя.

Пример изменения цвета ссылки с помощью значения "наследовать" свойства цвета: ¶ 

  

  
     Название документа 
    <стиль>
      п {
        цвет: зеленый;
      }
      p a {
        цвет: наследовать;
      }
    
  
  
     
 Пример 
 
    W3docs.com 
    
 Посетите наш
      Веб-сайт  W3docs.com .
Попробуйте сами »

Пример стилизации ссылок с помощью свойства CSS text-decoration-color: ¶ 

  

  
     Название документа 
    <стиль>
      a {
        цвет оформления текста: серый;
      }
      ссылка {
        цвет: # 777777;
      }
      a: hover {
        цвет: # 2d8653;
      }
    
  
  
    
 Посетите наш веб-сайт .
Попробуйте сами »

Внешний метод¶

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

Используя внешний метод, вы свяжете свои веб-страницы с внешним файлом .css , который может быть создан любым текстовым редактором на вашем устройстве.Это более эффективный метод, особенно когда вам нужно стилизовать большой веб-сайт. Вы можете изменить свой сайт сразу, отредактировав один файл .css .

Подробнее о ссылках CSS.

Как изменить цвет ссылок на веб-странице

Обновлено: 02.05.2021, Computer Hope

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

Подсказка

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

Общие сведения о различных типах гиперссылок

Гиперссылки - это особые элементы на вашей странице, поскольку они интерактивны. Чтобы указать, что они интерактивны, они окрашены по-разному в зависимости от их состояния.Гиперссылка имеет три специальных цвета в дополнение к синему цвету по умолчанию, которые представляют три различных состояния:

  1. Посещенная ссылка - Цвет посещенной ссылки. Если гиперссылка имеет этот цвет, пользователь может ожидать, что щелкнув ссылку, он перейдет на страницу, которую он уже видел. Пурпурный - это цвет гиперссылки по умолчанию для посещенной ссылки.
  2. Ссылка при наведении - Цвет при наведении курсора мыши на ссылку. Если гиперссылка имеет этот цвет, пользователь может ожидать, что нажатие левой кнопки мыши (щелчок), а затем отпускание кнопки приведет к посещению ссылки.Цвет наведения одинаков для «Активных» и «Посещенных» ссылок.
  3. Активная ссылка - Цвет ссылки при нажатии. Когда пользователь видит этот цвет, он может ожидать, что при отпускании кнопки мыши браузер перейдет по ссылке.
Подсказка

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

Пример цвета ссылки CSS

В приведенном ниже примере CSS мы устанавливаем цвета гиперссылок, чтобы они напоминали то, что показано на этой странице.Во-первых, все привязки устанавливаются на # 2c87f0 (оттенок синего), # 636 на оттенок пурпурного, а цвет всех наведенных и активных ссылок: # c33 (красный). Приведенный ниже код можно добавить в элемент стиля CSS или в ваш файл .css.

 a {
  цвет: # 2c87f0;
}
а: посетил {
  цвет: # 636;
}
a: hover, a: active, a: focus {
  цвет: # c33;
}

Если ваша страница не использует CSS, приведенные ниже шаги показывают, как это сделать в теге HTML BODY. Однако, как упоминалось ранее, мы настоятельно рекомендуем использовать приведенный выше код CSS вместо тега body.Вы можете добавить приведенный выше код в файл CSS и связать все свои веб-страницы с этим файлом CSS. Затем вы можете изменить значения background-color в этом одном файле CSS, чтобы мгновенно изменить цвет фона всех страниц, ссылающихся на него.

Пример HTML-тега тела

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

Ниже приведены описания каждого из атрибутов HTML в теге body.

ТЕКСТ = Цвет текста.
ССЫЛКА = Цвет ссылок.
VLINK = Цвет посещенной ссылки.
ALINK = Цвет активной ссылки или цвет, на который ссылка меняет при нажатии.
BGCOLOR = Цвет фона страницы.

Стили ссылок - Изучите веб-разработку

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

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

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

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

  • Ссылка : Ссылка, имеющая место назначения (т.е.е., а не просто именованный якорь), стилизованный с использованием псевдокласса : link .
  • Посещено : ссылка, которая уже была посещена (существует в истории браузера), оформленная с использованием псевдокласса : посещено .
  • Hover : ссылка, на которую наведен указатель мыши пользователя, стилизованная с использованием псевдокласса : hover .
  • Focus : ссылка, на которой сфокусирован (например, перемещен пользователем клавиатуры с помощью клавиши Tab или чего-то подобного, или программно сфокусирован с использованием HTMLElement.focus () ) - это стилизовано с использованием псевдокласса : focus .
  • Active : активированная ссылка (например, нажатая), оформленная с использованием псевдокласса : active .

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

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

  
  Простая ссылка  

  
  п {
  размер шрифта: 2rem;
  выравнивание текста: центр;
}
Примечание:

Все ссылки в примерах на этой странице являются поддельными - вместо реального URL-адреса ставится # (знак решетки / решетки).Это связано с тем, что если бы были включены настоящие ссылки, нажатие на них нарушило бы примеры (вы бы получили ошибку или страницу, загруженную во встроенном примере, с которой вы не могли бы вернуться). # просто ссылки на текущая страница.

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

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

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

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

Стили по умолчанию можно отключить / изменить с помощью следующих свойств CSS:

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

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

Стили для некоторых ссылок

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

Для начала напишем наши пустые наборы правил:

  a {

}

ссылка {

}

а: посетил {

}

фокус {

}

a: hover {

}

a: active {

}

Этот порядок важен, потому что стили ссылок основываются друг на друге.Например, стили в первом правиле будут применяться ко всем последующим. Когда ссылка активирована, она обычно тоже зависает. Если вы разместите их в неправильном порядке и измените одни и те же свойства в каждом наборе правил, все будет работать не так, как вы ожидаете. Чтобы запомнить порядок, вы можете попробовать использовать мнемонику, например L o V e F уши HA te.

Теперь давайте добавим дополнительную информацию, чтобы правильно оформить этот стиль:

  кузов {
  ширина: 300 пикселей;
  маржа: 0 авто;
  размер шрифта: 1.2рем;
  семейство шрифтов: без засечек;
}

п {
  высота строки: 1,4;
}

a {
  наброски: нет;
  текстовое оформление: нет;
  отступ: 2px 1px 0;
}

ссылка {
  цвет: # 265301;
}

а: посетил {
  цвет: # 437A16;
}

фокус {
  нижняя граница: сплошная 1px;
  фон: # BAE498;
}

a: hover {
  нижняя граница: сплошная 1px;
  фон: #CDFEAA;
}

a: active {
  фон: # 265301;
  цвет: #CDFEAA;
}

Мы также предоставим образец HTML для применения CSS к:

  
 Доступно несколько браузеров, например  Mozilla
Firefox ,  Google Chrome  и
 Microsoft Edge .

Объединение этих двух дает следующий результат:

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

  • Первые два правила не особо интересны для этого обсуждения.
  • Третье правило использует селектор a , чтобы избавиться от подчеркивания текста по умолчанию и контура фокуса (который в любом случае различается в разных браузерах), и добавляет к каждой ссылке небольшое количество отступов - все это станет ясно позже.
  • Затем мы используем селекторы a: link и a: loaded , чтобы установить несколько цветовых вариаций для непосещенных и посещенных ссылок, чтобы они были различны.
  • Следующие два правила используют a: focus и a: hover , чтобы установить для сфокусированных и зависших ссылок разные цвета фона, а также подчеркивание, чтобы ссылка еще больше выделялась. Здесь следует отметить два момента:
    • Подчеркивание было создано с использованием border-bottom , а не text-decoration - некоторые люди предпочитают это, потому что у первого есть лучшие варианты стилизации, чем у второго.Он также нарисован немного ниже, чтобы не пересекать нижние части подчеркиваемого слова (например, хвосты на g и y).
    • Значение нижней границы было установлено как 1px сплошной , без указания цвета. При этом граница приобретает тот же цвет, что и текст элемента, что полезно в таких случаях, когда текст в каждом случае имеет другой цвет.
  • Наконец, a: active используется, чтобы дать ссылкам инвертированную цветовую схему во время их активации, чтобы было понятно, что происходит что-то важное!

Активное обучение: создавайте собственные ссылки

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

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

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

Давайте посмотрим на HTML и CSS, которые дадут нам желаемый эффект. Во-первых, простой HTML-код для стиля:

  
 Для получения дополнительной информации о погоде посетите нашу  страницу погоды ,
посмотрите  погоду в Википедии  или проверьте
из  погоды на сайте Extreme Science .

Далее CSS:

  кузов {
  ширина: 300 пикселей;
  маржа: 0 авто;
  семейство шрифтов: без засечек;
}

п {
  высота строки: 1,4;
}

a {
  наброски: нет;
  текстовое оформление: нет;
  отступ: 2px 1px 0;
}

ссылка {
  цвет синий;
}

а: посетил {
  цвет: фиолетовый;
}

a: focus, a: hover {
  нижняя граница: сплошная 1px;
}

a: active {
  красный цвет;
}

a [href * = "#"] {
  фон: url ('external-link-52.png') без повтора 100% 0;
  размер фона: 16 пикселей 16 пикселей;
  отступ справа: 19 пикселей;
}

Так что здесь происходит? Мы пропустим большую часть CSS, так как это та же информация, которую вы просматривали ранее.Однако последнее правило интересно: мы вставляем настраиваемое фоновое изображение во внешние ссылки аналогично тому, как мы обрабатывали настраиваемые маркеры в элементах списка в предыдущей статье. Однако на этот раз мы используем сокращение background вместо отдельных свойств. Мы устанавливаем путь к изображению, которое хотим вставить, указываем без повтора , чтобы была вставлена ​​только одна копия, а затем указываем позицию как 100% пути справа от текстового содержимого и 0 пикселей от вершина.

Мы также используем background-size , чтобы указать размер, в котором будет отображаться фоновое изображение. Полезно иметь значок большего размера, а затем изменять его размер по мере необходимости для адаптивного веб-дизайна. Однако это работает только с IE 9 и новее. Поэтому, если вам нужна поддержка старых браузеров, вам просто нужно изменить размер изображения и вставить его как есть.

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

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

Вот и все. Попробуйте еще раз вернуться к разделу активного обучения выше и опробовать эту новую технику!

Примечание:

Значения href выглядят странно - здесь мы использовали фиктивные ссылки, которые на самом деле никуда не ведут. Причина этого в том, что если бы мы использовали реальные ссылки, вы могли бы загрузить внешний сайт в