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

Разное 

Содержание

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

В веб-дизайне часто прибегают к такому решению — подчеркивание ссылок пунктирной линией или точками. Такие ссылки обычно не совершают перехода на страницу, а открывают какой-либо скрытый слой. Например: на сайте expange.ru (если пользователь не авторизован) при нажатии на ссылку «Авторизация» открывается скрытый слой, на котором форма авторизации — удобно, быстро и без перезагрузки страницы (экономия трафика).

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

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

<a href=»/»> Подчеркивание черточками </a>

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

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

<a href=»/»> Подчеркивание точками </a>

Примечание: В Internet Explorer 6 подчеркнуть точками не получится, выглядеть будет как подчеркивание черточкой.

Примечание

a:hover

Если при наведении ссылка меняет цвет, то не стоит забывать, что стандартное подчеркивание text-decoration:underline;, было изменено на text-decoration:none; и была установлена нижняя граница определенного цвета и стиля, поэтому, чтобы подчеркивание пунктиром тоже меняло свой цвет нужно делать так:

<style type=»text/css»> a {color:#F00; text-decoration:none; border-bottom:#F00 1px dashed;} a:hover {color:#900; border-bottom-color:#900;} </style> <a href=»http://expange.

ru/»>При наведении цвет изменится с #F00 на #900</a>

Свойство padding в ссылках

Если ссылка в стилях имеет свойство padding, например padding:5px 10px;, то наше нижнее подчеркивание ссылки будет на 5 пикселей отдалено от текста. Чтобы решить эту проблему нам понадобится «промежуточный тег»:

<style type=»text/css»> a {color:#F00; text-decoration:none; padding:5px 10px;} a ins {text-decoration:none; border-bottom:#F00 1px dashed;} </style> <a href=»http://expange.ru/»><ins>Используем промежуточный тег</ins></a>

Подчеркивание — переводы, синонимы, грамматика, статистика

Словарь

английский

Переводы

accentuation, subplot



Словарь

испанский

Переводы

acento, acentuación


Словарь

немецкий

Переводы

nebenhandlung, betonung


Словарь

французский

Переводы

soulignement, accentuation, balisage


Словарь

итальянский

Переводы

accentuazione


Словарь

португальский

Переводы

sublinhar, sublinhado, salientar, sublinham, destacar


Словарь

нидерландский

Переводы

onderstrepen, benadrukken, onderstreept, te onderstrepen, benadrukt


Словарь

норвежский

Переводы

understreke, understreking, understreker, understreket, reke


Словарь

шведский

Переводы

stryka, understryka, betona, understryker, stryker


Словарь

финский


Словарь

датский

Переводы

understrege, understreger, fremhæve


Словарь

чешский

Переводы

zdůraznění, důraz, akcentování, přizvukování


Словарь

польский

Переводы

akcentowanie, zaakcentowanie


Словарь

венгерский

Переводы

hangsúlyozás


Словарь

турецкий

Переводы

altını çizmek, altını, altı çizili, vurgulamak, altını çizmektedir


Словарь

греческий

Переводы

υπογραμμίζω, υπογραμμίζουν, υπογραμμίσω, υπογραμμίσει, υπογραμμιστεί


Словарь

украинский

Переводы

вирізнення, виокремлення, виділення


Словарь

албанский

Переводы

nënvizoj, theksoj, nënvizojnë, theksojnë, theksojmë


Словарь

болгарский

Переводы

подчертавам, подчертае, подчертая, се подчертае


Словарь

белорусский

Переводы

падкрэсліванне, падкрэсленне, падкрэсьліваньне


Словарь

эстонский


Словарь

хорватский

Переводы

akcentirati, naglasiti, podvući, istaći


Словарь

исландский

Переводы

undirstrika, undirstrikun, leggja áherslu, að undirstrika, undirstrikar


Словарь

литовский

Переводы

pabrėžti, pabrėžia, pabrėžiama


Словарь

латышский

Переводы

pasvītrot, pasvītrojums, uzsvērt, uzsver


Словарь

македонский

Переводы

подвлечам, нагласам, истакнам, потенцирам, подвлече


Словарь

румынский

Переводы

sublinia, subliniază, sublinieze, subliniez, subliniat


Словарь

словенский

Переводы

poudarjajo, poudarjata, poudariti


Словарь

словацкий

Переводы

zdôrazniť, poukázať, poukázať na, zdôraznil, vyzdvihnúť


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

Оформление ссылок. Использование фонового цвета

или изучаем теги, форматирующие HTML текст

Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

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

Смотрите ниже теги, форматирующие HTML текст :

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

HTML форматирование текста: зачеркнутый, подчеркнутый текст

Результат: … моноширинный шрифт

Результат: . .. размер шрифта больше обычного

Результат: … наклонный шрифт

Результат: зачеркнутый текст (зачеркнутый шрифт)

Результат: верхний индекс

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

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

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

Итак, как же сделать подчеркивание? в html оформляется при помощи тега . Он используется во всех спецификациях html и xhtml, но только при условии переходного , так как должна быть указана версия разметки для браузера. В этом случае документ успешно проходит валидацию. Указывать элемент надо стандартно, то есть в самом верху страницы.

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

  1. Наш текст в абзаце

Слово «текст» при этом будет подчеркнутым.

Подчеркнуть можно и отдельную букву в слове:

  1. Заголовок номер два

    2. Наш текст в абзаце

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

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

Чаще всего верстальщики применяют стили, добавляя границы или подчеркивание в html или же вынося их в отдельный css-файл.

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

Декорирование текста при помощи css — удобный и практичный способ. Самые простые способы такого выделения: использование text-decoration или border-bottom.

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

  • нужный-класс {
  • text-decoration: underline;

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

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

  • нужный-класс {
  • text-decoration: none;

Затем текст украшается при помощи следующего свойства:

  • .нужный-класс {
  • text-decoration: none;
  • border-bottom: 2px dashed black;

Так выходит декорирование с Чтобы сделать ее сплошной, вместо «dashed» применяется «solid». Тем, кому нравится украшать текст подчеркиванием точками, можно попробовать применить «dotted».

Стили рамок прописываются в одну строку. Кроме типа подчеркивания, нужно еще указать толщину подчеркивания и цвет. Чтобы определиться с размером, можно поэкспериментировать, но обычно достаточно 1 или 2 пикселей. Цвет текста тоже можно сделать в цвет подчеркивания:

  • нужный-класс {
  • text-decoration: none;
  • border-bottom: 1px dotted blue;
  • color: blue;

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

Вот и все, это основы подчеркивания в html.

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

Здесь мы рассмотрим те, которые используются часто.

Теги, делающие текст заголовками







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

Эти теги могут использоваться с параметром горизонтального выравнивания align . Возможные значения этого параметра:

  • left — слева,
  • right — справа,
  • center — по центру,
  • jastify — по ширине.
Пример кода:

Теги разделения на абзацы и переноса строки

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

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

У тега

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

  • left — слева,
  • right — справа,
  • center — по центру,
  • jastify — по ширине.
Пример кода:

Форматирование html

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

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

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

Это просто текст.
Это текст с новой строки.

В окне браузера это будет выглядеть так:

Теги, выделяющие текст курсивом





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

Пример кода:

Форматирование html Этот текст в тегах cite
Этот текст в тегах dfn
Этот текст в тегах em
Этот текст в тегах i

В окне браузера это будет выглядеть так:

Теги, выделяющие текст полужирным шрифтом



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

Пример кода:


Этот текст в тегах strong
Этот текст в тегах b

В окне браузера это будет выглядеть так:

Теги, выделяющие текст подчеркиванием



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

Пример кода:

Форматирование html Просто текст

Этот текст в тегах u

В окне браузера это будет выглядеть так:

Теги, выводящие текст моноширинным шрифтом




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

Пример кода:

Форматирование html Просто текст
Этот текст в тегах kbd
Этот текст в тегах samp
Этот текст в тегах tt

В окне браузера это будет выглядеть так:

Теги, выводящие текст в верхнем и нижнем индексах

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

Пример кода:

Форматирование html y=x 2 — уравнение параболы.

H 2 O — формула воды.

В окне браузера это будет выглядеть так:

Тег font и его параметры

Теги указывают параметры шрифта текста:

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

size — размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.

color — цвет текста (по умолчанию — черный).

Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, смотрим в соответствующую таблицу , выбираем понравившийся цвет и пишем его имя в значение параметра (например, color=»blue»).

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа «#». Не будем вдаваться в подробности, как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице
Понятнее будет на примере:

Выделим слово «текст» красным цветом:

Текст


Теперь добавим теги курсива (открывающий — слева, закрывающий — справа):

Текст


А теперь — теги полужирного начертания:

Текст


Каждый раз все предыдущие теги мы помещаем в новые. Это и называется порядком вложенности. Вы можете использовать разные теги для оформления текста, главное не нарушать порядок вложенности.

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

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline ). Применяется он следующим образом (нужная часть текста помещается между тегами ):

Конструктор сайтов «Нубекс»

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

Подчеркнуть текст — CSS

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

Подчеркнутый текст с помощью CSS — «Нубекс»

Конструктор сайтов Нубекс»

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

  • Подчеркнуть текст пунктиром CSS: Подчеркнутый пунктиром текст — «Нубекс»

    Конструктор сайтов Нубекс»

  • Подчеркивание точками: Подчеркнутый точками текст — «Нубекс»

    Конструктор сайтов Нубекс»

  • Двойная черта: Подчеркнутый двумя линиями текст — «Нубекс»

    Конструктор сайтов Нубекс»

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

Подчеркивание для блочных элементов вроде тега

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

Линия под заголовком

Расстояние от линии до текста можно регулировать свойством padding-bottom , добавляя его к селектору h2 . Результат данного примера показан на рис. 1.

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

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

Пример 2. Линия на ширину текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

Читайте также…

Подчеркнутый текст html css: text-decoration-line

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 эта ошибка исправлена.

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

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

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom, его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Линия под заголовком</title>
  <style>
   h3 {
    font-size: 200%; /* Размер шрифта */
    border-bottom: 2px solid maroon; /* Параметры линии под текстом */
    font-weight: normal; /* Убираем жирное начертание */
    padding-bottom: 5px; /* Расстояние от текста до линии */
   }
  </style>
 </head>
 <body>
  <h3>Пример текста</h3>
  <p>Черный заголовок привлекает к себе внимание, 
   несмотря на то, что он черный, а не белый.</p>
 </body>
</html>

Расстояние от линии до текста можно регулировать свойством padding-bottom, добавляя его к селектору h3. Результат данного примера показан на рис. 1.

Рис. 1. Линия под заголовком

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

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

Пример 2. Линия на ширину текста

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подчеркивание заголовка</title>
  <style>
   h3 {
   text-decoration: underline; /* Подчеркивание заголовка */
   }
  </style>
 </head>
 <body>
  <h3>Пример текста</h3>
  <p>Черный заголовок привлекает к себе внимание, 
   несмотря на то, что он черный, а не белый.</p>
 </body>
</html>

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

Рис. 2. Подчеркивание заголовка

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

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

Серёжа СыроежкинКопирайтер

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами <u></u>):

Конструктор сайтов <u>"Нубекс"</u>

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

Подчеркнуть текст — CSS

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

<!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый текст с помощью CSS - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .underline {
	   text-decoration: underline;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

  • Подчеркнуть текст пунктиром CSS: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый пунктиром текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   . dashed {
	   border-bottom: 1px dashed blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>
  • Подчеркивание точками: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый точками текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .dotted {
	   border-bottom: 2px dotted blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>
  • Двойная черта: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый двумя линиями текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .  double {
	   border-bottom: double blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

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

Смотрите также:

Перечёркнутый текст в HTML и CSS

Первыми тегами для зачёркнутого текста были <strike> и <s>.

<strike>Перечёркнутый текст</strike>
<s>Перечёркнутый текст</s>

C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели <del>, он помечает текст как удаленный, что семантически правильнее.

<del>Перечёркнутый текст</del>

По виду они не отличается:

Изменить цвет линии

Первый способ

С помощью CSS свойства text-decoration-color, который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).

<del>Перечёркнутый текст</del>
del {
	text-decoration: line-through;
	text-decoration-color: red;
}

Также можно изменить стиль линии с помощью text-decoration-style.

ЗначениеОписаниеПример
text-decoration-style: solid;Одинарная линияТекст
text-decoration-style: double;Двойная линияТекст
text-decoration-style: dotted;Точечная линияТекст
text-decoration-style: dashed;Пунктирная линияТекст
text-decoration-style: wavy;Волнистая линияТекст
Второй способ

Тегу <del> задается цвет линии, вложенному <span> цвет текста.

<del>
	<span>Текст зачёркнут красной линией</span>
</del>
del {
	color: red;
	text-decoration: line-through;
}
del span {
	color: blue;
}
Третий способ

Линия добавляется псевдо элементом :before, но у текста не должно быть переносов.

<del>Перечёркнутый текст</del>
del {
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 2px solid red;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 50%;
}

При такой реализации, можно расположить линию за текстом.

del {
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 2px solid red;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 50%;
	z-index: -1;
}

text-decoration — подчёркнутый и зачёркнутый текст

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


12. 0+3.0+1.0+1.0+3.5+1.0+

Описание

CSS свойство text-decoration позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).

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

Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением underline:


/*делаем подчёркнутый текст*/
span {text-decoration: underline;}

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


/*убираем подчёркивание ссылок*/
a {text-decoration: none;}

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


/*убираем подчёркивание ссылок*/
a {text-decoration: none;}

/*задаём подчёркивание ссылок при наведении*/
a:hover {text-decoration: underline;}

К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration, будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).

Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: <u> (подчёркнутый текст) и <del> (зачёркнутый текст).

Значение по умолчанию:none
Применяется:ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:нет
Наследуется:нет
Версия:CSS1
Синтаксис JavaScript:object. style.textDecoration=»overline»

Синтаксис

text-decoration: none|underline|overline|line-through|inherit;

Значения свойства

ЗначениеОписание
noneОставляет текст без изменений.
underlineОпределяет горизонтальную линию под текстом.
overlineОпределяет горизонтальную линию над текстом.
line-throughОпределяет линию перечеркивающую текст.
inheritУказывает, что значение наследуется от родительского элемента.
Пример

Измените значение свойства для просмотра результата.


div {

text-decoration: none;

}

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

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

div. usage { font-style: italic; margin-left... margin-right... ; }

а затем включил <div>Explanation</div> в файл HTML. Это работает, как и ожидалось.

Насколько я понимаю,при использовании CSS содержимое и макет разделяются. Как же тогда я подчеркну какой-то текст в своем объяснении? Насколько я понимаю, мне следует избегать следующего: <div>This is <u>very</u> important.</div> .

html

css

Поделиться

Источник


SabreWolfy    

17 января 2012 в 10:17

9 ответов


13

Вы правы насчет разделения контента и макета, но в этом случае я бы завернул его в тег. Тег <u/> -это хоть и устаревший,. То, что я бы использовал, это что-то вроде этого:

<div>This is <em>very</em> important.</div>

и

em { text-decoration:underline; }

<em/> означает подчеркнутый текст. По умолчанию используется курсив, поэтому в зависимости от вашего сброса CSS вам может потребоваться также сбросить шрифт-syle до нормального.

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

Поделиться


Nix    

17 января 2012 в 10:25


4

Как вы говорите, HTML — это содержание, а CSS-стиль. Таким образом, вам не нужно использовать стилистические материалы в вашем HTML. Действительно, когда вы мыслите в HTML, вы должны мыслить содержательно, а также семантически.

Таким образом, класс, который вы используете для вашего div.usage , очень хорошо выбран, потому что он ничего не говорит о своем стиле, но о его семантике. А как насчет текста, который вы хотите подчеркнуть? Я бы сказал, что в семантическом смысле это текст, который вы хотите выделить, и HTML имеет хороший элемент для этого: <strong> . Затем в вашем HTML вы можете переопределить стиль браузера по умолчанию для <strong> элементов (жирный шрифт)для подчеркивания, которое вы хотите.

<div>This is <strong>very</strong> important.</div>

strong {
  font-weight: normal;
  text-decoration: underline;
}

Если вы хотите иметь этот стиль только для выделенного текста внутри вашего элемента div.usage , то будьте более конкретны:

.usage strong {
  font-weight: normal;
  text-decoration: underline;
}

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

Поделиться


Waiting for Dev…    

17 января 2012 в 10:30


1

Свойство «text-decoration: underline» позволяет отменить выравнивание текста.

Поделиться


Unknown    

17 января 2012 в 10:21

  • подчеркивание поля ввода при вводе текста

    У меня есть поле ввода, которое отображает подчеркивание, когда я начинаю печатать текст. Это не подчеркивание автозамены, а черное подчеркивание, так как я пытался отключить автозаполнение и проверку орфографии. Это появляется только на телефонах android jelly bean. <input type=search…

  • CSS подчеркивание меньше ширины заголовка?

    Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h3: h3 { font-weight: 300; display: inline-block; padding-bottom: 5px; border-bottom: 1px #d2202f solid; } Это создает тонкое красное подчеркивание под моими. ..


1

Вы должны использовать один из этих тегов: <strong> или <em> и стилизовать их в css.

.usage strong { font-weight: bold; }

В вашем markup вы определяете некоторый контент, который вы хотите подчеркнуть (<em> ) или сильно подчеркнуть ( <strong> ). см. http://www.w3.org/TR/ html4/struct/text. html .
Я бы не стал использовать подчеркивание для подчеркивания, так как это сбьет пользователей с толку, думая, что это гиперссылка.

Поделиться


nickvane    

17 января 2012 в 10:26


1

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

Я бы предложил использовать

<strong>this is important</strong>

Который по умолчанию будет выделен жирным шрифтом.

Или, возможно, вы могли бы использовать желтый фон на тексте, как маркер выделения…

<p>text <span>hightlighed</span> text</p>

И положи это в свой CSS

  span. highlight {
    background-color: #FF9;
  }

Поделиться


methodofaction    

17 января 2012 в 10:32


0

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

HTML

<div>
    <p>
        This is just a text to check <span>underline</span> with CSS
    </p>

</div>

CSS

div p { font-style: italic; }

div p span{ text-decoration: underline;}

Поделиться


Murtaza    

17 января 2012 в 10:23


0

В наши дни люди обычно говорят, что <u> markup не следует использовать, но мало кто может подкрепить это фактологическими аргументами (в отличие от цитирования предполагаемых авторитетов и использования отрицательно звучащих прилагательных). Если вы действительно хотите подчеркнуть (что, как правило, не очень хорошая идея в документах HTML, как указано здесь), то <u> -это самый простой и надежный способ. У вас все еще была бы свобода позже решить, что вы хотите использовать, скажем, жирный шрифт вместо подчеркивания, и тогда вы могли бы сделать это просто в CSS:

u { text-decoration: none; font-weight: bold; }

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

Поделиться


Jukka K. Korpela    

17 января 2012 в 10:50


-1

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

<div>This is <span>very</span> important. </div>

css:

.underline { text-decoration: underline; }

Поделиться


Adaz    

17 января 2012 в 10:19


-1

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

. underline {
  text-decoration:underline;
}

<div> This is <span>very</span> important.</div>

Поделиться


rahool    

17 января 2012 в 10:22

Похожие вопросы:

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

Я хотел бы иметь подчеркивание только для текста и в то же время сохранить часть изображения ссылки: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN…

CSS слишком длинное подчеркивание текста при применении интервала между буквами?

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

удаление зазора в один пиксель при использовании CSS text-decoration: подчеркивание

У меня есть следующие CSS и markup на моем сайте, которые производят подчеркивание, когда я навожу курсор на ссылку Account . По умолчанию подчеркивание отображается на один пиксель от текста. Можно…

Центрированные, подчеркнутые заголовки, где подчеркивание отличается по цвету от текста

Какой самый простой способ стилизовать заголовки HTML таким образом, чтобы они были одновременно подчеркнуты и горизонтально центрированы? Я не хочу, чтобы подчеркивание распространялось на всю…

CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)

Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!…

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

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

CSS подчеркивание меньше ширины заголовка?

Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h3: h3 { font-weight: 300; display: inline-block; padding-bottom:…

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

У меня есть следующее HTML <div style=text-decoration: underline;> outer text <div style=text-decoration: none;>inner text</div> </div> Несмотря на то, что я использовал none…

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

Я пытаюсь добавить подчеркивание к одному из символов в plt. text. plt.text(.5,.5,r’\underline{O}H’) Это, кажется, не работает , я попытался использовать \overline{O} , который работает просто…

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

В текущем стабильном Chrome при использовании следующего CSS, где установлена некоторая непрозрачность, подчеркивание текста исчезает. Когда непрозрачность установлена на 1 или удалена,…

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

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

Наиболее распространённые стили

underline – подчёркивание текста сплошной линией.


HTML

<div>
  <p>
    Подчеркнутый текст. 
  </p>
</div>



CSS

.box{
    width: 300px;
    margin: 0px auto;
    padding: 3px 20px;
    border-radius: 8px;
    background-color: #fc0;
    border: 3px solid #960;
}
. box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}

line-through – вывод перечеркнутого текста.


HTML

<div>
  <p>
    Перечёркнутый текст.
  </p>
</div>



CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : line-through; 
}

none – отменяет все заданные ранее эффекты, включая и подчеркивания у ссылок которое установлено по умолчанию.


HTML

<div>
  <p>
    Отмена эффектов.
  </p>
</div>



CSS

. box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : none;
}

Менее используемые стили

overline – отображает текст с линией поверх него.


HTML

<div>
  <p>
    Линия над текстом.
  </p>
</div>



CSS

text-decoration : overline;

blink – этот параметр задаёт пульсирующий текст.


HTML

<div>
  <p>
    Пульсирующий текст.
  </p>
</div>



CSS

text-decoration : blink;

HTML тег u

Пример

Отметьте слово с ошибкой тегом :

Это неверный текст.

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

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

Совет: Избегайте использования
элемент, где его можно было спутать с гиперссылкой!

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

Элемент
Есть Есть Есть Есть Есть

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

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

Пример

Используйте CSS для стилизации текста с ошибками:

. Ошибка орфографии {
текст-украшение-строка: подчеркивание;
стиль оформления текста: волнистый;
цвет оформления текста: красный;
}

Это какой-то неверный текст.

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

Хорошо Плохо

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

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

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

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

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

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

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

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

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

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

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

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

Примечание: Word также подчеркивает красной волнистой линией слова, написанные на языке, отличном от языка инструментов проверки правописания.

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

1. Откройте меню “Файл” , нажав на крайнюю левую кнопку в верхней части панели управления в Word 2012 — 2016, или нажмите на кнопку “MS Office” , если вы используете более раннюю версию программы.

2. Откройте раздел “Параметры” (ранее “Параметры Word” ).

3. Выберите в открывшемся окне раздел “Правописание” .

4. Найдите раздел “Исключение для файла” и установите там галочки напротив двух пунктов “Скрыть… ошибки только в этом документе” .

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

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

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

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

2. В появившемся меню выберите необходимую команду: “Пропустить” или “Добавить в словарь” .

3. Подчеркивание исчезнет. Если это необходимо, повторите пункты 1-2 и для других слов.

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

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

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

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

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

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

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

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

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

  • a {text-decoration: none;}.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответ № 1:

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

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

Ответ 2:

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

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

Ответ № 3:

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

С CSS это просто.

HTML: 

   Я люблю сыр

CSS: 

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

Текущий пример

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

  


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


     Я люблю сыр

Ответ № 4:

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

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

   HTML

Ответ № 5:

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

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

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

  текст-подчеркивание-позиция: под;

Ответ № 6:

Ответ переформатирован на @epascarello :

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

Ответ № 7:

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

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

Ответ № 8:

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

   
 Привет, мир!

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

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

Ответ № 9:

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

  
  •  
    •

    Html, подчеркнутый пунктиром

    1. Home
    2. HTML, пунктирное подчеркивание

    Тип фильтра: Все время Последние 24 часа Прошлая неделя Прошлый месяц

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

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

    2 часа назад пунктирное подчеркивание style css.Оформление текста , подчеркивание, пунктир . подчеркнутый пунктир текст css. text-decoration пунктирная строка над текстом css. make div имеет пунктирное подчеркивание . текстовое оформление пунктирная css. css подчеркнутый пунктир . css оформление текста подчеркнутый пунктир . html, подчеркнутый пунктиром .

    Подробнее