CSS Tabindex

El índice de pestaña se define como el índice de la pestaña. Usamos el "Tabindex" en nuestro código HTML para especificar el orden de pestañas de un objeto o elemento. Cuando usamos este valor de "tabindex" con cualquier elemento, el elemento será pestaña, lo que significa que podemos picar en este elemento. Cuando establecemos el valor de este "tabindex" en HTML, navega de acuerdo con el valor de tabindex. Al presionar la tecla Tab, navega en una secuencia. También usamos el valor negativo, como "-1" con el "Tabindex", lo que significa que este elemento no será accesible en la navegación de pestañas de teclado secuencial. Cuando presionamos la tecla Tab, se mueve en orden ascendente del valor "Tabindex".

En este tutorial, lo guiaremos sobre cómo funciona este "Tabindex" y cómo podemos cambiar el estilo del elemento cuando puse en él. Demostraremos diferentes ejemplos para usted en este tutorial. Probemos estos ejemplos dados.

Ejemplo 1:

En el código de Visual Studio, genere un nuevo archivo. Cuando se abre este archivo en blanco, debe elegir un idioma. Escribiremos el código HTML aquí. Usaremos el lenguaje HTML. Cuando elegimos este idioma, el archivo que se crea es un archivo HTML. Por lo tanto, no necesitamos especificar la extensión del archivo al guardarla. Después de eso, escriba las etiquetas HTML básicas (o "!"Si quieres ser más formal). Si escribe "!"Y luego presione" Enter ", obtendrá todas las etiquetas fundamentales de HTML inmediatamente.

Ahora tenemos un párrafo en el cuerpo. Luego, estamos usando "etiqueta" y aquí estamos dando el valor "tabindex" y lo ponemos igual a "1". Luego, creamos un "div" y hacemos esta pestaña "div" colocando el "tabindex" en este "div". También creamos otro "div" sin "tabindex", por lo que no se puede ver con pestañas. Luego, nuevamente creamos otra "etiqueta" con el valor "Tabindex" "2". Al final, tenemos otro "Div" con el valor "Tabindex" "3", también es "TAB-Cable" debido a "TabIndex".

Ahora, en este archivo CSS, vamos a diseñar todos los elementos anteriores. También peinaremos esos divs en los que usamos el "Tabindex". Aquí, cambiaremos el estilo de ellos cuando lo pusamos. Primero, vamos a aplicar algo de estilo al párrafo que aparecerá en la parte superior de la página. Usamos "cursiva" para el "estilo de fuente" del párrafo. Establecimos "rojo" como el "color" y el "tamaño de fuente" aquí es "20px". También "en negrita" este párrafo.

Entonces, viene "div" y "etiqueta". Establecimos la "pantalla" para tanto como "bloque" como el "espacio-espacio" en "0.5px ". Además, el "fondo margen" es "1rem". Ahora tenemos "Div: Focus". Este "enfoque" se activa cuando presionamos la tecla Tab o cualquier tecla. Aquí, cuando presionamos el "Div", todas las propiedades dadas se aplicarán a los elementos "Div" en Tabbing. Cambiamos el "peso de fuentes" del "div" a "en negrita" y el elemento div será "audaz" cuando puse en él. Además, su "color" cambia a "verde" y la "familia de fuentes" de este DIV cambia a la fuente "argelina". Hemos seleccionado todo esto en este código CSS.

Esta es la salida del código anterior. Aquí, algunos elementos se pueden contener en el que aplicamos el "Tabindex". Aplicamos algunas propiedades cuando "pestañamos" en los elementos de pestaña. También proporcionamos esas capturas de pantalla a continuación en las que se aplican todas las propiedades en los elementos "pestañas".

En la siguiente captura de pantalla, puede ver que el estilo de fuente y color del elemento de pestaña se cambia debido a la "pestaña" en este elemento aquí.

Ejemplo # 2:

Aquí, estamos creando un div y usando el "tabindex" en este div. Luego, tenemos un párrafo y usamos "Tabindex" para este párrafo y el tramo con otro valor "Tabindex". Entonces, todos ellos serán con tabla. También cambiamos su estilo en CSS, por lo que cuando "pilamos" en ellos, sus estilos se cambiarán.

Aquí, estamos cambiando el estilo del texto Div cuando "pilamos" en este div. Usamos "enfoque" con el div. Cuando "pilamos" en el DIV, su estilo cambia de acuerdo con estas propiedades que vamos a utilizar aquí. Establecimos su "Fuente-Familia" en "Argelino" y "Rojo" en "Color". También establecemos su "tamaño de fuente" en "23px" y "cursiva" en su propiedad "estilo fuente". También usamos "Focus" con "P", por lo que funciona igual que hemos discutido anteriormente. Al tabular, cambia su estilo.

Aquí, establecemos la "familia de fuentes" como "Times New Roman" y usamos "azul" como el "color" del texto del párrafo. También establecemos su "tamaño de fuente" en "20px" y alineamos el párrafo en el "centro". Entonces, también tenemos "span" y nuevamente usamos "enfoque" aquí. Para este lapso, usamos "Calibri" como "Font-Family". El "color" es "verde" para el texto del tramo. El "tamaño de fuente" aquí es "25px". Ahora, mire la salida y cómo funciona.

La salida está aquí a continuación, que está antes de tabular los elementos. Todo el texto aparece así que se muestra en la captura de pantalla. Puede ver que no se aplica ninguna propiedad CSS en todos estos elementos.

En esta captura de pantalla, puede notar que se cambia el primer DIV y las propiedades CSS que hemos aplicado para la clase DIV se aplican porque aquí "pilamos" en el DIV.

Aquí, "pestaña" en el párrafo de esta captura de pantalla. El párrafo inicial ha sido alterado y los atributos CSS que establecemos en la clase de párrafo se han aplicado a él.

En esta última captura de pantalla, "pestañamos" en el lapso. Los elementos del tramo se cambian aquí y todas las propiedades que hemos establecido para el tramo se aplican aquí. Podemos "tabular" en todo esto porque usamos el "tabindex" para todos estos elementos.

Ejemplo # 3:

En este ejemplo, estamos creando un encabezado, un enlace, un div, un párrafo y un tramo. Aplicamos el "tabindex" en todos estos. Aquí, puede notar que no damos los valores de "tabindex" en secuencia, pero cuando puse sobre ella, se mueve en una secuencia. Le mostraremos más adelante en la salida, por lo que comprenderá fácilmente esta secuencia "Tabindex".

Para "H1: Focus", usamos un "tamaño de fuente" de "25px" y el "color" para el encabezado es "púrpura". Este encabezado está alineado en el "centro" en las pestañas y la "familia de fuentes", establecemos las pestañas, "argelina". Luego, usamos "A: Focus", Establecer "tamaño de fuente" para esto es "25px", y "color" es "granate". El peso de la fuente del enlace es "audaz" y "Times New Roman" se usa aquí para la "familia de fuentes". También establecemos el "tamaño de fuente" del DIV en Tabbing a "25px". El "color" del DIV cuando lo puse está configurado como "Azul". Use "Decoración de texto" y configúrelo en "Subrayar". También alineamos este div en el "centro".

Para el párrafo, ponemos "P: Focus". Utilizamos un "tamaño de fuente" de "25px" y un "color" de "naranja" para el párrafo. La propiedad de "Decoración de texto" se establece como "Dunta". La "familia de fuentes" que especificamos en las pestañas es "Verdane". Finalmente, usamos el "enfoque" con el span "span: enfoque" y establecemos algunas propiedades para esto. Estamos utilizando la propiedad "del tamaño de una fuente" también para este tramo y su valor es "28px". También utilizamos la propiedad de "color" y la establecemos "verde". Usamos "Doble" como "Decoración de texto" y "Sans-Serif" como su "Familia de fuentes". La última propiedad que estamos utilizando es la propiedad "estilo fuente" que se establece como "cursiva". Todas estas propiedades se aplicarán a los elementos HTML cuando las pisoteemos.

Estamos proporcionando un video que muestra la salida de este código. En este video, puede ver que cuando puse, se mueve de acuerdo con el valor "Tabindex". Primero, pica el párrafo que está presente en la cuarta línea. Luego, el div que está en el tercero y luego el enlace que está presente en la segunda línea, y así sucesivamente. Todo esto se debe a los valores de "tabindex". Cuando presionamos la pestaña, se mueve en una secuencia. O podemos decir que se mueve en orden ascendente del valor "tabindex". También aplica propiedades cuando el ID de elemento está pestionado.

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 Utilice las teclas de flecha hacia arriba/hacia abajo para aumentar o disminuir el volumen.

Conclusión:

Hemos presentado este tutorial para explicar el concepto de "tabindex". Hemos explicado qué "tabindex" es cómo usarlo y cómo funciona en detalle. También exploramos múltiples ejemplos y también mostramos la salida, por lo que aprenderá fácilmente sobre este "tabindex". Hemos discutido que cuando usamos el "Tabindex" en cualquier elemento en HTML. Entonces, este elemento será un elemento de pestaña. Hemos explorado este concepto en profundidad. También proporcionamos un video para que pueda ver cómo funciona. Hemos aplicado propiedades en CSS que se aplicaron en las pestañas.