Четверг, 31 Января 2013 12:20

Тег p, параграф в HTML

Written by 
Оцени эту запись
(0 Голоса)

Тег <p> задает параграф или текстовый абзац в HTML. Используется для расположения текста на странице, разбивая его на отдельные абзацы. Тег p является блочным, начинается с новой строки и переводит элементы после себя на новую строку. Тег p очень часто используется для наполнения HTML страницы контентом, при добавлении статей. Как и в печатных изданиях, на веб-странице принято разбивать текст на абзацы по смыслу. Кроме того, абзацы используются и при оформлении страницы, выделяя текст или другие элементы в информациянный блоках.

 

 

Пример:

 

 

HTML rод: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

 

Вид: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

 

 

Для тега p определены все глобальные атрибуты и единственный собственный атрибут align, который задает выравнивание текста.

 

Атрибут align (не поддерживается HTML5) задается выравнивание текста в элементе. Может принимать значения left(слева), right(справа), center(по центру), justify(на всю ширину).

 

Тег p должен содержать открывающий тег. Закрывающий тег для p не обязателен, если непосредственно после него идет блочный элемент. 

 

Тег p может содержать текст или строчные элементы. Родительским элементов параграфа может быть любой элемент, который может содержать блочный элемент.

 

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

 

Стандартные стили для параграфа:

 

 

p {

display: block;

-webkit-margin-before: 1qem;

-webkit-margin-after: 1qem;

-webkit-margin-start: 0;

-webkit-margin-end: 0;

}

 

 

Пример изменения отступов для тега p при помощи CSS:

 

 

p {

margin: 20px 0;

}

 

Так мы задается отступы сверху и снизу равные 20 пикселей.

 

Обратите внимание, что для переноса строки в текстк нужно использовать элемент <br> или располагать разные строки текста в разных параграфах <p>.

 

Пример:

 

Если вы в HTML коде напишете так, то не получите желаемые переносы строк:

 

<p>

Я знаю, что я могу,
Достичь чего я хочу.
Не сдамся, не отступлю,
Бой до победы доведу.

</p>

 

Я знаю, что я могу, Достичь чего я хочу. Не сдамся, не отступлю, Бой до победы доведу.

 

Чтобы получить желаемый результат, нужно добавить вконце каждой строки <br> или поместить каждую строку в отдельный параграф.

 

При работе с параграфами вам могут пригодиться CSS свойства text-align и text-indent. Свойство text-align задает выравнивание текста, что необходимо для текстового наполнения. Значением свойства text-align, как и атрибута align параграфа, могут быть left, right, center, justify. По умолчанию текст выравнивается с левого края.

 

 

p {

text-align: right;

}

 

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

 

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

 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

 

 

Свойство text-indent задается в пикселях и определяет отступ первой строки от края блока. Это можно увидеть в любой печатном издании, этого же эффекта добиваются в текстовых редакторах при помощи клавиши Tab.

 

p {

text-indent: 40px;

}

 

 

Я добавила в пример больше текста и сделала большой отступ, чтобы был виден эффект:

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

 

 

И напоследок несколько рекомендаций:

 

Схлопывание margin

Базовая стилизация текста

 

 

 

 

 

Additional Info

Еще в этой категории: « Элемент DOCTYPE Тег div »

Комментарии  

 
0 #1 Andrew 29.11.2013 18:10
https://www.youtube.com/watch?v=w1XMWwbjYYA
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов