Как сделать красную строку в html или отступ первой строки в абзаце
Добрый день уважаемые читатели. Сегодня короткая заметка о том как сделать красную строку для каждого абзаца на html — странице. Если кто не знает, то красная строка это отступ первой строки в блоке текста. Такой отступ в абзацах можно встретить практически в любом печатном тексте, но при создании веб-сайтов оформление красной строки встречается довольно редко, несмотря на то, что она позволяет гораздо удобнее воспринимать текст. На случай если вдруг заказчик потребует, чтобы абзацы на его сайте начинались с красной строки, то привожу для вас простой рецепт решения этой задачи.
Решить задачу можно многими способами, например можно в начале каждого абзаца вставлять подряд несколько специальных символов , но это может занять достаточно большое количество времени. Поэтому я рекомендую для создания красной строки использовать свойство CSS <strong>text-indent</strong> , которое задает отступ первой строки блока текста. При этом никакого воздействия на остальные строки не производиться.
Свойство text-indent имеет простой синтаксис:
text-indent: <значение> | <проценты> | inherit
В качестве значений можно указывать пиксели (px), пункты (pt) другие единицы принятые в CSS. Значение определяет на сколько сдвинуть текст первой строки в право от исходного положения. Допустимо указывать отрицательные значения, тогда текст сдвинется влево. При указании процентных значений, отступ первой строки вычисляется в зависимости от ширины блока текста.
Теперь к примерам. Для разделения абзацев в html обычно используют тег <p> . Тогда, чтобы в каждый абзац на странице начинался с красной строки достаточно добавить код css:
<style>
p <
text-indent: 25px; /* Отступ первой строки в пикселах */
>
</style>
<html>
<head>
<meta charset=»utf-8″>
<title>Красная строка</title>
<style>
p <
text-indent: 25px; /* Отступ первой строки в пикселах */
>
</style>
</head>
<body>
<p>На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.
</p>
<p>
Этот дуб как будто говорил: «Весна, и любовь, и счастье! И как не надоест вам все один и тот же глупый, бессмысленный обман! Все одно и то же, и все обман! Нет ни весны, ни солнца, ни счастья. Вон смотрите, сидят задавленные мертвые ели, всегда одинокие, и вон я растопырил свои обломанные, ободранные пальцы, выросшие из спины, из боков — где попало. Как выросли — так и стою, и не верю вашим надеждам и обманам».
</p>
<p>
Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
</p>
</body>
</html>
Если красную строку необходимо добавить только в один абзац, то можно сделать так:
<p style=»text-indent: 5%»>На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.</p>
На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.
Либо к абзацам, которые должны начинаться с красной строки добавляем атрибут class и добавляем нужный стиль:
<style>
p.indent <
text-indent: 25px;
>
</style>
<p >
Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
</p>
Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
Теперь вы запросто сможете сделать красную строку на своих html страницах. До новых встреч!
Как сделать в HTML красную строку?
Думаю, многие из вас согласятся с тем, что отформатированный текст на страницах сайта намного удобнее читать и при этом он намного лучше выглядит. Так, в частности, выделенные красной строкой абзацы, намного лучше воспринимаются при чтении.
Навигация по статье:
Давайте рассмотрим с вами, как делается в HTML красная строка.
Стилевое свойство в HTML для красной строки
Итак, для расстановки красной строки при верстке станицы в HTML предусмотрено специальное свойство text-indent, которое задается внутри тега с указанием величины отступа с начала строки.
Значение отступа для красной строки может быть задано в пикселях и в процентах. Так же можно указать отрицательный отступ, но в данном случае нужно проследить за тем, чтобы красная строка не выходила за границы блока.
Вот как это выглядит:
Использование этого CSS свойства для задания в HTML красной строки является наиболее правильным и удобным в использовании. Но кроме этого свойства, в зависимости от ситуации вы можете использовать для задания отступа первой строки неразрывный пробел.
Как задать красную строку для всего сайта?
Конечно же, способ задания в HTML красной строки удобен в использовании только в том случае, если перед вами стоит задача задать отступ только для определенных абзацев, в каком-то конкретном случае.
Но если вы хотите оформить текст с использованием красной строки на всем сайте, то для вас будет намного удобнее и проще задать этот отступ с таблице стилей CSS. В этом случае красная строка будет задана для всего, уже существующего, текста на вашем сайте, и в будущем, при добавлении нового контента, абзацы будут отображаться с отступами. То есть, при заполнении сайта контентом вам не нужно задавать отступ вручную, он будет задан автоматически.
Для задания красной строки в CSS мы можем воспользоваться таким же свойством text-indent, задав его для всего сайта в целом или для какого то определенного блока.
Выравнивание текста, параграфы и абзацы в html, красная строка
Параграфы и абзацы – это элементы структурированного текста. По сути это разные понятия. Параграф – небольшое подразделение большого текста внутри главы или раздела. Абзацы, как правило, состоят из нескольких предложений.
В одном параграфе может быть несколько абзацев. Однако в HTML параграф – это то же, что и абзац. В html абзацы выводятся тегом <p></p>.
Дробление текста на параграфы и выделение заголовками помогает создать иерархическую структуру текста, удобную для чтения.
Как выровнять текст в HTML
Если не задавать абзацы, то текст всегда выравнивается по умолчанию по левому краю.
Примеры использования тегов для выравнивания теста
Этот текст выровнен в html посередине. Выравнивание по центру подходит для выделения небольших отрывков текста. Например, для привлечения внимания к цитатам. Не подходит для объёмного текста по той же причине, что и выравнивание «по правому краю» — «рваный» левый край может затруднять чтение.
Этот текст выровнен в html по левому краю. Стандартный и самый распространенный способ выравнивания текста в html и в печатных изданиях. По результатам исследований, выровненный по левому краю текст лучше запоминается и быстрее читается.
Этот текст выровнен в html по правому краю. Применим для добавления информации в шапке сайта, но не подходит для оформления текста большого объёма: из-за «рваного» левого края читателю каждый раз нужно искать начало следующей строки. При небольших объёмах текста это не критично, но затрудняет чтение, если текста много.
Этот текст выровнен в html по обеим сторонам. Его края обрезаются так, чтобы они были ровными с обеих сторон. При необходимости автоматически устанавливаются большие разрывы между словами. Такой текст сложно читать из-за неравномерной разбивки слов. Было выяснено, что выравнивание текста по краю снижает скорость чтения.
Абзацы, параграфы в html
Теги <p></p> можно назвать просто — абзац. Всё, что расположено между ними, будет абзацем текста. Закрывающий тег </p> означает перевод строки. Ну а следующий тег <p> открывает новый абзац.
Кроме тегов <p></p> для выравнивания текста можно использовать теги <div></div>:
WEBTEORETIK
Когда человеку тяжело,
это часто означает,
что он идёт к успеху.
- Главная
- О сайте
- Карта сайта
- Обратная связь
- Главная
- >>
- Раздел >> Уроки CSS
- >>
- Материал >>
- Выравнивание текста и создание красной строки через CSS.
Выравнивание текста и создание красной строки через CSS.
Категория: Уроки CSS Просмотров: 3261 Коментариев: 0 Дата: 2017-12-10 Добавил: admin
В этом уроке затронем еще два свойства, которые относятся к оформлению текста. И сегодня поговорим о таких свойствах как выравнивание текста и создание красной строки для текста.
Выравнивание текста
И первое свойство — это выравнивание. Вы уже, наверное, обратили внимание, что браузер по умолчанию выравнивает все текстовые элементы по левому краю это и есть его базовое значение по выравниванию.
Естественно появляются такие ситуации, когда нужно что-то выровнять по центру, по правому краю или по всей ширине страницы. В CSS, естественно, есть такое свойство, отвечающее за выравнивание.
Свойство align мы уже знаем из HTML. Там оно использовалась для выравнивания текста. В CSS наблюдается подобие, только добавляется спереди слово text. А значения свойства остаются те же самые.
- text-align:left; — Выравнивание по левому краю.
- text-align:center; — Выравнивание по центру.
- text-align:right; — Выравнивание по правому краю.
- text-align:justify; Выравнивание по ширине.
И, для примера, мы будем работать с заголовком <h2> </h2>, который для начала выровняем по центру.
Заголовок Выровнен по центру: text-align: center
Для заголовка h2 задаем выравнивание по центру.
И если хотите по правому краю, то естественно используется следующий вид.
После чего заголовок прижмется к правому краю.
Ну, и последний вариант это выравнивание текста по всей ширине страницы. Что это значит? То что текст будет, выравнивается одновременно и по левому краю и по правому краю за счет увеличения числа пробелов (расстояния) между словами. Для этого используем параграф, которому задаем данное свойство.
При форматировании текста с таким условием, текст будет растягивается по обеим сторонам.
А мы переходим ко второму свойству это создание красной строки.
Создание красной строки CSS
Данное свойство достаточно популярно в использовании, так как оно облегчает чтение больших текстов. Для создания красной строки у каждого параграфа используется следующее свойство text-indent: ;. Отступ можно задать в различных единицах, мы же зададим в пикселях px.
И для всех абзацев зададим отступ в 30px.
Теперь, если сохранить и обновить браузер то увидим, что у всех абзацев появился отступ в 30px.
Вот мы рассмотрели еще два свойства. Они применяются достаточно часто, поэтому стоит их запомнить. Ну а на этом урок закончим, в Демо смотрите пример работы данных свойств.