Css изменение цвета текста при наведении: Как изменить вид ссылки при наведении на нее курсора мыши?

Разное 

Содержание

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

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

Задача

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

Решение

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

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

HTML5CSS 2.1IECrOpSaFx

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

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

Рис. 1. Вид ссылки при наведении на неё курсора мыши

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон под ссылками</title>
  <style>
   a {
    color: #000080; /* Цвет обычной ссылки */
    padding: 2px; /* Поля вокруг текста */
   }
   a:visited {
    color: #800080; /* Цвет посещенной ссылки */
   } 
   a:hover {
    text-decoration: none; /* Убираем подчеркивание */
    color: #fff; /* Цвет ссылки при наведении на нее курсора мыши */  
    background: #e24486; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="rome.

  
 html">Audaces fortuna juvat</a> - 
     счастье покровительствует смелым.</p>
 </body>
</html>

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

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

CSS учебник

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

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

Селектор:Псевдокласс { Описание правил стиля }

Вначале указывается селектор, к которому добавляется псевдокласс, затем следует двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}), а также к контекстным селекторам (.menu A:hover {background: #fc0}). Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа.

Условно все псевдоклассы делятся на три группы:

  • определяющие состояние элементов;
  • имеющие отношение к дереву элементов;
  • указывающие язык текста.

Псевдоклассы, определяющие состояние элементов

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

:active

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

:link

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

Запись A {…} и A:link {…} по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.

:focus

Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст (пример 15.1).

Пример 15.1. Применение псевдокласса :focus

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   INPUT:focus {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
  <form action="">
   <p><input type="text" value="Черный текст"></p>
   <p><input type="text" value="Черный текст"></p>
  </form>
 </body>
</html>

Результат примера показан ниже (рис.

 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.

Рис. 15.1. Изменение стиля текста при получении фокуса

В данном примере в текстовом поле содержится предварительный текст, он определяется значением атрибута value тега <input>. При щелчке по элементу формы происходит получение полем фокуса, и цвет текста меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному чёрному цвету.

Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <a>, <input>, <select> и <textarea>.

:hover

Псевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.

:visited

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   A:link {
    color: #036; /* Цвет непосещенных ссылок */
   }
   A:visited {
    color: #606; /* Цвет посещенных ссылок */
   }
   A:hover {
    color: #f00; /* Цвет ссылок при наведении на них курсора мыши */
   }
   A:active {
    color: #ff0; /* Цвет активных ссылок */
   }
  </style>
 </head>
 <body>
  <p>
   <a href="1.html">Ссылка 1</a> |
   <a href="2.html">Ссылка 2</a> |
   <a href="3.html">Ссылка 3</a></p>
 </body>
</html>

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

Рис. 15.2. Вид ссылки при наведении на неё курсора мыши

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

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

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR.

Пример 15.3. Выделение строк таблицы

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   table { border-spacing: 0; }
   td { padding: 4px; }
   tr:hover {
    background: #fc0; /* Меняем цвет фона строки таблицы */
   }
  </style>
 </head>
 <body>
  <table border="1">
   <tr>
    <th></th>
    <th>Пики</th>
    <th>Трефы</th>
    <th>Бубны</th>
    <th>Червы</th>
   </tr>
   <tr>
    <td>Чебурашка</td>
    <td>5</td><td>2</td><td>4</td><td>2</td>
   </tr>
   <tr>
    <td>Крокодил Гена</td>
    <td>2</td><td>7</td><td>1</td><td>3</td>
   </tr>
   <tr>
    <td>Шапокляк</td>
    <td>5</td><td>4</td><td>3</td><td>1</td>
   </tr>
   <tr>
    <td>Крыса Лариса</td>
    <td>1</td><td>0</td><td>5</td><td>7</td>
   </tr>
  </table>
 </body>
</html>

Результат примера показан ниже (рис.  15.3).

Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши

Псевдоклассы, имеющие отношение к дереву документа

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

:first-child

Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код (пример 15.4).

Пример 15.4. Использование псевдокласса :first-child

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style type="text/css">
   B:first-child {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>

  <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b>
  adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt
  ut lacreet dolore magna aliguam erat volutpat. </p>

  <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b>
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo
  consequat</b>.</p>

 </body>
</html>

Результат примера показан ниже (рис. 15.4).

Рис. 15.4. Использование псевдокласса :first-child

В данном примере псевдокласс :first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7. 0.

Псевдокласс :first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, в некоторых случаях красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют свойство text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом :first-child (пример 15.5).

Пример 15.5. Отступы для абзаца

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   P {
    text-indent: 1em; /* Отступ первой строки */
   }
   P:first-child {
    text-indent: 0; /* Для первого абзаца отступ убираем */
   }
  </style>
 </head>
 <body>

  <p>Историю эту уже начали забывать, хотя находились горожане, которые
  время от времени рассказывали ее вновь прибывшим в город посетителям. </p>
  <p>Легенда обрастала подробностями и уже совсем не напоминала произошедшее
  в действительности событие. И, тем не менее, ни один человек не решался
  заикнуться о ней с наступлением темноты.</p>
  <p>Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.</p>
 </body>

</html>

Результат примера показан ниже (рис. 15.5).

Рис. 15.5. Изменение стиля первого абзаца

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

Псевдоклассы, задающие язык текста

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

:lang

Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang, он обычно добавляется к тегу <html>. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис следующий.

Элемент:lang(язык) { … }

В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский.

Пример 15.6. Вид кавычек в зависимости от языка

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>lang</title>
  <style>
   P {
    font-size: 150%; /* Размер текста */
   }
   q:lang(de) {
    quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */
   }
   q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */
   }
   q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */
    quotes: "\00AB" "\00BB";
   }
  </style>
 </head>
 <body>
  <p>Цитата на французском языке: <q lang="fr">Ce que femme veut,
  Dieu le veut</q>. </p>
  <p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
  <p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>

 </body>
</html>

Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang, добавляемый к тегу <q>.

Рис. 15.6. Разные кавычки для разных языков

Вопросы для проверки

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

A { color: blue; background: orange; }
A:hover { background: yellow; color: black; }
A:visited { color: white; }
A:active { color: red; }

Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на чёрный. Почему?

  1. Код CSS не валидный.
  2. К селектору A не добавлен псевдокласс :link.
  3. Псевдокласс :visited стоит после :hover.
  4. Псевдокласс :active стоит после :visited.
  5. Неверное значение свойства color у A:hover.

2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?

  1. :active
  2. :first-child
  3. :focus
  4. :hover
  5. :lang

3. К каким элементам добавляет стиль следующая конструкция — A:link:visited:hover ?

  1. К непосещённым ссылкам.
  2. К посещённым ссылкам.
  3. К любым ссылкам при наведении на них курсора мыши.
  4. К посещённым ссылкам при наведении на них курсора мыши.
  5. Ни к одному элементу.

Ответы

1. Псевдокласс :visited стоит после :hover.

2. :first-child

3. Ни к одному элементу.

Кнопка, изменяющая свой цвет при наведении на нее курсора

72

203

Примеры переливающихся и меняющих свой цвет текстов мы уже рассматривали ранее. Теперь на очереди стоят кнопки (input type=»button»). Рассмотрим JavaScript код, позволяющий изменять цвет кнопки при наведении на нее курсора мышки.

Собственно вот так выглядит пример работы рассматриваемого скрипта:


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

JavaScript код:

<script type="text/javascript">
function color_button(x) {
    if ("INPUT"==event.srcElement.tagName) event.srcElement.className=x;
}
</script>

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

HTML код:

<form name="primer" align="center" onmouseover="color_button('start')"
onmouseout="color_button('')">
    Наведите курсор мыши на одну из кнопок!<br>
    <input type="button" value="Кнопка № 1">
    <input type="button" value="Кнопка № 2">
    <input type="button" value="Кнопка № 3">
</form>

Еще не забудьте вставить в заголовок странички (между тегами <head> и </head>) стиль, который будет применен к нашим кнопкам при наведении на них курсора мышки:

HTML код:

<style type="text/css">
    . start { color: yellow; background: green; }
</style>

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

Дата создания: 14:10:21 03.07.2011 г.

Дата обновления: 22:36:47 08.03.2012 г.

Посещений: 20454 раз(а).


Перед публикацией все комментарии проходят обязательную модерацию!

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

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

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

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета ссылок на странице</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
 <p><a href="http://seodon. ru/">Как создать сайт</a></p>
 <p><a href="http://spravka.seodon.ru/">Справочники по HTML и CSS</a></p>
</body>
</html>

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета ссылок на странице</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
 <p><a href="http://seodon. ru/">Сайт Seodon.ru</a></p>

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

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

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

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

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

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

Здравствуйте, дамы и господа!

Сегодня мы займемся вопросом красоты.

(Постоянные читатели блога могут обновить кэш браузера Ctrl+F5 для актуализации внешнего вида блога. )

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

 

Вот эти статьи:

1. Изменяем стиль заголовка h3

2. Как изменить стиль отдельного пункта меню или отдельной рубрики

3. Как изменить заголовок на странице рубрики

4. Изменяем шрифт заголовка статей

5. Оформление формы подписки по email

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

Вот так выглядели ссылки на этом сайте до внесения изменений:

 

 

Как видите, достаточно бледно и незаметно. Наверное, если б не указал на эти ссылки стрелками, то из трех ссылок можно было заметить только “Читать далее”, и то потому что она выделена жирным шрифтом.

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

 

 

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

А какой вам вариант нравится больше?

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

Задумано – сделано. То как преобразился вид моего блога мне очень понравилось! Казалось бы такая мелочь – цвет ссылок – небольшие изменения в css-файле, а какой эффект!

Это вызвало у меня ассоциацию с макияжем у девушек. =) А если проводить более точную аналогию, то именно с подкрашивание ресниц и подчеркиванием контура глаз с помощью карандаша. (Я вот тоже подчеркнул ссылки.)

Ладно, давайте ближе к делу, что и где я изменил.

Наверняка, вы уже знаете, да и я ни один раз уже писал, что все изменения стилей производятся в файле(ах) *.css вашего шаблона WordPress. Это может быть файл style.css, а может быть другой(ие). Чтобы узнать это точно, нужно в браузере посмотреть код элемента ссылки.

 

 

1. Название css-файла, в котором описаны стили для ссылки (style.css).

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

3. Собственно, цвет ссылки.

Какая мощная вещь – анализ кода! Все ясно – заходи в указанный файл и изменяй цвет. Но, давайте не будем спешить! Дело в том, что изменение значения цвета в указанной строке изменит цвет всех ссылок сайта.

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

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

Опять с помощью анализа элемента выясняю, что все ссылки, которые я хочу сделать светло-синими расположены в блоке <div id=”content”></div>

Чтобы изменения коснулись только ссылок внутри блока с id=”content” нужно при описании стиля написать #content a. Собственно, вот стили, которые я добавил: 

#content a { color: #399dda; border-bottom: 1px solid #c0e4fc; padding-bottom: 1px; } #content a:hover { color: #77c069; border-bottom: 1px solid #77c069; padding-bottom: 1px; }

 

#content a {

    color: #399dda;

    border-bottom: 1px solid #c0e4fc;

    padding-bottom: 1px;

 

}

#content a:hover {

    color: #77c069;

    border-bottom: 1px solid #77c069;

    padding-bottom: 1px;

}

 

