Два простых способа как изменить цвет

Два простых способа как изменить цвет

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

Задача

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

Решение

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

Для раздельного управления стилем разных ссылок рассмотрим два способа. Первый основан на контекстных селекторах. Смысл следующий. Ссылки меню располагаются внутри блока, например, <div class="menu">...</div>, а ссылки в тексте внутри блока <div id="content">...</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 class="menu"> <a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a> </div> <div class="content"> <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" class="content">Ссылка 1</a> | <a href="link2.html" class="content">Ссылка 2</a> | <a href="link3.html" class="content">Ссылка 3</a> </p> </body> </html>
Два простых способа как изменить цвет 98
Как на странице сделать ссылки разных
Два простых способа как изменить цвет 15
Изменение цвета в консоли (Си, Си)
Два простых способа как изменить цвет 83
Изменение цвета, стиля и толщины
Два простых способа как изменить цвет 20
Пересвет приборной панели ВАЗ
Два простых способа как изменить цвет 93
Как изменить цвет окон Windows 10
Два простых способа как изменить цвет 20
Изменение цвета текста - Excel
Два простых способа как изменить цвет 31
Как сделать, чтобы цвет
Два простых способа как изменить цвет 85
ARTFASAD Фасадный декор из
Два простых способа как изменить цвет 10
Антипаразитарный чай - рецепты: состав и пропорции
Два простых способа как изменить цвет 61
ВТОРОЙ КРЕСТ : Итак, мы собрали первые 2 слоя кубика Рубика
Два простых способа как изменить цвет 52
Два простых способа как изменить цвет 9
Два простых способа как изменить цвет 70
Два простых способа как изменить цвет 83
Два простых способа как изменить цвет 10
Два простых способа как изменить цвет 57
Два простых способа как изменить цвет 20
Два простых способа как изменить цвет 46