Associare i css alla pagina xhtml – Css Zoom

Andrea Leti — Mon, 13 Sep 2010 23:05:10 +0000

Continuando l’appuntamento con la rubrica Css Zoom vediamo oggi come associare un foglio di stile alla pagina xhtml.

I fogli di stile possono essere:

incorporato nella pagina
esteno
importati all’interno di un foglio di stile.

Vediamoli singolarmente nel dettaglio.

Fogli di stile incorporati

E’ possibile incorporare lo stile css della pagina scrivendolo nel codice html grazie al tag di apertura . Quest’ultimo deve essere inserito fra il tag e . Vediamo subito un esempio:

Come potete vedere abbiamo inserito il codice all’interno di e . Le stringhe di apertura
/* e di chiusura /*]]>*/ vengono utilizzate nei documenti XHTML per far si che rispettino le regole dell’XML evitando cosi problemi con la sintassi dei css.

I fogli di style incorporati, come facilmente deducibile, avranno effetto solo nel documento in cui sono stato scritti. L’utilizzo di fogli di stile incorporati è indicato in quei casi in cui per una determinata pagina abbiamo bisogno di un determinato effetto.

Fogli di stile esterni

I fogli di stile esterni non sono altro che dei veri file esterni alla pagine con estensione .css che regolano, dall’esterno, l’aspetto della pagina a cui è stato associato.

Un esempio veloce di foglio di stile associato lo trovato nel codice sorgente di questo blog. Durante la realizzazione, infatti, ho utilizzato un foglio di stile esterno che regola l’intero design del sito. Vediamo direttamente l’esempio di questo blog:

Utilizzando il tag che non prevede tag di chiusura ho associato il foglio si style con l’attributo href proprio come si fà per i link testuali. Utilizzando questo metodo si possono associare molti fogli di style.

Ricordo inoltre che chiamandosi Cascading Style Sheet ovvero fogli di stile a cascata abbiate cura di scrivere le vostre associazioni uno sotto l’altra in base alla priorità delle regole inserite. Interpretando dall’alto verso il basso il codice sorgente della pagina, il browser tenderà a sovrascrivere le regole css precedenti con le ultime.

Fogli di stile importati

I fogli di stile importati sono sempre dei singoli file con estensione .css come avveniva per quelli esterno ma che possono essere inclusi all’interno di un foglio di stile incorporato alla pagina oppure ad un foglio di stile esterno.

Vediamo come importare fogli di stile prima nello stile incorporato alla pagina e successivamente nel foglio di stile esterno.

Ecco come importare un foglio di stile nel foglio di stile incorporato alla pagina:

Vediamo adesso come fare all’interno di un foglio di style esterno:

@import "file_importato.css";

Se sono presenti, le regole @import devono essere inserite sempre prima delle normali regole css. Ovviamente in questo esempio il file importato è nella stessa posizione del file xhtml. Potete inserire il file importato in una qualsiasi cartella e cambiare il percorso all’interno dei doppi apici.

Il box model css – Css Zoom

Andrea Leti — Tue, 07 Sep 2010 23:13:16 +0000

Il Box Model credo sia il concetto più importante da comprendere per l’utilizzo dei css poichè determinano l’aspetto dei box (elementi di tipo blocco).
Ogni box, infatti, è caratterizzato da:

Larghezza dei contenuti (width)
Altezza dei contenuti (height)
Spazio fra i contenuti e i bordi o spaziatura interna (padding)
Bordo del box (border) – Ogni bordo si incontra a 45° con quello adiacente.
Spazio fra il bordo e gli altri oggetti della pagina (margin)

Vediamo graficamente come raffigurare questo elenco.

E’ facile notare da questa figura come sia l’altezza che la larghezza totale del box, sono la somma della larghezza dei contenuti (width), della spaziatura interna (padding) e dello spessore dei bordi (border).

Questo box model viene utilizzato ed interpretato molto bene da moltissimi browser. Indovinate quale browser deve dare fastidio? Si proprio lui…il solito Internet Explorer (dipende dalle versioni).

Anche se fra un pò uscirà la versione 9 di Internet Explorer, mio malgrado, ma anche di tutti i colleghi webdesigner, ho contatato che sono ancora troppi gli utenti che utilizzano Internet Explorer 6 nonostante ci siano Internet Explorer 7 e 8 già da un pò in giro. Cosi andiamo a conoscere qualcosa in più del box model di Internet Explorer per Windows.

Il box Model di IE per Windows

Il problema principale del box model di Internet Explorer per Windows sta nel fatto che la proprietà width anzichè determinare la larghezza dei contenuti viene interpretato come larghezza totale del box.
Cosi facendo per sapere quanto è la larghezza dei contenuti dobbiamo sottrarre a questo valore la larghezza del bordo e del padding. Stessa cosa per l’altezza.

Bisogna cosi prestare attenzione a questo problema per scrivere del codice css di fix, attraverso i commenti condizionali, che si adatti a qualsiasi programma utente. Questo problema non si verifica sulle versioni 6 e 7 se non operano in modalità quirks mode.

Risolvere questo problema tuttavia non è poi cosi difficile. Ci sono due metodi veloci per bypassare questo problema:

Evitare di impostare contemporaneamente la larghezza (o l’altezza) e i bordi o il padding
Si imposta solo per IE pee Windows 5.x una larghezza (o altezza) pari alla larghezza (o altezza) dei contenuti più lo spessore del padding e dei bordi.( Internet Explorer 5.5 è ormai superato)

Il problema del box model è stato riparato nella versione 8 di Internet Explorer.

I commenti condizionali per Internet Explorer

Come già accennato prima, l’utilizzo dei commenti condizionali ci pemetterà di visualizzare all’interno del codice (x)html della nostra pagina delle regole css che ci serviranno a fixare i bug del box model di internet Explorer e non solo. Tramite questi commenti infatti si possono visualizzare delle vere e proprie aree del sito se l’utente utilizza un determinato browser o un altro.

Vediamo un veloce esempio di utilizzo:

Analisi del codice

Nel codice sopra è strutturato il questo modo: il browser legge ed applica il file stylecomune.css che andrebbe bene per tutti i browser. Se il browser che sta utilizzando l’utente è internet explorer 6 allora il browser carica il foglio di style style_ie6.css con alcune regole che sovrascriveranno quelle scritte nel file stylecomune.css e che permetteranno la corretta visualizzazione del nostro sito web.

Stessa cosa vale per IE 7 e 8. Il tutto racchiudendo la chiamata al foglio di style o lo style stesso fra i commenti condizionali interpretati solo da Internet Explorer:

Tutorial Photoshop | WebDesign » CSS