Как задать цвет гиперссылки в explorer

Обновлено: 02.07.2024

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

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

Метод №1: использование background-clip: text

Во время написания этого материала свойство background-clip: text носит статус экспериментального. Оно не поддерживается в Internet Explorer 11 и ниже.Этот метод предусматривает создание так называемого «knockout text» (текста, который выглядит так, будто он вырезан в некоей поверхности и из него просвечивает фон) с резким градиентом. HTML-разметка состоит из единственного элемента <a> , описывающего гиперссылку.

Начнём с создания стилей для ссылки. Использование overflow: hidden приведёт к тому, что при изменении внешнего вида ссылки отсекается всё то, что выходит за пределы этого элемента.

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

Воспользуемся свойством background-clip для обрезки градиента. Дадим ему значение text для вывода текста. Мы ещё будем использовать свойства background-size и background-position . Делается это для вывода начального цвета.

И наконец — добавим к стилю CSS-свойство transition и стилизуем псевдокласс гиперссылки :hover . Для того чтобы при наведении на ссылку мыши новый цвет заполнял бы ссылку слева направо, воспользуемся свойством background-position .

Вот — пример на CodePen.Хотя эта методика и позволяет достичь желаемого эффекта, Safari и Chrome подвергнут обрезке элементы оформления текста и тени. Это значит, что они показаны не будут. Применение текстовых стилей, таких, как подчёркивание текста с помощью CSS-свойства text-decoration , работать не будет. Поэтому, если нужно, чтобы ссылки были бы подчёркнутыми, стоит рассмотреть другие способы настройки подчёркивания.

Метод №2: применение width/height

Этот метод основан на использовании атрибута data-*, содержащего тот же текст, что и тег <a> . Здесь используется управление свойством width (для заполнения ссылки цветом слева направо или справа налево) или свойством height (для применения эффекта сверху вниз или снизу вверх). Например, в нашем случае применяется воздействие на свойство width , которое, при наведении мыши на ссылку, меняется с 0 до 100%.Вот разметка:

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

Именно тут нам и понадобится использовать текст из атрибута data-content . Этот текст будет расположен поверх содержимого тега <a> . Мы можем воспользоваться здесь интересным маленьким приёмом, который заключается в копировании текста из атрибута и в выводе его с помощью функции attr() в свойство content псевдоэлемента ссылки ::before .

Для того чтобы текст не перешёл бы на новую строку, к псевдоэлементу будет применён стиль white-space: nowrap . Для изменения цвета ссылки зададим значение CSS-свойства color псевдоэлемента ::before и сделаем так, чтобы в начале значение свойства width равнялось бы 0:

Увеличим значение width псевдоэлемента ::before до 100% для применения эффекта при наведении на ссылку мыши:

Вот пример применения этого метода.Хотя мы, воздействуя на свойства элемента width и height , достигаем того, что нам нужно, этот метод отличается невысокой производительностью. Для того чтобы получить плавную смену цветов на 60 кадрах в секунду — лучше пользоваться свойствами transform или opacity .Применение свойства text-decoration позволяет использовать в анимированных ссылках различные стили подчёркивания текста. Вот пример, демонстрирующий это, созданный с помощью третьей методики, которую мы сейчас рассмотрим. Она основана на применении CSS-свойства clip-path.

Метод №3: применение clip-path

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

Тут используется та же разметка, что и в предыдущем примере:

Мы, снова, будем пользоваться псевдоэлементом ::before . Но CSS-код здесь другой:

В отличие от предыдущего метода, здесь свойство text-decoration: underline должно быть задано для псевдоэлемента ::before . Это нужно для того, чтобы изменение цвета коснулось бы не только текста ссылки, но и линии, подчёркивающей ссылку.Теперь присмотримся к CSS-коду свойства clip-path :

Позиции вершин многоугольника в свойстве clip-path заданы в процентах, они определяют координаты в порядке, соответствующем их размещению на многоугольнике:

0 0 = верхний левый угол
0 0 = верхний правый угол
0 100% = нижний правый угол
0 100% = нижний левый угол

Вот рабочий вариант этого примера.Эта методика анимирования цвета ссылок работает очень хорошо, но перед её применением стоит учесть поддержку свойства clip-path различными браузерами. Создание CSS-переходов с использованием clip-path — это лучше, чем использование методики height/width. Однако её применение приводит к тому, что браузер выполняет весьма ресурсозатратные операции Paint (рисование).

Метод №4: использование transform

В разметке, которая здесь применяется, используется методика маскировки с помощью элемента . Так как мы будем использовать в элементе содержимое, дублирующее содержимое ссылки, то мы, ради улучшения доступности контента, воспользуемся атрибутом aria-hidden="true" . Это скроет повторяющийся текст от средств для чтения с экрана.

Такой текст не будет озвучен дважды:

