Тег 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 пикселей.
Упражнение доступно только авторизованным пользователям.
Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.