<body>
<div class=”titolo”>
<h2>Capitolo 1</h2>
</div>
<div class=”testo”>
<p class=”primo”>Testo del primo paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
</div>
</body>Corrisponde più o meno a una struttura ideale, per lavorare col CSS. Come ho accennato in precedenza, diversi tag HTML possiedono una formattazione di base, inserita automaticamente dal browser o dal dispositivo di lettura: il tag <p>, ad esempio, sarà quasi sempre seguito da una riga vuota, a separarlo dal paragrafo successivo, mentre i vari tag usati per i titolo, come <h1>, <h2> e così via, avranno già in partenza una dimensione differente, rispetto al testo normale, e spesso saranno anche visualizzati in grassetto. Queste impostazioni automatiche possono andarci bene, ma possono anche essere una seccatura, se vogliamo avere un controllo totale sulla grafica della pagina. Se le consideriamo una seccatura, nella prima parte del foglio di stile possiamo inserire alcune regole per annullarle: le ho riassunte nel file CSS che potete scaricare da qui. Per usarle, copiate il contenuto e incollatelo all'inizio del vostro foglio di stile, così da fare piazza pulita di tutto, prima di cominciare il lavoro. Per scrivere il nostro foglio di stile, ricordiamo sempre il principio di base del CSS: partiamo dalle regole più generali, che costituiranno la base del nostro stile, e procediamo poi verso le regole più specifiche, che riguarderanno soltanto piccole porzioni di testo. Nella nostra pagina di esempio, il tag di base è <body>, che li include tutto. È il capofamiglia, se ricordiamo la struttura gerarchica dello HTML. Subito dopo di lui, vengono i tag <div class=”titolo”> e <div class=”testo”>, alla pari: sono tag fratelli (oppure sorelle, come preferite), nonché figli del tag <body>. Il tag <div class=”titolo”> ha un solo figlio, ossia il tag <h2>, e il suo ramo si conclude lì; il fratello <div class=”testo”>, invece, ha diversi figli, tutti i tag <p>, e ognuno di essi avrà probabilmente altri figli, se abbiamo usato qualche corsivo o grassetto, oppure se abbiamo inserito link, immagini o altro. È una famiglia molto ramificata, ma dobbiamo sempre ricordare la sua struttura: i figli ereditano lo stile del padre, a meno che questo stile non sia modificato in una delle loro regole. Se vogliamo impostare uno sfondo che valga per tutto il capitolo, impostiamolo come regola per il tag <body>. Scriveremo ad esempio:
body{
color: yellow;
}se vogliamo che il capitolo abbia uno sfondo giallo. Potremo poi cambiare il colore dello sfondo per un tag specifico, ma il giallo sarà il colore di base per lo sfondo di tutti gli elementi della pagina. Se vogliamo impostare un font di base, modificandolo eventualmente per i titoli, il tag body è sempre un buon punto in cui impostarlo. Unendolo alla regola precedente, otterremo body{
color: yellow;
font-family: “Times New Roman”, Times, serif;
}che assegnerà uno sfondo giallo alla pagina e imposterà il font di base per tutto il testo. Per modificare il font del titolo, poi, basterà scrivere .titolo{
font-family: "Arial Black", Arial, sans-serif;
}In questo modo, il tag <div class=”titolo”> utilizzerà un font diverso, che sarà ereditato dai suoi figli (il solo tag <h2>, in questo esempio). Il contenuto di <div class=”testo”>, invece, erediterà il font impostato per <body>, che è suo padre. Se la catena di genitori, figli e fratelli ci confonde, può essere utile tracciare un breve schema della rete di rapporti, così da averla sempre a portata di occhio, mentre scriviamo il foglio di stile: può aiutare a chiarire perché un determinato elemento abbia un certo colore, oppure utilizzi un certo font. Il tag body è un ottimo posto anche per inserire tutte le regole che determineranno i margini della pagina, quando spazio vuoto dovrà essere lasciato sui bordi, eccetera. Ad esempio, se al tag body aggiungiamo anche una regola
padding: 7px 10px 5px 10px;tutta la pagina presenterà un margine alto di sette pixel, laterale di dieci pixel e basso di cinque pixel: avremo insomma creato una piccola cornice bianca attorno al contenuto della pagina. Titolo e testo, nel nostro esempio e nella maggior parte delle pagine ben strutturate, sono due elementi fratelli: le regole che assegniamo a uno non influiscono sull'altro ed è bene così. Per separarli, inserendo un certo spazio tra il titolo e il primo paragrafo del testo, non premiamo tre o quattro volte il tasto “Invio”, perché il risultato non è garantito. Il modo migliore per separarli è usare i margini, come già abbiamo visto. ad esempio, se scriviamo la regola
.titolo{
margin-bottom: 30px;
}avremo la garanzia che il titolo e il primo paragrafo saranno separati da uno spazio vuoto di trenta pixel. Possiamo assegnare qualsiasi valore, a seconda delle nostre preferenze, ma la cosa importante è assegnarlo alla proprietà margin-bottom, che determina la distanza tra la fine di questo elemento e l’inizio del successivo. Venendo al testo, molti libri scelgono di rientrare la prima riga di ogni paragrafo. Se vogliamo adottare questo stile per il nostro EPUB, basterà una regola del tipo
p{
text-indent: 2em;
}che produrrà un rientro pari a due caratteri nella prima riga di ogni tag <p>. Il primo paragrafo di un capitolo, a volte, riceve un trattamento particolare: per questo gli abbiamo assegnato una classe “primo”, che useremo nel CSS per modificare soltanto quel paragrafo. Ad esempio,
p.primo{
text-indent: 0;
}azzera il rientro per il tag <p> che possiede un attributo class=”primo”, ossia il primo paragrafo del nostro capitolo. Essendo poi una regola più specifica, è meglio inserirla dopo la regola generale, che abbiamo scritto per il tag <p>. Se poi vogliamo davvero sbizzarrirci e dare un aspetto particolare alla prima lettera del capitolo, in memoria degli antichi testi miniati medievali, possiamo ricorrere a una regola ancora più specifica, ossia
p.primo:first-letter{
position: relative;
display: block;
float: left;
font-weight: bold;
font-size: 4.4em;
line-height: 0.8em;
color: rgb(40,40,40);
}che potrete divertirvi a decifrare, sulla base delle puntate precedenti. In linea di massima, la regola di rivolge alla prima lettera del paragrafo con classe “primo”: ingrandisce la lettera, la colora, la rende in grassetto e la allinea al resto del paragrafo. Questa regola, che è specifica al massimo grado (riguarda solo una lettera di un paragrafo), la collocheremo alla fine della parte del foglio CSS dedicata ai paragrafi.
Tutte le regole che modificano elementi interni a un tag <p>, come possono esserlo i tag <b>, <i> e così via, li sistemeremo subito dopo la sezione dedicata al paragrafo: una buona organizzazione del foglio di stile ci aiuterà a vedere meglio i rapporti di parentela tra gli elementi. Il foglio di stile, dunque, potrebbe avere una struttura finale di questo tipo:
body{
//regole globali
}
.titolo{
//regole per la sezione “titolo”
}
.titolo h2{
//regole specifiche per il tag <h2>, quando si trova in un elemento con class”titolo”
}
.testo{
//regole generali per il corpo del capitolo
}
p{
//regole specifiche per i paragrafi
}
p.primo{
//regole specifiche per il paragrafo con classe “primo”
}
p.primo:first-letter{
//regole specifiche per la prima lettera del paragrafo con classe “primo”
}
b{
//regole specifiche per il tag <b>
}e così via. Combinando i tag, possiamo ottenere regole sempre più specifiche e precise, ad esempio la regola
p b{
//regole per i tag <b> all’interno di un tag <p>
}che si rivolge soltanto a un sottogruppo dei tag <b>, ossia quelli che sono figli di un tag <p>. Il principio di base, che dobbiamo sempre ricordare per risparmiarci fatica inutile è: partiamo dal generale e scendiamo sempre più verso il particolare. Ricordarlo e applicarlo non ci metterà al sicuro dagli errori, ma ci aiuterà a ridurli e a localizzarli più facilmente.
![WhatsApp Android: aggiunte nuove emoji [DOWNLOAD]](https://m2.paperblog.com/i/289/2897680/whatsapp-per-android-aggiunte-le-nuove-emoji--L-sa8DOg-175x130.png)
Pacman
Nostradamus
Magical Cat Adventure
Snake