CSS-код для элемента содержит описание перехода, который начинается слева:

Теперь нужно организовать перемещение элемента вправо, выглядящее так, как показано ниже.

Для того чтобы это сделать, воспользуемся псевдоэлементом ::before элемента . И, как прежде, прибегнем к использованию атрибута data-content . Зададим изменение позиции элемента, применяя трансформацию transform: translateX(100%) , перемещая его по оси X .

Так же, как и у элемента , позиция псевдоэлемента ::before будет установлена с помощью конструкции transform: translateX(0) :

Вот этот пример на CodePen.Хотя этот метод отличается наилучшей кросс-браузерной поддержкой из рассмотренных, для его реализации нужно больше HTML и CSS-кода. Тем не менее, применение CSS-свойства transform не вредит производительности, его использование не вызывает перерисовывания элементов, и, в результате, ведёт к формированию плавных CSS-переходов на 60 кадрах в секунду.

Итоги

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

В разных браузерах цвет ссылка и по умолчанию может быть разным!:

Цвет ссылки по умолчанию в Microsoft Edge

Как удалить/изменить цвет ссылки по умолчанию !?

Для того, чтобы удалить/изменить цвет ссылки по умолчанию нужно просто прописать стили для ссылки!

Давайте самый простой пример разберем как это сделать!?

Если требуется удалить/изменить цвет ссылки по умолчанию, то пишем просто:

В нашем случае так не получится, потому, что на сайте уже сделаны стили для ссылок, поэтому создаем ссылку с каким-то классом:

Напишем стиль для данной ссылки с классом . И добавим hover:

Смотрим, что получилось:

Как подобрать цвет ссылки

Как и где можно взять цвет для ссылки!?

Модно подобрать цвет используя -> генератор цвета

Либо Нажимаем по ссылке ПКМ и выйдет новое окно - где нужно исследовать элемент

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

Задать цвет ссылки css

Рассмотрим несколько вариантов - как задать цвет ссылки:

Задать цвет только для этой ссылки

1). Цвет ссылки можно задать точечно, только для данной ссылки. Используя прямо в теге ссылки стили style="color:violet;"
текст_ссылки см.пункт 1 по умолчанию

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

<a href="https://dwweb.ru/page/css/005_tsvet_ssyilki_css.html" style="color:violet;">текст_ссылки</a>

Задать цвет ссылки через стили на странице

2). Установка цвета ссылки для данной страницы в свойствах стилей
Для того, чтобы показать данный пример, придется сделать стили и присвоить ссылке класс : class="example_1" , иначе опять где-то с чем-то будет конфликтовать. см. пункт 2 на отдельной странице

Результат : цвет ссылки через style на странице

Задать цвет ссылки через стили через файл css

3). Для того, чтобы задать цвет через файл ссы, анм понадобятся знания как создать файл css и потом прикрепить его к странице.

В основном везде пользуются именно этим способом!

Если мы выведем здесь вот такой код? то увидим стили прописанные через файл css:

Цвет ссылки при наведении

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

Лишь давайте сделаем быстрый пример, для того стиля. Что мы описали сверху и присвоим ему эффект при наведении на ссылку.

Берем тот же код, что шел выше добавляем ему ":hover" и в строке "color" - поставим, ну например красный.

Код ссылки не изменен

Цвет ссылки посещенной

Ну и собственно тоже самое, что и с верхнем кодом, изменяем вместо hover поставим "visited"

убрать синий цвет ссылки css

Как убрать синий цвет ссылки css!? Для того, чтобы убрать синий цвет ссылки нужно задать ему любой другой цвет, либо через стили в теге, либо через css стили на странице, либо в файле css!

Получите скорость, безопасность и конфиденциальность с помощью Microsoft Edge.

Internet Explorer предлагает богатые возможности, упрощающие просмотр веб-страниц.

Откройте Internet Explorer, выберите кнопку Инструменты и выберите Масштаб.

Выберите предопределенный масштаб или желаемое значение, нажав пункт Особый и указав значение масштаба.

Откройте Internet Explorer и нажмите клавишу ALT, чтобы отобразить строку меню.

Выберите пункт Вид, а затем — Размер шрифта.

Увеличьте или уменьшите размер текста по сравнению с размером на экране.

Нажимайте клавишу TAB для перемещения вперед и клавиши SHIFT+TAB для перемещения назад по элементам экрана, таким как:

ссылки в виде текста или рисунков;

текстовые поля в формах веб-узлов;

гиперобъекты на гиперкартах;

Вы также можете нажать клавишу F7, чтобы использовать клавишную навигацию для выбора текста и перемещения по веб-странице с помощью стандартных клавиш навигации на клавиатуре: Home, End, PAGE UP, PAGE DOWN и клавиш со стрелками.

Изменение шрифта, форматирования и цветов на страницах

Выбор шрифтов веб-страницы

Откройте Internet Explorer, нажмите кнопку Сервис и выберите пункт Свойства браузера.

На вкладке Общие в области Внешний вид выберитеШрифты.

Выберите нужные шрифты, нажмите кнопку ОК, а затем нажмите кнопку ОК еще раз.

Выбор цветов веб-сайта

Откройте Internet Explorer, нажмите кнопку Сервис и выберите пункт Свойства браузера.

Перейдите на вкладку Общие и в разделе Представление нажмите кнопку Цвета.

Снимите флажок Использовать цвета, установленные в Windows.

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

Дважды нажмите кнопку ОК.

Переопределения всех параметров шрифта и цвета для веб-сайтов

Откройте Internet Explorer, нажмите кнопку Сервис и выберите пункт Свойства браузера.

Перейдите на вкладку Общие и в разделе Представление нажмите кнопку Оформление.

Установите флажки Не учитывать цвета, указанные на веб-страницах, Не учитывать шрифты, указанные на веб-страницах и Не учитывать размеры шрифтов, указанные на веб-страницах.

Настройка Internet Explorer для работы со средствами чтения с экрана или распознавания голоса

Откройте Internet Explorer, нажмите кнопку Сервис и выберите пункт Свойства браузера.

Выберите вкладку Дополнительно.

Внесите одно или несколько следующих изменений:

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

Отображайте текст вместо рисунков. В разделе Специальные возможности установите флажок Всегда расширять текст для изображений. В разделе Мультимедиа снимите флажок Показывать изображения.

Устраните ошибки средства чтения с экрана или программы распознавания голоса из-за переходов по страницам. В группе Обзор снимите флажок Использовать плавную прокрутку. В разделе Мультимедиа снимите флажок Показывать изображения.

Предотвратите влияние звуков на веб-страницах на средство чтения с экрана. В разделе Мультимедиа снимите флажок Воспроизводить звуки на веб-страницах.

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

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

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

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

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

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

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

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

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

Давайте рассмотрим, что именно происходит в примере, приведенном выше. Для элемента <ul> мы устанавливаем нулевой отступ, устанавливая и ширину 100% внешнего контейнера, (в нашем случае <body> ).

Элементы <li> будут располагаться отдельной строке. Таким образом, мы создадим горизонтальный список ссылок.

Самым сложным является правило номер четыре, которое стилизует элемент <a> . Мы начали с отключения стиля текста, используемого по умолчанию. Затем мы установили display: inline для элементов списка. Для ссылок мы задаем display: inline-block, чтобы иметь возможность их масштабировать.

Элементы <a> являются строчными по умолчанию. Но нам нужно изменить их размер. Свойство inline-block позволяет сделать это.

Для определения размеров заполним всю ширину элемента <ul> , оставляя небольшое пространство между каждой кнопкой. После этого устанавливаем ширину и расстояние между каждой кнопкой. Затем задаем line-height: 3, чтобы придать кнопкам определенную высоту. В конце мы устанавливаем белый цвет для текста.

Заключение

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

Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, отклики, подписки, дизлайки, лайки низкий вам поклон!

Привет, друзья! Устраивает ли вас цвет ссылок на вашем блоге или сайте? Если нет, и вы хотите изменить цвет ссылки, не беда. Сегодня я научу вас, как изменить цвет ссылки в HTML и CSS коде.

То, что я вам расскажу, будет работать на любом движке, неважно будет это WordPress или uCoz, ведь HTML и CSS используют все движки.

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

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

Значение, каким цветом выводить ссылки на сайте прописывается в CSS коде, чаще всего в файле style.css. Находится этот файл всегда в корневой папке сайта.

Чтобы изменить цвет всех ссылок на сайте в CSS вам нужно открыть файл style.css и найти в нем код отвечающий за вывод ссылок. Просто найдите упоминание link или Link Styles.

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

Цвет CSS ссылок в обычном состоянии.

CSS цвет ссылок при нажатии на нее.

Цвет посещенной ссылки.

Если вы хотите, чтобы ваши ссылки стали подчеркнутыми, нужно вписать в CSS код ссылки значение text-decoration:underline; как на примере:

А если наоборот хотите убрать подчеркивание ссылки, нужно вписать значение text-decoration:none;

Как менять цвет ссылок в CSS думаю понятно. Теперь давайте рассмотрим как изменить цвет ссылки в HTML коде.

HTML цвет ссылки

В отличие от CSS, где разом можно изменить все ссылки на сайте, в HTML можно поменять цвет только одной определенной ссылки.

Сама ссылка в HTML коде выглядит следующим образом:

Для того, чтобы задать ей цвет, нужно добавить значение font color для текста ссылки, чтобы получилось вот так:

Таким образом я выделил ссылку красным цветом в HTML коде.

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

Читайте также: