Как сделать ссылку другого цвета в html

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

В этой статье мы расскажем, как стилизовать ссылки с помощью свойств CSS (например. изменить цвет ссылки в CSS) Оформление ссылок зависит от состояния, в которых они находятся:

Не посещенная ссылка : состояние ссылки по умолчанию. Оно определяется с помощью псевдокласса :link.
Посещенная ссылка : стилизуется с помощью псевдокласса :visited.
Активная : ссылка, которая активируется нажатием. Задается с помощью псевдокласса: active.
С сылка, на которую пользователь навел курсор : стилизуется псевдоклассом :hover.
Выделенная фокусом ввода : стилизуется с использованием псевдокласса :focus.

Пример оформления простой ссылки

CSS links p

Example for a simple link

По умолчанию не посещенные ссылки оформляются синим цветом, посещенные – фиолетовым, выделенные фокусом ввода – контуром, а активные – красным цветом.

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

    p < font-size: 30px; text-align: center; >a:link < text-decoration: none; >a:visited < text-decoration: none; >a:hover < text-decoration: underline; >a:active Here is a link

Пример, в котором для оформления ссылки используется свойство background-color

    p < font-size: 30px; text-align: center; >a:link < background-color: coral; >a:visited < background-color: cyan; >a:hover < background-color: DarkMagenta; >a:active This is a link

Для оформления ссылки как кнопки потребуются следующие свойства: color, text-decoration, text-align, background color display, padding и другие.

    a:link, a:visited < background-color: DarkSalmon ; border: none; color: #FFFFFF; padding: 25px 52px; text-align: center; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-decoration: none; font-size: 20px; text-align: center; cursor: pointer; display: inline-block; >a:hover, a:active  BUTTON

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

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

Заключение

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

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

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

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

Пример 1. Цвет активной ссылки

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

Изменение стиля активной ссылки

Рис. 1. Изменение стиля активной ссылки

См. также

Атрибут alink
Виды ссылок
Псевдокласс :active
Состояния кнопок
Типы ссылок

Цвет ссылок

С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве атрибутов тега . Атрибуты являются необязательными и если они не указаны используются значения по умолчанию.

link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).

alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.

vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb , где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

Пример 1. Задание цветов ссылок

    Цвет ссылок  Содержание сайта

Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.

Читать:

Как зайти в рекавери на xiaomi redmi note 4

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A .

visited — Стиль для посещенной ссылки.

active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

hover — Стиль для ссылки при наведении на нее мышью.

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

Пример 2. Цвет ссылок, заданных через стили

    Использование стилей   Содержание сайта

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

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

Пример 3. Изменение цвета ссылки с помощью стилей

    Цвет ссылок  Содержание сайта
 Интернет-маркетинг
 Юзабилити

В данном примере приведены три разных способа задания цвета с помощью стилей.

Изменить цвет ссылки HTML

Цвет ссылки

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

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

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

a color:#FF0000;
text-decoration:none
>

a:active color:#FF0000;
text-decoration:none
>

a:visited color:#666666;
text-decoration:none
>

a:hover color:#339900;
text-decoration: underline
>

Создайте два файла.

Первый index.html с таким содержимым:

А второй назовите style.css. В нем запишите следующее:

a color:#FF0000;
text-decoration:none
>

a:active color:#FF0000;
text-decoration:none
>

a:visited color:#666666;
text-decoration:none
>

a:hover color:#339900;
text-decoration: underline
>

Изменяя значения свойств можно менять внешний вид ссылок.