Разное

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

09.11.2020

Содержание

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

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?

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

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.

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

Как изменить цвет ссылки в 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 с помощью псевдоэлементов. Вот пример CSS-кода:

a:link, a:visited, a:active {
  color: #00f;
}

Данным CSS-кодом мы даём команду браузера, что все непосещённые ссылки (псевдоэлемент link), посещённые ссылки (псевдоэлемент visited) и ссылки, на которых нажата кнопка мыши, (псевдоэлемент active) должны быть синего цвета.

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

Если Вы не знаете, как подключить указанный CSS-код, то прочитайте статью: как задать css стиль.

  • Создано 07.10.2011 13:51:29
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

html цвет посещенной ссылки | Все о Windows 10

На чтение 4 мин. Просмотров 39 Опубликовано

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

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

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Изменить цвет посещённой ссылки.

Решение

Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию. Чтобы задать вид оформления посещенных ссылок, используйте псевдокласс :visited , который добавляется к селектору A , как показано в примере 1.

Пример 1. Цвет посещенных ссылок

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 1. Цвет посещённой ссылки

В примере рядовая текстовая ссылка имеет красный цвет, а посещённая — оливковый.

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

Задавать цвет посещённых ссылок надо через CSS с помощью псевдоэлементов. Вот пример CSS-кода:

a:link, a:visited, a:active color: #00f;
>

Данным CSS-кодом мы даём команду браузера, что все непосещённые ссылки (псевдоэлемент link), посещённые ссылки (псевдоэлемент visited) и ссылки, на которых нажата кнопка мыши, (псевдоэлемент active) должны быть синего цвета.

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

