Fogli di stile avere molti vantaggi. Ti consentono di utilizzare lo stesso foglio di stile su tutto il tuo sito web. Ci sono due modi per farlo:
- collegamento con l'elemento LINK
- importazione con il comando @import
Vantaggi e svantaggi dei fogli di stile esterni
Una delle cose migliori di Fogli di stile è che puoi usarli per mantenere coerente il tuo 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 stili.
Alcuni dei vantaggi dell'utilizzo di fogli di stile esterni includono la possibilità di controllare l'aspetto di più documenti contemporaneamente. Ciò è 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, sebbene tu possa avere una guida di stile stampata, è noiosa da avere sfogliarlo costantemente per determinare se il testo di esempio deve essere scritto in carattere Arial da 12 punti o da 14 punti Corriere.
È possibile creare classi di stili che possono essere utilizzate su molti elementi HTML diversi. Se usi spesso uno speciale carattere Wingdings per dare enfasi a varie cose sulla tua pagina, puoi usare il Wingdings classe che hai impostato nel tuo foglio di stile per crearli piuttosto che definire uno stile specifico per ogni istanza del enfasi.
Puoi facilmente raggruppare i tuoi stili per essere più efficiente. Tutti i metodi di raggruppamento disponibili per i CSS possono essere utilizzati in fogli di stile esterni e questo ti fornisce maggiore controllo e flessibilità sulle tue pagine.
Detto questo, ci sono anche ottime ragioni per non usare fogli di stile esterni. Per uno, possono aumentare il tempo di download se ti colleghi a molti di essi.
Ogni volta che crei un nuovo file CSS e lo colleghi o lo importi nel documento, è necessario che il browser Web effettui un'altra chiamata al server Web per ottenere il file. E le chiamate al server rallentano i tempi di caricamento della pagina.
Se hai solo un piccolo numero di stili, possono aumentare la complessità della tua pagina. Poiché gli stili non sono visibili direttamente nell'HTML, chiunque guardi la pagina deve ottenere un altro documento (il file CSS) per capire cosa sta succedendo.
Come creare un foglio di stile esterno
I fogli di stile esterni vengono scritti allo stesso modo dei fogli di stile incorporati e in linea. Ma tutto ciò di cui hai bisogno per scrivere è lo stile selettore e il dichiarazione. Non hai bisogno di un elemento o di un attributo STYLE nel documento.
Come per tutti gli altri CSS, la sintassi per una regola è:
selettore { proprietà: valore; }
Queste regole vengono scritte in un file di testo con estensione.
.css. Ad esempio, potresti nominare il tuo foglio di stile.
stili.css.
Collegamento di documenti CSS
Per collegare un foglio di stile, usi l'elemento LINK. Questo ha gli attributi rel e href. L'attributo rel dice al browser cosa stai collegando (in questo caso un foglio di stile) e l'attributo href contiene il percorso del file CSS.
Esiste anche un tipo di attributo facoltativo che è possibile utilizzare per definire il tipo MIME del documento collegato. Questo non è richiesto in HTML5, ma dovrebbe essere utilizzato nei documenti HTML 4.
Ecco il codice che useresti per collegare un foglio di stile CSS chiamato styles.css:
E in un documento HTML 4 dovresti scrivere:
tipo="testo/css">
Importazione di fogli di stile CSS
I fogli di stile importati vengono posizionati all'interno dell'elemento STYLE. Puoi quindi utilizzare anche gli stili incorporati, se lo desideri. Puoi anche includere stili importati all'interno di fogli di stile collegati. All'interno del documento STYLE o CSS, scrivi:
@import url(' http://www.yoursite.com/styles.css');