Ссылки в css: варианты оформления — учебник CSS

Состояния ссылок на CSS | Трепачёв Дмитрий

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

К примеру, вот так — a:hover — мы поймаем состояние, когда на ссылку навели курсор мышки. В этот момент мы можем, к примеру, поменять цвет ссылки или убрать/добавить ей подчеркивание. Конструкция :hover называется псевдоклассом. Псевдоклассы позволяют отлавливать разные состояния элементов.

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

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

a:link { color: red; } a:visited { color: green; } a:hover { text-decoration: none; } a:active { color: blue; }<a href="#">ссылка</a>

:

Нюансы

Псевдоклассы наследуют друг от друга. К примеру, если я уберу подчеркивание для состояния :link, то оно уберется для всех состояний.

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

:link, :visited, :hover, :active (ненужные можно не писать). Этот порядок подчиняется следующему мнемоническому правилу: LoVe HAte.

Сделайте все ссылки в состоянии :hover красными и неподчеркнутыми, в состоянии :link — голубыми, в состоянии :visited — зелеными, в состоянии :active — черными.

Состояния link и visited

Часто состояния :link и :visited объединяют вместе через запятую:

a:link, a:visited { color: red; } a:hover { text-decoration: none; } a:active { color: blue; }<a href="#">ссылка</a>

:

В таком случае можно их вообще и не указывать:

a { color: red; } a:hover { text-decoration: none; } a:active { color: blue; }<a href="#">ссылка</a>

:

Обычное использование

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

a { color: red; } a:hover { text-decoration: none; }<a href="#">ссылка</a>

:

Сделайте все ссылки во всех состояниях голубыми и неподчеркнутыми, а в состоянии :hover — красными и подчеркнутыми.

Псевдоклассы в CSS. Оформление ссылок

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

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

тег:превдокласс { 
  … 
}

То есть псевдоклассам предшествует двоеточие.

Если псевдокласс описывается для класса, выглядеть это может так:

тег.класс:превдокласс {
  …
}

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

Так для ссылок (гиперссылок) выделяют четыре состояния:

• link – непосещенная ссылка (в истории браузера не хранится ее адрес),
• visited – посещенная ссылка (в истории есть адрес),
• hover – курсор мыши находится над ссылкой,
• active – ссылка в момент, когда на нее наведен курсор мыши, и зажата левая кнопка мыши.

По умолчанию во всех четырех состояниях ссылки имеют подчеркивание. Непосещенная ссылка окрашена в синий цвет, посещенная – в фиолетовый. При наведении на ссылку курсора, он меняется со стрелки на иконку руки. Ссылка в момент «активации» приобретает красный цвет.

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

Часто у ссылок убирают подчеркивание, а между посещенной и непосещенной не делают различий.

a {
  margin: 10px;
  text-decoration: none;
  color: Green;
}
a:hover, a:active {
  border-bottom: dashed 1px Green;
}

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

В примере выше добавлять в правило селектор с псевдоклассом active не обязательно. Состояние active переопределяет hover. Поэтому если для active нет правила, то в этом состоянии ссылка будет выглядеть также, как в состоянии hover.

Для главного меню сайта ссылки часто стилизуют под кнопки:

a:link, a:visited {
  background: Green;
  color: White;
  text-decoration: none;
  padding: 15px 20px;
  text-align: center;
  display: inline-block;
  width: 200px;
}
a:hover, a:active {
  background-color: OliveDrab;
}

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

Конечно, мы можем назначить одним ссылкам один класс, другим – иной, или оставить без класса.

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

В CSS есть возможность выбирать из html-документа элементы, которые вложены (то есть являются потомками) в определенный внешний элемент (предок), по-сути являющийся для них html-контейнером. Селектор, с помощью которого выполняется такой выбор, называется

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

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

В примере на скрине выше ссылки меню заключены в контейнер <nav></nav>. Nav относится к семантическим элементам HTML и предназначен для основного меню сайта, навигации по сайту. В то же время для ссылок в статье в качестве предка мы можем выделить контейнер <main></main>.

CSS-код ниже дает такое же оформление ссылок, как на скрине выше:

a {
  text-decoration: none;
}
main a {
  color: DarkGreen;
}
main a:hover {
  border-bottom: dashed 1px Green;
}
nav a {
  background: Green;
  color: White;
  padding: 15px 20px;
  text-align: center;
  display: inline-block;
  width: 200px;
}
nav a:hover {
  background-color: OliveDrab;
}

Здесь четыре селектора потомка. В частности, селектор main a применяет свойства своего правила ко всем ссылкам, которые находятся в контейнере main. Таким образом, мы можем разделить стилизацию ссылок в зависимости от их обрамляющего html-элемента. При этом общее свойство было вынесено в селектор a. Его значение применяется для всех ссылок до их стилизации в зависимости от предка.

В отличие от примера, в котором использовался селектор класса, при использовании селектора потомка в коде HTML нет необходимости писать атрибут

