Gli pseudo-elementi

Vi sono elementi grafici nella tabulazione di una pagina web, che sono difficili da formattare e quando questo deve essere fatto rappresenta un problema. Ad esempio la prima lettera un paragrafo, la prima linea di un capitolo, quello che avviene prima o dopo di un elemento.

Esattamente questi cosìdetti pseudo-elementi sono:


  • :first-letter => va a indicare la prima lettera di un elemento
  • :first-line => indica la prima linea di un paragrafo
  • :before => indica cosa c'è prima di un elemento
  • :after => indica cosa c'è dopo un elemento





:first-letter

Questo selettore serve a formattare la prima lettere di un qualunque elemento contenente del testo. Si possono modificare le proprietà riguardanti il testo, il colore, lo sfondo, i margini e il padding.

La sintassi degli pseudo-elementi segue le regole comuni ai CSS, logicamente questi elementi vanno sempre collegato agli altri selettori:
             
selettore:pseudo-elemento {dichiarazioni;}


Che se applicate al nostro ammettiamo che vogliamo applicarlo al nostro paragrafo "p":

È possibile anche usare classi:

             
p:first-letter {color: blue; font-weight:bold; } 


O selettori di id:

             
p#id:first-letter {color: white; font-weight: bold;}



Per tutte le regole usate negli snippet di codice, il testo degli elementi presenterà la prima lettera bianca e in grassetto.





:first-line


Questo pseudo-elemento modifica la prima riga del corpo del testo, ad esempio:


             
p:first-line {color: white; } 
p.classe:first-letter {color: white; font-weight: bold;} 
p#id:first-letter {color: white; font-weight: bold;}






:before

Questo selettore inserisce un altro elemento all'inizio del contenuto dell'elemento specificato dal selettore. Ad esempio:

             
elemento:before {content: "contenuto";} 
h3:before {content: "1 ";} 
a:before {content: url(logo.png);}





:after

Questo selettore inserisce un altro elemento dopo il contenuto dell'elemento specificato dal selettore. Ad esempio:

             
elemento:after {content: "contenuto";} 
h3:after {content: "1 ";} 
a:after {content: url(logo.png);}

Nessun commento:

Posta un commento

Ti ringrazio per ogni commento, appunto, modifica o richiesta di chiarimento. Mantenendo sempre un tono civile. Ogni commento che non rispetta tali regole, sarà eliminato, sopratutto se fatto in maniera anonima. TI ricordo che cerchiamo nuovi collaboratori o appunti, per implementare il materiale presente sul sito.

Related Posts Plugin for WordPress, Blogger...