Тег <style> - это мощный инструмент, позволяющий встраивать код стилей непосредственно внутрь HTML-документа. Фактически, он создает внутреннюю таблицу стилей. Поскольку содержимое этого тега предназначено исключительно для браузера и «невидимо» для конечного пользователя, его необходимо аккуратно размещать внутри блока <head>. Обычно тег <style> устанавливают сразу перед закрывающим тегом </head>. Если в вашем проекте также используется JavaScript, разумнее разместить его после таблиц стилей. Почему? Потому что скрипты часто опираются на стилизацию. Такой порядок гарантирует, что к моменту выполнения кода у него уже будет вся необходимая информация о внешнем виде элементов - и это избавляет от неожиданных «подводных камней»! Примечание: В одном HTML-документе может находиться сколько угодно элементов <style> - ограничений нет. Однако, если вы предпочитаете подключать внешний CSS-файл, используйте для этого тег <link>. Он устанавливает связь между текущей страницей и внешним ресурсом. Атрибуты - type:
- Этот атрибут сообщает браузеру, какой язык стилей используется внутри элемента. Если он присутствует, значением должен быть допустимый MIME-тип (например, определяющий стиль языка). По умолчанию, если атрибут
type пропущен, браузер ожидает "text/css". - media:
- Позволяет указать, для какого именно устройства оптимизирован данный CSS. Это полезно, если стили созданы специально под iPhone или принтер. Если атрибут не задан, система автоматически предполагает, что таблица стилей подходит для любых устройств.
- scoped:
- Важная деталь! Этот атрибут указывает, что стили должны применяться только к дереву элементов, корнем которого является родительский элемент тега
<style>, а не ко всему документу целиком. Без этого атрибута тег должен находиться в заголовке (<head>). Возможные варианты записи: <style scoped><style scoped="scoped"><style scoped=""> Кроме того, тег <style> также поддерживает глобальные атрибуты HTML. Пример <html><head> <style type="text/css"> h1 { color: red; } p { color: blue; } </style></head><body> <h1>Заголовок</h1> <p>Абзац.</p></body></html>
|