P css: : Элемент текстового абзаца — HTML

— HTML — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. Подсказки
  6. На практике
    1. Дока Дог советует
    2. Алёна Батицкая советует

Кратко

Секция статьи «Кратко»

Используйте тег <p>, чтобы превратить текст в абзац.

Пример

Секция статьи «Пример»
<p>Это первый абзац текста.</p><p>А это уже второй.</p><p>И между ними небольшая пропасть.</p>
          <p>Это первый абзац текста.</p>
<p>А это уже второй.</p>
<p>И между ними небольшая пропасть.</p>

Как понять

Секция статьи «Как понять»

Тег <p> создаёт блок: всё, что находится внутри него, начнётся с новой строки. Между блоками <p> появляется вертикальный отступ, величину которого можно задать с помощью стилей.

Внутри блока может находиться любой текстовый контент.

Как пишется

Секция статьи «Как пишется»
<p>Текст, хихик</p>
          <p>Текст, хихик</p>

Дефолтные стили абзаца:

p {  display: block;  margin-top: 1em;  margin-bottom: 1em;  margin-left: 0;  margin-right: 0;}
          p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

Подсказки

Секция статьи «Подсказки»

💡 Атрибут align для тега <p> устарел и больше не используется.

💡 Абзац может заканчиваться не только явно (закрывающим тегом </p>), но и неявно — перед началом следующего блочного элемента. Поэтому нельзя просто взять и вложить в абзац список, таблицу, <figure>, другой абзац и подобные элементы: браузер неявно закроет абзац перед ними и сделает эти элементы не вложенными, а соседними.

На практике

Секция статьи «На практике»

Дока Дог советует

Секция статьи «Дока Дог советует»

🛠 Тег <p> по факту ведёт себя как обычный блок <div>. Нужно учесть, что у <p> по умолчанию заданы свойства margin-block-start и margin-block-end — отступы от начала и конца блока, чтобы каждый абзац отступал на 1em (примерно 16 пикселей) от предыдущего. Поэтому этот показатель отступов надо прописывать в CSS для всех тегов <p>.

Чтобы сделать заголовок, который не имеет ценности для поисковых машин, то лучше, вместо одного из тегов <h2><h6> использовать тег <p> с классом h2 или h3 и так далее.

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

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

Возьмите с полки любую книгу с прозой и откройте её. Вы увидите, что чаще всего абзацы состоят из нескольких предложений. Каждый абзац визуально отделён от предыдущего и следующего. В некоторых книгах это заметный отступ. Где-то — красная строка (отступ первой строки). Редко когда абзац состоит из отдельного слова или словосочетания.

Придерживайтесь этого принципа и в вёрстке. Оборачивайте в тег <p> как минимум одно полное предложение или текст из нескольких предложений.

Если нужен текстовый тег для слова или словосочетания — обратите внимание на <span>.

Текст — пластичная конструкция. Если нужно добиться переноса строк, то ограничьте ширину текстового блока и позвольте тексту занять отведённое ему пространство естественным образом.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

<h2>. ..<h6>

alt +

<div>

alt +

HTML тег

