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

Содержание

text-decoration | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+4.0+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

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

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду
исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
line-through
Создает перечеркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчеркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано
по умолчанию.
inherit
Значение наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
   a { 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:hover { 
    text-decoration: underline; /* Добавляем подчеркивание 
                                   при наведении курсора мыши на ссылку */
   }
  </style> 
 </head> 
 <body>
  <p><a href="1.html">Стратегическое нападение</a></p>
 </body>
</html>

Объектная модель

[window.]document.getElementById(«elementID»).style.textDecoration

[window.]document.getElementById(«elementID»).style.textDecorationBlink

[window.]document.getElementById(«elementID»).style.textDecorationLineThrough

[window.]document.getElementById(«elementID»).style.textDecorationNone

[window.]document.getElementById(«elementID»).style.textDecorationOverLine

[window.]document.getElementById(«elementID»).style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

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

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

«Практическая типография» на 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;
}

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;
}

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

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

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

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

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

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

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

.link-blok a{

text-decoration:none;

}

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

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

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

a{
text-decoration:none;
}

a{

text-decoration:none;

}

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

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

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

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

.link-blok a:hover{

text-decoration:none;

}

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

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

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

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

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

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

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

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

span:hover { color: red; }

Ссылки

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


a:link { color: #0000ff; }

a:visited { color: #ff00ff; }

a:hover { color: #00ccff; }

a:active { color: #ff0000; }

Попробовать »

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

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      a { text-decoration: none; } 
      a:hover { text-decoration: underline; }  
    </style>
  </head>

  <body>
    <p><b><a href="#">обычная ссылка</a></b></p>
  </body>
</html>

Попробовать »

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div p:first-child { color: green; }
      div p:last-child { color: blue; }  
    </style>
  </head>

  <body>
  
    <div>
      <p>Первый дочерний абзац элемента div, он будет отображаться зеленого цвета.</p>
	  
	  <p>Второй дочерний абзац элемента div, он будет отображаться черного цвета,
	  поскольку никаких правил для него не задано.</p>
	  
	  <p>Третий дочерний абзац элемента div, он же является последним дочерним абзацем.
	  Цвет текста будет синим.</p>
    </div>
	
  </body>
</html>

Попробовать »

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

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

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

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

Убираем различные линии

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

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

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

2. Заходите в раздел «Главная
» и обратите внимание на пункт «Шрифт
».

3. Нажимайте на кнопку «Ч

».

4. Установите курсор после крайнего символа в документе (откуда начнете дальше писать) и посмотрите, стоит ли использование этого форматирования для последующего текста (выделена ли кнопка «Ч

»). Если да, снимите выделение и можно писать нормально.

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

Первый – отдельно просмотреть все исправления и согласиться/отклонить их. Делается следующим образом:

  • Кликните правой кнопкой мыши по отдельному слову (или любому слову в подчеркнутом словосочетании), под которым есть подчеркивание, после, выберите один из пунктов исправления.
  • Если вы считаете, что варианты исправления являются некорректными или программа по ошибке считает слово неправильным, просто нажмите «Добавить в словарь
    » или «Пропустить
    ».

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

1. Нажимайте на значок «Word
» или клавишу «Файл
» в верхнем левом углу (в зависимости от используемой версии программы).

2. Выбирайте пункт «Параметры
».

3. Кликайте на «Правописание
».

4. Убирайте галочки с пунктов, указанных на скрине.

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

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

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

В редакторе Word есть несколько способов подчеркивания текста. О них мы расскажем ниже.

Сделать полоску под надписью можно так:

  1. Выделите фрагмент.
  2. На главной панели меню найдите букву «Ч» с чёрточкой под ней. Или нажмите Ctrl+U. Избавиться от линии можно этим же сочетанием клавиш.
  3. Чтобы печатать уже с полосками, кликните на значок «Ч», напишите что-то, и снова кликните на «Ч».

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

  1. Выделите фрагмент.
  2. Нажмите маленькую стрелочку рядом с буквой «Ч».
  3. В выпавшем списке выберите расцветку и тип: двойная линия, штриховая, толстая, волнистая.

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

  1. Через раздел «Таблицы» (или Вставка — Таблицы, если у вас Word 2007) добавьте сетку.
  2. Напишите в ней пару слов.
  3. Кликните по рамке правой кнопкой мыши.
  4. «Границы и заливка».
  5. Откроются параметры. Справа будет область, в которой есть настройки видимости границ. Оставьте только нижнюю линию. Она останется на месте, даже если вы удалите текст.
  6. В этом же меню выберите тип и толщину полоски.

Можно сделать проще:

  1. После добавления сетки вверху окна появится раздел «Работа с таблицами». В нём перейдите во вкладку «Конструктор».
  2. Нажмите стрелку рядом с «Границы».
  3. Оставьте активной только опцию «Нижняя граница».

Такие полоски нужны при работе с HTML-документами. Этот приём подходит для создания полей ввода и веб-форм.

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

  1. Выделите текст.
  2. Кликните на чёрную стрелочку рядом с буквой «Ч».
  3. Пункт «Другие».
  4. В поле «Подчёркивание» выберите «Только слово».

Подчёркивание пробелов

Иногда нужно, чтобы линии находились под пробелами. Например, если вы готовите к печати документ, в котором должно быть место для ввода имени, фамилии или других данных. Для этого подойдут таблицы (взаимодействие с ними описано выше). Но есть и другие способы. Вот как сделать подчёркивание в Word без слов:

  1. Самый простой метод — нажмите Shift+[-] (дефис; без скобок). Появится линия. Это не часть оформления, а символ. К нему применимы все настройки шрифта.
  2. Чтобы изменить цвет полоски , найдите на панели меню кнопку с пиктограммой в виде буквы «А». Нажмите на стрелочку рядом с ней — откроется палитра.

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

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

  1. Нажмите клавишу «TAB». Она находится над кнопкой Caps Look. Курсор Word сдвинется.
  2. Лучше активировать отображение скрытых символов, чтобы видеть знаки табуляции, а не только набор слов. Для этого кликните на панели инструментов на иконку, похожую на букву «П» (кнопка называется «Абзац»). Или нажмите Ctrl+Shift+* (звёздочка). Табуляция в Word выглядит как стрелочка, указывающая вправо.
  3. Выделите её.
  4. Нажмите Ctrl+U.

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

Границы страниц

Если в Word ввести три звёздочки или три дефиса подряд, они могут стать горизонтальной линией (иногда для этого надо нажать Enter). Это автозамена превращает их в границу страницы . Чтобы создать определённый вид такой линии, надо сделать так:

  • Введите три знака равенства (=), чтобы создать двойную полосу.
  • Три звёздочки (*) — пунктирную.
  • Три дефиса (-) — простую.
  • Три нижних пробела (_) — жирную.

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

Вот как убрать подобную линию:

  1. Поставьте курсор Word в начало строки с полоской.
  2. Нажмите Delete.

Если этот способ не поможет, лучше сделать так:

  1. Раздел «Разметка страницы». Он находится в строке меню наверху окна.
  2. Кнопка «Границы страниц».
  3. В поле «Тип» задайте параметр «Нет». Горизонтальная линия пропадёт.

Красное, зелёное и синее подчёркивание — проверка орфографии

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

  • Красная. Неправильно написано слово, или его нет в базе данных Office. Красным цветом также обозначаются повторы.
  • Зелёная. Ошибки с грамматикой, стилистикой, пунктуацией. Лишние скобки. Несогласованный текст.
  • Синяя. Несоответствие формата.

Обычно эта функция приносит пользу. Но если вы правильно всё написали, то внезапно появившиеся волнистые линии будут раздражать и мешать. Как убрать подчёркивание в Word, если оно поставлено автоматически при проверке орфографии:

  1. Кликните правой кнопкой мыши на фрагмент, под которым появилась волнистая линия.
  2. Чтобы избавиться от неё, выберите пункт «Пропустить».
  3. Чтобы Word запомнил выбранное слово и записал его в свой словарь, нажмите «Добавить».

Если вы хотите совсем отключить проверку, откройте настройки:

  1. Перейдите в меню Сервис — Правописание (в Word 2007 для этого надо нажать на логотип Office в левом верхнем углу и в выпавшем списке выбрать «Параметры»).
  2. Уберите галочку в «Автоматически проверять орфографию» или отметьте «Скрыть ошибки только в этом документе». Автопроверка перестанет вам докучать. Но искать опечатки будет сложнее.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Hello, World!

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

Hello, World!

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

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

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

Hello, World!

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

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

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

Hello, World!

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

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

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

Зачем подчеркивают ссылки?

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

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

Вот так выглядели первые интернет-сайты:

Гиперссылки сразу выделяются на фоне окружающего текста.

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

Выделение ссылок

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

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

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

Изменение стиля гиперссылки

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

Список значений, которые может принимать это свойство:

  • underline – нижнее подчеркивание;
  • overline – верхнее подчеркивание, линия проходит над текстом;
  • line-through – зачеркивание, линия проходит посередине строки;
  • none – отсутствие оформления.

По умолчанию браузеры применяют к гиперссылкам инструкцию text-decoration: underline. Очевидно, что нас интересует значение none. Оно позволяет обнулить ранее примененные стили, а также сбросить оформление по умолчанию.

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

a {    text-decoration: none;  }

Поддержка браузерами

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

css — удаление упрямого подчеркивания из ссылки

css — удаление упрямого подчеркивания из ссылки — qaru

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

Спросил

Просмотрено
1.2м раза

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

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

  

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

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

daaawx

2,14822 золотых знака1212 серебряных знаков1313 бронзовых знаков

Создан 07 мая ’10 в 18: 292010-05-07 18:29

dmrdmr

1,949 22 золотых знака9191 серебряный знак135135 бронзовых знаков

2

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

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

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

Создан 07 мая 2010, 18:50.

Давор Лючич

26.1k77 золотых знаков5959 серебряных знаков7373 бронзовых знака

9

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

Например:

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

См. W3.org для получения дополнительной информации о псевдоклассах действий пользователя: hover,: active и: focus.

Создан 07 мая ’10 в 18: 352010-05-07 18:35

Дж.Йелтон

32.7k2525 золотых знаков119119 серебряных знаков184184 бронзовых знака

2

text-decoration: none! Important следует удалить .. Вы уверены, что не прячется border-bottom: 1px solid ? (Проследить вычисленный стиль в Firebug / F12 в IE)

Гийс Овервлит

2,51433 золотых знака2525 серебряных знаков3535 бронзовых знаков

Создан 07 мая ’10 в 18: 352010-05-07 18:35

Алекс К.Алекс К.

159k2929 золотых знаков244244 серебряных знака266266 бронзовых знаков

1

Просто добавьте этот атрибут в свой тег привязки

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

Пример:

Или используйте метод CSS.

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

Идрис

9128 золотых знаков99 серебряных знаков2626 бронзовых знаков

Создан 11 дек.

Нагараджан С. Р. Нагараджан С. Р.

1,18211 золотых знаков1717 серебряных знаков2929 бронзовых знаков

0

Иногда вы видите тень блока, а не подчеркивание текста.

Попробуйте это (используя любые подходящие селекторы CSS):

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

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

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

Создан 11 мар.

Jeffmjackjeffmjack

41244 серебряных знака1111 бронзовых знаков

2

Вы пропустили text-decoration: none для тега привязки .Итак, код должен быть следующим.

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

    

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

Дополнительные стандартные свойства для оформления текста

Создан 19 янв.

Сантош ХалсеСантош Халсе

9,27033 золотых знака3232 серебряных знака3535 бронзовых знаков

0

Как правило, если ваше «подчеркивание» не того же цвета, что и ваш текст [и ‘color:’ не переопределяется в строке], это не происходит от «text-decoration:» Оно должно быть «border-bottom: «

Не забудьте также снять границу с ваших псевдоклассов!

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

Этот фрагмент предполагает, что он находится на якоре, соответственно измените его оболочку… и используйте специфичность вместо «! important» после того, как определите основную причину.

Создан 07 мая ’10 в 20: 302010-05-07 20:30

1

Не видя страницы, строить догадки сложно.

Но мне кажется, что у вас может быть border-bottom: 1px сплошной синий; применяется.Возможно добавить border: none; . text-decoration: none! Important верен, возможно, у вас есть другой стиль, который все еще отменяет этот CSS.

Вот где использование панели инструментов веб-разработчика Firefox — это круто, вы можете отредактировать CSS прямо здесь и посмотреть, работает ли что-то, по крайней мере, для Firefox. Это под CSS> Изменить CSS .

Создан 07 мая ’10 в 18: 442010-05-07 18:44

искусство

30.1k1616 золотых знаков6565 серебряных знаков117117 бронзовых знаков

0

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

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

Это удалит подчеркивание КАЖДОЙ ССЫЛКИ на вашей странице!

Создан 30 июн.

Ярз-Техъярц-тек

28511 золотой знак66 серебряных знаков1818 бронзовых знаков

1

Если text-decoration: none или border: 0 не работает, попробуйте применить встроенный стиль в свой html.

Создан 12 июн.

DekeDeke

3,77722 золотых знака3535 серебряных знаков5252 бронзовых знака

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

Создан 25 ноя.

Itzharitzhar

11.4k66 золотых знаков4949 серебряных знаков5757 бронзовых знаков

Просто используйте недвижимость

  граница: 0;

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

Создан 22 сен.

Вы использовали text-decoration none в неправильном селекторе.Вам нужно проверить, какой ярлык вам нужен для украшения.

Вы можете использовать этот код

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

ИЛИ

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

ИЛИ

  a {text-decoration: none! Important;}

Создан 22 июн.

Ни один из ответов не помог мне.В моем случае стояла стандартная

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

в моем коде. Как правило, независимо от того, какая это ссылка, цвет текста становится синим, а ссылка остается неизменной.

Итак, я добавил код в конце заголовка, например:

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

и проблем больше нет.

Создан 12 июл.

NeoNeo

70211 золотой знак77 серебряных знаков2121 бронзовый знак

Вот пример для asp.net webforms Элемент управления LinkButton:

Код позади:

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

Создан 08 мар.

Джош Ятс, 1980, Джош Йейтс, 1980

3,11922 золотых знака3333 серебряных знака5353 бронзовых знака

Поместите следующий HTML-код перед
тег:

Создан 26 июн.

qarly_blueqarly_blue

187 серебряных знаков55 бронзовых знаков

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

    .

    Создан 10 июл.

    mwilcoxmwilcox

    3,7772020 серебряных знаков2020 бронзовых знаков

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

    Как хакер поменял цвет на прозрачный:

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

    Создан 07 апр.

    BenBen

    1,

    13 серебряных знаков1919 бронзовых знаков

    набор текстовых украшений: нет; для якорного тега.

    Пример HTML.

      <тело>

    Пример CSS:

      .nav-tabs li a {
  текстовое оформление: нет;
}

    Создан 04 июля ’20 в 18: 032020-07-04 18:03

    Лорд Лорд

    2,1981010 серебряных знаков1616 бронзовых знаков

    Очень активный вопрос .Заработайте 10 репутации, чтобы ответить на этот вопрос. Требование репутации помогает защитить этот вопрос от спама и отсутствия ответов.

    по умолчанию

    Stack Overflow лучше всего работает с включенным JavaScript

    Ваша конфиденциальность

    Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

    Принимать все файлы cookie

    Настроить параметры

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

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

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

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

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

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

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

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

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

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

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

    1. Добавьте свой HTML-код в раздел своей веб-страницы.
    2. Определите четыре псевдокласса ссылок с помощью свойства text-decoration в разделе.
    3. Убедитесь, что ссылки: link и: visit идут до: 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» от Джейми (@websitejamie) на CodePen.

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

    См. Ручка «Удаление подчеркивания из ссылки с помощью CSS 2» от Джейми (@websitejamie) на CodePen.

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

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

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

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

    Вот код CSS:

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

    Вот HTML:

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

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

    См. Перо Удаление подчеркивания из ссылки с помощью CSS — Bootstrap от Джейми (@websitejamie) на CodePen.

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

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

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

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

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

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

    Синтаксис: 

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

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

    < html >

    <

    0

    титул >

    текст и оформление собственности

    титул >

    стиль >

    #GFG {

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

    }

    стиль >

    головка >

    < корпус стиль стиль = "выравнивание текста: по центру;" >

    < h2 стиль = «цвет: зеленый»; >

    GeeksForGeeks

    h2 >

    < h4 > Исходная ссылка > Исходная ссылка >

    < a href = "#" > Ссылка 1 a >

    < br >

    < h4 > удалено Подчеркнутый h4 >

    < a = "GFG" href = "#" 900 14 > Ссылка 2 a >

    корпус >

    html >

    Выход

    Выход

    :

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

    < html >

    <

    0

    титул >

    текст и оформление собственности

    титул >

    style >

    a: ссылка {

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

    }

    a: наведение {

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

    }

    стиль >

    головка >

    < корпус стиль стиль = "выравнивание текста: по центру;" >

    < h2 стиль = «цвет: зеленый»; >

    GeeksforGeeks

    h2 >

    < a id G = "" "" href = "#" > GeeksforGeeks Anchor Part a >

    body >

    html html >

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

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

    Как удалить подчеркивание в гиперссылках, использующих FrontPage 2003

    Версия данной статьи для Microsoft FrontPage 2002: 293172.

    Версия данной статьи для Microsoft FrontPage 2000: 240972.

    В ЭТОЙ ЗАДАЧЕ

    Сводка

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

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

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

    Есть два способа удалить подчеркивание в отдельной гиперссылке:

    Перейти к началу страницы

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

    Вы можете удалить подчеркивание со всех гиперссылок на странице, добавив на страницу раздел <СТИЛЬ>.

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

    1. Откройте страницу, которую вы хотите изменить.

    2. Щелкните вкладку Код .

    3. Поместите следующий HTML-код перед тегом:

    4. Щелкните вкладку Дизайн .

      Ваши гиперссылки больше не содержат подчеркивания.

    Перейти к началу страницы

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

    Обновлено: 30 декабря 2019 г., компания Computer Hope

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

    Примечание

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

    Примечание

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

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

    Чтобы все ссылки на вашей веб-странице не имели подчеркивания, настройте стиль text-decoration для элемента a (anchor). Например, вы можете добавить следующий код CSS между тегами HTML-кода вашей веб-страницы. Здесь элемент

    ...

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

    Кончик

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

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

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

     
    
   style = "text-decoration: none "> Computer Hope.

    Такое определение свойства стиля называется встроенным стилем. Стиль указывается «встроенный» в самом элементе в теле страницы.

    Неподчеркнутая ссылка на вашей веб-странице выглядит следующим образом:

    Компьютерная надежда.

    CSS: Как сделать ссылки не подчеркнутыми.. - Статьи

    Это простое руководство, в котором показано, как удалить подчеркивание и добавить цвет к ссылкам с помощью Dreamweaver MX и CSS.

    В этом руководстве показано, как удалить подчеркивание в ссылках с помощью Dreamweaver MX.

    1. Открыть окно -> Стили CSS (сдвиг F11)
    2. Выбрать новый стиль (страница со значком плюса в нижней части панели)
    3. Далее в типе выберите «Использовать селектор CSS».
    4. Затем определить только в этом документе.
    5. Вернитесь наверх, выберите ссылку: и нажмите ОК
    6. Теперь откроется окно определения стиля и введите текст, если вы хотите указать шрифт и цвет. Внизу установите флажок «Нет» для украшения.
    7. Вы должны увидеть это в заголовке документа

    8. Вернитесь к шагу 2 и на этот раз выберите: посещенный.Это означает, как будет выглядеть ссылка после посещения. Используйте любые свойства, которые вы хотите для посещенных ссылок. Я обычно использую то же самое, что и ссылка: таким образом они выглядят одинаково.
    9. Повторите шаг 2 еще раз с: hover. Вот как будет выглядеть ссылка при наведении на нее мыши. На нем выберите подчеркивание для украшения, чтобы ваши ссылки были подчеркнуты.
    10. Повторите шаг 2 еще раз. На этот раз с: active. Как вы, наверное, догадались, это форматирует то, как будет выглядеть текст при нажатии на ссылку.
    11. Теперь сделайте ссылку на своей странице. Просто убедитесь, что ссылки в вашем стиле расположены в следующем порядке:



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

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


    CSS« text-decoration: none »для удаления подчеркивания для гиперссылок не работает

    Привет,

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

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

    Привет @ addweb-solution-pvt-ltd,

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

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

    Есть идея / предложение попробовать еще немного, чтобы решить эту проблему?

    Просто добавьте ! Important позади стиля, и он будет работать.

    Привет @ addweb-solution-pvt-ltd,

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

    Добавление следующих строк в таблицу стилей? -

      a: link, a: hover {
текстовое оформление: нет;
}! important

    Строки помещаются в дополнительный CSS, нужно ли переместить их в таблицу стилей детской темы?

    • Этот ответ был изменен 2 года 8 месяцев назад пользователем HeNRy Hu.

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

      a: link, a: hover {
    текст-украшение: нет! важно;
}

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

    Привет @ addweb-solution-pvt-ltd,

    Спасибо за уделенное время.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *