Indice

<style>: l'elemento "informazioni sullo stile"

L'elemento HTML <style> contiene informazioni sullo stile per un documento o parte di un documento. Contiene CSS, che viene applicato al contenuto del documento contenente l' elemento<style>.

L'elemento deve essere incluso all'interno dell'<head> del documento. In generale, è meglio inserire i tuoi stili in fogli di stile esterni e applicarli utilizzando gli elementi <link>.

Se includi più <style> e <link> nel tuo documento, verranno applicati al DOM nell'ordine in cui sono inclusi nel documento: assicurati di includerli nell'ordine corretto, per evitare problemi a cascata imprevisti.

Allo stesso modo degli elementi <link>, gli elementi <style> possono includere attributi media che contengono query multimediali, consentendoti di applicare selettivamente fogli di stile interni al documento in base alle funzionalità multimediali come la larghezza della finestra.

Attributi

media

Questo attributo definisce a quale supporto deve essere applicato lo stile. Il suo valore è una query multimediale , che per impostazione predefinita è all se l'attributo è mancante.

nonce

Un nonce crittografico (numero utilizzato una volta) utilizzato per consentire stili inline in un style-src Content-Security-Policy . Il server deve generare un valore nonce univoco ogni volta che trasmette una politica. È fondamentale fornire un nonce che non può essere indovinato poiché bypassare la politica di una risorsa è altrimenti banale.

title

Questo attributo specifica un set di fogli di stile alternativi .

Attributi deprecati

scoped

Questo attributo specifica che gli stili si applicano solo agli elementi dei suoi genitori e figli.

type

Questo attributo non deve essere fornito: in tal caso, gli unici valori consentiti sono la stringa vuota o una corrispondenza senza distinzione tra maiuscole e minuscole per text/css.

Esempi

Un semplice foglio di stile

Nell'esempio seguente, applichiamo un foglio di stile molto semplice a un documento:

<!DOCTYPE html>
<head>
  <style>
    p {
        color: red;
    }
  </style>
</head>
<body>
  <p>Questo è un paragrafo</p>
</body>
</html>

Più elementi di stile

In questo esempio abbiamo incluso due elementi <style>: nota come le dichiarazioni in conflitto nell'elemento <style> successivo sovrascrivono quelle in quello precedente, se hanno la stessa specificità .

<!DOCTYPE html>
<head>
  <style>
    p {
        color: red;
    }
  </style>
  <style>
    p {
        color: blue;
    }
  </style>
</head>
<body>
  <p>Questo è un paragrafo</p>
</body>
</html>

Comprendendo un media query

In questo esempio ci basiamo sul precedente, includendo un mediaattributo sul secondo elemento<style>, quindi viene applicato solo quando il viewport ha una larghezza inferiore a 500px.

<!DOCTYPE html>
<head>
  <style>
    p {
        color: red;
    }
  </style>
  <style media="all and (max-width: 500px)">
    p {
        color: blue;
    }
  </style>
</head>
<body>
  <p>Questo è un paragrafo</p>
</body>
</html>