Etiqueta <style> de HTML

Definición y uso

<style> se utiliza para definir la información de estilo del documento (CSS).

en <style> en el elemento, puede especificar la forma en que el elemento HTML se presenta en el navegador.

Tenga en cuenta que el elemento style define estilos CSS incrustados en el documento HTML, mientras que el elemento link se utiliza para importar estilos de hojas de estilo externas.

El elemento style puede aparecer en cualquier parte del documento HTML. Un documento puede contener múltiples elementos style, por lo que no es necesario que todas las definiciones de estilo se inserten en la sección head. Esta característica es muy útil en el caso de generadores de plantillas, ya que permite proporcionar complementos a los estilos definidos por la plantilla con estilos específicos de la página.

Véase también:

Tutoriales de HTML:HTML CSS

Tutoriales de CSS:Tutoriales CSS

Manual de referencia del DOM HTML:Objeto Style

Ejemplo

Ejemplo 1

Usar <style> El elemento aplica una hoja de estilo simple al documento HTML:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Este es el título</h1>
<p>Este es un párrafo.</p>
</body>
</html>

Prueba por ti mismo

Ejemplo 2

Múltiples estilos para elementos idénticos:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Este es el título</h1>
<p>Este es un párrafo.</p>
</body>
</html>

Prueba por ti mismo

Sugerencias y comentarios

Nota:Cuando el navegador lee la hoja de estilo, formatea el documento HTML según la información de la hoja de estilo. Si se definen algunas propiedades para el mismo selector (elemento) en diferentes hojas de estilo, se utilizarán los valores de la última hoja de estilo leída (véase el ejemplo anterior)!

Consejo:Para enlazar a una hoja de estilo externa, utilice <link> etiqueta.

Consejo:Para obtener más información sobre las hojas de estilo, lea nuestra Tutoriales CSS.

Atributo

Atributo Valor Descripción
media Consulta de medios Define el medio utilizado por el estilo.
type text/css Define el tipo de medio del etiqueta <style>.

Atributos globales

<style> La etiqueta también admite Atributos globales en HTML.

Atributos de evento

<style> La etiqueta también admite Atributos de evento en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán valores predeterminados como siguientes: <style> Elemento:

style {
  display: none;
}

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte