1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
---
title: <style>
slug: Web/HTML/Елемент/style
tags:
- Інкапсуляція стилів
- Елемент
- Метадані
- Стилі
translation_of: Web/HTML/Element/style
---
<p id="Summary">{{HTMLRef}}</p>
<p>HTML-елемент<strong> <code><style></code> </strong>містить стилі для документа чи його частини. За відсутності атрибута {{htmlattrdef("type")}}, мовою інструкцій всередині цього елемента вважається <a href="/en-US/docs/Web/CSS">CSS</a>.</p>
<table class="properties">
<tbody>
<tr>
<th><a href="/uk/docs/Web/Guide/HTML/Content_categories">Категорії вмісту</a></th>
<td><a href="/uk/docs/Web/Guide/HTML/Content_categories#Вміст_метаданих">Метадані</a> та, в разі наявності атрибута <code>scoped,</code><a href="/uk/docs/Web/Guide/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="/uk/docs/Web/Guide/HTML/Content_categories#Вміст_метаданих">метадані</a>.</td>
</tr>
<tr>
<th scope="row">Дозволені ARIA-ролі</th>
<td>ВІдсутні</td>
</tr>
<tr>
<th>Інтерфейс DOM</th>
<td>{{domxref("HTMLStyleElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Атрибути">Атрибути</h2>
<p>Цей елемент має <a href="/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a>.</p>
<dl>
<dt>{{htmlattrdef("type")}}</dt>
<dd>Цей атрибут вказує MIME-тип (без частини, що вказує кодування символів), який відповідає задіяній мові стилів. Він є необов'язковим та за умовчанням має значення <code>text/css</code>.</dd>
<dt>{{htmlattrdef("media")}}</dt>
<dd>Цей атрибут вказує <a href="/en-US/docs/Web/Guide/CSS/Media_queries">медіазапит</a> для обмеження застосування стилів. Стилі застосовуються без обмежень (те саме, що і значення <code>all)</code>, якщо атрибут відсутній.</dd>
<dt>{{htmlattrdef("title")}}</dt>
<dd>Позначає назву <a href="/uk/docs/Web/CSS/Альтернативні_таблиці_стилів">альтернативної множини стилів</a>.</dd>
<dt>{{htmlattrdef("scoped")}} {{experimental_inline}}</dt>
<dd>Якщо цей атрибут присутній, таблиця стилів застосовуються лише до нащадків батьківського (для <strong><code><style></code></strong>) елемента.</dd>
</dl>
<h2 id="Приклади">Приклади</h2>
<h3 id="Найпростіша_таблиця_стилів">Найпростіша таблиця стилів</h3>
<pre class="brush:html"><style type="text/css">
body {
color: red;
}
</style>
</pre>
<h3 id="Застосування_атрибута_scoped">Застосування атрибута <code>scoped</code></h3>
<pre class="brush: html"><html>
<head>
<style type="text/css">
span {
color: red;
}
</style>
</head>
<body>
<div>
<style type="text/css" scoped>
span {
color: orange;
}
</style>
<span>Помаранчевий текст!</span>
</div>
<span>Червоний текст!</span>
</body>
</html></pre>
<h2 id="Специфікації">Специфікації</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Специфікація</th>
<th scope="col">Статус</th>
<th scope="col">Коментар</th>
</tr>
<tr>
<td>{{ SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td> </td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>Жодних змін відносно {{ SpecName('HTML4.01') }}.</td>
</tr>
<tr>
<td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td>
<td>{{ Spec2('HTML4.01') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Базова підтримка</td>
<td>{{CompatChrome(1.0)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(1.0)}}</td>
<td>3.0</td>
<td>3.5</td>
<td>1.0</td>
</tr>
<tr>
<td>Атрибут scoped</td>
<td>20<sup>[1]</sup></td>
<td>{{CompatUnknown}}</td>
<td>21</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базова підтримка</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile(1.0)}}</td>
<td>9.0<sup>[2]</sup></td>
<td>6.0</td>
<td>1.0</td>
</tr>
<tr>
<td>Атрибут scoped</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>50</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Підтримується версіями Chrome з 20 по 34 включно за наявності встановленого прапорця «<strong>Enable <style scoped></strong>» чи «<strong>Experimental WebKit features</strong>» у chrome://flags.<br>
[2] Mobile Internet Explorer (попередня назва IE Phone — версій менших за 8) також підтримує.</p>
<h2 id="Див._також">Див. також</h2>
<ul>
<li>Елемент {{HTMLElement("link")}} дозволяє використовувати зовнішні таблиці стилів.</li>
</ul>
|
