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

Содержание

Текст в html

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

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

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

Строчные элементы обрамляются тегами <span>...</span>.

Для обрамления элементов блочного типа используется пара <div>...</div>.

Браузеры обрамляют div-блоки разрывами строки.

Блок <div> не может располагаться внутри блока <span>.

Пример
<!DOCTYPE html>
<html>
<head>
    <title>Блоки</title>
    <meta charset="Windows-1251">
</head>
<body>
<div>Первый блок текста</div>
<div>Второй блок текста.</div>
</body>
</html>

Основные теги форматирования текста

<p>...</p>Абзац.
<h2>...</h2>Заголовок первого уровня.
<h3>...</h3>Заголовок второго уровня.
...
<h6>...</h6>Заголовок шестого уровня.
<br>Переход на новую строку.
<q>...</q>Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes.
<hr>Горизонтальная разделительная линия.
<pre>...</pre>Текст фиксированной ширины с сохранением всех пробелов и переносов.
Пример
<!DOCTYPE html>
<html>
<head>
    <title>Заголовки и абзацы</title>
    <meta charset="Windows-1251">
</head>
<body>
<h2>Заголовок<br>первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<h4>Заголовок третьего уровня</h4>
<h5>Заголовок четвертого уровня</h5>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
<hr>
<p>Тест абзаца</p>
</body>
</html>

Создайте текстовый файл, как в примере. Сохраните его с расширением html.

Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.

Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать Notepad++ или PhpStorm.

Выделение в тексте

<b>...</b>Полужирный шрифт.
<i>...</i>Курсив.
<ins>...</ins>Подчеркнутый текст.
<del>...</del>Перечеркнутый текст.
<sup>...</sup>Надстрочный текст.
<sub>...</sub>Подстрочный текст.
Пример
<b>Текст может быть полужирным</b>. <i>Текст может быть курсивом.</i><br>
<ins>Текст можно подчеркнуть.</ins> <del>Текст можно зачеркнуть.</del><br>
Текст может быть <sup>надстрочным</sup>. Текст может быть <sub>подстрочным</sub>.

РЕЗУЛЬТАТ:

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

Цитаты, переменные, адреса

<address>...
</address>
Служит для предоставления автором документа контактной информации, чтобы желающие могли связаться с автором материала. Обычно отображается курсивом. Блочный элемент.
<blockquote>...
</blockquote>
Выделение цитат. Блочный элемент.
<cite>...</cite>Выделение цитат. Обычно отображается курсивом.
<code>...</code>Вывод текста шрифтом фиксированной ширины. Применяется, как правило, для вывода небольшого куска программного кода (для больших листингов используется тег <pre>).
<em>...</em>Выделение важных фрагментов текста. Обычно отображается курсивом.
<kbd>...</kbd>Вывод текста шрифтом фиксированной ширины.
<samp>...</samp>Вывод текста шрифтом фиксированной ширины.
<strong>...</strong>Сильное выделение важных фрагментов текста. Обычно отображается полужирным шрифтом.
<var>...</var>Используется для отметки имен переменных. Обычно отображается курсивом.

Читать дальше: HTML списки

Как сделать подчёркивание заголовка? | WebReference

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

Использование text-decoration

Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color. В примере 1 показано применение text-decoration к элементу <h3>.

Пример 1. Использование text-decoration

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчёркивание</title> <style> h3 { text-decoration: underline; /* Добавляем подчёркивание */ text-decoration-color: red; /* Цвет линии */ } </style> </head> <body> <section> <h3>Культурный речевой акт в XXI веке</h3> <p>Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.</p> </section> </body> </html>

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

Вид линии, созданной через text-decoration

Рис. 1. Вид линии, созданной через text-decoration

Браузеры IE и Edge не поддерживают свойство text-decoration-color.

Использование border-bottom

Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).

Вид линии, созданной с помощью border-bottom

Рис. 2. Вид линии, созданной с помощью border-bottom

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

Пример 2. Использование border-bottom

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчёркивание</title> <style> h3 { border-bottom: 2px solid red; /* Добавляем подчёркивание */ padding-bottom: 5px; /* Расстояние от текста до линии */ } </style> </head> <body> <section> <h3>Культурный речевой акт в XXI веке</h3> <p>Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.</p> </section> </body> </html>

Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h3 свойство display со значением inline-block.

