CSS tabindex

Faneindeksen er definert som indeksen for fanen. Vi bruker "tabindex" i HTML -koden vår for å spesifisere fanen for et objekt eller et element. Når vi bruker denne "tabindex" -verdien med et hvilket som helst element, vil elementet være fane-stand, noe som betyr at vi kan felle på dette elementet. Når vi setter verdien av denne "tabindex" i HTML, navigerer den i henhold til tabindex -verdien. Når du trykker på fanen -tasten, navigerer den i en sekvens. Vi bruker også den negative verdien som "-1" med "tabindex", noe som betyr at dette elementet ikke vil kunne nås på sekvensielt tastaturfanen-navigasjon. Når vi trykker på fanen -tasten, beveger den seg i stigende rekkefølge av "tabindex" -verdien.

I denne opplæringen vil vi veilede deg om hvordan denne "tabindex" fungerer og hvordan vi kan endre stilen til elementet når vi kommer på det. Vi vil demonstrere forskjellige eksempler for deg i denne opplæringen. La oss prøve disse gitte eksemplene.

Eksempel nr. 1:

I Visual Studio Code, generer en ny fil. Når denne blanke filen åpnes, må du velge et språk. Vi skriver HTML -kode her. Vi bruker HTML -språket. Når vi velger dette språket, er filen som opprettes en HTML -fil. Dermed trenger vi ikke å spesifisere filtypen når vi lagrer den. Skriv etter de grunnleggende HTML -tagger (eller “!”Hvis du vil være mer formell). Hvis du skriver "!”Og så treff“ Enter ”, får du alle HTMLs grunnleggende tagger umiddelbart.

Nå har vi et avsnitt i kroppen. Deretter bruker vi "etikett" og her gir vi "tabindex" -verdien og setter den lik "1". Deretter lager vi en "div" og gjør denne "div" -fanen ved å plassere "tabindex" i denne "div". Vi lager også en annen "div" uten "tabindex", så det vil ikke være tab-stand. Deretter lager vi igjen en "etikett" med "tabindex" -verdien "2". På slutten har vi en annen "div" med "tabindex" -verdien "3", den er også "tab-stand" på grunn av "tabindex".

Nå, i denne CSS -filen, skal vi style alle de ovennevnte elementene. Vi vil også style de divene der vi bruker "tabindex". Her vil vi endre stilen til dem når vi kommer på den. Først skal vi bruke en viss stil på avsnittet som vises øverst på siden. Vi bruker "kursiv" for "font-stil" av avsnittet. Vi satte "rødt" som "farge" og "fontstørrelse" her er "20px". Vi "dristige" dette avsnittet.

Deretter kommer “Div” og “Label”. Vi setter "displayet" for både som "blokk" og "bokstavavgang" til "0.5px ”. Også "marginbottom" er "1REM". Nå har vi “Div: Focus”. Dette "fokuset" utløses når vi trykker på fanen -tasten eller en hvilken som helst tast. Her, når vi trykker på "div", vil alle de gitte egenskapene gjelde for "div" -elementene på tabbing. Vi endrer "fontvekt" av "div" til "fet" og divelementet vil være "fet" når vi kommer på det. Også den "fargen" endres til "grønn" og "font-familiens" av denne diven endres til "algerisk" font. Vi har valgt alle disse i denne CSS -koden.

Dette er utdataene fra ovennevnte kode. Her er noen elementer fane-stand som vi bruker "tabindex". Vi bruker noen egenskaper når vi "faner" på fanen til fane-stand. Vi gir også disse skjermbildene nedenfor der alle egenskaper blir brukt på "Tab-stand" -elementene.

I skjermbildet nedenfor kan du se at stilen til font og farge på fanen til fane er endret på grunn av "Tab" på dette elementet her.

Eksempel 2:

Her lager vi en div og bruker "tabindex" i denne diven. Deretter har vi et avsnitt og bruker "tabindex" for dette avsnittet og spennet med en annen "tabindex" -verdi. Så alle av dem vil være tab-stand. Vi endrer også stilen deres i CSS, at når vi "kommer" på dem, vil stilene deres bli endret.

Her endrer vi stilen til Div -teksten når vi "faner" på denne diven. Vi bruker "fokus" med div. Når vi "faner" på diven, endres stilen i henhold til disse egenskapene som vi skal bruke her. Vi satte "font-familiens" til "algerisk" og "rød" i "farge". Vi setter også dens "fontstørrelse" til "23px" og "kursiv" i egenskapen "Font-stil". Vi bruker også "fokus" med "P", så det fungerer det samme som vi har diskutert ovenfor. På tabbing endrer det stilen.

