Skip to content

Commit

Permalink
[ru]: update Web/HTML/Element/style translation (#24406)
Browse files Browse the repository at this point in the history 
* [ru]: <style> - tag docs sync

* Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Co-authored-by: Leonid Vinogradov <[email protected]>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Leonid Vinogradov <[email protected]>
  • Loading branch information
@sedlukha @github-actions @leon-win
3 people authored Nov 22, 2024
1 parent 81f02cf commit e0b12e1
Showing 1 changed file with 153 additions and 38 deletions.
191 changes: 153 additions & 38 deletions files/ru/web/html/element/style/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,185 @@
---
title: <style> - элемент для указания стилей
slug: Web/HTML/Element/style
l10n:
sourceCommit: 7cd4706990ab95794415aee05ba0a9662e742a17
---

{{HTMLSidebar}}

HTML-элемент **`<style>`** содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на [CSS](/ru/docs/Web/CSS).
[HTML](/ru/docs/Web/HTML)-элемент **`<style>`** содержит информацию о стилях документа или его части. Они будут применены к содержимому документа, включающего элемент `<style>`.

- _[Категории содержимого](/ru/docs/HTML/Content_categories)_[Metadata content](/ru/docs/Web/HTML/Content_categories#Metadata_content), and if the `scoped` attribute is present: [flow content](/ru/docs/Web/HTML/Content_categories#Flow_content).
- _Permitted content_ Style information matching the language of the `type` attribute.
- _Tag omission_ Нет, открывающий и закрывающий теги обязательны.
- _Допустимые родительские элементы_ ...
- _Интерфейс DOM_ {{domxref("HTMLStyleElement")}}
{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}

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

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

Аналогично элементам `<link>`, элементы `<style>` могут включать атрибут `media`, содержащий [медиа-запросы](/ru/docs/Web/CSS/CSS_media_queries), что позволяет избирательно применять внутренние таблицы стилей к документу в зависимости от таких медиа-условий, как ширина области просмотра.

## Атрибуты

This element includes the [global attributes](/ru/docs/Web/HTML/Global_attributes).
Этот элемент включает [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).

- `type`
- : Этот атрибут определяет язык стиля в виде MIME-типа (кодировка не указывается). Этот атрибут необязателен, и при отсутствии считается «`text/css`».
- `blocking`
- : Этот атрибут явно указывает, что некоторые действия должны быть заблокированы до получения необходимых ресурсов. Стили, импортированные с помощью [`@import`](/ru/docs/Web/CSS/@import), обычно считаются критическими ресурсами, в то время как [`background-image`](/ru/docs/Web/CSS/background-image) и шрифты — нет. Блокируемые действия указываются в виде списка ключевых слов, разделённого пробелами. Допустимые значения:
- `render`: Отображение контента на экране блокируется.
- `media`
- : К какому виду медиа должен применяться этот стиль. Значением этого атрибута является [медиавыражение](/ru/docs/Web/Guide/CSS/Media_queries), которое по умолчанию соответствует `all`.
- `scoped`
- : Если указан этот атрибут, то стиль применяется только внутри своего родительского элемента. Если не указан, то стиль применяется ко всему документу.
- : Этот атрибут определяет, к какому виду медиа должен применяться стиль. Значением этого атрибута является [медиавыражение](/ru/docs/Web/CSS/CSS_media_queries/Using_media_queries), которое по умолчанию соответствует `all`.
- `nonce`
- : Криптографический одноразовый номер, используемый для разрешения применения встроенных стилей с помощью [директивы style-src](/ru/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) политики Content-Security-Policy. Сервер должен генерировать это значение каждый раз, когда отправляет заголовок. Важно предоставлять такое значение, которое невозможно угадать, так как в противном случае обойти политику ресурса будет достаточно просто.
- `title`
- : Specifies alternative style sheet sets.
- `disabled`
- : If set, disables (does not apply) the style rules, specified within the element, to the {{domxref("document","Document")}}.
- : Этот атрибут задаёт [альтернативные наборы стилей](/ru/docs/Web/CSS/Alternative_style_sheets).

### Устаревшие атрибуты

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

## Примеры

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

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

```html
<style type="text/css">
body {
color: red;
}
</style>
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Тестовая сраница</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Это мой параграф.</p>
</body>
</html>
```

### Таблица стилей с ограниченной областью действия
#### Результат

{{EmbedLiveSample('A_simple_stylesheet', '100%', '100')}}

### Несколько элементов `style`

В этом примере мы добавили два элемента `<style>`, обратите внимание, как конфликтующие объявления стилей в последнем элементе `<style>` перекрывают те, что были в предыдущем, если у них одинаковая [специфичность](/ru/docs/Web/CSS/Specificity).

```html
<article>
<div>
Атрибут scoped позволяет включить элементы стиля в середине документа.
Внутренние правила применяются только внутри родительского элемента.
</div>
<p>
Этот текст должен быть чёрным. Если он красный, ваш браузер не поддерживает
атрибут scoped.
</p>
<section>
<style scoped>
<!doctype html>
<html lang=ru">
<head>
<meta charset="UTF-8" />
<title>Тестовая страница</title>
<style>
p {
color: red;
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<p>Этот должен быть красным.</p>
</section>
</article>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>Это мой параграф.</p>
</body>
</html>
```
#### Live sample
#### Результат
{{EmbedLiveSample('Multiple_style_elements', '100%', '100')}}
### Включение медиавыражения
В этом примере мы добавили медиавыражение с помощью атрибута `media` во втором элементе `<style>`, чтобы он применялся только при ширине области просмотра менее 500px.
```html
<!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>
```
{{ EmbedLiveSample('Таблица_стилей_с_ограниченной_областью_действия', '100%', '200') }}
#### Результат
{{EmbedLiveSample('Including_a_media_query', '100%', '100')}}
## Техническая сводка
<table class="properties">
<tbody>
<tr>
<th>
<a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a>
</th>
<td>
<a href="/ru/docs/Web/HTML/Content_categories#метаданные">Метаданные</a>.
</td>
</tr>
<tr>
<th>Допустимое содержимое</th>
<td>
Текстовое содержимое, соответствующее атрибуту <code>type</code>, то есть
<code>text/css</code>.
</td>
</tr>
<tr>
<th>Пропуск тегов</th>
<td>Ни один из тегов не может быть пропущен.</td>
</tr>
<tr>
<th>Допустимые родители</th>
<td>
Любой элемент, который принимает
<a href="/ru/docs/Web/HTML/Content_categories#метаданные">метаданные</a>.
</td>
</tr>
<tr>
<th scope="row">Неявная ARIA-роль</th>
<td>
<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a>
</td>
</tr>
<tr>
<th scope="row">Допустимые ARIA-роли</th>
<td>Атрибут <code>role</code> не допускается</td>
</tr>
<tr>
<th>DOM-интерфейс</th>
<td>{{domxref("HTMLStyleElement")}}</td>
</tr>
</tbody>
</table>
## Спецификации
Expand All @@ -78,3 +192,4 @@ This element includes the [global attributes](/ru/docs/Web/HTML/Global_attribute
## Смотрите также
- Элемент {{HTMLElement("link")}}, позволяющий использовать внешние таблицы стилей.
- [Альтернативные таблицы стилей](/ru/docs/Web/CSS/Alternative_style_sheets)

0 comments on commit e0b12e1

Please sign in to comment.