Форматирование текста
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
Табл. 1. Теги для форматирования текста
Текст
Текст
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.
Пример 1. Жирный курсивный текст
Текст Он словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда — никто не смеет принять его вызов.
Результат данного примера показан на рис. 1.
Рис. 1. Вид курсивного жирного начертания текста
Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).
Пример 2. Создание нижнего индекса
Текст Формула изумруда: Be3Al2(SiO3)6
Результат данного примера показан на рис. 2.
Рис. 2. Нижний индекс в тексте
Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.
Следует отметить, что теги и , также как и являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
1.4. HTML-текст
HTML-текст представлен в спецификации элементами для форматирования и группировки текста. Данные элементы являются контейнерами для текста и не имеют визуального отображения.
Элементы для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family ).
Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри элемента .
HTML-элементы для текста
- Содержание:
- 1. Заголовки:
- 2. Форматирование текста: , , , , , , , , ,
- 3. Ввод «компьютерного» текста: , , , ,
- 4. Оформление цитат и определений: , , , , ,
- 5. Абзацы, средства переноса текста:
,
,
1. HTML-элементы для заголовков
Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Элементы . должны использоваться только для выделения заголовков нового раздела или подраздела.
При использовании заголовков необходимо учитывать их иерархию, т.е. за должен следовать и т.д. Также не рекомендуется вкладывать в заголовки другие элементы.
Заголовок 1-го уровня
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня
Фигура. 1. Элементы для заголовков HTML-документа
1.1. Элемент
Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Элемент должен быть уникальным для каждой страницы сайта.
Рекомендуется прописывать в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.
1.2. Элемент
Представляет подзаголовки элемента . Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.
1.3. Элемент
Показывает подзаголовки элемента . Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.
1.4. Элементы , ,
Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.
Для всех элементов доступны глобальные атрибуты.
2. Элементы для форматирования текста
2.1. Элемент
Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.
2.2. Элемент
Отображает шрифт курсивом, придавая тексту значимость.
2.3. Элемент
Отображает шрифт курсивом.
2.4. Элемент
Уменьшает размер шрифта на единицу по отношению к обычному тексту.
2.5. Элемент
Задаёт полужирное начертание шрифта, относится к элементам логической разметки, указывая браузеру на важность текста.
2.6. Элемент
Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
2.7. Элемент
Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.
2.8. Элемент
Выделяет текст в новой версии документа, подчёркивая его.
Для элемента доступны атрибуты cite и datetime .
2.9. Элемент
Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для элемента доступны атрибуты cite и datetime .
2.10. Элемент
Применяется для выделения фрагментов текста в справочных целях, окрашивая блок символов желтым цветом.
3. Элементы для ввода «компьютерного» текста
3.1. Элемент
Служит для выделения фрагментов программного кода. Отображает текст моноширинным шрифтом.
3.2. Элемент
Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображает текст моноширинным шрифтом.
3.3. Элемент
Применяется для выделения результата, полученного в ходе выполнения программы. Отображает текст моноширинным шрифтом.
3.4. Элемент
Выделяет имена переменных, отображая текст курсивом.
3.5. Элемент
Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
4. Элементы для оформления цитат и определений
4.1. Элемент
Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title , она появляется при наведении курсора мыши на текст.
4.2. Элемент
Используется для изменения текущего направления текста.
Для элемента доступен атрибут dir .
4.3. Элемент
Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для элемента доступен атрибут cite .
4.4. Элемент
Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для элемента доступен атрибут cite .
4.5. Элемент
Применяется для выделения цитат, названий произведений, сносок на другие документы.
4.6. Элемент
Позволяет выделить текст как определение. Несмотря на наличие данного элемента, рекомендуется выделять текст силами CSS.
Для элемента доступен атрибут title .
5. Абзацы, средства переноса текста
5.1. Элемент
Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхнее и нижнее внешнее поле margin , равное 1em , при этом поля соседних абзацев «схлопываются».
5.2. Элемент
Переносит текст на следующую строку, создавая разрыв строки.
5.3. Элемент
Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.
Конспект «Оформление текста»
Управляет размером шрифта. Значение свойства задаёт желаемую высоту символа шрифта. Причём единицы измерения могут быть абсолютными или относительными.
Самая часто используемая единица измерения размера шрифта — пиксели px :
Но, чтобы при изменении основного размера шрифта родителя его дочерние элементы пропорционально меняли свои размеры шрифта, есть специальная единица измерения — em .
Величина 1em — это такой же размер шрифта, что и у родителя. Соответственно, если нужно, чтобы шрифт дочернего элемента был всегда в 2 раза больше родительского, то надо задать значение 2em :
Свойство line-height
Свойство управляет высотой строки или межстрочным интервалом.
По умолчанию это свойство имеет значение normal . Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта. Спецификация рекомендует устанавливать его в пределах 100-120% от размера шрифта. То есть:
Значение normal позволяет всем нестилизованным текстам выглядеть удобочитаемо. Однако, если есть необходимость отойти от стилизации по умолчанию, line-height можно задать фиксированное абсолютное значение в px .
Если нужно задать line-height относительное значение, но не такое, как normal , то значение задаётся в процентах или в виде множителя. В таком случае браузер вычисляет значение динамически в зависимости от font-size :
Относительные значения более гибкие, чем абсолютные. Но для простых сайтов фиксированных font-size и line-height будет вполне достаточно.
Свойство font-family
В значении этого свойства указывается список названий шрифтов, перечисленных через запятую. В начале списка располагают самый желаемый шрифт, затем менее желаемый, а в самом конце списка — общий тип шрифта. Браузер проходит по списку слева направо и использует первый найденный в системе или на сайте шрифт. Если название шрифта состоит из нескольких слов, то его нужно заключать в кавычки.
body
Свойство font-weight
Свойство задаёт насыщенность или толщину шрифта. Шрифт может быть жирнее или тоньше обычного начертания. В качестве значения можно использовать ключевое слово или число. Самые часто встречающиеся значения:
- 400 или normal — обычный шрифт, значение по умолчанию;
- 700 или bold — жирный шрифт.
h1 < font-weight: 400; /* то же самое что и normal */ >p < font-weight: bold; /* то же самое что и 700 */ >Свойство text-align
Описывает, как выравнивается текст и другие инлайновые элементы (изображения, инлайн-блоки, инлайн-таблицы и другие) внутри блока по горизонтали.
Свойство может принимать следующие значения:
- left — выравнивание по левому краю блока, это значение по умолчанию;
- right — по правому краю блока;
- center — по центру блока;
- justify — по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё пространство строки (пробелы между словами в таком случае становятся неравномерными, так как браузер «растягивает» слова в строке).
Важно помнить, что свойство text-align применяется именно к самому блоку-контейнеру, внутри которого находится текстовый контент:
HTML:Я текст внутри абзаца
CSS: p
Свойство vertical-align
Свойством можно выравнивать инлайновые элементы относительно содержащей его строки. Самый простой пример — выровнять картинку по вертикали в текстовой строке.
У свойства vertical-align много значений, но самые часто используемые:
- top — выравнивание по верхнему краю строки;
- middle — по середине строки;
- bottom — по нижнему краю строки;
- baseline — по базовой линии строки (значение по умолчанию).
В отличие от text-align свойство vertical-align задаётся самому элементу, а не содержащему его контейнеру:
HTML:CSS: img
Я текст внутри абзаца
Свойство color
Цветом текста можно управлять свойством color .
Цвет может быть задан в виде ключевого слова (полный список ключевых слов приводится в спецификации). Например:
color: black; /* чёрный цвет */ color: red; /* красный цвет */ color: white; /* белый цвет */Ещё один вариант указания цвета — в виде шестнадцатеричного значения. В этом случае цвет формируется из красной, зелёной и синей составляющих, заданных в виде шестнадцатеричного числа от 00 до ff . Помимо шести, цветовой код может содержать три знака, в этом случае второй символ в цветовых составляющих дублируется первым:
color: #000000; /* чёрный цвет */ color: #f00; /* красный цвет, то же что #ff0000 */ color: #fff; /* белый цвет, то же что #ffffff */ Если не хочется иметь дело с шестнадцатеричными значениями, можно воспользоваться специальной функцией rgb , в которой указывается цвет в более привычном десятичном виде в диапазоне от 0 до 255 также в виде трёх цветовых составляющих, перечисленных через запятую:
color: rgb(0, 0, 0) /* чёрный, то же что #000000 */ color: rgb(255, 0, 0) /* красный, то же что #ff0000 */ color: rgb(255, 255, 255) /* белый, то же что #ffffff */У функции rgb есть расширенная версия — rgba . В этом случае помимо указания цвета последним значением указывается степень непрозрачности цвета — alpha. Значение может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный):
color: rgba(0, 0, 0, 0.5) /* чёрный, непрозрачный на 50% */ color: rgba(255, 0, 0, 0.3) /* красный, непрозрачный на 30% */ color: rgba(255, 255, 255, 0.9) /* белый, непрозрачный на 90% */Контраст цвета текста и фона
Фоновое изображение и фоновый цвет блока всегда должен достаточно сильно контрастировать с цветом текста в этом блоке. Чем больше контраст, тем удобнее этот текст читать в разных условиях освещённости и на разных устройствах. Поэтому если вы задаёте блоку фоновое изображение, нужно обязательно дополнительно задавать подходящий фоновый цвет. В этом случае, пока изображение загружается, или в случае, если оно совсем не загрузится, текст всё равно можно будет прочитать:
p < /* идеальный контраст: цвет текста белый, цвет фона — чёрный */ background-color: #000000; color: #ffffff; >span < /* плохой контраст: цвет текста и фона — серые */ background-color: #cccccc; color: #dddddd; >Свойство white-space, управление пробелами
Браузер игнорирует множественные пробелы и переносы строк в HTML-коде. С помощью свойства white-space можно управлять пробелами и переносами строк. Свойство принимает значения:
- nowrap — схлопывает лишние пробелы и отображает весь текст одной строкой без переносов;
- pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу ;
- pre-wrap — работает как значение pre , но добавляет автоматические переносы, если текст не помещается в контейнер;
- normal — режим по умолчанию: лишние пробелы и переносы строк схлопываются, текст переносится, пробелы в конце строк удаляются.
Свойство text-decoration
Задаёт дополнительное оформление текста. Значения свойства:
- underline — подчёркивание;
- line-through — зачёркивание;
- overline — надчёркивание;
- none — убирает вышеперечисленные эффекты.
К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел:
p < text-decoration: underline; /* подчёркнутый текст */ >span < /* подчёркнутый и зачёркнутый текст */ text-decoration: underline line-through; >Свойство text-decoration — составное. Оно раскладывается на отдельные свойства:
- text-decoration-line — вид линии: зачёркивание, подчёркивание или надчёркивание;
- text-decoration-style — стиль линии, может принимать значения:
- solid — сплошная линия;
- double — двойная линия;
- dotted — точечная линия;
- dashed — пунктирная линия;
- wavy — волнистая линия.
Свойство font-style
Свойством можно задать начертание текста. Его основные значения:
- normal — обычное начертание;
- italic — курсивное начертание;
- oblique — наклонное начертание.
Если задано значение italic , браузер будет пытаться найти в заданном шрифте отдельное курсивное начертание символов. В некоторых шрифтах отдельный курсив предусмотрен.
Если отдельного курсивного начертания в шрифте не предусмотрено, то браузер сделает текст наклонным, то есть сымитирует курсив. Что равноценно заданию тексту значения font-style: oblique .
Свойство text-transform
С его помощью можно управлять регистром символов: делать буквы строчными (маленькими) или заглавными (большими). Значения свойства:
- lowercase — все строчные;
- uppercase — все заглавные;
- capitalize — каждое слово начинается с большой буквы;
- none — отменяет изменение регистра.
Отступы
Важный фактор того, что текст в блоке будет удобочитаемым, это наличие свободного пространства в блоке для этого текста. Вокруг текста должно быть достаточно «воздуха», он не должен «прилипать» к краям, ему не должно быть «тесно».
За отступы в CSS отвечают два свойства: padding задаёт внутренние отступы в блоке, а margin задаёт внешние отступы.
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 29 января по 1 апреля 2024. До 27 ноября цена 19 900 ₽ 22 900 ₽
- Наша группа в VK
- Наш канал на YouTube
- Наша страница в Twitter
- Наш канал в Telegram
Как в html сделать отступ текста?
Рассмотрим несколько способов как сделать отступ текста в HTML.
Навигация по статье:
- Отступ текста в HTML при помощи margin
- Отступ текста в HTML при помощи padding
- Отступ текста html при помощи неразрывного пробела
- Отступ текста в HTML при помощи text-indent
- Что делать если отступ не появляются?
Отступ текста в HTML при помощи margin
Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока , тег таблицы , абзаца , секции и так далее.
Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.
Делается это так:
< div style = ” margin - left : 20px ; ” >Текст блока HTML < / div >
Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.
< div class = "text-block" >Текст блока < / div >
. text — block < margin - left : 20px ;
Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:
«Как определить ID и класс элемента на странице?»При помощи этого свойства мы можем задать разные отступы тексту в HTML:
- margin-left — расстояние слева
- margin-right — расстояние справа
- margin-top — расстояние сверху
- margin-bottom — расстояние снизу
Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:
- margin: 10px; — делаем отступ текста 10px со всех сторон
- margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
- margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px
Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.
Отступ текста в HTML при помощи padding
Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.