Her setter vi "font-family" som "Times New Roman" og vi bruker "blå" som "fargen" på avsnittets tekst. Vi setter også "fontstørrelse" til "20px" og justerer avsnittet i "senteret". Deretter har vi også "spenn" og vi bruker igjen "fokus" her. For dette spennet bruker vi “Calibri” som “Font-Family”. "Fargen" er "grønn" for spennteksten. "Font-size" her er "25px". Se nå på utgangen, og hvordan det fungerer.

Utgangen er her nedenfor som er før du tabrer på elementer. All teksten ser ut som denne som vises på skjermbildet. Du kan se at ingen CSS -egenskaper blir brukt her på alle disse elementene.

I dette skjermbildet kan du legge merke til at den første diven blir endret og CSS -egenskapene som vi har søkt om DIV -klassen blir brukt fordi her "Tab" på Div.

Her “Tab” på avsnittet i dette skjermbildet. Det første avsnittet er endret, og CSS -attributtene som vi satte til avsnittsklassen har blitt brukt på den.

I dette siste skjermbildet "Tab" i spennet. Spanelementene endres her, og alle egenskaper vi har satt for spennet blir brukt her. Vi kan "tab" på alle disse fordi vi bruker "tabindex" for alle disse elementene.

Eksempel nr. 3:

I dette eksemplet lager vi en overskrift, en lenke, en div, et avsnitt og et spenn. Vi bruker "tabindex" på alle disse. Her kan du legge merke til at vi ikke gir "tabindex" -verdiene i rekkefølge, men når vi kommer på den, beveger den seg i en sekvens. Vi vil vise deg senere i utdataene, så du vil enkelt forstå denne "tabindex" -sekvensen.

For “H1: Focus” bruker vi en "fontstørrelse" av "25px" og "fargen" for overskriften er "lilla". Denne overskriften er på linje i "senteret" på tabbing og "font-family" vi setter tabbingen, "algerisk". Deretter bruker vi "A: Focus", sett "Font-size" for dette er "25px", og "Color" er "Maroon". Vekten på lenkenes skrift er "fet" og "Times New Roman" brukes her til "font-familiens". Vi setter også "fontstørrelsen" av Div på tabbing til "25px". "Fargen" på diven når vi faner på den er satt til "Blå". Bruk "tekstdekorasjon" og sett den til "understreker". Vi justerer også denne diven i "senteret".

For avsnittet legger vi “P: Focus”. Vi bruker en "fontstørrelse" av "25px" og en "farge" av "oransje" for avsnittet. Egenskapen "tekstdekorasjon" er satt som "stiplet". "Font-Family" vi spesifiserte på tabbing er "Verdane". Til slutt bruker vi "fokuset" med spennet "Span: Focus" og setter noen egenskaper for dette. Vi bruker egenskapen "Font-size" også for dette spennet, og verdien er "28px". Vi bruker også "farge" -egenskapen og setter den "grønn". Vi bruker "dobbelt" som "tekstdekorasjon" og "sans-serif" som "font-family". Den siste egenskapen vi bruker er "Font-stil" -egenskapen som er satt som "kursiv". Alle disse egenskapene vil gjelde for HTML -elementene når vi kommer på dem.

Vi leverer en video som viser utdataene fra denne koden. I denne videoen kan du se at når vi kommer, beveger den seg i henhold til "tabindex" -verdien. Først tapper det avsnittet som er til stede i fjerde linje. Deretter er diven som er i den tredje og deretter lenken som er til stede i den andre linjen, og så videre. Dette er alt på grunn av "tabindex" -verdiene. Når vi trykker på fanen, beveger den seg i en sekvens. Eller vi kan si at den beveger seg i stigende rekkefølge av "tabindex" -verdien. Den bruker også egenskaper når element -IDen er tabbet.

Videospillerhttps: // linuxhint.COM/WP-Content/Uploads/2022/07/CSS-Tabindex-Profile-1-Microsoft_-Edge-2022-06-15-17-15-19.MP400: 0000: 0000: 09 Bruk opp/ned piltastene for å øke eller redusere volumet.

Konklusjon:

Vi har presentert denne opplæringen for å forklare konseptet “tabindex”. Vi har forklart hva "tabindex" er hvordan du bruker det og hvordan det fungerer i detalj. Vi undersøkte også flere eksempler og viste produksjonen også, slik at du lett lærer om denne "tabindex". Vi har diskutert at når vi bruker "tabindex" på et hvilket som helst element i HTML. Da vil dette elementet være et fane-godt element. Vi har utforsket dette konseptet i dybden. Vi ga også en video slik at du kan se hvordan den fungerer. Vi har brukt egenskaper i CSS som ble brukt på tabbing.