Как сделать текст в HTML (топ 10 запросов)
Чем отличается написание текста в обычном текстовом редакторе, от написания в HTML? В текстовом редакторе, форматирование текста происходит в интерфейсе программы. Для HTML страницы – текст форматируется, при помощи тегов.
Теги сообщают браузерам, как и в каком месте страницы, отображать текст. Для этого придуманы специальные теги. Мы не пишем, текст, просто так.
Хорошего Вам дня!
Текст, всегда заключают, между тегами, например, внутри абзаца.
<p>Пожелайте мне удачи!</p>
Мы собрали список, наиболее частых запросов, связанных с текстом, от начинающих изучать HTML.
Как сделать текст в центре
По умолчанию, текст, прилипает к левому краю. Свойство text-align, внутри тега div, выравнивает текст по центру.
<div>Поставьте меня в центр</div> // HTML
div {
text-align: center; // CSS
}
Как сделать текст справа
<div>Хочу стоять справа</div> // HTML
div {
text-align: right; // CSS
}
Как сделать отступ текста
За отступы текста отвечают свойства – margin и padding. Margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. Отступы измеряют в абсолютных единицах измерения - пикселях или в относительных - %, em, rem.
<p>Отодвинься от меня</p> // HTML
p {
margin: 20px; // CSS
padding: 10px;
}
Как сделать текст жирным
Через тег b, можно вставлять прямо в разметку. Этот способ предпочтительнее для SEO-оптимизации.
<p>Хочу быть <b>жирным</b></p> // HTML
или выделять участок тегом span и задавать степень жирности в CSS правилах.
<p>Хочу быть <span>самым жирным</span></p> // HTML
span {
font-weight: bolder; // CSS
}
или указывать жирность в цифрах.
span {
font-weight: 700; // в интервале 100 - 900
}
Как сделать ссылку в тексте
Нужный фрагмент текста, заключить в тег a, с указанием URL-адреса.
<p>Вам следует перейти по этой <a href="http://yandex.ru">ссылке</a></p> // внешняя ссылка
<p>У меня тут есть <a href="page_5.html">хорошая статья</a></p> // внутренняя ссылка
Как сделать текст в рамке
Рамка задается не тексту, а блочному тегу, в котором находится этот текст.
<p>Я - важный текст</p> // HTML
p {
border: 2px solid pink; // толщина, сплошная, цвет
padding: 15px; // воздух между рамкой и текстом
}
Как сделать текст подчеркнутым
Нужное место, обрамляем тегом u.
<p>Прошу здесь <u>подчеркнуть</u> меня</p> // HTML
Как задать тексту фон
Сделать фон для всего абзаца.
<p>Хочу выделиться фоном</p> // HTML
p {
background-color: pink; // CSS
}
Если вы хотите задать фон, отдельному фрагменту текста, тогда используйте span.
<p>Нет, только <span>розовый цвет</span></p> // HTML
span {
background-color: pink; // CSS
}
Как увеличить текст
<p>Посмотрите, какой я большой</p> // HTML
p {
font-size: 30px; // CSS
}
Как сделать текст курсивом
Через тег i в разметке.
<p>Здесь я прямой, а тут - <i>курсивом</i></p> // HTML
CSS стили + тег
<p><span>Курсивом</span> - я особенный</p> // HTML
span {
font-style: italic; // CSS
}
Итого
Мы взяли список топовых запросов, связанных с форматированием текста в HTML, от начинающих и коротко ответили на них. Задавайте ваши вопросы в комментариях.
-
Создано 29.07.2019 10:29:18
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.