Меню

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



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

Поддержи проект.

Цвет ссылки со стилями внутри тега. Цвет ссылки через стили style на странице. Цвет ссылки через css файл. Цвет ссылки по умолчанию, и конечно посмотрим, как меняется цвет ссылки при наведении на эту ссылку. Отдельная тема у нас есть по поводу свойства hover, которое и отвечает за цвет ссылки при наведении
И конечно же у нас есть раздел, который посвящен ссылкам!

+ Сделали отдельное видео посвященное цветам ссылок!

Всё о цвете ссылок на сайте[h3]

Цвет ссылки css

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

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

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

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

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

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

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

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

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

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

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

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

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

Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!

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

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

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

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

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

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

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

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

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

Источник

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

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

«Мне нравится, когда цвет это оружие, которое достают из ножен только в крайнем случае, в ситуации смертельной угрозы или чтобы нанести зрителю coup de grâce»
© Олег Пащенко

Каждый цвет в интерфейсах Контура решает определенную задачу:

  • Черный, белый, и оттенки серого — рабочие цвета для вывода и структурирования информации на экране.
  • Смысловые цвета: зеленый, желтый, красный — привлекают внимание и помогают быстрее считывать информацию с экрана.
  • Фирменный цвет — помогает сервисам Контура отличаться друг от друга, а пользователю понимать, куда он попал.

Примеры раскладок цветов в интерфейсах Контура

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

Черный, белый, серый

Мы используем «чистый» серый цвет. Он выглядит нейтрально и сочетается с остальными цветами в интерфейсе.

В большинстве сервисов Контура область контента — это белый лист на сером фоне. Это помогает сфокусировать внимание и снижает нагрузку на глаза.

Серый фон делит контент на смысловые блоки и группирует элементы на странице.

Источник

Как изменить цвет ссылок вашего блога или сайта?

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

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

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

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

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

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

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

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

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

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

Соответственно, чтобы цвет ссылок в спокойном состоянии, мы меняем значение color: #0169D3 на свой цвет в псевдоклассе a:link.

Чтобы изменить цвет посещенных ссылок, нужно изменить значение color: #0169D3 в псевдоклассе a:visited.

Читайте также:  Конденсат черного цвета с выхлопной трубы 1

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

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

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

HTML цвет ссылки

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

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

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

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

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

Подписывайтесь на обновления блога, чтобы не пропустить!

Источник

2.7. CSS-ссылки

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

Основной способ оформления ссылок заключается в стилизации подчеркивания ссылки и изменении цвета текста ссылки. Также можно изменить внешний вид курсора с помощью свойства cursor .

Оформление гипертекстовых ссылок

1. Псевдоклассы состояний гипертекстовых ссылок

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

  • Непосещенная — a:link
  • Посещенная — по которой уже выполнялся переход — a:visited
  • Не нажатая — над которой находится указатель мыши — a:hover
  • Нажатая — которая удерживается мышью — a:active

Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:

Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма каскадности).

2. Выборка отдельных ссылок

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

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

Добавление подчеркивания только при наведении на ссылку:

Внешний вид нижней границы ссылки:

4. Изображения для ссылок

Добавить изображение для ссылки можно с помощью CSS-свойства background-image . Так как элемент является строчным a , то предварительно его нужно преобразовать в блочный элемент a .

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

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

Символ href$ в селекторе атрибута дает браузеру команду найти все атрибуты href , заканчивающиеся определенным образом (в данном случае .pdf ) и добавить к ссылке соответствующий значок.

5. Использование фонового изображения

Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение:

6. Ссылки-кнопки

Благодаря свойствам background-color , border и padding , ссылкам можно придать вид прямоугольных кнопок, а, меняя отображение тех или иных свойств ссылок при наведении курсора мыши a:hover , добавить интересные эффекты.

7. Примеры оформления ссылок

Гипертекстовые ссылки можно оформить различными способами, но основной прием оформления основывается на изменении внешнего вида ссылки при наведении на нее курсором мыши — состояние ссылки a:hover .

Источник

HTML Ссылки, как сделать ссылку (гиперсылку) в html

Ссылки встречаются практически на всех веб-страницах. Ссылки позволяют пользователям щелкать их путь от страницы к странице.

HTML ссылки-гиперссылки

Ссылки HTML являются гиперссылками.

Вы можете щелкнуть по ссылке и перейти к другому документу.

При наведении указателя мыши на ссылку, стрелка мыши превратится в маленькую руку.

Примечание: Ссылка не обязательно должна быть текстом. Это может быть изображение или любой другой HTML-элемент.

HTML ссылки-синтаксис

В HTML ссылки определяются тегом :

Пример

href атрибут указывает адрес назначения ( https://html5css.ru/HTML/ ) ссылки.

текст ссылки является видимой частью (см. наш учебник по HTML).

Щелчок по тексту ссылки отправит вас по указанному адресу.

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

Локальные ссылки

В приведенном выше примере используется абсолютный URL (полный веб-адрес).

Локальная ссылка (ссылка на тот же веб-узел) указывается с относительным URL-адресом (без http://www. ).

Пример

Цвета ссылок HTML

По умолчанию ссылка будет выглядеть так (во всех браузерах):

  • Непосещаемая ссылка подчеркнута и синяя
  • Посещаемая ссылка подчеркнута и пурпурная
  • Активная ссылка подчеркнута и красная

Можно изменить цвета по умолчанию с помощью CSS:

Пример

HTML ссылки-целевой атрибут

Атрибут target указывает, где открыть связанный документ.

Читайте также:  Полудрагоценные камни зеленого цвета авантюрин

Атрибут target может иметь одно из следующих значений:

  • _blank — Открытие связанного документа в новом окне или вкладке
  • _self — Открывает связанный документ в том же окне/вкладке, в котором он был нажат (по умолчанию)
  • _parent — Oручка связанного документа в родительском фрейме
  • _top — Открытие связанного документа в полном тексте окна
  • framename — Открытие связанного документа в именованном фрейме

В этом примере откроется связанный документ в новом окне обозревателя/вкладка:

Примере

Совет: Если веб-страница заблокирована в рамке, можно использовать target=»_top» для выхода из кадра:

Пример

HTML ссылки-изображение как ссылка

Он является общим для использования изображений в качестве ссылки:

Пример

Примечание: border:0; добавляется для предотвращения IE9 (и более ранних) от отображения границы вокруг изображения (когда изображение является ссылкой).

Названия ссылок

Атрибут title указывает дополнительные сведения об элементе. Информация чаще всего отображается как текст подсказки, когда указатель мыши перемещается над элементом.

Пример

HTML ссылки-создать закладку

Закладки HTML используются для того, чтобы позволить читателям перейти к определенным частям веб-страницы.

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

Чтобы сделать закладку, необходимо сначала создать закладку, а затем добавить ссылку на нее.

При щелчке ссылки страница будет прокручиваться в папку с закладкой.

Пример

Сначала создайте закладку с атрибутом id :

Chapter 4

Then, add a link to the bookmark («Jump to Chapter 4»), from within the same page:

Or, add a link to the bookmark («Jump to Chapter 4»), from another page:

Example

Внешние контуры

На внешние страницы можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.

В этом примере используется полный URL-адрес для ссылки на веб-страницу:

Пример

В этом примере ссылки на страницу, расположенную в папке HTML на текущем веб-узле:

Пример

В этом примере ссылка на страницу, расположенную в той же папке, что и текущая страница:

Пример

Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.

Источник

Доступность ссылок: выделения цветом недостаточно

Перевод статьи «Link accessibility – Colors are not enough».

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

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

Однако не всегда просто создать доступные ссылки, которые вписывались бы в дизайн сайта. Также существует риск «переборщить» с визуальными элементами, что может запутать пользователя.

Типы ссылок

Говоря о ссылках, мы обычно представляем себе классические синие ссылки с подчеркиванием. Но видов ссылок гораздо больше, например:

  • ссылки в теле текста,
  • ссылки в заголовках и подзаголовках,
  • пункты меню,
  • кнопки,
  • изображения,
  • видео,
  • аудио.

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

Доступность ссылок согласно WCAG 2.0

WCAG 2.0 (Web Content Accessibility Guidelines) содержит две дополнительные рекомендации касательно ссылок в текстах:

  1. Текстовая ссылка должна быть контрастной; цвета ссылки и окружающего текста должны относиться как 3:1.
  2. Ссылка должна иметь и нецветовое обозначение (обычно — подчеркивание) как при наведении мыши, так и когда фокус наводится при помощи клавиатуры.

По умолчанию браузеры отображают ссылки с стиле, соответствующем этим условиям. Вы можете проверить это, отключив дополнительные CSS-правила при помощи расширения браузера Web Developer или других подобных инструментов разработчика. При этом домашняя страница Mozilla Developer Network в Chrome выглядит следующим образом:

Это, разумеется, очень базовые стили, но они есть: подчеркнутые синие ссылки хорошо известны, так что пользователи интернета могут с легкостью их распознать. Не случайно Nielsen-Norman Group в своей статье «Beyond Blue Links: Making Clickable Elements Recognizable» также называет синий цвет самым безопасным выбором для ссылок.

Примеры доступных ссылок

WebAIM не рекомендует при помощи CSS убирать подчеркивание, поскольку «пользователи привыкли видеть ссылки подчеркнутыми». Тем не менее, многие крупнейшие сайты не следуют этому принципу доступности ссылок. Часто они убирают подчеркивание не только из дефолтного состояния ссылки, но и из стилей :hover.

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

1. Border-bottom

Например, Bloomberg использует свойство border-bottom, чтобы выделить подчеркивание цветом, отличным от цвета текста ссылки. Как видите на скрине, текст ссылки остается черным, а вот подчеркивание — синее, благодаря чему ссылки смотрятся стильно.

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

Читайте также:  Какие цвета нужно смешать чтобы получить серый цвет волос

2. «Реверсное» оформление ссылок

The Verge практикует другой подход к подчеркиванию ссылок в тексте. Там они подчеркнуты по умолчанию, а при наведении мыши подчеркивание исчезает. При этом также немного меняется цвет, с розового на пурпурный (впрочем, изменение цвета едва заметно).

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

3. Значки

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

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

Создавать значки самостоятельно не обязательно. Значки внешних ссылок можно взять, например, на Font Awesome, и быстро добавить к своим ссылкам.

4. Текст ссылок

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

WCAG 2.0 содержит рекомендации даже насчет того, как составить подходящий текст для ссылки, и приводит полезные примеры (правда, главным образом для ссылок-изображений).

Если хотите посмотреть хороший пример правильного текста ссылки, я бы посоветовала сайт Gov.uk, где публикуется правительственная информация Великобритании. Например, посмотрите их страницу Set up a business.

Вот обратите внимание на строку Find out more about being a sole trader and how to register в скриншоте. Они поставили ссылку на ту часть текста, которая описывает назначение ссылки, а не на глагол, призывающий к действию («find out more» — «узнайте больше о…»).

Противоречивая роль атрибута title

Роль атрибута title в том, что касается доступности ссылок, неоднозначна и интересна. Если вы добавляете этот атрибут, при наведении указателя мыши на ссылку где-то рядом с ней возникает дополнительная информация.

Например, вот эта строка HTML

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

На странице «Supplementing link text with the title attribute» («Дополнение текста ссылки при помощи атрибута title») они описывают несколько проблем доступности, возникающих при таком подходе. Например, атрибут title недоступен для вспомогательных технологий и для пользователей, располагающих только клавиатурой. Кроме того, в некоторых клиентских приложениях дополнительная информация исчезает через пять секунд, а этого времени обычно недостаточно для прочтения.

В общем, WCAG 2.0 не возражает против использования атрибута title, но рекомендует подходить к нему с осторожностью. Одно можно сказать точно: никогда не следует использовать атрибут title для любой важной информации (например, предупреждений), недоступной в любых других формах. С другой стороны, если использовать этот атрибут только для неважной информации, то стоит ли использовать его вообще?

Состояния ссылок

Есть пять разных состояний ссылок, представленных псевдоклассами CSS: :hover, :focus, :active, :visited и :link.

Стоит ли делать разные стили для всех пяти состояний и хорошо ли это будет для доступности, — вопрос открытый. Благодаря разным стилям для всех состояний пользователи, конечно, заметят каждое изменение, но всегда ли это хорошо? Чрезмерное количество изменений состояния может привести к перегрузке информацией и сбить с толку пользователя.

Лично я склоняюсь к тому, чтобы создавать один стиль для дефолтного состояния ссылки, второй для состояний :hover, :active и :focus, и иногда добавлять третий стиль для состояния :visited. Но я не могу утверждать, что это лучшее решение в плане доступности. Если вас заинтересовала эта тема, на StackOverflow UX есть дискуссия о том, стоит ли делать одинаковыми стили для состояний :focus и :hover.

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

Источник

Adblock
detector