Ejemplo
El uso de la <style> elemento en un documento HTML:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
Inténtalo tú mismo " Definición y Uso
La <style> etiqueta se utiliza para definir la información de estilo para un documento HTML.
Dentro de la <style> elemento que especifica cómo los elementos HTML deben representar en un explorador.
Cada documento HTML puede contener múltiples <style> etiquetas.
Soporte para el navegador
Elemento | |||||
---|---|---|---|---|---|
<style> | Sí | Sí | Sí | Sí | Sí |
Notas y sugerencias
Consejo: Para enlazar a una hoja de estilos externa, utilice el <link> etiqueta.
Consejo: Para obtener más información sobre las hojas de estilo, por favor lea nuestra Tutorial CSS .
Nota: Si el "scoped" atributo no se utiliza, cada <style> etiqueta debe estar ubicada en la sección de cabeza.
Diferencias entre HTML 4.01 y HTML5
El "scoped" atributo es nuevo en HTML5, que permite definir los estilos de una sección específica del documento. Si el "scoped" atributo está presente, los estilos sólo se aplican al elemento padre del elemento de estilo y elementos secundarios de ese elemento.
atributos
= Nuevo en HTML5.
Atributo | Valor | Descripción |
---|---|---|
media | media_query | Especifica qué dispositivo / medio del recurso de los medios está optimizado para |
scoped | scoped | Especifica que los estilos se aplican solamente a elemento primario de este elemento y elementos secundarios de ese elemento |
type | text/css | Especifica el tipo de soporte de la <style> etiqueta |
Los atributos globales
La <style> etiqueta también es compatible con el de los atributos globales en HTML .
Atributos de eventos
La <style> etiqueta también es compatible con la atributos de eventos en HTML .
Páginas relacionadas
Tutorial de HTML: HTML CSS
CSS tutorial: Tutorial CSS
Referencia HTML DOM: Style de objetos
Ajustes por defecto CSS
La mayoría de los navegadores mostrarán el <style> elemento con los siguientes valores predeterminados:
style {
display: none;
}