CSS Tabindex

O índice de guias é definido como o índice da guia. Usamos o "tabindex" em nosso código HTML para especificar a ordem da guia de um objeto ou elemento. Quando usamos esse valor "Tabindex" com qualquer elemento, o elemento será de guia, o que significa que podemos guardar esse elemento. Quando definimos o valor deste "tabindex" em HTML, ele navega de acordo com o valor do Tabindex. Ao pressionar a tecla TAB, ele navega em uma sequência. Também usamos o valor negativo, como "-1" com o "Tabindex", o que significa que esse elemento não será alcançado na navegação seqüencial do teclado do teclado. Quando pressionamos a tecla TAB, ela se move em ordem crescente do valor "Tabindex".

Neste tutorial, vamos guiá -lo sobre como esse "tabindex" funciona e como podemos mudar o estilo do elemento quando abaixarmos. Vamos demonstrar exemplos diferentes para você neste tutorial. Vamos tentar esses exemplos dados.

Exemplo 1:

No código do Visual Studio, gerar um novo arquivo. Quando este arquivo em branco é aberto, você deve escolher um idioma. Estaremos escrevendo o código HTML aqui. Usaremos a linguagem HTML. Quando escolhemos esse idioma, o arquivo criado é um arquivo html. Assim, não precisamos especificar a extensão do arquivo ao salvá -lo. Depois disso, digite as tags HTML básicas (ou “!”Se você quer ser mais formal). Se você digitar “!”E depois acertar“ Enter ”, você receberá todas as tags fundamentais do HTML imediatamente.

Agora, temos um parágrafo no corpo. Então, estamos usando "etiqueta" e aqui estamos dando o valor "Tabindex" e colocando -o igual a "1". Em seguida, criamos uma “div” e tornamos este “div” que a guia colocou o “Tabindex” nesse “div”. Também criamos outro "div" sem "Tabindex", para que não seja a tabela. Em seguida, criamos novamente outro "rótulo" com o valor "tabindex" "2". No final, temos outro "div" com o valor "Tabindex" "3", também é "Tabable" devido a "Tabindex".

Agora, neste arquivo CSS, vamos estilizar todos os elementos acima. Também iremos estilizar aqueles divs nos quais usamos o "tabindex". Aqui, vamos mudar o estilo deles quando o abaixarmos. Primeiro, vamos aplicar algum estilo no parágrafo que aparecerá no topo da página. Usamos "itálico" para o "estilo de fonte" do parágrafo. Definimos "vermelho" como a "cor" e "tamanho da fonte" aqui é "20px". Nós também “ousado” neste parágrafo.

Então, vem "div" e "etiqueta". Definimos o "monitor" para "bloco" e o "espaçamento de cartas" para "0.5px ”. Além disso, o "fundo da margem" é "1Rem". Agora, temos “div: focus”. Este "foco" é acionado quando pressionamos a tecla de guia ou qualquer tecla. Aqui, quando pressionamos o "div", todas as propriedades dadas se aplicarão aos elementos "div" na tabagem. Mudamos o "peso da fonte" do "div" para "ousado" e o elemento div ficará "ousado" quando o abaixarmos. Além disso, sua “cor” muda para “verde” e a “família de fontes” dessa div muda para a fonte “argelina”. Selecionamos tudo isso neste código CSS.

Esta é a saída do código acima. Aqui, alguns elementos são de guias nos quais aplicamos o "tabindex". Aplicamos algumas propriedades quando "guias" nos elementos de aba-. Também fornecemos as capturas de tela abaixo nas quais todas as propriedades são aplicadas nos elementos "tablabable".

Na captura de tela abaixo, você pode ver que o estilo de fonte e a cor do elemento de guia são alterados devido à "guia" neste elemento aqui.

Exemplo # 2:

Aqui, estamos criando uma div e usando o "tabindex" nesta div. Em seguida, temos um parágrafo e usamos "Tabindex" para este parágrafo e o período com outro valor "Tabindex". Então, todos eles poderão. Também mudamos o estilo deles no CSS, para que, quando "guabamos" sobre eles, seus estilos serão alterados.

Aqui, estamos mudando o estilo do texto div quando “guia” nessa div. Usamos "foco" com o div. Quando “guia” na div, seu estilo muda de acordo com essas propriedades que vamos utilizar aqui. Definimos sua “família de fontes” para “argelino” e “vermelho” em “cor”. Também definimos seu "tamanho da fonte" para "23px" e "itálico" em sua propriedade "estilo de fonte". Também usamos "foco" com "P", então funciona da mesma forma que discutimos acima. Na tabagem, muda seu estilo.

