CSS Tabindex

L'indice d'onglet est défini comme l'index de l'onglet. Nous utilisons le «Tabindex» dans notre code HTML pour spécifier l'ordre de l'onglet d'un objet ou d'un élément. Lorsque nous utilisons cette valeur «tabindex» avec n'importe quel élément, l'élément sera tabable, ce qui signifie que nous pouvons tabuler sur cet élément. Lorsque nous définissons la valeur de ce «Tabindex» en HTML, il navigue en fonction de la valeur tabindex. En appuyant sur la touche Tab, il navigue dans une séquence. Nous utilisons également la valeur négative telle que «-1» avec le «Tabindex», ce qui signifie que cet élément ne sera pas accessible sur la navigation séquentielle sur l'onglet clavier. Lorsque nous appuyons sur la touche Tab, il se déplace par ordre croissant de la valeur «Tabindex».

Dans ce didacticiel, nous vous guiderons sur le fonctionnement de ce «Tabindex» et comment nous pouvons modifier le style de l'élément lorsque nous allons-y. Nous vous présenterons différents exemples dans ce tutoriel. Essayons ces exemples donnés.

Exemple 1:

Dans Visual Studio Code, générez un nouveau fichier. Lorsque ce fichier vierge s'ouvre, vous devez choisir une langue. Nous allons écrire du code html ici. Nous utiliserons la langue HTML. Lorsque nous choisissons cette langue, le fichier créé est un fichier html. Ainsi, nous n'avons pas besoin de spécifier l'extension de fichier lors de l'enregistrement. Après cela, saisissez les balises HTML de base (ou "!«Si vous voulez être plus formel). Si vous tapez "!"Et puis appuyez sur" Entrée ", vous obtiendrez immédiatement toutes les balises fondamentales du HTML.

Maintenant, nous avons un paragraphe dans le corps. Ensuite, nous utilisons «Label» et nous donnons ici la valeur «Tabindex» et la mettons égale à «1». Ensuite, nous créons un «div» et rendons ce tabortir «div» en plaçant le «Tabindex» dans ce «div». Nous créons également un autre «div» sans «tabindex» afin qu'il ne soit pas tabable. Ensuite, nous créons à nouveau une autre «étiquette» avec la valeur «Tabindex» «2». À la fin, nous avons un autre «div» avec la valeur «tabindex» «3», il est également «tabable» en raison de «tabindex».

Maintenant, dans ce fichier CSS, nous allons styliser tous les éléments ci-dessus. Nous allons également styliser les divs dans lesquels nous utilisons le «Tabindex». Ici, nous allons changer leur style lorsque nous allons l'adapter. Tout d'abord, nous allons appliquer un certain style au paragraphe qui apparaîtra en haut de la page. Nous utilisons «italique» pour le «style de police» du paragraphe. Nous définissons «rouge» comme la «couleur» et la «taille de police» ici est «20px». Nous «audacieux» ce paragraphe.

Ensuite, vient «div» et «étiquette». Nous définissons «l'affichage» pour les deux en tant que «bloc» et «l'espacement des lettres» sur «0.5px ”. De plus, le «marge-fond» est «1rem». Maintenant, nous avons «Div: Focus». Ce «focus» est déclenché lorsque nous appuyons sur la touche ou toute touche. Ici, lorsque nous appuyons sur le «div», toutes les propriétés données s'appliqueront aux éléments «div» en onglet. Nous changeons le «poids de police» du «div» en «audacieux» et l'élément div sera «audacieux» lorsque nous allons l'adhérer. De plus, sa «couleur» change en «vert» et la «famille de police» de cette div transforme en police «algérien». Nous avons sélectionné tout cela dans ce code CSS.

Ceci est la sortie du code ci-dessus. Ici, certains éléments sont tabables sur lesquels nous appliquons le «Tabindex». Nous appliquons certaines propriétés lorsque nous «Tabillons» sur les éléments tabable. Nous fournissons également ces captures d'écran ci-dessous dans lesquelles toutes les propriétés sont appliquées sur les éléments «tabable».

Dans la capture d'écran ci-dessous, vous pouvez voir que le style de police et de couleur de l'élément tabable est modifié en raison de l'onglet sur cet élément ici.

Exemple n ° 2:

Ici, nous créons une div et utilisons le «Tabindex» dans cette div. Ensuite, nous avons un paragraphe et utilisons «Tabindex» pour ce paragraphe et la portée avec une autre valeur «Tabindex». Donc, tous seront tabables. Nous changeons également leur style en CSS, donc, que lorsque nous «ongons» sur eux, leurs styles seront modifiés.

Ici, nous modifions le style du texte div lorsque nous «Tabrions» sur cette div. Nous utilisons «Focus» avec le div. Lorsque nous «adoptons» le div, son style change selon ces propriétés que nous allons utiliser ici. Nous avons mis sa «famille de police» à «Algérien» et «rouge» en «couleur». Nous avons également réglé sa «taille de police» sur «23px» et «italique» dans sa propriété «de style police». Nous utilisons également «Focus» avec «P», donc cela fonctionne de la même manière que nous avons discuté ci-dessus. En onglet, il change son style.

Ici, nous définissons la «Font-Family» comme «Times New Roman» et nous utilisons «bleu» comme «couleur» du texte du paragraphe. Nous avons également réglé sa «taille de police» à «20px» et alignant le paragraphe du «centre». Ensuite, nous avons également «Span» et nous utilisons à nouveau «Focus» ici. Pour cette période, nous utilisons «Calibri» comme «Font-Family». La «couleur» est «vert» pour le texte de la portée. La «taille de police» ici est «25px». Maintenant, regardez la sortie et comment elle fonctionne.

La sortie est là ci-dessous qui est avant l'onglet sur les éléments. Tout le texte apparaît comme celui qui est montré dans la capture d'écran. Vous pouvez voir qu'aucune propriété CSS n'est appliquée ici sur tous ces éléments.

Dans cette capture d'écran, vous pouvez remarquer que la première div est modifiée et que les propriétés CSS que nous avons appliquées pour la classe Div sont appliquées car ici nous «nous allons» sur la div.

Ici, nous «Tabillons» sur le paragraphe de cette capture d'écran. Le paragraphe initial a été modifié et les attributs CSS que nous avons mis à la classe de paragraphes lui ont été appliqués.

Dans cette dernière capture d'écran, nous «TAGNER» sur la travée. Les éléments de portée sont modifiés ici et toutes les propriétés que nous avons définies pour la portée sont appliquées ici. Nous pouvons «tabuler» sur tout cela parce que nous utilisons le «Tabindex» pour tous ces éléments.

Exemple # 3:

Dans cet exemple, nous créons un titre, un lien, une div, un paragraphe et une durée. Nous appliquons le «Tabindex» sur tous ces. Ici, vous pouvez remarquer que nous ne donnons pas les valeurs «tabindex» en séquence mais lorsque nous nous tabrions, il se déplace dans une séquence. Nous vous montrerons plus tard dans la sortie, vous comprendrez donc facilement cette séquence «Tabindex».

Pour «H1: Focus», nous utilisons une «taille de police» de «25px» et la «couleur» pour le titre est «violet». Cette rubrique est alignée dans le «centre» sur le tablage et la «Font-Family», nous définissons le Tabbing, «Algerian». Ensuite, nous utilisons «A: Focus», définissez «-Size» pour ceci est «25px», et «Color» est «Maroon». Le poids de la police du lien est «audacieux» et «Times New Roman» est utilisé ici pour la «Font-Family». Nous avons également défini la «taille de police» de la div sur le tablage sur «25px». La «couleur» de la div lorsque nous tabrions est réglée sur «bleu». Utilisez «text-decoration» et définissez-le sur «souligner». Nous alignons également cette div dans le «centre».

Pour le paragraphe, nous mettons «P: Focus». Nous utilisons une «taille de police» de «25px» et une «couleur» de «orange» pour le paragraphe. La propriété «Text-Decoration» est définie comme «anéantie». La «Font-Family» que nous avons spécifiée sur le tablage est «Verdane». Enfin, nous utilisons la «Focus» avec la «mise en page: Focus» et définissons certaines propriétés pour cela. Nous utilisons également la propriété «taille de la police» et sa valeur est «28px». Nous utilisons également la propriété «couleur» et la définissons «vert». Nous utilisons «Double» comme «text-decoration» et «sans-serif» comme «Font-Family». La dernière propriété que nous utilisons est la propriété «de style police» qui est définie comme «italique». Toutes ces propriétés s'appliqueront aux éléments HTML lorsque nous les admirons.

Nous fournissons une vidéo qui montre la sortie de ce code. Dans cette vidéo, vous pouvez voir que lorsque nous taberions, il se déplace en fonction de la valeur «Tabindex». Tout d'abord, il adhère au paragraphe qui est présent dans la quatrième ligne. Ensuite, la div qui est dans le troisième puis le lien qui est présent dans la deuxième ligne, et ainsi de suite. Tout cela est dû aux valeurs «tabindex». Lorsque nous appuyons sur l'onglet, il se déplace dans une séquence. Ou, nous pouvons dire qu'il se déplace dans l'ordre croissant de la valeur «Tabindex». Il applique également des propriétés lorsque l'ID d'élément est onglet.

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/07 / css-tabindex-profile-1-microsoft_-edge-2022-06-15-17-15-19.MP400: 0000: 0000: 09 Utilisez les touches de flèches UP / Down pour augmenter ou diminuer le volume.

Conclusion:

Nous avons présenté ce tutoriel pour expliquer le concept de «Tabindex». Nous avons expliqué ce que «Tabindex» est de savoir comment l'utiliser et comment cela fonctionne en détail. Nous avons également exploré plusieurs exemples et montré également la sortie, vous apprenez donc facilement ce «Tabindex». Nous avons discuté de cela lorsque nous utilisons le «Tabindex» sur n'importe quel élément de HTML. Ensuite, cet élément sera un élément tabable. Nous avons exploré ce concept en profondeur. Nous avons également fourni une vidéo afin que vous puissiez voir comment cela fonctionne. Nous avons appliqué des propriétés dans CSS qui ont été appliquées sur l'onglet.