CSS Foglio di stile esterno

Esempio

Un foglio di stile CSS esterno può essere applicato a qualsiasi numero di documenti HTML posizionando un elemento <link> in ogni documento HTML.

L'attributo rel del rel <link> deve essere impostato su "stylesheet" e l'attributo href al percorso relativo o assoluto del foglio di stile. Sebbene l'utilizzo di percorsi URL relativi sia generalmente considerato una buona pratica, è possibile utilizzare anche percorsi assoluti. In HTML5 l'attributo type può essere omesso .

Si consiglia di posizionare il tag <link> tag <head> del file HTML in modo che gli stili vengano caricati prima degli elementi da loro stilizzati. In caso contrario, gli utenti vedranno un lampo di contenuti senza stile .

Esempio

ciao-world.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>I ♥ CSS</p>
    </body>
</html>

style.css

h1 {
    color: green;
    text-decoration: underline;
}
p {
    font-size: 25px;
    font-family: 'Trebuchet MS', sans-serif;
}

Assicurati di includere il percorso corretto per il tuo file CSS nell'href. Se il file CSS si trova nella stessa cartella del file HTML, non è richiesto alcun percorso (come nell'esempio precedente), ma se è salvato in una cartella, specificarlo come questo href="foldername/style.css" .

<link rel="stylesheet" type="text/css" href="foldername/style.css">

I fogli di stile esterni sono considerati il ​​modo migliore per gestire il tuo CSS. C'è una ragione molto semplice per questo: quando gestisci un sito di, ad esempio, 100 pagine, tutte controllate da un singolo foglio di stile e desideri cambiare i colori dei collegamenti da blu a verde, è molto più semplice apportare la modifica nel tuo file CSS e lascia che le modifiche "si sovrappongano" su tutte le 100 pagine piuttosto che andare in 100 pagine separate e fare la stessa modifica 100 volte. Anche in questo caso, se si desidera modificare completamente l'aspetto del proprio sito Web, è necessario aggiornare solo questo file.

È possibile caricare tutti i file CSS nella pagina HTML in base alle esigenze.

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">

Le regole CSS sono applicate con alcune regole di base e l'ordine non importa. Ad esempio, se hai un file main.css con del codice in esso:

p.green { color: #00FF00; }

Tutti i tuoi paragrafi con la classe 'verde' saranno scritti in verde chiaro, ma puoi sovrascriverli con un altro file .css semplicemente includendolo dopo main.css. Puoi avere override.css con il seguente codice seguire main.css, ad esempio:

p.green { color: #006600; }

Ora tutti i tuoi paragrafi con la classe "verde" saranno scritti in verde scuro anziché verde chiaro.

Si applicano altri principi, come la regola "! Importante", la specificità e l'ereditarietà.

Quando qualcuno visita per la prima volta il tuo sito Web, il suo browser scarica l'HTML della pagina corrente più il file CSS collegato. Quindi, quando navigano verso un'altra pagina, il loro browser deve solo scaricare l'HTML di quella pagina; il file CSS è memorizzato nella cache, quindi non è necessario scaricarlo nuovamente. Poiché i browser memorizzano nella cache il foglio di stile esterno, le tue pagine vengono caricate più velocemente.