onplayСкрипт викликається коли медіа дані готові почати відтворення.
onafterprintСкрипт виконується тільки після як документ надрукований.
onbeforeprintСкрипт виконується перед тим, як документ надрукований.
onbeforeunloadСкрипт виконується коли документ ось-ось буде вивантажений
onhashchangeСкрипт виконується коли там відбулися зміни до частини якоря в URL
onloadВикликається після того як завантаження елемента завершене.
onmessageСкрипт виконується коли викликане повідомлення.
onofflineСпрацьовує коли браузер починає працювати в автономному режимі
ononlineСпрацьовує коли браузер починає працювати в режимі онлай.
onpagehideСкрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshowСкрипт виконується коли користувач заходить на сторінку.
onpopstateСкрипт виконується коли змінено історію одного вікна.
onresizeСкрипт виконується, коли розмір вікна браузера змінюється.
onstorageСкрипт виконується, коли вміст Web Storage оновлюється.
onunloadВикликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblurСкрипт виконується, коли елемент втрачає фокус.
onchangeВикликається в той момент, коли значення елемента змінюється.
oncontextmenuСкрипт виконується коли викликається контекстне меню.
onfocusВикликається в той момент, коли елемент отримує фокус.
oninputСкрипт викликається коли користувач вводить дані поле.
oninvalidСкрипт виконується, коли елемент недійсний.
onresetВикликається, коли натискається у формі кнопка типу Reset.
onsearchВикликається, коли користувач щось пише в поле пошуку (для &lt;input type=&quot;search&quot;&gt;)
onselectВикликаєтсья після того як будь-який текст був обраний в елементі.
onsubmitВикликається при відправленні форми.
onkeydownПодія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypressВикликається коли корисрувач натиснув на клавішу.
onkeyupВикликається коли користувач відпускає клавішу.
ondblclickВиникає при подвійному клацанні ЛКМ на елементі.
ondragПеріодично викликається при операції перетягування.
ondragendВикликається коли користувач відпускає перелягуваний елемент.
ondragenterВикликається, коли перетягуваний елемент входить в цільову зону.
ondragleaveВикликається, коли перетягуваний елемент виходть з зони призначення.
ondragoverВикликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstartВикликається, коли користувач починає перетягувати елемент, або виділений текст.
ondropВикликається, коли перетягуваний елемент падає до зони призначення.
onmousedownВикликається, коли користувач затискає ЛКМ на елементі.
onmousemoveВикликається, коли курсор миші переміщається над елементом.
onmouseoutВикликається, коли курсор виходить за межі елемента.
onmouseoverВиконується, коли курсор наводиться на елемент.
onmouseupВикликається, коли користувач відпускає кнопку миші.
onscrollВикликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheelВикликається, коли користувач прокручує коліщатко миші.
oncopyВикликається, коли користувач копіює вміст елемента.
oncutВикликається, коли користувач вирізає вміст елемента.
onpasteВикликається, коли користувач вставляє вміст в елемент.
onabortВиконується при перериванні якоїсь події.
oncanplayСкрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythroughСкрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechangeСкрипт виконується коли змінюється кий в &lt;track&gt; елемента
ondurationchangeВикликається коли змінюється довжина медіа файлу.
onemptiedВикликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onendedВикликається коли медіа елемент повністю відтворив свій зміст.
onshowВикликається, коли елемент &lt;menu&gt; буде відображено як контекстне меню.
onloadedmetadataСкрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddataВикликається коли медіа данні завантажено.
onloadstartВикликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpauseВикликається коли відтворення медіа даних призупинено.
onplayingВикликається коли розпочато відтворення медіа даних.
onprogressПодія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechangeВикликається коли змінюється швидкість відтворення медіа даних.
onseekedВикликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseekingВикликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalledСкрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspendСкрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdateВикликається коли змінилася позиція відтворення елемента &lt;audio&gt; або &lt;video&gt;.
onvolumechangeВикликається коли змінюється гучність звуку.
onwaitingВикликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggleВикликається, коли користувач відкриває або закриває елемент &lt;details&gt;.
onerrorВикликається якщо при завантаженні елемента сталася помилка.
onclickПодія викликається коли користувач клацає ЛКМ по елементу.

html — css для определенных тегов p

спросил

Изменено 7 лет, 3 месяца назад

Просмотрено 9к раз

Я уже задавал аналогичный вопрос, но нашел более подходящую формулировку. Итак, учитывая html-документ с несколькими идентификаторами div, и каждый идентификатор div с несколькими тегами p внутри него… например,

 <дел>
     

Здравствуйте

это номер один

это номер два

<дел>

ещё раз привет!

я просто хочу это

Как конкретно настроить второй тег p идентификатора «testing», не затрагивая первый тег p второго идентификатора «testingTwo»?

  • html
  • css

Вы можете использовать селектор nth-of-type для выбора второго р элемент.

Используя #testing в селекторе, вы выбираете только те элементы, которые находятся внутри элемента #testing . Таким образом, вам не нужно беспокоиться об элементах p в другом месте.

 #тестирование p:nth-of-type(2) {
  цвет: зеленый;
  вес шрифта: полужирный;
} 
 <дел>
   

Здравствуйте

это номер один

это номер два

<дел>

ещё раз привет!

я просто хочу это

В качестве альтернативы вы также можете использовать #testing :nth-child(3) для выбора третьего дочернего элемента внутри элемента #testing . Однако это ненадежный метод, так как разметка может измениться, и это не сработает.

 #тестирование :nth-child(3) {
  красный цвет;
} 
 <дел>
   

Здравствуйте

это номер один

это номер два

<дел>

ещё раз привет!

я просто хочу это

1

Попробуйте

 #testing :nth-child(3) {
   //код
 }
 

Используйте ‘#’ при нацеливании на идентификатор и ‘.’ если класс.

3

В качестве, пожалуй, самого простого метода вы можете дать тегу P новый идентификатор или класс, чтобы выделить его.

 <дел>
   

Здравствуйте

это номер один

это номер два