Тег <style>: CSS внутри документа
Когда удобно писать CSS прямо в HTML и как перенести стили в отдельный файл.
Зачем нужен этот элемент
style содержит таблицу CSS внутри HTML-документа. Этот способ удобен для небольшого учебного примера или специальных стилей конкретной страницы. Внутри пишутся обычные селекторы и объявления, а не HTML-разметка.
Для многостраничного сайта общие стили обычно выносят в отдельный файл. Так их проще поддерживать и повторно использовать из браузерного кеша. Положение style в документе не ограничивает действие CSS только соседним блоком: обычные правила участвуют в общем каскаде.
Синтаксис и пример
<style>
.note { color: #11694e; background: #eaf4ee; padding: 16px; }
</style>
<p class="note">CSS меняет оформление, не переписывая содержание.</p>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| Размещение | Как правило, внутри head. |
| Селектор | Определяет элементы, к которым применяется правило. |
| Каскад | Правила взаимодействуют с другими таблицами стилей. |
Частая ошибка
Не рассчитывайте, что style внутри карточки изолирует правила от остальной страницы. Для ограничения области используйте классы и подходящую структуру селекторов.
Небольшая практика
Поменяйте цвет .note, затем добавьте ещё один абзац с тем же классом. Оба должны получить одинаковое оформление.
Разберите также <link>, <div>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.