CSS

guida completa

Il libro

Gli obbiettivi del libro

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.

Nuova edizione

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.

Argomenti in breve

  • Introduzione agli Standard W3C
  • Regole CSS: i selettori, le proprietà, i valori
  • Box-model e posizionamento degli elementi di blocco
  • Formattazione di testo e sfondi
  • Impaginazione a colonne: layout liquidi e fissi
  • Definizione di menu dinamici e interattivi
  • Fogli di stile per browser desktop, tablet, smartphone e per la stampa
  • CSS e accessibilità
Copertina del libro
Pagine: 288
Formato: 17 x 24 cm
ISBN: 9788850330256
Scheda completa
Esempi su github

L'autore

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.

giatro.me, constile.org

Facebook

Instagram

Slideshare

Errata corrige

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.

  • pagina 2, riga 3 del Listato 1.1:
    Errata:
    </h1>
    Corrige:
    </h2>
  • pagina 9, riga 16:
    Errata:
    Purtroppo i browser non hanno un supporto completo per tutte le viarie proprietà CSS
    Corrige:
    Purtroppo i browser non hanno un supporto completo per tutte le varie proprietà CSS
  • pagina 14, riga 11:
    Errata:
    att, indipendentemente dal valore assunto da tale valore
    Corrige:
    att, indipendentemente dal valore assunto da tale attributo
  • pagina 23, riga 2:
    Errata:
    ma solo i valori >0 (1,2,3) sono validi
    Corrige:
    ma solo i valori >0 [1,2] sono validi
  • pagina 25, riga 3:
    Errata:
    E:first-child seleziona l'elemento E se ...
    Corrige:
    E:first-of-type seleziona l'elemento E se ...
  • pagina 31, riga 9:
    Errata:
    #mioId p /* specificità: 1x100 + 0x10 + 0x1 = 100 */
    Corrige:
    #mioId p /* specificità: 1x100 + 0x10 + 1x1 = 101 */
  • pagina 38, riga 8:
    Errata:
    font-size : 80%;
    Corrige:
    font-size : 0.8em;
    Nota:
    I valori 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.
  • pagina 40, riga 5 del listato 4.9:
    Errata:
    src: url('fonts/Arvo-Bold.eot')
    Corrige:
    src: url('fonts/Arvo-Regular.eot')
  • pagina 44, riga 17:
    Errata:
    ovvero una lunghezza espressa con in unità em o px
    Corrige:
    ovvero una lunghezza espressa in unità em o px
  • pagina 46, figura 4.9:
    Errata:
    La figura riporta la dicitura "text-indent: 20px"
    Corrige:
    La figura deve invece riportare la dicitura "text-indent: 40px"
  • pagina 91, didascalia figura 6.15:
    Errata:
    della dichiarazione overflo:auto.
    Corrige:
    della dichiarazione overflow:auto.
  • pagina 104, riga -4:
    Errata:
    e right: la larghezza e l'altezza del sono tali da ...
    Corrige:
    e right: la larghezza e l'altezza del riquadro sono tali da...
  • pagina 109, riga 6:
    Errata:
    pari a 1em) il blocco che lo precede. I contenuti
    Corrige:
    pari a 1em). I contenuti
  • pagina 119, riga 6 del listato 7.16:
    Errata:
    background: #CCC url(colonna-1.png) 0 0 repat-y;
    Corrige:
    background: #CCC;
    Nota:
    I valori 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.
  • pagina 124, riga 4:
    Errata:
    non udenti
    Corrige:
    non vedenti
  • pagina 155, riga 4:
    Errata:
    manca una dichiarazione nella regola per #corpo-sub
    Corrige:
    alla regola per #corpo-sub aggiungere la dichiarazione overflow:hidden. È disponibile il codice corretto e completo.
  • pagina 213, figura 9.12
    Errata:
    La figura 9.17 è stata utilizzata anche per la figura 9.12
    Corrige:
    La figura 9.12 corretta è di seguito riportata: .