Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Теги HTML

HTML тег <style>

Поддержка браузерами

Описание

HTML тег <style> используется для внедрения CSS кода непосредственно в HTML-документ, таким образом формируя внутреннюю таблицу стилей. Так как внутри тега содержится информация предназначенная только для браузеров, а не для пользователей, он должен быть расположен внутри тега <head>.

Тег <style> обычно размещают прямо перед закрывающим тегом </head>. Если на странице используется код JavaScript, его обычно добавляют после таблиц стилей. Часто программы JavaScript полагаются на CSS, поэтому, добавляя таблицы стилей первыми, вы гарантируете, что код JavaScript будет располагать всей необходимой для своего выполнения информацией.

Примечание: любой HTML-документ может содержать неограниченное количество элементов <style>, но если вы хотите подключить внешний файл с таблицей стилей, используйте для этого тег <link>, он создает связь между текущим документом и внешним ресурсом.

Атрибуты

type:
Для предоставления информации об используемом внутри элемента языке используется атрибут type. Если этот атрибут присутствует, его значение должно быть допустимым MIME-типом, который определяет стиль языка. Значением по умолчанию, при отсутствие атрибута type, является "text/css". Пример »
media:
Определяет, под какое устройство оптимизирован стиль CSS, он используется для указания, что стиль оптимизирован под определенное устройство (пример: iPhone, принтер). Если атрибут не указан, то по умолчанию подразумевается, что таблица стилей оптимизирована под любые устройства.
scoped:
Указывает, что стили будут применяться к дереву элементов, корнем которого является элемент, внутри которого находится элемент <style>, а не ко всему документу. При отсутствии данного атрибута элемент должен быть расположен в заголовочном разделе документа - внутри тега <head>. Возможные значения логического атрибута scoped:
<style scoped>
<style scoped="scoped">
<style scoped="">

Тег <style> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

style {
    display: none;
}

Пример

<html>
<head>
<style type="text/css">
h1 { color: red; }
p { color: blue; }
</style>
</head>

<body>
<h1>Заголовок</h1>
<p>Абзац.</p>
</body>
</html> 

Результат данного примера в окне браузера:

Пример использования тега <style>
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь