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

Содержание

Как сделать зачеркнутый текст в html

Приветствую вас, дорогой читатель, случайно или умышленно зашедший на мой блог!

В данной статье я покажу несколько способов как сделать в html зачёркнутый текст.

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

Выглядеть он будет вот так: ~~зачеркнутый текст в html~~

Для чего это может понадобится?

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

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

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

stike и s для зачёркивания текста

Тег strike

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

Сам код для зачёркнутого текста будет выглядеть так:

<strike>html тег для зачеркнутого текста</strike>

Вот что получится в итоге:

html тег для зачеркнутого текста

Тег s

Тот же тег stike, но в сокращённом виде.
html код зачеркнутого текста будет выглядеть так:

<s>html тег для зачеркнутого текста</s>

Результат этого кода выглядит так:

~~html тег для зачеркнутого текста~~

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

Конечно, в их использовании нет ничего критичного. Просто всё оформление текста лучше задавать через CSS.

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

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

del для зачёркнутого текса

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

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

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

<del>html тег для зачеркнутого текста</del>

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

~~html тег для зачеркнутого текста~~

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

strike и s.

Использование тега del более предпочтительно для использования при вёрстке сайтов.

Как сделать зачеркнутый текст на css?

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

Для создания зачёркнутого текста в CSS существует специальное CSS свойство text-decoration со значением line-through
Для того чтобы сделать зачёркнутый текст нужно его заключить в тег span или любой другой и присвоить этому тегу определённый класс, а затем в CSS для этого класса указать свойство text-decoration:line-through;

html код зачёркнутого текста будет выглядеть так:

<span class=”strike-text”>html тег для зачеркнутого текста</span>

А вот CSS код:

. strike-text { text-decoration:line-through; }

.strike-text {

text-decoration:line-through;

}

Также можно задать это CSS свойство в самом теге при помощи атрибута style:

<span style=”text-decoration:line-through;”>html тег для зачеркнутого текста</span>

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

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

На этом у меня всё. Подписывайтесь на обновления блога и заходите на мой канал YouTube. Там много полезных видео уроков.
Желаю вам хорошего настроения и до встречи в следующих статьях!

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

способы.

text-decoration-skip — убираем подчеркивание для элементов

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

Через html тег и
Через свойство CSS text-decoration
Через свойство CSS border-bottom

Подчеркнутый текст через html тег

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

Название пришло от английского слова «underline». Html тег считается более новым.

Например

Обычный текст.
Обычный текст. Подчеркнутый текст через тег ins

Преобразуется на странице в

Обычный текст. Подчеркнутый текст через тег u

Обычный текст.

Подчеркнутый текст через свойство CSS text-decoration

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

Синтаксис CSS text-decoration

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

none — текст без оформления
underline — нижнее подчеркивание
overline — верхнее подчеркивание
line-through — зачеркивание текста
blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение underline

Например:

Текст со свойством text-decoration: underline

Преобразуется на странице в

Текст со свойством text-decoration: underline

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Рассмотрим пример

Преобразуется на странице в

Текст со свойством border-bottom (красное подчеркивание)
Текст со свойством border-bottom (пунктирное подчеркивание)

Задача

Решение

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

Вариации подчеркивания

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

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

HTML

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

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

CSS

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

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

A{ display: inline-block; position: relative; text-decoration: none; }

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

A::before{ display: block; position: absolute; content: «»; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out, left .5s ease-in-out; left: 50%; bottom: 0; }

Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию отвечает свойство transition . Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом::after:

A::after{ display: block; position: absolute; content: «»; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out; left: 50%; bottom: 0; }

A:hover::before{ width: 50%; left: 0; } a:hover::after{ width: 50%; }

Стоит отметить, что это лишь один из способов реализации данной идеи. Можно то же самое сделать и при помощи только одного псевдоэлемента::before . Подписывайтесь на материалы и предлагайте темы для статей.

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

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

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

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-документа и теги форматирования страницы / ProgLang

Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.

Полужирный или жирный текст

Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов <b>…</b> и <strong>…</strong>. Все, что находится в тегах <b>…</b> и <strong>…</strong> отображается в HTML жирным текстом (полужирным), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделения жирным текста и шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега b делаем <b>жирный шрифт</b>. </p>
    <p>С помощью тега strong делаем <strong>текст жирным</strong>.</p>
  </body>
</html>

Получим следующий результат:

Курсив — наклонный текст или шрифт

Сделать в HTML курсивом текст можно с помощь двух тегов <i>…</i> и <em>…</em>. Все, что находится в тегах курсива <i>…</i> и <em>…</em> отображается в HTML наклонным текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделения курсивом текста и шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега i делаем <i>наклонный текст или шрифт</i>.</p>
    <p>С помощью тега em делаем <em>текст курсивом</em>.</p>
  </body>
</html>

Получим следующий результат:

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

Подчеркнуть текст в HTML можно с помощь тега <u>. ..</u>. Все, что находится внутри тега <u>…</u> отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример подчеркивания текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега u делаем <u>подчеркнутый текст или слово</u>.</p>
  </body>
</html>

Получим следующий результат:

Зачеркнутый текст

Зачеркнуть текст в HTML можно с помощь тега <strike>…</strike>. Все, что находится внутри тега <strike>…</strike> отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример зачеркивания текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега strike делаем <strike>зачеркнутый текст</strike>. </p>
  </body>
</html>

Получим следующий результат:

Моноширинный шрифт

Содержимое элемента <tt>…</tt> записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример моноширинного шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега tt делаем <tt>моноширинный шрифт</tt>.</p>
  </body>
</html>

Получим следующий результат:

Верхний индекс

Содержимое тега <sup>…</sup> отображается в HTML в верхнем индексе. Тег верхнего индекса <sup> в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты. Данный элемент хорошо подходит когда необходимо, например, написать в HTML степень числа.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример верхнего индекса в HTML</title>
  </head>
  <body>
    <p>С помощью тега sup делаем верхний<sup>индекс</sup> или степень числа, например, 2<sup>3</sup>.</p>
  </body>
</html>

Получим следующий результат:

Нижний индекс

Содержимое тега <sub>…</sub> отображается в HTML в нижнем индексе. Тег нижнего индекса <sub> в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример нижнего индекса в HTML</title>
  </head>
  <body>
    <p>С помощью тега sub делаем нижний<sub>индекс</sub>. </p>
  </body>
</html>

Получим следующий результат:

Вставленный текст

Содержимое внутри тега <ins>…</ins> отображается в HTML как вставленный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример вставленного текста в HTML</title>
  </head>
  <body>
    <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p>
  </body>
</html>

Получим следующий результат:

Удаленный текст

Содержимое внутри тега <del>…</del> отображается в HTML как удаленный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример удаленного текста в HTML</title>
  </head>
  <body>
    <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег. </p>
  </body>
</html>

Получим следующий результат:

Большой текст

Содержимое тега <big>…</big> отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример большого текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега big делаем <big>текст больше</big>.</p>
  </body>
</html>

Получим следующий результат:

Маленький текст

Содержимое внутри тега <small>…</small> отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример маленького текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега small делаем <small>текст меньше</small>.</p>
  </body>
</html>

Получим следующий результат:

Группировка элементов и содержимого страницы в HTML

Элементы <div> и <span> позволяют в HTML группировать несколько элементов для создания секций или подсекций страницы.

Например, Вы можете поместить все ссылки на странице в тег <div>, чтобы указать, что все элементы в этом теге <div> относятся к меню. Затем Вы можете задать стиль тегу <div>, чтобы элементы отображались с использованием специального набора правил стиля (CSS).

Пример с тегом <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Пример группировки элементов и текста в HTML</title>
  </head>
  <body>
    <div>
      <a href="/index.html">ГЛАВНАЯ</a> / 
      <a href="/about.html">О НАС</a> / 
      <a href="/contacts.html">КОНТАКТЫ</a>
    </div>
  
    <div>
      <h2>Название статьи</h2>
      <p>Содержимое страницы...</p>
    </div>
  </body>
</html>

Получим следующий результат:

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

Пример с тегом <span>

<!DOCTYPE html>
<html>
  <head>
    <title>Пример группировки элементов и текста в HTML</title>
  </head>
  <body>
    <p>Группировки элементов с помощью <span>тега span</span>.</p>
  </body>
</html>

Получим следующий результат:

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

Поделитесь:

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

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

Итак, для начала создаем в блокноте пустой текстовый документ. После этого меняем его расширение с txt на html. Открываем его с одновременно с помощью браузера и текстового редактора, например, того же блокнота. Я советую использовать для этих целей программу Macromedia Dreamweaver или Notepad++.

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

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

Заголовки текста разного уровня

Заголовки это не только важная часть оформления текста, но и один из инструментов внутренней оптимизации. В html тексте заголовки задают теги <h>. Для того, чтобы посмотреть, как они будут выглядеть прописываем в документе следующий код:

<h3>Поместите здесь текст, который вы хотите сделать заголовком</h3>

Цифра 2 рядом с буквой h означает уровень заголовка. Всего уровней 6. Первый уровень – название статьи. Все остальные – заголовки разделов и подразделов.

Жирный, подчеркнутый текст, курсив

Теги <b>, <i>, <u> легко решают эту проблему
<b>Так в html можно задать жирный текст</b>
<i>Вот так задается курсив</i>
<u>Вот это будет подчеркнутый текст</u>

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

<i><b>Жирный курсив</i></b>

Изменяем размер шрифта

Размер шрифта текста задается в html с помощью тега <font>, у которого есть атрибут «size».

<font size=”5”>Размер шрифта 5</font>

Как поменять цвет текста

Цвет текста задается тем же самым тегом с помощью атрибута «color»

<font color=”red”>Текст красного цвета</font>

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

Текст в таком виде как он был набран

У html есть довольно неприятная особенность. Если вы набрали текст, в котором есть несколько пробелов, идущих подряд , друг за другом, то браузер покажет только один пробел. В некоторых случаях необходимо отобразить текст именно в таком виде, как он был набран. Для этого используется тег <pre>

<pre>Этот текст будет выглядеть так как он набран</pre>

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

Зачеркнутый текст

Вообще говоря в html можно задать зачеркнутый текст с помощью сразу трех разных тегов. Теги <s> и <strike> вполне корректно отображаются во всех браузерах, тем не менее, они не рекомендуются к использованию. Они даже не включены в спецификации XHTML и HTML5. Поэтому для создания зачеркнутого текста я рекомендую использовать тег <del>.

<del>~~Зачеркнутый текст~~</del>

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

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

datetime — предназначен для того, чтобы хранить время последнего редактирования информации.

Двойной тег подчеркивания? — CodeRoad

Я хочу сделать некоторый текст дважды подчеркнутым в HTML.

<h2><u><i> website </i></u></h2>

У меня внизу две строчки вместо одной. Есть ли для этого определенный тег или мне придется сделать это в css?

html css
Поделиться Источник Kevril 26 марта 2013 в 17:26
9 ответов
wysihtml5 — как отключить тег подчеркивания
У меня есть небольшая проблема с wysihtml5 на моем сайте. Я хочу разрешить только несколько тегов html, и если я удалю подчеркивание из правил парсера и даже команду подчеркивания из библиотеки wysihtml5, я все равно смогу нажать CTRL(command)+U, чтобы сделать выделенный текст подчеркнутым. Что я…
Это все еще нестрочный тег или он означает что-то еще?
Я искал, чтобы использовать ползунок Jssor, и, просматривая код, я нашел тег <span u=arrowleft…> (который можно увидеть в этом другом вопросе: как переместить промежуток в другое положение в DIV ) Тег <u> используется для обозначения подчеркивания, но я никогда не видел тег u= ….

40

Вы можете попробовать добавить это:
h2.dblUnderlined { border-bottom: 3px double; }
Примечание: ширина должна быть 3px или больше, поскольку она представляет собой общую ширину, а не ширину каждой границы. Когда вы увеличиваете измерение, ширина линий и пространство могут быть равны или не равны в зависимости от делимости определенного измерения на 3. Остаток от 1 и 1 добавляется к ширине пространства; остаток от 2 приведет к тому, что 1 будет добавлен к каждой строке.
Поделиться roman 26 марта 2013 в 17:29

25

Используйте границу и подчеркивание:
.doubleUnderline { text-decoration:underline; border-bottom: 1px solid #000; } <span>Test</span>
Вот рабочий fiddle .
Поделиться James Hill 26 марта 2013 в 17:29

4

Самый простой способ-установить нижнюю границу типа double в CSS. Он должен быть шириной не менее 3 пикселей, чтобы создать минимальную двойную границу (две границы 1px с расстоянием между ними 1px).
Детали зависят от markup, от желаемой ширины и цвета двойной линии, а также от того, должна ли она пересекать доступную ширину. Markup, как и <h2><u><i> website </i></u></h2> , вероятно, не должно быть серьезным. С помощью простого markup <h2>foobar</h2> можно получить минимальную двойную границу поперек страницы , используя
h2 { border-bottom: double 3px; }
Если вы хотите иметь только текст заголовка “underlined”, самый простой способ-иметь внутренний код markup, например <h2><span>foobar</span></h2> и CSS
h2 span { border-bottom: double 3px; }
Поделиться Jukka K. Korpela 26 марта 2013 в 18:33
Длинный тег подчеркивания, а не <u>
Как мне добиться серого подчеркивания в приветственной части сайта? Я забыл тег, он в основном создает линию на всем протяжении page/div/table, что бы вы ни хотели. Сайт(где написано Добро пожаловать в CLAN ):
JavaFX Текст Двойной Интервал Подчеркивания
У меня есть метка в приложении JavaFX, к которой мне тоже нужно применить двойное подчеркивание. Я знаю, что это невозможно сделать с базовым свойством, но вместо этого я применил к метке следующий css, который дает ей effect двойного подчеркивания .double-underline { -fx-border-color: #FFFFFF;…

2

К вашему сведению, на данный момент следующее возможно в Firefox или в Safari с использованием префикса поставщика:
text-decoration: underline double; -webkit-text-decoration: underline double;
Увидеть text-decoration-line .
Поделиться Fabien Snauwaert 30 марта 2015 в 18:16

2

guys/gals, это тоже работает, но больше похоже на традиционное двойное подчеркивание.
.doubleUnderline { text-decoration-line: underline; text-decoration-style: double; }
Поделиться Tyler Wright student 09 октября 2018 в 13:48

1

Почему бы просто не сделать свой собственный «tag»?
<style> du { text-decoration-line: underline; text-decoration-style: double; } </style> <p> I want <du>this stuff</du> double underlined.</p>
http://jsfiddle.net/eoba541g/2/
Поделиться Kim Jensen 12 сентября 2018 в 10:21

0

используйте следующие http://jsfiddle.net/cKNP4/
или
Придайте следующий стиль любому контейнеру HTML:
border-top-style:none;border-right-style:none;border-bottom-style:double;border-left-style:none;border-width: 2px solid black;
Поделиться Unknown 03 февраля 2014 в 14:26

0

Вот мое решение (стилус):
$borderWidth 1px $textColour black $double-borders &:after content "" position absolute top 100% width 5.7em right 0 border-top ($borderWidth * 3) double $textColour .double-underlined @extend $double-borders
Обратите внимание, что ширина должна быть жестко закодирована (в данном случае 5.7em . Если это не является желаемым результатом, вы также можете использовать метод border-bottom , упомянутый выше.
Поделиться user1429980 19 сентября 2014 в 20:39

-1

<h2><u>About Us</u></h2>
Это сработает, только если вы хотите дважды подчеркнуть его в HTML.
Поделиться Aqsa Shahzadi 17 октября 2019 в 09:21
Похожие вопросы:

Экранирование символа двойной кавычки в XML
Есть ли escape-символ для двойной кавычки в xml? Я хочу написать тег типа: <parameter name=Quote = > но если я ставлю , то это означает, что строка закончилась. Мне нужно что-то вроде этого…

Как удалить двойной тег html <strong> из строки в C#
Я хочу сделать поиск на моем сайте ASP.NET MVC 3, поэтому для поиска я должен найти совпадающие шаблоны и в этих словах заменить совпадающую часть на ту же часть жирным шрифтом(я использую этот тег…

Где включить Шаблоны подчеркивания?
Какое самое лучшее место в документе для включения шаблонов подчеркивания Javascript? До сих пор я видел шаблоны, включенные в тег <head> или <body> . Что более уместно? Есть ли…

wysihtml5 — как отключить тег подчеркивания
У меня есть небольшая проблема с wysihtml5 на моем сайте. Я хочу разрешить только несколько тегов html, и если я удалю подчеркивание из правил парсера и даже команду подчеркивания из библиотеки…

Это все еще нестрочный тег или он означает что-то еще?
Я искал, чтобы использовать ползунок Jssor, и, просматривая код, я нашел тег <span u=arrowleft…> (который можно увидеть в этом другом вопросе: как переместить промежуток в другое положение в…

Длинный тег подчеркивания, а не <u>
Как мне добиться серого подчеркивания в приветственной части сайта? Я забыл тег, он в основном создает линию на всем протяжении page/div/table, что бы вы ни хотели. Сайт(где написано Добро…

JavaFX Текст Двойной Интервал Подчеркивания
У меня есть метка в приложении JavaFX, к которой мне тоже нужно применить двойное подчеркивание. Я знаю, что это невозможно сделать с базовым свойством, но вместо этого я применил к метке следующий…

Как сделать тег подчеркивания совместимым со всеми браузерами
Я использую атрибуты управления html в файле xml, как показано ниже <p> The quick <u><a href=http://querty.com/ target=_blank></a>brown fox jumps </u> over the lazy…

VBS Regex получение подчеркивания из строки
У меня есть простой результат для обнаружения части имени файла. Мои файлы имеют свое общее имя (FILENAME), второе имя (SECONDNAME#) и последний тег, все ссылки подчеркнуты. Я ищу второе имя,…

Какой тег HTML5 использовать для подчеркивания и обсуждения слова?
Когда я хочу подчеркнуть или обсудить слово, которое связано с компьютерным кодом внутри блока обычного текста, я использую тег <code> . Например: Если вы установите переменную foo в значение…
Основы редактирования текста в HTML — Изучение веб-разработки
Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать HTML, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.
Предварительные требования: Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача: Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..
Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, или газету, или учебник, журнал и т.д.
Упорядоченный контент делает чтение более лёгким и приятным.
В HTML каждый абзац заключён в элемент <p>, подобно:
<p>Я параграф, да, это я.</p>
Каждый заголовок заключён в элемент заголовка <h2> (en-US):
<h2>Я заголовок истории.</h2>
Имеется шесть элементов заголовка: <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US) и <h6> (en-US). Каждый элемент представляет разный уровень контента в документе; <h2> представляет главный заголовок, <h3> представляет подзаголовки, <h4> представляет под-подзаголовки и так далее.
Создание иерархической структуры
Например, в рассказе <h2> будет представлять заглавие рассказа, <h3> обозначит название каждой главы, <h4> будет обозначать подзаголовки в каждой главе и так далее.
<h2> Сокрушительная скука </ h2> <p> Крис Миллс </ p> <h3> Глава 1: Тёмная ночь </ h3> <p> Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ... </ p> <h3> Глава 2: Вечное молчание </ h3> <p> Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ... </ p> <h4> Призрак говорит </ h4> <p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» </ p>
Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.
Предпочтительнее использовать <h2> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте <h4> для создания подзаголовков при одновременном использовании <h3> для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.
Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.
Зачем нам необходима структура?
Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).
Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!
Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац. Более того:
Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (Search Engine Optimization — поисковая оптимизация).
Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
Чтобы стилизовать контент с помощью CSS или сделать его интересным с помощью JavaScript, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.
Поэтому нужно дать структурную разметку нашему контенту.
Активное изучение: создание структуры для нашего контента
Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».
Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки Сбросить. Если вы застряли, нажмите кнопку Показать решение, чтобы увидеть ответ.
Почему мы нуждаемся в семантике?
Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)
В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент <h2> (en-US) также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».
<h2>Это заголовок верхнего уровня</h2>
По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS). Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).
С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня. Рассмотрим следующее:
<span>Это заголовок верхнего уровня?</span>
Это элемент <span>. У него нет семантики. Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше. Рекомендуется использовать соответствующий элемент HTML на практике.
Теперь обратим наше внимание на списки. Списки есть везде вокруг нас — от вашего списка покупок до списка направлений, которым вы подсознательно следуете, чтобы каждый день добраться домой, и списка инструкций, которые вы выполняете в этом руководстве! Списки используются всюду в Интернете, и мы рассмотрим три разных типа списков.
Неупорядоченные
Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:
молоко яйца хлеб хумус
Каждый неупорядоченный список начинается с элемента <ul> (unordered list) — он обёртывает все элементы списка: молоко, яйца, хлеб, хумус.
Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент <li> (элемент списка):
<ul> <li>молоко</li> <li>яйца</li> <li>хлеб</li> <li>хумус</li> </ul>
Активное изучение: разметка неупорядоченного списка
Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.
Упорядоченные
Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:
Двигайтесь до конца дороги Поверните направо Езжайте прямо через первые два перекрёстка с круговым движением Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дороге
Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент <ol> (ordered list), а не <ul>:
<ol> <li>Двигайтесь до конца дороги</li> <li>Поверните направо</li> <li>Езжайте прямо через первые два перекрёстка с круговым движением</li> <li>Поверните налево на третьем перекрёстке</li> <li>Школа справа от вас, в 300 метрах вверх по дороге</li> </ol>
Активное изучение: разметка упорядоченного списка
Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.
Активное изучение: разметка собственной страницы рецептов
Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.
Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.
Вложенные списки
Вполне нормально вложить один список в другой. Возможно, вы захотите, чтобы один список располагался внутри другого. Давайте возьмём второй список из нашего примера рецепта:
<ol> <li>Очистите чеснок от кожуры и крупно нарежьте.</li> <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li> <li>Добавьте все ингредиенты в пищевой комбайн.</li> <li>Измельчите все ингредиенты до состояния пасты.</li> <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li> <li>Если вам нужен гладкий хумус, измельчайте дольше.</li> </ol>
Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего. Это будет выглядеть так:
<ol> <li>Очистите чеснок от кожуры и крупно нарежьте.</li> <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li> <li>Добавьте все ингредиенты в пищевой комбайн.</li> <li>Измельчите все ингредиенты до состояния пасты. <ul> <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li> <li>Если вам нужен гладкий хумус, измельчайте дольше.</li> </ul> </li> </ol>
Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.
В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространённых.
Акцент
Когда мы хотим добавить акцент в разговорный язык, мы подчёркиваем определённые слова, тонко изменяя смысл того, что мы говорим. Точно так же на письменном языке мы склонны подчёркивать слова, выделяя их курсивом. Например, следующие два предложения имеют разные значения.
Я рад, что ты не опоздал.
Я рад, что ты не опоздал.
В первом предложении звучит искреннее облегчение, что человек не опоздал. Во втором, напротив, звучит сарказм или пассивная агрессия: так выражена досада от того, что человек немного опоздал.
В таких случаях в HTML используется элемент <em> (выделение). Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном. Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив. Для выделения курсивом вы можете использовать элемент <span> и CSS, или, возможно, элемент <i> (en-US) (смотрите ниже).
<p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p>
Важное значение
Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и выделять жирным на письменном языке. Например:
Эта жидкость очень токсична.
Я рассчитываю на вас. Не опаздывай!
В таких случаях в HTML используется элемент <strong> (важное значение). Помимо того, что документ становится более полезным, они распознаются программами, считывающими с экрана, и говорят другим тоном. Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить жирный шрифт. Для получения жирного шрифта вы можете использовать элемент <span> и CSS, или, возможно, элемент <b> (смотрите ниже).
<p>Эта жидкость <strong>очень токсична</strong>.</p> <p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p>
При желании вы можете вложить важные и акцентированные слова друг в друга:
<p>Эта жидкость <strong>очень токсична</strong> — если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p>
Активное изучение: Давайте будем важны!
В этом разделе активного обучения мы предоставили редактируемый пример. Внутри него мы хотели бы, чтобы вы попытались добавить акцент и большую важность для слов, которые, по вашему мнению, им нужны, просто для того, чтобы попрактиковаться.
Курсив, жирный шрифт, подчеркивание…
Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике. Ситуация с <b>, <i> (en-US) и <u> несколько сложнее. Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчёркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.
HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.
Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.
<i> (en-US) используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли …
<b> используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения …
<u> используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка …
Предупреждение о подчёркивании: люди сильно ассоциируют подчёркивание с гиперссылками. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.
<p> Колибри обыкновенный (<i>архилоус обыкновенный</i>) — наиболее часто встречающийся вид колибри в северо-восточной Америке. </p> <p> Случился прилив иностранных слов, таких как <i lang="uk-latn">vatrushka</i>, <i lang="id">nasi goreng</i> и <i lang="fr">soupe à l'oignon</i>. </p> <p> Когда-нибудь я узнаю, как <u>гаварить</u> без ошибок. </p> <ol> <li> <b>Отрежьте</b> два ломтика хлеба. </li> <li> <b>Добавьте</b> кусочек помидора и лист латука между ломтями хлеба. </li> </ol>
Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете.
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: язык разметки гипертекста
Элемент HTML Unarticulated Annotation ( ) представляет собой диапазон встроенного текста, который должен отображаться таким образом, чтобы указать, что он имеет нетекстовую аннотацию. По умолчанию это отображается как простое сплошное подчеркивание, но его можно изменить с помощью CSS.
Этот элемент раньше назывался элементом «Подчеркнутый» в старых версиях HTML, но до сих пор иногда используется неправильно.Чтобы подчеркнуть текст, вы должны вместо этого применить стиль, который включает свойство CSS text-decoration , для которого установлено значение underline .
См. Раздел «Примечания по использованию» для получения дополнительной информации о том, когда целесообразно использовать , а когда нет.
Наряду с другими элементами чистого стиля, исходный элемент подчеркивания HTML ( ) объявлен устаревшим в HTML 4; однако был восстановлен в HTML 5 с новым семантическим значением: пометить текст как имеющий некоторую форму нетекстовой аннотации.
Будьте осторожны, избегайте использования элемента с его стилем по умолчанию (подчеркнутого текста) таким образом, чтобы его можно было спутать с гиперссылкой, которая также по умолчанию подчеркнута.
Сценарии использования
Допустимые варианты использования элемента включают аннотирование орфографических ошибок, применение метки имени собственного для обозначения имен собственных в китайском тексте и другие формы аннотации.
Вы должны , а не использовать для подчеркивания текста в презентационных целях или для обозначения названий книг.
Другие элементы, которые следует учитывать при использовании
В большинстве случаев следует использовать элемент, отличный от , например:
для обозначения акцента напряжений
, чтобы привлечь внимание к тексту
<отметка> для обозначения ключевых слов или фраз
указывает на важность текста
для обозначения названий книг или других публикаций
для обозначения технических терминов, транслитерации, мыслей или названий судов в западных текстах
Чтобы предоставить текстовые аннотации (в отличие от нетекстовых аннотаций, созданных с помощью ), используйте элемент .
Чтобы применить подчеркнутый внешний вид без какого-либо семантического значения, используйте значение свойства text-decoration underline .
Указывает на орфографическую ошибку
В этом примере используется элемент и некоторый CSS для отображения абзаца, который содержит ошибку написания с ошибкой, указанную в стиле красной волнистой линии подчеркивания, который довольно часто используется для этой цели.
HTML
Этот абзац включает предупреждение написанное слово.
В HTML мы видим использование с классом с написанием , который используется для обозначения неправильного написания слова «неправильно».
CSS
u.spelling { оформление текста: красное волнистое подчеркивание; }
Этот CSS указывает, что когда элемент оформлен с использованием класса с написанием , он должен иметь красную волнистую линию подчеркивания под его текстом. Это распространенный стиль для орфографических ошибок.Другой распространенный стиль может быть представлен с использованием красной пунктирной линии подчеркивания .
Результат
Результат должен быть знаком любому, кто использовал любой из наиболее популярных текстовых процессоров, доступных сегодня.
Избегайте
В большинстве случаев вы действительно не хотите использовать . Вот несколько примеров, которые показывают, что вам следует делать вместо этого в нескольких случаях.
Несемантическое подчеркивание
Чтобы подчеркнуть текст без какого-либо семантического значения, используйте элемент со свойством text-decoration , установленным на «подчеркивание» , как показано ниже.
HTML
Сегодняшнее специальное предложение Куриный суп с лапшой и морковью
CSS
.underline { оформление текста: подчеркивание; }
Результат
Представляем название книги
Названия книг должны быть представлены с использованием элемента вместо или даже .
HTML
Класс прочитал Моби Дик в первом семестре.
Результат со стилем по умолчанию
Обратите внимание, что стиль по умолчанию для элемента отображает текст курсивом. Вы можете, если хотите, переопределить это, используя CSS:
cite { стиль шрифта: нормальный; оформление текста: подчеркивание; }
Результат с нестандартным стилем
Таблицы BCD загружаются только в браузере
Как подчеркнуть текстовое содержимое с помощью HTML?
Как подчеркнуть текстовое содержимое с помощью HTML?
В этой статье мы создадим подчеркнутый текст с помощью тега в документе.Он обозначает подчеркивание и используется для подчеркивания текста, заключенного в тег . Этот тег обычно используется для подчеркивания слов с ошибками. Для этого тега требуется как начальный, так и конечный тег.
Синтаксис:
Содержание ...
Пример 1: В этом примере тег используется для создания подчеркнутого текста.
html

< html >
< 0009 >
Как подчеркнуть текст
содержимое с помощью HTML?
название >
< стиль >
выровнять:
1 центр текста
1 центральный текст
}
.gfg {
font-size: 40px;
font-weight: жирный;
цвет: зеленый;
}
.geeks {
font-size: 25px;
font-weight: жирный;
}
p {
font-size: 20px;
}
стиль >
головка >
> корпус < div class = "gfg" > GeeksforGeeks
000 0009000 0000000000009000 div class = "компьютерщиков" >
HTML5: как подчеркнуть текст
в документе HTML

< п >
9 0009 GeeksforGeeks: A < u > компьютер
наука u > портал для компьютерных фанатов
18 p> body >
html >
Вывод:
Пример 2 тег для подчеркивания текста.В этом примере мы будем использовать свойство CSS text-decoration для подчеркивания текстового содержимого.

html

< html >
0009 title >
Как подчеркнуть текст
контент с помощью HTML?
название >
< стиль >
выровнять:
1 центр текста
1 центральный текст
}
.gfg {
font-size: 40px;
font-weight: жирный;
цвет: зеленый;
}
.geeks {
font-size: 25px;
font-weight: жирный;
}
p {
font-size: 20px;
}
диапазон {
текст-оформление: подчеркнутый;
}
стиль >
головка >
> корпус < дел класс = "gfg" > GeeksforGeeks
000 000 000000000000000 div class = "компьютерщиков" >
HTML5: как подчеркнуть
текст в документе HTML
< п > 9 0009 GeeksforGeeks: A < span > компьютерные науки span > портал для geeks 000 000000 000 000 >
body >
html >
Поддерживаемые браузеры:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
HTML-тег »
Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Подробнее
Элемент
Узнайте, как шрифты и веб-типографика работают в HTML: руководство для начинающих
Что делает тег HTML ?
Элемент изначально использовался для обозначения текста, который должен быть подчеркнут. Этот элемент устарел в HTML 4.01, но в HTML5 он был переопределен для представления текста, который должен отображаться в виде неартикулированного , но стилистически отличного от окружающего текста. Например, одним из правильных способов использования элемента является определение терминов с ошибками.
Дисплей
встроенный
Использование
семантика
Пример кода
Вот слово, подчеркнутое с помощью & lt; u & gt; элемент. Вот слово, которое подчеркнуто с помощью CSS. Вот слова, окруженные тегами & lt; u & gt; со стилем без артикуляции, но с явным отображением . <стиль> .underline { оформление текста: подчеркивание; } u.unarticulated { текстовое оформление: нет; цвет: # 000080; стиль шрифта: курсив; }
Вот слово , подчеркнутое элементом .
Вот слово, подчеркнутое с помощью CSS.
Вот слова, окруженные тегами с неартикулированными, но явно отображенными стилями .
Когда использовать элемент

Когда изначально задумывался элемент , его предполагалось использовать для идентификации текста, который должен быть подчеркнут.Однако использование HTML для добавления стилистических эффектов больше не считается хорошей практикой. Вместо этого следует использовать HTML для добавления структуры и семантического значения к содержимому веб-страницы, а CSS следует использовать для добавления стилей и макета страницы управления.
Это означает, что старые теги, такие как , которые изначально были задуманы с учетом представления, должны быть переделаны с семантическим значением или исключены и удалены из спецификации HTML.
Итак, какое семантическое значение этот элемент передает в современном HTML? Согласно спецификации HTML5, опубликованной W3C:
Элемент u представляет собой отрезок текста с неартикулированной, хотя и явно визуализированной, нетекстовой аннотацией…
Вы сожалеете, что даже спросили, не так ли? Давайте немного поясним это определение.
Во-первых, что такое нетекстовая аннотация? Что ж, добавить аннотацию - значит добавить пояснение или примечание. Однако в этом случае аннотация не является текстовой, что означает, что аннотация не имеет ничего общего с содержанием текста.
Во-вторых, аннотация - это неартикулированная , но явно отрисованная. Другими словами, браузер и веб-разработчик могут выбрать отображение аннотации любым способом. По умолчанию браузеры будут отображать текст, окруженный тегами и , как подчеркнуто, но это не обязательно и не является частью спецификации HTML.Аннотации должны выглядеть так: unarticulated , покажите как хотите. Просто убедитесь, что аннотацию легко обнаружить, другими словами: явно отрисовано .
Давайте сложим по кусочкам. Элемент u используется для:
Добавить аннотацию, которая сообщает нам что-то о самом выделенном тексте, а не о содержании или сообщении текста.
Способ добавления аннотации не сформулирован. Слова между тегами и не должны быть подчеркнуты, любой метод аннотации приемлем, если…
Аннотации должны быть явно отображены, то есть: их легко заметить.
Итак, какие варианты использования существуют для такого нишевого тега? Чаще всего используется для определения слов с ошибками. Допустим, вы представляете текст, который содержит слова с намеренными ошибками, которые должны броситься в глаза читателю. Элемент будет отличным выбором для идентификации этих слов.
Адам - технический писатель, специализирующийся на документации и учебных пособиях для разработчиков.
Как выделить жирным шрифтом, курсивом и иным образом отформатировать текст в HTML
Работая почти исключительно в Google Docs и CMS Hub, я привык выделять текст жирным шрифтом, курсивом и подчеркивать одним нажатием кнопки.
Но что, если ваша панель инструментов не предлагает тот вариант форматирования, который вам нужен? Или вы не работаете в текстовом редакторе или системе управления контентом?
Нет проблем. Все, что вам нужно, это немного HTML и CSS. Ниже мы обсудим некоторые варианты использования форматирования текста. Затем мы рассмотрим процесс создания полужирного, курсивного, подчеркнутого, перечеркнутого, подстрочного и надстрочного текста.
Примечание : я буду использовать онлайн-редактор кода W3Schools, чтобы создать примеры ниже.Вы можете щелкнуть любую ссылку на источник, чтобы увидеть полный фрагмент кода, стоящий за примером, и попробовать свой собственный.
Форматирование текста в HTML
Форматированный текст может использоваться для различных целей. Он может привлечь внимание читателя к определенным частям документа. Это может подчеркнуть важную информацию. Он может выделить определенные слова в абзаце, например заголовок, ключевое слово, мысль или фразу на другом языке.
На снимке экрана ниже показано введение из книги «Наиболее важные различия между Squarespace и WordPress».Обратите внимание, что «Squarespace» и «WordPress» выделены жирным шрифтом. Это помогает выделить основную тему сообщения в блоге и отличает эти два ключевых слова от неформатированных абзацев, а также от форматированной внутренней ссылки и CTA.
Давайте посмотрим, как выделить текст в HTML полужирным шрифтом, чтобы воссоздать этот эффект в сообщениях своего блога или где-либо еще на своем веб-сайте.
Как выделить текст в HTML полужирным шрифтом
Есть несколько способов выделить текст в HTML полужирным шрифтом.Вы можете использовать сильный тег, чтобы указать, что текст имеет большую важность или срочность. Браузеры прочитают этот тег и выделят текст полужирным шрифтом. Если вы хотите выделить текст полужирным шрифтом просто для украшения, вы должны использовать свойство CSS font-weight и установить для этого свойства значение «полужирный».
Есть еще один способ выделить текст в HTML полужирным шрифтом: тег . Но это должно использоваться только в крайнем случае, потому что это может затруднить локализацию контента и будущую проверку в соответствии со спецификацией HTML5.По этой причине мы будем показывать только примеры с использованием тега и свойства CSS font-weight.
Как выделить текст в HTML полужирным шрифтом с помощью сильного элемента
Если вы хотите определить особо важный текст, вы можете поместить его в теги. Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.
Вот HTML:
Использование сильного элемента HTML Это нормальный абзац. Этот абзац очень важен!
Вот результат:
Источник изображения
Как выделить текст в HTML полужирным шрифтом с помощью свойства CSS Font-Weight
Если вы хотите просто выделить текст жирным шрифтом для украшения, вы должны использовать свойство CSS font-weight вместо сильного элемента HTML. Допустим, вы хотите выделить слово в абзаце жирным шрифтом. Затем вы должны заключить слово в теги span и использовать селектор CSS, чтобы применить свойство font-weight только к элементу span.
Вот код CSS:
span { font-weight: bold; }
Вот HTML:
Использование свойства CSS Font-Weight Это ключевое слово , поэтому я хочу выделить его жирным шрифтом с помощью CSS.
Вот результат:
Источник изображения
Как выделить текст в HTML курсивом
Есть несколько способов выделить текст в HTML курсивом.Вы можете использовать тег em, чтобы указать, что в тексте выделено ударение. Браузеры прочитают этот тег и выделят текст курсивом. Если вы хотите выделить текст курсивом просто для украшения, вы должны использовать свойство CSS font-style и установить для этого свойства значение «курсив».
Есть еще один способ выделить текст в HTML курсивом: тег . Как и тег , он предназначен для использования в крайнем случае. По этой причине мы будем показывать только примеры с использованием тега и свойства CSS font-weight.
Как выделить текст в HTML курсивом с помощью элемента акцента
Если вы хотите определить текст с акцентом на ударение, вы можете поместить текст внутри тегов . Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.
Вот HTML:
Использование элемента выделения HTML Это нормальный абзац. Этот абзац выделен!
Вот результат:
Источник изображения
Как выделить текст в HTML курсивом с помощью свойства стиля шрифта CSS
Если вы хотите просто выделить текст курсивом для украшения, вы должны использовать свойство CSS font-style вместо элемента выделения HTML.Следуя приведенному выше полужирному примеру, скажем, вы хотите выделить слово в абзаце курсивом. Затем вы должны заключить слово в теги span и использовать селектор CSS, чтобы применить свойство font-style только к элементу span.
Вот код CSS:
диапазон { шрифт: курсив; }
Вот HTML:
Использование свойства CSS Font-Style Иди в школу сейчас ! Я хотел, чтобы читатель услышал это слово другим тоном, поэтому я выделил его курсивом с помощью CSS.
Вот результат:
Источник изображения
Как подчеркнуть текст в HTML
Чтобы подчеркнуть текст в HTML, используйте свойство CSS text-decoration и установите для этого свойства значение «подчеркивание».
Есть еще один способ подчеркнуть текст в HTML: элемент . Но это не должно использоваться для подчеркивания текста в презентационных целях. Вместо этого элемент предназначен для конкретных случаев использования, таких как разметка слов с ошибками, обозначение собственных имен в китайском тексте или обозначение фамилий.
Рассмотрим оба метода ниже.
Как подчеркнуть текст в HTML с помощью неартикулированного элемента аннотации
Если вы хотите представить текст, который не артикулирован или имеет нетекстовую аннотацию, вы можете поместить текст внутри тегов . Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.
Вот HTML:
Использование неартикулированного элемента аннотации HTML В этом абзаце нет орфографической ошибки. В этом абзаце есть орфографические ошибки .
Вот результат:
Источник изображения
Как подчеркнуть текст в HTML с помощью свойства CSS Text-Decoration
Если вы хотите подчеркнуть текст для украшения, а не для представления нетекстовой аннотации, вы должны использовать свойство CSS text-decoration. Вы также можете использовать это свойство для представления орфографической ошибки, как это делает текстовый процессор.
Поскольку text-decoration является сокращенным свойством для text-decoration-line, text-decoration-color и text-decoration-style, вы можете подчеркнуть орфографическую ошибку красной волнистой линией и грамматическую ошибку зеленой линией, Например.
В приведенном ниже примере мы заключим слова в теги span с различными атрибутами класса. Таким образом, мы можем применить к каждому из них уникальные свойства стиля. Мы также будем использовать шестнадцатеричные коды цветов для красного и зеленого.
Вот код CSS:
.орфография { text-decoration: # FF0000 волнистое подчеркивание; } .grammar { оформление текста: # 008000 волнистое подчеркивание; }
Вот HTML:
Использование свойства CSS Text-Decoration В этом абзаце неправильное написание . В этом абзаце есть грамматическая ошибка .
Вот результат:
Источник изображения
Как отрисовать зачеркнутый текст в HTML
Существует несколько способов визуализации зачеркнутого текста в HTML, который представляет собой текст, отображаемый с горизонтальной линией поверх него.Вы можете использовать тег , чтобы указать, что текст теперь неверный, неточный или нерелевантный. Если вы хотите указать текст, который был удален, используйте тег .
Если вы хотите, чтобы текст был зачеркнут по другой причине, вы должны использовать свойство CSS text-decoration-line и установить для этого свойства значение «line-through».
Важно отметить, что раньше был еще один элемент: HTML-элемент . Но с тех пор это устарело и больше не является жизнеспособным вариантом для визуализации зачеркнутого текста.
~~Давайте посмотрим на примеры трех методов, поддерживаемых в текущей версии HTML.~~
~~Как зачеркнуть текст в HTML с помощью зачеркнутого элемента~~
Если вы хотите зачеркнуть текст, чтобы показать, что он больше не является правильным, точным или релевантным, вы можете поместить текст внутри тегов . Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.
~~Вот HTML:~~
~~Использование зачеркнутого HTML-элемента Еще есть несколько лепешек. ПРОДАНО~~
~~Вот результат:~~
~~Источник изображения~~
~~Как зачеркнуть текст в HTML с помощью удаленного текстового элемента~~
Если вы хотите зачеркнуть текст, чтобы показать, что он был удален, вы можете поместить текст внутри тегов . Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.
~~Вот HTML:~~
Использование удаленного текстового элемента HTML Событие начинается с 7 p.м. ET 18:00 ET. Приносим извинения за ошибку.
~~Вот результат:~~
~~Источник изображения~~
~~Как зачеркнуть текст в HTML с помощью свойства CSS Text-Decoration-Line~~
~~Если вы хотите зачеркнуть текст для другой цели, вы должны использовать свойство CSS text-decoration-line.~~
В приведенном ниже примере мы включим имена классов рядом с некоторыми элементами списка. Таким образом, мы можем применить свойство text-decoration-line к этим конкретным позициям, а не ко всему списку.
~~Вот код CSS:~~
~~.purchased { text-decoration-line: line-through; }~~
~~Вот HTML:~~
Использование свойства CSS Text-Decoration-Line Список покупок Халапеньо Сумка замороженной кукурузы сыр Cotija Mayo Chili Powder Cilantro Лайм
~~Вот результат:~~
~~Источник изображения~~
~~Как сделать текстовый индекс в HTML~~
Обычно отображается более мелким, но более толстым шрифтом, текст нижнего индекса появляется на полсимвола ниже нормальной строки.Его можно использовать для написания химических формул, математических уравнений, дробей и многого другого.
Для создания подстрочного текста в HTML используйте элемент _{. Ниже приведен пример, показывающий формулу создания угольной кислоты.}
~~Вот HTML:~~
Использование элемента нижнего индекса HTML Вот как это выглядит с тегом нижнего индекса. CO ₂ + H ₂ O ↔ H ₂ CO ₃ Вот как это выглядит без тега нижнего индекса. CO2 + h3O ↔ h3CO3
~~Вот результат:~~
~~Источник изображения~~
~~Как сделать текстовый надстрочный индекс в HTML~~
Обычно отображается более мелким, но более толстым шрифтом, надстрочный текст появляется на полсимвола над нормальной линией. Его можно использовать для написания сносок, авторских прав, зарегистрированных товарных знаков, а также некоторых химических формул.
Чтобы создать надстрочный текст в HTML, используйте элемент ^{.Ниже приведен пример, который показывает всю формулу создания бикарбонат-иона.}
~~Вот HTML:~~
Использование элемента надстрочного индекса HTML Вот как это выглядит с тегами подстрочного и надстрочного индекса. CO ₂ + H ₂ O ↔ H ₂ CO ₃ ↔ H ⁺ + HCO ₃ ^- Вот как это выглядит без тегов. CO2 + h3O ↔ h3CO3 ↔ H + + HCO3
Форматируя текст любым из описанных выше способов, вы можете помочь своим читателям лучше понять и сохранить информацию с вашего сайта. Если вы хотите выделить ключевые слова жирным шрифтом или включить подстрочный индекс в химические формулы, форматирование текста требует только базовых знаний HTML и CSS.
~~Как подчеркивание в тексте может улучшить UX~~
Подчеркивание - это горизонтальная линия, расположенная непосредственно под частью текста.В повседневной жизни мы подчеркиваем, чтобы выделить ключевые части текста, иногда рисуя подчеркивание вручную под напечатанным текстом. Но у подчеркивания есть свое место в мире цифрового дизайна. Фактически, подчеркнутый текст стал одной из самых распространенных и узнаваемых особенностей нашего онлайн-опыта. Когда мы видим подчеркнутое слово или предложение на веб-странице, мы сразу же принимаем это за ссылку.
В этой статье я объясню концепцию подчеркивания и дам несколько советов о том, как использовать его для улучшения работы в Интернете.
~~Исторический контекст~~
Текст подчеркивался еще до изобретения Интернета. Его использовали дизайнеры полиграфии, чтобы выделить важные части текста.
Изображение Marcin Wichary
Было использовано в рекламе.
Реклама Wrigley’s Spearmint (1915 г.).
Мы даже находим это в нашем ближайшем окружении.
Некоторые дорожные знаки с важной информацией содержат подчеркнутый текст. Изображение Тайлера Б.
Сегодня дизайнеры обычно не подчеркивают текст для выделения, потому что такой стиль считается отвлекающим.
Подчеркивание ссылок
Когда Тим Бернерс-Ли впервые представил концепцию Всемирной паутины в 1991 году, он заявил: «[Всемирная паутина] состоит из документов и ссылок». С тех пор ссылки стали фундаментальным элементом онлайн-опыта, клеем, скрепляющим Интернет.
Набор инструментов первых веб-дизайнеров был слишком ограничен - только простые шрифты и ограниченное количество цветов (цветные мониторы отображали только 16 цветов, а многие были только черно-белыми).Но акцент на ссылках с другим стилем был необходим, чтобы ранние последователи могли понять, какие элементы на странице важны. Самым простым решением было подчеркнуть. С тех пор подчеркивание текста стало стандартным украшением гиперссылок HTML. И хотя дизайнеры пробовали разные стили для ссылок в течение последних 30 лет, многие веб-дизайнеры по-прежнему предпочитают подчеркивание.
Гиперссылка, подчеркнутая синим цветом, является одним из наиболее широко понимаемых правил Интернета. Изображение Cern
Подчеркнутые ссылки имеют несколько основных преимуществ.
Знакомство. Подчеркивание - это одно из наиболее широко используемых в Интернете правил. Подчеркивание обеспечивает очевидную возможность кликабельности - подавляющее большинство пользователей понимают, что подчеркнутый текст является ссылкой.
Сканируемость. Подчеркнутый текст - отличный визуальный сигнал, который гарантирует видимость ссылки при сканировании текста. Когда мы сканируем страницы по вертикали, любая горизонтальная линия будет проходить прямо через линию нашего обзора. Подчеркивание направляет пользователей к важной информации во время беглого просмотра.
Доступность. Когда для различения интерактивных элементов используется только цвет, у некоторых групп пользователей (например, дальтоников) могут возникнуть проблемы с идентификацией ссылок. Согласно WCAG 2.0, цвет не должен быть единственным визуальным индикатором потенциального действия. Если вы хотите, чтобы ваш веб-сайт был доступен, вам придется добавить еще одну визуальную подсказку к ссылкам, и подчеркивание - логичный выбор.
Несмотря на все свои преимущества, подчеркивание может в некоторой степени затруднить взаимодействие с пользователем.
Читаемость. Прерывистый характер подчеркивания отлично подходит для беглого бега, но может повлиять на удобочитаемость. Исследование Гамбургского университета показывает, что подчеркивание пагубно влияет на читаемость текста. Основываясь на исследовании, избегайте подчеркивания, когда основная цель содержания - понимание.
Эстетика. Подчеркивание добавляет визуального шума к тексту и общему дизайну. Большое количество подчеркиваний, распространенных по всему блоку текста, может сделать вид занятым.
Создание идеального подчеркивания
Прежде чем мы углубимся в детали создания идеального подчеркивания, стоит определить нашу цель. Мы хотим создать заметное, но ненавязчивое подчеркивание. Пользователи должны понимать, что элемент является интерактивным - когда они его видят, они должны сразу понимать, что это ссылка, - но он не должен привлекать к себе слишком много внимания или выделяться.
Не подчеркивайте текст, не являющийся ссылкой.
Не подчеркивайте текст, не являющийся ссылкой (даже если ваши ссылки не подчеркнуты).Подчеркивание обеспечивает очевидную возможность кликабельности, и пользователи будут сбиты с толку и расстроены, если подчеркнутый текст не соответствует их ожиданиям. Если вам нужно выделить определенные слова или предложения, гораздо безопаснее использовать курсив или полужирный шрифт.
Будьте короче
Старайтесь, чтобы связанные фразы были короткими, от трех до пяти слов. Все остальное загромождает текст.
Сделайте текст привязки осмысленным
Текст привязки - это интерактивный текст в ссылке.Он должен быть описательным - пользователи должны уметь предугадывать, что они получат, щелкнув ссылку. По этой причине избегайте якорного текста, такого как «щелкните здесь», потому что он почти ничего не говорит о содержании ссылки и заставляет пользователей искать дополнительную информацию о том, на что именно они будут нажимать. Ссылки «Щелкните здесь» также делают веб-сайт менее доступным для людей, использующих программы чтения с экрана. Большинство программ чтения с экрана говорят «ссылка» перед каждой ссылкой. Например, ссылка «автомобили» будет прочитана JAWS как «ссылочные автомобили».Таким образом, вы можете ожидать, что JAWS прочитает ссылку «нажмите здесь» как «ссылку нажмите здесь», что совершенно неинформативно.
Согласно «Руководству для начинающих по поисковой системе» Google, размещение слов, предвосхищающих целевую страницу, в начале текста ссылки имеет решающее значение.
Само по себе «щелкнуть здесь» совершенно бессмысленно. Вторая ссылка устанавливает ожидание того, что пользователь получит, щелкнув ссылку.
Последовательное проектирование ссылок
Последовательность - ключ к обучению пользователей тому, как ссылки выглядят на вашем веб-сайте.Не должно быть ситуации, когда некоторые ссылки на вашем веб-сайте подчеркнуты, а некоторые - нет. Использование разных визуальных обозначений на разных страницах может легко запутать посетителей. Выберите дизайн ссылки и придерживайтесь его.
Согласованность дизайна важна не только для небольших веб-сайтов. Например, разные разделы веб-сайта CNN имеют разные стили для ссылок. В стиле CNN используется подчеркнутый текст.
Все ссылки в статье подчеркнуты (см. Пример «Давид де Руэда»).Между тем CNN Sport использует цвет, чтобы визуально различать ссылки. Все ссылки в статье визуально разделены другим цветом (см. «ЧИТАЙТЕ: Внутри Кодокана - духовного дома дзюдо»).
Избегайте сбоев устройства опускания
Отказ устройства опускания - это, пожалуй, вторая по значимости проблема, вызванная подчеркиванием (после беспорядка). Это происходит, когда символы, содержащие нижние элементы (например, строчные p, g, j, y и q), не учитываются, а подчеркивание касается букв.Это может привести к беспорядку и уродливому виду и сделать текст менее разборчивым.
Нижние элементы y, g и p врезаются в подчеркивание, что ухудшает читаемость.
Хорошее подчеркивание располагается ниже базовой линии и пропускает нижние элементы. Скрытие подчеркивания под некоторыми символами не только улучшит читаемость, но и будет выглядеть более изысканно.
Вот пример подчеркнутого текста в Adobe XD. Подчеркивание используется только там, где оно не касается глифа и не приближается к нему.
Как предотвратить сбой устройства для спуска? Ссылки в Интернете имеют свойство text-decoration - по умолчанию подчеркивание CSS.К сожалению, это свойство не учитывает нижние элементы.
Среди решений, решающих эту проблему, самым простым является свойство CSS text-decoration-skip. Он указывает, какие части содержимого элемента следует пропускать при оформлении текста. Он контролирует все линии оформления текста, нарисованные элементом, а также любые линии оформления текста, нарисованные его предками.
Свойство text-decoration-skip пока поддерживается не всеми браузерами. Альтернативы (такие как box-shadow) стоит изучить, если ваш текст трудно читать без него.
Если ваш браузер поддерживает свойство пропуска text-decoration, вы заметите, что нижние элементы (например, y и p) имеют небольшое белое пространство вокруг них.
Color
Color - мощный инструмент в наборе дизайнеров. Его можно использовать, чтобы отличать ссылки от другого текста.
Избегайте раскрашивания неинтерактивного текста
Избегайте раскрашивания текста, если это не ссылка, потому что посетители могут легко принять цветной текст за ссылку.
Ссылки должны быть синими?
Не обязательно.По словам Якоба Нильсена, «оттенки синего обеспечивают самый сильный сигнал для ссылок, но другие цвета работают почти так же». Однако, если вы можете выбрать цвет для ссылок, лучше всего всегда будет синий. Это по-прежнему цвет с самой сильной предполагаемой возможностью кликабельности - опытный веб-пользователь ассоциирует «синий и подчеркнутый» со ссылками. И у цвета есть одно существенное преимущество перед другими - он наиболее доступен для людей с дефицитом цвета (его могут видеть люди, страдающие протанопией и дейтеранопией).
Совет: Поскольку синий цвет сильно связан с кликабельностью, избегайте его для текста без ссылок, даже если синий не является выбранным вами цветом ссылки. Синий текст, на который нельзя нажать, вызывает разочарование.
Используйте разные цвета для посещенных и непосещенных ссылок
Визуальное различение посещенных и непосещенных ссылок упростит путь пользователя, поскольку пользователи смогут отслеживать то, что они видели. Два цвета должны быть вариантами или оттенками одного цвета, чтобы они были четко связаны.Цвет непосещенных ссылок должен быть более насыщенным, а цвет посещенных - немного более тусклым.
Не подчеркивать списки ссылок
Для списков, в которых каждый элемент является ссылкой, не подчеркивать. В этом случае макет четко указывает на функцию области.
Нет необходимости подчеркивать каждый элемент в этом списке. Изображение Wisegeek.
Рекомендации для мобильных устройств
Сегодня почти 50 процентов пользователей выходят в Интернет с мобильных устройств. Оптимизация работы в Интернете для мобильных пользователей - главный приоритет веб-дизайнеров.
Избегайте ссылок в мобильных приложениях
Не используйте подчеркнутые ссылки в мобильных приложениях. Подчеркнутые ссылки являются частью модели веб-сайта, а не модели приложения. В приложениях должны быть кнопки, а не ссылки.
Приложение TD Bank для iOS.
Сделайте ссылки достаточно большими
Использование большого пальца для нажатия ссылок может быть болезненным, особенно если у вас возникли проблемы с обнаружением ссылки, а затем вам нужно увеличить масштаб, чтобы нажать на нее. На сенсорном экране размеры объектов имеют решающее значение. Делайте интерактивные элементы достаточно большими, чтобы их было легко увидеть и с ними было легко взаимодействовать.
Заключение
Ссылки делают Интернет тем, чем он является. В своей классической книге о юзабилити Не заставляйте меня думать Стив Круг пишет: «Поскольку большая часть того, что люди делают в Интернете, - это поиск следующего объекта, на который нужно щелкнуть, важно сделать очевидным, что кликабельно. а что нет ». Надежный визуальный дизайн важен для радостного путешествия пользователя. Хотя у подчеркивания есть свои недостатки, оно остается одним из наиболее явных способов указать на наличие ссылки.Подчеркивание текста упрощает поиск и понимание ссылок для посетителей.
Оформление текста с помощью CSS
Оформление текста с помощью CSS
Web Review
Июнь 1998 г.
Вы, вероятно, украсили свой дом во время праздников или, возможно, для какой-то большой вечеринки (выпускной бал для выпускников, кто-нибудь?), И поэтому вы знаете, какой большой проблемой могут быть такие проекты. Распаковка безделушек, гирлянд или гофрированной бумаги, очистка ... этого достаточно, чтобы ты никогда не повторил этого снова.
К счастью, оформление текста не так сложно. На самом деле, это действительно довольно просто и может быть более полезным, чем горстка дешевых бумажных конфетти. Если подумать, то же самое и с большинством вещей, но теперь не обращайте на это внимания. Давайте посмотрим, как можно украсить текст и как использовать это в дизайне веб-страниц.
Станция декорирования
Речь идет о собственности текст-украшение . Его значение по умолчанию - none , что имеет смысл, так как обычно для большей части текста не требуется никакого специального оформления.
Первым исследуемым видом декора является , подчеркивание . Как и следовало ожидать, при этом текст будет подчеркнут. Если последние три слова в предыдущем предложении подчеркнуты, поздравляю - ваш браузер поддерживает text-decoration ! (Ну, во всяком случае, это большая часть.) Подчеркивание исторически редко использовалось в Интернете, если вы не учитываете подчеркивание ссылок.
До CSS1 единственным способом добиться подчеркивания было использование тега подчеркивания ( ), который время от времени поддерживался основными веб-браузерами и постоянно попадает в спецификацию HTML и выходит из нее.Начиная с HTML 4.0, тег подчеркивания устарел, что означает, что он полностью исключается из спецификации. Почему? Потому что CSS1 позволяет авторам подчеркивать все, что им нравится, без необходимости использования презентационных тегов.
Допустим, у нас есть документ, в котором мы хотим, чтобы все заголовки четвертого уровня были подчеркнуты. Декларация достаточно проста:
h5 {text-decoration: underline;}
Это еще один h5
И вот оно - подчеркнутые заголовки четвертого уровня!
Есть аналог подчеркивания - это подкладка.В этом случае линия рисуется над текстом, а не под ним. Почему это было включено в спецификацию? Что ж, это хороший вопрос, и на самом деле у меня нет ответа, но вы можете это сделать. Например:
h5 {text-decoration: overlie;}
Это h5
Хорошо, возможно, это не самый распространенный типографский эффект, но он может быть несколько интересным. Вы можете использовать его аналогично горизонтальным правилам, как своего рода разрыв между разделами.Что еще интереснее, вы можете использовать его в сочетании с подчеркиванием, например:
h5 {text-decoration: underline overlie;}
Это еще один h5
Это демонстрирует один из самых важных моментов в text-decoration : тот факт, что вы можете использовать любое или все его значения в любой комбинации и перечислять их в любом порядке. Ну да ладно, почти все его ценности. Если вы используете none , то это единственное значение, которое вы можете использовать. В противном случае используйте их все, если хотите.
Говоря об этом, мы должны взглянуть на два других значения text-decoration ...
Моргай, и ты можешь нанести удар
Поклонники навигатора радуются: самый известный тег, изобретенный Netscape, вошел в спецификацию CSS1. Правильно, одно из значений text-decoration - blink . Он имеет точно такой же эффект, что и тег , то есть Internet Explorer не поддерживает это значение text-decoration .Согласно спецификации этого делать не требуется; хотя браузеры должны распознавать значение, им не нужно ничего моргать.
Следовательно, только версии Netscape Navigator с поддержкой CSS1 будут видеть следующий эффект:
h5 {text-decoration: blink;}
Это может быть мигающий h5
Прекрасно, не правда ли?
Хорошо, это подводит нас к окончательному значению text-decoration , что составляет сквозных .Юридические библиотекари повсюду будут радоваться этому, потому что он дает эффект зачеркивания, столь любимый законодателями во всем мире. Для тех, кто не знаком с зачеркиванием, он просто рисует линию прямо посередине текста, например:
h5 {text-decoration: line-through;}
Это подбитый h5
Законодатели используют это, чтобы показать, где были изменены законы, печатая замененные части закона с зачеркиванием, как вы видите выше.Большинству из вас, вероятно, не понадобится использовать этот эффект, за исключением, возможно, написания юмористических произведений.
Использование украшений в дизайне страницы
Как мы уже видели, вы можете использовать подчеркивание, чтобы выделить такие вещи, как определенные уровни заголовков. Вы также можете решить, что выделенный текст должен быть подчеркнут в дополнение к любым другим эффектам, которые он имеет в данном браузере. Итак, вы можете попробовать это:
EM {text-decoration: underline;}
Приведенное выше правило придаст тегу дополнительный акцент .
Другой способ использования text-decoration - это повлиять на способ отображения привязок. Как вы, вероятно, знаете, у большинства людей браузеры настроены так, чтобы подчеркивать все гиперссылки, но другие этого не делают. До CSS1 действительно не было никакого способа что-либо с этим поделать. Теперь, однако, вы можете по крайней мере попытаться навязать читателю свою особую эстетику гиперссылок, возможно, вот так:
A {украшение текста: нет;}
Вышеупомянутое правило будет иметь эффект отключения подчеркивания ссылок в браузерах с поддержкой CSS1.И наоборот, объявление значения underline включит подчеркивание ссылок даже для тех, кто отключил его в настройках своего браузера. Вопрос о том, является ли что-то из этого хорошей идеей, является предметом жарких споров. Как всегда, вам решать, является ли данное использование таблиц стилей хорошей идеей или нет.
Заключение
Как мы видели, text-decoration можно использовать, чтобы немного оживить ваш текст. Конечно, есть и другие способы изменить внешний вид текста, и я надеюсь обсудить их в следующих статьях (или трех).Однако в следующий раз я буду рассматривать цвета в стиле CSS1, так что присоединяйтесь ко мне тогда!
Что такое подчеркивание?
Обновлено: 12.04.2021, Computer Hope
Подчеркнутый может относиться к любому из следующего:
1. Подчеркнутый - это фрагмент текста в документе, под словами которого проходит строка. Например, этот текст должен быть подчеркнут . Подчеркнутый текст обычно используется для привлечения внимания к тексту.Сегодня подчеркивание обычно используется для обозначения гиперссылки на веб-странице.
Что такое клавиша подчеркивания?
Нет клавиши подчеркивания ни на одной компьютерной клавиатуре. Однако некоторые пользователи могут называть клавишу подчеркивания клавишей подчеркивания. Инструкции по подчеркиванию текста см. В следующих разделах.
Создать подчеркнутый текст в HTML
Чтобы создать подчеркивание в HTML, вы можете использовать тег или CSS. Однако, как упоминалось ранее, имейте в виду, что большинство людей связывают подчеркивание с гиперссылкой, и любой другой подчеркнутый текст может сбивать с толку.
Этот текст должен быть подчеркнут
Создайте подчеркнутый текст в текстовом процессоре, например Microsoft Word
Ниже приведены общие шаги по созданию подчеркнутого текста в текстовом редакторе, таком как Microsoft Word, Google Docs или LibreOffice Writer.
Выделите текст, который нужно подчеркнуть.
Нажмите кнопку U , которая часто находится рядом с кнопками B и I , выделенными жирным шрифтом и курсивом, как показано на рисунке.
Как удалить подчеркивание в текстовом процессоре
Ниже приведены инструкции по удалению подчеркивания текста в текстовом редакторе, таком как Microsoft Word, Google Docs или LibreOffice Writer.
Выделите весь или часть подчеркнутого текста.
Щелкните кнопку U , которая часто находится рядом с кнопками B и I, выделенными жирным шрифтом и курсивом, как показано на рисунке.
Кончик
Сочетание клавиш для подчеркивания текста часто: Ctrl + U на ПК и Command + U на Mac.
2. Линия также может быть подчеркнута волнистой линией, чтобы указывать на ошибки в документе. Здесь изображены три подчеркивания разного цвета в документе Microsoft Word. Красное подчеркивание указывает на орфографические ошибки, зеленое подчеркивание - грамматические ошибки, а синее подчеркивание указывает на несогласованное форматирование.
BIU, полужирный, шрифт, курсив, линия, типографские термины, подчеркивание, термины текстового процессора
.

Как сделать подчеркнутый текст в html: Тег — подчёркнутый текст

Как сделать зачеркнутый текст в html

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

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

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

Как сделать зачеркнутый текст на css?

способы.

Подчеркнутый текст через html тег

Подчеркнутый текст через свойство CSS text-decoration

Подчеркнутый текст через свойство CSS border-bottom

Задача

Решение

Вариации подчеркивания

HTML

CSS

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

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

HTML — Форматирование текста html-документа и теги форматирования страницы / ProgLang

Полужирный или жирный текст

Пример

Курсив — наклонный текст или шрифт

Пример

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

Пример

Зачеркнутый текст

Пример

Моноширинный шрифт

Пример

Верхний индекс

Пример

Нижний индекс

Пример

Вставленный текст

Пример

Удаленный текст

Пример

Большой текст

Пример

Маленький текст

Пример

Группировка элементов и содержимого страницы в HTML

Пример с тегом <div>

Пример с тегом <span>

Поделитесь:

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

Заголовки текста разного уровня

Жирный, подчеркнутый текст, курсив

Изменяем размер шрифта

Как поменять цвет текста

Текст в таком виде как он был набран

Зачеркнутый текст

Двойной тег подчеркивания? — CodeRoad

9 ответов

используйте следующие http://jsfiddle.net/cKNP4/

или

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

Основы редактирования текста в HTML — Изучение веб-разработки

Создание иерархической структуры

Зачем нам необходима структура?

Активное изучение: создание структуры для нашего контента

Почему мы нуждаемся в семантике?

Неупорядоченные

Активное изучение: разметка неупорядоченного списка

Упорядоченные

Активное изучение: разметка упорядоченного списка

Активное изучение: разметка собственной страницы рецептов

Вложенные списки

Акцент

Важное значение

Активное изучение: Давайте будем важны!

Курсив, жирный шрифт, подчеркивание…

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

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

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

: элемент неартикулированной аннотации (подчеркивание) — HTML: язык разметки гипертекста

Сценарии использования

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

Указывает на орфографическую ошибку

HTML

CSS