Mr. Webmaster Blog Menu
  • Home
  • Cerca
  • Argomenti del Blog
    • A
    • Apple
    • B
    • Browser
    • C
    • CMS
    • D
    • Database
    • E
    • Eventi & WorkShop
    • F
    • Freelance
    • G
    • Grafica
    • H
    • Hosting
    • I
    • IoT
    • L
    • Linux
    • M
    • Makers
    • Mobile
    • Mr. Webmaster
    • O
    • Online Apps
    • Open Source
    • P
    • Programmazione
    • R
    • Reti
    • S
    • Scripting
    • Senza Rete
    • Sicurezza
    • Social Network
    • W
    • Web Design
    • Web e Diritto
    • Web e Lavoro
    • Web Marketing
    • Web Server
    • Web Writing
    • Windows
  • Network
  • Corsi on-line
Mr.Webmaster Blog→Web Design→Pseudo-elementi ::first-line e ::first-letter in CSS
  • 16
    DIC
    2014

Pseudo-elementi ::first-line e ::first-letter in CSS

Scritto da Claudio Garau | Web Design

Uno pseudo-elemento di CSS può essere utilizzato per stilizzare una parte specifica di un elemento; per fare un esempio i costrutti basati su pseudo-elementi saranno adottabili per svolgere operazioni come per esempio la stilizzazione della prima lettera di una stringa, di un’intera riga o di un intero elemento; nello stesso modo si potranno impiegare gli pseudo-elementi per procedure che prevedano l’inserimento di un contenuto primo a dopo di un determinato elemento.

css3

Gli pseudo-elementi erano già noti prima dell’introduzione di CSS3, quest’ultimo però ha previsto per essi la notazione basata su “::“,  double colon notation, in sostituzione della notazione basata su “:“, single colon notation, in modo che non vi fosse confusione tra la sintassi associata agli pseudo-elementi e quella propria delle pseudo-classi. La notazione single-colon è comunque considerata ancora accettabile per questioni legate alla compatibilità con CSS1 e CSS2.

Lo pseudo-elemento ::first-line viene utilizzato per aggiungere uno stile particolare alla prima riga di un testo, esso potrà essere applicato soltanto agli elementi block level, come per esempio le paragrafazioni; l’esempio seguente mostra come stilizzare la prima riga di un paragrafo:

p::first-line {
color: #000;
font-variant: small-caps;
}

Questo pseudo-elemento potrà essere applicato a proprietà che riguardano i font, i colori, gli sfondi, le spaziature di lettere e parole, la decorazione dei testi, l’allineamento verticale, la trasformazione dei testi, l’interlinea e clear usato per  impedire che di fianco ad un elemento siano presenti altri elementi con il float; una funzione simile è svolta da ::first-letter, anch’esso è applicabile soltanto agli elementi block level e consente la stilizzazione della sola prima lettera di un testo:

p::first-letter {
color: #000;
font-size: xx-large;
}

Le proprietà coinvolte da ::first-letter sono più o meno le stesse di ::first-line ma la prima è utilizzabile in un maggior numero di casi come per esempio la stilizzazione di margini, gli spazi attorno ai contenuti, i bordi, il float e l’allineamento verticale soltanto nel caso in cui il float sia uguale a none. In ogni caso sarà possibile utilizzare i due pseudo-elementi in combinazione:

p::first-letter {
color: #ccc;
font-size: xx-large;
}

p::first-line {
color: #ddd;
font-variant: small-caps;
}

Da notare che a livello di stilizzazione il resto del contenuto delimitato dalla paragrafazione non verrà in alcun modo influenzato dagli pseudo-elementi impiegati sulla prima lettera e la prima riga, esso infatti conserverà lo stile predefinito previsto dalle regole CSS precedentemente indicate.

  • CSS
  • pseudo elemento

Naviga tra i post del Blog

← In arrivo la seconda edizione di Meet Magento Italy (il 5 e 6 marzo 2015 a Milano)
→ Bitcoin: guida per gli sviluppatori

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
Post correlati
  • Numerazione automatica degli elementi di un elenco con CSS 04/12/2013
  • Stilizzare i bordi dei font con CSS 02/07/2013
  • Animare elementi con ForceJS 23/03/2016
  • Elementi fissi allo scrolling della pagina 05/10/2011
  • CSS Browser selector 29/06/2010
I post più letti del mese
  • html-codiceApostrofi e virgolette in pagine HTML: come gestirli nel modo giusto01/01/1970
  • Loading in attesa del caricamento della paginaLoading in attesa del caricamento della pagina01/01/1970
  • Uso corretto e sintassi del tag "br"Uso corretto e sintassi del tag "br"01/01/1970
  • 16 layout CSS pronti da usare16 layout CSS pronti da usare01/01/1970
  • Centrare una tabella con i CSSCentrare una tabella con i CSS01/01/1970
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2018 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: info legali / privacy / cookie