Тег style

Основная проблема использования атрибутов для определения стилей — их перегруженность. Часто разметка HTML содержит очень много элементов, а с добавлением стилей кода становится намного больше, что плохо сказывается на чтении разметки.

Вторая проблема — исправление стилей. Для этого необходимо сначала найти нужный элемент в коде, а потом отредактировать его стили. Таких элементов на странице может быть 10, 20, 100. А для одноимённых тегов придётся записывать стили отдельно для каждого элемента.

Возникает естественное желание иметь все стили в одном месте, где можно было бы их быстро редактировать. Таким решением является использование тега style, внутри которого могут располагаться все необходимые стили.

Возьмём пример из прошлого урока:

<div style="font-size: 20px">
  Этот текст будет с размером шрифта 20 пикселей

  <p>Вложенный параграф также будет иметь размер шрифта 20 пикселей</p>
</div>

Чтобы избавиться от атрибутов, добавим тег style и укажем, что для тега div используется шрифт размером 20 пикселей.

<style>
  div {
    font-size: 20px;
  }
</style>

<div>
  Этот текст будет с размером шрифта 20 пикселей

  <p>Вложенный параграф также будет иметь размер шрифта 20 пикселей</p>
</div>

Таким же образом можно указать, что у параграфа будет размер шрифта 10 пикселей.

<style>
  div {
    font-size: 20px;
  }

  p {
    font-size: 10px;
  }
</style>

<div>
  Этот текст будет с размером шрифта 20 пикселей

  <p>Вложенный параграф будет иметь размер шрифта 10 пикселей</p>
</div>

Задание

Добавьте в редактор параграф и, используя тег style, установите размер шрифта в 10 пикселей.