<style>
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 (en-US) |
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/css
si 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
all
si 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.