Цвет ссылок css: Изменить цвет ссылки HTML. Для этих целей используются таблицы стилей CSS.

16.09.2023 alexxlab

Содержание

Как убрать подчёркивание ссылок — журнал «Доктайп»

По умолчанию все ссылки подчёркнуты синим, но такое оформление легко изменить с помощью CSS-свойства text-decoration: none.

Убираем подчёркивание ссылок в CSS

Допустим, у вас есть ссылка:

<a href="#form">Каталог товаров</a>

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

.link {
  text-decoration: none;
}

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

Убираем подчёркивание ссылок в HTML

Если у вас нет доступа к стилевому файлу или на работе принято инлайнить стили, можете убрать подчёркивание прямо в HTML.

Сбросить стили в одной ссылке:

<a href="#">Какая-то ссылка</a>

Убрать оформление во всех ссылках:

<head>
  <style>
    а {
      text-decoration: none;
    }
  </style>
</head>

Селектор может быть любым — мы для примера показали селектор тега.

Будьте осторожны при сочетании инлайн-стилей и внешнего CSS, ведь стили в атрибуте style сложно переопределить. Если вы ещё не знакомы с конфликтом свойств, советуем пройти раздел курса для новичков по HTML и CSS — это бесплатно.

Когда убирать подчёркивание

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

Один и тот же блок текста, но справа хорошо видно ссылки, а слева — нет

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

Read Article — ссылки в фирменном цвете

А ещё можно убрать подчёркивание у ссылки и добавить его текстовому блоку, например за счёт

border-bottom.

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

Так что, если вам не нравится, как выглядят ссылки — стилизуйте их по-своему. Примеры можете подсмотреть в статье про нестандартное подчёркивание текста на чистом CSS. Главное — не забывайте про UX и старайтесь поменьше инлайнить.

Читать дальше:

Как написать и запустить HTML на компьютере
Как сверстать макет. Пошаговый план
Шаблон простого сайта на HTML

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как использовать свойство object-fit

Как растягивать или сжимать картинки под размеры бокса.

CSS

15 июня 2023

Как создать рамку вокруг элемента. CSS-свойство border

Цветные, точечные, пунктирные рамки и многое другое.

CSS

31 мая 2023

Как сделать анимацию любой сложности. Свойство animation

Примеры и нюансы использования.

CSS

29 мая 2023

Как создать тени на CSS: свойство box-shadow

Внутренние, внешние, с градиентом — на все случаи жизни.

CSS

28 мая 2023

Как установить стиль шрифта. CSS-свойство font

Семейства шрифтов, начертание и размеры.

CSS

27 мая 2023

Как работает transform в CSS на примерах

Интерактивная статья — попробуйте анимировать сами.

CSS

23 мая 2023

Как оформить текст: 11 главных CSS-свойств

Инструкция для любителей поиграться со шрифтами.

CSS

23 мая 2023

Трансформации в CSS с примерами

Добавляем нескучные эффекты к элементам.

CSS

21 мая 2023

Как добавить изображение фоном.

Свойство background-image

Каков путь выберите сами.

CSS

20 мая 2023

Как работает margin. Правила внешних отступов

Как верстать блочные элементы

CSS

19 мая 2023

Отметить все посещенные ссылки произвольным цветом — Сетевое администрирование

by adminОпубликовано

Visited — это бесплатное дополнение для веб-браузера Firefox, которое позволяет вам переопределять пользовательские цвета посещенных ссылок на веб-сайтах, использующих эти изменения.

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

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

Обновить : Firefox поставляется с возможностью принудительного использования цветов ссылок по умолчанию в веб-браузере. Вам нужно загрузить about: preferences # content в адресную строку браузера и щелкнуть там кнопку «Цвета».

Там вы найдете варианты «переопределить цвета, указанные на странице, выбранными выше». Если вы установите для этого значения значение always, Firefox попытается переопределить любой пользовательский стиль, который используется на странице в вопросах.

Посетил для Firefox: изменить цвета посещенных ссылок

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

Цвет ссылки по умолчанию установлен на золотой, что должно четко выделять посещенные ссылки на большинстве страниц, но не на всех. Можно изменить цвет в дополнительных настройках Firefox (и, к сожалению, не в меню параметров на странице about: addons).

Чтобы изменить цвет ссылки, вам необходимо ввести about: config в адресной строке Firefox, чтобы открыть расширенную конфигурацию браузера. Фильтр по параметру extension.visited.color.visited и измените значение двойным щелчком. Вы можете ввести название цвета или цветовой код, начинающийся с символа #, в поле значения. Вы можете, например, изменить его на # 800080, чтобы изменить цвет посещенной ссылки на фиолетовый.

Функцию можно активировать или деактивировать с помощью сочетания клавиш Alt-v для текстовых ссылок или Alt-Shift-v для ссылок на изображения. К сожалению, отключить отображение ссылок на выбранных сайтах невозможно (например, это раздражает консоли администратора и интерфейсы).

Пользователи Firefox могут загрузить и установить надстройку из официального репозитория надстроек Mozilla.

Posted in Интересное

ссылок на стили CSS | Как стилизовать ссылки в CSS

Поиск

21 октября 2019 г.

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

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

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

active : представляет ссылку, которая активируется нажатием на ссылку, оформленную с использованием псевдокласса: active.
hover : представляет ссылку, которая, как только пользователь наводит курсор на ссылку, активирует свойство, стилизованное с использованием псевдокласса: hover.
focus : представляет ссылку, которая была сфокусирована (пример: пользователь перемещает действие на элемент страницы с помощью клавиши Tab или программно сфокусирована с помощью HTMLElement.focus ()), стилизованная с использованием псевдокласса focus

Вот пример простой ссылки:

 

<голова>
CSS-ссылки
<стиль>
п {
   размер шрифта: 30px;
   выравнивание текста: по центру;
   }


<тело>
 herbalife.com">Пример простой ссылки

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

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

Вот пример использования свойства text-decoration:

 

<голова>
<стиль>
п {
   размер шрифта: 30px;
   выравнивание текста: по центру;
   }
ссылка {
  текстовое оформление: нет;
}
а: посетил {
  текстовое оформление: нет;
}
а: наведите {
  оформление текста: подчеркивание;
}
а: активный {
  оформление текста: подчеркивание;
}


<тело>
Вот ссылка

Вот еще один пример, на этот раз с использованием свойства background-color:

 

<голова>
<стиль> 
п {
   размер шрифта: 30px;
   выравнивание текста: по центру;
   }
ссылка {
  цвет фона: коралловый;
}
а: посетил {
  цвет фона: голубой;
}
а: наведите {
  цвет фона: DarkMagenta;
}
а: активный {
  цвет фона: DarkSalmon ;
}


<тело>
 asp" target="_blank">Это ссылка

Расширенные кнопки ссылок CSS: чтобы создать кнопку ссылки, используйте некоторые свойства стиля CSS, чтобы вы могли создать поле и сделать его интерактивным. Вам понадобится свойство color, чтобы установить цвет текста, представляющего ссылку, цвет фона, чтобы добавить цвет к самой кнопке, text-decoration, чтобы удалить подчеркивание из ссылки, свойство text-align, чтобы установить выравнивание ваша ссылка, свойство отображения, описывающее, как должна отображаться ваша ссылка и свойство заполнения, и определяющее, насколько большой будет ваша кнопка.

Вот пример:

 

<голова>
<стиль>
а: ссылка, а: посетили {
    цвет фона: DarkSalmon ;
    граница: нет;
    цвет: #FFFFFF;
    отступ: 25px 52px;
    выравнивание текста: по центру;
    -webkit-transition-duration: 0,4 с;
    продолжительность перехода: 0,4 с;
    текстовое оформление: нет;
    размер шрифта: 20px;
    выравнивание текста: по центру;
    курсор: указатель;
    отображение: встроенный блок;
}
а: наведение, а: активный {
    цвет фона: DarkRed ;
}


<тело>
<тело>
 tennis.com" target="_blank">КНОПКА

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

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

 

<голова>
<стиль>
тело, html {
  маржа: 0;
  семейство шрифтов: без засечек, ариал, хелветика;
}
ул {
  заполнение: 0;
  ширина: 100%;
}
ли {
  дисплей: встроенный;
}
а {
  контур: нет;
  текстовое оформление: нет;
  отображение: встроенный блок;
  ширина: 19,5%;
  поле справа: 0,625%;
  выравнивание текста: по центру;
  высота строки: 3;
  белый цвет;
}
li:последний ребенок {
  поле справа: 0;
}
а: ссылка, а: посещено, а: фокус {
  фон: DarkSalmon;
}
а: наведите {
  фон: темно-красный;
}
а: активный {
  фон: красный;
  белый цвет;
}


<тело>
<ул>
  Турниры
Очки
Новости
Видео
ИГРОКИ И РЕЙТИНГ

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