I tre modi per definire un foglio di stile CSS (parte 1)

Logo CSS Reset
Guida per definire un Foglio di Stile (CSS)

I tre modi per definire un foglio di stile CSS (parte 1). Volete sapere come fare e avere qualche suggerimento in più? Continuate a leggere questa guida…

Questo è un tutorial di base per coloro che vogliono imparare di più sui CSS. Questo tutorial è composto in tre parti nelle quali vi spiegherò i tre modi per includere nelle vostre pagine web un foglio di stile CSS. Vi mostreò la differenza tra CSS inline (in linea), embedded (incluso) e external (esterno).

Quando crei la tua pagina web, devi tenere in mente il modo in cui la fai. Usando l’XHTML puoi decidere il layout della pagina, e usando i CSS puoi controllare il disegno di quest’ultima. Quando creerai il tuo sito inizierai con una pagina, ma poi quasi sicuramente ne avrai molte. Una delle regole migliori (che io sottolineo) è quella di usare un foglio di stile CSS globale, il quale poi poter richiamare in tutte le vostre pagine.
Ed è questa la definizione di foglio di stile CSS esterno. Se poi hai una pagina con delle eccezioni rispetto al CSS globale, puoi creare un altro foglio di stile oppure scrivere direttamente all’interno del file una nuova definizione. E, come ultima cosa, se c’è una eccezione, ad esempio in solo un tag, probabilmente vi consiglierei di scrivere una definizione in linea (inline).

Adesso, non lasciate che il testo sopra vi confonda. Proverò a semplificarlo con un piccolo esempio seguito da una spiegazione.

External CSS Stylesheet (Foglio di stile CSS esterno)

Diciamo che sapete in anticipo che tutte le immagini nella vostra pagina non dovranno avere un bordo. Potreste scrivere ciò in ogni pagina (includendo il CSS), ma cosa fareste se doveste cambiare idea in un secondo momento? Dovreste riprendere tutte le pagine e modificarle, una ad una. Invece di far così, usate un file separato, e linkatelo nella vostra pagina web.

Adesso, se cambiate il contenuto del foglio di stile CSS, tutte le pagine che lo caricheranno mostreranno la modifica da voi apportata. Ciò non migliora solo la velocità delle vostre pagine (in cache), ciò migliora anche la velocità di realizzazione del vostro lavoro. E inoltre da alle vostre pagine un aspetto migliore e più pulito. Un altro esempio può essere che vogliate avere in tutte le pagine il font ‘Arial’, e dopo magari voler provare anche con font del tipo ‘Helvetica’ o ‘Verdana’. Una semplice modifica ad un file vi permetterà di aggiornare tutte le pagine in un colpo solo.

Come dovrebbe essere il mio foglio di stile CSS globale?

Come prima cosa, potete nominarlo come volete. Basta solo che finisca con l’estensione .css. Vi consiglio di usare un nome non molto lungo, semplice, e ovvio. Ad esempio, potete chiamarlo global.css o master.css.

Il contenuto del file non dovrebbe iniziare con la definizione di singoli tag, invece sarebbe opportuno che iniziasse difinendo le classi. Ad esempio, il mio master.css potrebbe essere come questo:

Come linko questo foglio di stile CSS master.css nelle mie pagine web?

Dopo che hai dato un nome al foglio di stile CSS esterno, lo puoi linkare nelle tue pagine web. Il tag del link deve essere tra i tag <head>. Nell’esempio qui sotto ho evidenziato il tag di nostro interesse, che si trova tra i due tag <head>.

Quello è il collegamentop al vostro foglio di stile esterno. E questo è uno dei tre metodi per includere un foglio di stile CSS nelle vostre pagine web.

Al più presto continuerò con la seconda parte: embedded stylesheet (foglio di stile incluso).

Articolo tradotto e riadattato da Klayz. Si ringrazia Floris per i permessi di traduzione dell’articolo sopra esposto.
Thread (blog) originale (lingua inglese): Three Ways to Define CSS Styles (Part 1) (offline)
Copyright (c) Floris Fiedeldij Dop – http://www.vBulletin-Fans.com/ (offline)

 
0 Kudos
Non ti
muovere!

Condividi il Post