CSS Tabindex

L'indice della scheda è definito come l'indice della scheda. Utilizziamo il "Tabindex" nel nostro codice HTML per specificare l'ordine della scheda di un oggetto o di un elemento. Quando utilizziamo questo valore "Tabindex" con qualsiasi elemento, l'elemento sarà in grado di scheda, il che significa che possiamo scheda su questo elemento. Quando impostiamo il valore di questo "Tabindex" in HTML, naviga in base al valore di Tabindex. Premendo il tasto Tab, naviga in una sequenza. Usiamo anche il valore negativo come "-1" con il "Tabindex", il che significa che questo elemento non sarà raggiungibile nella navigazione della scheda tastiera sequenziale. Quando premi il tasto Tab, si sposta in ordine crescente del valore "Tabindex".

In questo tutorial, ti guideremo su come funziona questo "tabindex" e su come possiamo cambiare lo stile dell'elemento quando lo schemo. Dimostreremo diversi esempi per te in questo tutorial. Proviamo questi esempi dati.

Esempio 1:

Nel codice Visual Studio, genera un nuovo file. Quando si apre questo file vuoto, è necessario scegliere una lingua. Scriveremo il codice HTML qui. Useremo la lingua HTML. Quando scegliamo questa lingua, il file creato è un file HTML. Pertanto, non abbiamo bisogno di specificare l'estensione del file quando la salvi. Successivamente, digita i tag HTML di base (o "!"Se vuoi essere più formale). Se digiti "!"E poi premi" Enter ", otterrai immediatamente tutti i tag fondamentali dell'HTML.

Ora abbiamo un paragrafo nel corpo. Quindi, stiamo usando "etichetta" e qui stiamo dando il valore "Tabindex" e mettendolo uguale a "1". Quindi, creiamo un "Div" e rendiamo questo "Div" in grado di posizionare il "Tabindex" in questo "Div". Creiamo anche un altro "div" senza "tabindex", quindi non sarà in grado. Quindi, creiamo di nuovo un'altra "etichetta" con valore "tabindex" "2". Alla fine, abbiamo un altro "Div" con il valore "Tabindex" "3", è anche "Tab-Able" a causa di "Tabindex".

Ora, in questo file CSS, modelleremo tutti gli elementi di cui sopra. Stuperemo anche quei div in cui usiamo il "Tabindex". Qui, cambieremo lo stile di loro quando lo seguiremo. Innanzitutto, applicheremo un po 'di stile al paragrafo che apparirà nella parte superiore della pagina. Usiamo "corsivo" per lo "stile dei caratteri" del paragrafo. Impostamo "rosso" come "colore" e "dimensione del carattere" qui è "20px". Abbiamo anche "audace" questo paragrafo.

Quindi, arriva "div" ed "etichetta". Abbiamo impostato il "display" sia come "blocco" che per "spaziatura delle lettere" su "0.5px ". Inoltre, il "margine-bottom" è "1rem". Ora abbiamo "Div: Focus". Questo "focus" viene attivato quando premi il tasto TAB o qualsiasi tasto. Qui, quando premiamo sul "Div", tutte le proprietà fornite si applicheranno agli elementi "Div" sulla scheda. Cambiamo il "carattere di carattere" del "div" in "grassetto" e l'elemento Div sarà "audace" quando lo schemo. Inoltre, il suo "colore" cambia in "verde" e il "font-family" di questo Div cambia in carattere "algerino". Abbiamo selezionato tutti questi in questo codice CSS.

Questo è l'output del codice sopra. Qui, alcuni elementi sono in grado di applicare il "Tabindex". Applichiamo alcune proprietà quando "scheda" sugli elementi di scheda. Forniamo anche quegli screenshot di seguito in cui tutte le proprietà sono applicate sugli elementi "Tab-Able".

Nello screenshot seguente, puoi vedere che lo stile del carattere e del colore dell'elemento scheda viene modificato a causa della "scheda" su questo elemento qui.

Esempio n. 2:

Qui, stiamo creando un div e usando il "tabindex" in questo div. Quindi, abbiamo un paragrafo e usiamo "Tabindex" per questo paragrafo e l'intervallo con un altro valore "Tabindex". Quindi, tutti saranno in grado. Cambiamo anche il loro stile in CSS, quindi, quando "schediamo" su di loro, i loro stili saranno cambiati.

Qui, stiamo cambiando lo stile del testo div quando "tab" su questo div. Usiamo "Focus" con il div. Quando "scheda" sul div, il suo stile cambia in base a queste proprietà che utilizzeremo qui. Abbiamo impostato la sua "famiglia di carattere" su "algerina" e "rosso" in "colore". Abbiamo anche impostato la sua "dimensione del carattere" su "23px" e "corsivo" nella sua proprietà "in stile font". Usiamo anche "Focus" con "P", quindi funziona come abbiamo discusso sopra. Durante la tavola, cambia il suo stile.

Qui, abbiamo impostato la "famiglia di carattere" come "Times New Roman" e usiamo "Blue" come "colore" del testo del paragrafo. Abbiamo anche impostato la sua "dimensione del carattere" su "20px" e allineare il paragrafo nel "centro". Quindi, abbiamo anche "intervallo" e usiamo di nuovo "Focus" qui. Per questa durata, usiamo "Calibri" come "Font-Family". Il "colore" è "verde" per il testo. La "dimensione del carattere" qui è "25px". Ora guarda l'output e come funziona.

L'output è qui sotto che è prima di tagliare su elementi. Tutto il testo appare così che viene mostrato nello screenshot. Puoi vedere che nessuna proprietà CSS viene applicata qui su tutti questi elementi.

In questo screenshot, puoi notare che il primo Div viene modificato e le proprietà CSS che abbiamo applicato per la classe Div sono applicate perché qui "Tab" sul Div.

Qui, "scheda" nel paragrafo in questo screenshot. Il paragrafo iniziale è stato modificato e gli attributi CSS che abbiamo impostato sulla classe del paragrafo sono stati applicati ad esso.

In quest'ultimo screenshot, "scheda" sulla campata. Gli elementi di span vengono modificati qui e tutte le proprietà che abbiamo impostato per l'intervallo sono applicate qui. Possiamo "tab" su tutti questi perché utilizziamo il "tabindex" per tutti questi elementi.

Esempio # 3:

In questo esempio, stiamo creando un'intestazione, un link, un div, un paragrafo e un intervallo. Applichiamo il "tabindex" su tutti questi. Qui, puoi notare che non diamo i valori "Tabindex" in sequenza ma quando lo facciamo, si muove in una sequenza. Ti mostreremo più avanti nell'output, quindi capirai facilmente questa sequenza "Tabindex".

Per "H1: Focus", usiamo una "dimensione del carattere" di "25px" e il "colore" per l'intestazione è "viola". Questa intestazione è allineata nel "Centro" su Tabbing e "Font-Family" abbiamo impostato la tavola, "Algerian". Quindi, usiamo "A: Focus", impostiamo "Font-Size" per questo è "25px" e "Color" è "Marone". Il peso del carattere del link è "audace" e "Times New Roman" viene usato qui per la "famiglia di font". Abbiamo anche impostato la "dimensione del carattere" del div su scheda su "25px". Il "colore" del div quando lo schemola è impostato su "blu". Usa "delerazione del testo" e impostalo su "sottolineare". Allineiamo anche questo div nel "centro".

Per il paragrafo, mettiamo "P: Focus". Utilizziamo una "dimensione del carattere" di "25px" e un "colore" di "arancione" per il paragrafo. La proprietà "Decorazione del testo" è impostata come "tratteggiata". La "famiglia del carattere" che abbiamo specificato su Tabbing è "Verdane". Infine, utilizziamo la "messa a fuoco" con lo span "Span: Focus" e impostiamo alcune proprietà per questo. Stiamo utilizzando la proprietà "Size" anche per questo intervallo e il suo valore è "28px". Utilizziamo anche la proprietà "Color" e la impostiamo "verde". Usiamo "Double" come "delerazione del testo" e "sans-serif" come "Font-Family". L'ultima proprietà che stiamo utilizzando è la proprietà "in stile carattere" che è impostata come "corsivo". Tutte queste proprietà si applicheranno agli elementi HTML quando ne facciamo una scheda su.

Stiamo fornendo un video che mostra l'output di questo codice. In questo video, puoi vedere che quando noi scheda si muove in base al valore "Tabindex". Innanzitutto, schede il paragrafo che è presente nella quarta riga. Quindi, il Div che è nel terzo e poi il collegamento che è presente nella seconda riga e così via. Questo è tutto a causa dei valori "tabindex". Quando premiamo la scheda, si muove in una sequenza. Oppure, possiamo dire che si muove in ordine crescente del valore "tabindex". Applica anche le proprietà quando l'ID elemento è a schede.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/07/CSS-Tabindex-Profile-1-Microsoft_-EDGE-2022-06-15-17-15-19.MP400: 0000: 0000: 09 USA UP/DOWN CARME CHEY per aumentare o ridurre il volume.

Conclusione:

Abbiamo presentato questo tutorial per spiegare il concetto di "Tabindex". Abbiamo spiegato ciò che "Tabindex" è come usarlo e come funziona in dettaglio. Abbiamo anche esplorato più esempi e mostrato anche l'output, quindi imparerai facilmente su questo "Tabindex". Abbiamo discusso che quando usiamo il "Tabindex" su qualsiasi elemento in HTML. Quindi, questo elemento sarà un elemento di scheda. Abbiamo esplorato questo concetto in profondità. Abbiamo anche fornito un video in modo da poter vedere come funziona. Abbiamo applicato proprietà in CSS che sono state applicate alla scheda.