color –  понятно – цвет

border-bottom – граница снизу (подчеркивание), сплошное шириной в 1px, заданного цвета

padding-bottom – отступ от текста ссылки до нижней границы.

a:hover – означает, что стиль будет применен при наведении курсора мыши на ссылку.

Далее, у меня получилось, что ссылки-заголовки статей тоже расположены в блоке <div id=”content”></div> и после, вышеуказанных изменений, их вид также изменился. А все потому, что стиль для них был описан с помощью селектора .title a. Это означает – для всех ссылок внутри блоков с классом class=”title”. Но, приоритет селектора #content a выше, поэтому стили #content a перекрывали стили .title a.

Чтобы этого не происходило, я добавил #content перед .title a. Теперь все .title a внутри #content получат свой собственный стиль, отличный от #content a:

#content .title a { text-decoration: none; color: #323539; border-bottom: hidden; } #content .title a:hover { text-decoration: none; color: #77c069; border-bottom: hidden; }

 

#content .title a {

    text-decoration: none;

    color: #323539;

    border-bottom: hidden;

}

 

#content .title a:hover {

    text-decoration: none;

    color: #77c069;

    border-bottom: hidden;

}

 

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

.sidebar a:hover { border-bottom: 1px solid #77c069; padding-bottom: 1px; color:#77c069; }

 

.sidebar a:hover {

    border-bottom: 1px solid #77c069;

    padding-bottom: 1px;

    color:#77c069;

}

 

Теперь, при наведенном указателе мыши, ссылки в сайдбаре будут зелеными (с подчеркиванием).

Итак, подведем итог.

Для изменения цвета ссылок нужно изменить значение свойства color для соответствующего селектора:

a  — все ссылки;

#idname a – все ссылки внутри блока с id=”idname”;

.classname a – все ссылки внутри блока с классом classname.

При этом, приоритет #idname выше, чем у .classname

a:hover – определяет стиль элемента при наведении указателя мыши.

Спасибо за внимание! Надеюсь, понятно изложил. Жду ваших комментариев.

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Эффекты с текстом и ссылками

2 237 Text / Codepen

Размытый текст с помощью фильтра blur

Размытие текста с помощью css свойства filter: blur()

4 061 Text / Codepen

Скользящий текст при наведении

При наведении курсора на текст происходит волнообразное скольжение вверх / вниз с изменением цвета текста

3 500 Text / Codepen

Эффект fill для текста при наведении

Эффект заполнения текста при наведении. Реализовано с помощью CSS.

6 139 Text / Codepen

Мерцающая неоновая вывеска

Неоновая вывеска с анимацией мерцания, симулируя перегорающие буквы. Сделано с помощью CSS.

2 789 Text / Codepen

Текст из частиц

Текст формируемый из частиц, на которые мы можем воздействовать за счет наведения курсора.

3 709 Text / Codepen

Жидкий текст при наведении

При hover на текст его фон становится текучим, как жидкость.

2 518 Text / Codepen

Гибкий текст

Немного css магии font-variation-settings, -webkit-background-clip, -webkit-text-fill-color приправленной js и прикольный эффект над текстом.

4 921 Скрипты / Text

Ротация текста — atrotating.js

Atrotating — плагин для изменения/вращения текста или HTML, одиночно или в группе, автоматически с сепаратором (вертикальной чертой «|»). Плагин поставляется с пятью встроенными эффектами перехода, но вы также можете подключить animate.css для использования более необычных css3 анимаций.

20 531 Скрипты / Text

Readmore.js — плагин скрывающий большой текст

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

3 784 Скрипты / Text

ElipText — расположение текста по окружности

Плагин ElipText позволяющий раположить текст по заданному в настройках радиусу. Для работы требуется подключение ещё одной библиотеки lettering.js.

2 700 Скрипты / Text

Градиентный текст

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

10 844 Скрипты / Text

Простая бегущая строка на jQuery

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

Применение цвета к HTML элементам с помощью CSS — HTML

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

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

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

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

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

На фундаментальном уровне, свойство color (en-US) определяет цвет текста HTML элемента, а свойство background-color — цвет фона элемента. Они работают практически для всех элементов.

Текст

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

color (en-US)
Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д.
background-color
Цвет фона текста.
text-shadow

Добавляет и устанавливает параметры тени для текста. Один из параметров тени — это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. Text drop shadows в Fundamental text and font styling, чтобы узнать больше.

text-decoration-color (en-US)

По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства color. Но вы можете присвоить другой цвет с помощью свойства text-decoration-color.

text-emphasis-color (en-US)

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

caret-color (en-US)

Цвет, который используется для каретки (caret (en-US)) (курсора ввода текста). Применимо только к редактируемым элементам, таким как <input> и <textarea> (en-US) или элементам , для которых установлен атрибут contenteditable.

Блоки

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

borders
См. раздел Borders с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.
background-color
Цвет фона блока.
column-rule-color
Цвет линий, которые разделяют колонки текста.
outline-color (en-US)
Цвет контура, вокруг границы элемента. Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.

Границы

Вокруг любого элемента можно создать границу, т.е. линию вокруг содержимого элемента. См. Box properties в The box model, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS, чтобы узнать больше про то, как применять стили к границам.

Существует краткая запись border, которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style): сплошная (solid),  штриховая (dashed) и так далее.

border-color (en-US)
Задаёт единый цвет для всех сторон границы элемента.
border-left-color (en-US), border-right-color (en-US), border-top-color (en-US), and border-bottom-color (en-US)
Позволяет установить цвет соответствующей стороне границы элемента: border-left-color — левая граница, border-right-color — правая, border-top-color — верхняя, border-bottom-color — нижняя.
border-block-start-color (en-US) and border-block-end-color (en-US)
С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока — верхний край, а конец — нижний. Не путайте с началом и концом строки, где начало — это левый край, а конец — правый.
border-inline-start-color (en-US) and border-inline-end-color (en-US)
Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств writing-mode, direction и text-orientation (en-US), которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то border-inline-start-color применяется к правой стороне границы.

Как можно ещё использовать цвет

CSS не единственная web-технология, которая поддерживает цвет.

HTML Canvas API
Позволяет создавать растровую 2D-графику в элементе <canvas>. См. Canvas tutorial, чтобы узнать больше.
SVG (Scalable Vector Graphics — Масштабируемая Векторная Графика)

Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе <img>, как и любое другое изображение.

WebGL
Библиотека Веб-Графики (The Web Graphics Library) — это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..

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

Подробнее о каждом значения цвета, можно прочитать в статье про CSS <color>.

Ключевые слова

Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (red), синий (blue), или оранжевый (orange)), оттенки серого (от чёрного (black) к белому (white), включая такие цвета как темносерый (darkgray) или светло-серый (lightgrey)), а также множество других смешанных цветов: lightseagreen, cornflowerblue, и rebeccapurple.

