Подчеркнутый текст html (css). теги , . свойство text-decoration: underline. примеры

Определение и использование

Свойство задает тип оформления текста для использования (like underline, overline, line-through).

Совет: Также посмотрите на свойство text-decoration,
который является сокращенным свойством для text-decoration-line, text-decoration-style, и text-decoration-color.

Примечание: Вы также можете комбинировать несколько значений, например подчеркивание underline и overline для отображения строк как под текстом, так и над ним.

Значение по умолчанию:	none
Унаследованный:	нет
Анимируемый:	нет Прочитайте о animatable
Версия:	CSS3
JavaScript синтаксис:	object.style.textDecorationLine=»overline» Попробовать

Шаг 1. Прописываем параметры CSS

Откройте свой файл стилей (style.css, css.css, screen.css и прочее) и добавьте в самый конец такое:

CSS

.strong {font-weight:bold;} .italic {font-style:italic;} .underline{text-decoration:underline;}

1
2
3

.strong {font-weightbold;}

.italic {font-styleitalic;}

.underline{text-decorationunderline;}

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

PHP

<span class=»strong»>здесь будет выделенный жирным текст</span>

1	<span class=»strong»>здесьбудетвыделенныйжирнымтекст<span>

Однако это времязатратно каждый раз вручную прописывать новый тег span с классом. Поэтому предлагаю вариант это автоматизировать.

Плавающий div

Данный метод использует пустой элемент div , который плавает и помогает управлять положением нашего вложенного элемента в документе

Обратите внимание, что плавающий div размещается до нашего вложенного элемента в коде HTML

Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

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

Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div и знаний о высоте вложенного элемента.

Теги 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 — предназначен для того, чтобы хранить время последнего редактирования информации.

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

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

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

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

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

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

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

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

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

Подчеркивание в 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.

Подчеркивание без слов

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

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

Более 100 крутых уроков, тестов и тренажеров для развития мозга

Начать развиваться

Используем знак нижнего подчеркивания

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

Теперь устанавливаем курсор в то место, где будет начинаться подчеркнутая область, и, зажимая клавишу Shift вместе с клавишей дефиса, делаем сплошную длинную полосу.

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

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

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

Пустая строка при помощи табуляции

Кликаем по букве “Ч” в панели инструментов или нажимаем одновременно “Shift + U”, а затем несколько раз жмем на клавишу Tab.

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

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

Применяем пробелы

Похожего эффекта можно добиться при помощи клавиши “Пробел”, но в этом способе есть одна тонкость. Если мы просто попытаемся печатать пробелы, включив подчеркивание на панели инструментов, то ничего не получится, на листе будут оставаться просто пустые места.

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

Используем таблицы

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

Внимательно повторяйте действия за мной, чтобы не запутаться. Установите курсор в нужное место и добавьте таблицу в документ.

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

Теперь выделяем только что созданный объект и во вкладке “Конструктор” находим опцию “Границы”.

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

Вот что у меня получилось.

Рисуем линии

Этот способ мне кажется не очень удобным, но в некоторых случаях он может пригодиться, поэтому его я тоже покажу. Идем во вкладку меню “Вставка”, “Фигуры”. Здесь нас интересует прямая линия.

Вместо курсора перед нами появляется черный крестик. Тянем его, зажав левую кнопку мыши, чтобы получить полоску в нужном месте. Чтобы она наверняка получилась горизонтальной, зажимаем Shift.

По умолчанию цвет линии синий. Чтобы изменить его, выберите другой стиль на панели инструментов во вкладке “Формат”.

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

text-decoration — подчёркнутый и зачёркнутый текст

Описание

CSS свойство позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).

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

Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением :

/*делаем подчёркнутый текст*/
span {text-decoration: underline;}

Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением :

/*убираем подчёркивание ссылок*/
a {text-decoration: none;}

Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:

/*убираем подчёркивание ссылок*/
a {text-decoration: none;}

/*задаём подчёркивание ссылок при наведении*/
a:hover {text-decoration: underline;}

К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством , будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).

Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: <u> (подчёркнутый текст) и <del> (зачёркнутый текст).

Значение по умолчанию:	none
Применяется:	ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:	нет
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.textDecoration=»overline»

Значения свойства

Значение	Описание
none	Оставляет текст без изменений.
underline	Определяет горизонтальную линию под текстом.
overline	Определяет горизонтальную линию над текстом.
line-through	Определяет линию перечеркивающую текст.
inherit	Указывает, что значение наследуется от родительского элемента.

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

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

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

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

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

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

Линии и рамки

Шрифт и текст

Шрифт и размер текста (font-family, font-size)

font-family: Arial, Tahoma; /* установить семейство шрифта для элемента */
font-size: 10pt | 12px | 2em | 80%; /* установить размер шрифта для элемента */

Регистр букв текста (text-transform, font-variant)

text-transform: uppercase; /* все символы текста становятся прописными (верхний регистр) */
text-transform: lowercase; /* все символы текста становятся строчными (нижний регистр) */
text-transform: capitalize; /* первый символ каждого слова в предложении будет заглавным */
text-transform: none; /* не меняет регистр символов */

font-variant: normal; /* оставляет регистр символов заданным по умолчанию */
font-variant: small-caps; /* все строчные символы становятся заглавными уменьшенного размера, при этом заглавная отображается как обычно */

Ширина букв шрифта (font-stretch)

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст
font-stretch: inherit | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

Начертание шрифта: жирный, курсив (font-weight, font-style)

font-weight: bold; /*  */
font-weight: normal; /*  */
font-weight: 300; /*  */

font-style: italic; /*  */
font-style: normal; /*  */
font-style: oblique; /*  */

Декорации текста: подчёркнутый, зачёркнутый, надчёркнутый (text-decoration)

text-decoration: none; /*  */
text-decoration: line-through; /*  */
text-decoration: overline; /*  */
text-decoration: underline; /*  */

Расстояние между буквами в слове (letter-spacing)

letter-spacing

Способ отображения пробелов между словами (white-space)

white-space

Задать отступ для красной строки текста (text-indent)

text-indent

Тип кавычек в тексте документа (quotes)

quotes

Переносы слов (word-break, word-wrap)

word-break
word-wrap

Интервал между словами (word-spacing)

word-spacing

Межстрочный интервал (line-height)

line-height: 1.4 | 12px | 80% | normal; /* установить интервал между строками текста */

Горизонтальное выравнивание текста в пределах элемента (text-align)

// задаётся у родителя для строковых элементов внутри него

text-align: center;
text-align: justify; /* выравнивает и с правого и с левого края сразу */
text-align: left;
text-align: right;

Многоколоночный текст (columns)

columns:   - порядок параметров значения не имеет

columns: 200px auto; // ширина задана, количество определяется браузером
columns: 2; // 2 колонки, ширина определяется браузером
columns: 3 150px; // 3 колонки, шириной по 150px

Задать промежутки между колонками

column-gap: 3px;

Вычисляемые значения для свойств(calc())

calc()

Перенос строки на CSS

a.comment-link1:after {
content: '\A';
white-space: pre;}

Рукописные стрелки на CSS

// CSS-код

:root {--highlight-color: #6c6c6c;}
.arrow {position: absolute; bottom: 0; left: 150px; width: 30px; height: 70px;}
.arrow2 {position: absolute; bottom: 0; left: 250px; width: 30px; height: 70px;}
.arbd {width: 100%; height: 95%; margin-left: 11px; border-style: dashed; border-color: var(--highlight-color);}
.arbd_l {border-width: 2px 0 0 2px; border-top-left-radius: 100%;}
.arbd_r {border-width: 2px 2px 0 0px; border-top-right-radius: 100%;}
.arbd::after {content: ''; position: absolute; bottom: 0; border-width: 10px 7px 0; border-style: solid; border-color: var(--highlight-color) transparent transparent;}
.arbd_l::after {left: 5px;}
.arbd_r::after {right: -18px;}

// HTML-код (1 стрелка: сверху справа - вниз; 2 стрелка: сверху слева - вниз)

<div class="arrow"><div class="arbd arbd_l"></div></div>
<div class="arrow2"><div class="arbd arbd_r"></div></div>

Вывод

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

Для большего текста стоит использовать подход фонового изображения. Он работает. Кроме этого, существуют примеси Sass, которые можно использовать вместе с ним. Можно одновременно не использовать text-shadow, если линия подчеркивания достаточно тонкая или отличается от текста по цвету.

Для одиночных строк текста используйте border-bottom и любые другие свойства.

Для добавления разрывов ниже базовой линии текста на градиентных фонах или фоновых изображениях попробуйте использовать SVG-фильтры. А когда поддержка браузерами существенно улучшится, можно будет добиться нужного эффекта с помощью свойств text-decoration-*.

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

Вадим Дворниковавтор-переводчик статьи «Styling Underlines on the Web»