L'alternativa è specificare il line-height solo per gli elementi principali della pagina, come ho fatto nell'esempio:
p, blockquote, pre, ol, dl, ul, form {line-height:1.5}
Il CSS di base completo
La costruzione del nostro CSS di base dell'esempio sta volgendo al termine. Non ci resta a questo punto che controllare margini e padding degli elementi principali di pagina: per questa parte rimando all'articolo Armonizzare lo spazio bianco. Vediamo quindi il CSS dell'esempio per intero:
/*stili sul body e tipografia */
body{font: 100.01% Arial, Helvetica, sans-serif}
h1{font-size: 2.4em}
h2{font-size: 1.8em}
h3{font-size: 1.4em}
h4{font-size: 1.2em}
h5{font-size: 1em}
h6{font-size: 0.85em}
/*line-height*/
p, blockquote, pre, ol, dl, ul, form {line-height:1.5}
/* set di base per margini e padding */
html, body{margin: 0;padding: 0}
h1, h2, h3, h4, h5, h6{margin: 0.7em 0 0.2em}
address, blockquote, dl, form,
fieldset, ol, table, p, pre, ul{
margin-top: 0.2em;margin-bottom: 1.2em}
Conclusioni
In questo articolo abbiamo visto brevemente la realizzazione di un CSS di base, che può costutuire un valido starter kit per i vostri progetti. Come ho detto in apertura, racchiude aspetti da considerare in ogni occasione, ma la sua realizzazione può risultare molto soggettiva e variare di caso in caso. È comunque importante capire i meccanismi alla base del suo sviluppo e in particolare i concetti essenziali tali da poter disporre di un solido punto di partenza.
Gli esempi dell'articolo sono disponibili per il download. Alla prossima.
Guide CSS
Responsive Desing, la guidaProgettare siti da fruire su dispositivi diversi è imprescindibile... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |