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

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

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

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

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

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

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

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

a {
  text-decoration: none;
}

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

<a href='google.com'>Google</a>

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

.link {
	text-decoration: none;
}

#link {
	text-decoration: none;
}

.some-block a {
	text-decoration: none;
}

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

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

.link:hover,
.link:focus {
	text-decoration: underline;
color: red;
}

.link:focus {
	outline: none; //убираем обводку
color: red;
}

.link:focus {
	outline-color: brown; //меняем цвет обводки
color: red;
}

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

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

По умолчанию, браузеры применяют определенные наборы стилей 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 убрать подчеркивание ссылки

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

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

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

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

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

.link-blok a{ text-decoration:none; }

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

a{ text-decoration:none; }

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

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

.link-blok a:hover{ text-decoration:none; }

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

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

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

Css убрать подчеркивание. Как убрать синие подчеркивания в Word? Изменение стиля отображения ссылки в тексте

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

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

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

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

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

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

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

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

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

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

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

Язык оформления веб-страницы 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, а вот для того чтобы работать с подчеркиванием ссылок в полной мере, этой статьи достаточно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Хорошо Плохо

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

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

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

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

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

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

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

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

Видео по теме

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

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

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

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

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

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

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

Актуально

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

Как сделать и убрать подчеркивание ссылок в 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, описал идеальное подчеркивание как:

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

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

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

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

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

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

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

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

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

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

a { text-decoration: none; border-bottom: #EA215A 0.125em solid; }

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

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

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

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

a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; }

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

С переходом браузера Microsoft Edge на Chromium мы, наконец, получим кросс-браузерную поддержку для свойства text-decoration-style, которое предлагает варианты: solid (по умолчанию), double, dotted, dashed и wavy. В сочетании эти новые свойства открывают целый ряд возможностей.

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

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

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

Автор: Ollie Williams

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

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

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

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

CSS3. Основы

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

Css как убрать подчеркивание ссылок : Радиосхема.ру

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

Убрать подчёркивание у текстовых ссылок.

Решение

Используйте свойство text-decoration со значением none для селектора A .

Описание

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 1. Ссылка, у которой отсутствует подчёркивание

В этой статье мы расскажем о том, как убрать стандартное нижнее подчеркивание у ссылок на HTML -странице.

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

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

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

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

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

И так, самое простое.
Это убрать подчеркивание в css, или же, если вы пишите стили в прямо код html или php, то вам надо следующее (это убирает подчеркивание полностью):

html

css
.ваш id или class{text-decoration: none;}

html

php
mf_id; ?>">Удалить

- это пример ссылки встроенной в код
- образец кода php "?action=delete&main_form_id== $record->mf_id; ?>"

В общем, убирается подчеркивание в php, так же как и в html.

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

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

Но вам надо убрать подчеркивание при наведении на нее:

css
.ваш id или class a:hover{text-decoration: none;}

- a:hover этим вы обозначаете какой стиль использовать при наведении курсора на элемент.

А теперь ссылка не подчеркнута

Но вы хотите выделить ее при наведении курсора.

изначально css код ссылки должен быть такой:

html

css
.ваш id или class{text-decoration: none;}

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

css
.ваш id или class a:hover{text-decoration: underline;}

- a:hover этим вы обозначаете какой стиль использовать при наведении курсора на элемент.

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

CSS-ссылок для стилизации

С помощью CSS ссылки можно стилизовать по-разному.

Ссылки для стилизации

Ссылки могут быть стилизованы с любым свойством CSS (например, цвет , семейство шрифтов , фон и др.).

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

Четыре состояния ссылок:

• a: link — нормальная, непосещаемая ссылка
• a: посещено — ссылка, которую посетил пользователь
• a: hover — ссылка, когда пользователь наводит на нее курсор
• a: active — ссылка в момент нажатия

Пример

/ * посетил ссылка * /
a: посетил {
цвет: зеленый;
}

/ * наведение указателя мыши на ссылку * /
a: hover {
color: hotpink;
}

/ * выбранная ссылка * /
a: активная {
цвет синий;
}

При настройке стиля для нескольких состояний ссылки существуют некоторые правила порядка:

• a: hover ДОЛЖЕН идти после ссылки: и после: visit
• a: active ДОЛЖЕН быть после a: hover

Оформление текста

Свойство text-decoration в основном используется для удаления подчеркивания в ссылках:

Пример

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

a: hover {
text-decoration: underline;
}

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

Цвет фона

Свойство background-color можно использовать для указания цвета фона для ссылок:

Пример

a: посещено {
background-color: cyan;
}

a: hover {
background-color: lightgreen;
}

a: active {
background-color: hotpink;
}

Кнопки связи

Этот пример демонстрирует более сложный пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде блоков / кнопок:

Пример

a: hover, a: active {
background-color: red;
}

Другие примеры

Пример

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

a.two: link {color: # ff0000;}
a.two: посещено {color: # 0000ff;}
a.two: hover {font-size: 150%;}

a.three: link {color: # ff0000;}
a.three: visit {color: # 0000ff;}
a.three: hover {background: # 66ff66;}

четыре: ссылка {color: # ff0000;}
четыре: посетили {color: # 0000ff;}
a.four: hover {font-family: monospace;}

a.five: link {color: # ff0000; text-decoration: none;}
a.пять: посетили {color: # 0000ff; text-decoration: none;}
a.five: hover {text-decoration: underline;}

Пример

Другой пример создания полей / кнопок ссылок:

a: hover, a: active {
цвет фона: зеленый;
цвет: белый;
}

Пример

Этот пример демонстрирует различные типы курсоров (может быть полезно для ссылок):

auto

crosshair

default

e-resize

help

перемещение

n-resize

ne-resize

nw-resize

указатель

progress

s-resize

se-resize

sw-resize

text

w-resize

подождите

Проверьте себя упражнениями!

Как удалить подчеркивание для тега привязки с помощью CSS?

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

Синтаксис:

 украшение текста: нет; 

Пример 1: В этом примере для свойства text-decoration устанавливается значение none.

Выход :

Пример 2: Используйте свойство hover для удаления подчеркивания при наведении курсора мыши на часть привязки.

Вывод:
Перед перемещением мыши:

После перемещения мыши:

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

В веб-дизайне каждые детали имеют значение - включая ваши ссылки.

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

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

a: ссылка - когда пользователь не посещал, не зависал или не нажимал на ссылку

a: посетил - после того, как пользователь перешел по ссылке

a: hover - когда пользователь наводит указатель мыши на ссылку

a: активный - когда пользователь переходит по ссылке

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

Чтобы удалить подчеркивание из ссылок, вы можете использовать свойство CSS text-decoration . Ниже мы рассмотрим, как определить это свойство, чтобы полностью удалить подчеркивание со ссылок на вашем HTML-сайте или сайте Bootstrap.

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

1. Добавьте HTML-код в раздел своей веб-страницы.
2. Определите четыре псевдокласса ссылок с помощью свойства text-decoration в разделе.
3. Убедитесь, что ссылки: и: посещены предшествуют: hover, а: active идут последними. Это важно для каскадирования таблицы стилей.
4. Установите для каждого свойства значение «нет».

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

Вот код CSS:

 
 
 a: ссылка {украшение текста: нет; } 
 
 a: посетил {text-decoration: none; } 
 
 a: hover {украшение текста: нет; } 
 
 a: активный {text-decoration: none; } 
  

Здесь важен порядок - сначала должны идти a: link и a: loaded , затем a: hover , затем a: active .

Вот HTML:

 
 
 
   Это ссылка  , которая появляется внутри абзаца. 
 

  

Вот результат:

См. Перо «Удаление подчеркивания из ссылки с помощью CSS 1» Кристины Перриконе (@hubspot) на CodePen.

Также можно переключить подчеркивание, чтобы оно отображалось только при наведении курсора и нажатии.Сделайте это с помощью правила text-decoration: underline; вот так:

См. Перо «Удаление подчеркивания из ссылки с помощью CSS 2» Кристины Перриконе (@hubspot) на CodePen.

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

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

По умолчанию в Bootstrap ссылки показывают подчеркивание только тогда, когда они находятся в состоянии hover или active .Это означает, что когда посетитель наводит курсор на ссылку или нажимает на нее, он будет отображать подчеркивание. В противном случае подчеркивание не будет отображаться в ссылках, даже если они были посещены. Кроме того, ссылки, определенные классом кнопки Bootstrap, никогда не имеют подчеркивания.

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

Вот код CSS:

 
 
 a: hover {украшение текста: нет; } 
 
 a: активный {text-decoration: none; } 
  

Вот HTML:

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

 
  Ссылка  
  

Вот результат:

См. Перо Удаление подчеркивания из ссылки с помощью CSS - Bootstrap от Кристины Перриконе (@hubspot) на CodePen.

Стилизация ссылок с помощью CSS

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

Примечание редактора: этот пост был первоначально опубликован в июле 2020 года и был обновлен для полноты.

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

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил 11 лет, 2 мес назад

Просмотрено 1,2 млн раз

Я пытаюсь сделать так, чтобы ссылка отображалась белым без подчеркивания.Цвет текста отображается правильно как белый, но синее подчеркивание упорно сохраняется. Я пробовал text-decoration: none; Оформление текста и : нет! Важно; в CSS, чтобы удалить подчеркивание ссылки. Ни то, ни другое не сработало.

  .boxhead .otherPage {
  цвет: #FFFFFF;
  текстовое оформление: нет;
}  

  

  

    
 Текущая страница 
      Другая страница  
  
  

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

10.5,377 золотых знаков4444 серебряных знака7171 бронзовый знак

задан 7 мая '10 в 18: 292010-05-07 18:29

19.4k3434 золотых знака9191 серебряный знак136136 бронзовых знаков

Вы не применяете text-decoration: none; к якорю (.boxhead a ), но к элементу пролета (. boxhead ).

Попробуйте это:

  .boxhead a {
    цвет: #FFFFFF;
    текстовое оформление: нет;
}
  

  a: наведите указатель мыши, a: посетил, a: ссылка, a: активен
{
    текстовое оформление: нет;
}
  

  .classname a {
    цвет: #FFFFFF;
    текстовое оформление: нет;
}
  

  a: hover, a: visit, a: link, a: active {

    текст-украшение: нет! важно;

    -webkit-box-shadow: нет! важно;
    тень коробки: нет! важно;
}
  

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

  

    

        
 Текущая страница 
          Другая страница  
    
  

  a, a: link, a: visit, a: active, a: hover {border: 0! Important;}
  

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

  a {
    цвет: неустановленный;
    текст-украшение: не установлено;
  }
  

цвет-украшения-текста: прозрачный;
 

  граница: 0;
  

  .boxhead h3 a {text-decoration: none;}
  

  .boxhead a {text-decoration: none! Important;}
  

  a {text-decoration: none! Important;}
  

  a: -webkit-any-link {
текст-оформление: подчеркивание;
  

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

  

  lbmmr1.Attributes.Add ("style", "text-decoration: none;")