Использование ::after и content

Также можно сделать искусственную линию через комбинацию свойства content и псевдоэлемента ::after. Они лишь будут выводить пустой псевдоэлемент после заголовка, а уже вид этого псевдоэлемента определяется другими свойствами. На рис. 3 показана подобная линия.

Линия, созданная через ::after

Рис. 3. Линия, созданная через ::after

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

Пример 3. Использование ::after

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчёркивание</title> <style> h3 { position: relative; /* Относительное позиционирование */ display: inline-block; /* Линия на ширину текста */ } h3::after { content: '; /* Выводим пустое содержимое */ position: absolute; /* Абсолютное позиционирование */ background: red; /* Цвет линии */ left: 0; /* Положение линии слева */ bottom: -5px; /* Положение линии */ width: 100%; /* Линия на ширину текста */ height: 2px; /* Высота линии */ } </style> </head> <body> <section> <h3>Культурный речевой акт в XXI веке</h3> <p>Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.</p> </section> </body> </html>

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.10.2018

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты
Акцентирование (выделение) текста в HTML — Разметка текста — codebra

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

Жирный текст

Всеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега <b> и <strong>. Тег

<b>, более распространенный. Эти теги не одинаковы, хоть и результат схож. Различие заключается в том, что тег <b> определяет физическую жирность текста, а тег <strong> определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными). Такая же ситуация и у тегов <i> и <em>. Следовательно, выгоднее использовать тег, который короче. Далее пример:

Код HTML

<b>Жирный текст</b>

Курсивный текст

За акцентирование курсивным шрифтом, отвечают теги <i> и <em>. Как сказано выше, они различны по своей направленности, но в современных браузерах эквивалентны. Далее пример:

Код HTML

<i>Курсивный текст</i>

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

Акцентировать текст подчеркнутым шрифтом можно при помощи тега <u>. Этот тег осуждают спецификацией HTML и рекомендуют использовать стили, с чем я и соглашусь. Я обязательно напишу эквиваленты тегов акцентирования в CSS. Далее пример:

Код HTML

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

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

Для того чтобы зачеркнуть текст, используют два эквивалентных тега: <s> и <strike>. Эти два тега осуждают и рекомендуют взамен им использовать стили. А тег <strike> категорически запрещен в HTML5. Далее пример:

Код HTML

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

Крупнее и мельче обычного текста

Акцентировать текст, можно и увеличив размер это текста. Для этого есть тег <big>. Чтобы текст был мельче обычного, применяют тег <small>. Но все же выгодно использовать всегда стили CSS. Далее пример:

Код HTML

<big>Крупнее текст</big>

Замена жирного текста стилями CSS

Есть такое свойство в CSS – font-weight. Оно принимает много значений: font-weight:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900. Чтобы сделать текст самым жирным, нужно использовать значение font-weight: 900. О нем мы еще поговорим в следующих уроках.

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

В CSS есть аналог тегу <i> (Курсивный текст). Это свойство font-style. Далее пример:

Код HTML

<span class = "i">Курсивный текст</span>

Код CSS

.i {
font-style: italic;
}

Замена подчеркнутого текста стилями CSS

Тег <u> осуждается спецификацией HTML и рекомендуется использовать стили. Аналогом может служить свойство text-decoration. Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:

Код HTML

<span class = "u">Подчеркнутый текст</span>

Код CSS

.u {
text-decoration: underline;
}

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

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

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

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

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

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

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

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

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

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

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

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

Второй способ

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

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

Третий способ

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

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

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

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

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

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

Решение

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пунктирное подчеркивание</title>
  <style>
   A.dot {
    text-decoration: none; /* Убираем подчеркивание */
    border-bottom: 1px dashed #000080; /* Добавляем свою линию */ 
   }
   A.dot:hover {
    color: #f00000; /* Цвет ссылки при наведении на нее курсора */
   }
  </style>
 </head>
 <body> 
  <p><a href="link.html">Обычная ссылка</a> на другую страницу.</p>
  <p><a href="#">Ссылка с пунктирным подчеркиванием</a>.</p>
 </body>
</html>

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

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

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

Начертание | htmlbook.ru

Жирное начертание

Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два тега: <b> и <strong>.

<b>Жирное начертание шрифта</b>
<strong>Сильное выделение текста</strong>

Курсивное начертание

Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: <i> и <em>.

<i>Курсивное начертание шрифта</i>
<em>Выделение текста</em>

Следует отметить, что теги <b> и <strong>, также как <i> и <em> хотя и похожи по своему действию, являются не совсем эквивалентными и заменяемыми. Первый тег <b> — является тегом физической разметки и устанавливает жирное начертание текста, а тег <strong> — тегом логической разметки и выделяет помеченный текст. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

В примере 7.5 показано использование тегов <em> и <strong> для оформления текстов.

Пример 7.5. Теги <em> и <strong>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Оформление текста</title>
 </head>
 <body>
  <p><strong>А где же печенье и самогоноваренье?!</strong> — 
  <em>воскликнул Мальчиш-плохиш</em>.</p>
 </body>
</html>

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

Рис. 7.5. Жирное и курсивное начертание текста

Как сделать текст жирным, курсивом, подчеркнутым и так далее. Самоучитель HTML

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

Как сделать текст жирным?, е просто нужно поместить в тег<b>текст</b> он же <bold>текст</bold>

Альтернативой тега B(BOLD) есть <strong>текст</strong>
Я вам немного рассказывал об оптимизации страниц, так вот, чтобы ваши страницы находили посетители нужно не только ключевой запрос вставлять в тег TITLE и h2(h3), но и хотя-бы 2-3 раза повториться на странице и плюс к этому попытаться сделать словосочетания из ключевого запроса, а потом выделить эти запросы жирным или строгим(strong), это повышает шансы вашего сайта на поисковую выдачу.

Как сделать текст подчеркнутый?, его помещаем в тег <U>текст</U>

Как сделать текст курсивом?, его нужно поместить тег контейнер <i>текст</i>

Чтобы текст был перечеркнутый его нужно поместить в тег <S>текст</S>

Как сделать текст больше базового без тега FONT?, при помощи тега <big>текст</big>

Так-же текст можно сделать немного меньше базового при помощи тега <small>текст</small>

Так же есть возможность сделать моноширинный текст <tt>текст</tt>

Чтобы текст был немного выше его нужно поместить в тег-контейнер <sup>текст</sup>, зачем это нужно? например чтобы написать формулу воды H2O

Так-же есть тег для нижнего индекса(под индекс) текста <sub>текст</sub>, например: 3/4

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

Я вам демонстрировал эти теги по одиночке, но этого делать не обязательно, можно к одному участку текста использовать несколько тегов:
Этот текст <B> будет жирным, <tt> шрифт как у пишущей машинки, <u> здесь подчеркнут</u>, <s> а здесь перечеркнут</s> </tt> </B>
Результат:
Этот текст будет жирным, шрифт как у пишущей машинки, здесь подчеркнут, а здесь перечеркнут
Обратите внимание как правильно закрывать теги, главное чтобы они не пересекались!!!

Стиль подчеркивает в Интернете

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

Существует множество способов стилизовать подчеркивания. Может быть, вы помните статью Крафт ссылка подчеркивает на Medium. Медиум не пытался сделать что-нибудь сумасшедшее; они просто хотели создать довольно нормальную линию под своим текстом.

A thin, black underline with space around descenders Тонкое черное подчеркивание с пространством вокруг спусков - с помощью Marcin Wichary, Подчеркивание крафта на Medium

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

голов

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

  • Позиционируйте себя ниже базовой линии
  • Пропустить спуски
  • Изменить цвет, толщину и стиль
  • Повторите через завернутый текст
  • Работа на любом фоне

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

подходов

Итак, как мы можем подчеркнуть текст в Интернете?

Вот те, о которых я могу думать:

  • текстовое оформление
  • бордюр
  • box-shadow
  • фоновое изображение
  • SVG фильтры
  • Underline.js (холст)
  • текстовое оформление- *

Давайте пройдемся по списку

.
Как добавить пунктирное подчеркивание ниже HTML-текста
Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
,

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

Обновлено: 30.12.2009 от Computer Hope

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

Примечание

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

Примечание

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

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

Чтобы все ссылки на вашей веб-странице не имели подчеркивания, настройте стиль text-украшения для элемента a (якорный).Например, вы можете добавить следующий код CSS между тегами HTML-кода вашей веб-страницы. Здесь элемент