HTML: форматирование текста | СХОСТ блог
Рассмотрим несколько важных моментов форматирования текста в HTML:
-
<strong> и <b> 一 выделение текста.
-
<i> и <em> 一 курсив.
-
<u> 一 подчеркнутый текст.
-
<sup> и <sub> 一 надстрочный индекс.
Например:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Форматирование текста</title>
</head>
<body>
<p><strong>Содержание:</strong></p>
<ul>
<p dir=»ltr»><li><em>Работа со шрифтами.
</em></li></p>
<p dir=»ltr»><li><u>Создание блока с отступом.</u></li></p>
<p dir=»ltr»><li>Цвет, стиль и размер <sup>шрифта.</sup></li></p>
<p dir=»ltr»><li>Переход на следующую строку и <sub>выравнивание текста .</sub></li></p>
</ul>
</body>
</html>
Текст в браузере:
Создание блока с отступом. За создание блока с отступом отвечает тег <BLOCKQUOTE>. например:
<p><strong><BLOCKQUOTE>Содержание:</BLOCKQUOTE></strong></p>
Текст в браузере:
-
Цвет, стиль и размер шрифта. Данные параметры задаются тегом <BASEFONT>, имеющим несколько атрибутов: color = (цвет шрифта), size = (размер шрифта), face = (перечень названий шрифтов).
Для того, чтобы изменить размер шрифта, воспользуйтесь атрибутом size тега <font>. Чтобы поменять цвет шрифта, воспользуйтесь атрибутом color тега <font>. Чтобы добавить шрифт, нужен атрибут face тега <font>.
Например:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Форматирование текста</title>
</head>
<body>
<p><strong><BLOCKQUOTE><font size=»2″ color= «FF0000»>Содержание:</font></BLOCKQUOTE></strong></p>
<ul>
<p dir=»ltr»><li><em><font size=»3″ color= «7FFF00»>Работа со шрифтами.
</font></em></li></p>
<p dir=»ltr»><li><u><font size=»4″ color= «40E0D0»>Создание блока с отступом.</font></u></li></p>
<p dir=»ltr»><li><font size=»5″ color= «BA55D3»>Цвет, стиль и размер <sup>шрифта.</font></sup></li></p>
<p dir=»ltr»><li><font size=»6″ «FFFF00»>Переход на следующую строку и <sub>Hвыравнивание текста .</font></sub></li></p>
</ul>
</body>
</html>
Текст в браузере:
<p dir=»ltr»><li><em><font size=»3″ color= «7FFF00»>Работа<br> со<br> шрифтами.<br></font></em></li></p>
Текст в браузере:
Как в html сделать отступ текста?
Категория: Сайтостроение, Опубликовано: 2018-06-22
Автор: Юлия Гусарь
Здравствуйте, дорогие друзья!
Рассмотрим несколько способов как сделать отступ текста в HTML.
Навигация по статье:
- Отступ текста в HTML при помощи margin
- Отступ текста в HTML при помощи padding
- Отступ текста html при помощи неразрывного пробела
- Отступ текста в HTML при помощи text-indent
- Что делать если отступ не появляются?
Отступ текста в HTML при помощи margin
Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока
Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.
Делается это так:
<div style=”margin-left:20px;”> Текст блока HTML </div>
<div style=”margin-left:20px;”> Текст блока HTML </div> |
Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px.
HTML:
<div> Текст блока </div>
<div> Текст блока </div> |
CSS:
.text-block { margin-left:20px; }
.text-block { margin-left:20px; } |
Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:
При помощи этого свойства мы можем задать разные отступы тексту в 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 и другие единицы.
Обратите внимание, если вы задаёте верхний или нижний отступ для тега <a>, <span>, <b> — то, скорее всего, он не сработает. Это связано с тем что верхний и нижний margin работает только для блочных элементов HTML, а указанные выше теги являются строчными. Для решения проблемы можно дополнительно задать этому тегу CSS свойство
Отступ текста в HTML при помощи padding
Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.
<div style=”paddint-top:20px;”> Текст блока </div>
<div style=”paddint-top:20px;”> Текст блока </div> |
Так же можно присвоить класс в HTML коде или воспользоваться уже существующим и дописать это свойство ему:
CSS:
.
.text-block { padding: 20px 10px 15px 20px; } |
С его помощью так же можно задать разные отступы текста в HTML:
- padding-left — слева
- padding-right — справа
- padding-top — сверху
- padding-bottom — расстояние снизу
- padding: 25px; — отступ со всех сторон.
Отступ текста html при помощи неразрывного пробела
Сразу скажу что я этот способ не люблю и не рекомендую, но иногда он может понадобится. Суть его заключается в том что в HTML есть специальный тег, который позволяет добавлять неразрывный пробел
- Если вы поставите этот тег в тексте между слов или вначале строки то он создаст отступ равный по ширине 1 пробелу. Поставив несколько вы можете увеличить расстояние между словами.
- Если поставить между строк то он создаст вертикальный отступ равный по высоте одной строке. Дописав несколько (каждый с новой строки) можно увеличить это расстояние.
HTML:
<p>Задаём в HTML</p>
<p>Задаём в HTML</p> |
Отступ текста в HTML при помощи text-indent
Если вам нужно задать отступ в HTML не для всего текста на странице, а лишь только для первой строчки одного или нескольких абзацев, то это можно сделать при помощи свойства text-indent
HTML:
<div> Здесь текст HTML блока</div>
<div> Здесь текст HTML блока</div> |
Более подробно о том как задать абзац написано в этой статье: «Как сделать в HTML красную строку?»
Что делать если отступ не появляются?
Бывают ситуации, когда вы задаёте отступ текста HTML одним из предложенных способов, а он не применяется.
Причин здесь может быть несколько. Наиболее распространённые описаны в этой статье: «Почему не работают CSS-стили?»
Если вы знаете ещё какие то способы как сделать отступ текста HTML напишите их в комментариях. Если статья была для вас полезной — делитесь ей в социальных сетях. Так вы помогаете мне развивать сайт.
Успехов вам в оформлении ваших сайтов и не только!
С уважением Юлия Гусарь
Как добавить текст, абзац в HTML, учебник html
HTML Tutorial » Как добавить текст в HTML
Вставить текст или абзац в HTML довольно просто,
между тегами
Синтаксис:
ваш текст здесь
Внутри
и мы можем добавить любой текст или абзац, к которому мы можем добавить теги,
, узнали на предыдущей странице.
Вот пример:
Пример
<голова>
Как вставить текст в HTML
<тело>
Заголовок, Информация о содержании страниц.
Моя первая веб-страница!
Здесь у нас есть абзац
Здесь у нас сильный абзац
Здесь у нас есть абзац, выделенный курсивом
Посетите наш учебник по HTML