Css подчеркивание ссылки пунктиром: Оформление ссылок | WebReference

Разное 

Содержание

Оформление ссылок | WebReference

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

  • ссылки без подчёркивания;
  • декоративное подчёркивание;
  • выделение фоновым цветом;
  • рамки;
  • рисунок возле ссылки.

Далее указанные методы оформления ссылок рассматриваются более подробно.

Ссылки без подчёркивания

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

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

Пример 1. Отсутствие подчёркивания у ссылок

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { text-decoration: none; /* Убираем подчёркивание */ } </style> </head> <body> <p><a href=»link.html»>Ссылка без подчёркивания</a> </body> </html>

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration, они наследуют свойства селектора a.

Подчёркивание ссылок при наведении на них курсора мыши

Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration: none, следует воспользоваться псевдоклассом :hover. Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).

Пример 2. Подчёркивание ссылок

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <p><a href=»link.html»>Ссылка без подчёркивания</a> </body> </html>

Декоративное подчёркивание ссылок

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom, которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed, получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3.

Пунктирное подчёркивание для ссылок

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { color: blue; /* Цвет ссылок */ text-decoration: none; /* Убираем подчёркивание */ } a:hover { border-bottom: 1px dashed blue; /* Добавляем синее пунктирное подчёркивание */ } </style> </head> <body> <p><a href=»link.html»>Ссылка без подчёркивания</a> </body> </html>

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none, чтобы одновременно не получилось две линии (рис. 1).

Рис. 1. Использование пунктира для выделения ссылки

Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.

Пример 4. Двойное подчёркивание ссылок

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { color: blue; text-decoration: none; } a:hover { border-bottom: 4px double red; } </style> </head> <body> <p><a href=»link.
html»>Ссылка без подчёркивания</a> </body> </html>

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

Использование фонового цвета

Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background, присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover, тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).

Пример 5. Фон под ссылкой

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { padding: 2px; /* Поля вокруг текста ссылки */ text-decoration: none; /* Убираем подчёркивание */ } a:hover { background: #f73; /* Цвет фона при наведении на ссылку курсора */ color: yellow; /* Новый цвет текста */ } </style> </head> <body> <p><a href=»link.html»>Ссылка без подчёркивания</a> </body> </html>

Фон под ссылкой точно соответствует области текста, поэтому в примере для селектора a добавлено свойство padding, создающее поля вокруг текста (рис.  2).

Рис. 2. Изменение цвета фона при наведении на ссылку курсора

Рамка вокруг ссылки

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

В примере 6 показано, как изменять цвет рамки, используя свойство border. Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { border: 1px solid blue; /* Синяя рамка вокруг ссылок */ padding: 2px; /* Поля вокруг текста */ text-decoration: none; /* Скрываем подчёркивание */ } a:hover { border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */ } </style> </head> <body> <p><a href=»link.
html»>Ссылка без подчёркивания</a> </body> </html>

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding. Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background.

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

a {
  border: 1px solid transparent; /* Прозрачная рамка вокруг ссылок */
}
a:hover {
  border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */
}

Рисунки возле внешних ссылок

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

=»http://»] { background: url(/example/image/blank.png) 100% 5px no-repeat; /* Рисунок */ padding-right: 18px; /* Отступ справа */ } </style> </head> <body> <p><a href=»1.html»>Обычная ссылка</a></p> <p><a href=»http://htmlbook.ru»>Ссылка на сайт htmlbook.ru</a></p> </body> </html>

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right. Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left.

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*=»//»], он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

ссылки

См. также

  • text-decoration
  • Начертание
  • Свойства текста в CSS

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11. 03.2020

Редакторы: Влад Мержевич

Виды ссылок
Ctrl+←

Ссылки внутри страницы
Ctrl+→

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

Css подчеркивание ссылки – Красивое css подчеркивание элементов. Как изменить подчеркивание ссылок на веб-странице

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

«Практическая типография» на Butterick: Если вы чувствуете желание акцентировать что-то, используйте жирный шрифт или курсив. В особых ситуациях, таких как заголовки, вы также можете рассмотреть возможность использования всех заглавных букв, маленьких заглавных букв или изменения толщины. Не уверены? Я предлагаю вам найти книгу, газету или журнал, в которых акцентируется текст.

Но в Интернете все по-другому. Гиперссылки являются важной частью Интернета; и с самого начала интернета они были подчеркнуты. Это общепризнанное соглашение. Значение кристально ясно — подчеркивание означает ссылку.

Тем не менее, большое количество популярных веб-сайтов убрало подчеркивание: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году Google удалили подчеркивания со страницы результатов поиска, их ведущий дизайнер Джон Уайли заявил, что это создало более чистый вид. Тем не менее, на большинстве этих сайтов сохранилось с небольшими различиями выделение традиционным сине-голубым цветом (#0000EE), который был цветом браузера по умолчанию с самого начала Интернета. Хотя это обеспечивает для большинства пользователей визуальную подсказку, этого может быть недостаточно для обеспечения соответствия доступности WCAG.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

WCAG не обязывает строго использовать подчеркивания для ссылок, но рекомендует их. Пользователи-дальтоники должны иметь возможность различать ссылки. Вы можете выделить их другими способами, например, жирным шрифтом font-weight. Или вы могли бы сохранить эту старую визуальную доступность. Но если мы собираемся использовать подчеркивание, мы хотим, чтобы оно выглядело красиво. Марчин Вичари, дизайнер из Medium, описал идеальное подчеркивание как:

[&#8230;] видимое, но ненавязчивое — позволяющее людям понять, на что можно нажимать, но не обращающее на себя слишком много внимания. Оно должно располагаться на правильном расстоянии от текста, удобно помещаясь позади текста, когда это же место должны занять выступающие части букв.

Для достижения этого традиционно требовались хитрости CSS.

Хаки, которые мы использовали

С этим трюком должны быть знакомы все разработчики — с помощью :border-bottom. Имитируя подчеркивание с помощью border-bottom, мы получаем контроль над цветом и толщиной. Эти псевдо-подчеркивания имеют одну проблему: слишком большое расстояние от текста. Вы могли бы потенциально решить эту проблему с помощью line-height, но и это имеет свои недостатки. Аналогичная техника использует box-shadow. Марчин Вичари впервые применил самую сложную технику, которая использовала background-image для имитации подчеркивания. Это были полезные хаки, но, к счастью, они больше не нужны.

Стилизация реальных подчеркиваний

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

text-underline-offset контролирует положение подчеркивания.

text-decoration-thickness контролирует толщину подчеркивания.

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

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

border-bottom: #EA215A 0.125em solid;

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Обратите внимание, что это псевдо-подчеркивание явно ниже выступающей части буквы «у»:

Вот тот же параграф при использовании DevTools для применения того же стиля к реальному подчеркиванию с новыми свойствами CSS:

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

Возможно, это самое большое обновление для подчеркивания в Интернете, и при этом разработчикам нет необходимости что-либо делать. В старые добрые времена выступающие части букв бесцеремонно обрезались подчеркиванием, что было далеко не элегантно. Разработчики привыкли обходить этот недостаток, применяя text-shadow соответствующий цвету фона. text-decoration-skip-ink дает лучший способ создать разрывы подчеркивания вокруг выступающих частей.

Значение по умолчанию auto (слева) и значение none (справа)

Удобно, это установлено как новое значение по умолчанию для подчеркиваний; это означает, что внешний вид подчеркиваний улучшился, в то время как большинство веб-разработчиков даже не знают, что это свойство существует. Если вы хотите, чтобы подчеркивание пересекало выступающие части букв, вы можете установить для этого свойства — none.

Автор: Ollie Williams

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

CSS3. Основы

Прямо сейчас изучите CSS3 с нуля!

Как в CSS убрать подчеркивание ссылки

Здравствуйте, дорогие друзья!

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

Навигация по статье:

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

Отключаем подчеркивание

Чтобы в CSS убрать подчеркивание ссылки нам нужно воспользоваться специальным CSS-свойством text-decoration со значением none, которое нужно прописать в файле стилей нашего сайта для ссылки.

Вот как это будет выглядеть на примере для ссылок размещенных в блоке с классом .link-blok:

Вместо .link-blok вам нужно указать селектор вашего блока (класс или индентификатор) внутри которого находится ссылка для которой нужно убрать подчёркивание.

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

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

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

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

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

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

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

Желаю вам успехов в оформлении вашего сайта! До встречи в следующих статьях!

С уважением Юлия Гусарь

Как добавить пунктирное подчеркивание к ссылкам?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+
Задача

Добавить к ссылкам вместо сплошного подчёркивания пунктирное.

Решение

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

Для создания линии следует использовать свойство border-bottom со значением dashed, добавляя его к селектору A. Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot. Также необходимо убрать исходное подчёркивание у ссылок с помощью свойства text-decoration со значением none (пример 1).

Пример 1. Пунктирное подчеркивание

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

Рис. 1. Вид обычной ссылки и ссылки с пунктирным подчеркиванием

Толщина линии и цвет подчеркивания у ссылок также задаются через свойство border-bottom.

CSS оформление ссылок: убираем подчёркивание, меняем цвет

Селекторы псевдо-классов

Псевдо-классы применяют стиль к элементам согласно их состоянию, которое может изменяться с помощью действий пользователя, а также может зависеть от расположения элемента в дереве документа. Селекторы псевдо-классов начинаются с двоеточия &#8212; &#171;:&#187; и обычно добавляются сразу же после селектора типа без дополнительных пробелов между ними:

Ссылки

Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:

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

Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.

Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами <a>.

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

По умолчанию текст ссылок всегда отображается подчеркнутым. Используя свойство text-decoration вы можете либо совсем убрать подчеркивание ссылок либо сделать так, чтобы ссылка была подчеркнутой, только при наведении на нее курсора мыши.

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

Псевдо-классы :first-child и :last-child

Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:

Поскольку первый абзац является первым дочерним элементом для <div>, его текст будет отображаться зеленым цветом. Цвет текста второго абзаца будет соответствовать цвету заданному по умолчанию, то есть черному. Цвет текста третьего абзаца будет окрашен в синий цвет, поскольку третий абзац является последним дочерним элементом для <div>.

Подчеркивание ссылки добавить удалить примеры

Как добавить подчеркивание ссылки, как убрать подчеркивание ссылки, подчеркнуть ссылку через css? добавить подчеркивание с помощью css, изменить цвет подчеркивания ссылки! В общем все, что касается подчеркивания ссылок , как с подчеркиванием работать, стили по умолчанию и т.д.&#13;

Перове что мы теперь делаем, это делаем список всех подпунктов, касающихся нашей темы подчеркивание ссылки! Это, как мне кажется намного стало удобнее и процент ухода пользователя сократился до не бывалых малых величин!&#13;

В общем погнали!&#13;

  1. Подчеркивание ссылки по умолчанию &#13;
  2. Убрать подчеркивание ссылки css &#13;
  3. При наведении на ссылку &#8212; убрать подчеркивание &#13;
  4. При наведении на ссылку &#8212; добавить подчеркивание &#13;
  5. Бордюр в качестве подчеркивания ссылки &#13;
  6. Как изменить цвет подчеркивания ссылки? &#13;
  7. Убрать бордюр под ссылкой при наведении &#13;
  8. Изменить цвет подчеркивания под ссылкой при наведении &#13;
  9. Пунктирное подчеркивание ссылки &#13;
Подчеркивание ссылки по умолчанию

Мы сделаем отдельный класс чтобы увидеть это подчеркивание по умолчанию прямо на даннйо странице!&#13;

&#13; Здесь мы видим, что есть некое свойство text-decoration, которое имеет значение underline &#8212; если вы изучали английский(и тут сразу про себя: вот же дурень! Нужно было учить английский в школе!)&#13;
Поскольку я учился и на &#171;инфаке&#187;, то мне и задумываться не нужно&#8230; перевод: декорирование текста : подчеркивание&#8230;, но и если разложить слово under и + line переводится &#8212; под линией&#13;
&#13; Ну и плюс&#8230; вообще не красивое подчеркивание, каждая буква, которая имеет выступ за линию, разрывает подчеркивание! Это например буква у

Следующим пунктом уберем подчеркивание у ссылки!&#13;

Убрать подчеркивание ссылки css

И добавим такой этот класс нашей ссылке&#13;

<a>Пример ссылки с удаленным подчеркивание ссылки!</a>

Результат удаления подчеркивания у ссылки через css &#13;

Чтобы это правило распространялось на все ссылки на сайте нужно написать просто без класса&#13;

&#13; Если нужно чтобы подчеркивание убиралось в определенном блоке, то выбираем блок, например этот блок, в котром написаны данные строки, имеет ид

При наведении на ссылку &#8212; убрать подчеркивание

Но мы хоти удалить подчеркивание не на всегда, а лишь тогда, когда мышка будет сверху ссылки! Как убрать подчеркивание при наведении на ссылку!&#13;

Давайте это сделаем! Нам понадобится псевдо класс :hover&#13;

Чтобы нам продемонстрировать убирание ссылки при наведении нам понадобится новая ссылка и новый класс&#13;

<a>Пример удаления подчеркивания ссылки при наведении мышки</a>

&#13; Далее к классу с ссылкой добавляем псевдо класс hover

Результат удаления подчеркивания при наведении мышки:&#13;

При наведении на ссылку &#8212; добавить подчеркивание

Результат добавления ссылки при наведении мышки:&#13;

Бордюр в качестве подчеркивания ссылки

border-bottom: 1px solid red;&#13;

&#13; Чтобы увеличить зазор между ссылкой и подчеркиванием используем padding-bottom

Как изменить цвет подчеркивания ссылки?

Берем выше идущий стиль и изменяем подчеркивание на любой другой цвет, например,, пусть цвет текста будет синий, а цвет подчеркивания будет красным:&#13;

border-bottom: 1px solid red;&#13;

Результат подчеркивание ссылки другого цвета:&#13;

Убрать бордюр под ссылкой при наведении

border-bottom: 1px solid red;&#13;

Результат, как убрать подчеркивание свойства border: &#13;

Изменить цвет подчеркивания под ссылкой при наведении

border-bottom: 1px solid red;&#13;

border-bottom: 1px solid black;&#13;

Результат изменения подчеркивания цвета при наведении&#13;

Пунктирное подчеркивание ссылки

border-bottom: 1px dashed red;&#13;

Результат пунктирное подчеркивание ссылки:&#13;

Последняя дата редактирования : 2020-01-14 11:25

Теги:
подчеркивание ссылкиубрать подчеркивание ссылкиcss подчеркивание ссылкиубрать подчеркивание ссылки cssподчеркивание ссылки htmlкак убрать подчеркивание ссылки в htmlссылка без подчеркиванияподчеркивание ссылки при наведениисделать подчеркивание ссылкиубрать нижнее подчеркивание ссылкиссылка без подчеркивания htmlцвет подчеркивания ссылкиссылка без подчеркивания cssподчеркивание ссылки при наведении cssнижнее подчеркивание в ссылкахкак убрать нижнее подчеркивание у ссылок htmlсделать ссылку без подчеркиванияплавное подчеркивание ссылкиубрать подчеркивание ссылки при наведениинижнее подчеркивание ссылки cssотменить подчеркивание ссылкицвет подчеркивания ссылки cssубрать нижнее подчеркивание ссылки cssкак сделать подчеркивание в ссылке htmlплавное подчеркивание ссылки при наведенииплавное подчеркивание ссылки cssподчеркивание ссылки пунктиромкак сделать ссылку без подчеркивания в htmlотменить подчеркивание ссылки cssкак сделать подчеркивание ссылки при наведенииплавное подчеркивание ссылки при наведении cssкак убрать подчеркивание ссылки в html cssпунктирное подчеркивание ссылкиубрать подчеркивание ссылки css при наведениикак сделать подчеркивание ссылки в cssанимация подчеркивания ссылки cssотключить подчеркивание ссылки в cssпри наведении на ссылку появляется подчеркиваниеподчеркивание ссылки пунктиром cssудалить подчеркивание ссылки cssне убирается подчеркивание ссылки cssпрерывистое подчеркивание ссылки css

Красивое css подчеркивание элементов.

Как изменить подчеркивание ссылок на веб-странице

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

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

В этом примере мы уберем подчеркивание у ссылок, а потом будем добавлять или убирать при наведении курсора мыши.

Пример HTML и CSS: как убрать и добавить подчеркивание у ссылок

сайт &#8212; Подчеркивание у ссылок

Ссылка 1 Ссылка 2 Ссылка 3

Описание примера
  1. По умолчанию все популярные браузеры добавляют к ссылкам подчеркивание, которое регулируется свойством CSS . То есть по умолчанию это свойство, для ссылок, имеет значение underline . Используя эти знания, мы и изменяем подчеркивание у ссылок в их разных состояниях.

Изначально подчеркивание у ссылок &#8212; это сплошная тонкая линия, почти вплотную прижатая к тексту. И в большинстве случаев такого варианта вполне достаточно. Однако иногда дизайн требует, чтобы ссылки подчеркивались не сплошной, а, например, пунктирной линией, или чтобы расстояние от подчеркивания до ссылок было больше стандартного, или само подчеркивание было более жирным. А иногда нужно сделать вообще какое-нибудь экзотическое подчеркивание, например волнистой или разноцветной линией. Все эти варианты и будут рассмотрены в данном примере.

Пример HTML и CSS: пунктирное подчеркивание ссылок

сайт &#8212; Создание пунктирного подчеркивания у ссылок

Ссылка 1 Ссылка 2 Ссылка 3

Описание примера
  1. Сначала убираем стандартное подчеркивание у всех ссылок, так как будем использовать нестандартные методы. Затем первой ссылке добавляем нижнюю границу рамки с помощь свойства CSS , причем делаем ее пунктирной (dashed). Это и будет наше подчеркивание. Чтобы при наведении на ссылку подчеркивание убиралось &#8212; используем псевдокласс и делаем фон рамки таким же, как и фон страницы, то есть просто скрываем ее. По идее, здесь было бы лучше вообще сделать фон рамки прозрачным (transparent), но IE6 неправильно понимает это значение.
  2. Со второй ссылкой проделываем то же, что и с первой, но только рисуем сплошную линию. Чтобы увеличить расстояние от текста до подчеркивания &#8212; задаем ссылке небольшой нижний отступ с помощью свойства CSS .
  3. У нашей третьей ссылки подчеркивание разноцветное, поэтому его мы будем добавлять с помощью фонового изображения. Используем для этого небольшую картинку , которую подключаем через CSS . Позиционируем фон в нижнюю часть ссылки (0 100%) и разрешаем ему дублироваться только по горизонтали (repeat-x). Подчеркивание готово, но прилегает слишком близко к тексту, чтобы это исправить &#8212; добавляем ссылке маленький отступ снизу. Теперь все.
  4. В старичках IE6 и IE7 могут возникнуть проблемы с отображением подчеркивания у первой и второй ссылки. Для исправления добавляем свойство zoom :1, которое включает т.н. layout. Это свойство невалидно и его понимают только эти браузеры, поэтому лучше подключить его условными комментариями .

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

сайт &#8212; Создание ссылок-блоков

Как убрать подчеркивание ссылки в HTML

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

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

Как убрать нижнее подчеркивание у ссылок html?

За нижнее подчеркивание отвечает свойство text-decoration, его можно применять не только к ссылкам, но и другим элементам на странице к примеру h3-h6. Поддерживается всеми браузерами с первой версии. Далее предлагаю взглянуть значения свойства:

  • line-through — перечеркивает ссылку
  • overline — добавляет верхнее подчеркивание
  • underline — добавляет нижнее подчеркивание
  • none — убирает подчеркивание
  • initial — устанавливает значение по умолчанию
  • inherit — наследует это свойство от родительского элемента

Для того чтобы убрать underline (подчеркивание) пишем в css text-decoration : none . Если мы собираемся применить правило ко всем ссылкам на странице пишем:

Для конкретной ссылки мы можем использовать строчные (inline) стили. Такие стили обычно добавляют javascript скрипты.

А так же явно указать правило ссылке через селектор класса, идентификатора или дочерний селектор.

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

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

outline: none; //убираем обводку

outline-color: brown; //меняем цвет обводки

На этом у меня все, я надеюсь у вас не осталось вопросов по работе с свойством text-decoration. До встречи в новых статьях.

Подчеркивание в CSS (красивые эффекты с примерами кода)

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «CSS Underline: 20+ Examples».

При создании ссылок или анимаций для кнопок меню у вас может возникнуть необходимость использовать подчеркивание. Из этой статьи вы узнаете о нескольких способах создать эффект подчеркивания с использованием CSS-свойств text-decoration , border-bottom , background-image , box-shadow , а также при помощи SVG.

CSS-свойство text-decoration

Свойство text-decoration &#8212; самый простой способ подчеркнуть текст. Но этому способу не хватает настраиваемости, и это проблема. Более продвинутые в этом смысле способы подчеркивания мы рассмотрим чуть дальше по тексту.

Давайте посмотрим, как при помощи text-decoration можно сделать простое подчеркивание.

Свойство text-decoration &#8212; это сокращенный вариант записи трех других свойств:

  • text-decoration-line (указывается обязательно): определяет, где должна проходить линия подчеркивания. Возможные значения &#8212; overline (над текстом), underline (под текстом), underline overline (и над текстом, и под ним), line-through (перечеркивание текста).
  • text-decoration-style : определяет стиль линии. Возможные значения &#8212; solid (простая прямая линия), dotted (линия из точек), dashed (пунктирная линия), wavy (волнистая линия), double (двойная линия).
  • text-decoration-color : определяет цвет линии. Указываться может по-разному, например, #ccc, blue, currentColor.

Вот несколько примеров:

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

Если вы хотите добавить подчеркивание, которое будет появляться только при наведении курсора, используйте следующие CSS-правила:

Альтернативой свойству text-decoration может послужить свойство border-bottom . С его помощью вы также можете задать внутренний отступ (padding) и отодвинуть линию подчеркивания от текста. В следующем примере первая ссылка создана при помощи свойства text-decoration , а вторая &#8212; при помощи border-bottom :

А теперь давайте перейдем к более интересным способам подчеркнуть текст.

Градиентное подчеркивание

При помощи свойства background: linear-gradient и других свойств фона можно создать градиентное подчеркивание. Вот пример:

Почитать больше о градиентах можно в статье «CSS Gradients: 8 Examples of Usage».

Короткое подчеркивание

CSS позволяет делать подчеркивание любой ширины и высоты. Оно может быть и короче слова или ссылки. Например, если вам нужно создать короткое подчеркивание, чтобы выделить начало предложения или заголовок, можно использовать псевдоэлемент ::after со свойством border-bottom .

Вы также можете установить толщину линии, например 2 px (в примере &#8212; border-bottom: 2px solid #f9dd94; ).

Подчеркивание «маркером»

При помощи свойства transform можно сделать короткое подчеркивание скошенной линией.

Также можно сделать подчеркивание «маркером» длинного куска текста. Пример, на который меня вдохновил Codepen.io/Ash:

Правила, касающиеся этого подчеркивания:

Подчеркивание заголовка

Чтобы подчеркнуть заголовок, можно использовать свойство text-decoration: underline;, но при помощи свойства border-bottom можно сделать красивее. Правда, в последнем случае вам нужно добавить display: inline; , чтобы подчеркивание не было длиннее самого слова.

Многострочное подчеркивание

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

В приведенных ниже примерах использовано свойство background-image , поскольку оно позволяет захватить несколько строк. И хотя вы можете использовать настоящие изображения, в нашем случае это просто линия. Мы используем линейный градиент, чтобы генерировать изображение.

background-repeat: repeat-x; делает подчеркивание горизонтальным.

Если изменять второе значение в background-position: 0 100%; , можно регулировать, насколько далеко от верха должно быть подчеркивание.

Также можно менять второе значение в background-size: 100% 3px; , чтобы подобрать нужную высоту подчеркивания.

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

  1. Для начала нужно удалить дефолтное значение text-decoration .
  2. Использование background-image позволяет охватить несколько строк. Поскольку мы хотим, чтобы подчеркивание было того же цвета, что и ссылка, мы используем currentColor и для начала, и для конца градиента. currentColor велит браузеру использовать цвет элемента из основного свойства цвета.
  3. При помощи background-position мы задаем позицию изображения в нижнем левом углу. В нашем примере 0% означает горизонтальное позиционирование, а 100% &#8212; вертикальное. Также мы отключаем background-repeat , чтобы предотвратить создание нескольких экземпляров изображения. Эти два свойства можно записывать при помощи короткого формата записи ( background: no-repeat 0 100%; ).
  4. При помощи background-size мы указываем нулевую ширину и высоту в 2 px. Нулевая ширина означает, что подчеркивание будет видимым только при наведении.
  5. Устанавливаем для свойства transition значение background-size и скорость изменения 0,3 секунды.
  6. При наведении курсора на ссылку мы меняем ширину изображения на 100%. Таким образом текст становится полностью подчеркнутым, а кроме того создается анимация.
Использование изображений в качестве подчеркивания в CSS

Для стилизации подчеркивания в CSS также можно использовать изображения (в формате SVG или PNG). Ниже приведены примеры (на основе CodePen автор John D. Jameson).

Анимированное подчеркивание при наведении

Давайте теперь создадим анимированное подчеркивание для кнопок меню. Нам понадобится следующая разметка:

Вот общие стили для четырех примеров (специфические стили будут приведены ниже):

Мы удаляем стандартное значение text-decoration и добавляем границу (border) при помощи псевдоэлементов CSS. Используя свойство CSS transition , мы анимируем этот border.

Анимированное подчеркивание при наведении № 1

Анимированное подчеркивание при наведении № 2

Анимированное подчеркивание при наведении № 3

Анимированное подчеркивание при наведении № 4

Анимированное подчеркивание, созданное при помощи свойства box-shadow

Подчеркивание также можно создать при помощи свойства box-shadow , которое добавляет тень к HTML-элементу. При наведении тень может увеличиваться. Посмотрите на пример:

Здесь мы добавили к элементу <a> две тени:

  • inset меняет тень с внешней (outset) на внутреннюю
  • 0 -30px 0 rgba(50,85,127,0.5) : 0 &#8212; это смещение по горизонтали, -30px &#8212; смещение по вертикали, 0 &#8212; радиус размытия, а rgba(50,85,127,0.5) &#8212; полупрозрачная голубая тень.
  • 0 2px 0 rgba(50,85,127,0.5) : 0 &#8212; смещение по горизонтали, 2px &#8212; смещение по вертикали, 0 &#8212; радиус размытия.

Почитать больше о тенях можно здесь.

Подчеркивание «от руки», анимированное при наведении

Наконец, давайте создадим необычные подчеркивания, которые будут проявляться при наведении курсора. Первое будет напоминать подчеркивание от руки, а второе &#8212; выделение маркером от руки.

Подобные эффекты мы создадим при помощи масштабируемой векторной графики (SVG). У нас будет HTML-элемент для SVG и блок для текста со ссылками (выбирайте или . ink-svgline , или .link-svgmarker ).

Заменяем комментарий «Invisible SVG block» («Невидимый SVG-блок») на следующий код:

Вот правила CSS, позволяющие спрятать этот элемент:

А эти правила будут общими для обоих примеров:

Первый пример подчеркивания с использованием SVG:

Заменяем комментарий «First SVG example» следующим кодом (используйте любой свой текст, главное &#8212; не меняйте структуру классов):

Подчеркнуть ссылку, удалить подчеркивание, border в качестве подчеркивания примеры !

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

В общем погнали!

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

Подчеркивание ссылки по умолчанию

Мы сделаем отдельный класс чтобы увидеть это подчеркивание по умолчанию прямо на даннйо странице!

Следующим пунктом уберем подчеркивание у ссылки!

Убрать подчеркивание ссылки css

И добавим такой этот класс нашей ссылке

Результат удаления подчеркивания у ссылки через css

Чтобы это правило распространялось на все ссылки на сайте нужно написать просто без класса

При наведении на ссылку — убрать подчеркивание

Но мы хоти удалить подчеркивание не на всегда, а лишь тогда, когда мышка будет сверху ссылки! Как убрать подчеркивание при наведении на ссылку!

Давайте это сделаем! Нам понадобится псевдо класс :hover

Чтобы нам продемонстрировать убирание ссылки при наведении нам понадобится новая ссылка и новый класс

Результат удаления подчеркивания при наведении мышки:

При наведении на ссылку — добавить подчеркивание

Результат добавления ссылки при наведении мышки:

Бордюр в качестве подчеркивания ссылки

border-bottom: 1px solid red;

Как изменить цвет подчеркивания ссылки?

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

Далее добавляем цветную линию под ссылкой:

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

border-bottom: 1px solid red;

Результат подчеркивание ссылки другого цвета:

Убрать бордюр под ссылкой при наведении

border-bottom: 1px solid red;

Результат, как убрать подчеркивание свойства border:

Изменить цвет подчеркивания под ссылкой при наведении

Как переводится слово solid

Одно из значений слова «solid» — сплошной. Поэтому, линия подчеркивания будет сплошной.

Толщина линии подчеркивания ссылки сделаем в пикселях — 1px.

Цвет подчеркивания красный — red.

border-bottom: 1px solid red;

border-bottom: 1px solid black;

Результат изменения подчеркивания цвета при наведении

Пунктирное подчеркивание ссылки

Возьмем выше приведенный пример и заменим solid .

Цвет подчеркивания задаем в свойстве «border»

Как переводится dashed

Одно из значений слова «dashed» -пунктирный.

border-bottom: 1px dashed red;

Результат : пунктирное подчеркивание ссылки

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

Как сделать плавное подчеркивание ссылки!? Просто нужно написать соответствующие стили для плавного подчеркивание ссылки, либо же прямо здесь скопировать их!

Сделаем чтобы подчеркивание начиналось слева. При наведении, ссылка будет плавно подчеркиваться и подчеркивание будет начинаться слева. Пока курсор будет над ссылкой.

Как отключить подчеркивание ссылок в css

Как в CSS убрать подчеркивание ссылки

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

Навигация по статье:

Отключаем подчеркивание

Чтобы в CSS убрать подчеркивание ссылки нам нужно воспользоваться специальным CSS-свойством text-decoration со значением none, которое нужно прописать в файле стилей нашего сайта для ссылки.

Вот как это будет выглядеть на примере для ссылок размещенных в блоке с классом .link-blok:

Вместо .link-blok вам нужно указать селектор вашего блока (класс или индентификатор) внутри которого находится ссылка для которой нужно убрать подчёркивание.

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

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

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

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

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

Желаю вам успехов в оформлении вашего сайта! До встречи в следующих статьях!

Как убрать подчеркивание ссылок? CSS свойство text-decoration

Ссылки – неотъемлемая часть любой веб-страницы. Они могут быть как текстовыми, так и в виде кнопок. В этой статье будут рассмотрены только текстовые ссылки.

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

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

Создание ссылки

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

Вам будет интересно: Redirect: что это и как убрать из браузера?

Чтобы создать ссылку, нужно использовать парный тег «a», который не является блочным. Поэтому, чтобы размещать ссылки на отдельных строчках, необходимо заключать их в теги параграфа (p). Можно воспользоваться и альтернативным способом – задать свойство display: block для каждой ссылки.

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

Кроме этого, тег «a» имеет целый ряд атрибутов. Обязательным является атрибут href, без которого не будет осуществляться переход по ссылке. В нем указывается путь к странице или файлу, к которому будет вести наша ссылка.

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

Ссылка создана, теперь ее нужно стилизовать. Существует несколько способов убрать подчеркивание ссылки в CSS:

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

Совет: при стилизации веб-страницы отдавайте предпочтение внешним ссылкам.

Стилизация ссылки в CSS

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

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

Записываем селектор «a», в котором будет прописано свойство text-decoration: none;

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

Text-decoration содержит ряд других значений. С его помощью можно сделать и верхнее подчеркивание, однако это используется редко.

Чтобы убрать подчеркивание ссылки, в CSS документе введите следующий код:

Чтобы упростить код, можно использовать простой атрибут – style. В примере, не представлено полноценного дизайна всей странице, поэтому можно использовать и данный способ.

Главное — не расписывать такими способами всю HTML страницу. В таком коде можно очень легко запутаться.

Изменение наведенной ссылки в CSS

Допустим, вы захотели сделать так, чтобы в обычном состоянии ссылки подчеркивание осталось, а при наведении исчезло. Чтобы убрать или задать подчеркивание для ссылки при наведении, в CSS используется псевдокласс «:hover». Вот пример:

Стили можно применять не только к наведенной ссылке, но и к активированной или посещенной. Для этого нужно использовать псевдоклассы «:active» и «:visited».

Оформление ссылок

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

  • ссылки без подчёркивания;
  • декоративное подчёркивание;
  • выделение фоновым цветом;
  • рамки;
  • рисунок возле ссылки.

Далее указанные методы оформления ссылок рассматриваются более подробно.

Ссылки без подчёркивания

Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря 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 , в остальном стиль не поменяется.

Рисунки возле внешних ссылок

Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. =»http://»] <. >, как показано в примере 7.

Пример 7. Рисунок возле ссылки

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right . Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left .

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*=»//»] , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

Как изменить подчеркивание ссылок на веб-странице

Автор Глеб Захаров На чтение 4 мин. Просмотров 20 Опубликовано

Содержание

  1. Удалить подчеркивания ссылок или создать пунктирные или двойные подчеркнутые ссылки
  2. Удаление подчеркивания в текстовых ссылках
  3. Предупреждение об удалении подчеркиваний
  4. Не подчеркивайте не ссылки
  5. Измените подчеркивание на точки или тире
  6. Изменить цвет подчеркивания
  7. Двойное подчеркивание
  8. Не забывайте о ссылочных состояниях

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

Удаление подчеркивания в текстовых ссылках


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

Чтобы удалить подчеркивания из текстовых ссылок, вы будете использовать свойство text-художественное оформление CSS. Вот CSS, который вы бы написали для этого:

a {текстовое оформление: нет; }

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

Предупреждение об удалении подчеркиваний


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

Не подчеркивайте не ссылки


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

Измените подчеркивание на точки или тире


Если вы хотите, чтобы текстовая ссылка была подчеркнута, но изменила стиль этого подчеркивания по сравнению с внешним видом по умолчанию, который представляет собой строку “солдат”, вы также можете сделать это. Вместо этой сплошной линии вы можете использовать точки, чтобы подчеркнуть ваши ссылки. Для этого вы все равно удалите подчеркивание, но замените его на свойство стиля border-bottom:

 a {text-украшение: нет; граница снизу: пунктирная 1px; }

Так как вы удалили стандартное подчеркивание, отображается только пунктир.

Вы можете сделать то же самое, чтобы получить тире. Просто измените стиль границы снизу на пунктирную:

 a {text-украшение: нет; граница снизу: пунктирная 1px; }

Изменить цвет подчеркивания


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

 a {text-украшение: нет; нижний край: 1px сплошной красный; }

Двойное подчеркивание


Хитрость в использовании двойных подчеркиваний заключается в том, что вам нужно изменить ширину границы. Если вы создадите рамку шириной 1px, вы получите двойное подчеркивание, которое выглядит как одно подчеркивание.

 a {text-украшение: нет; граница снизу: 3px двойная; }

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

 a {border-bottom: 1px double; }

Не забывайте о ссылочных состояниях


Вы можете добавить стиль границы внизу для своих ссылок в различных состояниях, таких как: hover,: active или: visit. Это может создать приятный опыт в стиле “ролловер” для посетителей, когда вы используете этот псевдокласс “hover” Чтобы при наведении курсора на ссылку появилось второе пунктирное подчеркивание:

 a {text-украшение: нет; }
a: hover {border-bottom: 1px dotted; }

Оригинальная статья Дженнифер Крынин. Под редакцией Джереми Жирара

Как убрать подчеркивание на странице яндекс. Подчёркивание ссылок при наведении на них курсора мыши

По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам . Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline . Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.

Удаление подчеркивания ссылок

Подчеркнутый текст может сложнее читаться, чем обычный. Многие дизайнеры просто не уделяют этому должного внимания. Но можно полностью удалить подчеркивание. Для этого мы будем использовать свойство CSS text-decoration . Вот CSS-код , с помощью которого это можно сделать:

a { text-decoration: none; }

С помощью этой строки кода можно удалить CSS underline style всех ссылок.

Предостережение относительно удаления подчеркивания

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

Не подчеркивайте текст, не связанный со ссылкой

Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст (с помощью CSS underline color ) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание (вместо того, чтобы вывести его полужирным шрифтом или курсивом ), вы вводите пользователей сайта в заблуждение.

Измените сплошное подчеркивание точками или пунктиром

Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию (линия «solid « ), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom :

a { text-decoration: none; border-bottom:1px dotted; }

Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed :

a { text-decoration: none; border-bottom:1px dashed; }


Изменение цвета подчеркивания

Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:

a { text-decoration: none; border-bottom:1px solid red; }


Двойное подчеркивание

Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:

a { text-decoration: none; border-bottom:3px double; }


Также можно использовать подчеркивание по умолчанию, чтобы создать альтернативное двойное подчеркивание. Например, чтобы одна из линий была двойной:

a { border-bottom:1px double; }


Не забывайте о различных состояниях ссылок

Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline :

a { text-decoration: none; } a:hover { border-bottom:1px dotted; }


Перевод статьи «How to Change Link Underlines on a Webpage » был подготовлен дружной командой проекта .

Хорошо Плохо

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

  • ссылки без подчёркивания;
  • декоративное подчёркивание;
  • выделение фоновым цветом;
  • рамки;
  • рисунок возле ссылки.

Ссылки без подчёркивания

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

Пример 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).

Ссылки

Рис. 2. Изменение цвета фона при наведении на ссылку курсора

Рамка вокруг ссылки

В примере 6 показано, как изменять цвет рамки, используя свойство border . Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

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

Ссылки

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding . Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background .

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

A { border: 1px solid transparent; /* Прозрачная рамка вокруг ссылок */ } a:hover { border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */ }

Рисунки возле внешних ссылок

Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).

Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a {…} , как показано в примере 7.

Ссылки

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right . Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left .

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

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

Как вставить ссылку?

Перед изучением вопроса, как убрать подчеркивание в следует разобраться с установкой ссылки в тексте. Представить сайты безе переходных связок очень сложно. Ведь в таком случае каждая страница представляла бы собой длинную цепь, вмещавшую в себя весь объем текста, который сейчас можно найти аккуратно распределённым на сотнях страниц.

Чтобы связать какой-либо элемент с другой страницей, можно воспользоваться специальным тегом , внутри которого следует указать параметр ссылки href. Если необходимо перейти на какой-то другой сайт, то после этого атрибута следует полностью прописать адрес сайта, а если ссылка является внутренней, то достаточно воспользоваться лишь его частью, начав её с «/», как представлено в примере:

  • Моя страница

В зависимости от поставленных задач, внешний вид ссылки можно изменять. Так, можно выбрать цвет, стиль шрифта, его тип (жирный, курсив), а также провести коррекцию, убрав подчеркивание. Таким образом, встает вопрос, как убрать подчеркивание в ссылке HTML? Очень просто!

Ссылка без подчеркивания

Среди множества атрибутов тега присутствует свойство css-стиля text-decoration. По умолчанию этот параметр включён для ссылок, и, отключив его с помощью обозначения text-decoration:none , вы увидите, что получилась HTML-ссылка без подчеркивания. В данном примере ссылка будет иметь только выделение синим цветом, а подчёркивание будет убрано.

  • Ссылка без подчеркивания

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

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

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

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

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

Как убрать подчеркивание в Word: настройка форматирования

Подчеркивание возникает после копирования текста из других источников (файлов или веб-сайтов), в некоторых случаях программа выставляет его автоматически. Пример – гиперссылки. По умолчанию приложение, определив, что фрагмент является путём к внешнему ресурсу, перекрашивает его в синий цвет, делает подчёркивание и проставляет ссылку.

Если под словом находится линия, самый простой способ её удалить – изменить параметры начертания текста. Сделать это можно, используя инструмент вкладки «Главная» , который визуально представляется собой кнопку с буквой «Ч ». В англоязычной версии программы этой функции соответствует кнопка «U ».

Вот последовательность действий, которая приведёт к требуемому результату:

  • выделить текст;
  • на вкладке «Главная» сделать неактивной кнопку «Ч », нажав на неё мышкой.

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

Специальные виды подчеркивания

Встроенная опция проверки правильности написания и расстановки знаков препинания отмечает фрагменты с ошибками линиями разных цветов. Красная волнистая линия означает, что слово написано неверно (или оно не присутствует в словаре Word), зелёная волнистая линия – требуется корректировка знаков препинания.

Есть три способа, как убрать красные подчеркивания в Word.

  1. Проверить правильность написания слова и исправить его, если при наборе была допущена опечатка.
  2. Навести курсор на слово, нажать правую кнопку мышки и в контекстном меню выбрать один из вариантов, предлагаемых программой.
  3. Отказаться от исправления. Для этого также следует навести курсор мышки на слово, нажать правую кнопку и выбрать в меню «Пропустить» или «Добавить в словарь». Слово, включённое пользователем в словарь, впоследствии ошибкой считаться не будет.

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

А как убрать зеленое подчеркивание в Word? Ответ: используйте способы, описанные выше. Отличие состоит в том, что приложение обнаружило ошибку грамматики.

Настройки программы

Кардинальный способ избавиться от цветных волнистых линий – отключить автопроверку текста. Выполняется эта операции через окно настроек программы. В версии 2007 – щелчок мышкой по логотипу Office, в новых версиях – переход в меню «Файл». Далее необходимо на вкладке «Правописание» убрать отметки в полях «Скрыть ошибки».

Итак, теперь вопрос о том, как убрать подчеркивание в Word, перестанет тревожить пользователя. Автоматическое исправление отключено. Но есть и минус – искать ошибки в документе придётся вручную.

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

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

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

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

  • непосредственно к тегу ссылки в HTML назначить атрибут style , в котором прописать: text-decoration: none ;
  • назначить ссылке id и применить к нему аналогичные свойства;

  • чтобы убрать подчеркивание ссылок CSS для нескольких элементов, необходимо присвоить им класс атрибутом class и прописать такое же свойство, как и для одиночной ссылки.

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

  • a {text-decoration: none;}.

Подводные камни при работе в CSS со ссылками

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

Ссылки очень привередливы в плане управления ими через CSS. Например, интуитивно кажется, что если установить цвет текста для абзаца красным, то и ссылка в нем должна быть красной — но не тут то было. К каждой ссылке нужен «индивидуальный» подход, а если выражаться более технически точно — сначала в CSS мы должны указать либо id, либо class, либо селектор «a» в виде его местоположения в веб-документе, для которого мы хотим задать свойства. Если свойства прописывать просто для тега «a», то это определит базовые стили ссылок на странице, которые можно переназначить для отдельных элементов на странице с помощью CSS.

Убрать подчеркивание ссылок при наведении — просто, но не очевидно

Что мы имеем в виду, говоря о наведении на ссылку? С технической точки зрения, это является псевдоклассом селектора и определяет его состояние на данный момент. Разнообразие псевдоклассов и их функционал обширные настолько, что им можно выделить отдельную статью, а сейчас нас интересует лишь один псевдокласс — hover. Именно он отвечает за поведение ссылки (или любого другого HTML-тега) при наведении. Теперь, понимая структуру процесса обработки браузером вашего кода, можете использовать данный пример:

  • a: hover {text-decoration: none}.

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

Убрать подчеркивание у кнопки в html. Как изменить подчеркивание ссылок на веб-странице

28 февраля 2017

Как убрать подчеркивание в Word? Если вы задались таким вопросом, значит с вашим текстом что-то не так. Дело в том, что так программа указывает вам на какие-то несовершенства написанного в документе материала. Какие именно недостатки выискивать и что делать, если на самом деле с текстом все в порядке?

Как убрать красные подчеркивания в Word?

Это самый простой вопрос. Как убрать подчеркивание в Word красного цвета, знают все, кто работает с программой не первый день. Красный цвет в данном текстовом редакторе — самый распространенный маркер. Он указывает на то, что в подчеркнутом тексте находится какая-то ошибка. Точнее, не какая-нибудь, а одна из этих:

  • подчеркнутое слово отсутствует в словаре,
  • слово написано с ошибкой,
  • также красным Word подчеркивает повторения.

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

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

Есть два варианта, как можно справиться с подчеркиванием красного или зеленого цвета:

  1. Чтобы убрать такое подчеркивание, достаточно исправить ошибки.
  2. Также можно нажать на «Пропустить», чтобы программа проверки перестала «видеть» этот участок.

Видео по теме

Как убрать синие подчеркивания в Word?

Как убрать подчеркивание в Word синего цвета, знают уже не все. Такой цвет встретить можно не во всех версиях текстового редактора. Если текст перед вами подведен синей волнистой линией, в нём есть проблемы с форматированием.

Как и с прочими ошибками, эту можно убрать одним из двух способов:

  1. Исправить её. Если вы не понимаете, в чем ошибка, нажмите на проблемный участок правой кнопкой мыши.
  2. Как и прочие ошибки, эту тоже можно пропустить, нажав на соответствующую кнопку.


Как убрать подчеркивания ссылок в Word?

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

  1. Выделить текст, под которым нужно убрать подчеркивание, после чего нажать сочетание клавиш Ctrl+U.
  2. Также можно пойти более долгим путем: выделить текст, найти в верхнем поле программы во вкладке «Главная» букву «Ч», подчеркнутую снизу. После нажатия на нее линия под выделенным текстом пропадет.

Источник: fb.ru

Актуально

Разное
Разное

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

И как убрать это ненужное подчеркивание, я сейчас расскажу.

Как убрать подчеркивание у ссылок в HTML на CSS

В CSS существует свойство под названием «text-decoration » – именно с помощью него мы и будем убирать стандартное подчеркивание ссылок.

Вариант с отдельным CSS:

Hello, World!

Или с CSS, прописанным в HTML:

Hello, World!

В первом случае «. link » – это класс нужной вам ссылки, у которой необходимо убрать подчеркивание.

Как убрать подчеркивание у ссылок в HTML на jQuery

В jQuery существует метод «css », который позволяет работать со стилями элемента. Воспользуемся им и получим следующее:

Hello, World!

Где «.link » – идентификатор нужного элемента.

Обратите внимание , что если ни один из способов вам не помог – есть вероятность того, что стили элемента уже где-то определены.

Для этого в любом из вариантов добавьте «!important » через пробел, например:

Hello, World!

Это должно решить вашу проблему.

По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам . Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline . Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.

Удаление подчеркивания ссылок

Подчеркнутый текст может сложнее читаться, чем обычный. Многие дизайнеры просто не уделяют этому должного внимания. Но можно полностью удалить подчеркивание. Для этого мы будем использовать свойство CSS text-decoration . Вот CSS-код , с помощью которого это можно сделать:

a { text-decoration: none; }

С помощью этой строки кода можно удалить CSS underline style всех ссылок.

Предостережение относительно удаления подчеркивания

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

Не подчеркивайте текст, не связанный со ссылкой

Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст (с помощью CSS underline color ) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание (вместо того, чтобы вывести его полужирным шрифтом или курсивом ), вы вводите пользователей сайта в заблуждение.

Измените сплошное подчеркивание точками или пунктиром

Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию (линия «solid « ), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom :

a { text-decoration: none; border-bottom:1px dotted; }

Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed :

a { text-decoration: none; border-bottom:1px dashed; }


Изменение цвета подчеркивания

Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:

a { text-decoration: none; border-bottom:1px solid red; }


Двойное подчеркивание

Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:

a { text-decoration: none; border-bottom:3px double; }


Также можно использовать подчеркивание по умолчанию, чтобы создать альтернативное двойное подчеркивание. Например, чтобы одна из линий была двойной:

a { border-bottom:1px double; }


Не забывайте о различных состояниях ссылок

Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline :

a { text-decoration: none; } a:hover { border-bottom:1px dotted; }


Перевод статьи «How to Change Link Underlines on a Webpage » был подготовлен дружной командой проекта .

Хорошо Плохо

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

  • ссылки без подчёркивания;
  • декоративное подчёркивание;
  • выделение фоновым цветом;
  • рамки;
  • рисунок возле ссылки.

Ссылки без подчёркивания

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

Пример 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).

Ссылки

Рис. 2. Изменение цвета фона при наведении на ссылку курсора

Рамка вокруг ссылки

В примере 6 показано, как изменять цвет рамки, используя свойство border . Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

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

Ссылки

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding . Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background .

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

A { border: 1px solid transparent; /* Прозрачная рамка вокруг ссылок */ } a:hover { border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */ }

Рисунки возле внешних ссылок

Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).

Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a {…} , как показано в примере 7.

Ссылки

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right . Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left .

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

Как добавить пунктирное подчеркивание под HTML-текстом

Вопрос задан

Изменено 12 месяцев назад

Просмотрено 161k раз

Как подчеркивать html-текст, чтобы строка под текстом была пунктирной, а не стандартной? Предпочтительно, я хотел бы сделать это без использования отдельного файла CSS. Я новичок в html.

  • html
  • подчеркивание

4

Без CSS невозможно. Фактически, тег просто добавляет text-decoration:underline к тексту с помощью встроенного CSS браузера.

Вот что вы можете сделать:

 
<голова>

<тип стиля="текст/CSS">
ты {
    нижняя граница: 1px с точкой #000;
    текстовое оформление: нет;
}

5

Используйте следующие коды CSS…

 text-decoration:underline;
стиль оформления текста: пунктирный;

3

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

С CSS все просто.

HTML: 

 Я люблю сыр

CSS: 

 u.dotted{
  нижняя граница: 1px пунктир #999;
  текстовое оформление: нет;
}

Пример работы

Пример страницы 

 

<голова>
    <стиль>
        u. пунктир {
          нижняя граница: 1px пунктир #999;
          текстовое оформление: нет;
        }
    

<тело>
    Я люблю сыр

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

ПРИМЕЧАНИЕ. Пунктирная рамка/подчеркивание отображается по умолчанию в Firefox и Opera, но для IE8, Safari и Chrome требуется строка CSS:

 HTML

3

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

 text-decoration: underline;
стиль оформления текста: пунктирный;

Если вам нужно больше пространства между текстом и строкой, просто используйте

 положение подчеркивания текста: под;

Возможно, я немного опоздал, но просто используйте text-decoration: подчеркните пунктиром , это единственное свойство CSS, которое вы можете использовать везде.

Встроенный HTML 

 У меня есть пунктирное подчеркивание

Для пунктирного подчеркивания используйте text-decoration: underline dashed .

 У меня есть пунктирное подчеркивание

Как сказал Даршана Гунавардана, вы можете использовать text-underline-position: under , чтобы между текстом и строкой было больше места:

 У меня есть пунктирное подчеркивание

В отдельном файле CSS 

 u {
  оформление текста: подчеркивание пунктиром;
}

Переформатировал ответ @epascarello :

 u.dotted {
  нижняя граница: 1px пунктир #999;
  текстовое оформление: нет;
} 
 
Я люблю сыр

Вы можете использовать text-decoration свойства:

 оформление текста: подчеркивание;
    стиль оформления текста: пунктирный;
    строка оформления текста: подчеркивание;
    толщина оформления текста: 1px;

Вы можете использовать нижнюю границу с опцией с точками .

 нижняя граница: 1px с точками #807f80;

Вы можете попробовать этот метод:

  
Hello World!

Обратите внимание, что без text-underline-position: under; у вас по-прежнему будет пунктирное подчеркивание, но это свойство даст ему больше передышки.

Предполагается, что вы хотите встроить все в файл HTML, используя встроенные стили, а не использовать отдельный файл CSS или тег.

Без CSS это невозможно. Например, как элемент списка:

 
  •

    5

    Твой ответ

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Обязательно, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Семейство элементов оформления текста CSS (не только для подчеркивания ссылок)

    Когда вы захотите изучить ранее простые свойства CSS, вы можете быть удивлены их надежностью (а для некоторых слишком большой сложностью). Вот что случилось со мной с фичей text-decoration .

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

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

    Во-первых, давайте посмотрим на эти свойства:

    • text-decoration
    • строка оформления текста
    • стиль оформления текста
    • цвет оформления текста
    • текст-украшение-скип-чернила
    • позиция подчеркивания текста
    • смещение подчёркивания текста
    • ширина оформления текста и толщина оформления текста
    • выделение текста

    Не всегда эти функции полностью поддерживаются веб-браузерами. Устаревший Internet Explorer практически всегда отсутствует, но некоторые функции не поддерживаются даже современными веб-браузерами. Вот увидишь.

    text-decoration — основной ярлык (и главная проблема)

    Атрибут, который является ярлыком для трех перечисленных ниже функций в соответствии с последними спецификациями.

    text-decoration:

     <'text-decoration-line'> ||
<'стиль оформления текста'> ||
<'text-decoration-color'>

    Например:

     /* Подчеркнутый текст: */
оформление текста: подчеркивание;
/* Подчеркнутый пунктиром текст: */
оформление текста: подчеркивание пунктиром;
/* Ничего, потому что мы не определили text-decoration-line: */
оформление текста: пунктир;

    На этом этапе уместно отметить, что спецификация имеет один законченный уровень (хорошо известный CSS2) и в то же время два обновления находятся в стадии разработки — модуль оформления текста CSS уровня 3 и модуль оформления текста CSS уровня 4.

    И есть разница в стиле записи text-decoration , когда дело доходит до CSS2 и новых модулей. Первоначально это была общая функция, теперь это ярлык для большего количества функций.

    Это различие связано с реализацией в разных веб-браузерах. В то время как Firefox, Chrome и его подбраузеры принимают оформление текста «по-новому» как ярлык, Safari и Explorer понимают его «по-старому» как отдельную функцию.

    Итак, если мы хотим сделать подчеркнутую зеленым пунктиром ссылку иначе, чем обычно (но не правильно) с границей объекта, это не будет работать так:

     .сокращенно a {
  оформление текста: подчеркивание зеленым пунктиром;
}

    В проводнике мы ничего не можем с этим поделать (что не так уж и важно с уменьшением поддержки), но в Safari мы можем спасти ситуацию, упомянув отдельные функции:

     .individuals a {
  строка оформления текста: подчеркивание;
  стиль оформления текста: пунктирный;
  цвет оформления текста: зеленый;
}

    CodePen: cdpn.io/e/abzPKNB

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

    Рисунок: Матрица свойств оформления текста и возможные значения в соответствии с CSS Text Decoration Level 3.

    text-decoration-line – типы декоративных подчеркиваний

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

    Возможные значения:

     строка оформления текста: нет |
  [подчеркнуть || надчеркивание || линейный || мигать ]

    В Центральной Европе вы, вероятно, захотите часто использовать опцию подчеркивания. Значение мигания blink считается устаревшим, и современные веб-браузеры его не поддерживают. Слава Богу.

    Обозначение с блочными скобками и знаками логического оператора или ( || ), которое я взял из спецификации, говорит о возможности использования нескольких значений, например text-decoration-line: underline overline< эм>. Значение line-through задается в значениях HTML в стилях веб-браузеров по умолчанию , или .

    Эта функция полностью поддерживается, если значение не мигает.

    text-decoration-style — стиль подчеркивания

    Задает стиль оформления текста — например, одна линия, двойная линия, пунктирная линия или волнистая линия:

     text-decoration-style:
  твердый | двойной | пунктирная | пунктир | волнистый

    Используется только во время и только если некоторые из них определены text-decoration-line .

    Значение wavy отлично подходит, например, для выделения ошибок в словах.

    Эта функция полностью поддерживается современными веб-браузерами.

    text-decoration-color — цвет оформления

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

     text-decoration-color:

    может быть текущим цветом или любым цветом по вашему выбору.

    Это то, что могут делать все современные веб-браузеры.

    Давайте рассмотрим особенности оформления текста в последней спецификации CSS.

    Рисунок: последние функции CSS Text Decoration Level 4, которые не будут работать везде.

    text-decoration-skip-ink — для предотвращения пересечения строк

    Функция, которая указывает, будет ли линия оформления пунктирной, чтобы не было пересечений с кривыми текста.

     текст-украшение-скип-чернила: авто | нет

    В стилях по умолчанию современных веб-браузеров есть настройка text-decoration-skip-ink:auto , поэтому обычно нам не приходится иметь с этим дело. На всякий случай, если мы хотели бы отключить его. Но я понятия не имею, зачем нам это делать в обычных ситуациях.

    Первоначально он работал в спецификации как text-decoration-skip , но теперь функция удалена - она ​​будет разделена на дополнительные подфункции.

    Эта функция полностью поддерживается современными веб-браузерами.

    text-underline-position — позиция декоративной строки

    Где появляется декоративная линия:

     text-underline-position: auto |
  [ под || [ слева | right ] ]

    Значения left и right предназначены для азиатских языков, которые записаны вертикально вниз (китайский, японский, корейский,…)

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

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

    Эта функция не поддерживается Safari.

    text-underline-offset – смещение оформления

    Определяет смещение линии оформления от исходного положения:

     text-underline-offset: auto |

    Действует по-разному в соответствии с text-underline-position . Когда дело доходит до underline движение идет вниз, а с overline движение идет вверх.

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

    Эта функция поддерживается Safari и Firefox, но не Chrome.

    text-decoration-width & text-decoration-thickness — ширина линии оформления

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

     text-decoration-width: auto | <ширина>;
толщина оформления текста: авто | <ширина>;

    While:

    • text-decoration-width является стандартным в соответствии с модулем оформления текста CSS уровня 4, но на самом деле ни один браузер не может этого сделать.
    • text-decoration-thickness не соответствует стандарту. Однако он поддерживается Safari и Firefox, но не Chrome. Если вы хотите попробовать это, рекомендуется снова в em , чтобы адаптироваться к размеру текста.

    text-emphasis – положение ударения (не интересно для западных стран)

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

    Эти функции принадлежат здесь: text-emphasis-style , text-emphasis-color , text-emphasis-position и text-emphasis .

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

    • оттенков (свойство text-shadow )
    • подчеркивание (функция текстовая декоративная строка )
    • надстроек (функция text-decoration-line )
    • сам текст
    • знаки выделения (функция выделение текста )
    • сквозная строка (функция text-decoration-line )

    По этому списку браузер будет решать конфликты в изображении кривых текста и его оформления.

    В финальной версии CodePen мы суммируем все функции и их поддержку в веб-браузерах в обзорной таблице:

    CodePen: cdpn.io/e/zYxMKJB

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

    Подчеркивание ссылки — Адриан Роселли

    Обновлено , первоначально опубликовано ; 13 комментариев

    TL;DR : В целом, я рекомендую подчеркивать ссылки в основном тексте. При отсутствии лучшего стиля, подходящего для конкретного сайта, это путь.

    Обзор

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

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

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

    Честное предупреждение, это длинный пост. Я разбил его на шесть разделов:

    1. Доступность
    2. Удобство использования
    3. Академические исследования
    4. Другие сайты
    5. Варианты оформления
    6. Рекомендация
    7. Обновления

    1. Доступность

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

    Руководство по обеспечению доступности веб-контента (WCAG) 2.0 (основа для Раздела 508 в США, некоторые международные правила и правила ADA, которые Министерство юстиции использовало в недавних судебных процессах) содержит некоторые рекомендации по этому поводу.

    Критерий успеха (SC) 1.4.1: Использование цвета:

    Цвет не используется как единственное визуальное средство передачи информации, указания на действие, побуждения к ответу или выделения визуального элемента. (Уровень А)

    Критерий успеха (SC) 1.4.1

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

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

    Все судебные иски урегулированы на уровне AA (и уровне A в расширении), и большинство руководств, основанных на WCAG 2.0, используют уровень AA в качестве базового уровня поддержки.

    Рекомендации

    Удобно, что есть рекомендации по выполнению SC 1.4.1, и они содержат примеры.

    G182: обеспечение наличия дополнительных визуальных подсказок, когда для передачи информации используются различия в цвете текста:
    • Форматирование по умолчанию для ссылок на странице включает их представление в цвете, отличном от цвета остального текста на странице, с их подчеркиванием, чтобы ссылки можно было идентифицировать даже без цветового зрения.
    • В статье, сравнивающей использование похожих элементов в разных языках разметки, используется цветной текст для обозначения элементов каждого языка. Элементы из первого языка разметки обозначаются СИНИМ жирным шрифтом. Элементы из второго представлены как КРАСНЫЙ, выделенный курсивом текст.
    • Новостной сайт содержит ссылки на статьи, размещенные на его сайте. В некоторых случаях появляется дополнительная информация, такая как раздел, в котором появляется статья, время публикации статьи, связанное местоположение или указание на то, что она сопровождается живым видео. Ссылки на статьи выделены другим цветом, чем дополнительная информация, но ссылки не подчеркнуты, и каждая ссылка представлена ​​более крупным шрифтом, чем остальная информация, чтобы пользователи, у которых есть проблемы с различением цветов, могли лучше идентифицировать ссылки. без труда.
    • Короткие новости иногда содержат предложения, которые также являются ссылками на дополнительную информацию. Эти предложения печатаются в цвете и используют шрифт без засечек, а остальная часть абзаца — черный шрифт Times-Roman.
    Г182

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

    G183: использование коэффициента контрастности 3:1 с окружающим текстом и предоставление дополнительных визуальных подсказок о фокусе для ссылок или элементов управления, где для их идентификации используется только цвет:

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

    Хотя использование этой техники достаточно для соответствия этим критериям успеха, это не предпочтительная техника для различения текста ссылки. Это связано с тем, что ссылки, которые используют только относительную яркость цвета, могут быть неочевидны для людей с слепотой к черному/белому цвету. Если в блоке текста не большое количество ссылок, 9Для ссылок рекомендуется подчеркивание 0043 [курсив добавлен].

    Г183

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

    2. Удобство использования

    Подчеркивания неоднократно оценивались организациями, которым было интересно, как они (или их отсутствие) влияют на использование и понимание ссылок. Я вытащил некоторые фрагменты из более известных источников, которые охватывают более десяти лет.

    Руководство по визуализации ссылок

    Якоб Нильсен довольно ясно выразился в своем заявлении 2004 года:

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

    Рекомендации по визуализации ссылок

    Он расширяет это почти сразу:

    • Чтобы максимизировать воспринимаемую доступность кликабельности, цвет и подчеркивание текста ссылки. Пользователям не нужно угадывать или пролистывать страницу, чтобы узнать, где они могут щелкнуть.
    • Если текст ссылки раскрашен, подчеркивать его не всегда обязательно.
      • Есть два основных случая, когда вы можете безопасно отказаться от подчеркивания: меню навигации и другие списки ссылок. Однако это верно только тогда, когда дизайн страницы ясно указывает на функцию области. (Помните: ваш дизайн может быть не так очевиден для внешних пользователей, как для членов вашей команды.) Пользователи обычно понимают левостороннюю панель навигации со списком ссылок на цветном фоне, предполагая, что она напоминает области навигации на большинстве другие сайты.
      • Исключение: подчеркивание необходимо, если вы используете цвета ссылок, такие как красный или зеленый, которые вызывают проблемы у пользователей с распространенными формами дальтонизма.
      • Исключение: подчеркнутые ссылки важны для пользователей с плохим зрением, поэтому сохраняйте подчеркивание, если доступность является приоритетом для вашего сайта или у вас много пользователей с плохим зрением.
    Руководство по визуализации ссылок

    Форматирование ссылок для удобства использования

    В статье 2010 года от Jamie Appleseed определены три основных правила использования ссылок, одно из которых — подчеркивание ссылок.

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

    Форматирование ссылок для удобства использования

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

    Beyond Blue Links: сделать кликабельные элементы узнаваемыми

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

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

    […]

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

    […] Основная проблема со многими плоскими дизайнами заключается в том, что один из самых сильных показателей кликабельности — трехмерность — удаляется из уравнения. Текстуры, на которые пользователи долгое время полагались в качестве подсказок, удалены, что затрудняет пользователям определение того, что кликабельно, а что нет.

    Beyond Blue Links: создание узнаваемых кликабельных элементов

    3. Академические исследования

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

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

    Сравнение методов визуализации маркеров ссылок — изменения в поведении при чтении

    В статье 2003 года «Сравнение методов визуализации маркеров ссылок — изменения в поведении при чтении », написанной Хартмутом Обендорфом и Харальдом Вайнрайхом, рассматривается влияние подчеркивания ссылок на понимание прочитанного.

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

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

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

    Сравнение методов читаемости ссылок

    Карин Грейвс провела опрос, который лег в основу ее статьи 2004 года «Сравнение методов читаемости ссылок ». Цель состояла в том, чтобы определить, как личные предпочтения влияют на то, как люди хотели бы видеть ссылки визуально.

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

    Интересно, что общее время чтения образцов статей улучшилось, когда ссылки были выделены. Второе лучшее время чтения было у образцов с подчеркнутыми ссылками. Читатели не сообщали о понимании, а только о времени чтения; четко подчеркнутые ссылки их не тормозили (а вроде бы наоборот). В противном случае результаты оказались неубедительными для рекомендации идеального стиля ссылок.

    Когнитивная нагрузка при чтении гипертекста: обзор

    В статье 2005 года Когнитивная нагрузка при чтении гипертекста: обзор Дайаны ДеСтефано и Джо-Энн Лефевр авторы проводят метаанализ многих предыдущих статей с 1999 по 2004 год (ни одной из двух, которые я обсуждал, в ней нет).

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

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

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

    4. Другие сайты

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

    Я уже писал о том, как Google убрал подчеркивания и почему это не бесплатный способ сделать это на ваших собственных сайтах. Причина двоякая: все знают, как работают результаты поиска Google (которые, по сути, представляют собой навигацию), и Google по-прежнему не выполняет требование цветового контраста согласно WCAG (коэффициент контрастности между ссылками и окружающим текстом составляет всего 1,64:1).

    Amazon — еще один распространенный пример. Это сайт, который в первую очередь ориентирован на навигацию, где подчеркивание неуместно. Места, где есть повествовательный текст, не содержат гиперссылок в содержании, хотя ссылки, следующие непосредственно за этим повествованием (например, Просмотреть все редакционные обзоры ), имеют подчеркивание. Тот факт, что эти ссылки не проходят проверку на контрастность, становится спорным из-за подчеркивания.

    Другие интернет-магазины находятся в той же лодке, что и Amazon (Wal-Mart, Target, Apple и т. д.). Ссылки в основном используются для навигации с небольшим повествовательным содержанием, которое, когда оно появляется, почти всегда лишено ссылок. Эти сайты понимают, что вы не отправляете людей со страницы, если только она не находится в контролируемых дополнительных или перекрестных продажах, и эти ссылки по-прежнему являются навигацией.

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

    Википедия, однако, является хорошим примером сайта, наполненного описательным контентом, который сам по себе полон ссылок. К сожалению, ссылки не проходят проверку на контрастность, поэтому сайт также является примером того, как сделать это неправильно. Интересно, что собственные правила доступности Википедии, кажется, содержат всю информацию, необходимую для того, чтобы знать, что они нарушают WCAG 2.0 AA (они хотят ориентироваться на AAA), но мне, вероятно, придется зарегистрировать ошибку, чтобы соединить эти точки.

    Обратите внимание, что многие контент-платформы переходят к решению проблемы контраста ссылок: Drupal даже кодифицирует подчеркивания в ядро, а WordPress обсуждает это (в автономном режиме).

    5. Варианты оформления

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

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

    Ссылки: концепции дизайна, устарели с октября 2021 г.

    Более свежий отрывок:

    По умолчанию гиперссылки подчеркнуты. Это подчеркивание важно, потому что оно помогает удовлетворить требования доступности. Пользователи с цветовой слепотой используют подчеркивание, чтобы отличить гиперссылки от другого текста. Если вы отключите подчеркивание, вам следует подумать о добавлении какого-либо другого типа различий в форматировании, чтобы отличать гиперссылки от другого текста, например FontWeight или FontStyle.

    Разработка приложений для Windows: подчеркивание гиперссылки от 4 октября 2021 г.

    Подчеркивание — не единственный вариант. Мы уже определили, что нужно использовать больше, чем просто цвет, и что ссылки должны быть видны без взаимодействия. Давайте рассмотрим варианты.

    Подчеркивание

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

    Хотя в некоторых случаях отсечение нисходящих элементов по-прежнему является проблемой, подчеркивание по умолчанию в браузерах стало светлее, а в случае современных браузеров Safari подчеркивание вообще не пересекается с нисходящими элементами.

    Некоторые высказывают опасение, что подчеркивает конфликт с символами подчеркивания, что может быть проблемой в примерах кода, адресах электронной почты и URL-адресах. До сих пор я не нашел комбинации шрифта и подчеркивания, где это так. Подчеркивания визуально отличаются от подчеркиваний (обычно они располагаются на разных базовых линиях).

    Изюминка

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

    • Многие сайты используют цвета фона для оформления блоков встроенного кода или других фрагментов содержимого.
    • Поскольку текст является плавным содержимым, закругленные границы и отступы могут выглядеть нарушенными, когда ссылки охватывают строки (хотя есть некоторые хаки и еще не очень хорошо поддерживаемые коробка-украшение-разрыв ).
    • Режим высокой контрастности Windows отбрасывает или радикально меняет любые цвета фона, поэтому обязательно протестируйте и, возможно, определите свой собственный (используя @media screen и (-ms-high-contrast: active) {} , который я рассматриваю подробнее подробно здесь был обновлен в соответствии с веб-стандартами и немного отличается в Windows 11, как я обсуждаю в более позднем посте на WCHM).

    Граница

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

    Нижние границы также дают вам больше возможностей для выбора цвета (он не обязательно должен совпадать с цветом текста) и стиля линий (пунктирная, пунктирная, двойная, толще, тоньше). Однако есть предостережение с пунктирными границами, они появились как шаблон, указывающий на то, что что-то было аббревиатурой или аббревиатурой. Хотя наилучшей практикой является расширение аббревиатуры или акронима в тексте, стиль может сохраняться для и при использовании в дикой природе. Пока <аббревиатура> теперь устарел, он все еще появляется в устаревшем контенте.

    Эффекты градиента

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

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

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

    Иконки

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

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

    Стили шрифтов

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

    Я предостерегаю от этого, так как большинство этих стилей подразумевают нечто иное, чем гиперссылка. Использование более крупного или мелкого текста может нарушить ритм (в частности, высоту строки/интерлиньяж) страницы, из-за чего она будет выглядеть бессвязной или разорванной. Использование другого шрифта может выглядеть неработающим для пользователей, хотя даже если у вас идеальное стилистическое соответствие (то есть визуально отличное) с остальным контентом, это зависит от того, сможет ли браузер загрузить и отобразить шрифт.

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

    Руководящие принципы WCAG говорят нам, что мы не должны полагаться только на цвет, чтобы различать ссылки и даже явно предлагать подчеркивания.

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

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

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

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

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

    Другие предложения

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

    7. Обновления

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

    12 января 2017 г.

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

    CSSWG сейчас обсуждает классные новые (для 2018+) способы оформления подчеркиваний. https://drafts.csswg.org/css-text-decor-4/ Изменить толщину, немного сдвинуть вверх/вниз и т. д.

    — Джен Симмонс (@jensimmons) 12 января 2017 г.

    4 января 2017 г.

    Новые параметры стиля подчеркивания из предыдущего обновления теперь поддерживаются в некоторых браузерах (WebKit), в частности в 9.0021 text-decoration-skip-ink . В результате я удалил технику фона/тени, которую я использовал на этом сайте, чтобы визуально представить подчеркивания, которые не сталкиваются с нижними элементами. Если вы используете Firefox, Edge или IE на этом этапе, вы увидите, что подчеркивание ссылок переходит в нисходящие элементы. Safari уже много лет предотвращает столкновение подчеркиваний.

    В сообщении Улучшение читаемости текста для пользователей с дислексией с пропуском подчеркивания автор утверждает, что предотвращение пересечения подчеркиваний с нижними элементами улучшает читаемость для людей с дислексией. Аргумент сосредоточен на text-decoration-skip-ink , хотя это не единственный способ добиться эффекта.

    Хорошей новостью является то, что этот новый контроль над стилем заставляет людей переосмыслить свое избегание подчеркивания. Сообщение Доступные ссылки Re:visited приводит доводы в пользу подчеркивания более светлым цветом с использованием text-decoration-color (но убедитесь, что контраст все еще достаточен). Аналогично, Как использовать подчеркнутый текст для улучшения взаимодействия с пользователем предлагает несколько советов по цвету, стилю, спискам и даже рекомендациям по ссылкам в приложениях.

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

    19 февраля 2020 г.

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

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

    11 ноября 2020 г.

    Команда тем WordPress обновила свои рекомендации относительно того, что она будет принимать от тем, и я одобряю:

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

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

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

    10 декабря 2021 г.

    В блоге Mozilla есть статья, посвященная истории оформления гиперссылок, с вопросом Почему гиперссылки синие? Для контекста этого поста вот фрагмент подчеркивания:

    Еще одна интересная вещь в Windows 1.0 [с 1985 года], которая до сих пор появляется на современных веб-сайтах, — это подчеркнутая гиперссылка. Это первый пример использования подчеркивания для обозначения гиперссылки, который мне удалось найти.

    Почему гиперссылки синие?

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

    WWW был первым браузером, созданным Тимом Бернерсом-Ли во время работы в CERN. Сначала он был черно-белым, с подчеркиванием под гиперссылками, которые до сих пор используются на современных веб-сайтах и ​​являются отличным решением для дальтоников.

    Почему гиперссылки синие?

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

    16 декабря 2021 г.

    Я сделал ряд встроенных правок, вычеркнув текст, который больше не применим, добавив примечания для обновлений.

    16 января 2022 г.

    Есть много новых индикаторов наведения и фокуса. Анимированные фоны и фальшивые подчеркивания не обязательно новые (у меня они были на этом сайте, когда я писал этот пост в 2016 году). Иногда они возвращаются, или люди на какое-то время забывают о них. Если вы решите использовать один из этих методов, не забудьте сделать свою ссылку очевидной 9.0233 до любое взаимодействие — в идеале с подчеркиванием.

    Следующий встроенный пример (прямая ссылка) анимированного фона и фальшивого подчеркивания адаптирован из версии, которая не имела визуальных возможностей до взаимодействия. Я модифицировал его, чтобы обеспечить такую ​​возможность со стилизованными подчеркиваниями. Я также добавил некоторую поддержку режима высокой контрастности Windows и тех, кто предпочитает меньше движения. Все мои заметки находятся в CSS.

    См. перо Дружественные к WCAG анимированные индикаторы ссылок от Адриана Роселли (@aardrian) на КодПене.

    13 апреля 2022 г.

    Ян Ллойд (Ллойди) провел викторину в своем посте Ну, раскрась нас врасплох — этот SC может быть хитрым клиентом . Он знакомит читателей с серией примеров ссылок в контексте и просит их определить, какие из них не работают. 1.4.1 Использование цвета. Это касается даже неаварийного люка G183, о котором я говорил выше.

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

    К сожалению, ваш браузер не поддерживает встроенное видео, но не волнуйтесь, вы можете его скачать. Квази-расшифровка: вступление начинается с фразы «Бесплатное производство», за которой следуют дешевые и безвкусные анимированные фразы «а11й поп-викторина», «WCAGWTF?», «Это зависит!», «Это лучший практика», и «Адриан не одобряет».

    Теги

    доступность, css, дизайн, стандарты, удобство использования, UX, WCAG

    Другие сообщения

    Предыдущий пост: Выступление на абстракциях

    Более свежий пост: Мы вознаграждаем не те вещи

    УСС | Свойство text-decoration-style — GeeksforGeeks

    Просмотреть обсуждение

    Улучшить статью

    Сохранить статью

    • Последнее обновление: 30 июня 2022 г.

  • Прочитать
  • Обсудить

    • Просмотреть обсуждение

    Улучшить статью

    Сохранить статью

    Свойство text-decoration-style в CSS используется для установки text-decoration элемента. Свойство text-decoration представляет собой комбинацию свойств text-decoration-line, text-decoration-style и text-decoration-color.

    Синтаксис: 

     стиль оформления текста: сплошной | двойной | пунктирный | пунктирный | волнистый | начальный |
наследовать;

    Значения свойств:

    • solid: Рисует сплошную одиночную линию. Это значение свойства text-decoration-style по умолчанию.

    Style: 

     text-decoration-style: сплошной;

    Example:  

    html

    < html >

         < head >

             < title >

                 CSS text-decoration-style property

             title >

            

            

             < стиль >

    9 0     0022 p {

                     text-decoration-style: сплошной;

    }

    . GFG1 {

    Текстовый декорация-линия: подставка;

    }

    .GFG2 {

    Текстовая декорация: линия линейки;

    }

    .GFG3 {

    Текстовый-декорация-линия: Overline;

                 }

             style >

         head >

          

         < body >

             < h2 style="color: green">

                 GeeksforGeeks

             h2 >

              

             < b >text-decoration-style: solid

    22

    < P Class = "GFG1">

    Эта линия имеет твердую нижнюю часть.

    P >

    < P класс = "GFG2"> 9005

    .

    P >

    < P класс = "GFG3">

    .

             p >

         body >

    html >                   

    Вывод:

     

    • double: Рисует двойные сплошные линии.

    Style: 

     text-decoration-style: double;

    Example:  

    html

    < html >

         < head >

             < title >

                 CSS text-decoration-style property

             title >

              

            

             < стиль >

                 2

    2

                     text-decoration-style: double;

    }

    . GFG1 {

    Текстовый декорация-линия: подставка;

    }

    .GFG2 {

    Текстовая декорация: линия линейки;

    }

    .GFG3 {

    Текстовый-декорация-линия: Overline;

                 }

             style >

         head >

          

         < body >

             < h2 style="color: green">

                 GeeksforGeeks

             h2 >

              

             < b >text-decoration-style: double

    22

    < P Class = "GFG1">

    Эта линия имеет двойную нижнюю часть.

    P >

    < P класс = "GFG2"> 9005

    .

    P >

    < P класс = "GFG3">

    .

    P >

    Body >

    11111222222912

    11211211121112111211121112112112112112912112912122122912 2 >

    > . 0021 >                  

    Вывод:

     

    • пунктирные линии4: 900

    Стиль: 

     стиль оформления текста: пунктирный;

    Example:  

    html

    < html >

         < head >

             < title >

                 CSS text-decoration-style property

             title >

     

            

             < стиль >

    9 0     9 0 

      p {

                     text-decoration-style: dotted;

    }

    . GFG1 {

    Текстовый декорация-линия: подставка;

    }

    .GFG2 {

    Текстовая декорация: линия линейки;

    }

    .GFG3 {

    Текстовый-декорация-линия: Overline;

                 }

             style >

         head >

          

         < body >

             < h2 style="color: green">

                 GeeksforGeeks

             h2 >

              

             < b >text-decoration-style: b 2 2 20022

    < P Class = "GFG1">

    Эта линия имеет пунктирную подключение.

    P >

    < P Class = "GFG2"> 9005

    .

    P >

    < P класс = "GFG3">

    .

    P >

    Body >

    11111222222912

    11211211121112111211121112112112112112912112912122122912 2 >

    > . 0021 >                  

    Вывод:

     

    • пунктирные линии4.

    Стиль: 

     стиль оформления текста: пунктир;

    Example:  

    html

    < html >

         < head >

             < title >

                 CSS text-decoration-style property

             title >

     

            

             < стиль >

    9 0     9 0 

      p {

                     text-decoration-style: пунктир;

    }

    . GFG1 {

    Текстовый декорация-линия: подставка;

    }

    .GFG2 {

    Текстовая декорация: линия линейки;

    }

    .GFG3 {

    Текстовый-декорация-линия: Overline;

                 }

             style >

         head >

          

         < body >

             < h2 style="color: green">

                 GeeksforGeeks

             h2 >

              

             < b >text-decoration-style: 9 021 b 2 9 00212 20022

    < P Class = "gfg1">

    Эта линия имеет пунктирную подключение.

    P >

    < P Class = "GFG2"> 9005

    .

    P >

    < P класс = "GFG3">

    .

    P >

    Body >

    11111222222912

    11211211121112111211121112112112112112912112912122122912 2 >

    > .0021 >                  

    Вывод:

     

    • волнистые линии4: 900

    Стиль: 

     стиль оформления текста: волнистый;

    Example:  

    html

    < html >

         < head >

             < title >

                 CSS text-decoration-style property

             title >

     

            

             < стиль >

    9 0     9 0 

      p {

                     text-decoration-style: волнистый;

    }

    . GFG1 {

    Текстовый декорация-линия: подставка;

    }

    .GFG2 {

    Текстовая декорация: линия линейки;

    }

    .GFG3 {

    Текстовый-декорация-линия: Overline;

                 }

             style >

         head >

          

         < body >

             < h2 style="color: green">

                 GeeksforGeeks

             h2 >

              

             < b >text-decoration-style: b 2 2 20022

    < P Class = "gfg1">

    Эта линия имеет подключение.

    P >

    < P Class = "GFG2"> 9005

    12121212121212121212121212121212121212121212121211.RAVER.

    P >

    < P класс = "GFG3"> 9005

    2921 2921 2921 2921 2921 2921 2921 21 2921 2921 921 .

             p >

         body >

    html >                   

    Вывод:

     

    • начальное значение: Устанавливает для свойства text-decoration-style значение по умолчанию.

    Стиль: 

     стиль оформления текста: инициал;

    Example:  

    html

    < html >

         < head >

             < title >

                 CSS text-decoration-style property

             title >

              

            

             > 9 стиль

    20018              p {

                     text-decoration-style: initial;

    }

    . GFG1 {

    Текстовый декорация-линия: подставка;

    }

    .GFG2 {

    text-decoration-line: сквозной;

    }

    .GFG3 {

    Текстовый-декорация-линия: Overline;

                 }

             style >

         head >

          

         < body >

             < h2 style="color: green">

                 GeeksforGeeks

             h2 >

              

             < b >текст-декорация0022 B >

    < P Class = "GFG1">

    9 9001.

             p >

             < p class = "GFG2">

                 This line has a default line-through.

    P >

    < P Class = "GFG3"> 9005

    .

    с >

    Body >

    1111111122 2 >

    111111111111122 2 >

    11111111122 гг. 0022 >                 

    Вывод:

     

    • свойство унаследовано от родительского элемента4

    Стиль: 

     стиль оформления текста: наследовать;

    Пример:

    HTML

    < HTML> 99918> < HTML> 2121212121212121212212 < >

    < >

    < >

    .0005

         < head >

             < title >

                 CSS text-decoration-style property

             title >

             

            

             <

    2 стиль0021 >

                 p {

                            text-decoration-style: inherit;

    }

    . Мейн {

    }

    .GFG1 {

    text-decoration-line: подчеркивание;

    }

    .GFG2 {

    Текстовая декорация: линия линейки;

    }

    .GFG3 {

    Текстовый-декорация-линия: Overline;

                 }

             style >

         head >

          

         < body >

             < h2 style="color: green">

                 GeeksforGeeks

    5  0021     H2  >  
     
       
     
        <  B  > ТЕКС-DECORATY-STYLE: inherit.              <   div   class = "main">  
     
                     <  1"1 1G>  p  p 
    22 
     
                        Эта строка имеет унаследованный стиль подчеркивания.  
     
          P  >  
     
        <  P  .  
     
                       p   >  
     
                     <   p   class = "GFG3">  
     
                        Эта строка имеет надчеркнутый стиль.   
      
                          p    >   
      
                      div    >   
      
                  body    >   
      
          HTML  >

    Выход:

    Поддерживаемые браузеры: .

  • Firefox 36.0
  • Opera 44.0
  • Safari 12.1

    • Рекомендуемые статьи

    Страница :

    Как сделать ссылку с подчеркиванием при наведении?...anycodings

    Вопросы : Как сделать ссылку с пунктирным подчеркиванием при наведении

    2

    2

    У меня есть ссылка Мои статьи

    и мои css .link-статьи { text-decoration: anycodings_css underline; цвет синий; }

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

    Как это сделать?

    Админы

    HTMLCSS

    Всего ответов 9

    30

    Ответы 1 : из Как сделать ссылку с точечным подчеркиванием при наведении курсора

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

     .link-статьи
{
    нижняя граница: сплошной синий 1px;
    текстовое оформление: нет;
}
.link-статьи: hover
{
    цвет нижней границы: красный;
}

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

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

    Подход без границ:

    Как отмечает @Pacerier в комментариях, anycodings_css здесь представляет собой альтернативную стратегию, использующую псевдоклассы anycodings_css и содержимое CSS anycodings_css (JSFiddle):

     .link-articles
{
    положение: родственник;
}
. link-статьи[href="#articles"]:после
{
    контент: «Мои статьи»;
}
.link-статьи: после
{
    красный цвет;
    слева: 0;
    положение: абсолютное;
    сверху: 0;
}

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

    0

    Ссылка для ответа

    мРахман

    4

    Ответы 2 : Как сделать пунктирную ссылку при наведении курсора

    Использовать границу-дно:

     a:hover. link-articles {граница-дно: 1px пунктирная красная; украшение текста: нет;}

    Посмотреть демонстрацию

    0

    Ссылка для ответа

    раджа

    6

    Ответы 3 : of Как сделать ссылку с пунктирным подчеркиванием при наведении

    Просто сделайте:

     a:hover {
  стиль оформления текста: пунктирный
}

    https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

    0

    Ссылка для ответа

    раджа

    3

    Ответы 4 : of Как сделать пунктирную ссылку при наведении курсора

    Используйте рамку:

     . link-articles { text-decoration: none; нижняя граница: синяя сплошная 1px; }
