• dom
  •  > 
  • Multimedia
  •  > 
  • Lista punktowana. Listy zagnieżdżone z automatyczną numeracją

Lista punktowana. Listy zagnieżdżone z automatyczną numeracją

Listy są aktywnie wykorzystywane do automatycznego numerowania bloków treści. Jednak w przypadku list zagnieżdżonych nie można uzyskać numeracji podrozdziałów typu 1.1, 1.2, 1.3, ponieważ każda lista będzie niezależna. Ale to, co nie jest możliwe w SHTML, można przypisać do stylów.

Najpierw przyjrzyjmy się ogólnie, jak tworzyć listy zagnieżdżone. Głównym pojemnikiem jest tag

    , a elementy listy są utworzone przez znaczniki
  1. . Zagnieżdżona lista również zaczyna się od
      , ale znacznik ten musi znajdować się wewnątrz kontenera
    1. , w ten sposób zachowana jest poprawna składnia (przykład 1).

      Przykład 1: Zwykła lista zagnieżdżona





      Zagnieżdżona lista



      1. Ustęp 1

        1. Podpunkt 1.1

        2. Podpunkt 1.2

        3. Podpunkt 1.3



      2. Punkt 2

        1. Podpunkt 2.1

        2. Podpunkt 2.2





      Wynik ten przykład pokazany na ryc. 1. Należy pamiętać, że numeracja list zagnieżdżonych rozpoczyna się za każdym razem od nowa.

      Ryż. 1. Zagnieżdżony widok listy

      Usuńmy teraz wbudowaną numerację list i utwórzmy nową, ale w wymaganej przez nas formie. Aby to zrobić, potrzebujesz trzech atrybutów stylu: resetowania licznika, licznika przyrostu i zawartości.

      counter-reset - ustawia zmienną, która będzie przechowywać wartość licznika;

      licznik-przyrost - zwiększa lub zmniejsza wartość licznika o określoną liczbę;

      content - drukuje wartość licznika w przypadku użycia argumentu licznik(zmienna). Działa w połączeniu z pseudoelementami po i przed.

      Dla listy pierwszego poziomu nazwijmy zmienną licznikową lista1, a dla drugiego poziomu - listę2. Wtedy inicjacja liczników dla list będzie następująca.

      OL (reset licznika: lista1; ) /* Lista pierwszego poziomu */
      OL OL (reset licznika: lista2; ) /* Lista drugiego poziomu*/

      W w tym przypadku Selektory treści pomagają oddzielić listę zagnieżdżoną od listy zewnętrznej. Konstrukcja OL OL oznacza zastosowanie stylu tylko do znacznika

        , ale tylko wtedy, gdy znajduje się wewnątrz innego tagu
          .

          Wartość licznika zwiększa się za pomocą selektora OL LI:before, do którego dodawane są atrybuty licznika i stylu treści. Atrybut licznika-inkrementacji o wartości lista1 zwiększa wartość tego licznika o jeden, a treść: licznik(lista1) "." wyświetla wartość licznika przed pozycją listy. Atrybuty te działają parami, dlatego muszą być włączone jednocześnie.

          OL LI:przed ( /* Lista pierwszego poziomu */
          licznik-przyrost: lista1;
          /* Wyprowadź wartość jako 1., 2.*/
          }
          OL OL LI:przed ( /* Lista drugiego poziomu */
          licznik-przyrost: lista2; /* Zwiększ wartość licznika */
          }

          W przypadku listy zagnieżdżonej ponownie używamy selektorów treści (OL OL) i jednocześnie wykorzystujemy dane wyjściowe liczników lista1 i lista2, w tym przypadku otrzymamy numerację potrzebnego typu.

          Ostateczny kod pokazano w przykładzie 2.

          Przykład 2. Listy zagnieżdżone z autonumeracją





          Zagnieżdżona lista




          1. Ustęp

            1. Podpunkt

            2. Podpunkt

            3. Podpunkt



          2. Ustęp

            1. Podpunkt

            2. Podpunkt





          Wynik tego przykładu pokazano na ryc. 2.

          Ryż. 2. Rodzaj automatycznego numerowania list w przeglądarce Opera

          Komentarz

          Podany przykład nie działa w przeglądarce Internet Explorera aż do wersji 7 włącznie, ponieważ nie obsługuje ona żadnej z podanych właściwości stylu.

          Ponieważ przeglądarka internetowa Explorer nie obsługuje wielu interesujących atrybutów stylu, szczególnie w tym przypadku należy pozostawić zwykłą numerację na listach. Aby to zrobić, usuń list-style-type: none . Ale wpłynie to również na inne przeglądarki, w których przykład działa poprawnie, więc będziesz musiał zastosować hack - oznacza to technikę, gdy różne przeglądarki podano inny kod stylu. Możesz na przykład użyć znacznika !important. Dodanie !important do wartości atrybutu stylu zwiększa jego znaczenie. Jeśli ponownie zdefiniujesz ten sam atrybut bez !important , zostanie on zignorowany przez przeglądarki. Ale nie w Internecie Wersje eksploratora 6 i poniżej.

          LI (
          typ-stylu listy: brak !ważne; /* Usuń numerację w przeglądarkach Opera, Safari, Firefox */
          typ listy: dziesiętny; /* Pozostaw numerację w przeglądarce IE6 i niższych */
          }

          Zastępując te kody ciągiem z selektorem LI w przykładzie 2, otrzymamy zagnieżdżoną listę, która działa poprawnie we wszystkich przeglądarkach.

          Listy numerowane to zbiór elementów wraz z ich numerami seryjnymi. Rodzaj i rodzaj numeracji zależny jest od atrybutów znacznika

            , który służy do tworzenia listy. Każda pozycja na liście numerowanej jest oznaczona znacznikiem
          1. jak pokazano niżej.

            1. Pierwszy punkt
            2. Drugi punkt
            3. Trzeci punkt

            Jeśli nie określisz żadnych dodatkowych atrybutów i po prostu napisz tag

              , wówczas domyślnie jest to lista z liczbami arabskimi (1, 2, 3,...), jak pokazano w przykładzie 11.3.

              Przykład 11.3. Utwórz listę numerowaną

              Lista numerowana

              Praca z czasem

              1. tworzenie punktualności (nigdy na nic się nie spóźnisz);
              2. lekarstwo na punktualność (nigdy się nie spieszysz);
              3. zmiana postrzegania czasu i zegarów.

              Wynik tego przykładu pokazano na ryc. 11.3.

              Ryż. 11.3. Widok listy numerowanej

              Należy pamiętać, że lista numerowana dodaje również automatyczne wcięcia u góry, u dołu i po lewej stronie tekstu.

              Jako elementy numeracyjne mogą służyć następujące wartości:

              • Liczby arabskie (1, 2, 3, ...);
              • stolice listy(A, B, C, ...);
              • małe litery łacińskie (a, b, c, ...);
              • wielkie cyfry rzymskie (I, II, III, ...);
              • małe cyfry rzymskie (i, ii, iii, ...).

              Aby wskazać typ listy numerowanej, użyj atrybutu type znacznika

                . Jego możliwe wartości podano w tabeli. 11.2.

                Tabela 11.2. Rodzaje list numerowanych
                Typ listy Kod HTML Przykład
                Cyfry arabskie

                		1. Czeburaszka
                2. Krokodyl Gena
                3. Szapoklak
                Wielkie litery alfabetu łacińskiego

                		A. Czeburaszka
                B. Krokodyl Gena
                C. Szapoklak
                Małe litery alfabetu łacińskiego

                		A. Czeburaszka
                B. Krokodyl Gena
                C. Szapoklak
                Cyfry rzymskie w duże litery

                		I. Czeburaszka
                II. Krokodyl Gena
                III. Szapoklak
                Cyfry rzymskie pisane małymi literami

                		I. Czeburaszka
                II. Krokodyl Gena
                iii. Szapoklak

                Aby rozpocząć listę od określonej wartości, użyj atrybutu start znacznika

                  . Nie ma znaczenia, z jakim typem listy jest zainstalowany za pomocą typu, atrybut start działa tak samo w przypadku cyfr rzymskich i arabskich. Przykład 11.4 pokazuje, jak utworzyć listę przy użyciu wielkich cyfr rzymskich, zaczynając od ośmiu.

                  Przykład 11.4. Numeracja list

                  Liczby rzymskie

                  1. Król Magnum XLIV
                  2. Król Zygfryd XVI
                  3. Król Zygmunt XXI
                  4. Król Husbrandt I

                  Wynik tego przykładu pokazano na ryc. 11.4.

                  Ryż. 11.4. Lista numerowana z cyframi rzymskimi

                  Listy definicji łączą określone obiekty i ich definicje w formie listy. Na przykład, jeśli chcesz dodać definicje do pozycji na liście zakupów, możesz to zrobić w ten sposób:

                  mleko Biały płynny produkt mleczny. chleb Produkt spożywczy wytwarzany z mąki. masło to żółty stały produkt mleczny. ziarna kawy Nasiona owoców niektórych drzew kawowych.

                  Każda definicja i termin jest grupą definicji (lub grupą nazwa-wartość). Możesz mieć dowolną liczbę grup definicji, ale każda grupa musi zawierać co najmniej jeden termin i co najmniej jedną definicję. Nie można mieć terminu bez definicji ani definicji bez terminu.

                  Możliwe jest powiązanie więcej niż jednego terminu z jedną definicją i odwrotnie. Przykładowo termin „kawa” może mieć kilka znaczeń i można je pokazywać jedno po drugim:

                  kawa napój sporządzony z palonych, mielonych ziaren kawy filiżanka kawy spotkanie, podczas którego pije się kawę od średniej do ciemnobrązowej

                  Alternatywnie możliwe jest posiadanie więcej niż jednego terminu z tą samą definicją. Służy do pokazania odmian terminu, które mają to samo znaczenie:

                  soda pop soda cola Słodki napój gazowany

                  Listy definicji różnią się od innych typów list tym, że zamiast obiektów list używają zdefiniowanych terminów i opisów definicji.

                  Dlatego listy definicji wykorzystują jedną parę elementów

                  , obejmujące grupy tagów
                  I
                  . Co najmniej jedna grupa tagów musi być sparowana
                  z jedną grupą
                  ; tagi
                  zawsze musi być na pierwszym miejscu w kolejności.

                  Prosta lista definicji jednego terminu z jedną definicją wyglądałaby następująco:

                  Termin
                  Definicja terminu
                  Termin
                  Definicja terminu
                  Termin
                  Definicja terminu

                  Który jest wyprowadzany w następujący sposób:

                  Termin Definicja terminu Termin Definicja terminu Termin Definicja terminu

                  W tym przykładzie łączymy więcej niż jeden termin z definicją i odwrotnie:

                  Termin
                  Definicja terminu
                  Termin
                  Termin
                  Definicja, która ma zastosowanie do obu poprzednich terminów
                  Termin, który może mieć jedno i drugie następujące definicje
                  Jedna definicja tego terminu
                  Inna definicja tego terminu

                  Które zostaną zaprezentowane w następujący sposób:

                  Termin Definicja terminu Termin Termin Definicja, która ma zastosowanie do obu poprzednich terminów Termin, który może mieć obie poniższe definicje Jedna definicja terminu Inna definicja terminu

                  Łączenie wielu terminów w jedną definicję nie jest powszechną praktyką, ale warto wiedzieć, że jest to możliwe, jeśli zajdzie taka potrzeba.

                  Wybór typu listy

                  Decydując się na użycie określonego typu listy, zazwyczaj możesz podjąć decyzję, zadając dwa proste pytania:

                  1. Czy zdefiniowano terminy (lub połączono inne pary nazwa/wartość)?
                    • Jeśli tak, skorzystaj z listy definicji.
                    • Jeżeli nie, nie korzystaj z listy definicji – przejdź do kolejnego pytania.
                  2. Czy kolejność elementów listy ma znaczenie?
                    • Jeśli tak, użyj uporządkowanej listy.
                    • Jeśli nie, użyj nieuporządkowany lista.

                  Różnica między listami HTML a tekstem

                  Można się zastanawiać, jaka jest różnica między listą HTML a tekstem z punktorami lub odręcznie zapisanymi liczbami. Korzystanie z listy HTML ma kilka zalet:

                  • Jeśli chcesz zmienić kolejność elementów na uporządkowanej liście, po prostu przesuń je w kodzie HTML. Jeśli liczby są pisane ręcznie, będziesz musiał przejrzeć wszystko i zmienić numer każdego elementu, aby poprawić kolejność - co jest, delikatnie mówiąc, dość nudne!
                  • Korzystanie z listy HTML pozwala na odpowiednie nadanie jej stylu. Jeśli jest używany po prostu duży tekst, wtedy znacznie trudniej będzie zaprojektować styl poszczególne elementy w jakiś mniej lub bardziej użyteczny sposób.
                  • Użycie listy HTML tworzy odpowiednią treść dla treści struktura semantyczna, a nie tylko „listonopodobnie” efekt wizualny. To ma ważne zalety, ponieważ umożliwia czytnikom ekranu informowanie użytkowników niedowidzących, że czytają listę, a nie tylko mylącą mieszaninę tekstu i liczb.

                  Z drugiej strony: tekst i listy to nie to samo. Wymagane jest użycie tekstu zamiast listy więcej pracy i może powodować problemy dla czytelników dokumentu. Dlatego jeśli dokument wymaga listy, musisz jej użyć poprawna lista HTML.

                  Zagnieżdżone listy

                  Element listy może zawierać inną całą listę — nazywa się to listą „zagnieżdżoną”. Może to być przydatne w przypadku spisu treści, takiego jak ten na początku wykładu:

                  1. Rozdział pierwszy 1. Część pierwsza 2. Część druga 3. Część trzecia 2. Rozdział drugi 3. Rozdział trzeci

                  Kluczową kwestią do zapamiętania jest to, że zagnieżdżona lista musi należeć do jednej konkretnego elementu lista. Aby odzwierciedlić to w kodzie, wewnątrz tego elementu listy umieszczana jest zagnieżdżona lista. Kod powyższej listy wygląda następująco:

                  1. Rozdział pierwszy
                    1. Sekcja pierwsza
                    2. Sekcja druga
                    3. Sekcja trzecia
                  2. Rozdział drugi
                  3. Rozdział trzeci

                  Należy pamiętać, że zagnieżdżona lista zaczyna się po elemencie

                1. oraz tekst zawierający listę elementu („Rozdział pierwszy”); i kończy się przed elementem
                  2. , zawierający listę elementu. Listy zagnieżdżone często stanowią podstawę Menu nawigacji witryna internetowa, taka jaka jest w wygodny sposób określenie struktury serwisu WWW.

                  Teoretycznie możesz zagnieżdżać dowolną liczbę list, chociaż w praktyce może to być mylące, jeśli listy są zagnieżdżone zbyt głęboko. W przypadku bardzo dużych list lepszym rozwiązaniem może być podzielenie zawartości na wiele list z nagłówkami lub nawet ich podzielenie poszczególne strony.

                  Przykład krok po kroku

                  Rozważmy przykład krok po krokużeby to wszystko połączyć. Rozważ następujący scenariusz:

                  Tworzymy małą stronę internetową dla Szkoły Kulinarnej. Na stronie głównej wyświetli się lista sklasyfikowanych przepisów, do których prowadzą linki do stron z przepisami. Na każdej stronie przepisu znajdują się wymagane składniki, uwagi dotyczące tych składników oraz metoda przygotowania. Te trzy kategorie to „Ciasta” (w tym przepisy na „Zwykły biszkopt”, „Ciasto czekoladowe” i „Ciasto jabłkowo-herbaciane”); „Biscuits” (w tym przepisy na „ANZAC Ciasteczka”, „Dżem Drops” i „Melting Moments”); i „Quickbreads” (w tym przepisy na „Damper” i „Scones”). Klienta nie interesuje, w jakiej kolejności wyświetlane są kategorie i przepisy, chce tylko, żeby ludzie zrozumieli, które elementy są kategoriami, a które przepisami. Istnieją trzy kategorie przepisów do zaprezentowania, a kolejność nie jest istotna – ta, która jest do tego najbardziej odpowiedni nieuporządkowany list, więc dodajmy do strony następujący kod:

                  Przepisy

                  • ciastka
                  • Biszkopty
                  • Szybkie pieczywo

                  Wcięcie elementów li ułatwia odczytanie kodu, ale nie jest wymagane.

                  Teraz musisz dodać przepisy jako podpozycje, na przykład „Zwykły biszkopt”, „Ciasto czekoladowe” i „Ciasto jabłkowe” są częścią kategorii „Ciasta”. Aby to zrobić, musisz utworzyć zagnieżdżoną listę w każdej pozycji listy. Ponieważ kolejność nie jest ważna, znowu pasuje nieuporządkowany lista. Aby uprościć materiał instruktażowy, wszystkie przepisy można połączyć z jedną stroną z przepisami:

                  Przepisy

                  • ciastka
                    • Zwykła gąbka
                    • Ciasto czekoladowe
                    • Ciasto herbaciane z jabłkami
                  • Biszkopty
                    • Ciastka ANZAC
                    • Krople Dżemu
                    • Rozpływające się chwile
                  • Chleby/szybkie pieczywo
                    • Amortyzator
                    • Bułeczki

                  Listy HTML służy do grupowania powiązanych ze sobą informacji. Istnieją trzy typy list:

                  lista punktowana —

                    - każdy element listy
                  • zaznaczone markerem,
                    lista numerowana —
                      - każdy element listy
                    1. oznaczone numerem
                      lista definicji- - składa się z par terminów
                      —
                      definicja.

                      Każda lista jest kontenerem, w którym znajdują się elementy listy lub pary termin-definicja. Elementy listy zachowują się jak elementy blokowe, umieszczone jeden pod drugim i zajmujące całą szerokość bloku kontenerowego. Każdy element listy ma dodatkowy blok, znajdujący się z boku, który nie uczestniczy w układzie.

                      Tworzenie list HTML

                      1. Lista punktowana

                      Lista punktowana jest listą nieuporządkowaną (z angielskiej listy nieuporządkowanej). Stworzony za pomocą para tagów

                      . Znacznik elementu listy to etykieta, na przykład wypełnione kółko.

                      Przeglądarki domyślnie dodają do bloku listy następujące formatowanie:

                      Każdy element listy jest tworzony przy użyciu sparowanego tagu

                    2. (z pozycji z listy angielskiej).
                      dostępny .
                    • Microsoftu
                    • Google
                    • Jabłko
                    Ryż. 1. Lista punktowana

                    2. Lista numerowana

                    Lista numerowana jest tworzony przy użyciu sparowanego tagu. Każdy element listy jest również tworzony przy użyciu elementu

                  • . Przeglądarka automatycznie numeruje elementy w kolejności, a jeśli usuniesz jeden lub więcej elementów takiej listy, pozostałe numery zostaną automatycznie przeliczone.

                    Blok listy ma również domyślne style przeglądarki:

                  • Dostępny jest atrybut value, który umożliwia zmianę domyślnej liczby dla wybranej pozycji listy. Na przykład, jeśli ustawisz pierwszą pozycję na liście
                  • , wówczas pozostała numeracja zostanie przeliczona względem nowej wartości.

                    Dla tagu

                      Dostępne są następujące atrybuty:

                      Tabela 1. Atrybuty tagu
                      Atrybut Opis, akceptowana wartość
                      wywrócony Odwrócony atrybut określa sposób wyświetlania listy Odwrotna kolejność(na przykład 9, 8, 7...).
                      początek Atrybut start określa wartość początkową, od której rozpocznie się numeracja, np. konstrukcja
                        zostanie przypisany do pierwszego elementu numer seryjny„10”. Można jednocześnie określić typ numeracji, np.
                          .
                      typ Atrybut type określa typ znacznika, który ma zostać użyty na liście (litery lub cyfry). Akceptowane wartości:
                      1 — wartość domyślna, numeracja dziesiętna.
                      A - numeracja wykazów kolejność alfabetyczna, wielkie litery(A, B, C, D).
                      a — numeracja list w kolejności alfabetycznej, małe litery (a, b, c, d).
                      I - numeracja wielkimi cyframi rzymskimi (I, II, III, IV).
                      i — numeracja małymi literami rzymskimi (i, ii, iii, iv).
                      1. Microsoftu
                      2. Google
                      3. Jabłko
                      Ryż. 2. Lista numerowana

                      3. Lista definicji

                      Listy definicji są tworzone za pomocą tagu

                      . Aby dodać termin, użyj tagu
                      , a żeby wstawić definicję - tag
                      .

                      Blok listy definicji ma następujące domyślne style przeglądarki:

                      Dla tagów

                      ,
                      I
                      dostępny .

                      Dyrektor:
                      Piotr Tochilin
                      Rzucać:
                      Andriej Gaidulyan
                      Aleksiej Gawriłow
                      Witalij Goguński
                      Maria Kożewnikowa
                      Ryż. 3. Lista definicji

                      4. Lista zagnieżdżona

                      Często możliwości proste listy brakuje np. przy tworzeniu spisu treści bez którego nie da się obejść zagnieżdżone elementy. Znaczniki zagnieżdżonej listy będą wyglądać następująco:

                      • Ustęp 1.
                      • Punkt 2.
                        • Podpunkt 2.1.
                        • Podpunkt 2.2.
                          • Podpunkt 2.2.1.
                          • Podpunkt 2.2.2.
                        • Podpunkt 2.3.
                      • Punkt 3.

                      Ryż. 4. Lista zagnieżdżona

                      5. Wielopoziomowa lista numerowana

                      Lista wielopoziomowa służy do wyświetlania elementów listy różne poziomy z różnymi wcięciami. Znaczniki wielopoziomowej listy numerowanej będą wyglądać następująco:

                      1. ustęp
                      2. ustęp
                        1. ustęp
                        2. ustęp
                        3. ustęp
                          1. ustęp
                          2. ustęp
                          3. ustęp
                        4. ustęp
                      3. ustęp
                      4. ustęp

                      Ten domyślny znacznik utworzy nową numerację dla każdej zagnieżdżonej listy, zaczynając od jednego. Aby utworzyć numerację zagnieżdżoną, należy skorzystać z następujących właściwości:
                      reset licznika resetuje jeden lub więcej liczników, określając wartość do zresetowania;
                      licznik-inkrement określa wartość przyrostu licznika, tj. w jakiej kolejności będzie numerowana każda kolejna pozycja;
                      content - treść wygenerowana, w tym przypadku odpowiada za wyświetlenie numeru przed każdą pozycją listy.

                      Ol ( /* usuń standardową numerację */ list-style: none; /* Zidentyfikuj licznik i nadaj mu nazwę li. Wartość licznika nie jest określona - domyślnie jest to 0 */ counter-reset: li; ) li :before ( /* Definiujemy element, który będzie numerowany - li. Pseudoelement before wskazuje, że treść wstawiona za pomocą właściwości content zostanie umieszczona przed elementami listy. Tutaj również ustawiamy wartość przyrostu licznika (domyślnie wynosi 1). */ licznik-przyrost: li; / * Właściwość content wyświetla numer pozycji na liście. counters() oznacza, że ​​wygenerowany tekst reprezentuje wartości wszystkich liczników o tej nazwie. Kropka w cudzysłowie dodaje kropkę oddzielającą liczby, a przed zawartością każdego elementu listy dodaje się kropkę ze spacją */ content: counters(li,."") "."; )
                      Ryż. 5. Wielopoziomowa lista numerowana