Текст HTML

В HTML тег <p> (paragraph) используется для обозначения абзацев текста. Это один из основных блоковых элементов, применяемых для структурирования контента на веб-странице. Его базовое использование очень простое, но с помощью CSS (Cascading Style Sheets) можно значительно расширить возможности форматирования текста в <p>. 

В языке HTML подобное использование отдельных блоков вынесено в единую парадигму, которая позволяет рассматривать страницу, как сетку. То есть, тег <p>, как и <div>, относится к блочным тегам. В заданиях ЕГЭ можно найти такие задания, где требуется знать классы тегов. К вопросам мы вернемся в конце материала.

Для начала стоит рассмотреть самое простое применение тега.

Основной синтаксис <p>

Простейший пример:

<p>Это абзац текста.</p>

Каждый <p> создаёт новый абзац с отступами сверху и снизу по умолчанию.

Чтобы кастомизировать внешний вид текста в абзаце, используются CSS-стили, которые можно задавать:

1. Через атрибут style в теге: 
   

   <p style="color: blue; font-size: 18px;">Синий текст размером 18 пикселей.</p>

2. Через классы или идентификаторы:
   

   <style>

       .custom-text {

           color: red;

           font-family: 'Arial', sans-serif;

           line-height: 1.5;

           text-align: justify;

       }

   </style>

   <p class="custom-text">Отформатированный текст с классом.</p> 

Основные параметры форматирования, которые позволяют создать блок текста HTML в том виде, который видит дизайнер.

1. Цвет (color)

Задаёт цвет текста. Можно использовать:

• Название цвета: red, blue.

• HEX-код: #FF5733.

• RGB/RGBA: #ff5733 или rgba(255, 87, 51, 0.8) (где 0.8 — прозрачность).

<p style="color: #00aaff;">Цвет текста: бирюзовый.</p>

2. Прозрачность (opacity)

Задаёт прозрачность элемента (включая текст и фон). Диапазон: от 0 (полностью прозрачный) до 1 (полностью видимый).

<p style="opacity: 0.5;">Этот текст полупрозрачный.</p>

3. Размер текста (font-size)

Можно задавать в:

• Пикселях: font-size: 16px.

• Эмах (em), зависящих от размера шрифта родителя: font-size: 1.2em.

• Процентах относительно стандартного размера: font-size: 120%.

<p style="font-size: 20px;">Крупный текст.</p>

4. Шрифт (font-family)

Определяет стиль шрифта. Например:

• Системные шрифты: Arial, Times New Roman.

• Веб-шрифты: Google Fonts.

• Альтернативы: font-family: 'Arial', sans-serif.

<p style="font-family: 'Courier New', monospace;">Текст с моноширинным шрифтом.</p>

5. Толщина шрифта (font-weight)

Можно задать численно (100 до 900) или словами:

• normal (нормальный).

• bold (жирный).

• lighter (тонкий).

<p style="font-weight: bold;">Жирный текст.</p>

6. Форма текста (курсив и заглавные)

• Курсив: font-style: italic.

• Прописные буквы: text-transform: uppercase (все заглавные) или capitalize (первая буква заглавная).

<p style="font-style: italic; text-transform: uppercase;">КУРСИВ И ЗАГЛАВНЫЕ БУКВЫ.</p>

7. Выравнивание (text-align)

Задаёт расположение текста внутри контейнера:

• left (по левому краю, по умолчанию).

• right (по правому краю).

• center (по центру).

• justify (по ширине).

<p style="text-align: justify;">Этот текст выровнен по ширине.</p>

8. Межстрочный интервал (line-height)

Управляет расстоянием между строками текста. Например:

<p style="line-height: 1.8;">Интервал между строками увеличен.</p>

9. Отступы (margin и padding)

• margin: внешний отступ от других элементов.

• padding: внутренний отступ от границ элемента.

<p style="margin: 20px; padding: 10px; background-color: lightgrey;">Текст с отступами и фоном.</p>

У работы со встроенными стилями и каскадами есть набор своих преимуществ и недостатков. Текст HTML можно настроить обоими способами одинаково эффективно, но при регулярных изменениях могут возникнуть непредвиденные сложности. Помните, что для каждого проекта необходим индивидуальный подход и не всегда использование таблиц стилей гарантирует простоту и понятность.

Использование встроенных стилей:

Плюсы:

• Простота для небольших страниц. 

• Высокая скорость создания.

Минусы:

• Трудно поддерживать и изменять.

• Могут возникать неожиданные пересечения.

• При значительном количестве утяжеляет проект.

Использование CSS-классов:

Плюсы:

• Удобно для многостраничных сайтов.

• Правильная логика исключает ошибки.

• Повторное использование стилей облегчает сайт и ускоряет его загрузку. 

Минусы:

• Требует создания отдельного файла CSS.

• Может потребовать разбить один стиль на множество при развитии проекта.

Давай рассмотрим пример с комбинированными стилями и построим страницу, как уже делали ранее.

<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Пример работы с `<p>`</title>

    <style>

        .highlight {

            color: white;

            background-color: darkblue;

            padding: 10px;

            margin: 20px 0;

            font-size: 18px;

            border-radius: 5px;

        }

    </style>

</head>

<body>

    <p>Это стандартный абзац.</p>

    <p class="highlight">Это выделенный абзац с классом.</p>

    <p style="color: green; font-size: 20px; text-align: center;">

        Этот абзац зелёный и центрированный.

    </p>

</body>

</html>

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

Подготовка к ЕГЭ по данной теме важна. Необходимо знать теги и их параметры, а также применение в разных ситуациях. Попробуем проверить себя!

1. Какой тег используется для создания абзаца текста в HTML?
   

   1. <div>

   2. <span>

   3. <p> 

   4. <a>

2. Какой CSS-свойство отвечает за цвет текста в абзаце?
   

   1. background-color

   2. color 

   3. font-size

   4. text-align

3. Какое значение CSS-свойства text-align используется для выравнивания текста по центру?
   

   1. justify

   2. left

   3. center 

   4. right

4. Какой формат можно использовать для задания цвета текста?
   

   1. rgb (255, 255, 255)
      

   2. align-center

   3. #font-red

   4. size(12px)

5. Какое значение свойства font-weight делает текст жирным?
   

   1. normal

   2. bold 

   3. italic

   4. uppercase

6. Что делает CSS-свойство line-height?
   

   1. Определяет размер шрифта.

   2. Определяет расстояние между строками. 

   3. Выравнивает текст по краям.

   4. Устанавливает прозрачность текста.

7. Какое CSS-свойство позволяет сделать текст курсивным?
   

   1. font-weight

   2. text-transform

   3. font-style 

   4. line-height   

8. Как задать прозрачность текста в абзаце?
   

   1. Использовать opacity. 

   2. Использовать font-opacity.

   3. Использовать text-alpha.

   4. Использовать color-alpha.