Scopriamo come può utilizzare i CSS per visualizzare la prima lettera di una notizia con una dimensione superiore al resto del testo, come in alcuni quotidiani o blogs.

Due approcci possibili

⤽
Vecchio stile
⤽
Si può sempre fare con un selettore CSS e si dovrebbe utilizzare un tag <span> sulla prima lettera; questo diventa non solo ostrusivo ma anche laborioso se non si dispone di un artifizio per modificare il DOM.
<p><span>L</span>orem ipsum dolor sit amet, consectetur adipiscing ù elit. Ut in metus nec mauris egestas … amet ultricies viverra, mollis at quam.</p>
Poi si dovrebbe aggiungere uno stile al tag <span> per creare il carattere in maiuscolo.
p {
    font-family:verdana;
    font-size: .75em;
    color: #00F;
}
p span {
    display:block;
    float:left;
    font-family:Georgia;
    font-size: 300%;
    font-weight: bold;
    line-height: 90%;
    margin-right: 6px;
    margin-bottom:-2px;
    margin-top: 7px;
    color: #F00;
}
Aprite la demo per vedere come viene lo stile del paragrafo dal pulsante 'Result'.
Il suo sorgente si può vedere da 'HTML' e 'CSS'

Il problema di questa tecnica è che bisogna ricordarsi sempre di aggiungere uno <span> intorno al punto ogni volta che si desidera creare un carattere in maiuscolo speciale; in un sistema CMS l’utente potrebbe non capire l’HTML e allora non sarà in grado di aggiungere il tag <span> all’inizio del paragrafo.

Il modo per aggirare questo è quello di utilizzare una nuova proprietà CSS3 :first-letter.

CSS First Letter
⤽
CSS3 ci da la possibilità di aggiungere la proprietà :first-letter che, come si può intuire permette di dare uno stile alla prima lettera dell’elemento.

Quindi si può aggiungere questa regola per creare un carattere speciale su tutti i paragrafi.

>
p:first-letter {
	display:block;
	float:left;
	font-family:Georgia;
	font-size: 310%;
	font-weight: bold;
	line-height: 90%;
	margin-right: 6px;
	margin-bottom:-2px;
	margin-top: 7px;
}
Aprite la demo per vedere come viene lo stile del paragrafo dal pulsante 'Result'.
Il suo sorgente si può vedere da 'HTML' e 'CSS'

Similari
⋮ Python per tutti ⋮
148% Python ⊚
Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
⋮ Guida allo Zend Framework ⋮
145% Zend ⊚
Zend Framework è un framework open source per PHP. Zend Framework separa la logica e le azioni usando il pattern MVC (Model View Controller). Cosa è lo Zend Framework? Framework per la costruzione di siti web più veloci e …
⋮ Fondamentali di jQuery ⋮
135% JQuery ⊚
jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
⋮ 25 Tricks in CSS da conoscere ⋮
125% Css ⊚
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. …
⋮ Regole fastidiose ai web designer ⋮
104% Css3 ⊚
Per la maggior parte dei webdesigner, lo stile di un sito web con i CSS è abbastanza semplice. Fintanto che il codice HTML è semantico e i div e le classi sono progettati in modo sensibile, il processo di sviluppo dovrebbe…