guida completa
I CSS sono il meccanismo definito dal W3C per determinare l'aspetto (caratteri, colori e impaginazione) delle pagine Web. Con la crescente aderenza dei browser agli standard, gli autori di pagine Web dispongono finalmente di uno strumento potente e duttile per gestire l'aspetto delle pagine indipendentemente dai contenuti.
Lo scopo di questa guida è quello di introdurre il lettore ai fogli di stile agendo come filtro tra le specifiche ufficiali e il mondo reale: saranno illustrati e approfonditi i meccanismi che sono in grado di funzionare sui browser più diffusi evidenziando anche le differenze tra i comportamenti reali e ciò che in effetti è previsto dalle specifiche W3C, mentre saranno soltanto accennati i meccanismi che non funzionano o funzionano solo in parte.
Saranno inoltre affrontati i problemi che si devono risolvere nella quotidiana realizzazione di pagine Web, illustrando tecniche e soluzioni innovative o consolidate per ottenere dalle specifiche ciò che esse non prevedono esplicitamente (come, per esempio, i layout a colonne multiple).
La guida assume dunque un duplice aspetto teorico e pratico, illustrando dettagliatamente qual è il reale comportamento dei meccanismi previsti nelle specifiche e come, partendo da tali comportamenti, sia possibile ottenere la soluzione dei problemi che la realizzazione di una pagina Web comporta, anche attraverso numerosi esempi pratici.
La terza edizione del libro abbandona finalmente i browser meno aderenti agli standard (come ad esempio Internet Explorer 6 precedenti) semplificando le tecniche consolidate e introducendo nuove tecniche consentite dall'attuale stadio di sviluppo delle specifiche CSS3.
I primi capitoli introducono i concetti che stanno alla base dei CSS illustrandone le regole e la relativa sintassi. Nella parte centrale sono esposte le tecniche di sviluppo fondamentali per impaginare e definire i vari elementi di una pagina web. Quindi si passa a tecniche avanzate che utilizzano il meglio di CSS2 e CSS3. Quello che emerge con forza è come i CSS permettano di esaltare la creatività dei web designer creando layout differenti e funzionali per qualsiasi dispositivo (mobile, smartphone e tablet, o desktop). Il testo è caratterizzato da un approccio pratico che conduce dal problema alla soluzione, attraverso esempi di codice e immagini che facilitano la comprensione.
ingegnere, tecnologo, scrittore, fumettaro, nerd, pantofolaio rock'n'roll dancer.
Autore di HTML5 il markup e le API, Responsive Web Design, CSS3, CSS, CSS Pocket.
Sono di seguito riportati i vari errori di stampa e refusi presenti nel libro. La lista non va considerata come definitiva.
Per ogni errore è indicata la pagina dove esso è presente e il numero di riga; qualora il numero di riga fosse negativo, le righe devono essere contate dal basso.
Qualora rilevaste degli errori, siete invitati a segnalarli inserendo un commento ovvero inviando una e-mail al seguente indirizzo: gianluca.troiani@gmail.com, grazie.
</h1>
</h2>
att
, indipendentemente dal valore assunto da tale valoreatt
, indipendentemente dal valore assunto da tale attributoE:first-child
seleziona l'elemento E
se ...E:first-of-type
seleziona l'elemento E
se ...#mioId p /* specificità: 1x100 + 0x10 + 0x1 = 100 */
#mioId p /* specificità: 1x100 + 0x10 + 1x1 = 101 */
font-size : 80%;
font-size : 0.8em;
80%
e 0.8em
coincidono quando assegnati alla proprietà font-size
, però le percentuali sono introdotte nel paragrafo successivo; nell'esempio è dunque più corretto utilizzare 0.8em
.src: url('fonts/Arvo-Bold.eot')
src: url('fonts/Arvo-Regular.eot')
em
o px
em
o px
right
: la larghezza e l'altezza del sono tali da ...right
: la larghezza e l'altezza del riquadro sono tali da...1em
) il blocco che lo precede. I contenuti1em
). I contenutibackground: #CCC url(colonna-1.png) 0 0 repat-y;
background: #CCC;
80%
e 0.8em
coincidono quando assegnati alla proprietà font-size
, però le percentuali sono introdotte nel paragrafo successivo; nell'esempio è dunque più corretto utilizzare 0.8em
.#corpo-sub
#corpo-sub
aggiungere la dichiarazione overflow:hidden
. È disponibile il codice corretto e completo.