Resumo
O elemento HTML <style> contém informações de estilo para um documento ou uma parte do documento. As informações de estilo específico estão contidas dentro deste elemento, geralmente no CSS.
- Content categoriesMetadata content, e se o atributo
scoped
é apresentado: flow content . - Conteúdo Permitido Style information matching the language of the
type
attribute. - Omissão de Tag None, both the starting and ending tag are mandatory.
- Permitted parent elementsQualquer elemento que aceite Metadata content.
- Interface DOM
HTMLStyleElement
Atributos
Este elemento inclui os atributos globais.
- type
-
Este atributo define a linguagem de estilo como um tipo MIME (charset não deve ser especificado). ' text/css' presume se este atributo estiver ausente.
- media
- Qual mídia deve aplicar-se a este estilo. Deve ser uma consulta de mídia, consulte http://dev.w3.org/csswg/css3-mediaqueries.
- scoped
- Se este atributo está presente, então o estilo aplica-se apenas ao seu elemento pai. Se está ausente, o estilo aplica-se ao documento inteiro.
- title
-
Especifica os conjuntos de folhas de estilo alternativa.
- disabled
-
Se definido, desativa (não se aplica) às regras de estilo para a
Document
que são especificadas no elemento.
Exemplos
Uma folha de estilo simples
<style type="text/css">
body {
color:red;
}
</style>
Uma folha de estilos com escopo
<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>
Amostra
Especificações
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'style' in that specification. |
Padrão em tempo real | No change from HTML5. |
HTML5 The definition of 'style' in that specification. |
Recomendação | Added the scoped attribute |
HTML 4.01 Specification The definition of 'style' in that specification. |
Recomendação |
Compatibilidade de Browsers
Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo,
pois ainda não convertemos os dados que ela contém.
Descubra como você pode ajudar!
Recurso | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Suporte básico | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
escopo | 20 [1] | 21.0 (21.0)[2] | Não suportado | Não suportado | Não suportado |
Recurso | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Suporte básico | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
escopo | ? | 25.0 (25.0)[2] | Não suportado | Não suportado | Não suportado |
[1] Suportado no Chrome +20 à 34 permitindo que o "Enable <style scoped>" ou "experimental WebKit features" bandeira em chrome://flags. Removido em Chrome 35+ devido à complexidade de código.
[2] Gecko 20 e implementar mais tarde: pseudo-classes de escopo, mas o layout de preferência.css. pseudo-escopo.habilitado deve ser definido como verdadeiro. Este é apenas o caso por padrão em todas versões de teste de Aurora e Nightly.
Veja também:
- O elemento
<link>
que permite usar folhas de estilo externas.