Lettera decorata all'inizio del paragrafo
Decorazione automatica della prima lettera o riga del paragrafoIn alcuni siti (più specificatamente in quelli di poesia) all'inizio di ogni paragrafo vi è una lettera avente uno styling diverso dalle altre come nell'esempio:
CITAZIONE
Nel mezzo del cammin di nostra vita...
Oltre che a migliorare l'effetto grafico della pagina, questa decorazione serve per non sbagliare riga in caso lettura di testi molto lunghi. Si potrebbero mettere tutte le iniziali decorate manualmente ma in questo caso la pagina web peserà molto di più rispetto ad una regola di CSS e sarebbe realmente noioso e faticoso se si lavora nei testi lunghi, per poi non parlare ai problemi che potrebbero sorgere quando alla pagina viene aggiunto altro testo. L'ipotesi dell'inserzione manuale è da scartare. Quindi analizziamo l'alternativa migliore, cioè quella del CSS.
All'interno della pagina inserite questo codice (nel caso del sito tra i tag <head></head>, nel caso del blog "in ogni pagina in cima al sito":
HTML
<style>
p:first-letter{
font-size:200%;
font-weight: bold;
}
</style>
in questo modo, ogni paragrafo che iniziate
HTML
<p>Questo è un paragrafo in quanto è compreso tra i tag 'p' </p>
avrà la prima lettera in grassetto e di dimensioni pari al doppio delle altre lettere.
Il risultato sarà simile a questo:
Questo è un paragrafo in quanto è compreso tra i tag 'p'
Ovviamente potrete modificare a piacere ciò che è scritto all'interno della regola, migliorando il colore in base allo stile del sito o, meglio ancora, cambiando font e aggiungendo dei bordi al testo. Potreste ottenere qualcosa del genere:
HTML
<style>
p:first-letter { border-style: outset;
border-width: 2px;
padding: 2px;
font-weight: bold;
font-size: 200%;
background-color: yellow;
}
</style>
A volte, potrebbe capitare di dover cambiare lo stile relativo alla sola prima riga di ogni paragrafo, ad esempio in caso di un inserto pubblicitario che deve avere il titolo più grande del resto della frase ( si farà a meno di rispecificare le caratteristiche del titolo ogni volta che ne verrà inserito uno; il CSS svolgerà tutto il lavoro di formattazione per noi). In questo caso, il codice da utilizzare è:
HTML
<style>
p:first-line {
font-weight: bold;
font-size: 150%;
text-decoration: underline;
}</style>
il quale, se inserito, fa si che la prima riga (fino all'inizio della riga successiva o fino ad un 'a capo') di ogni paragrafo sia formattata secondo le caratteristiche inserite.
La sola differenza che presentano i 2 codici (oltre al modo in cui viene formattato il testo) sta nel attributo:
p:first-letter nel primo caso e
p:first-line nell'ultimo.
