Содержание
HTML тег p | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 05.02.2010
Тег <p> (англ. paragraph — параграф) — тег-контейнер, предназанчен для создания абзацев.
Блочный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<p>...</p>
Атрибуты
Основные
Вспомогательные
События
| align | выраванивание текста в абзаце
|
|---|---|
| class | определяет имя используемого класса |
| dir | определяет направление символов:
|
| id | уникальный индетификатор |
| lang | определяет используемый язык |
| onclick | щелчек на элементе |
| ondblclick | двойной щелчек на элементе |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| style | задает встроенную таблицу стилей |
| title | добавляет всплывающую подсказку |
Пример
<p>
Абзац — малоисследованный компонент литературной формы, имеющий композиционное, сюжетно-тематическое, ритмическое значение и связанный со стилем автора.
</p>
Рекомендации по использованию
- закрывающий тег обязателен (</p>)
- тег <p> должен содержать CDATA и строчные элементы
- не допускается вложение абзацев в абзац
- обязательных атрибутов нет
- элемент уровня блока, т.е. содержимое тега по умолчанию начинается с новой строки. После тега также добавляется перенос строки (если в свойствах блока не прописано другого)
Твой код:
<html>
<head>
<title></title>
</head>
<body>
<p>Абзац — малоисследованный компонент литературной формы, имеющий композиционное, сюжетно-тематическое, ритмическое значение и связанный со стилем автора.</p>
</body>
</html>
Сделай код и жми тут
Результат:
большой полигон
CSS: абзацы с отступом
Абзацы с отступом
Вот простой приём: выделение отступом первой строки каждого
абзаца. Многим людям проще читать текст, когда его абзацы выделены
отступом, а не разделены между собой пустыми строками. Это особенно
заметно с большими текстами, но также позволяет зарезервировать
пустые строки для более важных разрывов текста.
Трюк здесь состоит в том, чтобы выделять отступом только чётные
абзацы. Первый абзац страницы необязательно выделять отступом, как,
например, и абзац, следующий за диаграммой, заголовком или чем-то,
что уже само по себе является отступом от текста. А правила очень
просты:
p {
margin-bottom: 0 }
p + p {
text-indent: 1.5em;
margin-top: 0 }Здесь мы выделяем отступом первую строку только того абзаца,
который следует за другим абзацем. С помощью этих правил мы также
убираем пустую строку под всеми абзацами и над абзацами с отступом.
На практике вы обнаружите, что вам всё же нужны исключения.
На этой странице, например, есть элементы P, которые
используются в качестве подписи к изображениям (см. пример “Иллюстрации & подписи”). Мы уже выровняли
их по центру, поэтому выделять дополнительно отступом не надо.
Простое правило ‘p.caption {text-indent: 0}‘
позаботится об этом. Вы можете видеть, что мы действительно
использовали это правило в нашем примере.
Теперь мы можем использовать произвольное число
пробелов между абзацами для обозначения важных разрывов в тексте.
Давайте определим три разных класса: stb (малый
тематический разрыв), mtb (средний тематический
разрыв) и ltb (большой тематический разрыв). Мы
присвоили данному абзацу класс stb, чтобы вы могли
увидеть эффект.
p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }Чем отличается тег от ?
Оба тега <p> и <div> являются блочными элементами, которые используются в языке гипертекстовой разметки (HTML). Тег <p> применяется для размещения текста на странице и разделения его на абзацы. С помощью тега <div> можно выделить фрагмент в документе и с помощью таблицы стилей (CSS) преобразовать его. Тег <p> и тег <div> начинаются всегда с новой строки, а после закрытия тега делается отступ. Для тега <div> наличие закрывающего тега </div> обязательно в отличие от <p>-тега. Если пропустить закрывающий </p>-тег, то параграф закончится с началом следующего блочного элемента. Шрифт, стиль, цвет текста и просвет между параграфами можно задать в таблице стилей.
примеры
html код: <p>В одних садах цветёт миндаль, в других метёт метель.</p> <p>В одних краях ещё февраль, в других — уже апрель.</p> <p>Проходит время, вечный счёт: год за год, век за век…</p> <p>Во всём — его неспешный ход, его кромешный бег.</p> <p>В году на радость и печаль по двадцать пять недель.</p> <p>Мне двадцать пять недель февраль, и двадцать пять — апрель.</p> <p>По двадцать пять недель в туман уходит счёт векам.</p> <p>Летит мой звонкий балаган куда-то к облакам.</p> <p><i>М. Щербаков</i></p> | <head> <style type=»text/css»> .block1 { width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left; } .block2 { width: 200px; background: #fc0; padding: 5px; border: solid 1px black; float: left; position: relative; top: 40px; left: -70px; } </style> </head> <body> <div class=»block1″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div> <div class=»block2″>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> </body> |
seodon.ru | Теги HTML — Тег P
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <P> применяется для разделения страницы на параграфы. Он может содержать только текст и inline-теги (теги уровня строки). При этом сам тег <P> является блочным, то есть создает перенос строки перед собой и после себя. Кроме этого, он устанавливает поля (margin) свободного пространства сверху и снизу от своих сторон до окружающего контекста, благодаря чему и происходит визуальное разбиение страницы на параграфы. Размер полей тега <P> зависит от типа браузера, но примерно он равен высоте одной строки текста на текущей странице.
Закрывающий тег </P> не является обязательным. Если он отсутствует, то концом параграфа будет считаться первый не-inline-тег расположенный ниже в HTML-коде страницы.
Атрибуты
Личные атрибуты:
- align — Устанавливает горизонтальное выравнивание содержимого параграфа.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: текст (блоки).
Модель тега: block (блочный, уровня блока).
Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).
Открывающий тег: необходим. Закрывающий тег: не обязателен.
Синтаксис
<p>содержимое</p>Пример HTML: применение тега P
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Применение тега P</title>
</head>
<body>
<p>Одной из ошибок начинающих создателей сайтов является использование неоднородных
изображений или ярких цветов для фона текстовой информации на странице.
Это не только затрудняет чтение, но и пагубно влияет на зрение пользователей,
заставляя их всматриваться в каждую строчку и излишне напрягать глаза.</p>
<p>Еще одна ошибка — это использование «где ни попадя» инвертированных цветов, когда
визуально цвет текста светлее фона, например черный фон — белый текст. Данная
техника вполне применима, но только там, где это действительно к месту.</p>
</body>
</html>Результат примера
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
Как изменить интерлиньяж в HTML-тексте
Чтобы изменить расстояние между строками в HTML, вам не нужно забивать шпоны. Вам нужно всего лишь к объекту, в котором вы хотите это расстояние отрегулировать, например, к абзацу текста (тег <p></p>) или к блочному элементу (<div></div>), применить CSS-свойство line-height. Свойство может применяться ко всем тегам HTML.
Значение у line-height можно задавать в процентах, множителем, единицами измерения (пиксели (px), пункты (pt), пайки (pc) и т.д.), а также оно может принимать значение normal и inherit.
При normal расстояние между строками вычисляется браузером автоматически по своим соображениям, при inherit — наследуется значение родительского элемента, т.е. тега, в который данный тег вложен.
Черкнем несколько строк на HTML.
1 | <!DOCTYPE html> |
Вот так выглядит в браузере расстояние между строками в абзаце со значением 1 (т.е. одинарный интерлиньяж) и 70% у заголовка (заметьте что при расчете в % за 100% берется высота шрифта):
Если мы зададим line-height для тега <div>, окутывающего и заголовок, и абзац, а у них, соответственно, это свойство уберем, то получится:
1 | <!DOCTYPE html> div { </style> |
Если мы поставим line-height = 0.4, получится экспонат отрицательного интерлиньяжа:
Зачем же вообще с расстоянием между строками что-то делают? Из-за вредности? От нечего делать?
Отнюдь.
Правильно подобранное расстояние между строками может повысить читабельность текста, а это очень важный аспект в веб-дизайне, в книгопечатании и во всем, что связано с текстом. Согласитесь, что когда мы во втором примере увеличили расстояние между строками, текст стало приятнее читать, не так ли? Но это совсем не значит, что чем больше интерлиньяж, тем выше удобочитаемость текста. После какого-то определенного момента строки начинают слишком далеко стоять друг от друга, глазу становится труднее переходить от одной к другой, и при чтении возникает дискомфорт. Помните о золотой середине.
Метки:
Расстояние между базовыми линиями строк текста. Складывается из размера шрифта и межстрочным расстоянием. На рис. 1 показана базовая линия текста и расстояние между ними.
Рис. 1. Интерлиньяж
На веб-странице интерлиньяж вычисляется браузером автоматически в зависимости от размера и типа шрифта. Также значение интерлиньяжа можно установить самостоятельно с помощью стилевого атрибута line-height или font.
В качестве значения line-height можно использовать множитель, процентную запись или точное значение, заданное в любых единицах принятых в CSS — пиксели (px), дюймы (in), пункты (pt) и др. В примере 1 показана установка интерлиньяжа в пикселах.
Пример 1. Использование line-height
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Интерлиньяж</title>
<style type="text/css">
DIV {
line-height: 30px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
</div>
</body>
</html>Результат данного примера показан на рис. 2.
Рис. 2. Значение интерлиньяжа установлено как 30 пикселов
Любое число больше нуля у аргумента line-height воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.
Аналогично можно установить интерлиньяж с помощью стилевого параметра font, задавая ему три аргумента: размер шрифта, межстрочное расстояние и гарнитуру, как показано в примере 2.
Пример 2. Использование font
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Интерлиньяж</title>
<style type="text/css">
P {
font: 11pt/16pt sans-serif;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.</p>
</body>
</html>В данном примере задан рубленый шрифт (sans-serif), размер его установлен 11 пунктов, а интерлиньяж — 16 пунктов. Обратите внимание, что эти два параметра пишутся через слэш (/). Результат примера показан на рис. 3.
Рис. 3. Значение интерлиньяжа установлено как 16 пунктов
Веб-разработка*
Множество людей, включая дизайнеров, думают, что типографика – это только выбор гарнитуры, размера шрифта и того, должен ли он быть нормальным или полужирным. Для большинства людей на этом все и заканчивается. Но для получения хорошей типографики нужно гораздо больше и как правило это детали, которые дизайнеры часто игнорируют.
Эти детали дают дизайнеру полный контроль, позволяет ему создавать прекрасные и последовательные с точки зрения типографики решения в дизайне. Хотя все это применимо для различных типов носителей, в этой статье мы сосредоточимся на том, как их применить к веб-дизайну с использованием CSS. Вот 8 простых путей с помощью CSS улучшить типографику и, следовательно, общее удобство дизайна.
1. Размеры
Размер наборной строки. Для глаза читателя, длинные или короткие строки утомительны. Длинные – разрушают ритм, так как читателю трудно найти следующую строку текста. Единственная ситуация, в которой приемлемы короткие строки – малое количество текста. Для наилучшей читабельности длина строки должна быть между 40 и 80 символами, включая пробелы. Для дизайна с одной колонки текста 65 символов – идеальны.
Простой способ вычислить длину строки – использовать метод Роберта Брингхарста (Robert Bringhurst’s), который умножает размер шрифта на 30. То есть, если размер шрифта 10px, умножая его на 30 получим 300px или, приблизительно, 65 символов в строке. Код будет выглядеть приблизительно как:p {
font-size: 10px;
max-width: 300px;
}
Я использую px так как это значительно упрощает расчеты, но можно использовать и em.
2. Интерлиньяж
Интерлиньяж это пространство между строками текста в теле заметки и оно играет большую роль для читабельности. Правильное разделение строк, позволяет читателю проще следить за строкой и улучшает внешний вид текста. Интерлиньяж так же изменяет типографический цвет текста, который является плотностью или же тоном композиции.
На интерлиньяж влияет множество факторов: гарнитура, размер шрифта, его полнота, обстоятельства(?), длина строки, расстояние между словами и т.д. Чем длиннее строка, тем больше интерлиньяж. Чем больше размер шрифта, тем меньше интерлиньяж. Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта, в зависимости от гарнитуры. Так что если шрифт 12pt, то для веб интерлиньяж должен быть в 15pt или 16pt.
Определение верного интерлиньяжа требует определенной ловкости, но ниже приведен пример того, на что должен быть похож ваш код:body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}
3. Обработка кавычек
Обработка кавычек должна проводиться на полях текста. Если кавычки сливаются с текстом, то они разрывают левое поле и нарушают рифму блока текста. Обработка кавычек не нарушает выравнивания по левому краю и баланса и поэтому – улучшает читабельность.
Это легко достигается с помощью CSS, используя элемент blockquote:blockquote {
text-indent: -0.8em;
font-size: 12px;
}
Отрицательный отступ будет зависеть от гарнитуры, размера шрифта и полей.
4. Вертикальный ритм
Сетка базовых линий это основа постоянного типографического ритма на странице. Он позволяет читателям легко следить за текстом, что в свою очередь увеличивает читабельность. Постоянный ритм в вертикальном пространстве удерживает текст на постоянной сетке так, что пропорции и баланс сохраняются неизменными по всей странице вне зависимости от размера шрифта, интерлиньяжа или длинны строки.
Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное расстояние (интерлиньяж) был равен размеру сетки базовых линий. Допустим, вы используете 15px сетку базовых линий, подразумевая, что между каждой линией сетки 15px. Интерлиньяж будет 15px и расстояние между параграфами тоже будет 15px. Вот пример:body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}
p {
margin-bottom: 15px;
}
Это позволяет каждому параграфу располагаться на сетке, сохраняя вертикальный ритм текста.
5. Верхние и нижние висячие строки
Верхняя висячая строка — строка текста или слово в конце параграфа. Нижняя висячая строка — слово или короткая строка текста в начале или конце колонки, которая отделена от всего остального текста. Верхние и нижние висячие строки образуют неуклюжие куски, прерывают взгляд читателя и влияют на читабельность. Этого можно избежать увеличив размер шрифта, интерлиньяж, длину строки, расстояние между словами и межбуквенное расстояние или вводя вручную разрывы строки.
К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t, плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.
6. Выделение
Важно выделять слова не отвлекая читателя. Курсивное начертание часто рассматривается как идеальная форма выделения. Некоторые другие распространенные формы выделения: полужирное начертание, заглавные буквы, капитель, размер шрифта, цвет, подчеркивание или другая гарнитура. Не важно, какой вы воспользуетесь, постарайтесь использовать только одну. Такие комбинации как капитель – полужирное – курсивное начертание отвлекают и смотрятся неуклюже.
Вот несколько способов выделения с помощью CSS:span {
font-style: italic;
}
h2 {
font-weight: bold;
}
h3 {
text-transform: uppercase;
}
b {
font-variant: small-caps;
}
Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.
7. Масштаб
Всегда верстайте с учетом масштаба, традиционного ли масштаба разработанного в шестидесятых и с которым мы все знакомы, или тот, который придуман вами. Масштаб важен, так как создает типографическую иерархию, что улучшает читабельность, создает гармонию и улучшает когнитивную пригодность текста.
Пример типографического масштаба определенного в CSS:h2 {
font-size: 48px;
}
h3 {
font-size: 36px;
}
h4 {
font-size: 24px;
}
h5 {
font-size: 21px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
font-size: 14px;
}
8. Подчищаем рваные края
Когда создается блок текста с выравниванием по левому или правому краю, не забудьте подчистить рваные края (неровные строки) и сбалансировать текст без всяких неожиданных «дыр» или неуклюжих форм текстовых блоков. Рваные края могут отвлекать читателя. Хороший край «мягкий», равномерный, без слишком длинных, или слишком коротких строк. Нельзя контролировать это с помощью CSS, так что для получения хороших краев надо вносить в текст ручные правки.
Можно улучшить края с помощью переносов, но к сожалению CSS тут бессилен. Возможно, в «ближайшем» будущем CSS3 обеспечит некоторый контроль… Но несмотря на это – не все потеряно. Есть ряд решений на стороне сервера и на стороне клиента, которые осуществляют автоматическую расстановку переносов. Например phpHyphenator, Hyphenator или online генераторы.
Hyphenator.js это Javascript-библиотека которая осуществляет автоматическую расстановку переносов на стороне клиента.
Ресурсы для дальнейшего изучения
Вот список тематически связанных с проблемой статей и книг, которые помогут вам с деталями.
PHP: Изолирование от HTML — Manual
Изолирование от HTML
Все, что находится вне пары открывающегося и закрывающегося тегов, игнорируется
интерпретатором PHP, у которого есть возможность обрабатывать файлы со смешанным содержимым. Это позволяет PHP-коду
быть встроенным в документы HTML, к примеру, для создания шаблонов.
<p>Это будет проигнорировано PHP и отображено браузером.</p>
<?php echo 'А это будет обработано.'; ?>
<p>Это тоже будет проигнорировано PHP и отображено браузером.</p>
Это работает так, как и ожидается, потому что когда интерпретатор PHP встречает закрывающие теги ?>,
он просто начинает выводить все что найдёт (за исключением сразу следующего
символа перевода строки — смотрите раздел
разделение инструкций)
пока не встретит другой открывающий тег за исключением случая с
содержащимся внутри кода условным оператором, в котором интерпретатор определяет результат
условия перед принятием решения что пропустить.
Ознакомьтесь со следующим примером.
Использование структур с условиями
Пример #1 Продвинутое изолирование с использованием условий
<?php if ($expression == true): ?>
Это будет отображено, если выражение истинно.
<?php else: ?>
В ином случае будет отображено это.
<?php endif; ?>
В этом примере PHP пропускает блоки, где условие не соблюдается. Даже
несмотря на то, что они находятся вне пары открывающих/закрывающих тегов, PHP
пропустит их в соответствии с условием, так как интерпретатор PHP будет перепрыгивать через
блоки, содержащиеся внутри условия, которое не соблюдается.
При выводе больших блоков текста выход из режима синтаксического разбора PHP
обычно более эффективен, чем отправка текста с помощью функций
echo или print.
Замечание:
Кроме того, если вы намереваетесь вставлять PHP-код в XML или XHTML,
чтобы соответствовать XML стандартам, вам следует использовать форму
<?php ?>.
Как сделать красную строку в html или отступ первой строки в абзаце : WEBCodius
Добрый день уважаемые читатели. Сегодня короткая заметка о том как сделать красную строку для каждого абзаца на 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>На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.</p>
Результат:
На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.
Либо к абзацам, которые должны начинаться с красной строки добавляем атрибут class и добавляем нужный стиль:
<style>
p.indent {
text-indent: 25px;
}
</style>
<p>
Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
</p>
Результат:
Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
Теперь вы запросто сможете сделать красную строку на своих html страницах. До новых встреч!
HTML p тег
Пример
Абзац размечен следующим образом:
Это текст в абзаце.
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Тег
определяет абзац.
Браузеры автоматически добавляют одну пустую строку до и после каждого
элемент.
Совет: Используйте CSS для стилизации абзацев.
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| Есть | Есть | Есть | Есть | Есть |
Глобальные атрибуты
Тег
также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег
также поддерживает атрибуты событий в HTML.
Другие примеры
Пример
Выровнять текст в абзаце (с помощью CSS):
Это текст в абзаце.
Попробуй сам »
Пример
Стили абзацев с помощью CSS:
p {
цвет: темно-синий;
текстовый отступ: 30 пикселей;
преобразование текста: прописные;
}
Lorem ipsum dolor sit amet, conctetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
аликва.Ut enim ad minim veniam, quis nostrud упражнения ullamco labouris
nisi ut aliquip ex ea Commodo Concequat. Duis aute irure dolor в
репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia
deserunt mollit anim id est Laborum.