Nous utilisons la fonction att () pour retirer les données ou la valeur de l'attribut de l'élément que nous avons sélectionné dans CSS. Nous utilisons cette fonction dans notre code CSS. Nous obtiendrons les données souhaitées de l'attribut de l'élément sélectionné lorsque nous utiliserons cette fonction. Lorsque nous définissons toute valeur dans notre code HTML à l'aide de la propriété personnalisée, nous récupérons cette valeur en utilisant la fonction ATR () dans CSS.

Dans ce guide, nous explorerons la fonction att () dans CSS et utiliserons cette fonction pour récupérer la valeur. Nous expliquerons comment utiliser cette fonction dans CSS et comment il renverra la valeur dans la sortie à l'endroit souhaité. Nous ferons quelques exemples ici et rendrons ce concept de fonction ATTR () Clairement pour vous.

Exemple 1
Nous devons avoir un code HTML pour utiliser cette fonction ATR () dans CSS. Nous pouvons utiliser cette fonction att () dans notre code CSS pour récupérer les valeurs utilisées dans HTML. Le logiciel que nous utilisons pour effectuer ces exemples dans ce guide est le code Visual Studio. Nous ouvrons un nouveau fichier dans le code Visual Studio, puis sélectionnons la langue dans le fichier comme HTML. Le fichier créé est le fichier html. Ensuite, nous écrivons le code HTML dans ce fichier. Lorsque nous enregistrons ce fichier après avoir terminé le code, ce fichier est enregistré avec le «.Extension de fichier html ».

Dans le code HTML, nous créons un titre 1 en utilisant le «

". Ensuite, nous utilisons la balise «» où nous créons un «lien» de «Google», puis écrivons le «lien Google» qui s'affiche à l'écran. Ensuite, fermez la balise «». Nous utilisons la fonction att () sur le «HREF» dans CSS, donc le lien apparaîtra avec le texte.

Code CSS:
Ici, nous créons le fichier CSS. Nous pouvons utiliser la fonction att () pour récupérer les données. Nous devons utiliser le «.Extension de fichier CSS lors de l'enregistrement de ce fichier.

Le «H1» représente l'en-tête que nous avons créé dans le fichier HTML. Nous alignons cette rubrique au centre de «l'écran» en utilisant le «Text-Align». Ensuite, nous utilisons la fonction «A: avant», donc lorsque nous utilisons la fonction «att ()», il affichera la valeur souhaitée que nous avons récupérée avant le contenu. Ce «contenu» définit les données que nous avons écrites dans le fichier HTML à l'aide de la propriété personnalisée. Le «ARTR (HREF)» obtient les données du «HREF» qui est le lien. Et le place avant le contenu et placer le «=>» après le «HREF».

Ensuite, nous stylisons le «A» qui est utilisé pour définir le lien hypertexte dans le HTML. Nous définissons le «style de police» sur «italique», donc il rendra à l'écran dans le style «italique». De plus, nous avons réglé la «couleur» sur «bleu». Cette propriété «couleur» définit la couleur de la police. La «taille de police» est définie sur «30px». Nous pouvons obtenir la sortie après avoir lié et enregistré à la fois les codes HTML et CSS en appuyant sur «Alt + B» sur la page HTML.

Sortir:
La sortie du code précédent se reflète dans l'image suivante:

Le lien que nous avons utilisé dans le code HTML s'affiche ici puisque nous avons utilisé le «Attr ()» pour récupérer ce lien. Nous avons utilisé «avant» donc ce lien est affiché avant le contenu. Ici, le contenu est "Google Link". La valeur que nous voulons récupérer est le lien du Google que nous avons enregistré dans le «HREF» dans le code HTML.

Exemple n ° 2
Pour cet exemple, nous utilisons le même fichier HTML. Mais nous allons apporter des modifications dans le code CSS et utiliser à nouveau la fonction «ATR ()» sur le code HTML précédent.

Encore une fois, le titre est aligné dans le «centre». Nous utilisons la fonction «After» avec «A», donc lorsque la fonction «att ()» récupère la valeur, cette valeur s'affiche après le contenu. Ici, nous utilisons le «contenu», puis nous avons une flèche «=>», puis utilisons la fonction «att ()». Lorsque nous obtenons la sortie de cela, vous verrez que le lien apparaît après le contenu. Dans cet exemple, nous utilisons une couleur de police «rouge» avec un «30px» «taille de police».

Sortir:
Cette sortie montre le lien après le contenu. Il affiche d'abord le contenu qui est "Google Link". Ensuite, il affiche le lien de celui-ci, que nous obtenons en utilisant la fonction «affr ()» du CSS.

Exemple n ° 3
Ici, nous créons une liste avec différents noms. Le «OL» est utilisé pour définir la liste ordonnée. Tandis que «li» est utilisé pour représenter l'élément de la liste. Nous créons la liste de quatre noms et récupérons ces noms à l'aide de la fonction «att ()» dans CSS.

Code CSS:
Nous utilisons la couleur «orange» pour le titre et l'alignons dans le «centre». Nous voulons placer les noms après le contenu, nous utilisons donc «après» avec la «liste.li ". Nous utilisons le «contenu» pour afficher le contenu que nous avons écrit dans le code HTML. Nous utilisons également les parenthèses à l'intérieur des parenthèses. Nous utilisons la fonction «attr ()». Nous passons le «nom» comme l'élément de la fonction «Att ()». Lorsque nous obtiendrons la sortie, les noms apparaîtront dans la parenthèse. La couleur de la police de cet ensemble est «bleu» et affiche dans un style italique alors que nous définissons le «style de police» en «italique». Ils utilisent certaines propriétés sur les éléments de la liste qui sont la propriété «taille de police». Nous avons réglé la taille de la police sur «25px». Et utilisez la propriété «Font-Family» qui est définie sur «Times New Roman».

Sortir:
Ici, nous pouvons voir que le contenu est rendu en premier. Ensuite, les noms apparaissent à l'intérieur de la parenthèse après le contenu. Nous obtenons tous les noms en utilisant une seule fonction att () et avons rendu ces noms avec chaque élément de liste après le contenu.

Exemple n ° 4
Nous créons quatre liens dans ce code HTML en utilisant «HREF» et en ayant le contenu pour chaque lien. Maintenant, regardez le code CSS et comment nous récupérons ces liens à l'aide de la fonction "ATR ()".

Code CSS:
Nous stylissons la rubrique en changeant la «couleur» et la «Font-Family» du texte. Nous alignons le texte dans le «centre». Nous utilisons «After» afin que le lien que nous obtenons en utilisant la fonction ATR () soit rendu après le contenu. Nous utilisons la parenthèse donc que lorsque la fonction ATR () récupère le lien, il les affichera à l'intérieur de la parenthèse. Ces liens rendent en couleur «rouge» et dans le style «italique».

Sortir:

Exemple n ° 5
Nous créons une liste de différents fruits et légumes et appliquons la fonction att () sur cette liste. La liste que nous avons créée ici est la liste commandée. Maintenant, vient le code CSS dans lequel nous utilisons la fonction att ().

Code CSS:
Nous utilisons la couleur «verte» pour le titre. La couleur d'arrière-plan de cette rubrique est «aqua». Nous utilisons «après» dont nous avons discuté dans nos codes précédents. Ici, la fonction att () est à nouveau utilisée à l'intérieur de la parenthèse afin que les données récupérées s'affichent dans cette parenthèse. Nous avons réglé sa couleur sur «Oranged» et la taille de la police à «22px». Nous utilisons la couleur d'arrière-plan pour cela et la fixons sur «Jaune».

Sortir:

Conclusion

Dans ce guide, nous avons appris ce qui est ATR () Fonction et pourquoi nous utilisons cette fonction ATR () dans CSS. Nous avons également appris à utiliser cette fonction dans CSS. Nous avons expliqué cette fonction ATR () théoriquement et effectué des exemples où nous avons utilisé cette fonction dans CSS. Nous avons exploré les cinq exemples différents de ce guide et affiché les données ou le lien que nous avons récupérés en utilisant la fonction ATR (), avant et après le contenu. Nous avons expliqué comment cette fonction récupère les données souhaitées de l'élément ou de la valeur sélectionnée et l'affiche dans la sortie.