CSS - Inclusione

Esistono quattro modi per associare gli stili al documento HTML. I metodi più comunemente usati sono CSS in linea e CSS esterni.

CSS incorporato: l'elemento <style>

Puoi inserire le tue regole CSS in un documento HTML utilizzando l'elemento <style>. Questo tag viene inserito all'interno dei tag <head> ... </head>. Le regole definite utilizzando questa sintassi verranno applicate a tutti gli elementi disponibili nel documento. Ecco la sintassi generica:

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

Produrrà il seguente risultato:

Attributi

Gli attributi associati agli elementi <style> sono:

Attributo	Valore	Descrizione
genere	text / css	Specifica il linguaggio per fogli di stile come tipo di contenuto (tipo MIME). Questo è un attributo obbligatorio.
media	schermo tty tv proiezione palmare Stampa braille uditivo tutti	Specifica il dispositivo su cui verrà visualizzato il documento. Il valore predefinito è tutto . Questo è un attributo opzionale.

CSS in linea: l' attributo di stile

È possibile utilizzare l' attributo di stile di qualsiasi elemento HTML per definire le regole di stile. Queste regole verranno applicate solo a quell'elemento. Ecco la sintassi generica:

<element style = "...style rules....">

Attributi

Attributo	Valore	Descrizione
stile	regole di stile	Il valore dell'attributo style è una combinazione di dichiarazioni di stile separate da punto e virgola (;).

Esempio

Di seguito è riportato l'esempio di CSS in linea basato sulla sintassi precedente:

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

Produrrà il seguente risultato:

CSS esterno: l'elemento <link>

L'elemento <link> può essere utilizzato per includere un file di foglio di stile esterno nel tuo documento HTML.

Un foglio di stile esterno è un file di testo separato con estensione .cssestensione. Definisci tutte le regole di stile all'interno di questo file di testo e quindi puoi includere questo file in qualsiasi documento HTML utilizzando l'elemento <link>.

Ecco la sintassi generica per includere file CSS esterni:

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

Attributi

Gli attributi associati agli elementi <style> sono:

Attributo	Valore	Descrizione
genere	testo css	Specifica il linguaggio per fogli di stile come tipo di contenuto (tipo MIME). Questo attributo è obbligatorio.
href	URL	Specifica il file del foglio di stile con regole di stile. Questo attributo è obbligatorio.
media	schermo tty tv proiezione palmare Stampa braille uditivo tutti	Specifica il dispositivo su cui verrà visualizzato il documento. Il valore predefinito è tutto . Questo è un attributo opzionale.

Esempio

Considera un semplice file di foglio di stile con un nome mystyle.css avente le seguenti regole:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Ora puoi includere questo file mystyle.css in qualsiasi documento HTML come segue:

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

CSS importato - Regola @import

@import viene utilizzato per importare un foglio di stile esterno in un modo simile all'elemento <link>. Ecco la sintassi generica della regola @import.

<head>
   @import "URL";
</head>

Qui URL è l'URL del file del foglio di stile con regole di stile. Puoi usare anche un'altra sintassi:

<head>
   @import url("URL");
</head>

Esempio

Di seguito è riportato l'esempio che mostra come importare un file di foglio di stile in un documento HTML:

<head>
   @import "mystyle.css";
</head>

Sovrascrittura delle regole CSS

Abbiamo discusso quattro modi per includere le regole del foglio di stile in un documento HTML. Ecco la regola per sovrascrivere qualsiasi regola del foglio di stile.

Qualsiasi foglio di stile in linea ha la massima priorità. Quindi, sovrascriverà qualsiasi regola definita nei tag <style> ... </style> o le regole definite in qualsiasi file di foglio di stile esterno.
Qualsiasi regola definita nei tag <style> ... </style> sovrascriverà le regole definite in qualsiasi file di foglio di stile esterno.
Qualsiasi regola definita nel file del foglio di stile esterno ha la priorità più bassa e le regole definite in questo file verranno applicate solo quando le due regole precedenti non sono applicabili.

Gestione dei vecchi browser

Ci sono ancora molti vecchi browser che non supportano i CSS. Quindi, dovremmo fare attenzione mentre scriviamo il nostro CSS incorporato in un documento HTML. Il seguente frammento mostra come utilizzare i tag di commento per nascondere i CSS dai browser meno recenti:

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

Commenti CSS

Molte volte, potrebbe essere necessario inserire commenti aggiuntivi nei blocchi del foglio di stile. Quindi, è molto facile commentare qualsiasi parte nel foglio di stile. Puoi semplicemente inserire i tuoi commenti dentro /*..... questo è un commento nel foglio di stile ..... * /.

È possibile utilizzare / * .... * / per commentare i blocchi multilinea in modo simile ai linguaggi di programmazione C e C ++.

Esempio

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

Produrrà il seguente risultato: