Liczniki CSS
Przykład 01: Korzystanie z właściwości licznika CSS do automatycznego numerowania nagłówków w pliku HTML
W tym przykładzie omawiamy właściwość licznika, która automatycznie przypisuje liczbę do dowolnego elementu języka znaczników hipertekstu. W tym przykładzie będziemy numerować, używając różnych funkcji właściwości kontratakowej:
Zaczniemy od nagłówka pliku, w którym przypisamy właściwości stylizacji do ciała i znacznika H2 pliku. W przypadku znacznika ciała będziemy używać funkcji resetowania licznika. W przypadku znacznika H2 użyjemy właściwości licznika i właściwości treści, która przypisuje liczby wygenerowane do znacznika H2 w ciele.
Następnie otworzymy znacznik ciała, w którym podamy tytuł na stronie za pomocą znacznika H1. Następnie dodamy wiele tagów H2 z właściwościami stylizacji zdefiniowanymi w znaczniku stylizacji. Mamy listę nazwisk ludzi i identyfikatory ich pracowników, które muszą być automatyczne, gdy do listy dodaje się nowa nazwa. Dodaliśmy pretekst za pomocą właściwości treści, i.mi., „Identyfikator pracownika:”, a następnie użyj licznika, aby zwiększyć wartość. Następnie zamkniemy wszystkie pozostałe znaczniki, aby zakończyć plik i otworzyć go w naszej przeglądarce, aby wyświetlić właściwości stylizacji.
W poprzednim fragmencie możemy zobaczyć identyfikator pracownika, który był treścią, którą zdefiniowaliśmy. Wartości są automatycznie zbliżone przez licznik, i.mi., 1, 2, 3, 4 itp.
Przykład 02: Korzystanie z właściwości licznika CSS do tworzenia wielu nagłówków i podrzędnych z hierarchicznymi liczbami
W tym przykładzie liczymy nasze nagłówki i podtytuły z wykorzystaniem różnych funkcji właściwości kontrataków. W tym przykładzie spojrzymy na właściwość licznika, która przypisuje liczbę do dowolnego elementu w języku znaczników hipertekstu.
W tym skrypcie zaimplementujemy koncepcję zagnieżdżonego licznika. Najpierw zdefiniujemy licznik w klasie stylu nadwozia, o nazwie „sekcja.”Tutaj zdefiniowaliśmy odpowiednio dwie nazwy liczników, sekcja i podsekcja. Ponieważ mamy listę nagłówków i podrzędnych, zresetujemy oba liczniki dla określonych elementów. Teraz rozszerzymy klasę stylizacji H1 i H2 o stan przed. W tej części klasy zdefiniujemy regulację zawartości dla nagłówka i podtytury za pomocą właściwości licznika i właściwości treści. Następnie dodamy nagłówek i podtytuł za pomocą odpowiednio znaczników H1 i H2. Będziemy tworzyć dwie sekcje z oddzielnymi nagłówkami i podtytułami. Następnie zamkniemy znaczniki i zakończymy plik, aby zapisać go w „.format html ”, abyśmy mogli otworzyć go w naszej przeglądarce.
W poprzednim wyjściu widzimy, że dwie sekcje mają inną numerację zgodnie z definicją w klasie stylizacji pliku. Numer nagłówka wzrasta, a także liczba podrzędnych, która jest resetowana do jednego, gdy są one wywoływane do innej sekcji.
Przykład 03: Utworzenie liczby zamówionej listy za pomocą właściwości licznika CSS w pliku HTML
W tym przykładzie utworzymy uporządkowaną listę, która zostanie ponumerowana za pomocą właściwości licznika i jej powiązanych funkcji, dzieląc listę na różne sekcje z predefiniowanymi liczbami na zmianę sekcji.
W tym skrypcie będziemy początkowo dodawać klasy stylistyczne, ponieważ wybieramy metodę stylu CSS. Tag stylu będzie miał najpierw tag „ol” do dostarczania właściwości stylizacji. W tej klasie zaczniemy od funkcji resetowania licznika, która zostanie ustawiona na funkcję sekcji. Następnie dodamy właściwość typu stylu listy, której można użyć do dodania dowolnego predefiniowanego stylu lub domyślnego widoku listy. Dodamy właściwości stylizacji tylko do stanu „przed” tego tagu. W tej sekcji dodamy właściwość przeciwdziałania przeciwdziałaniu, która zostanie ustawiona na funkcję sekcji, i zdefiniujemy właściwość treści z funkcją licznika, która ma zawartość dodaną jako parametr SUHEADING. Ta część znacznika stylów przypisuje prawidłowy zestaw liczb z kilkoma podrzędami i podwodami. Następnie utworzymy uporządkowaną listę z pięcioma różnymi sekcjami za pomocą tagów OL i Li.
Jak widzimy w poprzednim fragmencie, nagłówki, podwodniki i podwodniki są doskonale zorganizowane z odrębnym zestawem liczb dotyczących ich odpowiedniej sekcji i różni się od innych sekcji jednocześnie.
Przykład 04: Tworzenie Dynamiczna lista stron za pomocą właściwości licznika CSS w pliku HTML
W tym przykładzie utworzymy dynamiczną listę stron za pomocą właściwości licznika CSS. Przypisamy numery list stron, dostosowane do zmiany przepływu na przemieszczaniu strony na naszej stronie internetowej. W tym przykładzie zostanie zastosowane podejście do tagu w stylu CSS:
Poprzedni skrypt jest przykładem listy z dynamicznym stronicowaniem przez liczniki. W znaczniku UL klasy stylizacji zresetujemy licznik dla paginianowego licznika. Następnie stworzymy klasę stylistyczną dla tagów UL i Li, w których podamy jej właściwości projektowe, dodając wyściółkę, kolor i margines, nadając mu solidną obramowanie, wskaźnik kursora i pływającą właściwość. Następnie przejdziemy do następnego i poprzedniego stanu tagów UL i Li w tej samej klasie, gdzie dodamy właściwość kontr-nabrzeża, która zostanie ustawiona na paginicie. Zdefiniujemy również właściwość treści z funkcją paginianową, która ma zostać dodana zawartości jako parametr. Następnie utworzymy listę w korpusie pliku za pomocą tagów Li i UL. Pierwszy znacznik Li będzie miał poprzednią klasę jako przewodnik po właściwościach stylizacji, podczas gdy ostatni tag LI będzie miał następującą klasę jako przewodnik po właściwościach stylizacji, a reszta będzie pusta.
Widzimy, że lista jest tworzona w uporządkowanej serii liczb ze stanem przyrostowym wraz z następnymi i poprzednimi przyciskami i stylami zgodnie z definicją w stylistyce.
Wniosek
W tym artykule omówiliśmy kilka funkcji właściwości licznika CSS w języku znaczników hipertekstu. Właściwość licznika CSS służy do dynamicznego przypisania liczb do dowolnego elementu. Za pomocą powiązanych funkcji możemy wirować wokół zmian etykietowania w nagłówku zgodnie z sekcją. Przyrost licznika i resetowanie licznika są najczęstszymi funkcjami przy przypisywaniu liczb do elementu. Wdrożyliśmy właściwość licznika CSS i jej powiązane funkcje w różnych scenariuszach w środowisku notatnika ++.