Как сделать в HTML красную строку?

Как сделать в HTML красную строку?

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

Давайте рассмотрим с вами, как делается в HTML красная строка.

Стилевое свойство в HTML для красной строки

Итак, для расстановки красной строки при верстке станицы в HTML предусмотрено специальное свойство text-indent, которое задается внутри тега с указанием величины отступа с начала строки.

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

Пример использования:

Вот как это выглядит:

Использование этого CSS свойства для задания в HTML красной строки является наиболее правильным и удобным в использовании. Но кроме этого свойства, в зависимости от ситуации вы можете использовать для задания отступа первой строки неразрывный пробел.

Как задать красную строку для всего сайта?

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

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

Для задания красной строки в CSS мы можем воспользоваться таким же свойством text-indent, задав его для всего сайта в целом или для какого то определенного блока.

Например:

В данном случае все абзацы

находящиеся в блоке с идентификатором #content будут начинаться с красной строки.

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

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

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

3 комментария

  1. Красная срока уже перестала быть обязательной даже в книгах. В интернете она нигде не используется, поэтому поколение воспитанное на интернете не будут ее использовать.

    • Некоторые заказчики пока ещё просят делать им красную строку, и в некоторых дизайн-макетах она встречается. Так что, я думаю, что в ближайшие лет 5-10 она ещё будет периодически встречаться на сайтах.

      • Через 5-10 лет, она точно снова появится в пользовании :)
        А сегодня, ее можно встретить в частных блогах. Но в бизнесе, думаю, крайне редко.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif