3.42
Creare Elementi fittizi non presenti nel documento
Nel contesto di un documento HTML, esistono parti che non sono associate a elementi specifici, ma possono comunque essere personalizzate e formattate secondo le preferenze dell’utente utilizzando i CSS tramite ciò che è noto come pseudo-elementi. Questo termine apparentemente enigmatico può essere spiegato in questo modo: quando si crea una regola nello stile che fa riferimento a questi pseudo-elementi, è come se venissero introdotti elementi immaginari nel documento, che esistono solo nei CSS e non nel codice che determina la struttura della pagina. Esaminiamoli in dettaglio.
:first-letter Con questo selettore, è possibile personalizzare la prima lettera di qualsiasi elemento contenente testo. È possibile modificare tutte le proprietà relative al carattere e al testo, nonché quelle associate al colore, allo sfondo, ai margini, ai bordi e al padding.
Sintassi ed esempi La sintassi di tutti i pseudo-elementi segue le stesse regole. La più importante è che non possono essere utilizzati da soli, ma devono sempre essere collegati ad altri selettori.
selettore:pseudo-elemento {dichiarazioni;} Non importa il tipo di selettori utilizzati. La definizione più semplice prevede l’applicazione di un pseudo-elemento a un selettore di base:
p:first-letter {color: white; font-weight: bold;} È possibile anche utilizzare classi:
p.classe:first-letter {color: white; font-weight: bold;} O identificatori (id):
p#id:first-letter {color: white; font-weight: bold;} In tutti i casi, il testo degli elementi presenterà la prima lettera in bianco e in grassetto, seguendo le regole specificate.
Per quanto riguarda il selettore :first-line, esso consente di definire lo stile della prima riga di un elemento che contiene testo.
Sintassi ed esempi Le regole generali che si applicano a :first-letter sono valide anche per :first-line. Pertanto, deve sempre essere collegato a un altro selettore.
selettore:first-line {dichiarazioni;} La sintassi può essere applicata a diversi tipi di selettori. Ad esempio:
p:first-line {color: white; } p.classe:first-line {color: white; font-weight: bold;} p#id:first-line {color: white; font-weight: bold;}
Un esempio di utilizzo:
:before, :after e il contenuto generato Tra i pseudo-elementi, due di essi che meritano una menzione speciale sono :before e :after. Attraverso questi pseudo-elementi, è possibile inserire contenuto nel documento HTML che non è originariamente presente nel documento stesso.
Più specificamente:
Pseudo-elemento Descrizione :before Inserisce un altro elemento all’inizio del contenuto dell’elemento individuato dal selettore. :after Inserisce un elemento alla fine del contenuto dell’elemento individuato dal selettore.
Il contenuto aggiunto con questi due pseudo-elementi è definito come “contenuto generato”.
Per spiegare meglio queste definizioni, è possibile specificare quale contenuto deve essere aggiunto utilizzando la proprietà CSS “content”. Questo contenuto può essere una semplice stringa di testo, un URL che punta a un’immagine o a un altro documento, un contatore numerico, delle virgolette, oppure il riferimento al valore di un attributo HTML identificato da un selettore di attributo.
Inoltre, è importante notare che è possibile definire un box generico a cui possono essere applicate diverse proprietà CSS. Questa flessibilità rende questa tecnica estremamente potente e versatile. Per ulteriori esempi sull’uso di :before e :after, si possono fare riferimento alle risorse fornite alla fine di questa lezione.
Sintassi ed esempi Ora esamineremo più dettagliatamente il codice. La sintassi generale per utilizzare :before, :after e il contenuto generato è la seguente:
elemento:before {content: “contenuto”;} elemento:after {content: “contenuto”;} Nel caso di questi pseudo-elementi, gli esempi pratici sono particolarmente utili per comprendere meglio i concetti teorici.
Iniziamo con un esempio semplice. Supponiamo di voler inserire un numero prima di un titolo h3. Utilizzeremo il pseudo-elemento :before in questo modo:
h3:before {content: “1 “;} La stringa di testo deve essere racchiusa tra virgolette; se si desidera separare il contenuto generato dall’elemento, è necessario inserire uno spazio prima delle virgolette di chiusura.
Se vogliamo inserire il numero dopo il titolo h3, useremo :after:
h4:after {content: ” 1″;} In questo caso, per separare il contenuto, lo spazio va dopo le virgolette di apertura.
Ora vediamo come inserire un’immagine prima di un link utilizzando l’URL dell’immagine:
a:before {content: url(logo.png);} Fino a questo punto, abbiamo coperto le basi. Ora vediamo come il contenuto generato può essere formattato utilizzando altre proprietà CSS. Inseriremo nuovamente un numero, e il testo apparirà su un box largo di 30px, con uno sfondo rosso, caratteri bianchi e una dimensione del testo di 22px:
h3.numero:before { content: “1 “; display: inline-block; width: 30px; height: 30px; background: red; padding: 3px; margin-right: 5px; color: white; font-size: 22px; } Nell’ultimo esempio, vediamo come creare box generici e formattati. Basta lasciare vuoto il valore per la proprietà content, impostare un valore per la proprietà display e utilizzare altre proprietà CSS per definire l’aspetto del box. Qui inseriamo un quadrato prima del titolo h3:
h3.box:before { content: ” “; display: inline-block; width: 70px; height: 30px; background: red; padding: 3px; border: 2px solid black; margin-right: 5px; }