A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/ru/docs/Web/HTML/Reference/Elements/style below:

<style> - элемент для указания стилей - HTML

<style> - элемент для указания стилей

Baseline Widely available *

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

Интерактивный пример 
<style>
  p {
    color: #26b72b;
  }
  code {
    font-weight: bold;
  }
</style>

<p>
  This text will be green. Inline styles take precedence over CSS included
  externally.
</p>

<p style="color: blue">
  The <code>style</code> attribute can override it, though.
</p>

Элемент <style> должен быть включён внутрь <head> документа. В общем случае лучше размещать стили во внешних таблицах стилей и подключать их с помощью элементов <link>.

Если в документе существует несколько элементов <style> и <link>, они будут применяться к DOM в порядке их включения, поэтому убедитесь, что они добавлены в правильной последовательности, чтобы избежать неожиданных проблем с каскадированием стилей.

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

Атрибуты

Этот элемент включает глобальные атрибуты.

blocking

Этот атрибут явно указывает, что некоторые действия должны быть заблокированы до получения необходимых ресурсов. Стили, импортированные с помощью @import, обычно считаются критическими ресурсами, в то время как background-image и шрифты — нет. Блокируемые действия указываются в виде списка ключевых слов, разделённого пробелами. Допустимые значения:

media

Этот атрибут определяет, к какому виду медиа должен применяться стиль. Значением этого атрибута является медиавыражение, которое по умолчанию соответствует all.

nonce

Криптографический одноразовый номер, используемый для разрешения применения встроенных стилей с помощью директивы style-src политики Content-Security-Policy. Сервер должен генерировать это значение каждый раз, когда отправляет заголовок. Важно предоставлять такое значение, которое невозможно угадать, так как в противном случае обойти политику ресурса будет достаточно просто.

title

Этот атрибут задаёт альтернативные наборы стилей.

Устаревшие атрибуты
type Устарело

Этот атрибут не следует устанавливать, но если он указан, то допустимыми значениями являются только пустая строка или регистронезависимое значение text/css.

Примеры Простая таблица стилей

В следующем примере мы применяем очень простой стиль к документу:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Тестовая сраница</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Это мой параграф.</p>
  </body>
</html>
Результат Несколько элементов style

В этом примере мы добавили два элемента <style>, обратите внимание, как конфликтующие объявления стилей в последнем элементе <style> перекрывают те, что были в предыдущем, если у них одинаковая специфичность.

<!doctype html>
<html lang=ru">
  <head>
    <meta charset="UTF-8" />
    <title>Тестовая страница</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>Это мой параграф.</p>
  </body>
</html>
Результат Включение медиавыражения

В этом примере мы добавили медиавыражение с помощью атрибута media во втором элементе <style>, чтобы он применялся только при ширине области просмотра менее 500px.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Тестовая страница</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>Это мой параграф.</p>
  </body>
</html>
Результат Техническая сводка Спецификации Совместимость с браузерами Смотрите также

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4