CSS TabIndex
Indeks zakładki jest zdefiniowany jako indeks karty. Używamy „tabindex” w naszym kodzie HTML do określenia kolejności zakładki obiektu lub elementu. Kiedy użyjemy tej wartości „tabindex” z dowolnym elementem, element będzie możliwy do zakładki, co oznacza, że możemy zakładać ten element. Kiedy ustawiamy wartość tego „tabindex” w HTML, nawiguje się zgodnie z wartością TabIndex. Nacigając klawisz TAB, nawiguje w sekwencji. Używamy również wartości ujemnej, takiej jak „-1” z „tabindex”, co oznacza, że ten element nie będzie dostępny w sekwencyjnej nawigacji klawiatury. Po naciśnięciu klawisza TAB porusza się on w kolejności rosnącej wartości „tabindex”.
W tym samouczku poprowadzimy Cię, jak działa ten „tabindex” i jak możemy zmienić styl elementu. W tym samouczku zademonstrujemy różne przykłady. Wypróbujmy te przykłady.
Przykład 1:
W kodzie Visual Studio wygeneruj nowy plik. Po otwarciu tego pustego pliku musisz wybrać język. Będziemy tutaj pisać kod HTML. Użyjemy języka HTML. Kiedy wybieramy ten język, utworzony plik jest plik HTML. Dlatego nie musimy określać rozszerzenia pliku podczas jego zapisywania. Następnie wpisz podstawowe tagi HTML (lub „!„Jeśli chcesz być bardziej formalny). Jeśli wpiszesz „!”A następnie naciśnij„ Enter ”, natychmiast otrzymasz wszystkie podstawowe tagi HTML.
Teraz mamy akapit w ciele. Następnie używamy „etykiety” i tutaj podajemy wartość „tabindex” i stawiamy ją równą „1”. Następnie tworzymy „div” i tworzymy tę kartę „div”, umieszczając „tabindex” w tym „div”. Tworzymy także kolejne „div” bez „tabindex”, więc nie będzie on możliwy. Następnie ponownie tworzymy kolejną „etykietę” z wartością „tabindex” „2”. Na koniec mamy kolejną „div” z wartością „tabindex” „3”, jest to również „możliwe do zakładki” z powodu „tabindex”.
Teraz, w tym pliku CSS, będziemy stylizować wszystkie powyższe elementy. Będziemy również stylizować te Divy, w których używamy „tabindex”. Tutaj zmienimy ich styl, kiedy na nałożę. Najpierw zastosujemy styl do akapitu, który pojawi się na górze strony. Używamy „kursyw” do „stylu czcionki” akapitu. Ustawiamy „czerwony” jako „kolor” i „wielkości czcionki” tutaj to „20px”. „Bold” również ten akapit.
Potem pojawia się „div” i „etykieta”. Ustawiamy „wyświetlacz” zarówno jako „blok”, jak i „odstępstwo” na „0.5px ”. Ponadto „bottom marginesowy” to „1rem”. Teraz mamy „Div: Focus”. To „skupienie” jest wyzwalane po naciśnięciu klawisza Tab lub dowolnego klawisza. Tutaj, kiedy naciśniemy „div”, wszystkie podane właściwości będą miały zastosowanie do elementów „Div” na tabbinga. Zmieniamy „font-wadze” „div” na „Bold”, a element div będzie „odważny”, gdy na tanie. Ponadto jego „kolor” zmienia się w „zielony” i „radość czcionki” tej div zmienia się w czcionkę „algierską”. Wybraliśmy je wszystkie w tym kodzie CSS.
To jest wyjście powyższego kodu. Tutaj niektóre elementy są możliwe do zakładki, na których stosujemy „tabindex”. Stosujemy niektóre właściwości, gdy „zakładamy” na elementach podlegających zakładce. Podajemy również te zrzuty ekranu poniżej, w których wszystkie właściwości są stosowane na elementach „możliwe do zakładki”.
Na poniższym zrzucie ekranu widać, że styl czcionki i kolor elementu możliwego do zakładki jest zmieniany z powodu „karty” na tym elemencie tutaj.
Przykład nr 2:
Tutaj tworzymy div i używamy „tabindex” w tym Div. Następnie mamy akapit i używamy „tabindex” dla tego akapitu i rozpiętości z inną wartością „tabindex”. Tak więc wszystkie będą możliwe do zakładania. Zmieniamy również ich styl w CSS, więc kiedy „pokładamy” na nich, ich style zostaną zmienione.
Tutaj zmieniamy styl tekstu div, kiedy „zakładamy” na tej div. Używamy „Focus” z Div. Kiedy „zakładamy” na DIV, jego styl zmienia się w zależności od tych właściwości, których zamierzamy tutaj wykorzystać. Ustawiliśmy jego „rodzinę czcionki” na „algierskie” i „czerwone” w „kolor”. Ustawiliśmy również „wielkości czcionki” na „23px” i „kursywa” w posiadłości „w stylu czcionki”. Używamy również „Focus” z „P”, więc działa tak samo, jak omówiliśmy powyżej. Po tym, jak to zmienia swój styl.
Tutaj ustawiamy „radość czcionki” jako „Times New Roman” i używamy „niebieskiego” jako „koloru” tekstu akapitu. Ustawiliśmy również „rozmiar czcionki” na „20px” i wyrównujemy akapit w „centrum”. Następnie mamy również „rozpiętość” i ponownie używamy „Focus” tutaj. W tym zakresie używamy „Calibri” jako „rodziny czcionki”. „Kolor” jest „zielony” dla tekstu Span. „Rozmiar czcionki” tutaj to „25px”. Teraz spójrz na dane wyjściowe i to, jak to działa.
Dane wyjściowe znajduje się poniżej, które jest przed obracaniem elementów. Cały tekst wydaje się taki, który jest pokazany na zrzucie ekranu. Możesz zobaczyć, że na wszystkich tych elementach nie stosuje się nieruchomości CSS.
Na tym zrzucie ekranu można zauważyć, że pierwsza div jest zmieniona, a właściwości CSS, które zastosowaliśmy do klasy DIV, są stosowane, ponieważ tutaj „zakładamy” na div.
Tutaj „Tab” na akapicie na tym zrzucie ekranu. Początkowy akapit został zmieniony, a atrybuty CSS, które ustawiliśmy w klasie akapitu, zostały do niego zastosowane.
Na tym ostatnim zrzucie ekranu „Tab” na rozpiętości. Elementy rozpiętości są tutaj zmieniane i wszystkie ustawione właściwości dla rozpiętości są tutaj stosowane. Możemy „zakładać” w tym wszystkim, ponieważ używamy „tabindex” dla wszystkich tych elementów.
Przykład nr 3:
W tym przykładzie tworzymy nagłówek, link, div, akapit i rozpiętość. Stosujemy „tabindex” na wszystkich tych wszystkich. Tutaj możesz zauważyć, że nie podajemy wartości „tabindex” w sekwencji, ale kiedy na nim zakładamy, porusza się w sekwencji. Pokażmy Ci później w wyjściu, więc łatwo zrozumiesz tę sekwencję „tabindex”.
W przypadku „H1: Focus” używamy „wielkości czcionki” „25px”, a „kolor” dla nagłówka jest „fioletowy”. Ten nagłówek jest wyrównany w „środku” na Tabbing, a „ród czcionki” ustawiamy Tabbing, „Algierski”. Następnie używamy „A: Focus”, ustawiamy „rozmiar czcionki”, ponieważ to „25px”, a „kolor” to „bordowy”. Waga czcionki linku jest „odważna”, a „Times New Roman” jest tutaj używany do „rodziny czcionki”. Ustawiamy również „rozmiar czcionki” Div na Tabbing na „25px”. „Kolor” Div, gdy na karta jest ustawiona na „niebieski”. Użyj „dekoracji tekstu” i ustaw go na „Podkreśl”. Dostosujemy również ten div w „centrum”.
W akapicie umieszczamy „P: Focus”. Używamy „wielkości czcionki” „25px” i „koloru” „pomarańczowego” do akapitu. Właściwość „dekoracja tekstu” jest ustawiona jako „przerywana”. „Rodzina czcionki”, którą określiliśmy podczas tabbinga to „Verdane”. Wreszcie używamy „Focus” z Span „Span: Focus” i ustawiamy do tego niektóre właściwości. Korzystamy również z właściwości „wielkości czcionki” również w tym zakresie, a jej wartość to „28px”. Korzystamy również z właściwości „kolor” i ustawiamy ją „zielony”. Używamy „podwójnej” jako „dekoracji tekstu” i „sans-serif” jako „rodziny czcionki”. Ostatnią właściwością, której używamy, jest właściwość „w stylu czcionki”, która jest ustalona jako „kursywa”. Wszystkie te właściwości będą miały zastosowanie do elementów HTML, gdy na pokładzie.
Zapewniamy film, który pokazuje dane wyjściowe tego kodu. W tym filmie widać, że podczas zakładania porusza się zgodnie z wartością „tabindex”. Po pierwsze, zakłada akapit obecny w czwartej linii. Następnie div, który jest w trzecim, a następnie link, który jest obecny w drugiej linii i tak dalej. To wszystko z powodu wartości „tabindex”. Po naciśnięciu TAB porusza się ona w sekwencji. Lub możemy powiedzieć, że porusza się w kolejności rosnącej wartości „tabindex”. Stosuje również właściwości, gdy identyfikator elementu jest zakładany.
Video gracze.COM/WP-CONTENT/UPLOODS/2022/07/CSS-TABINDEX-PROFIL-1-MICROSOFT_EDGE-2022-06-15-15-19.MP400: 0000: 0000: 09 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.Wniosek:
Przedstawiliśmy ten samouczek, aby wyjaśnić pojęcie „tabindex”. Wyjaśniliśmy, co to „tabindex”, jak go używać i jak to działa szczegółowo. Zbadaliśmy również wiele przykładów i pokazaliśmy również dane wyjściowe, aby łatwo dowiedzieć się o tym „tabindex”. Omówiliśmy, że kiedy używamy „tabindex” w dowolnym elemencie w HTML. Następnie ten element będzie elementem możliwym do zakładki. Zbadaliśmy tę koncepcję dogłębnie. Podaliśmy również wideo, abyś mógł zobaczyć, jak to działa. Zastosowaliśmy właściwości w CSS, które zastosowano na tabbinga.