Подчеркивание текста html: Тег | htmlbook.ru

Разное 

Подчеркивание в html: способы.

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

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

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

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

  1. <h2>Заголовок номер один</h2>
  2. <p>Наш <u>текст</u> в абзаце</p>

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

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

  1. <h3>Заголовок номер два</h3>
  2. <p>Наш те<u>к</u>ст в абзаце</p>

Рекомендации

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

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

  • <h4>Третий заголовок</h4>
  • <p>Наш текст в абзаце</p>

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

text-decoration-thickness — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Подсказки
  5. На практике
    1. Ярослав Лебеденко советует

Кратко

Скопировано

Свойство text-decoration-thickness управляет толщиной декоративной линии у текста, если она задана свойством text-decoration.

Пример

Скопировано

Для примера создадим три абзаца текста и зададим для них разные значения.

<p>Текст с красным подчёркиванием в 1px.</p><p>Текст с красным подчёркиванием в 3px.</p><p>Текст с красным подчёркиванием в 5px.</p>
          <p>Текст с красным подчёркиванием в 1px.</p>
<p>Текст с красным подчёркиванием в 3px.</p>
<p>Текст с красным подчёркиванием в 5px.</p>

.thin {  text-decoration-line: underline;  text-decoration-style: solid;  text-decoration-color: red;  text-decoration-thickness: 1px;}.thick {  text-decoration-line: underline;  text-decoration-style: solid;  text-decoration-color: red;  text-decoration-thickness: 3px;}.shorthand {  text-decoration: underline solid red 5px;}
          .thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}
.
 
 thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 3px;
}
.shorthand {
  text-decoration: underline solid red 5px;
}

Свойство text-decoration является шорткатом и позволяет указать все значения сразу.

Открыть демо в новой вкладке

Как пишется

Скопировано

Возможные значения:

  • auto — значение по умолчанию, браузер сам определит толщину линии.
  • from-font — если в файле шрифта прописана предпочтительная толщина декоративной линии, то будет использована она. Если нет, то значение будет установлено в auto.
  • Толщина в единицах измерения — можно задать толщину линии во всех доступных единицах измерения.

Обратите внимание, что толщина в процентах поддерживается не всеми браузерами. Подробнее на Can I use.

Подсказки

Скопировано

💡 Свойство text-decoration-thickness может менять толщину подчёркивания у ссылок (<a>), а также его можно анимировать при помощи transition.

На практике

Скопировано

Ярослав Лебеденко советует

Скопировано

🛠 На практике одного text-decoration-thickness может быть не достаточно поэтому стоит обратить внимание на такие свойства как text-decoration

-skip-ink и text-underline-offset. Ниже приведён пример совместной работы этих свойств.

<nav>  <ul>    <li>      <a href="#">HTML</a>    </li>    <li>      <a href="#">CSS</a>    </li>    <li>      <a href="#">JavaScript</a>    </li>    <li>      <a href="#">Веб-платформа</a>    </li>  </ul></nav>
          <nav>
  <ul>
    <li>
      <a href="#">HTML</a>
    </li>
    <li>
      <a href="#">CSS</a>
    </li>
    <li>
      <a href="#">JavaScript</a>
    </li>
    <li>
      <a href="#">Веб-платформа</a>
    </li>
  </ul>
</nav>

 
. nav-list__links {  display: inline-block;  color: #fff;  font-size: 36px;  line-height: 48px;  padding: 6px 10px;  text-decoration-skip-ink: none;  text-decoration-thickness: 4px;  text-underline-offset: -40px;  transition: 150ms ease-in-out;}.nav-list__link:hover,.nav-list__link:focus {  text-decoration-thickness: 2px;  text-underline-offset: 10px;  text-decoration-color: currentColor;}.orange {  text-decoration-color: #ff852e;}.blue {  text-decoration-color: #2e9aff;}.yellow {  text-decoration-color: #ffd829;}.green {  text-decoration-color: #40e746;}
          
 
.nav-list__links {
  display: inline-block;
  color: #fff;
  font-size: 36px;
  line-height: 48px;
  padding: 6px 10px;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 4px;
  text-underline-offset: -40px;
  transition: 150ms ease-in-out;
}
.nav-list__link:hover,
.nav-list__link:focus {
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  text-decoration-color: currentColor;
}
.orange {
  text-decoration-color: #ff852e;
}
.
 
 blue {
  text-decoration-color: #2e9aff;
}
.yellow {
  text-decoration-color: #ffd829;
}
.green {
  text-decoration-color: #40e746;
}
Открыть демо в новой вкладке

О значении currentColor читайте в статье «Цвета в вебе»

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

text-decoration-style

alt + ←

→

text-decoration-skip-ink

alt + →

Как подчеркивать в HTML

html

10 месяцев назад

от Naima Aftab

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

Как подчеркивать текст с помощью тега

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

HTML



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

Это заголовок


     

Это абзац.


   

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

Вывод


Вот как можно подчеркнуть текст с помощью тега .

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

Как подчеркивать текст с помощью атрибута стиля

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

HTML



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

Это заголовок


     

Это абзац.


   

В приведенном выше коде вы заметит, что мы используем элемент для подчеркивания слова и устанавливаем для его атрибута стиля значение «text-decoration: underline». Таким образом, нужное нам слово будет подчеркнуто.

Вывод


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

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

HTML



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

Это заголовок


     

Это абзац.


   

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

Заключение

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

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

Об авторе

Naima Aftab

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

Посмотреть все сообщения

html — Какой тег следует/можно использовать для подчеркивания текста?

Задавать вопрос

спросил

Изменено 5 лет, 1 месяц назад

Просмотрено 2к раз

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

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

Где же этот тег?

Почему strong , b , em , i и т. д. прекрасно подходят (и часто автоматически стилизуются в браузерах), но подчеркнутый запретный плод?

Я бы не хотел писать

 подчеркнутый текст
ИЛИ некоторый текст

когда я могу просто использовать

 привет

и стиль?

  • html
  • семантическая разметка
  • подчеркивание

1

Элемент u предназначался для подчеркивания, начиная с HTML 3.

2. HTML 4.01 не одобряет его, «объявив его устаревшим», а HTML5 предлагает неясным образом переопределить его значение. Тем не менее, на самом деле он работает во всех браузерах, и будет продолжать работать, и имеет точный эффект подчеркивания.

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

2

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

Тем не менее, есть одно главное исключение, о котором я могу думать:

 Цена: 12,34£ 9,87£!

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

2

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

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

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

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

Нет тега HTML для «подчеркивания» по той же причине, по которой нет тега для «красного круга» или «текста Comic-Sans в верхнем регистре».

Конечно, на самом деле есть тег , но подчеркивание — это только служебное предложение, потому что важной частью является семантика — например, печать

крупным шрифтом.

2

Это не запрещено, но лучше не использовать его, так как тег подчеркивания устарел в HTML 4 http://www.w3.org/TR/REC-html40/present/graphics.html#edef-U, поэтому не будет подтверждать.

6

Подчеркивание элемента — это скорее вопрос стиля. Так что лучше дать класс типа «underline_style» и в CSS дать правильные правила.

3

Элемент u вы все еще можете использовать для подчеркивания, но поскольку он сложнее, чем b , i , strong и em , вам потребуется CSS для его стилизации в деталях.

No related posts.

Автор записи

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

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