Думаю, многие из вас согласятся с тем, что отформатированный текст на страницах сайта намного удобнее читать и при этом он намного лучше выглядит. Так, в частности, выделенные красной строкой абзацы, намного лучше воспринимаются при чтении.
Навигация по статье:
Давайте рассмотрим с вами, как делается в HTML красная строка.
Стилевое свойство в HTML для красной строки
Итак, для расстановки красной строки при верстке станицы в HTML предусмотрено специальное свойство text-indent, которое задается внутри тега с указанием величины отступа с начала строки.
Значение отступа для красной строки может быть задано в пикселях и в процентах. Так же можно указать отрицательный отступ, но в данном случае нужно проследить за тем, чтобы красная строка не выходила за границы блока.
Пример использования:
|
1 2 3 |
<p style="text-indent: 30px;" > Использование этого CSS свойства для задания в HTML красной строки является наиболее правильным и удобным в использовании. Но кроме этого свойства, в зависимости от ситуации вы можете использовать для задания отступа первой строки неразрывный пробел « » </p> |
Вот как это выглядит:
Использование этого CSS свойства для задания в HTML красной строки является наиболее правильным и удобным в использовании. Но кроме этого свойства, в зависимости от ситуации вы можете использовать для задания отступа первой строки неразрывный пробел.
Как задать красную строку для всего сайта?
Конечно же, способ задания в HTML красной строки удобен в использовании только в том случае, если перед вами стоит задача задать отступ только для определенных абзацев, в каком-то конкретном случае.
Но если вы хотите оформить текст с использованием красной строки на всем сайте, то для вас будет намного удобнее и проще задать этот отступ с таблице стилей CSS. В этом случае красная строка будет задана для всего, уже существующего, текста на вашем сайте, и в будущем, при добавлении нового контента, абзацы будут отображаться с отступами. То есть, при заполнении сайта контентом вам не нужно задавать отступ вручную, он будет задан автоматически.
Для задания красной строки в CSS мы можем воспользоваться таким же свойством text-indent, задав его для всего сайта в целом или для какого то определенного блока.
Например:
|
1 2 3 |
#content p{ text-indent: 20px; } |
В данном случае все абзацы
находящиеся в блоке с идентификатором #content будут начинаться с красной строки.
Я показала вам наиболее правильный и удобный в использовании способ задания в HTML красной строки. При наполнении сайта контентом, конечно же, возможны ситуации, когда данное свойство использовать неудобно, и тогда будет проще, задать красную строку, например, неразрывным пробелом.
Надеюсь, данная статья поможет вам оформить контент на вашем сайте, и сделать текст более приятным для чтения и восприятия пользователями.
Если вам понравилась данная статья, обязательно оставьте комментарий и поделитесь статьей со своими друзьями в социальных сетях.
До встречи в следующих статьях!
С уважением Юлия Гусарь
Красная срока уже перестала быть обязательной даже в книгах. В интернете она нигде не используется, поэтому поколение воспитанное на интернете не будут ее использовать.
Некоторые заказчики пока ещё просят делать им красную строку, и в некоторых дизайн-макетах она встречается. Так что, я думаю, что в ближайшие лет 5-10 она ещё будет периодически встречаться на сайтах.
Через 5-10 лет, она точно снова появится в пользовании :)
А сегодня, ее можно встретить в частных блогах. Но в бизнесе, думаю, крайне редко.