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
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>
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; }
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
.
: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; }
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…

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 …

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…
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. …
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…
Aggiungi un commento