Tag HTML <style>

Definizione e uso

<style> l'etichetta viene utilizzata per definire le informazioni di stile del documento (CSS).

In <style> Nell'elemento, è possibile specificare come l'elemento HTML viene visualizzato nel browser.

Si prega di notare che l'elemento style definisce gli stili CSS incorporati nel documento HTML, mentre l'elemento link viene utilizzato per importare stili da uno stylesheet esterno.

L'elemento style può apparire in diverse parti del documento HTML. Un documento può contenere più elementi style, quindi non è necessario inserire tutte le definizioni di stile nella sezione head. Questa caratteristica è molto utile in presenza di motori di generazione di pagine, poiché permette di aggiungere stili specifici per la pagina che supplementano quelli definiti dal template.

Vedi anche:

Corso HTML:HTML CSS

Corso CSS:Corso CSS

Manuale HTML DOM:Oggetto Style

Esempio

Esempio 1

Usa <style> L'elemento applica uno stylesheet semplice al documento HTML:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Questo è un titolo</h1>
<p>Questo è un paragrafo.</p>
</body>
</html>

Prova personalmente

Esempio 2

Stili multipli per lo stesso elemento:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Questo è un titolo</h1>
<p>Questo è un paragrafo.</p>
</body>
</html>

Prova personalmente

Suggerimenti e commenti

Attenzione:Quando il browser legge lo stylesheet, formatta il documento HTML in base alle informazioni nel stylesheet. Se per lo stesso selettore (elemento) sono definiti alcuni attributi in diversi stylesheet, verranno utilizzati i valori dell'ultimo stylesheet letto (vedi l'esempio sopra)!

Suggerimento:Per collegare una tabella di stile esterna, utilizzare <link> tag.

Suggerimento:Per ulteriori informazioni sulle tabelle di stile, leggi la nostra Corso CSS.

Proprietà

Proprietà Valore Descrizione
media Query di media Definisce il media utilizzato per lo stile.
type text/css Definisce il tipo di media del tag <style>.

Proprietà globali

<style> Il tag supporta anche Proprietà globali in HTML.

Proprietà degli eventi

<style> Il tag supporta anche Proprietà degli eventi in HTML.

Impostazioni CSS predefinite

La maggior parte dei browser visualizzerà i valori predefiniti seguenti: <style> Elemento:

style {
  display: none;
}

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto