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

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

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

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

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

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

  • А:hover { параметр: значение; } — вид ссылки при наведённом курсоре мыши.
  • active — вид активной ссылки.
  • visited — вид посещённой ссылки.
  • link — ссылку ещё не посещали (по умолчанию).

Посмотрим, как это выглядит в коде и на скриншоте:

<html><head><title>hover</title><style type=»text/css»>a:link {color: #ff50dc;text-decoration: none;}a:hover {text-decoration: underline;color: #018000;}a:visited {color: #ff7625;text-decoration: none;}</style></head><body><p><a href=»#»>Неактивная ссылка</a></p><p><a href=»#»>Ссылка при наведённом курсоре</a></p><p><a href=»#»>Посещённая ссылка</a></p></body></html>

На рисунке видно, что убрано подчёркивание в непосешённых и посещённых ссылках, а при наведении курсора мыши подчёркивание появляется.

Теперь позволю себе напомнить понятие состояния ссылок.

  • Ссылка считается активной в момент нажатия на нее курсором мышки, данный момент очень незначителен по времени, и я не вижу смысла в применении данного значения.
  • Посещённой ссылка становится после перехода по ней на указанный адрес.
  • Неактивная ссылка — это ссылка в своём обычном состоянии, когда с ней не производится никаких действий.
  • Ну, и ссылка в момент наведения на неё курсора в объяснении не нуждается.

Управление ссылками с помощью стилей CSS возможно и без использования псевдоклассов. Делается это с помощью обращения CSS стилей ссылок к тегу А. Данный приём используется для задания ссылкам одинаковых параметров при любых состояниях (при желании не выделять ссылки из всего текста), или для определения лишь неактивных ссылок, с последующим использованием псевдоклассов. Допускается применение сокращённой записи при задании свойств CSS для тега А. Давайте посмотрим пример:

<html><head><title>link</title><style type=»text/css»>a {color:black; text-decoration:none;}a:hover {text-decoration: none;color: #018000;background-color: #ffe7d8}a:visited {color: #ff7625;text-decoration:line-through;}</style></head><body><p><a href=»#»>Неактивная ссылка</a></p><p><a href=»##»>Ссылка при наведённом курсоре</a></p><p><a href=»###»>Посещённая ссылка</a></p></body></html>

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

Как через CSS убрать подчеркивание ссылок? Пособие для новичка :: SYL.ru

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

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

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

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

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

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

a {text-decoration: none;}.

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

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

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

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

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

a: hover {text-decoration: none}.

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

Трехмерные ссылки

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

Пример HTML и CSS: создание трехмерных ссылок

Описание примера

  1. С помощью свойства CSS border добавляем ссылкам рамки, а с помощью border-color — задаем им цвет. При этом для левой и верхней границы указываем светлый оттенок цвета, а для нижней и правой — темный. Именно благодаря такому распределению цветов мы и получаем ссылки, которые похожи на трехмерные кнопки.
  2. Чтобы при наведении курсора мыши казалось, что кнопки нажимаются — инвертируем у ссылок с псевдоклассом :hover цвета рамок. Для дополнительного эффекта нажатия, задаем относительное позиционирование (CSS position:relative) и делаем однопиксельное смещение вверх (CSS top:-1px).
  3. Ну и чтобы все совсем было красиво — задаем ссылкам под курсором цвет текста и фона немного темнее, чем у обычных. Готово.

Ссылки с иконками

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

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

Пример HTML и CSS: делаем ссылки с иконками

Описание примера

  1. Ради сокращения кода, задействуем в ссылках два класса — «links» (с общими свойствами) и «image», «audio», «video» (персональные для каждой ссылки). Этот момент подробно описан в классах справочника CSS.
  2. Наши иконки имеют размер 50×50 пикселей и будут присутствовать у ссылок в качестве фона (CSS background), который мы расположим по центру вверху (50% 0) и запретим ему размножаться (no-repeat).
  3. Добавляем ссылкам внутренние отступы (CSS padding), чтобы текст в ссылках не прилегал к краям. При этом верхний отступ делаем равным высоте иконок, чтобы текст не накладывался на них, ведь иконки у нас — это фон.
  4. Если текста в ссылках будет очень мало, то изображения иконок обрежутся по бокам. Чтобы этого не произошло, задаем ссылкам такую минимальную ширину (CSS min-width), чтобы она как минимум была равна ширине иконок. В нашем случае надо получить минимальную ширину в 50px, однако мы задаем 40px, так как еще 10px добавится благодаря боковым отступам.
  5. Чтобы минимальная ширина сработала — преобразуем ссылки во встроенные блоки (CSS display:inline-block).

IE6 придется немного «пролечить»:

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

Если вам нужны ссылки вообще без текста, а только с иконками, то можно поступить так. Убрать у ссылок все внутренние отступы и минимальную ширину. Задать им явную ширину и высоту равную размеру иконок.

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

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

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

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

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

inherit — наследует это свойство от родительского элемента

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

a {
text-decoration: none;
}

a {

  text-decoration: none;

}

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

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

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

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

.link {
text-decoration: none;
}

#link {
text-decoration: none;
}

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

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

.link:hover,

.link:focus {

text-decoration: underline;

color: red;

}

.link:focus {

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

color: red;

}

.link:focus {

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

color: red;

}

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

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

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

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

Ссылки

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

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

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

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

Ссылки

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

Закругленные углы ссылок (вариант два)

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

Пример HTML и CSS: ссылки с закругленными углами (второй вариант)

Описание примера

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

  1. С помощь свойства CSS display:inline-blok преобразуем ссылки во встроенные блоки. Затем убираем у них подчеркивание, добавляем рамку и выравниваем текст по центру.
  2. Так как псевдоэлементы, с помощь которых мы закругляем углы, находятся внутри ссылок, то их содержимое тоже выравнивается по центру, а, следовательно, уголки-картинки, добавленные свойством CSS content, не ставятся по углам, как нам надо. Чтобы это исправить, добавляем им text-align:left, возвращая значение, которое браузеры используют по умолчанию.

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

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

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

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

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

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

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

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

div#main_text a.example_99 {

text-decoration: none;

border-bottom: 1px solid red;

border-left: 1px solid green;

padding-left: 6px;

border-top: 1px solid #ffeb00;

padding-top: 6px;

border-right: 1px solid #ce00ff;

padding-right: 6px;

padding-bottom: 6px;

}

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

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

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

div#main_text a.example_99_1{text-decoration: none; border:none;}

div#main_text a.example_99_1:hover {

text-decoration: none;

border-bottom: 1px solid red;

border-left: 1px solid green;

padding-left: 6px;

border-top: 1px solid #ffeb00;

padding-top: 6px;

border-right: 1px solid #ce00ff;

padding-right: 6px;

padding-bottom: 6px;

}

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

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

Вариант 1: Параметры шрифта

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

Вариант 2: Линия

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

Подробнее: Как убрать линию в Майкрософт Ворд

Как узнать параметры нестандартного подчёркивания

Все параметры для подчёркивания будем доставать из макета в Figma.

Нам нужны два параметра — расстояние от текста до линии и толщина линии. Цвет подчёркивания обычно совпадает с цветом текста, поэтому специально искать этот параметр обычно не нужно.

Расстояние от текста до линии

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

Запишем это значение в CSS-свойство :

Толщина линии подчеркивания

Выделим объект с подчёркиванием. После этого на панели справа, на вкладке Inspect найдём свойства объекта. Нас интересует свойство Height (высота).

Свойство отображается и в разделе Properties, и в разделе Code. В примере толщина подчёркивания — 4 пикселя. Напомним, в CSS толщиной подчёркивания управляет свойство . Допишем в правило определение толщины подчёркивания:

На этом всё — пробуйте, экспериментируйте и изучайте вёрстку, а мы вам в этом поможем.

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

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

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

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

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

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

  1. Атрибут style (располагается внутри тега).
  2. Тег style (располагается в блоке head).
  3. Внешнее подключение стилей с помощью тега link.

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

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

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

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

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

Ссылки

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

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

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

как изменить цвет гиперссылки с помощью CSS? — html

это код CSS, который я использовал:

Я хочу знать, как сделать вторую ссылку под названием «ссылка на вторую страницу», когда я наводил на нее курсор?

Также как сделать первую букву третьей ссылки заглавной. Третья ссылка называется «ссылка на третью страницу». наконец, почему цвет ссылки (который закодирован как белый) меняется на синий, когда я просматриваю его в браузере. Но на Dreamweaver на дизайне это кажется прекрасным. и, если возможно, как я могу это исправить.

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

вот обновленная версия кода (16:55)

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

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

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

Так что не будем тянуть и перейдем к процессу.

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

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

<style>
a {
text-decoration: none; /* Отменяем подчеркивание у ссылки */
}
</style>

<style>

   a {

    text-decoration: none; /* Отменяем подчеркивание у ссылки */

   }

  </style>

Так же, если не хотите править CSS стили, то можно его вставить до закрытия тега HEAD (в WordPress файл который нужно исправить, обычно называется header.php). Вот и все, теперь подчеркивание убрано под всеми ссылках вашего сайта.

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

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

<a href=»URL»>анкор</a>

<a href=»URL»>анкор</a>

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

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

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

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

Ссылки

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

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

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

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

19 ответов

Лучший ответ

Вы применяете не к привязке (), а к элементу диапазона ().

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

860

Andrés Mejía
20 Июл 2020 в 09:40

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

Например:

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

234

JYelton
2 Май 2016 в 17:32

должен его удалить .. Вы уверены, что не скрывается? (Проследите вычисленный стиль в Firebug / F12 в IE)

36

Gijs Overvliet
17 Июл 2014 в 14:02

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

Примере:

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

28

Idris
7 Мар 2014 в 17:24

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

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

19

jeffmjack
11 Мар 2017 в 22:58

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

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

14

Santosh Khalse
19 Янв 2017 в 12:50

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

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

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

10

Joel Crawford-Smith
20 Май 2010 в 15:46

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

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

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

9

artlung
7 Май 2010 в 15:44

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

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

5

yarz-tech
30 Июн 2017 в 18:23

Если или не работают, попробуйте применить встроенный стиль к вашему HTML.

2

Deke
12 Июн 2018 в 01:09

2

itzhar
25 Ноя 2019 в 12:54

Просто используйте свойство

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

1

MK Sandhu
22 Сен 2016 в 09:11

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

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

ИЛИ

ИЛИ

1

Md Abul Bashar
22 Июн 2018 в 19:50

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

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

Поэтому я добавил код в конце заголовка следующим образом:

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

1

Neo
12 Июл 2018 в 04:22

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

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

text-decoration-color: transparent;

1

Ben
7 Апр 2020 в 16:04

Вот пример элемента управления LinkButton веб-форм asp.net:

Код позади:

JoshYates1980
8 Мар 2017 в 16:21

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

qarly_blue
26 Июн 2019 в 17:58

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

mwilcox
10 Июл 2019 в 22:48

Установить текстовое оформление: нет; для якорного тега.

Пример html.

Пример CSS:

Lord
4 Июл 2020 в 15:03

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

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

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

Ссылки

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

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

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

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

Ссылки

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

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

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

Способ 2: Пропуск или добавление слов в словарь

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

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

Способ 3: Отключение проверки на ошибки

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

  1. Вызовите меню «Файл» (в старых версиях нажмите кнопку с логотипом MS Office)
    и откройте «Параметры».

В появившемся окне перейдите на вкладку «Правописание».

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

Выполните действия, аналогичные таковым на предыдущем шаге, в блоке опций «При исправлении правописания в Word».


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

  • Нажмите на кнопку «Настройка».

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

Кликните «ОК» для закрытия окна и сохранения внесенных изменений.


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


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

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Новые свойства text-decoration

Вы помните, что я обещал подробнее поговорить о . Время пришло.

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

Но слишком сильно не радуйтесь… Поддержка в браузерах — как всегда. Такие дела.

text-decoration-color

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

Firefox:

Safari:

text-decoration-skip

Свойство включает пропуск выносных элементов в подчеркиваемом тексте.

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

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

text-decoration-style

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

Вот список доступных значений:

Сейчас свойство работает только в Firefox, вот скриншот из него:

Чего не хватает

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

После небольшого исследования, я нашел еще пару свойств:

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

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: