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

Жирный текст

Всеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега <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.

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

Тегу <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;
}

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

Задача

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

Решение

Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии 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>

Чтобы текст был немного выше его нужно поместить в тег-контейнер ^{^текст}, зачем это нужно? например чтобы написать формулу воды H²O

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

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

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

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

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

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

Тонкое черное подчеркивание с пространством вокруг спусков — с помощью 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-кода вашей веб-страницы. Здесь элемент