Aqui, definimos a “família da fonte” como “Times New Roman” e usamos “azul” como a “cor” do texto do parágrafo. Também definimos seu "tamanho da fonte" para "20px" e alinhamos o parágrafo no "centro". Então, também temos "span" e novamente usamos "foco" aqui. Para esse período, usamos "calibri" como a "família da fonte". A "cor" é "verde" para o texto do span. O "tamanho da fonte" aqui é "25px". Agora, veja a saída e como funciona.

A saída está aqui abaixo, que está antes de rastrear os elementos. Todo o texto aparece assim que é mostrado na captura de tela. Você pode ver que nenhuma propriedade CSS é aplicada aqui em todos esses elementos.

Nesta captura de tela, você pode notar que a primeira div é alterada e as propriedades CSS que solicitamos para a classe DIV são aplicadas porque aqui nós “guia” na div.

Aqui, nós “guia” no parágrafo nesta captura de tela. O parágrafo inicial foi alterado e os atributos CSS que definimos para a classe de parágrafo foram aplicados a ele.

Nesta última captura de tela, nós “guia” no período. Os elementos de span são alterados aqui e todas as propriedades que definimos para o período são aplicadas aqui. Podemos "guiar" tudo isso porque usamos o "Tabindex" para todos esses elementos.

Exemplo # 3:

Neste exemplo, estamos criando um título, um link, uma div, um parágrafo e um período. Aplicamos o "tabindex" em tudo isso. Aqui, você pode notar que não damos os valores "Tabindex" em sequência, mas quando abaixamos, ele se move em uma sequência. Mostraremos você mais tarde na saída, para que você entenda facilmente esta sequência "Tabindex".

Para "H1: Focus", usamos um "tamanho da fonte" de "25px" e a "cor" para o título é "roxo". Este cabeçalho está alinhado no "centro" em Tabbing e na "Font-Family", definimos o tabbing, "argelino". Em seguida, usamos "A: Focus", definido "tamanho da fonte" para isso é "25px" e "cor" é "marrom". O peso da fonte do link é "ousado" e "Times New Roman" é usado aqui para a "família da fonte". Também definimos o “tamanho da fonte” da div em tabbing para “25px”. A “cor” da div quando a guiasmos é definida como “azul”. Use "decoração de texto" e defina-o como "sublinhado". Também alinhamos esta div no "centro".

Para o parágrafo, colocamos “P: foco”. Utilizamos um "tamanho de fonte" de "25px" e uma "cor" de "laranja" para o parágrafo. A propriedade "Decoração de texto" é definida como "tracejada". A “família-família” que especificamos sobre a tabagem é “Verdane”. Por fim, usamos o "foco" com o span "span: focus" e definimos algumas propriedades para isso. Estamos utilizando a propriedade "do tamanho da fonte" também para esse período e seu valor é "28px". Também utilizamos a propriedade "cor" e a definimos "verde". Usamos "Double" como "Decoração de Texto" e "Sans-Serif" como sua "família de fontes". A última propriedade que estamos utilizando é a propriedade "em estilo de fonte", que é definida como "itálico". Todas essas propriedades se aplicarão aos elementos HTML quando abaixarmos neles.

Estamos fornecendo um vídeo que mostra a saída deste código. Neste vídeo, você pode ver que, quando abaixamos, ele se move de acordo com o valor "Tabindex". Primeiro, ele guia o parágrafo que está presente na quarta linha. Então, o div, que está no terceiro e depois o link que está presente na segunda linha, e assim por diante. Tudo isso é por causa dos valores "tabindex". Quando pressionamos a guia, ela se move em uma sequência. Ou, podemos dizer que ele se move em ordem crescente do valor "Tabindex". Ele também aplica propriedades quando o ID do elemento é abordado.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/07/css-tabindex-profile-1-microsoft_-Edge-2022-06-15-17-15-19.MP400: 0000: 0000: 09Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

Conclusão:

Apresentamos este tutorial para explicar o conceito de "Tabindex". Nós explicamos o que “Tabindex” é como usá -lo e como funciona em detalhes. Também exploramos vários exemplos e mostramos a saída também para que você aprenderá facilmente sobre esse "tabindex". Discutimos isso quando usamos o "tabindex" em qualquer elemento em html. Então, esse elemento será um elemento de aba que. Nós exploramos esse conceito em profundidade. Também fornecemos um vídeo para que você possa ver como funciona. Aplicamos propriedades em CSs que foram aplicadas na tabagem.