Usiamo la funzione ATT () per ritirare i dati o il valore dell'attributo dell'elemento che abbiamo selezionato in CSS. Usiamo questa funzione nel nostro codice CSS. Otterremo i dati desiderati sull'attributo dell'elemento selezionato quando utilizziamo questa funzione. Quando definiamo qualsiasi valore nel nostro codice HTML utilizzando la proprietà personalizzata, recuperiamo questo valore utilizzando la funzione ATT () in CSS.

In questa guida, esploreremo la funzione ATT () in CSS e utilizzeremo questa funzione per recuperare il valore. Spiegheremo come utilizzare questa funzione in CSS e come restituirà il valore nell'output nel luogo desiderato. Faremo alcuni esempi qui e chiariremo questo concetto di funzione att () per te.

Esempio 1
Dobbiamo avere un codice HTML per utilizzare questa funzione ATT () in CSS. Possiamo usare questa funzione ATT () nel nostro codice CSS per recuperare i valori utilizzati in HTML. Il software che utilizziamo per eseguire questi esempi in questa guida è il codice Visual Studio. Apriamo un nuovo file nel codice Visual Studio e quindi selezioniamo la lingua nel file come HTML. Il file creato è il file HTML. Quindi, scriviamo il codice HTML in questo file. Quando salviamo questo file dopo aver completato il codice, questo file viene salvato con ".estensione del file html ".

Nel codice HTML, creiamo un intestazione 1 usando il "

". Quindi utilizziamo il tag "" in cui creiamo un "link" di "Google" e quindi scriviamo il "link Google" che viene visualizzato sullo schermo. Quindi, chiudi il tag "". Usiamo la funzione ATTR () su "HREF" in CSS, quindi il collegamento apparirà con il testo.

Codice CSS:
Qui, creiamo il file CSS. Possiamo usare la funzione ATTR () per recuperare i dati. Dobbiamo usare il “.Estensione del file CSS ”Quando si salva questo file.

"H1" rappresenta l'intestazione che abbiamo creato nel file HTML. Allineiamo questo intestazione al centro dello "schermo" usando il "allineamento del testo". Quindi, utilizziamo la funzione "A: prima", quindi quando usiamo la funzione "attr ()", visualizzerà il valore desiderato che abbiamo recuperato prima del contenuto. Questo "contenuto" definisce i dati che abbiamo scritto nel file HTML utilizzando la proprietà personalizzata. Il "attr (href)" ottiene i dati di "href" che è il collegamento. E lo posiziona prima del contenuto e posiziona il "=>" dopo "Href".

Quindi, modelliamo la "A" che viene utilizzata per definire il collegamento ipertestuale nell'HTML. Abbiamo impostato lo "stile dei caratteri" su "corsivo", quindi renderà sullo schermo in stile "corsivo". Inoltre, abbiamo impostato il "colore" su "blu". Questa proprietà "colore" definisce il colore del carattere. La "dimensione del carattere" è impostata su "30px". Possiamo ottenere l'output dopo aver collegato e salvato entrambi i codici HTML e CSS premendo "Alt+B" sulla pagina HTML.

Produzione:
L'output del codice precedente si riflette nella seguente immagine:

Il link che abbiamo usato nel codice HTML viene visualizzato qui poiché abbiamo usato il "attr ()" per recuperare questo link. Abbiamo usato "prima" quindi questo collegamento viene visualizzato prima del contenuto. Qui, il contenuto è "Google Link". Il valore che vogliamo recuperare è il collegamento di Google che abbiamo salvato nel "HREF" nel codice HTML.

Esempio n. 2
Per questo esempio, utilizziamo lo stesso file HTML. Ma faremo alcune modifiche al codice CSS e useremo nuovamente la funzione "ATTR ()" sul codice HTML precedente.

Ancora una volta, l'intestazione è allineata nel "centro". Usiamo la "After" con "A", quindi quando la funzione "Attr ()" recupera il valore, questo valore verrà visualizzato dopo il contenuto. Qui, usiamo il "contenuto" quindi abbiamo una freccia "=>" e quindi utilizziamo la funzione "attr ()". Quando otteniamo l'output di questo, vedrai che il link appare dopo il contenuto. In questo esempio, utilizziamo un colore "rosso" con un "30px" di "dimensione del carattere".

Produzione:
Questo output mostra il collegamento dopo il contenuto. Visualizza innanzitutto il contenuto che è "Google Link". Quindi visualizza il collegamento di esso, che otteniamo usando la funzione "Affr ()" del CSS.

Esempio n. 3
Qui, creiamo un elenco con nomi diversi. Il "OL" viene utilizzato per definire l'elenco ordinato. Mentre "li" viene utilizzato per rappresentare l'elemento nell'elenco. Creiamo l'elenco di quattro nomi e recuperiamo questi nomi usando la funzione "attr ()" in CSS.

Codice CSS:
Usiamo il colore "arancione" per l'intestazione e lo allineiamo nel "centro". Vogliamo posizionare i nomi dopo il contenuto, quindi usiamo "dopo" con "elenco.li ". Utilizziamo il "contenuto" per visualizzare il contenuto che abbiamo scritto nel codice HTML. Usiamo anche la parentesi all'interno delle parentesi. Usiamo la funzione "attr ()". Passiamo il "nome" come elemento nella funzione "attr ()". Quando otteniamo l'output, i nomi appariranno nella parentesi. Il colore del carattere di questo set è "blu" e display in stile corsivo mentre impostiamo lo "stile del carattere" su "corsivo". Usano alcune proprietà negli elementi dell'elenco che è la proprietà "Size Font". Abbiamo impostato la dimensione del carattere su "25px". E usa la proprietà "Font-Family" che è impostata su "Times New Roman".

Produzione:
Qui, possiamo vedere che il contenuto è reso per primo. Quindi i nomi compaiono all'interno della parentesi dopo il contenuto. Riceviamo tutti i nomi utilizzando una sola funzione ATT () e renderiamo questi nomi con ogni elemento dell'elenco dopo il contenuto.

Esempio #4
Creiamo quattro collegamenti in questo codice HTML utilizzando "HREF" e avendo il contenuto per ogni collegamento. Ora, guarda il codice CSS e il modo in cui recuperiamo questi collegamenti usando la funzione "attr ()".

Codice CSS:
Accogliamo l'intestazione cambiando il "colore" e "caramella familiare" del testo. Allineiamo il testo nel "centro". Usiamo "After" in modo che il link che otteniamo utilizzando la funzione ATTR () sia reso dopo il contenuto. Usiamo la parentesi, quindi quando la funzione attr () recupera il collegamento, li mostrerà all'interno della parentesi. Questi collegamenti rendono il colore "rosso" e in stile "corsivo".

Produzione:

Esempio #5
Creiamo un elenco di frutta e verdura diverse e applichiamo la funzione ATT () in questo elenco. L'elenco che abbiamo creato qui è l'elenco ordinato. Ora arriva il codice CSS in cui usiamo la funzione ATTR ().

Codice CSS:
Usiamo il colore "verde" per l'intestazione. Il colore di sfondo per questa intestazione è "Aqua". Usiamo "After" di cui abbiamo discusso nei nostri codici precedenti. Qui, la funzione ATTR () viene nuovamente utilizzata all'interno della parentesi in modo che i dati recuperati verranno visualizzati in questa parentesi. Abbiamo impostato il suo colore su "aranciato" e la dimensione del carattere su "22px". Usiamo il colore di sfondo per questo e lo impostiamo su "giallo".

Produzione:

Conclusione

In questa guida, abbiamo imparato qual è la funzione att () e perché usiamo questa funzione attr () in CSS. Abbiamo anche imparato a usare questa funzione in CSS. Abbiamo spiegato teoricamente questa funzione att () ed eseguito esempi in cui abbiamo usato questa funzione in CSS. Abbiamo esplorato i cinque diversi esempi in questa guida e visualizzato i dati o il collegamento che abbiamo recuperato utilizzando la funzione ATT () prima e dopo il contenuto. Abbiamo spiegato come questa funzione recupera i dati desiderati dell'elemento o del valore selezionato e lo visualizza nell'output.