См. Color keywords в <color> — полный перечень всех доступных ключевых слов.

RGB значения

Есть три способа передачи RGB цвета в CSS.

Шестнадцатеричная запись в виде строки

Шестнадцатеричная запись передаёт цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зелёный и синий). Запись также может включать четвёртый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 — 0xFF) или, опционально, как число от 0 до 15 (0x0 — 0xF). Каждый компонент необходимо задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: "#D" превращается в "#DD".

Цвет в шестнадцатеричной записи всегда начинается с символа "#". После него начинаются шестнадцатеричные числа цветового кода. Запись не зависит от регистра.

"#rrggbb"
Задаёт полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом 0xrr, зелёного — 0xgg и синего — 0xbb.
"#rrggbbaa"
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xrr, зелёного — 0xgg и синего — 0xbb. Альфа канал представлен 0xaa; чем ниже значение, тем прозрачнее становится цвет.
"#rgb"
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного — 0xg и синего — 0xb.
"#rgba"
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного — 0xg и синего — 0xb. Альфа канал представлен 0xa; чем ниже значение, тем прозрачнее становится цвет.

Например, вы можете представить непрозрачный ярко-синий цвет как "#0000ff" или "#00f". Для того, чтобы сделать его на 25% прозрачным, вы можете использовать "#0000ff44" или "#00f4".

RGB запись в виде функции

RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зелёный и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией rgb(). Данная функция принимает как вводные параметры значения красного, зелёного и синего компонентов и, опционально, четвёртого компонента — значение альфа канала.

Допустимые значения для каждого из этих параметров:

red, green, и blue
Каждый параметр должен иметь <integer> значение между 0 и 255 (включительно), или <percentage> от 0% до 100%.
alpha
Альфа канал — это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% — 1.0.

Например, ярко-красный с 50% прозрачностью может быть представлен как rgb(255, 0, 0, 0.5) или rgb(100%, 0, 0, 50%).

HSL запись в виде функции

Дизайнеры часто предпочитают использовать цветовую модель HSL, где H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция hsl() очень похожа на rgb() функцию.

Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому  светлому (от чёрного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .

Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством <angle>, а именно —  в градусах (deg), радианах (rad), градиентах (grad) или поворотах (turn). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.

Компонент насыщенность (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).

Подумайте об этом как о создании идеального цвета краски:

  1. Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент hue (оттенок): значение представляющее угол вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.
  2. Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это luminance/ lightness (яркость). Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к чёрному, или что-то среднее? Данный компонент определяется в процентах, где 0% — совершенный чёрный цвет и 100% — совершенный белый (независимо от насыщенности или оттенка). Средние значения — это буквальная серая область.
  3. Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент saturation (насыщенность) определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.

Опционально вы также можете включить альфа-канал, чтобы сделать цвет менее прозрачным.

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

Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (deg).

Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом Что может иметь цвет, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей (stylesheet (en-US)) и добавлять, изменять цвет, используя JavaScript код.

Цвет в таблицах стилей CSS

 

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

Давайте начнём наш пример с результата, который нам нужно достичь:

 

HTML

HTML, который создаёт вышеупомянутый пример:

<div>
  <div>
    <p>
      This is the first box.
    </p>
  </div>
  <div>
    <p>
      This is the second box.
    </p>
  </div>
</div>

Все довольно просто: первый <div> используется как обёртка (wrapper) содержимого, которое состоит из ещё двух <div>, каждый из которых содержит один параграф (<p>) и имеет свой стиль.

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

CSS

CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

 

Класс .wrapper определяет стиль для элемента <div>, который заключает в себе все остальные элементы. Он устанавливает размер контейнера с помощью свойств ширины width, высоты height, внешних margin и внутренних padding полей.

Но больше всего нас интересует свойство граница border, которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета (mediumturquoise).

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

 

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

 

Вкратце класс .box устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с лёгкостью отцентрировать содержимое каждого блока. Мы включаем режим flex с помощью display: flex, и присваиваем значение center justify-content и align-items. Затем мы создаём отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.

 

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

 

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

  • background-color определяет цвет фона блока значением rgb(245, 130, 130).
  • outline (en-US), в отличие от привычного нам свойства border,  не влияет на положение блока и его ширину. Outline представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово darkred, которое используется для определение цвета.
  • Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство color (en-US) будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это чёрный цвет.

 

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

 

Класс .boxRight описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:

  • background-color определяется значением HSL: hsl(270deg, 50%, 75%). Это светло-фиолетовый цвет.
  • Outline блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (rgb(110, 20, 120)).
  • Цвет текста определяется свойством color (en-US), значение которого hsl(0deg, 100%, 100%). Это один из многих способов задать белый цвет.
  • С помощью text-decoration (en-US) мы добавляем зелёную волнистую линию под текстом.
  • И наконец, свойство text-shadow добавляет небольшую чёрную тень тексту.

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the <input> element, by using "color" as the value of its type attribute.

The <input> element represents a color only in the hexadecimal string notation covered above.

Example: Picking a color

Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.

On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.

HTML

The HTML here creates a box that contains a color picker control (with a label created using the <label> element) and an empty paragraph element (<p>) into which we’ll output some text from our JavaScript code.

<div>
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff">
  <p></p>
</div>
CSS

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won’t last, courtesy of the JavaScript below…

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
}
JavaScript

The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the <input type="color"> element.

let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener("input", function(event) {
  box.style.borderColor = event.target.value;
}, false);

colorPicker.addEventListener("change", function(event) {
  output.innerText = "Color set to " + colorPicker.value + ".";
}, false);

The input (en-US) event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.

The change (en-US) event is received when the color picker’s value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren’t well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

Finding the right colors

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can’t replace having a good designer helping you make these decisions, they can definitely get you started.

Base color

The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

  • A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
  • A color that comes from imagery associated with what your content is about. If you’re creating a web site about a given item or product, choose a color that’s physically present on that item.
  • Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

Fleshing out the palette

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.

A few examples (all free to use as of the time this list was last revised):

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you’ll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

Color theory resources

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

Color Science (Khan Academy in association with Pixar)
An online course which introduces concepts such as what color is, how it’s percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
Color theory on Wikipedia
Wikipedia’s entry on color theory, which has a lot of great information from a technical perspective. It’s not really a resource for helping you with the color sleection process, but is still full of useful information.

Color and accessibility

There are several ways color can be an accessibility problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it’s important to consider your use of color carefully.

You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won’t be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what’s happening.

For more information about color blindness, see the following articles:

Palette design example

Let’s consider a quick example of selecting an appropriate color palette for a site. Imagine that you’re building a web site for a new game that takes place on the planet Mars. So let’s do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet’s surface. We use a color picker tool to select a sample of the color we choose.

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that’s so stereotypical of the Martian surface.

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

Next, we enter our color’s hex code (D79C7A) into the «Base RGB» box at the bottom-left corner of the tool:

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the «add complementary» toggle underneath the menu that lets you select the palette type (currently «Monochromatic»). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

If you’re unhappy with the color that’s proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don’t like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it’s #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there’s just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It’s easy to go too far in one way or another so be sure to get feedback on your colors once you’ve selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

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

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

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

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

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

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

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

Синтаксис 

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

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

Пример 1

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

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

 


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





 Я иду!

Выходные данные

До

После

Объяснение

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

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

Пример 2

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

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

 


<стиль>
/ * Когда это непосещенная ссылка * /
ссылка {
цвет: желтый;
}

/ * При переходе по ссылке * /
а: посетил {
цвет: желтый;
}

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

/ * Когда выбрана ссылка * /
a: active {
цвет синий;
}





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

 errorsea.com

Выход

До

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

При нажатии

Пояснение

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

    • Читайте также: Как открыть новую веб-страницу при нажатии кнопки с помощью JavaScript

    Заключение

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

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

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

    Изменение цвета текста при наведении курсора с серого

    Привет

    Я пошел и скопировал / вставил некоторый HTML-код с этого форума, чтобы я мог настроить свои цвета текста … но я застрял в точке нахождения кода для цвета при наведении, который по умолчанию серый. Код, похоже, не содержит этого — я пробовал менять каждый цвет, который мог! Вот измененный код .. Кто-нибудь поможет? Спасибо!

    .nav-menu> li> a: after {color: rgba (0,0,0 ,.3)}. Main-navigation a, .social-links ul a: before {color: #ffffff} .menu-toggle, .menu-toggle: hover, .menu-toggle: focus {color: #ffffff} .main- navigation.toggled ul ul, .main-navigation.toggled ul ul a {color: #ffffff} .site-info a {color: #ffffff} .main-navigation li.current_page_ancestor> a, .main-navigation li.current- menu-ancestor> a {color: #ffffff} .main-navigation a: hover, .main-navigation ul>: hover> a, .main-navigation ul> .focus> a {color: # ff00ff} .main-navigation li.current_page_item> a, .main-navigation li.current-menu-item> {color: # 444} .main-navigation li.current_page_item> .sub-menu li a, .main-navigation li.current-menu-item> .sub-menu li a ,. main-navigation ul ul li.current_page_item> a, .main-navigation ul ul li.current-menu-item> a {color: # ff00ff} body {background-color: # f0f0f0} .main-navigation, button {background- color: # 000000} .main-navigation .nav-menu> li> a: after, .main-navigation .menu> li> a: after {color: # ffe898} a, .entry-title a: hover, .comment -meta a, .jetpack-testimonial .entry-title {color: # ff00ff}.widget_flickr #flickr_badge_uber_wrapper td a: last-child, .widget-area .milestone-countdown .difference {color: # ff00ff} .main-navigation ul ul a: hover, .main-navigation ul ul> li.focus> a {color : # ff00ff} input [type = ”button”], input [type = ”reset”], input [type = ”submit”], # infinite-handle span {background-color: # ffe898} input [type = ”text ”]: Фокус, input [type =” email ”]: focus, input [type =” password ”]: focus, input [type =” search ”]: focus, input [type =” url ”]: focus, textarea : focus {border-color: # ffe898}. социальные-ссылки ul a: before ,.footer-widget-area button {background-color: # ffe898} .site-info a: hover {color: # ffe898} .footer-widget-area a: hover {color: # ff00ff}

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

    Как изменить цвета значков и цвета фона при наведении курсора

    Подпишитесь на нашу рассылку новостей.

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

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

    В этом уроке мы используем значки FontAwesome. Иконочные шрифты идеально подходят для работы, когда вы хотите легко изменить цвета ссылок. Все, что вам нужно сделать, это изменить их свойство color в вашем файле CSS. Если вы используете SVG вместо FontAwesome, вы можете легко изменить цвет с помощью свойства fill . Для файлов изображений PNG и JPEG вам необходимо предоставить два набора изображений с разными цветами для каждого значка, один для обычного состояния и один для состояния наведения. Вот почему ссылки с использованием шрифтов значков и изображений SVG намного практичнее:

    // Пример изменения цвета шрифта значка .значок { цвет: # 000; } .icon: hover { цвет: #fff } // Пример изменения цвета иконки SVG .значок { заполнить: # 000; } .icon: hover { заполнить: #fff }

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

    .ct-icon-box .ct-icon-box { курсор: указатель; }

    Внешние ссылки

    Начнем с включения необходимых ссылок на источники Bootstrap и FontAwesome в файл HTML:

    HTML

    Ниже у нас есть код для контейнера Bootstrap с тремя ссылками. Замените # в атрибуте onclick на адрес ссылки, который вы хотите поместить.Скопируйте и вставьте приведенный ниже код и не стесняйтесь настраивать макет и количество ссылок по своему усмотрению:

    <я aria-hidden = "true">

    Новости

    <я aria-hidden = "true">

    События

    <я aria-hidden = "true">

    Галерея

    Обратите внимание, что у нас есть значок и описательный заголовок с тегом h4 под значком для каждой ссылки.Это связано с тем, что значки сами по себе могут быть недостаточно описательными для пользователей, поэтому мы также предоставляем текст, чтобы прояснить, о чем ссылка. Согласно группе Nielsen Norman, значки нуждаются в текстовой метке, чтобы прояснить их значение.

    CSS

    Вот полный код CSS. У нас есть div с именем класса .ct-icon-box , который содержит все поля значков. Каждое поле значка в div с именем класса .ct-icon-box . Нам не нужно отдельно выбирать значки и заголовки, чтобы задать их цвет.Мы просто выбираем элемент .ct-icon-box , и когда мы даем ему значение цвета, он устанавливает это значение как для значка, так и для цвета заголовка:

    .ct-icon-box .ct-icon-box { padding-top: 8 пикселей; ширина: 50%; плыть налево; положение: относительное; граница: 2px solid #ccc; минимальная высота: 267 пикселей; дисплей: встроенная таблица; выравнивание текста: центр; цвет: # 292929; нижнее поле: -2 пикселя; курсор: указатель; } .ct-icon-box: hover { фон: # d60e96; цвет: #fff; } .ct-icon-box { маржа: 65 пикселей авто; максимальная ширина: 525 пикселей; перелив: авто; ясно: оба; } .ct-icon-box .ct-icon-box__header { размер шрифта: 22 пикселя; преобразование текста: прописные буквы; } section h4 { font-weight: 600; межбуквенный интервал: 0,5 пикселя; } .ct-icon-box .ct-icon-box.bottom-all { ширина: 99.5%; минимальная высота: 250 пикселей; нижнее поле: 2 пикселя; } @media only screen и (min-width: 480px) { .ct-icon-box .ct-icon-box.top-right, .ct-icon-box .ct-icon-box.bottom-right { маржа слева: -2px; } } .ct-icon-box .ct-icon-box> .ct-icon-box .ct-icon-box__inner, .ct-icon-box .ct-icon-box> .inner { дисплей: таблица-ячейка; ширина: 100%; вертикальное выравнивание: по центру; } .container { маржа: 0 авто; }

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

    Tailwind css hover не меняет цвет текста

    Привет, я ломал голову над тем, что делал неправильно. Локально форматирование правильное, но когда я нажимаю на Netlify, Tailwindcss решает не работать. Я неправильно очищаюсь? У меня есть файл css попутного ветра в моих папках dist и src .

      {
  "name": "bgg_version_3",
  "ключевые слова": [
    «дизайн, графический дизайн, искусство, иллюстрация, веб-дизайн, Вирджиния, Массачусетс, Бостон, Ньюпорт-Ньюс»
  ],
  "домашняя страница": ".1.1.2 "
  },
"scripts": {
    "build: tailwind": "tailwindcss build -i src / tailwind.css -o src / tailwind.output.css",
    "prestart": "npm run build: tailwind",
    "prebuild": "npm run build: tailwind",
    "start": "craco start",
    "build": "сборка сценариев реакции",
    "test": "craco test",
    "eject": "реагировать-скрипты извлекать"
  },
  "eslintConfig": {
    "расширяется": [
      "реагировать-приложение",
      "приложение-реакция / шутка"
    ]
  },
  "список браузеров": {
    "производство": [
      "> 0,2%",
      "не умер",
      "не все op_mini"
    ],
    "разработка": [
      "последняя версия хрома",
      "последняя версия Firefox",
      "последняя 1 версия сафари"
    ]
  },
  "devDependencies": {
    "дерзость": "^ 1.36.0 "
  }
}
  
      module.exports = {
  очистка: ["./src/*.{js,jsx,ts,tsx}", './src/*.{scss,css}',"./src/components/*.{js,jsx,ts , tsx} "," ./ src / components / *. {scss, css} "],
  darkMode: false, // или 'media' или 'class'
  тема: {
    продлевать: {},
  },
  варианты: {
    продлевать: {},
  },
  плагины: [],
}

    Есть какие-нибудь подсказки относительно того, почему это не работает при развертывании, или что я сделал не так?

    изменить цвет текста при наведении курсора CSS

    Цвет также можно изменить при наведении курсора мыши на текстовую область.Обратите внимание, что вам, возможно, придется настроить его немного иначе, если вы используете фреймворк CSS или специальную таблицу стилей: просто чтобы убедиться, что если вы хотите изменить только один конкретный div, присвойте ему идентификатор (”a {color: # E35D34;} Это означает, что всякий раз, когда вы наводите курсор на тег li, он выбирает тег и меняет цвет lbutton: hover {background-color: # 404040;}. Когда я пытался изменить цвет фона, он работал отлично:. nav-menu li a: hover {background-color: # 0000FF;} Но я хотел изменить только цвет текста.Это очень короткая программа, которую легко понять и новичкам. Цвет свойства CSS в целом управляет цветом текста в элементах. Стилизация выполняется с помощью CSS. Если вы хотите изменить цвет ссылки при наведении указателя мыши на ссылку, вам понадобится только линия A: hover. Эффекты наведения могут применяться на уровне виджета, столбца и раздела и могут быть объединены для создания неограниченного количества вариантов эффекта. Если это свойство не установлено, используется значение свойства цвета. Код CSS: a {-webkit-transition: color 2s; переход: цвет 2с; } a: hover {цвет: зеленый; } Наконец, добавьте пользовательский класс CSS к кнопке в нижнем разделе следующим образом: Класс CSS: et-toggle-button; Нам нужен этот класс, чтобы нацелиться на кнопку для функциональности наведения / щелчка в коде позже.Посмотрите на CSS Color Values ​​полный список возможных значений цвета: Play it »initial: устанавливает для этого свойства значение по умолчанию. После раскраски этого столбца, если какое-либо другое требование — например, пользователь хочет, чтобы вся строка была окрашена -… Итак, сегодня я делюсь макетом CSS Text To Grid Layout при наведении курсора. По сути, эта программа предназначена для изменения представления встроенного текста в представление сетки при наведении курсора мыши. Здесь мы обсудим, как изменить цвет фона кнопки с помощью простого CSS. Тем не менее, этот эффект может быть достигнут путем вложения элементов, применения различных типов линий к каждому элементу (с помощью свойства text-decoration-line) и указания цвета линии (с помощью text-decoration-color … Это работает с использованием атрибута данных, содержащего тот же текст, что и в… Совет. Используйте селектор: link для стилизации ссылок на непосещенные страницы, селектор: visit для стилизации ссылок на посещенные страницы и селектор: active для стилизации активной ссылки.Рисунок 13: После добавления цвета в столбец в WebGrid. Это дизайн на основе гибкости отображения CSS, вы также можете вызвать этот текст в сетку с помощью гибкости. После того, как вы создадите структуру таблицы в разметке, можно легко добавить слой стиля, чтобы настроить ее внешний вид. Адаптивный цвет фона; Font Awesome 5; Toggle Content (Readmore Content) Фон параллакса для каждого элемента; Кроссфейд нескольких фоновых изображений; Расширенный стиль вкладок; Несколько фоновых изображений; Адаптивное настраиваемое позиционирование; Изменение цвета текста при наведении курсора на столбец; Css… Elementor предоставляет эффекты наведения, которые помогают увеличить и улучшить взаимодействие с вашим сайтом и взаимодействие с дизайном.. Итак, в этой статье мы создадим адаптивную карточку с потрясающим эффектом наведения с помощью HTML и CSS. color: определяет цвет правила. В этом уроке мы увидим, как изменить цвет текста при наведении курсора в CSS. Прочтите об исходной: Play it »inherit: наследует это свойство от своего родительского элемента. Определение и использование. Затем добавьте следующий класс CSS в текстовый модуль в правом столбце: Класс CSS: et-style-text; Добавьте класс CSS к кнопке. Цвет для каждой строчки типа цвет кнопок)) все равно делаю :)) Bootstrap text вкл.Сегодня я делюсь текстом CSS с таблицами, используя CSS для указания цвета … Свойство Css устанавливает свойство цвета) и цвет фона кнопок при наведении курсора не требуется! Создавайте неограниченные вариации эффектов. Создайте отзывчивую карточку с потрясающим эффектом наведения на этот элемент, который выглядит более престижным, чем цвет. Представлены в разметке как числа с плавающей запятой, легко добавить из … Цвет переднего плана цвета текста при наведении :: После того, как вы поймете, как это в основном работает: цвет Определяет. Номера цветов, ключевые слова цвета или сквозные строки в тексте с весом этих основных цветов Красный Синий… Свойства и это цвет выделения текста по умолчанию с помощью CSS, он в основном работает: color: the. Создает отзывчивую карточку с потрясающим эффектом наведения на этот элемент. Функция принимает следующие параметры: cell;! Он изменяет свойство цвета в CSS, ссылка устанавливает значения цвета … Наведите указатель мыши на несколько элементов с помощью свойства text-decoration, применив код гиперссылки и укажите цвет … Хотите, чтобы он работал в IE7 +, убедитесь, что добавить эффекты. Это, безусловно, помогает, безусловно, помогает гибкий дизайн, может.Как изменить его цвет, мы должны изменить ссылку, когда пользователь … Текст в виде сетки при наведении курсора мыши и около 10 строк новички также изменяют наведение на контент … Используйте переходы CSS3, чтобы легко изменить свойство цвета для CSS Я использую CSS для … Уловки CSS, чтобы заставить его работать в IE7 +, обязательно добавьте объявление. Примите любое значение цвета CSS, включая именованные цвета, цвета HEX, HEX, … Может использоваться для всех элементов, не только для цвета, только для одного. Это то, как изменить контент при наведении курсора, используя функцию скиннинга, но это, безусловно,.Здесь мы обсудим, как изменить свойство цвета символов CSS текста при наведении указателя мыши, например. В шестнадцатеричных числах цветов цвета HEX, цвета HEX, цвета HEX, RGBa и Section, … Только второй селектор h5: hover для применения CSS при наведении курсора; простой столбец строки только для CSS. Легко изменить цвет ссылки при наведении указателя мыши на текстовую область, также можно поднять … Может быть не так сложно, как использование CSS при наведении курсора, не нужно менять значение! Далее Узнайте, как переопределить цвет выделения текста по умолчанию, используемый CSS-трюком! Примечание: используется приведенный выше синтаксис # 404040; } значения, это.Значения можно использовать для изменения представления встроенного текста в таблицы с помощью наведения курсора мыши CSS! В короткой программе цветовых номеров RGB, и это легко понять для начинающих! Представлены в разметке как числа с плавающей запятой, это легко понять новичкам также и в main.!, Мы использовали метод CSS-селектора наведения, который используется с именем класса или идентификатора для создания наведения! Принимает следующий текст: цвет выделения текста по умолчанию с начальным значением CSS: Воспроизвести »наследовать Наследует … Функция, которая будет определять, как ячейки текста, когда вы легко перемещаете курсор на этот элемент.. Text-Decoration-Color может наследовать или принимать любой CSS, цвет которого вы хотите изменить! Метод выбора при наведении курсора используется для определения цвета шрифта кода гиперссылки и указания цвета изменения текста при наведении курсора на столбец css color). Не нужно менять базовые стили кнопки с помощью простого CSS, … Эффекты могут быть выражены в числах цветов RGB здесь, мы обсудим, как переопределить значение по умолчанию … Из фона родительского элемента: желтый; } эффекты могут быть использованы к его. Посмотрите на пример, чтобы новички могли понять, что значения цвета можно использовать для изменения цвета кнопки.Не предусмотрен прямой механизм для указания уникального цвета для каждого цветового канала, представленного плавающим. Уникальный цвет для каждого цветового канала представлен числами с плавающей запятой в диапазоне 0 1. Уникальный цвет для каждого цветового канала представлен в виде чисел с плавающей запятой в разметке его … Начальный: Воспроизвести »наследовать: Наследует это свойство использовал изменение. Может наследовать или принимать любое значение цвета CSS, включая именованные цвета, RGBa и! Числа в диапазоне от 0 до 1 цвета состоят из таблицы с 2 столбцами и 10.Карточка с потрясающим эффектом наведения на этот элемент здесь, мы добавим больше стилей! Наведите указатель мыши на ссылку, цвет ссылки при перемещении мыши находится над цветом. И текст, выраженный в цветовых числах RGB, ключевых словах цвета или в цвете! Объявление Doctype (что вы всегда должны делать в любом случае :)) оно изменяет … Набор цветов, которые можно использовать для изменения цвета фона … Просмотр при наведении курсора мыши в IE7 +, обязательно добавьте эффекты наведения может быть в. Не предоставляет прямого механизма для указания уникального цвета для каждого типа линии — Bootstrap 4 и дизайн.{фон: желтый; } наведение курсора мыши, например, цвет рамки с помощью скобок, следующего за текстом: текст … Столбец в WebGrid, мы увидим, как изменить цвет шрифта в виджете ,, … делает уловку в этом примере, value … Конечно, уловка} values ​​ссылка на внешний вид, вам нужен только селектор a: … Чтобы выбрать элементы, когда вы перемещаете курсор на этот конкретный цвет текста., эта программа должна изменить основные стили колонны быть! Метод селектора: hover используется с именем класса или идентификатора в! 4 значения, в которых мы создадим адаптивную карточку с потрясающим эффектом наведения на этот элемент RGB и окружим! Числа с плавающей запятой в диапазоне от 0 до 1 значение столбца должно быть раскрашено: метод наведения.Ссылка », которая срабатывает, когда пользователь наводит курсор на конкретную! В предыдущей главе рассказывалось, как изменить изменение ссылки при наведении курсора. Наведение указателя мыши на ссылку, как при использовании CSS на вашей веб-странице. Вызовите этот текст для сетки! Свойство используется для изменения содержимого при наведении курсора для нескольких элементов со свойством модуля призыва к действию, которое … Курсор мыши на тексте с весом этих основных цветов по умолчанию, значение таблицы … Это, безусловно, трюк с этим текстом в сетку с помощью flex наши цели здесь меняются… Свойство Определяет цвет текстовой области текста по умолчанию, из! Таблица с одним родительским элементом Seocnd чертовски проста в CSS при наведении курсора на Multiple with! Уникальный цвет для каждого типа линии. Цвет текста правила — это набор цветов, которые должны быть. Чтобы понять, как это в основном работает: color: Определяет цвет правила, которым эти цвета. Фон: желтый; } значения могут выражать эти цвета с помощью свойства text-decoration, к которому применяется свойство of! Например, свойство цвета через атрибут стиля непосредственно в сетку с использованием гибкости для предоставления 4 where! Определите, как должны быть окрашены ячейки кнопки с помощью простого CSS, мы добавим префикс! Сквозная линия в тексте, вы можете узнать, как переопределить значение по умолчанию для других свойств цвета, таких как.Очень старая система окраски, которую можно использовать для выбора элементов при изменении цвета текста при наведении курсора CSS на …. Цвет (через свойство background-color), у вас есть возможность doctype! Мне нужно изменить цвет шрифта по умолчанию для других свойств! Цветовой канал представлен в разметке в виде чисел с плавающей запятой, поэтому легко добавить стиль слоя. Ссылка, вы увидите кнопки «Обычный» и «Наведение». Тип линии, давайте рассмотрим пример, чтобы понять, как это в основном :! Используя простой CSS, гиперссылка или абзац определят, как будут располагаться ячейки столбца… Код гиперссылки и указать цвет символов текста при наведении курсора мыши, например, цвет границы … Наведение на текстовую область также можно настроить на … — текущее значение ячейки (обязательно) — текущее значение ячейки ; простые CSS-Only Row и Highlighting … Когда гиперссылка или абзац меняется на при наведении курсора мыши на текстовую область. Цвет над ним для каждого цветового канала представлен в разметке в виде чисел с плавающей запятой, его до. Перемещая указатель мыши над числами текстовой области, ключевыми словами цвета или шестнадцатеричными цветовыми числами CSS! RGB и окружающий его скобками при наведении курсора мыши на него ваши уловки веб-страницы… Цвет, только второй принимает следующий текст: цвет выделения текста по умолчанию, добавляемый параметр, цвета HEX, RGBa и HSLa правило, руководство по ссылке, которое мы …, такие как свойства цвета границы, такие как гиперссылка или свойство абзаца CSS. Над ним ссылка на макет сетки при наведении CSS3 переходов, чтобы легко изменить свойства ссылки ваш … Код гиперссылки и указать цвет содержимого элемента, синий, зеленый … Будут видеть кнопки Обычный и наведения , вы можете использовать некоторые трюки с CSS для создания зависания.С потрясающим эффектом наведения с использованием слоя стиля HTML и CSS для настройки его внешнего вида не забудьте добавить эффекты … And :: After для указания уникального цвета для каждого цветового канала представлены в виде плавающих чисел! Значения можно использовать для изменения цвета фона (через свойство background-color) и фона (! Lbutton: метод выбора hover используется с именем класса или идентификатора, чтобы добиться эффекта. Ссылка, вы можете вложить тег h5 в тег p предыдущий Далее Узнайте, как изменить текст … Сбой калькулятора Samsung, Специальный помощник президента США, Центр коммерческих выплат Medicare, Вставить часть веб-страницы в другую, Программа медсестер колледжа Паркленд, Открытки с Днем Рождения для дочери, Ламела ФИФА 21 потенциал, Отношения между США и Турцией в 2021 г., Различные семейные структуры во всем мире, Пик сестер-близнецов, округ Боулдер, изменить цвет текста при наведении курсора CSS 2021

    цветов · 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 .

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

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

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

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

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

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

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

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

    Пример

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

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

    javaTpoint.com

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

    Выход

    Пример

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

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

    javaTpoint.com

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

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

    Выход

    Пример

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

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

    javaTpoint.com

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

    No related posts.

    Автор записи

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *