L'element HTML <style> conté informació d'estil per a un document, o part d'un document. Per defecte, s'espera que les instruccions d'estil escrites a l'interior d'aquest element siguin CSS.
| Categories de contingut | Contingut metadata, i si l'atribut scoped és present: contingut dinàmic. |
|---|---|
| Contingut permès | El contingut del text que coincideixi amb l'atribut type, que és text/css. |
| Omissió de l'etiqueta | Tampoc es pot ometre l'etiqueta. |
| Elements pares permesos | Si l'atribut scoped no està present: s'espera que el contingut de metadades o un element <noscript> sigui un fill de l'element <head>.Si l'atribut scoped està present: s'espera contingut dinàmic, però abans de qualsevol altre contingut dinàmic, que no sigui un espai en blanc entre elements i elements <style>, i no com el fill d'un element, el model del qual es de contingut transparent. |
| Interfície DOM | HTMLStyleElement |
Atributs
Aquest element inclou els atributs globals.
type- Aquest atribut defineix el llenguatge d'estil com un tipus MIME (joc de caràcters no s'ha d'especificar). Aquest atribut és opcional i per defecte és
text/csssi no es troba. media- Aquest atribut defineix a quin mitjà s'ha d'aplicar l'estil. El seu valor és una consulta de mitjans, que per defecte és
allsi l'atribut no es trova. scoped- Si aquest atribut és present, llavors l'estil s'aplica només al seu element pare. Si no n'hi ha, l'estil s'aplica a tot el document.
title- Especifica conjunts de fulls d'estil alternatius.
Exemples
Un full d'estil senzill
<style type="text/css">
body {
color:red;
}
</style>
Un full d'estil amb scoped
En aquest exemple, l'atribut scoped s'utilitza per crear un estil que només s'aplica a un element <section> en la qual està contingut.
L'atribut scoped s'ha eliminat de l'especificació després de l'adopció només limitada i experimental per Chrome i Firefox. Heu ha d'evitar l'ús d'ell, ja que és gairebé segur que serà eliminat d'aquests navegadors aviat.
<article>
<div>The scoped attribute allows for you to include style elements mid-document.
Inside rules only apply to the parent element.</div>
<p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
<section>
<style scoped>
p { color: red; }
</style>
<p>This should be red.</p>
</section>
</article>
Mostra directa
Especificacions
| Especificació | Estat | Comentari |
|---|---|---|
| HTML Living Standard The definition of 'style' in that specification. |
Living Standard | Afegeix l'atribut scoped. |
| HTML5 The definition of 'style' in that specification. |
Recommendation | No canvia des de HTML 4.01 Specification. |
| HTML 4.01 Specification The definition of 'style' in that specification. |
Recommendation |
Navegadors compatibles
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Suport bàsic | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
scoped |
20[1] | 21.0 (21.0)[2] | No support | No support | No support |
| Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suport bàsic | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
scoped |
? | 25.0 (25.0)[2] | No support | No support | No support |
[1] Suportat en Chrome 20+ a 34 habilitant l'opció "Enable <style scoped>" o la marca "característiques experimentals WebKit" en chrome://flags. Eliminat en Chrome 35+, a causa de la complexitat del codi.
[2] Gecko 20 i posterior implementa la pseudo-classe :scope, però la preferència layout.css.scope-pseudo.enabled han de tenir el valor true. Aquest és només el cas per defecte en les versions de prova en Nightly i Aurora
Veure
- The
<link>element allowing to use external style sheets.