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: