Как оформить первый абзац раздела в HTML5?

Question

В книгах и печатных документах первый абзац главы или раздела имеет одно специальное свойство.Хотя все абзацы имеют отступ, первый абзац раздела не имеет, в то время как первая буква главы может быть более жирной или большей.

Я хочу спросить, есть ли способ HTML5 по умолчанию или собственный HTML5?пометить абзац как первый из раздела / главы, к каким специальным свойствам применяются?Если нет, то какой эффективный способ пометить первый абзац?

То, что я сделал до сих пор, - это определение свойств для тега <p> в разделе <style>, придание ему некоторого отступа и созданиеновое свойство с именем <p1> с отступом 0, которое я использую для первых абзацев.Однако нет способа изменить заголовок / первую заглавную букву, и мне интересно, есть ли лучшие идеи.

Answer 1

Для стилизации первой буквы абзаца CSS предоставляет псевдоэлемент ::first-letter. Следуя примеру Квентина, вы можете ввести первую букву первого абзаца в следующем разделе:

section > p:first-of-type::first-letter {
     font-family: serif;
     color: red;
     font-size: 3.75em;
     font-style: oblique;
     float: left;
     line-height: 3.5rem;
}

Вот рабочий пример обоих наших предложений, связанных вместе:

https://jsfiddle.net/q51o5xqx/2/

Вы также упоминаете "дать ему некоторый отступ". Вы хотите сказать, что хотите, чтобы первый абзац имел меньшую ширину по сравнению с остальными абзацами, или вы хотите, чтобы первая строка каждого абзаца имела отступ?

Если вы хотите, чтобы абзац был с отступом, вы можете просто использовать text-indent. По умолчанию, он будет делать отступ только в первой строке блока текста, а не в каждой строке этого абзаца. Так что-то вроде:

section > p {
   text-indent: 3em;
}

Answer 2

Вы просто делаете его первым абзацем в элементе section.

section > p:first-of-type {
    font-family: monospace;
    font-size: 1.3em;
    color: blue;
}

<section>
  <h2>Section heading</h2>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</section>