.link-articles:hover {граница-нижняя: красная точка 1px; }

    0

    Ссылка для ответа

    мираж

    4

    Ответы 5 : Как сделать ссылку с пунктирным подчеркиванием при наведении
     .link-articles { text-decoration: none; нижняя граница: 1px пунктирная синяя; }
.link-articles:hover { text-decoration: none; нижняя граница: 1 пиксель с красной точкой; }

    0

    Ссылка для ответа

    джидам

    1

    Ответы 6 : of Как сделать ссылку с пунктирным подчеркиванием при наведении

    Попробуйте это:

     . link-articles{ text-decoration: none; нижняя граница: 1px с точками; цвет границы: синий; }
 .link-статьи: hover { цвет границы: красный; }

    ДЕМО

    0

    Ссылка для ответа

    джидам

    4

    Ответы 7 : of Как сделать ссылку с пунктирным подчеркиванием при наведении

    Показать нижнюю границу при наведении:

     a.link-articles {
    текстовое оформление: нет;
    нижняя граница: 1px пунктирная синяя;
}
a.link-статьи: hover {
    нижняя граница: 1 пиксель с красной точкой;
}

    0

    Ссылка для ответа

    мираж

    3

    Ответы 8 : из Как сделать ссылку с пунктирным подчеркиванием при наведении

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

     .link-статьи { ... }
.link-статьи: наведите { ... }

    И вы можете использовать свойство border-bottom anycodings_css вместо text-decoration для стилей Anycodings_css с точками, пунктиром и шириной.

    0

    Ссылка для ответа

    джидам

    5

    Ответы 9 : Как сделать пунктирную ссылку при наведении

    Вы можете использовать свойство CSS3 anycodings_css text-decoration-color, но anycodings_css, к сожалению, свойство text-decoration-color anycodings_css не поддерживается ни одним из основных браузеров anycodings_css.

    Firefox поддерживает альтернативу, свойство anycodings_css -moz-text-decoration-color.

    Ссылка: anycodings_css http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

    Поддержка браузера: anycodings_css http://caniuse.com/#search=text-decoration-color

    JSFiddle (работает не во всех браузерах)

    Таким образом, лучший способ сделать это по-прежнему для anycodings_css использовать свойство css border-bottom в качестве трюка с anycodings_css.

    0

    Ссылка для ответа

    джидам

    Оформление текста CSS

    Свойство text-decoration является сокращенным свойством для настройки text-decoration-line , text-decoration-style и text-decoration-color в одном объявлении.

    При использовании сокращенного свойства text-decoration пропущенные значения устанавливаются в исходные значения.

    Синтаксис

    text-decoration: <текстовая-декорация-строка> || <стиль оформления текста> || <текст-декорация-цвет>

    Возможные значения

    строка оформления текста
    Указывает, какие линейные декорации, если таковые имеются, добавляются к элементу. Допустимы следующие значения:
    нет
    Не создает и не запрещает оформление текста.
    подчеркивание
    Каждая строка текста подчеркнута.
    сверху
    Над каждой строкой текста есть строка.
    проходной
    Каждая строка текста имеет линию посередине.
    мигает
    Текст мигает (переключается между видимым и невидимым). Обратите внимание, что это значение устарело в пользу анимации CSS.
    стиль оформления текста
    Стиль оформления текста.
    сплошной
    Сплошная линия.
    волнистый
    Волнистая линия.
    с точками
    Пунктирная линия.
    пунктир
    Строка, состоящая из дефисов.
    двойной
    Двойная сплошная линия.
    цвет оформления текста
    Цвет оформления текста. Может быть любым допустимым цветом .

    Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

    начальный
    Представляет значение, указанное как начальное значение свойства.
    унаследовать
    Представляет вычисленное значение свойства родительского элемента.
    снято с охраны
    Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

    Основная информация о свойствах

    Исходное значение
    Текущий цвет
    Применяется к
    Все элементы
    Унаследовано?
    №
    СМИ
    Визуальный
    Анимируемый
    Да, но только как цвет (т. е. только свойство text-decoration-color сокращения является анимируемым). (см. пример)

    Пример кода

    Базовый CSS

    Вот пример простого объявления. Объявление состоит из свойства и его значений для различных полных свойств.

    text-decoration: подчеркивание оранжевыми точками;

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

    оформление текста: подчеркивание;

    Фактически, это единственный синтаксис, распознаваемый CSS1 и CSS2 (поскольку они не поддерживают полноформатные свойства).

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

    :ссылка { оранжевый цвет; оформление текста: подчеркивание; /* Используется браузерами CSS1 и CSS2 */ оформление текста: подчеркивание зеленым пунктиром; /* Используется браузерами CSS3 */ }

    В браузерах CSS1 и CSS2 текст ссылки и подчеркивание будут оранжевыми. Его подчеркивание будет сплошным (это единственный вариант до CSS3).

    В браузерах CSS3 текст ссылки будет оранжевым, а подчеркивание зеленым. Его подчеркивание также будет пунктирным.

    Рабочий пример в документе HTML

    Пример <стиль> ч2 { шрифт: 100 3em без засечек; цвет: золото; текст-оформление: обводка волнистая желто-зеленая; }

    Пример надчеркивания

    Попробуйте

    Официальные спецификации

    • Модуль оформления текста CSS уровня 3 (кандидатная рекомендация W3C от 1 августа 2013 г.)
    • CSS Уровень 2.1 (Рекомендация W3C от 7 июня 2011 г.)
    • CSS Уровень 1 (Рекомендация W3C от 17 декабря 1996 г.)

    Поддержка браузера

    В следующей таблице, предоставленной Caniuse.com, показан уровень поддержки этой функции браузерами.

    Префиксы поставщиков

    Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства, специфичные для браузера, с помощью таких расширений, как 9.0021 -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т.

    No related posts.

    Автор записи

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *