I siti web sono una combinazione di stile e struttura, e sul web di oggi, è una buona pratica mantenere questi due aspetti di un sito separati gli uni dagli altri.
L'HTML è sempre stato ciò che fornisce un sito con la sua struttura. Nei primi giorni del Web, HTML conteneva anche informazioni di stile. Elementi come il i tag sono stati disseminati nel codice HTML, aggiungendo informazioni di aspetto generale e informazioni strutturali. Il movimento degli standard web ci ha spinto a cambiare questa pratica e invece a spingere tutte le informazioni di stile in CSS o Cascading Style Sheets. Facendo un ulteriore passo avanti, le raccomandazioni attuali sono che si utilizza quello che è noto come un "foglio di stile esterno" per le esigenze di stile del sito web.
Vantaggi e svantaggi dei fogli di stile esterni
Una delle cose migliori di Cascading Style Sheets è che puoi usarle per mantenere coerente l'intero sito. Il modo più semplice per farlo è collegare o importare un foglio di stile esterno. Se utilizzi lo stesso foglio di stile esterno per ogni pagina del tuo sito, puoi essere certo che tutte le pagine avranno lo stesso stile. Puoi anche rendere più semplice apportare modifiche per il futuro. Poiché ogni pagina utilizza lo stesso foglio di stile esterno, qualsiasi modifica a quel foglio avrà un impatto su ogni pagina del sito. Questo è molto meglio che dover cambiare ogni pagina singolarmente!
Vantaggi dei fogli di stile esterni
- È possibile controllare l'aspetto di più documenti contemporaneamente.
- Questo è particolarmente utile se lavori con un team di persone per creare il tuo sito web. Molte regole di stile possono essere difficili da ricordare, e mentre si potrebbe avere una guida di stile stampata, è inefficiente e noioso essere continuamente sfogliata per determinare se il testo di esempio deve essere scritto in caratteri Arial di 12 punti o corriere a 14 punti. Avendo tutto in un posto e dato che quel posto è anche dove si apportano modifiche, è possibile rendere la manutenzione molto più semplice.
- È possibile creare classi di stili che possono quindi essere utilizzati su molti diversi elementi HTML.
- Se utilizzi spesso un determinato stile dei caratteri per dare enfasi a varie cose sulla tua pagina, puoi usare un attributo di classe che hai impostato nel tuo foglio di stile per ottenere questo aspetto, invece di definire uno stile specifico per ogni istanza del tuo enfasi.
- Puoi facilmente raggruppare i tuoi stili per essere più efficienti.
- Tutti i metodi di raggruppamento disponibili per i CSS possono essere utilizzati in fogli di stile esterni e questo offre maggiore controllo e flessibilità sulle tue pagine.
Svantaggi dei fogli di stile esterni
- I fogli di stile esterni possono aumentare il tempo di download, soprattutto se sono estremamente grandi. Poiché il file CSS è un documento separato che deve essere caricato, inciderà sulle prestazioni per eseguire tale download.
- I fogli di stile esterni diventano grandi rapidamente poiché è difficile dire quando uno stile non è più in uso perché non viene eliminato quando la pagina viene rimossa. La corretta gestione dei file CSS è importante, specialmente se più persone lavorano sullo stesso file.
- Se hai solo un sito web a pagina singola, avere un file esterno per CSS potrebbe non essere necessario dal momento che hai solo quella pagina da modellare. Molti dei vantaggi del CSS esterno vengono persi quando si dispone di un solo sito di pagine.
Come creare un foglio di stile esterno
I fogli di stile esterni vengono creati con una sintassi simile ai fogli di stile a livello di documento. Tuttavia, tutto ciò che devi includere sono il selettore e la dichiarazione. Proprio come in un foglio di stile a livello di documento, la sintassi per una regola è:
selettore {proprietà: valore;}
Salva queste regole in un file di testo con estensione .css. Questo non è richiesto, ma è una buona abitudine entrare, in modo da poter immediatamente riconoscere i fogli di stile in un elenco di directory.
Una volta che hai un documento di stile, devi collegarlo alle tue pagine Web. Questo può essere fatto in due modi:
- Collegamento
- Per collegare un foglio di stile, usi il tag HTML. Questo ha gli attributi rel, genere, e href. L'attributo rel indica ciò che si sta collegando (in questo caso un foglio di stile), il tipo definisce il tipo MIME per il browser e href è il percorso del file .css.
- Importazione
- Si utilizzerà un foglio di stile importato all'interno di un foglio di stile a livello di documento in modo che sia possibile importare gli attributi di un foglio di stile esterno senza perdere quelli specifici del documento. Si chiama in modo simile a chiamare un foglio di stile collegato, solo che deve essere chiamato all'interno di una dichiarazione di stile a livello di documento. È possibile importare tutti i fogli di stile esterni necessari per la manutenzione del sito Web.
Articolo originale di Jennifer Krynin. Modificato da Jeremy Girard l'8/8/17
