Html подчеркивание текста: Тег | htmlbook.ru
03.01.1981
Разное
Как добавить подчеркивание к заголовку?
Подчеркивание для блочных элементов вроде тега <h2> можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.
Линия под текстом на всю ширину блока
Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom, его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).
Пример 1. Линия на всю ширину
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Линия под заголовком</title>
<style>
h2 {
font-size: 200%; /* Размер шрифта */
border-bottom: 2px solid maroon; /* Параметры линии под текстом */
font-weight: normal; /* Убираем жирное начертание */
padding-bottom: 5px; /* Расстояние от текста до линии */
}
</style>
</head>
<body>
<h2>Пример текста</h2>
<p>Черный заголовок привлекает к себе внимание,
несмотря на то, что он черный, а не белый.
</p>
</body>
</html>Расстояние от линии до текста можно регулировать свойством padding-bottom, добавляя его к селектору h2. Результат данного примера показан на рис. 1.
Рис. 1. Линия под заголовком
Подчеркивание текста
Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline, опять же, добавляя его к селектору h2 (пример 2).
Пример 2. Линия на ширину текста
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Подчеркивание заголовка</title>
<style>
h2 {
text-decoration: underline; /* Подчеркивание заголовка */
}
</style>
</head>
<body>
<h2>Пример текста</h2>
<p>Черный заголовок привлекает к себе внимание,
несмотря на то, что он черный, а не белый.</p>
</body>
</html>
Результат данного примера показан на рис.
2.
Рис. 2. Подчеркивание заголовка
В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.
Подчеркивание в html: способы.
С помощью html тексту можно придать красивое оформление. Очень популярен элемент подчеркивания, но не все постоянные пользователи знают как его применять.
Подчеркивание в HTML
Итак, как же сделать подчеркивание? Подчеркивание текста в html оформляется при помощи тега <u>. Он используется во всех спецификациях html и xhtml, но только при условии переходного <DOCTYPE!>, так как должна быть указана версия разметки для браузера. В этом случае документ успешно проходит валидацию. Указывать элемент надо стандартно, то есть в самом верху страницы.
Тег <u> закрывающийся, он обязательно должен сопровождаться </u>. В разметку его нужно добавлять таким образом:
- <h2>Заголовок номер один</h2>
- <p>Наш <u>текст</u> в абзаце</p>
Слово «текст» при этом будет подчеркнутым.
Подчеркнуть можно и отдельную букву в слове:
- <h3>Заголовок номер два</h3>
- <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.
теги — подчеркивание текста html
<Напыщенная>
Общий комментарий к «семантике и стилю»: хотя в этом есть определенная истина, это урок, что некоторые люди имеют способ переоценить.
В реальной жизни многие люди используют курсив для акцента. Конечно, я мог бы создать стиль CSS «span.emphasized {font-style: italic;}», а затем вместо «<i> </ i>» вокруг выделенного текста поставить «<span class =» подчеркнутый «> </ SPAN>». И точно, что это дает, помимо большого количества ввода текста?
Кроме того, есть миллион причин, по которым я могу захотеть поместить кусок текста, скажем, в курсив. Возможно, это название книги; возможно, я хочу подчеркнуть это; возможно, я использую условное обозначение иностранных слов; и т.
д. Если у меня есть 10 слов в документе, выделенных курсивом по 9 различным причинам, педантичный ответ заключается в том, что я должен создать 9 разных записей стиля CSS, чтобы описать все эти причины. Лично я почти никогда не делаю этого, потому что ничего не получает. Да, теоретически я мог бы решить, что названия книг должны быть в курсивном шрифте, а не в курсивом или в некоторых таких. На практике вероятность того, что это произойдет, довольно близка к нулю, и если да, и у меня есть два таких названия книг в моем документе, я могу просто изменить его дважды. Теоретически кто-то может захотеть сканировать текст с помощью программы, которая ищет названия книг. Но на практике, если мы не договорились об этом заранее, и мы согласились с именами классов CSS, они не собираются это делать.
Я не говорю, что CSS бесполезен. Наоборот. Когда у меня есть семантический объект, который повторяется много раз в моем тексте и который не имеет «естественного», широко признанного стиля, тогда становится вполне правдоподобным предположить, что по мере продолжения работы над документом я могу изменить стиль.
В этом случае гораздо проще изменить одну запись CSS, чем изменить сто экземпляров. Или я могу использовать другой стиль в разных ситуациях, например, ставить предупреждающие сообщения красным цветом при отображении на экране, но выделять их жирным шрифтом при печати черно-белого документа.
Например, я обычно использую CSS для цитирования цитат, потому что часто меняю мнение о курсивом, отступы и размер шрифта. Я никогда не использую CSS для текста, который я хочу выделить курсивом для акцента, потому что я знаю, что крайне маловероятно, что я когда-либо захочу сделать это как что-то другое, кроме курсива.
Я хочу сказать, что меня не волнует, что какой-то педант сказал: «Это правило, что вы должны всегда повиноваться. Вы спрашиваете, почему вы должны повиноваться ему? Но я просто сказал вам, потому что это правило!» Я использую инструменты и методы, которые полезны в настоящей заявке. (И да, да, есть много эмпирических правил, которые действительны в 99% случаев и не стоит задумываться, пока не появится редкое исключение.
)
</ Декламация>
HTML — : элемент неартикулированной аннотации (подчеркивание) — HTML — элемент представляет собой промежуток инлайн текста , который должен
<u> HTML — элемент представляет собой промежуток инлайн текста , который должен быть оказанной таким образом , что указывает , что он имеет нетекстовую аннотацию. По умолчанию это отображается как простое сплошное подчеркивание, но его можно изменить с помощью CSS.
Предупреждение: этот элемент раньше назывался элементом «Подчеркнутый» в старых версиях HTML, и до сих пор иногда используется неправильно. Чтобы подчеркнуть текст, вы должны вместо этого применить стиль, который включает свойство CSS text-decoration , установленное на underline .
См. Раздел « Примечания по использованию » для получения дополнительной информации о том, когда уместно использовать <u> , а когда нет.
Attributes
Этот элемент включает только глобальные атрибуты .
Примечания к использованию
Исходный элемент подчеркивания HTML ( <u> ), наряду с другими элементами чистого стиля, объявлен устаревшим в HTML 4; однако
Примечание. Избегайте использования элемента <u> со стилем по умолчанию (подчеркнутого текста) таким образом, чтобы его можно было спутать с гиперссылкой, которая также по умолчанию подчеркнута.
Случаи использования
Допустимые варианты использования элемента <u> включают аннотирование орфографических ошибок, применение метки имени собственного для обозначения имен собственных в китайском тексте и другие формы аннотации.
Вы не должны использовать <u> для подчеркивания текста в презентационных целях или для обозначения названий книг.
Другие элементы для рассмотрения использования
В большинстве случаев следует использовать элемент, отличный от
<u> , например:
-
<em>для обозначения ударения -
<b>привлечь внимание к тексту -
<mark>чтобы отметить ключевые слова или фразы -
<strong>для обозначения важности текста -
<cite>для обозначения названий книг или других публикаций -
<i>для обозначения технических терминов, транслитерации, мыслей или названий судов в западных текстах.
Чтобы предоставить текстовые аннотации (в отличие от нетекстовых аннотаций, созданных с помощью <u> ), используйте элемент <ruby> .
Чтобы применить подчеркнутый вид без какого-либо семантического значения, используйте underline значения свойства text-decoration .
Examples
Указание орфографической ошибки
В этом примере используется элемент <u> и некоторый CSS для отображения абзаца, содержащего ошибку с ошибкой, с ошибкой, обозначенной красным волнистым подчеркиванием, которое довольно часто используется для этой цели.
HTML
<p>This paragraph includes a <u>wrnogly</u> spelled word.</p>
В HTML мы видим использование <u> с классом spelling , который используется для обозначения орфографической ошибки в слове «неправильно».
CSS
u.spelling {
text-decoration: red wavy underline;
}
Этот CSS указывает, что когда элемент <u> оформлен с использованием spelling класса , он должен иметь красную волнистую линию подчеркивания под его текстом. Это распространенный стиль для орфографических ошибок. Другой распространенный стиль может быть представлен red dashed underline
Result
Результат должен быть знаком каждому,кто пользовался любым из наиболее популярных текстовых процессоров,доступных сегодня.
Избегая <u>
В большинстве случаев вы действительно не хотите использовать <u> . Вот несколько примеров, которые показывают, что вам следует делать вместо этого в нескольких случаях.
Несемантические акценты
Чтобы подчеркнуть текст без какого-либо семантического значения, используйте элемент <span> со свойством text-decoration , установленным на "underline" , как показано ниже.
HTML
<span>Today's Special</span> <br> Chicken Noodle Soup With Carrots
CSS
.underline {
text-decoration: underline;
}
Result
Представление названия книги
Названия книг должны быть представлены с использованием элемента <cite> вместо <u> или даже <i> .
Использование элемента cite
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
Стилизация элемента cite
<cite> отображает текст курсивом. Вы можете переопределить это с помощью CSS: <p>The class read <cite>Moby Dick</cite> in the first term.</p>
cite {
font-style: normal;
text-decoration: underline;
}
Specifications
Совместимость с браузерами
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Хромовый Android | Firefox для Android | Опера Андроид | Safari на IOS | Samsung Интернет | |
u |
Yes |
12 |
1 До Firefox 4 этот элемент реализовывал интерфейс |
Yes |
Yes |
Yes |
Yes |
Yes |
4 |
Yes |
Yes |
Yes |
См.также
-
<span>,<i>,<em>,<b>и<cite>элементы обычно должны использоваться вместо этого. - Свойство CSS
text-decorationследует использовать для несемантического подчеркивания.
Как подчеркивать текст в HTML
Последнее обновление: 25 марта 2022 г.
IN — HTML
В этом уроке мы покажем вам решение, как подчеркивать текст в HTML, в html иногда мы хотим сделать текст подчеркнутым, с некоторыми цветами или без цветов. Это можно сделать разными способами в html.
Подчеркнутый текст выглядит как важный текст и также выделен. Итак, некоторые программисты используют подчеркивание, чтобы текст выглядел более привлекательным.
Итак, есть несколько способов, с помощью которых можно сделать текст подчеркнутым. Мы надеемся, что вы правильно их поймете.
Пошаговое руководство по подчеркиванию текста в HTML: —
Сейчас существует множество способов сделать текст подчеркнутым, вот некоторые из них:
- С помощью u (подчеркивание) текста.
- С помощью бордюра-дна
Следовательно, наиболее часто используются два способа сделать текст подчеркнутым. U известен как подчеркнутый, этот тег является встроенным тегом html, чтобы сделать текст подчеркнутым.
Где тег border-bottom используется для создания границы внизу текста, которая выглядит как подчеркнутый текст
<голова>
Название документа<title>
</голова>
<тело>
<р>
<и>
этот текст подчеркнут. вы можете написать здесь что угодно, что автоматически становится подчеркнутым, когда вы видите в браузере.
</u >
</p>
<дел>
вы можете использовать любой тег, чтобы сделать нижнюю границу в html, это может быть тег div, параграф, заголовок и b.<img src='/800/600/https/i.ytimg.com/vi/suy5nLRULt0/maxresdefault.jpg' /> </div>
</тело>
</html>
</pre>
<ol> <li> Сначала мы пишем <! DOCTYPE html>, который мы использовали в качестве инструкции для веб-браузера о том, в какой версии HTML-файла записан файл. </li>
<li> Во-вторых, тег <html> используется для обозначения начала HTML-документа. </li>
<li> Как и выше, теперь тег <head> используется для хранения информации о веб-странице. В этом теге используется тег <title>, который помогает нам указать заголовок веб-страницы. Оба тега <head> и <title> являются парными тегами.Таким образом, у обоих есть закрывающие теги </head> и соответственно.
Заключение :-
В заключение можно сказать, что сделать подчеркивание текста здесь мы умеем разными способами.
Наиболее часто используемый тег в u, который является тегом подчеркивания. Вы можете использовать этот тег где угодно, потому что, если вы хотите сделать небольшую часть подчеркнутой в любом абзаце, тогда используется именно он.
Я надеюсь, что это руководство о том, как подчеркивать текст в HTML, поможет вам, а упомянутые выше шаги и метод просты для выполнения и реализации.
HTML5: как подчеркнуть текст в документе HTML
Код CSS:
таблица {
граница-коллапс: раздельная;
интервал между границами: 0;
верхняя граница: 1px сплошной серый;
}
тд, й {
маржа: 0;
граница: 1px сплошной серый;
пробел: nowrap;
ширина верхней границы: 0px;
}
дел {
ширина: 500 пикселей;
переполнение-x: прокрутка;
поле слева: 5em;
переполнение-y: видимое;
заполнение: 0;
}
.
головной убор {
положение: абсолютное;
ширина: 5em;
слева: 0;
вверху: авто;
ширина верхней границы: 1px;
/*актуально только для первой строки*/
верхнее поле: -1px;
/*компенсация верхней границы*/
}
.headcol: до {
содержимое: «Строка»;
}
.длинная {
фон: желтый;
межбуквенный интервал: 1em;
}
Живая демонстрация:
См. перо Общий редактор html css от w3resource (@w3resource) на КодПене.
Как сделать подчеркивание в HTML? Подчеркнуть текст HTML
Подчеркивание в HTML раньше было проблемой при включении текста в теги < U > , но от этого метода отказались и он предпочитает более функциональный CSS. Вообще говоря, подчеркивание считается способом привлечь внимание людей к тексту, так как же установить подчеркивание в HTML? Как подчеркнуть текст HTML? Подведем итоги.
1. Использование атрибута стиля CSS «украшение текста» и тега больше не является правильным способом выделения текста.
Вместо этого используйте CSS-атрибут «текстовое оформление» с синтаксисом: Это будет подчеркнуто < / span >.
2. Если вы хотите подчеркнуть абзац текста, используйте тег и поместите начальный тег вместе с атрибутом «украшение текста» в позицию, с которой вы хотите начать подчеркивание. Поместите конец < / span > там, где вы хотите остановиться.
3. Объявите элементы HTML в разделе