Если Вы не знаете, как подключить указанный CSS-код, то прочитайте статью: как задать css стиль.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 5 ):

    Здравствуйте, Михаил Русаков, не подскажите как убрать нижнее подчеркивание у всех ссылок(посещенных, непосещённых, активированных) на CSS?

    Михаил! А зачем указывать псевдоклассы для гиперссылок? Если просто написать селектор тег «а», то через него будет воздействие сразу на все четыре состояния гиперссылки. Например, гиперссылка должна всегда быть синей — a

    А как задать разные значения? Если например цвет посещённых ссылок должен отличатся от не посещённых.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.

    CSS оформление ссылок: убираем подчёркивание, меняем цвет

    Селекторы псевдо-классов

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

    span:hover { color: red; }

    Ссылки

    Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:

    
    a:link { color: #0000ff; }
    
    a:visited { color: #ff00ff; }
    
    a:hover { color: #00ccff; }
    
    a:active { color: #ff0000; } 
    
    Попробовать »

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

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

    Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами <a>.

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

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

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Название документа</title>
        <style>
          a { text-decoration: none; } 
          a:hover { text-decoration: underline; }  
        </style>
      </head>
    
      <body>
        <p><b><a href="#">обычная ссылка</a></b></p>
      </body>
    </html>
    Попробовать »

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

    Псевдо-классы :first-child и :last-child

    Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Название документа</title>
        <style>
          div p:first-child { color: green; }
          div p:last-child { color: blue; }  
        </style>
      </head>
    
      <body>
      
        <div>
          <p>Первый дочерний абзац элемента div, он будет отображаться зеленого цвета.</p>
    	  
    	  <p>Второй дочерний абзац элемента div, он будет отображаться черного цвета,
    	  поскольку никаких правил для него не задано.</p>
    	  
    	  <p>Третий дочерний абзац элемента div, он же является последним дочерним абзацем.
    	  Цвет текста будет синим.</p>
        </div>
    	
      </body>
    </html>
    Попробовать »

    Поскольку первый абзац является первым дочерним элементом для <div>, его текст будет отображаться зеленым цветом. Цвет текста второго абзаца будет соответствовать цвету заданному по умолчанию, то есть черному. Цвет текста третьего абзаца будет окрашен в синий цвет, поскольку третий абзац является последним дочерним элементом для <div>.

    ссылок: цвета текстовых ссылок

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

    Эта страница научит вас:

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


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

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



    • ссылка — стандартная ссылка — на страницу, на которую посетитель еще не был.(стандартный цвет синий — # 0000FF).
    • vlink — посещенная ссылка — на страницу, на которую посетитель уже был ранее. (стандартный цвет фиолетовый — # 800080).
    • alink — активная ссылка — цвет ссылки при наведении на нее мыши. (стандартный цвет красный — # FF0000).


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

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

    Описанный выше метод предназначен для установки общих цветов ссылок для страницы.

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

    Для этого есть два метода:


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

    Примечание:
    Важно, чтобы как , так и < Теги / font> находятся между тегами
    и .

    Второй метод будет выглядеть так:

    Щелкните здесь , чтобы перейти на Yahoo.

    Примечание:
    Цифры RGB указывают количество красного, зеленого и синего цветов с использованием значений от 0 до 255.Вы можете узнать больше о преобразовании между цветами RGB и шестнадцатеричными цветами здесь.

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

    Этот пример будет работать во всех браузерах:

    Щелкните здесь , чтобы перейти на Yahoo.

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

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

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

    CSS и ссылки | схемы с несколькими ссылками, эффекты наведения

    Путь // www.yourhtmlsource.com → Таблицы стилей → CSS И ССЫЛКИ


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

    Навигация по странице:
    Базовый блок ссылок CSS | Настройка нескольких схем · Наследование | Рекомендации по наведению | Ссылки на изображения

    Эта страница последний раз обновлялась 21.08.2012



    Базовый блок ссылок CSS

    Существует четыре объекта таблицы стилей, которые определяют внешний вид ваших ссылок:

    a: ссылка {}
    a: посетил {}
    a: hover {}
    a: active {}

    Эти четыре селектора в основном охватывают старые атрибуты link, vlink и alink , но последний позволяет настроить эффекты прокрутки текста .Ваша строка a: hover вступает в игру, когда пользователь наводит курсор мыши на ссылку. Ссылка может меняться по-разному: от простого переключения цвета до полного преобразования в другой шрифт и размер. Эти эффекты очень помогают показать читателю, на какую именно ссылку он указывает. Они тоже отлично смотрятся.

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

    sourcetip: Есть небольшая умная мнемоника, которая позволяет легко запомнить правильный порядок определения этих псевдоэлементов в вашей таблице стилей; просто вспомните эти знаменитые тату на костяшках пальцев: LoVe / HAte, заглавные буквы, каждая из которых обозначает один из четырех элементов.

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

    цвет
    позволяет изменять цвет текста. Используйте безопасные для Интернета или именованные цвета.Я считаю, что лучшие ролловеры меняют именно это.
    оформление текста
    дает вам несколько вариантов форматирования ваших ссылок. Установите значение none, чтобы убрать подчеркивание в ссылках. Если вы хотите вернуть их или поместить в качестве атрибута наведения, используйте text-decoration: underline. Чтобы получить эффект наложения (линия над текстом), установите для него значение наложения.
    font-weight
    позволяет изменить жирность текста.Установите полужирный или обычный шрифт. Есть и другие более конкретные значения, но они пока не поддерживаются браузерами.
    стиль шрифта
    — это команда для изменения текста курсивом. Для отмены установите курсивный или нормальный шрифт.
    семейство шрифтов
    , как вы видели раньше, это меняет шрифт.
    размер шрифта
    и снова. Действительно, довольно просто.
    цвет фона
    позволяет задать цвет фона тексту ссылки.Особенно полезно для , подсвечивающего при наведении курсора.

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

    Примечание о совместимости с браузером:

    Для этого не проблема. Эффекты наведения на ссылки поддерживаются всеми браузерами со времен Internet Explorer 3! Вы даже можете применить эффекты наведения к элементам, которые не являются ссылками, например p: hover {background: #ffb; }. Это будет работать во всех современных браузерах, но не в Internet Explorer 6.

    Настройка нескольких схем

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

    a.nav: ссылка {цвет: синий; текстовое оформление: нет; }
    a.nav: посетил {цвет: фиолетовый; текстовое оформление: нет; }
    a.nav: hover {цвет: оранжевый; оформление текста: подчеркивание; }
    a.nav: active {цвет: красный; }

    а.внешний: ссылка {цвет: # 0000ff; размер шрифта: 18pt; font-weight: жирный; }
    a.external: посетил {color: # 894f7b; font-weight: жирный; }
    a.external: hover {text-decoration: overline; цвет фона: # 003399; }
    a.external: активный {цвет: красный; }

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

    Эта первая ссылка ведет на class ="nav"> главную страницу .
    Это относится к class ="external"> внешнему сайту .

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

    sourcetip: Если вы собираетесь использовать несколько class es, оставьте тип ссылок, которые вы используете чаще всего, без класса.Например, ссылки в области основного содержимого страницы. Это избавит вас от необходимости добавлять class = "something" ко многим ссылкам.

    Наследование

    Когда вам необходимо добавить дополнительные группы ссылок помимо группы по умолчанию (той, что без класса), дальнейшие группы унаследуют или примут форматирование группы по умолчанию. Если вы определили свои ссылки по умолчанию как полужирные, все будущие классы ссылок будут полужирными, если вы не вернете их в нормальное состояние с помощью font-weight: normal.То же самое и со всеми другими атрибутами.

    Рекомендации по наведению

    Это всего лишь несколько советов и предложений по использованию способности hover .

    Не позволяйте этому влиять на окружающий текст

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

    Простые изменения — лучшее

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

    Выбор цвета

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

    Ссылки на изображения

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

     Логотип компании border =" 0 " />

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

    a img {border: none; }

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

    цветов · Bootstrap

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

    Цвет

    . Основной текст

    .text-вторичный

    .text-success

    . Текст-опасность

    .text-warning

    .text-info

    . Текстовый свет

    . Темный текст

    . Без звука

    . Текст-белый

      

    .text-primary

    .text-secondary

    .text-success

    . текст-опасность

    .текстовое предупреждение

    .text-info

    .text-light

    .text-dark

    . текст без звука

    .text-white

    Классы контекстного текста также хорошо работают с привязками с предоставленными состояниями наведения и фокуса. Обратите внимание, что классы .text-white и .text-muted не имеют стиля ссылки.

      

    Основная ссылка

    Дополнительная ссылка

    Ссылка на успех

    Ссылка на опасность

    Предупреждающая ссылка

    Информационная ссылка

    Легкая ссылка

    Темная ссылка

    Ссылка отключена

    Белая ссылка

    Цвет фона

    Подобно классам цвета контекстного текста, легко установить фон элемента для любого контекстного класса.Компоненты привязки будут темнеть при наведении курсора, как и классы текста. Фоновые утилиты не устанавливают цвет , поэтому в некоторых случаях вы захотите использовать утилиты .text- * .

    .bg-primary

    .bg-вторичный

    .bg-success

    .bg-опасность

    .bg-предупреждение

    .bg-info

    .bg-светлый

    .bg-темный

    .bg-белый

      
    .bg-primary
    .bg-вторичный
    .bg-success
    .bg-dangerous
    .bg-warning
    .bg-info
    .bg-light
    .bg-dark
    .bg-white

    Фоновый градиент

    Если для $ enable-gradient установлено значение true, вы сможете использовать служебные классы .bg-gradient- . По умолчанию $ enable-gradient отключен, а приведенный ниже пример намеренно нарушен. Это сделано для упрощения настройки с момента начала использования Bootstrap. Узнайте о наших опциях Sass, чтобы включить эти и другие классы.

    .bg-gradient-primary

    .bg-gradient-вторичный

    .bg-gradient-success

    .bg-gradient-dangerous

    .bg-gradient-warning

    .bg-gradient-info

    .bg-gradient-light

    .bg-gradient-dark

      
    .bg-gradient-primary
    .bg-gradient-вторичный
    .bg-gradient-success
    .bg-gradient-dangerous
    .bg-gradient-warning
    .bg-gradient-info
    .bg-gradient-light
    .bg-gradient-dark
    Работа со спецификой

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

    с классом.

    Передача смысла вспомогательным технологиям

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

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

    Хотите узнать, как изменить цвет гиперссылки в PowerPoint?

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

    Приступим!

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

    Я уверен, что вы видели на веб-страницах текст, который ведет на другую страницу или открывает другой документ.

    Когда вы нажимаете на нее, она переносит вас в другое место.

    Это называется гиперссылкой.

    Вы также можете вставлять гиперссылки в PowerPoint.

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

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

    Зачем менять цвет гиперссылок?

    PowerPoint визуальный.

    Возможно, вам не захочется, чтобы прямо в середине слайда получился странный цвет.

    Обычно гиперссылки подчеркнуты и имеют оттенок синего.

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

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

    Далее вы узнаете о различных вариантах изменения цвета гиперссылки в PowerPoint.

    Параметры изменения цвета гиперссылки

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

    Вариант 1. Гиперссылки изменены во всех слайдах (более новые версии)

    Этот параметр работает в PowerPoint 2013 и более поздних версиях.

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

    Вот шаги, чтобы заставить эту опцию работать…

    Перейдите на вкладку «Дизайн» . В группе вариантов выберите Стрелка вниз . При выборе этой стрелки «Стрелка вниз » откроется меню с множеством вариантов цвета.

    Нажмите Настроить цвета , который находится в нижней части раскрывающегося меню:

    После того, как вы нажмете на Настроить цвета , откроется диалоговое окно Создать новые цвета темы :

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

    Цвет для гиперссылки Followed Hyperlink также можно изменить на любой, щелкнув раскрывающийся список рядом с ним.

    Выбрав цвета, нажмите Сохранить .

    Вот и все, ваши гиперссылки теперь будут любого цвета, который вы выбрали.

    Вариант 2: Гиперссылки изменены во всех слайдах (предыдущие версии)

    Этот параметр работает для PowerPoint 2007 и 2010.

    Этот метод почти такой же, как и описанный выше, однако в этапах есть небольшой поворот.

    Вот как работает этот метод…

    Сначала вставьте гиперссылку:

    Перейдите на вкладку «Дизайн» . В группе Темы щелкните Цвета и Создать новые цвета темы , которая находится в нижней части раскрывающегося меню:

    В диалоговом окне Create New Theme Colors в разделе Theme Colors измените стрелку рядом с Hyperlink и Followed Hyperlink :

    Вы можете нажать на Другие цвета для дополнительного выбора:

    По завершении нажмите Сохранить .

    Вариант 3. Соответствие цвета гиперссылки другому тексту на слайде

    Это работает во всех версиях PowerPoint.

    В этом методе вы сначала найдете цветовой код понравившегося текста и примените этот цвет к своей гиперссылке.

    Вот как это делается…

    Сначала вставьте текст и гиперссылку:

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

    В появившемся раскрывающемся меню щелкните Другие цвета .Откроется диалоговое окно Цвета . В диалоговом окне Цвета запишите цветовые коды для красного, зеленого, синего:

    Затем нажмите Отмена .

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

    Перейдите на вкладку «Модель» в группе «Варианты» :

    Щелкните стрелку вниз в группе вариантов .Затем нажмите Настроить цвета в нижней части раскрывающегося меню:

    В появившемся диалоговом окне Create New Theme Colors в разделе Theme Colors выберите Hyperlink и Followed Hyperlink (необязательно) и измените эти цвета на цвет, который вы записали:

    После того, как у вас есть Hyperlink и Followed Hyperlink , которые раскрашивают так, как вы хотите, затем нажмите Save .

    После нажатия Сохранить обратите внимание, что у нас есть правильный цвет!

    Вариант 4. Одноразовое изменение цвета гиперссылки

    Эта опция будет работать во всех версиях PowerPoint.

    В этом методе вы измените цвет гиперссылки один раз, выбрав ее и используя инструмент «Шрифт».

    Вот как это сделать…

    Сначала вставьте текст и гиперссылку:

    Выберите гиперссылку, затем на вкладке «Главная» перейдите к Цвета шрифта :

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

    И снова у нас правильный цвет!

    Лучшие Лрактики

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

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

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

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

    Заключение

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

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

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

    HTML-код для изменения цвета текста при наведении указателя мыши

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

    Изменение цвета текста при наведении указателя мыши

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

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

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

    CSS-селектор при наведении курсора используется для изменения цвета текста при перемещении курсора на этот конкретный текст.

    Синтаксис

    : hover {
    Декларация CSS;
    } 

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

    Пример 1

    Например, у вас есть тег

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

     
    
    
    <стиль>
    .Заголовок{
    размер шрифта: 20 пикселей;
    }
    .heading: hover {
    красный цвет;
    }
    
    
    
    
    
    Я иду!

    Выход

    До

    После

    Объяснение

    • Сначала мы пишем стиль для заголовка.
    • Далее пишем стиль для заголовка: hover, class.
    • Затем мы добавляем класс заголовка к тегу
      .

    Приведенный выше метод изменяет цвет заголовка на красный при перемещении курсора к тексту.

    Пример 2

    Например, вы создали ссылку; он меняет цвет, когда вы наводите курсор на эту ссылку, а также меняет цвет, когда вы нажимаете на этот текст.

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

     
    
    
    <стиль>
    / * Когда это непосещенная ссылка * /
    ссылка {
    цвет: желтый;
    }
    
    / * При переходе по ссылке * /
    а: посетил {
    цвет: желтый;
    }
    
    / * Когда вы наводите курсор мыши на ссылку * /
    a: hover {
    красный цвет;
    }
    
    / * Когда выбрана ссылка * /
    a: active {
    цвет синий;
    }
    
    
    
    
    

    Нажмите здесь, чтобы посетить наш веб-сайт

    errorsea.com

    Выход

    До

    При наведении

    При первом нажатии

    42000

    000

    цвет желтый.

  • Когда мы наводим курсор на ссылку, она меняет цвет на красный.
  • Когда мы щелкаем, он меняет цвет на синий, а затем открывает ссылку.
  • Читайте также: Как открыть новую веб-страницу при нажатии кнопки с помощью JavaScript

    Заключение

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

    Надеюсь, вы нашли этот пост полностью информативным и полезным.

    Спасибо за внимание 🙂

    HTML | ссылка Атрибут

    HTML | ссылка Атрибут

    Ссылка HTML Атрибут используется для указания цвета по умолчанию для непосещенной ссылки в документе.

    Синтаксис:

      

    Значения атрибутов:

    • color_name: Используется для указания имени цвета непосещенной ссылки.
    • hex_number: Используется для указания цвета непосещенной ссылки в шестнадцатеричном коде.
    • rgb_number: Используется для определения цвета непосещенной ссылки в виде значения RGB.

    Пример:

    < HTML >

    < головка >

    < титул >

    Атрибут ссылки тела HTML

    название >

    головка >

    < корпус звено = «красный» >

    < центр >

    < h2 style = "цвет: зеленый;" >

    GeeksforGeeks

    h2 >

    < h3 > HTML < body > Атрибут ссылки h3 >

    < a href = "#" >

    Информатика

    портал для гиков

    a >

    центр >

    корпус >

    HTML >

    Выход:

    Поддерживаемые браузеры: Браузеры, поддерживаемые атрибутом ссылки HTML , перечислены ниже:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Safari
    • Opera

    Применение цвета к элементам HTML с помощью CSS - HTML: язык разметки гипертекста

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

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

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

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

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

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

    Текст

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

    цвет
    Цвет, используемый при рисовании текста и любых текстовых украшений (таких как добавление нижних или нижних линий, зачеркивание линий и т. Д.
    цвет фона
    Цвет фона текста.
    тень текста
    Настраивает эффект тени для применения к тексту. Среди вариантов тени - основной цвет тени (который затем размывается и смешивается с фоном на основе других параметров). Дополнительные сведения см. В разделе «Тени отбрасываемого текста» в разделе «Основные стили текста и шрифтов».
    текст-украшение-цвет
    По умолчанию для оформления текста (например, подчеркивания, зачеркивания и т. Д.) В качестве цвета используется свойство color .Однако вы можете переопределить это поведение и использовать для них другой цвет с помощью свойства text-decoration-color .
    цвет выделения текста
    Цвет, используемый при рисовании символов выделения рядом с каждым символом в тексте. Это используется в первую очередь при рисовании текста для языков Восточной Азии.
    каре
    Цвет, используемый при рисовании курсора (иногда называемого курсором ввода текста) внутри элемента.Это полезно только для редактируемых элементов, таких как и