I CSS sono una risorsa inesauribile, ti danno la possibilità di creare effetti e stili che non pensavi possibili.
Dopo aver analizzato gli stili esterni e gli stili interni, dedichiamoci all’importazione dei CSS.
CSS con @import
Un’altra possibilità che ti viene data è l’importazione degli stili CSS, è molto semplice.
Hai a disposizione due metodi, il primo consiste nell’inserire all’interno dei tag l’istruzione @import seguita dal percorso del file che intendi importare, in questo modo:
<head>
<title>Monte Pellegrino</title>
<link rel="stylesheet" href="css/style.css">
<style>
@import "css/stile-importato.css";
</style>
</head>
Il browser recepirà l’informazione e costruirà la pagina in base alle regole CSS contenute.
Il secondo metodo, sicuramente più efficiente in termini di ordine, consiste nell’aggiungere, ad inizio file (questo è fondamentale) l’istruzione @import, in questo modo:
Elimina i tag <style> dalla pagina index.html e taglia la dichiarazione @import “css/stile-importato.css”;
Incolla la dichiarazione all’inizio del file style.css (è fondamentale che la dichiarazione preceda tutte le regole CSS già scritte).
Il file style.css dovrebbe risultare così:
@import "stile-importato.css";
body {
text-align: center;
}
h1 {
font-size: 72px;
color: white;
}
header {
background-color: green;
}
p {
font-size: 20px;
}
L’aspetto della pagina index.html, dopo aver salvato e ricaricato, dovrebbe essere uguale alla precedente, se così non fosse, verifica di aver scritto il giusto percorso del file, sono piccole cose ma facilissime da sbagliare 😉
N.B.: All’interno della cartella del tutorial(che puoi scaricare qui) troverai un nuovo file, all’interno ci sono le regole CSS che ho aggiunto al file “stile-importato.css“.
In questo caso, dobbiamo ricordare di modificare il percorso del file CSS, in quanto ci troviamo già all’interno di style.css.
Il percorso corretto, quindi, non avrà il nome della cartella(nel nostro caso css).
Esaminati i diversi metodi di scrittura dei CSS, ti sarà chiaro che gli external stylesheets sono la maniera migliore di utilizzarli.
Gli altri metodi sono efficaci allo stesso modo tranne che per i tempi di caricamento delle pagine, ricorda che ogni file inserito all’interno delle pagine è uguale ad una richiesta in più al server.
Nelle prossime lezioni cominceremo ad esaminare i diversi selettori CSS fondamentali, ci sarà da divertirsi 😉
Carino questo corso, come mai hai smesso? 🙂
Ciao, capisco che è passato “qualche giorno” da quando mi hai scritto ma la vita ha degli stop, ogni tanto.
Tra un po’ ricomincerò a scrivere con una certa costanza 😉