Стиль ссылки css: CSS и CSS3. Свойства для форматирования html-элементов

21.11.2018 Facebook Twitter LinkedIn Google+ Разное

меняем цвет и фон, превращаем в кнопку, придаем интерактивность

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

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

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

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

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

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

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

a { color: red; text-decoration: none; text-transform: uppercase; }

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 { 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; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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; }

a:hover {

  cursor: pointer;

}

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

Автор: Geoff Graham

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

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

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

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

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

PSD to HTML

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

Смотреть

Цвет ссылок | 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>

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

Как с помощью css сделать ссылку красивой

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

Появление каскадных таблиц стилей (CSS) во многом упростило весь процесс разработки и оформления внешнего вида веб-страниц. Благодаря CSS объемы кода сильно сократились. Теперь стилевое решение можно прописать один раз, а затем применять его для нужных элементов.

В CSS доступ к стилевым описаниям реализован с помощью классов и селекторов. Многие прослеживают в этом проявление основных принципов объектно-ориентированного программирования.

Сравните объем кода с использованием каскадных таблиц стилей и без них:


А вот, насколько уменьшается код после включения в него CSS:
Даже визуально заметно, что объем уменьшился в несколько раз. При этом одно стилевое описание CSS ссылки применено ко всем остальным.

CSS включает в себя большой набор средств для установки стилевых характеристик ссылок. Доступ к тегу <a href> может быть реализован несколькими способами:

  • С помощью селектора элемента – при этом стиль ссылки задается селектором элемента а. Пример:
<style type="text/css">
a{font-size:24px;
  font-background-color:#33CC99;
}
</style>

Описанный стиль будет применен ко всем ссылкам внутри страницы:

  • Через селектор идентификатора – он задается внутри тега <a href>. А его стилевое описание располагается в блоке CSS внутри страницы или в отдельном файле каскадных таблиц стилей. В начале имени селектора ставится решетка. Пример:
<style type="text/css">
#a1{font-size:24px;
  font-background-color:#33CC99;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще много, много раз!</a>

</body>

Результат аналогичен предыдущему.

  • Через селектор класса – для этого внутри тега в атрибуте class прописывается имя класса. В CSS перед его именем ставится точка. Пример:
<style type="text/css">
.a1{font-size:24px;
  font-background-color:#33CC99;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще много, много раз!</a>

</body>

С помощью всех этих трех методов можно легко установить цвет ссылки. Пример:

<style type="text/css">
a{font-size:24px;
  font-background-color:#33CC99;
  background-color:#FFCCCC;
}
#a2
{background-color:#FF0033;
}
.a3
{background-color:#339999;
}

</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>

</body>

Как видно, цвет шрифта, установленный через селектор элемента, сохраняется для всех ссылок. При этом цвета фона, заданные через класс a3 и идентификатор a2, доминируют над цветом, установленным через селектор элемента a.

Таким же образом можно убрать подчеркивание ссылок. Для этого внутри селектора свойству text-decoration присваивается значение none. Пример:

<style type="text/css">
a{
font-size:24px;
text-decoration: none;
}

</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
</body>

Ссылка является не совсем обычным элементом html. Да и в css отношение к тегу <a href> тоже особенное. Для установки характеристик внешнего вида ссылки в каскадных таблицах стилей применяются встроенные псевдо классы.

Псевдо классом называется класс CSS, применяемый к стилю элемента в зависимости от его состояния (активный, неактивный, при нажатии).

В CSS различают несколько псевдо классов ссылок:

  • A:link – задает стиль ссылки до посещения;
  • A:visited – стиль после посещения;
  • A:active – устанавливает, как будет выглядеть активная ссылка;
  • A:hover – вид ссылки при наведении на нее курсора мыши.

A:link по своему действию аналогичен селектору элемента a (оба задают внешний вид не посещенной ссылки).

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

<style type="text/css">

    A:link { text-decoration: none; font-size:24px; }
    A:visited { text-decoration: overline; }
    A:hover { 
     text-decoration: underline overline; font-size:30px;
     color: #FF00FF; 
   }
   A:active { text-decoration: underline; color: #00FF00; font-size:40px; } 
  </style>
 </head>
 <body>
   <p><a href="1.html">Пример ссылки</a></p>

</body>

С помощью псевдо классов можно легко установить фоновое изображение ссылки, которое меняется в зависимости от действий пользователя. Пример:
<style type="text/css">

    A:link {
	display: block;
    width: 200px;
    height: 70px;
    background: url(im/1.gif)no-repeat; 
	}
    A:visited {
	display: block;
    width: 200px;
    height: 70px;
    background: url(im/2.gif)no-repeat; 
	}
    A:hover { 
    display: block;
    width: 200px;
    height: 70px;
    background: url(im/3.gif)no-repeat;  
   }
   A:active {
    display: block;
    width: 200px;
    height: 70px;
    background: url(im/4.gif)no-repeat; 
   } 
  </style>
 </head>
 <body>
  <p><a href="4.html"></a></p>

</body>

Как видно из приведенных примеров, с помощью css ссылкам можно придавать разнообразную форму и вид. И эти возможности намного обширнее, чем в html. Да и писанины c CSS намного меньше.

CSS: Селекторы ID и CLASS

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


/*Задаём отступ первой строки для всех абзацев*/
p {text-indent: 25px;}

/*Изменяем цвет всех заголовков первого уровня на зелёный*/
h2 {color: green;}

Селектор типа — это селектор, который задаёт стиль для всех элементов с данным именем. В стилях в качестве селектора в данном случае выступает имя тега.

Но что если нам не нужно изменять цвет для всех заголовков <h2>, а только у одного или у двух? CSS предоставляет нам такую возможность. С помощью селекторов id и class, мы можем применять стиль к элементам не зависимо от их имён.

Селектор id

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

Для использования селектора id, нужно создать идентификатор (id), придумав ему уникальное имя, и прописать его в атрибуте id элемента, к которому будет применяться стиль. В CSS коде селектор id начинается с символа # сразу после которого идет имя идентификатора.

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

Пример работы селектора id:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #para1 {
        text-align: center;
        color: red;
      } 
    </style>
  </head>

  <body>
    <p>Добро пожаловать!</p>
    <p>К этому абзацу не будет применен стиль.</p>
  </body>
</html>
Попробовать »

Примечание: не давайте идентификаторам имена, начинающиеся с цифр, они не будут работать в браузере Mozilla Firefox.

Селектор class

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

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

Правила для имен классов:

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

CSS код для классов ничем не отличается от CSS кода для других селекторов. После имени класса идет блок объявлений, содержащий все необходимые свойства:

.menu {
  color: #33CCFF;
  font-family: sans-serif;
}

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.center { text-align: center; }
    </style>
  </head>

  <body>
    <h2>Стиль не будет применен.</h2>
    <p>Абзац будет выровнен по центру.</p> 
  </body>
</html>
Попробовать »

Как вы уже заметили из примера, писать точку перед именем класса в HTML коде (в значении атрибута class) не нужно. Она требуется только в обозначении селектора в таблице стилей.

С этой темой смотрят:

HTML тег ссылки


Пример

Ссылка на внешнюю таблицу стилей:



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

Определение и использование

Тег определяет связь между текущим документом и внешним ресурс.

Тег чаще всего используется для ссылки на внешние таблицы стилей.

Элемент — пустой элемент, он содержит только атрибуты.

Поддержка браузера

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

Элемент
<ссылка> Есть Есть Есть Есть Есть

Атрибуты

Атрибут Значение Описание
перекрестное происхождение анонимный
учетные данные		 Определяет, как элемент обрабатывает запросы из разных источников.
href URL Определяет расположение связанного документа
hreflang language_code Задает язык текста в связанном документе
СМИ media_query Указывает, на каком устройстве будет отображаться связанный документ
ссылка на политику no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url		 Указывает, какой реферер использовать при выборке ресурса
отн. альтернативный
автор
dns-prefetch
справка
значок
лицензия
следующие
pingback
предварительное подключение
предварительная загрузка
предварительная загрузка
предварительная загрузка
предыдущая
поиск
таблица стилей		 Обязательно.Определяет связь между текущим документом и связанным документом
размеры Высота x Ширина
любая		 Задает размер связанного ресурса. Только для rel = «icon»
название Определяет предпочтительную или альтернативную таблицу стилей
тип media_type Задает тип носителя для связанного документа

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебное пособие по HTML: стили HTML

Ссылка на HTML DOM: объект ссылки

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

ссылка {
дисплей: нет;
}



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

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

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

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

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

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

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

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

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

  
  п {
  font-size: 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: link и a: loaded , чтобы установить несколько цветовых вариаций для непосещенных и посещенных ссылок, чтобы они были различны.
  • Следующие два правила используют a: focus и a: hover , чтобы установить для сфокусированных и зависших ссылок разные цвета фона, плюс подчеркивание, чтобы ссылка еще больше выделялась. Здесь следует отметить два момента:
    • Подчеркивание было создано с использованием border-bottom , а не text-decoration — некоторые люди предпочитают это, потому что первый имеет лучшие варианты стилей, чем второй, и нарисован немного ниже, поэтому не пересекает нижние элементы подчеркнутого слова (e.г. хвосты на g и y).
    • Значение нижней границы было установлено как 1px сплошной , без указания цвета. В результате граница приобретает тот же цвет, что и текст элемента, что полезно в подобных случаях, когда текст в каждом случае имеет другой цвет.
  • Наконец, a: active используется, чтобы дать ссылкам инвертированную цветовую схему во время их активации, чтобы было понятно, что происходит что-то важное!

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

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

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

Игровой код 
  

   
 Ввод HTML 
 
  

   
 Ввод CSS 
 
  

   
 Вывод 
 
  
 

  

    
    
  



  
  var htmlInput = document.querySelector (". Html-input");
var cssInput = document.querySelector (". css-input");
var reset = документ.getElementById ("сброс");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector (". output");
вар решение = документ.getElementById ("решение");

var styleElem = document.createElement ('стиль');
var headElem = document.querySelector ('голова');
headElem.appendChild (styleElem);

function drawOutput () {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener ("клик", function () {
  htmlInput.value = htmlCode;
  cssInput.значение = cssCode;
  drawOutput ();
});

solution.addEventListener ("клик", function () {
  htmlInput.value = htmlCode;
  cssInput.value = 'p {\ n font-size: 1.2rem; \ n font-family: sans-serif; \ n line-height: 1.4; \ n} \ n \ na {\ n схема: нет; \ n text-decoration: none; \ n padding: 2px 1px 0; \ n} \ n \ na: link {\ n color: # 265301; \ n} \ n \ na: посещено {\ n color: # 437A16; \ n } \ n \ na: focus {\ n border-bottom: 1px solid; \ n background: # BAE498; \ n} \ n \ na: hover {\ n border-bottom: 1px solid; \ n background: #CDFEAA; \ n} \ n \ na: активный {\ n фон: # 265301; \ n цвет: #CDFEAA; \ n} ';
  drawOutput ();
});

htmlInput.addEventListener («вход», drawOutput);
cssInput.addEventListener («ввод», drawOutput);
window.addEventListener ("загрузка", drawOutput);

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

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

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

Далее CSS:

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

п {
  высота строки: 1.4;
}

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

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

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

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

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

a [href * = "http"] {
  фон: url ('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  размер фона: 16 пикселей 16 пикселей;
  отступ справа: 19 пикселей;
}

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

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

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

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

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

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