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 <
Poi si dovrebbe aggiungere uno stile al tag <
Aprite la demo per vedere come viene lo stile del paragrafo dal pulsante 'Result'.
Il problema di questa tecnica è che bisogna ricordarsi sempre di aggiungere uno <
CSS First Letterspan
> sulla prima lettera; questo diventa non solo ostrusivo ma anche laborioso se non si dispone di un artifizio per modificare il DOM.
Copia codice
<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.
Copia codice
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;
}
Il suo sorgente si può vedere da 'HTML' e 'CSS'
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
.
⤽
CSS3 ci da la possibilità di aggiungere la proprietà
Aprite la demo per vedere come viene lo stile del paragrafo dal pulsante 'Result'.
: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.
Copia codice
>
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;
}
Il suo sorgente si può vedere da 'HTML' e 'CSS'
Ancora nessun commento