Как поменять цвет текста ссылки в css

Как изменить цвет ссылки в 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, могут применяться и к другим элемента, а не только к ссылкам.

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

Заключение

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

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

Для изменения цвета ссылок используйте стилевое свойство color, добавляя его к селектору A , как показано в примере 1.

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

Цвет ссылок

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

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

Вид ссылок, у которых изменён цвет

Рис. 1. Вид ссылок, у которых изменён цвет

См. также

color
currentColor
text-decoration-skip-ink
text-fill-color
Атрибут link
Атрибуты ссылок
Единицы цвета в CSS
Использование :hover
Наследование в CSS
Работа с типографикой
Создание ссылок
Ссылки
Ссылки
Ссылки в HTML
Якоря

CSS цвет ссылки, подчеркивание ссылок, картинка — ссылка

CSS подчеркивание ссылок определяется text-decoration и его значениями:

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

Ссылка

Атрибут text-decoration имеет такие значения: underline – гиперссылка подчеркнута; overline – надчеркнута и none – стиль без декораций.

a:link, a:active – псевдоэлементы, которые определяют первоначальный вид ссылки и в момент нажатия (текст синего цвета, полужирный, по умолчанию подчеркнут).

Псевдоэлемент a:visited определяет уже посещенную ссылку (в данном случае текст зеленый, полужирный и подчеркнутый).

Псевдоэлемент a:hover определяет внешний вид ссылки при наведении на нее курсора мыши (текст красный, полужирный, без декораций).

Определяем CSS цвет ссылки

CSS цвет ссылки определяется атрибутом color и его значениями:

Цвет ссылки в CSS

Текст со ссылкой

Селектор a соединяет в себе а:link, а:visited, a:active .

CSS картинка — ссылка

CSS картинка — ссылка определяется картинкой и тегами гиперссылки:

Картинка ссылка

border=»0″ – отменяет границу картинки — ссылки и стили здесь не участвуют.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS текст по вертикали CSS ссылка, гиперссылка CSS ссылка и курсор

Изменить цвет ссылки 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
>

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