Introduzione...xiii Capitolo 1 Capitolo 2 Capitolo 3 Gli standard e i CSS...1 Contenuti e formattazione: due oggetti distinti... 1 Le zuppe di codice... 2 L introduzione dei CSS... 4 I vantaggi degli standard... 4 La compatibilità... 4 Indipendenza dal dispositivo... 4 L accessibilità... 5 Sviluppo e manutenzione... 5 Leggerezza del codice... 5 Motori di ricerca... 5 Standard come filosofia... 6 CSS... 6 Le regole CSS...7 Sintassi delle regole CSS... 7 I selettori... 8 Le proprietà CSS... 9 I valori... 9 Associare i CSS ai documenti HTML...10 Fogli di stile incorporati...10 Fogli di stile esterni...10 Fogli di stile importati...11 Stili alternativi...11 I selettori CSS...13 Selettore di tipo...13 Selettore universale...14 Selettore di attributo...14
vi CSS Selettori di attributo multipli...15 Selettore class...15 Selettore id...16 Pseudoclassi...17 Le pseudoclassi :link e :visited...17 Le pseudoclassi dinamiche :hover, :focus e :active...18 Pseudoclasse :lang...19 Pseudoclassi :enabled e :disabled...20 Pseudoclasse :checked...21 Pseudoclasse :nth-child()...21 Pseudoclasse :nth-last-child()...22 Pseudoclasse :nth-of-type()...23 Pseudoclasse :nth-last-of-type...24 Pseudoclassi :first-child, :last-child e :only-child...24 Pseudoclassi :first-of-type, :last-of-type e :only-of-type...25 Pseudoclasse :empty...25 Pseudoclasse :not...26 Pseudo-elementi...26 Pseudo-elemento ::first-line...26 Pseudo-elemento ::first-letter...27 Pseudo-elementi ::before e ::after...27 Combinatori...28 Combinatore di discendenza...28 Combinatore figlio...28 Combinatore di adiacenza...29 Combinatore di precedenza...29 Raggruppamento di selettori...29 Selettori e nuovi elementi HTML5...30 La cascata e la specificità dei selettori...30 La direttiva!important...32 Estendere il supporto ai selettori di Internet Explorer versioni 7 e 8...32 Capitolo 4 Tecniche di base: formattazione del testo...33 Il tipo di carattere...33 La dimensione del carattere...37 La dimensione dei caratteri espressa mediante lunghezze...37 La dimensione dei caratteri espressa mediante percentuali...38 La dimensione dei caratteri espressa mediante parole chiave...39 Lo stile del testo...39 La proprietà font-style...39 La proprietà font-weight...39 Lo stile del testo e la regola @font-face...40 Variazioni di formato...41 L interlinea...43 La proprietà font...43 La spaziatura del testo...44
vii Allineamento del testo...45 Indentazione del testo...46 Allineamento verticale del testo...46 Decorazione del testo...48 Gli spazi bianchi...51 Ombre sul testo...53 Capitolo 5 Capitolo 6 Capitolo 7 Tecniche di base: definizione dei colori e degli sfondi...57 La definizione dei colori...57 Il colore del testo e dello sfondo...59 Immagini di sfondo...62 Ripetizione dell immagine di sfondo...62 La posizione dell immagine di sfondo...64 Scorrimento dell immagine di sfondo...66 La proprietà background...67 Sfondi multipli...68 Tecniche di base: il box model...73 I diversi tipi di elemento...73 Elementi a livello di blocco (block level elements)...73 Elementi in linea (inline-level elements)...73 Elementi rimpiazzati (replaced elements)...73 Le diverse proprietà che caratterizzano il box model...74 La proprietà width...74 La proprietà height...75 La proprietà padding...76 Le proprietà dei bordi...78 La proprietà margin...83 La proprietà overflow...86 La proprietà box-shadow...92 Tecniche avanzate: impaginazione...97 Il posizionamento dei blocchi...97 Il normale flusso...98 Il posizionamento relativo...99 Il posizionamento assoluto...102 Il posizionamento fisso...105 Blocchi flottanti...107 Layout complessi...115 Layout a larghezza fissa a due colonne...115 Layout liquido a due colonne...127 Layout a due colonne di cui una liquida e una a larghezza fissa...136 Layout a larghezza fissa a tre colonne...141 Layout liquido a tre colonne...147
viii CSS Layout con tre colonne a larghezza fissa e una colonna liquida...152 Oltre la terza colonna...157 Layout complessi...158 Griglie per l impaginazione...160 Tecniche emergenti...169 Capitolo 8 Capitolo 9 Capitolo 10 Capitolo 11 Tecniche avanzate: menu di navigazione...175 Menu a un solo livello...175 Codice HTML...175 Menu verticali...176 Menu orizzontali...182 Menu a due livelli...191 Codice HTML...191 I selettori...191 Menu verticale...191 Menu orizzontale...193 Menu dinamico...195 Tecniche avanzate: immagini tramite CSS...201 Sfondi per il layout...201 Box con angoli arrotondati...205 Sfondi come icone...206 Sostituzione di testo con immagini...208 Fahrner Image Replacement (FIR)...209 Leahy/Langridge Image Replacement (LIR)...211 Phark Image Replacement...212 Accessibilità...214 Tecniche di sostituzione di immagini e collegamenti...217 Tecniche avanzate: contenuti generati...227 Gli pseudo-elementi :before e :after...227 La proprietà content...230 Valori per la proprietà content: le stringhe...230 Valori per la proprietà content: URL...231 Valori per la proprietà content: attributi...232 Valori per la proprietà content: contatori...233 Tecniche avanzate: differenziare l esperienza utente...235 Diversi media, diversi stili...235 Associazione dei fogli di stile a un medium specifico...236 La regola @import...236 La regola @media...236 L attributo media...237
ix Media query...237 Media feature...237 Fogli di stile per la stampa...243 Che cosa stampare...243 Colori e sfondi...244 I caratteri...245 L impaginazione...245 Le interruzioni di pagina...246 Una pagina, diversi stili...246 Fogli di stile permanenti, preferiti e alternativi...246 Specificare fogli di stile permanenti...247 Specificare fogli di stile preferiti...247 Specificare fogli di stile alternativi...247 Un esempio...248 Capitolo 12 Effetti speciali: trasformazioni e transizioni...251 Trasformazioni...251 scale()...252 rotate()...254 skew()...255 translate()...256 Traformazioni multiple...257 transform-origin...258 Transizioni...259 Appendice A Accessibilità: Legge 04/2004 e CSS...263 Requisito n. 1...264 Requisito n. 4...264 Requisito n. 6...264 Requisito n. 9...266 Requisito n. 11...266 Requisito n. 12...266 Requisito n. 19...266 Oltre i requisiti...267 Nascondere i contenuti...267 Ordinamento dei contenuti...267 Menu di navigazione a comparsa...267 Immagini introdotte tramite i CSS...268 Contenuti generati...268 CSS specifici per migliorare l accessibilità di una pagina...268 Appendice B Partire da zero...269 Reset CSS di Eric Meyer...270 Uso dei file di reset...271 Indice analitico...273