class в ссылках навигации, что делает код чище:

<nav>
  <a href="python">Программирование</a>
  <a href="web">Web-Дизайн</a>
  <a href="blender">3D-моделирование</a>
</nav>

Заметим, что селектор потомка может комбинировать классы и иные типы селекторов:

. имя_класса вложенный_элемент { 
  … 
}

внешний_элемент .имя_класса { 
  … 
}

CSS: селектор ссылок

❮ Предыдущий Справочник по селекторам CSS Далее ❯

Пример

Выбрать и оформить непросмотренные ссылки:

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

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

Другие примеры «Попробуйте сами» ниже.

---

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

Селектор :link используется для выбора непосещенных ссылок.

Примечание: Селектор :link не стилизует ссылки, которые вы уже посетили.

Совет: Используйте селектор :visited для оформления ссылок на посещенные страницы, Селектор :hover для оформления ссылок при наведении на них курсора, а :active селектор для оформления ссылок при нажатии на них.

Версия:	CSS1

---

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:ссылка	4,0	7,0	2,0	3.1	9,6

---

Синтаксис CSS

:link {
  объявления css ;
}

---

---

Дополнительные примеры

Пример

Выберите и стилизуйте непосещенные, посещенные, наведенные и активные ссылки:

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

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

/* указатель мыши над ссылкой */
a:hover {
  color: red;
}

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

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

Пример

Ссылки на разные стили:

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

a.ex2: наведение, a.ex2: активный {
размер шрифта: 150%;
}

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

---

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

Учебник CSS: Ссылки CSS

Учебник CSS: Псевдоклассы CSS

❮ Предыдущая Справочник по селекторам CSS Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

---

3 Top8 Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Псевдоклассы ссылок CSS — WebFX

Псевдоклассы ссылок дают веб-дизайнерам возможность стилизовать различные состояния ссылок HTML. Псевдоклассы CSS, обычно используемые для стилизации гиперссылок: :link , :visited , :hover , :active и :focus . Пример:

  /* По умолчанию */  a { color: blue; }  /* Непосещенные ссылки */  a:link { color: blue; }  /* Посещенные ссылки */  a:посетили { color: Purple; }  /* Состояние наведения */  a:hover { color: red; }  /* Состояние фокусировки */  a:focus { color: orange; }  /* Состояние активировано */  a:active { color: green; } 

Обзор

Вот описание каждого псевдокласса:

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

Технически, из пяти наиболее часто используемых псевдоклассов для ссылок только два — :link и :visited — на самом деле являются псевдоклассами ссылок , специально разработанными для ссылок HTML ( ) элементы. Остальные три — :hover , :active и :focus — называются динамическими псевдоклассами и могут использоваться в других элементах HTML.

Комбинирование псевдоклассов

Для большей специфичности CSS можно использовать комбинацию псевдоклассов.

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

 a:link { цвет: синий; } a: посетил { цвет: фиолетовый; } a:link:hover { цвет: зеленый; } a:visited:hover { цвет: красный; } 

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

Порядок псевдоклассов

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

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

Чтобы все правила стиля псевдокласса ссылок отображались успешно, это предлагаемый порядок:

 a { } a:link { } a:visited { } a:hover { } a:focus { } a:active { } 

Нечувствительность к регистру

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

Все эти варианты псевдоклассов :link будут работать и технически эквивалентны друг другу:

 a:link { } a:LINK { } a:LiNk { } a:lInK { } 

Интервалы до и после имен псевдоклассов

Не должно быть никаких пробелов до и/или после двоеточия ( : ) перед именем псевдокласса. Например, запись правила стиля как такового не будет правильно отображаться в браузерах:

  /* Пробелы до и после двоеточия (:) не будут работать */  a : link { color: green; }  /* Пробелы перед двоеточием (:) не работают */  a :link { цвет: зеленый; }  /* Пробелы после двоеточия (:) не работают */  a: link { color: green; } 

Псевдоклассы ссылок в современных браузерах

В современных веб-браузерах :link и :visited будут вести себя иначе, чем другие псевдоклассы, чтобы защитить конфиденциальность истории просмотра посетителем. Современные браузеры теперь ограничивают свойства CSS, которые будут отображаться в правилах стиля, включающих :link и :visited 9.0022 псевдоклассы.

Короче говоря, правила стиля для :link и :visited не могут отличаться, за исключением свойств цвета. Например, вы не можете назначить им разные значения background-image или дать им разные значения display . В современных браузерах следующий пример не будет работать так, как вы ожидаете.

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

HTML

 Непосещенная ССЫЛКА Посещенная ССЫЛКА 

CSS

  /* Непосещенные ссылки отображаются в all-lowercase */  a:link { text-transform: lowercase; }  /* Посещенные ссылки отображаются заглавными буквами */  a:visited { text-transform: uppercase; } 

Результат

Для полного объяснения проблемы с псевдоклассами :link и :visited прочитайте эту статью: Почему псевдокласс :visited является странным.