Quando un browser legge un foglio di stile, sarà formato il documento HTML secondo le informazioni nel foglio di stile.
Tre modi per inserire i CSS
Ci sono tre modi di inserimento di un foglio di stile:
Foglio di stile esterno
Con un foglio di stile esterno, è possibile modificare l'aspetto di un intero sito modificando un solo file!
Ogni pagina deve includere un riferimento al file foglio di stile esterno all'interno della <link> elemento. Il <link> elemento va all'interno del <head> sezione:
Un foglio di stile esterno può essere scritto in qualsiasi editor di testo. Il file non deve contenere alcun tag HTML. Il file di foglio di stile deve essere salvato con un .css estensione.
Ecco come il "myStyle.css" appare:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | Non aggiungere uno spazio tra il valore della proprietà e l'unità (come margin-left:20 px; ). Il modo corretto è: margin-left:20px; |
|---|
Foglio di stile interno
Un foglio di stile interno può essere utilizzato se una singola pagina ha uno stile unico.
Stili interni sono definiti all'interno del <style> elemento, all'interno del <head> sezione di una pagina HTML:
Esempio
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> Prova tu stesso " stili inline
Uno stile in linea può essere utilizzato per applicare uno stile unico per un singolo elemento.
Per utilizzare gli stili inline, aggiungere l'attributo di stile all'elemento in questione. L'attributo style può contenere qualsiasi proprietà CSS.
L'esempio seguente mostra come cambiare il colore e il margine sinistro di un <h1> elemento:
| Uno stile in linea perde molti dei vantaggi di un foglio di stile (per contenuto con la presentazione di miscelazione). Utilizzare questo metodo con parsimonia! |
|---|
Più fogli di stile
Se sono state definite alcune proprietà per lo stesso selettore (elemento) in diversi fogli di stile, verrà utilizzato il valore dall'ultimo foglio di stile di lettura.
Esempio
Si supponga che un foglio di stile esterno ha lo stile che segue per il <h1> elemento:
h1
{
color: navy;
}quindi, supporre che un foglio di stile interno ha anche lo stile successivo dello <h1> Elemento:
h1
{
color: orange;
}Se lo stile interno è definito dopo il collegamento al foglio di stile esterno, i <h1> elementi saranno "orange" :
Esempio
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Prova tu stesso " Tuttavia, se lo stile interno è definito prima che il collegamento al foglio di stile esterno, i <h1> elementi saranno "navy" :
Esempio
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Prova tu stesso " Cascading Order
Che stile verrà utilizzato quando vi è più di uno stile specificato per un elemento HTML?
In generale si può dire che tutti gli stili si "a cascata" in un nuovo foglio di stile "virtuale" con le seguenti regole, in cui il numero uno ha la massima priorità:
- stile in linea (all'interno di un elemento HTML)
- fogli di stile esterni e interni (nella sezione head)
- Browser di default
Così, uno stile in linea (all'interno di un elemento HTML specifica) ha la massima priorità, il che significa che avrà la precedenza uno stile definito all'interno del <head> tag, o in un foglio di stile esterno, o un valore browser predefinito.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»