Подчеркивание ссылок в браузере
Несколько лет назад в вэбе началось движение за отмену подчеркивания ссылок (речь о тексте, а не об элементах навигации и управления, вроде меню сайта). Мотивация понятна: снизить количество визуального шума, что отлично проиллюстрировано выше на примере Википедии.
Однако мнения дизайнеров в вопросе выделения ссылок разделились, и у каждой стороны свои аргументы.
Мне нравится, как позиция сторонников расписана в статье «Хотелось бы подчеркнуть». Рекомендую ознакомиться.
Хочу привести цитату, где на мой взгляд, кроется суть:
Безусловно, ссылку нужно выделять среди обычного текста. Например, цветом. Это может не устроить тех, кто плохо видит или не различает цвета, но для них существуют контрастные гаммы, альтернативные стилевые схемы, аудиоинтерфейсы и прочие нишевые решения.
Для тех, кого решение не устроит, предлагается использовать «нишевые решения». Другими словами, разработчики сайтов, браузеров, операционных систем или устройств должны решить проблему на своей стороне. Но возможно ли это? Люди должны выбрать и научиться использовать одно из решений. Но готовы ли они к этому?
Пример нишевого решения: уже сейчас в настройках браузера можно настроить значения для размера текста, цвета ссылок, фона страниц и так далее. Например, слабовидящий может установить по-умолчанию большой контрастный текст, жирные красные ссылки.
Звучит действительно как решение. Но давайте разберемся.
- В хроме есть специальные возможности (озвучивание действий, режим высокой контрастности и экранная лупа). Но включить их можно только при первом включении браузера. В противном случае рекомендуется использовать средство чтения с экрана ChromeVox. Очень странно.
- В Firefox, Opera и IE можно настроить шрифты, цвет текста, фона, ссылок. Но достаточно ли этого? Жирность ссылок и кнопок, как единственных элементов управления и навигации, не настроить.
- В Safari таких настроек вообще нет — используются настройки операционной системы. Но в MacOS, к примеру, можно лишь инвертировать все цвета и включить лупу. Крайне скудно.
- Добиться более близкого к желаемому результата можно только с использованием плагинов. Стандартные средства браузеров настраивают лишь минимум. Ссылки на аддоны приведены в конце статьи.
- В любом случае все это пагубно повлияет на дизайн всех сайтов.
- Чтение с экрана вообще не имеет никакого отношения к навигации и никаким образом ей не способствует.
Настройка цвета в Firefox. Как и в Opera есть настройка подчеркивания ссылок. В первых двух можно настроить подчеркивание ссылок. Свои настройки включаются после снятия галочки «Разрешить веб-сайтам использовать свои цвета/шрифты».
Что имеем в итоге?
Несколько решений, которые не только полны недостатков, но и портят дизайн сайтов.
Итак, давайте поговорим про «обычных людей». Интерфейсы проектируются для них. Это не только экономически целесообразно и выгодно заказчикам/руководству. Но так же выгодно дизайнерам: быстрее, проще, свободнее в выборе средств и стиля.
Для остальных есть «нишевые решения», делайте с ними что хотите.
Безусловно, ссылку нужно выделять среди обычного текста. Например, цветом.
А какие есть варианты?
- Подчеркивание.
- Цвет.
- Цвет фона.
- Рамка.
- Иконка до или после.
- Еще? Предлагайте.
Преимущество цвета очевидно — он мусорит меньше всего. И для большинства выделения ссылок цветом будет достаточно.
Казалось бы, решение замечательное. Но я хочу показать, что и оно имеет недостатки.
Даже на MacBook Air небольшой угол наклона дает искажение цвета. Мелочь, но в таких ситуация навигация ухудшается.
Пример с углами несколько натянут. Тут скорее идея плохой передачи цвета.
Плюс большинство не умеет настраивать цветовые профили, калибровать мониторы.
Плюс снижение яркости экрана при работе от батареи.
Плюс автоматическое снижение яркости экрана при ярком освещении (уже достаточно сильно распространено на смартфонах и ноутбуках).
В таких условиях либо выделения ссылки цветом недостаточно, либо мы ограничены в выборе цвета ссылки — нужно использовать такие цвета, которые не бледнеют при плохом освещении, не меняют цвет на TN-матрицах при взгляде сбоку.
Далее. Взглянем еще раз на скриншот Википедии.
Так возможно будет выглядеть Википедия, когда большая часть текста станет ссылками. Абстрактный пример.
Сейчас ссылки подчеркиваются при наведении курсора. Представьте, что вы зашли с планшета, где курсор и :hover отсутствует. Как вы определите, является ли ссылкой словосочетание «гипертекстового документа» или ссылками являются слова «гитертекстового» и «документа»?
Вспомним, что вся писанина этой статьи, и регулярные споры дизайнеров в интернете — всего лишь о подчеркивании ссылок.
Может просто использовать золотую середину? Полупрозрачное однопиксельное подчеркивание?
Пример Википедии взят из статьи «Хотелось бы подчеркнуть». Он сильно преувеличен, и потому отлично демонстрирует ситуацию.
Опрос
Оставляйте комментарий +1 к нужному пункту (без комментариев). Свой комментарий, мнение или свой вариант предлагайте в пункте 4.
- text-decoration: underline;
- text-decoration: none;
- border-bottom: 1px solid rgba(color, 0.3);
- комментарии, мнения и свои варианты
Вывод
Разумеется не стоит фанатично относиться к какому-либо способу. Все зависит от конкретной ситуации и от кучи разных факторов.
Думайте о людях, для которых делаете интерфейсы, делайте интернет удобнее.
Как добавить подчеркивание ссылки, как убрать подчеркивание ссылки, подчеркнуть ссылку через css? добавить подчеркивание с помощью css, изменить цвет подчеркивания ссылки! В общем все, что касается подчеркивания ссылок , как с подчеркиванием работать, стили по умолчанию и т.д.
Все о добавлении и удалении подчеркивания ссылки:
Подчеркивание ссылки по умолчанию
Поскольку наша ссылка не имеет исходного состояния, нам придется вывести стили ссылки с подчеркиванием по умолчанию! Мы делали пример страницы с цветами ссылки , там же можно посмотреть и подчеркивание ссылки по умолчанию!
Мы сделаем отдельный класс чтобы увидеть это подчеркивание по умолчанию прямо на даннйо странице!
Здесь мы видим, что есть некое свойство text-decoration , которое имеет значение underline - если вы изучали английский(и тут сразу про себя: вот же дурень! Нужно было учить английский в школе!)
Поскольку я учился и на "инфаке", то мне и задумываться не нужно. перевод: декорирование текста : подчеркивание. , но и если разложить слово under и + line переводится - под линией
Ну и плюс. вообще не красивое подчеркивание, каждая буква, которая имеет выступ за линию, разрывает подчеркивание! Это например буква у
Следующим пунктом уберем подчеркивание у ссылки!
Убрать подчеркивание ссылки css
Как мы уже выше обращали ваше внимание на свойство text-decoration. Чтобы убрать подчеркивание снизу, надо изменить значение text-decoration и поставить none
И добавим такой этот класс нашей ссылке
Результат удаления подчеркивания у ссылки через css
Чтобы это правило распространялось на все ссылки на сайте нужно написать просто без класса
Если нужно чтобы подчеркивание убиралось в определенном блоке, то выбираем блок, например этот блок, в котором написаны данные строки, имеет ид id="main_text"
При наведении на ссылку - убрать подчеркивание
Но мы хоти удалить подчеркивание не на всегда, а лишь тогда, когда мышка будет сверху ссылки! Как убрать подчеркивание при наведении на ссылку!
Давайте это сделаем! Нам понадобится псевдо класс :hover
Чтобы нам продемонстрировать убирание ссылки при наведении нам понадобится новая ссылка и новый класс
В одной из прошлых статей мы писали о мини дизайнерском тренде в виде добавления ярких фоновых полосок под ссылками и текстом на сайте. Аналогичный эффект также можно встретить в современных иллюстрациях для социальных сетей, которые содержат некий контент.
Сегодня решили продолжить тему и рассмотреть вопрос с точки зрения верстки, то есть рассказать как сделать подчеркивание текста / ссылок в HTML. В этом нам поможет одна замечательная статья, где хорошо описаны все нюансы текущей темы. В реализации будем использовать разные настройки свойства text-decoration, которое отвечает за функцию подчеркивания в CSS. Этим же способом сможете выделять mailto ссылки на адрес почты на сайте.
Раньше, помнится, поддержка данной опции в стилях была очень слабая, многие браузеры вообще ее не воспринимали. Сейчас ситуация улучшилась, хотя вы все еще рискуете получить неожиданный результат на старых версиях или в IE. Вероятно, совсем скоро наступит время, когда мы сможем задавать однозначное и корректное подчеркивание HTML ссылок / текстов без применения border-bottom. Хотя в одном из примеров прошлой статьи (онлайн журнале Wired) именно оно используется при реализации тренда:
Но вернемся к нашему уроку по верстке и более традиционному методу.
Опиця text-decoration для подчеркивание текста в CSS
Ранее она принимала одно из базовых значений:
- line-through — перечеркнутый текст;
- underline — нижнее подчеркивание;
- overline — линия сверху;
- none — без оформления (отмена всех эффектов);
- inherit — наследуется.
Однако в новой редакции стилей предлагаются несколько иные свойства:
- text-decoration-color — задание цвета;
- text-decoration-style — стиль подчеркивания текста / ссылок;
- text-decoration-line — тип линии (из 5-ти вариантов выше);
Для свойства text-decoration вы можете использовать сразу несколько значений параметров, перечисляя их в одной строке. Рассмотрим их по отдельности…
text-decoration-color — CSS цвет подчеркивания ссылки
Эта опция максимально простая и здесь, в принципе, нечего особо объяснять.
В качестве значение вводите код веб-цвета.
text-decoration-line — расположение линии оформления текста
Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:
Во второй строке показано как все записывается в один ряд с text-decoration.
text-decoration-style — стиль подчеркивания текста
Опция задает внешний вид декоративной линии для оформления текста / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:
- solid — сплошная линия;
- double — двойная (из первого примера выше);
- dotted — состоит из последовательности точек;
- dashed — позволяет сделать пунктирное подчеркивание CSS;
- wavy — эффектная волнистая линия.
text-underline-position — позиционирование CSS подчеркивания
С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:
- auto — располагается максимально близко базовой линии текста;
- under — под самой нижней границей шрифта;
- left и right — слева/справа для записей, отображаемых вертикально.
Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:
Разница, думаю, вполне очевидна.
text-decoration-skip — убираем подчеркивание для элементов
С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:
То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами шрифта. Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:
Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:
Дополнительные фишки для подчеркивания ссылок
Начинающие пользователи часто задают некоторые типовые вопросы по теме, поэтому мы также решили их рассмотреть. Общий пример находится в самом низу после пояснений.
Как убрать подчеркивание ссылки
Если ссылка декоративно выделена с помощью линии, то вам нужно найти CSS стиль, в котором прописывается свойство text-decoration и заменить его значение на «none»:
Тут важно правильно определить где именно в задается оформление вашему элементу. У него могут быть сторонние классы и другие дополнительные конструкции (не только тег a). Смотрите как мы реализовали это в примере ниже — абзац с классом «nounder».
Как сделать подчеркивание ссылки при наведении
В CSS для этих целей содержится так называемый псевдокласс hover — по теме есть большая детальная статья о создании hover эффекта в кнопках / картинках и не только (советуем глянуть). Если говорить вкратце, то вам просто нужно прописать обработку события:
Оба примера ниже позволяют понять логику работы при наведении: или вы изначально указываете в CSS подчеркивание ссылок, а потом убираете его в hover, либо наоборот.
Если будут еще какие-то вопросы по теме, задавайте их в комментариях. Постараемся рассмотреть позже или подсказать в ответах. Главное в этом деле практика — попробуйте добавить разные свойства для опции text-decoration непосредственно в примерах или создайте свой тестовый файл. Надеемся по теме подчеркивания текста и ссылок в CSS / HTML все стало ясно.
Псевдо-классы применяют стиль к элементам согласно их состоянию, которое может изменяться с помощью действий пользователя, а также может зависеть от расположения элемента в дереве документа. Селекторы псевдо-классов начинаются с двоеточия - " : " и обычно добавляются сразу же после селектора типа без дополнительных пробелов между ними:
Ссылки
Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:
Приведенный выше код содержит четыре CSS правила. При этом в каждом из селекторов используется псевдо-класс. Первое правило задает цвет для ссылок, по которым пользователи еще не переходили, если пользователь перешел по ссылке, то будет использовано второе правило. Псевдо-классы :hover и :active динамически изменяют отображение ссылки: :hover стилизует ссылку только в то время, когда над ней находится указатель мыши, а :active только тогда, когда пользователь уже щелкнул по ссылке, но кнопка еще удерживается.
Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.
Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами .
Подчеркивание ссылок
По умолчанию текст ссылок всегда отображается подчеркнутым. Используя свойство text-decoration вы можете либо совсем убрать подчеркивание ссылок либо сделать так, чтобы ссылка была подчеркнутой, только при наведении на нее курсора мыши.
Примечание: если подчеркивание ссылок отключается с помощью свойства text-decoration, то единственным визуальным отличием между ссылками и обычным текстом будет их цвет. Это может привести к тому, что пользователям может быть трудно отличить ссылки от текста.
Псевдо-классы :first-child и :last-child
Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:
Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:
- ссылки без подчёркивания;
- декоративное подчёркивание;
- выделение фоновым цветом;
- рамки;
- рисунок возле ссылки.
Далее указанные методы оформления ссылок рассматриваются более подробно.
Ссылки без подчёркивания
Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.
Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).
Пример 1. Отсутствие подчёркивания у ссылок
Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration , они наследуют свойства селектора a .
Подчёркивание ссылок при наведении на них курсора мыши
Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration : none , следует воспользоваться псевдоклассом :hover . Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).
Пример 2. Подчёркивание ссылок
Декоративное подчёркивание ссылок
Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom , которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed , получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.
Пример 3. Пунктирное подчёркивание для ссылок
При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none , чтобы одновременно не получилось две линии (рис. 1).
Рис. 1. Использование пунктира для выделения ссылки
Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.
Пример 4. Двойное подчёркивание ссылок
Изменяя толщину линии, её тип и цвет, можно получить множество разнообразных эффектов.
Использование фонового цвета
Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background , присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover , тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).
Пример 5. Фон под ссылкой
Фон под ссылкой точно соответствует области текста, поэтому в примере для селектора a добавлено свойство padding , создающее поля вокруг текста (рис. 2).
Рис. 2. Изменение цвета фона при наведении на ссылку курсора
Рамка вокруг ссылки
При использовании рамок со ссылками возможны два варианта. Первый — рамка вокруг ссылок устанавливается заранее и при наведении на неё курсора меняет свой цвет. И второй — рамка отображается, только когда на ссылку наводится курсор.
В примере 6 показано, как изменять цвет рамки, используя свойство border . Подчёркивание текста через text-decoration можно убрать или оставить без изменения.
Пример 6. Изменение цвета рамки у ссылок
Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding . Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background .
Если требуется добавить рамку к ссылкам при наведении на них курсора, то следует позаботиться о том, чтобы текст в этом случае не сдвигался. Достичь этого проще всего добавлением невидимой рамки вокруг ссылки и последующего изменения цвета рамки с помощью псевдокласса :hover . Прозрачный цвет указывается с помощью ключевого слова transparent , в остальном стиль не поменяется.
Рисунки возле внешних ссылок
Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).
Рис. 3. Выделение ссылки с помощью рисунка
Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a[href^="http://"] <. >, как показано в примере 7.
Пример 7. Рисунок возле ссылки
Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right . Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left .
Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*="//"] , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.
Читайте также: