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

Содержание

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

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
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

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

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

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

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

Приступаем к установке:

HTML

Код

<div>
<p><a href=»http://zornet.ru»>Наведи на текс и увидете красивый эффект с переходои по клику</a></p>
</div>

CSS

Код

.transparencyn_sointinglink a {
  color: #2776c5;
  text-decoration: none;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  position: relative;
  display: inline-block;
}
.transparencyn_sointinglink a:hover {
  text-decoration:none;
  color: #cc135f;
  z-index:1;
  position:relative;
}
.transparencyn_sointinglink a::after{
  position: fixed;
  width: 100%;
  height: 100%;
  content: «»;
  z-index:-1;
  top:0;
  left:0;
  pointer-events: none;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  opacity:0;
}
.transparencyn_sointinglink a:hover::after,
.transparencyn_sointinglink a:focus::after {
  background: #fbf8f9;
  opacity:0.7;
}

За прозрачность отвечает свойство opacity:0.7, где меньше делаете, то становится более оригинальнее, а больше, это означает, более прозрачнее, что видимость небольшая.

Демонстрация

Второй вариант анимации:

HTML

Код

<div>
<p><a href=»#»>Наведи курсор и увидишь реально красивый эффект.</a></p>
</div>

CSS

Код

.rekerence-cartosonga a {
  color: #1a1a1b;
  text-decoration:none;
  position:relative;
  display:inline-block;
}
.rekerence-cartosonga a:hover {
  text-decoration:none;
}

.rekerence-cartosonga a::before{
  content: «»;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(245, 240, 240, 0.56), rgba(247, 246, 246, 0.5)) no-repeat 100% 0%;
  background-size: 100% 100%;
}
.rekerence-cartosonga a:hover::before,
.rekerence-cartosonga a:focus::before {
  transition: 0.7s linear;
  background-size: 0 100%;
}
.rekerence-cartosonga a::after {
  position: absolute;
  display: block;
  content: «»;
  height: 1px;
  width: 100%;
  background-color: #4d87ab;
  transition: width 0.7s ease-in-out;
}
.rekerence-cartosonga a:hover::after,
.rekerence-cartosonga a:focus::after {
  width: 0%;
  right:0;
  }

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

Что такое стиль и CSS.

★
что такое стиль   перейти ↓
★ что такое CSS   перейти ↓
★ что можно сделать с помощью стиля  перейти↓
★ задание стиля внутри кода элемента
(встроенный стиль)  перейти↓
★ задание стиля вне кода элемента
(внутренний стиль)  перейти↓
★ создаем документ средствами CSS  перейти↓
★ создание с помощью стиля изображений:  перейти↓
      круг
      круг с окантовкой
      треугольник
      перевернутый треугольник
      свой дизайн кнопки обработчика
★ как заменить одну картинку другой  перейти↓
      чистый HTML
      чистый CSS
      чистый JavaScript
      смена фоновой картинки
★ анимационные эффекты с помощью CSS  перейти↓
      растягивание элемента
      Затухание элемента
      Поворот элемента
      смена картинок с затуханием
      смена картинок с плавным исчезновением
★ простое новое окно средствами CSS  перейти↓
★ как задать hover сразу для нескольких элементов  перейти↓
★ маленькие хитрости CSS  перейти↓
      как убить шрифт
      как отцентрировать текст в рамке по вертикали
      как изменить расстояние между буквами и строками
      как изменить стиль ссылки
      как изменить стиль рамки
      как отменить стиль элемента
      что такое z-index
      как вставить текст в стиль CSS
      как сделать перенос строки в тексте, записанном в стиле CSS
что такое стиль
Для придания HTML-документу определенного внешнего вида, т.е. его оформления, каждый элемент HTML-документа имеет атрибут под названием "стиль" (style). Стиль - это правило,описывающее форматирование отдельного элемента на странице. Свойства атрибута "стиль" позволяют задать тип, размер и цвет шрифта, расположение элементов HTML-документа на экране монитора, сделать элемент невидимым или снова вернуть ему видимость и многое другое.
что такое CSS
Для описания внешнего вида веб-страницы используется язык CSS. Аббревиатура CSS расшифровывается следующим образом: Каскадные Таблицы Стилей(Cascading Style Sheets). CSS — формальный язык описания внешнего вида документа, который используется как средство описания, оформления внешнего вида веб-страниц. CSS и HTML — это два разных языка для разных целей. Язык HTML-кода отражает смысловое содержание и логическую структуру веб-страницы. Язык CSS используется для описания внешнего вида, дизайна веб-страницы. Например, чтобы задать размер шрифта и его цвет для одного конкретного абзаца текста в рамках документа, нужно записать код: &ltp&gt&lt/p&gt В этом примере внутри тэгов style расположен стиль, задающий красный цвет текста и его размер (25px). Или: установить элементу с идентификатором красный цвет текста с помощью атрибута style. Пишем: &ltp&gt&lt/p&gt &ltscript&gt document.getElementById(«text»).style.color = «red»;//св-во color объекта style &lt/script&gt Текст, выведенный с помощью идентификатора text, будет красным.
что можно сделать с помощью стиля
Как было указано выше, стиль позволяют задать тип,размер и цвет шрифта, расположение элементов HTML-документа на

Стили и классы гиперссылок

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

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

Как сделать ссылку блочной

Обойти это правило очень легко. Любой строчный элемент можно сделать блочным с помощью CSS.

/* CSS. Создаем классы и индексы для ссылки */
 
/* делаем ссылку блочной */
a.block_link {display: block;}
/* плавающей (автоматически становится блочной */
a#float_link {float: left;}
/* абсолютной (автоматически становится блочной */
а.absolut_link {position: absolute;}

После этого со ссылкой вида

<a href="#/">Блочная ссылка</a>

можно обращаться как с блочным элементом.

Примечание

href — обязательный атрибут. Если мы хотим чтобы ссылка никуда не вела, используем url #/.При указании в качестве url # без слэша, будет осуществлен переход к началу страницы.

Псевдоклассы

Рассмотрим особенности отображения гиперссылок браузером (у разных браузеров возможны варианты):

— Цвет. Обычно браузеры отображают не посещенную ссылку синим цветом
— Подчеркивание
— При наведении на ссылку, вид курсора меняется
— При клике, цвет ссылки меняется на красный
— После посещения, цвет ссылки становится фиолетовым

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

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

Но что делать с изменением цвета при клике на ссылку, или после посещения?

Браузеры способны изменять внешний вид содержимого тега в зависимости от состояния. Управлять этими изменениями можно с помощью

псевдоклассов
a:псевдокласс { набор стилевых правил;}

Различают 4 специальных состояния гиперссылок.

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

Как сделать ссылку кнопкой

Пример оформления ссылки: Кнопка

<!--HTML.-->
<a href="#/">Кнопка</a>

Псевдоклассы можно применять как непосредственно к тегу a, так и к классу ссылки

/*-- CSS. --*/
.link_button {
  padding: 4px 12px;
  border: 1px solid #CDECD3;
  background: #E9FFEE;
  border-radius: 6px;
}
.link_button:hover {
  background: black;
  color: #fff;
}
.link_button:active {
  color: red;
}

Внимание специфичность!

Почему иногда псевдоклассы не работают?

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

«LoVe & HAte» — любовь и ненависть (Link, Visited, Hover, Active). Придерживайтесь указанного порядка, и все будет хорошо.

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

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

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

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

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

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

они находятся.

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

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

Пример

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

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

/ * наведение курсора мыши на ссылку * /
a: hover {
цвет: горячий розовый;
}

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

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

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

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

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

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

Пример

a: ссылка {
текст-украшение: нет;
}

a: посещено {
text-decoration: none;
}

a: hover {
text-decoration: подчеркивание;
}

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

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

Цвет фона

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

Пример

a: ссылка {
background-color: желтый;
}

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

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

a.пять: ссылка {цвет: # ff0000; text-decoration: none;}
a.five: посещено {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

справка

перемещение

изменение размера n

ne-resize

nw-resize

pointer

progress

s-resize

se-resize

sw-resize

текст

w-resize

wait

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

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

HTML тег ссылки

Пример

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

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

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

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

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

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

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

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

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

Атрибуты

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

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

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

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

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

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

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

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

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

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

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

Стилизация различных состояний ссылки с помощью CSS

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

Стилизация ссылок с помощью CSS

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

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

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

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

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

  a: link {/ * непосещенная ссылка * /
    цвет: # ff0000;
    текстовое оформление: нет;
    нижняя граница: сплошная 1px;
}
a: посещенная {/ * посещенная ссылка * /
    цвет: # ff00ff;
}
a: наведите указатель мыши на ссылку * /
    цвет: # 00ff00;
    нижняя граница: нет;
}
a: active {/ * активная ссылка * /
    цвет: # 00ffff;
}

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

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

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

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

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

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

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

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

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

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

Давайте попробуем следующий пример, чтобы понять, как это в основном работает:

  a: link {
    цвет: # 1ebba3;
}
а: посетил {
    цвет: # ff00f4;
}
a: hover {
    цвет: # a766ff;
}
a: active {
    цвет: # ff9800;
}

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

Если вам не нравится подчеркивание по умолчанию в ссылках, вы можете просто использовать свойство CSS text-decoration , чтобы избавиться от него.В качестве альтернативы вы можете применить к ссылкам другой стиль, например цвет фона, нижнюю границу, полужирный шрифт и т. Д., Чтобы он немного лучше выделялся из обычного текста.

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

  a: link, a: visit {
    текстовое оформление: нет;
}
a: hover, a: active {
    текст-оформление: подчеркивание;
}

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

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

Давайте посмотрим на следующий пример и посмотрим, как он работает на самом деле:

  a: link, a: visit {
    белый цвет;
    цвет фона: # 1ebba3;
    дисплей: встроенный блок;
    отступ: 10 пикселей 20 пикселей;
    граница: 2px solid # 099983;
    текстовое оформление: нет;
    выравнивание текста: центр;
    шрифт: 14px Arial, без засечек;
}
a: hover, a: active {
    цвет фона: # 9c6ae1;
    цвет границы: # 7443b6;
}

Стильных HTML-ссылок (hrefs) | Учебник CSS

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

Как вам хорошо известно, ссылки в HTML создаются с помощью тега (привязка).

Пример:

  a {
    размер шрифта: 12 пикселей;
    цвет: # 222222;
}

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

Существует четыре типа состояний, в которых может находиться ссылка:

a: ссылка → Обычная непосещаемая ссылка.
a: посещено → Ссылка, которую пользователь уже посещал (нажимал) ранее.
a: hover → Когда пользователь наводит указатель мыши на ссылку.
a: active → Момент нажатия ссылки.

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

a: hover всегда идет после a: link и a: visit
a: активный всегда идет после a: hover

Рассмотрим следующий пример:

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

/ * посещенная ссылка * /
a: посетил {color: # 808080; }

/ * наведите указатель мыши на ссылку * /
a: hover {цвет: # 000088; }

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

Живой пример →

Вспомните свойство text-decoration , которое мы изучили ранее.Свойство оформления текста используется для изменения внешнего вида ваших ссылок, например для удаления подчеркивания или добавления к ним перекрестных линий. Также вернемся к свойствам фона. Ссылки можно стилизовать по-разному, используя селекторы class и id . Все эти свойства работают с тегом , поэтому не стесняйтесь экспериментировать, как хотите.

Небольшие изменения с большим воздействием `курсор: указатель;`

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

  a: hover {
    color: # 0

Стилизация ссылок с помощью CSS

CSS дает вам достаточную гибкость, когда дело доходит до стилизации ссылок. Вы можете изменить внешний вид:

нормальные ссылки
ссылки, которые уже были посещены
ссылки, на которые нажимают, и
ссылки, на которые наведен курсор мыши.

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

Различные состояния связи

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

Вот 4 псевдокласса, которые вы можете использовать для выбора и стилизации различных состояний ссылок в CSS:

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

Выбор ссылок вне зависимости от их состояния

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

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

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

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

Смешивание псевдоклассов с классами и идентификаторами

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

 
 Главная страница

Затем вы можете стилизовать эти ссылки с помощью псевдоклассов следующим образом:

 
/ * Делаем все навигационные ссылки красными при наведении курсора * /
а.nav: hover {цвет: красный; }

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

 
 На главную 

...

/ * Делаем "домашнюю" ссылку желтой, независимо от того, посещалась она или нет * /
a # дом: ссылка, # дом: посещены {цвет: желтый; }

Некоторые примеры

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

Цвета звеньев для укладки

Можно легко изменить цвет ссылок со значений по умолчанию. В большинстве браузеров цвета ссылок по умолчанию:

: ссылка: синий
: посетил: фиолетовый
: активный: красный

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

 

/ * Делаем все ссылки серыми на черном, независимо от их состояния * /
а {цвет: серый; цвет фона: черный; }

/ * Использовать цвета по умолчанию, за исключением ссылок, которые
   нажал, который стал желтым вместо красного * /
а: активный {цвет: желтый; }

/ * Сделать непосещенные ссылки зелеными; посетил и завис
   ссылки на коричневый * /
a: ссылка {цвет: зеленый; }
a: посетил, a: hover {цвет: коричневый; }

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

Отключение подчеркивания в ссылках

Чтобы удалить подчеркивание из текстовых ссылок, используйте свойство text-decoration , как показано ниже:

 
а {текст-украшение: нет; }

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

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

Придает ссылкам эффект кнопки

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

 
а
{
  цвет: # 000;
  цвет фона: # f0f0f0;
  отступ: 2px 11px;
  граница: начальная 2 пикселя #fafafa;
  текстовое оформление: нет;
  семейство шрифтов: Arial, Helvetica, sans-serif;
  размер шрифта: 0.9em;
}

Вот как это выглядит:

ссылка

Добавление фоновых изображений к ссылкам

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

 
а
{
  фон: #fff url ('красная-утопленная-стрелка.gif ') no-repeat 0 0;
  отступ: 3px 0 4px 34px;
  текстовое оформление: нет;
  семейство шрифтов: Arial, Helvetica, sans-serif;
}

А вот как это выглядит:

ссылка

Замена текста ссылки изображением

Что делать, если вы хотите использовать только изображение для ссылки, без текста? Рекомендуется сохранить текст ссылки в разметке HTML, чтобы неграфические браузеры и поисковые системы могли читать и понимать ссылку. Однако вы все равно можете скрыть текст ссылки в своем CSS.Вот как это делается.

Сначала поместите текст ссылки в элемент разметки span :

 
  Главная

Затем вы можете оформить ссылку следующим образом:

 
а
{
  фон: #fff url ('remote-control-home.gif') no-repeat 0 0;
  дисплей: блок;
  ширина: 114 пикселей;
  высота: 24 пикселя;
}

промежуток
{
  дисплей: нет;
}

Сначала CSS устанавливает кнопку в качестве фонового изображения для ссылки и регулирует ширину и высоту ссылки в соответствии с размерами изображения.Затем селектор a span гарантирует, что текст ссылки скрыт от браузеров с поддержкой CSS.

Вот как выглядит приведенный выше пример:

ссылка>

Почему дисплей : блок ? Что ж, ссылки — это встроенных элемента , что означает, что (среди прочего) вы не можете применять к ним определенные свойства, такие как ширина и высота. Если вы хотите указать ширину и высоту для ссылки, вам сначала нужно сделать так, чтобы она отображалась как элемент уровня блока, используя свойство display: block .

Создание эффектов наведения изображений

Наконец, если вы действительно хотите поехать в город со своими ссылками, вы можете добавить к ним красивые ролловеры изображений. Узнайте, как это сделать, в разделе Создание кнопок ролловера CSS.

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

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

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

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

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

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

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

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

Пример

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

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

/ * наведение курсора мыши на ссылку * /
a: hover {
цвет: горячий розовый;
}

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

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

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

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

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

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

Пример

a: ссылка {
text-decoration: none;
}

a: посещено {
text-decoration: none;
}

a: hover {
text-decoration: подчеркивание;
}

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

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

Цвет фона

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

Пример

a: ссылка {
background-color: желтый;
}

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

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

a: active {
background-color: hotpink;
}

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

Advanced — кнопки ссылок

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

Пример

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

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

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

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

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

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

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

Задача

Решение

Оформление ссылок внутри текста через CSS

Что такое стиль и CSS.

Стили и классы гиперссылок

Как сделать ссылку блочной

Псевдоклассы

Как сделать ссылку кнопкой

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

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

Пример

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

Пример

Цвет фона

Пример

Кнопки связи

Пример

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

Пример

Пример

Пример

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

HTML тег ссылки

Пример

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

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

Атрибуты

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

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

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

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

Стилизация различных состояний ссылки с помощью CSS

Стилизация ссылок с помощью CSS

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

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

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

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

Стильных HTML-ссылок (hrefs) | Учебник CSS

Небольшие изменения с большим воздействием курсор: указатель;

Стилизация ссылок с помощью CSS

Различные состояния связи

Выбор ссылок вне зависимости от их состояния

Смешивание псевдоклассов с классами и идентификаторами

Некоторые примеры

Цвета звеньев для укладки

Отключение подчеркивания в ссылках

Придает ссылкам эффект кнопки

Добавление фоновых изображений к ссылкам

Замена текста ссылки изображением

Создание эффектов наведения изображений

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

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

Пример

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

Пример

Цвет фона

Пример

Advanced — кнопки ссылок

Пример

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

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

Небольшие изменения с большим воздействием `курсор: указатель;`