Con i CSS, è possibile aggiungere il contenuto che non appartiene al codice HTML nei seguenti modi:
Usando la proprietà content in copia con pseudo-elementi :before e:after;
Taramite numerazione automatica con utilizzo delle proprieta counter-increment e counter-reset.
Come aggiungere il contenuto generato sulla pagina web
1. Proprieta content
Questa proprietà specifica il contenuto che appare prima o dopo l'elemento. Si utilizza con pseudo elementi :before e :after
Diciamo che è una definizione semplificata del concetto di :before e :after anche se in realtà non c'è prima e dopo ma c'e sovrapposizione uno sopra altro e gia con altri parametri posiamo piazzare il contenuto generato o sopra o sulla destra o sulla sinistra .
Contenuto generato eredita valore dal elemento a cui è collegato. Vengono ereditati solo proprietà che si ereditano
content | |
---|---|
Valore : | |
normal | Valore di default. Contenuto senza contenuto. |
none | Non aggiungere contenuto. Si utilizza quando è necessario rimuovere contenuto generato per uno dei elementi da un gruppo di elementi (ad esempio, elementi della lista), perche inizialmente è stata asegiata al grupo in generale. |
counter | Permette di creare i contatori, indicando per loro il punto di partenza del conto e il valore del incremento con aiuto di proprietà counter-reset. Per incremento diretto del conto si utilizza la proprietà counter-increment. |
attr() | Aggiunge prima o dopo l'elemento il valore dell'attributo, racchiuso tra parentesi. Per inserire uno spazio tra il contenuto esistetene e quello generato, è necessario aggiungere uno spazio prima o dopo la parentesi, per esempio,content: attr( href); |
" " | Testo o simbolo che sara aggiunto come contenuto generato, deve essere racchiuso tra virgolette doppie o singole. Virgolette vuote possono essere usate per aggiunta del contenuto block. |
open-quote | Aggiunge contenuto le virgolette di apertura. |
close-quote | Aggiunge contenuto le virgolette di chiusura. |
no-open-quote | Elimina virgolette di apertura, anche se il livello della loro nidificazione rimane considerato. |
no-close-quote | Elimina la virgoletta di chiusura. |
url() | Aggiunge: contenuti multimediali, come immagini, suoni, video. Come valore di attributo tra le parentesi si indica l'indirizzo della risorsa esterna, che viene inserito nella posizione selezionata del documento.. |
initial | Ritorna il valore della proprietà al valore di default |
inherit | Eredita valore della proprietà dal elemento genitore. |
1.1. Aggiungere caratteri speciali attraverso content.
Happy New Year!
È possibile vivacizzare il testo con l'aggiunta di caratteri speciali. Come valore vediamo di usare caratteri di Unicode o Font Awesome. Ne abbiamo parlato qui.
1.2 Aggiungere testo con la proprieta content
Happy New Year!
1.3 Aggiungere un'immagine come contenuto generato
Happy New Year!
1.4 Aggiungere contenuto Block.
Vediamo subito come funziona pseudo classe:nth-child(). Perché dal codice se sei ai primi passi coi css si capisce pocconient, ma è abbastanza facile il suo funzionamento.
Vediamo il markup del esempio.
Come potresti notare abbiamo creato un box grande con il tag <div></div> e in questo box abbiamo inserito altri 4 box <div></div>!!! proprio quelli che vediamo nelesempio. E qui che entrano in gioco seletori di dicsendenti di CSS e conteggio matematico. La prima scatola è il genitore e con il nostro codice abbiamo detto di scegliere il primo figlio :nth-child(1) e attribuire ad esso rispettive regole di CSS, puoi selezionare il secondo figlio andando in giù e ad esso attribuire stili prescritti tramite pseudo-classe :nth-child(2), puoi scegliere il terzo e attribuirci regole indicati nel pseudo'classe :nth-child(3) e cosi via. Quindi per utilizzare :nth-child() dobbiamo prima prendere in considerazione la struttura di discendenza e puoi con i semplici calcoli capire il numero di ordine fra elementi simili (per esempio fra i div nel nostro caso o potrebbe essere un elemento della lista o una cella nella tabella HTML ) che ha l'elemento che ci interessa e utilizzare questo numero per selezionarlo
1.5. Aggiungere un valore al attributo
Funzione attr () permette di aggiungere qualsiasi valore al attributo, ad esempio, l'indirizzo URL-, che verrà visualizzato durante la stampa di testo.
1.6. Aggiungere virgolette tramite proprieta content
Con valori di open-quote e close-quote, è possibile generare virgolette di apertura e chiusura . L'aspetto delle virgolette si specifica nelle proprietà quotes . Se non viene specificato, verrà utilizzato il valore predefinito del browser in uso .
Ciao mondo!
1.7. Aggiungere contatore d'elemento
Il valore counter consente di numerare qualsiasi elemento blocco su una pagina web. I contatori vengono creati utilizzando css-proprietà counter-reset e counter-increment.
1.7.1. Nome contatore
La proprietà counter-reset assegna un nome ad uno o piu contatori, permettendo di impostare o resettare il valore del contatore a qualsiasi valore. La proprietà è utilizzato soltanto in combinazione con la seconda proprietà - counter-increment. Puo essere assegnato a qualsiasi elemento HTML.
counter-reset | |
---|---|
Valore : | |
none | Valore di default. Contatore non è impostato. |
nome del contatore numero |
Con il nome del contatore vengono selezionate uno o più elementi di cui si desidera modificare il valore del contatore. Il numero indica il conteggio iniziale. Non utilizzare parole chiave come il nome del contatore. Se si desidera impostare la numerazione da uno, è necessario impostarecounter-reset: 0;. Se si desidera impostare la numerazione da 0, è necessario impostare counter-reset: -1;. |
initial | Ritorna il valore della proprietà al valore di default |
inherit | Eredita valore di proprietà dal elemento genitore. |
1.7.2. Incremento del contatore
La proprietà counter-increment assume uno o più valori che determinano i nomi dei contatori che verano incrementati.
counter-increment | |
---|---|
Valore: | |
none | Valore di default. Incremento del contatore assente. |
Nome del contatore numero | Il nome del contatore determina quale contatore vera incrementato. Valore di default 1. Se il numero è negativo, la numerazione degli elementi sarà negativo. Il numero imposta il valore iniziale e incremento, cioè, se si imposta counter-increment: id 2;, allora il primo elemento avra valore 2, secondo 4 e cosi via . Se l'identificatore si riferisce ad un contatore che non è stato inizializzato con counter-reset, allora il valore iniziale sara uguale a 0. |
initial | Ritorna il valore della proprietà al valore di default |
inherit | Valore della proprietà viene ereditato dal elemento genitore.. |
Il valore del content: counter (nome contatore) mostra il valore del contatore come il contenuto di pseudo-elemento.
Vediamo il risultato
Title
Some text
Some text
Some text
Title
Some text
Some text