Który znacznik jest używany do tworzenia listy definicji. HTML: lista numerowana i punktowana. Listy specjalne i zagnieżdżone w kodzie HTML

Listy są częścią codziennego życia. Lista rzeczy do zrobienia określa, co zostanie zrobione. Trasy nawigacyjne oferują listę wskazówek krok po kroku. Przepisy wymagają listy składników i listy instrukcji. Listy można znaleźć niemal wszędzie, więc łatwo zrozumieć, dlaczego są one popularne także w Internecie.

Kiedy chcemy użyć listy na stronie internetowej, HTML oferuje trzy różne typy do wyboru: lista punktowana, numerowana i lista opisowa. To, jakiego rodzaju listy użyć i czy w ogóle z niej skorzystać, zależy od treści i najbardziej odpowiedniej semantycznie opcji jej wyświetlania.

Oprócz trzech różnych typów list dostępnych w formacie HTML istnieje kilka sposobów nadawania stylu tym listom za pomocą CSS. Na przykład możemy wybrać, jaki typ punktora ma zostać określony dla listy. Znacznikiem może być kwadrat, okrąg, cyfra, litera lub może nie być go wcale. Dodatkowo możemy zdecydować jak lista ma być wyświetlana – pionowo czy poziomo. Wszystkie te opcje odgrywają ważną rolę w stylizacji naszych stron internetowych.

Listy punktowane

Lista punktowana lub nieuporządkowana to po prostu lista powiązanych elementów, dla których kolejność nie ma znaczenia. Tworzenie listy punktowanej w formacie HTML odbywa się za pomocą elementu listy blokowej

. Każda pozycja na liście jest oznaczona elementem
• .

  Domyślnie większość przeglądarek dodaje do elementu pionowy margines i lewe wypełnienie

  i przed każdym elementem
  • stawia punkt jednokolorowy. Ten punkt nazywa się znacznikiem listy i można go zmienić za pomocą CSS.
    • Pomarańczowy
    • Zielony
    • Niebieski

    Pokaż listę punktowaną

    Listy numerowane

    Numerowana lub uporządkowana lista pozycji

    Bardzo podobnie do listy punktowanej, poszczególne punkty punktowane są tworzone w ten sam sposób. Główna różnica między listami polega na tym, że w przypadku listy uporządkowanej znaczenie ma kolejność prezentowania elementów.

    Ponieważ kolejność ma znaczenie, na liście numerowanej jako domyślny punktor używane są cyfry zamiast kropki.

    1. Przejdź się ulicą Apricot
    2. Skręć w Vinogradnaya

    Demonstracja listy numerowanej

    Listy numerowane mają również dostępne unikalne atrybuty, w tym początek i odwrócenie.

    atrybut początkowy

    Atrybut start określa numer, od którego powinna zaczynać się lista numerowana. Domyślnie listy zaczynają się od 1, ale mogą wystąpić sytuacje, w których lista powinna zaczynać się od 30 lub innej liczby. Kiedy używamy atrybutu start na elemencie

    , wówczas będziemy mogli dokładnie określić, od jakiego numeru należy rozpocząć liczenie listy numerowanej.

    Atrybut start akceptuje tylko wartości całkowite, chociaż listy numerowane mogą używać różnych systemów numerowania, takich jak cyfry rzymskie.

    30. Przejdź się ulicą Apricot
    31. Skręć w Vinogradnaya
    32. Zatrzymaj się na Shady Street

    Demonstracja atrybutu start

    odwrócony atrybut

    Odwrócony atrybut po dodaniu do elementu

    umożliwia wyświetlenie listy w odwrotnej kolejności. Listę pięciu elementów ponumerowanych od 1 do 5 można odwrócić i ponumerować od 5 do 1.

    Odwrócony atrybut jest atrybutem logicznym i jako taki nie przyjmuje żadnej wartości. Może to być prawda lub fałsz. Fałsz jest wartością domyślną, wartość staje się prawdą, gdy na elemencie pojawi się odwrócony atrybut

    .
    1. Przejdź się ulicą Apricot
    2. Skręć w Vinogradnaya
    3. Zatrzymaj się na Shady Street

    Wykazanie odwróconego atrybutu

    atrybut wartości

    Atrybut value można zastosować do poszczególnych elementów

    1. na liście numerowanej, aby zmienić jej wartość na liście. Liczba dowolnej pozycji listy, która pojawia się pod pozycją listy z atrybutem wartości, zostanie odpowiednio przeliczona.

       Na przykład, jeśli drugi element listy ma atrybut wartości ustawiony na 9, numer tego elementu listy zostanie wyświetlony tak, jakby był dziewiątym. Wszystkie kolejne pozycje listy będą numerowane począwszy od 9.

       1. Przejdź się ulicą Apricot
       9. Skręć w Vinogradnaya
       10. Zatrzymaj się na Shady Street

       Demonstracja atrybutu wartości

       Listy opisów

       Innym rodzajem list, które będziesz widzieć w Internecie (ale nie tak często jak listy wypunktowane lub numerowane), jest lista opisów. Listy takie służą do identyfikacji kilku terminów i ich opisów, jak na przykład w glosariuszu.

       Tworzenie listy opisowej w formacie HTML odbywa się za pomocą elementu blokowego

       . Zamiast używać elementu

       Aby oznaczyć elementy listy, lista opisowa wymaga dwóch elementów blokowych:

       na termin i

       do opisu.

       Lista opisów może zawierać wiele terminów i opisów, jeden po drugim. Ponadto taka lista może zawierać kilka terminów na opis, a także kilka opisów na termin. Pojedynczy termin może mieć wiele znaczeń i podlegać wielokrotnym opisom. I odwrotnie, jeden opis może pasować do kilku terminów.

       Podczas dodawania elementu listy opisów

       trzeba iść do żywiołu

       . Termin i opis następujący bezpośrednio po nim są ze sobą powiązane. Dlatego ważna jest kolejność tych elementów.

       Domyślnie element

       zawiera pionowe wypełnienie, podobnie jak elementy

       I
       . Poza tym element
       domyślnie zawiera lewy margines.
       studia
       Poświęcanie czasu i uwagi na zdobywanie wiedzy na temat nauczanego przedmiotu, zwłaszcza poprzez książki.
       projekt
       Przesłany plan lub rysunek pokazujący, jak budynek, odzież lub inny przedmiot będzie wyglądał i funkcjonował przed jego zbudowaniem lub wykonaniem.
       Istniejące cele, plany lub intencje, zanim zostaną ucieleśnione lub zrealizowane w namacalnym przedmiocie.
       biznes
       Stanowisko
       Regularne zajęcie, zawód lub rzemiosło danej osoby.
       Lista opisów Demonstracja
       Zagnieżdżone listy
       Cechą, która sprawia, że ​​listy są bardzo wydajne, jest funkcja zagnieżdżania. Każda lista może być zagnieżdżona w innej liście i może być zagnieżdżana wielokrotnie. Jednak możliwość ciągłego zagnieżdżania list nie daje takiej swobody. Listy powinny być zarezerwowane specjalnie tam, gdzie zachowują najbardziej semantyczne znaczenie.
       Sztuka zagnieżdżania list polega na tym, aby wiedzieć, gdzie zaczyna się i kończy każda lista i element listy. Mówiąc konkretnie o listach punktowanych i numerowanych, jedynym elemencie, który może pojawić się bezpośrednio w środku
       I
       jest elementem
       1. . Powtórzmy - jedyny element, który możemy umieścić jako bezpośredni potomek elementów
          I
          , Jest
          1. .

             Jednak wewnątrz elementu

          2. można dodać standardowy zestaw elementów, w tym dowolne elementy
             Lub
             .

             Aby zagnieździć listę, rozpocznij nową listę przed zamknięciem elementu listy. Gdy zagnieżdżona lista będzie już kompletna i zamknięta, zamknij otaczający ją element listy i kontynuuj pracę z oryginalną listą.

             1. Wyprowadzać psa
             2. Złóż pranie
             3. Idź do sklepu i kup:
                • mleko
                • Chleb
                • Ser
             4. Skosić trawnik
             5. ugotować kolację

             Demonstracja list zagnieżdżonych

             Ponieważ listy zagnieżdżone mogą być nieco mylące i wyświetlać niechciane style, jeśli zostaną wykonane nieprawidłowo, przyjrzyjmy się im szybko. Elementy

             I
             może zawierać tylko elementy
             1. . Element
             2. może zawierać dowolny zwykły element. Jednak element
             3. musi być bezpośrednim potomkiem któregokolwiek elementu
                , Lub
                .

                Warto również zauważyć, że gdy listy są zagnieżdżone w innych listach, ich znaczniki będą się zmieniać w zależności od głębokości zagnieżdżenia. W poprzednim przykładzie lista punktowana zagnieżdżona w liście numerowanej wykorzystuje jako znaczniki okrąg zamiast kropki. Ta zmiana następuje, ponieważ lista punktowana jest zagnieżdżona o jeden poziom w liście numerowanej.

                Na szczęście możemy kontrolować wygląd punktorów na dowolnym poziomie, czemu przyjrzymy się dalej.

                Elementy listy stylizacji

                W listach wypunktowanych i numerowanych domyślnie używane są punktory elementów listy. W przypadku list punktowanych są to zazwyczaj kropki w jednolitym kolorze, natomiast w przypadku list numerowanych są to zazwyczaj liczby. Styl i położenie tych znaczników można dostosować za pomocą CSS.

                właściwość typu listy

                Właściwość list-style-type służy do ustawiania zawartości znacznika elementu listy. Dostępne wartości wahają się od kwadratów i miejsc dziesiętnych po numerację ormiańską, a do elementów można dodać stylizację CSS

                ,
                Lub
                1. .

                   Do listy punktowanej lub numerowanej można dodać dowolną wartość właściwości typu listy. Mając to na uwadze, możesz używać numeracji na liście punktowanej i nienumerycznych punktorów na liście numerowanej.

                   • Pomarańczowy
                   • Zielony
                   • Niebieski

                   Ul (typ stylu listy: kwadratowy; )

                   Demonstracja właściwości typu listy

                   wartości typu listy

                   Jak wspomniano wcześniej, właściwość list-style-type zawiera kilka różnych wartości. Poniższa tabela przedstawia te wartości i odpowiadającą im zawartość.

                   Używanie obrazu jako znacznika listy

                   Może nadejść moment, gdy domyślne wartości właściwości list-style-type nie będą wystarczające i będziemy chcieli zdefiniować własny znacznik listy. Najczęściej odbywa się to poprzez umieszczenie obrazu tła dla każdego elementu.

                2. .

                   Proces ten polega na usunięciu dowolnej domyślnej wartości właściwości typu listy i dodaniu obrazu tła i marginesów do elementu

                3. .

                   Więcej szczegółów - ustawienie właściwości list-style-type na none spowoduje usunięcie istniejących znaczników listy. Właściwość tła ustawi obraz tła wraz z jego pozycją i powtórzy, jeśli to konieczne. Właściwość padding zapewni miejsce po lewej stronie tekstu na obraz tła.

                   • Pomarańczowy
                   • Zielony
                   • Niebieski

                   Li ( tło: url("arrow.png") 0 50% bez powtórzeń; typ-stylu listy: brak; lewe dopełnienie: 12px; )

                   Wyświetlanie obrazu jako znacznika

                   właściwość pozycji w stylu listy

                   Domyślnie punktory listy są umieszczane po lewej stronie treści elementu

                4. . Ten styl pozycjonowania jest określany jako outside, co oznacza, że ​​cała treść będzie wyświetlana bezpośrednio po prawej stronie, poza znacznikiem listy. Za pomocą właściwości list-style-position możemy zmienić domyślną wartość outside na inside lub dziedziczyć.

                   outside umieszcza znacznik listy na lewo od elementu

                5. i nie pozwól, aby jakakolwiek treść przepływała poniżej tego znacznika. Wartość wewnętrzna (która jest rzadko używana i można ją zobaczyć) umieszcza znacznik listy w pierwszej linii elementu
                6. i w razie potrzeby umożliwia owinięcie zawartości wokół znacznika.
                   • Babeczki...
                   • Drobna ilość...

                   Ul ( pozycja w stylu listy: wewnątrz; )

                   Demonstracja właściwości pozycji w stylu listy

                   Ogólny styl listy właściwości

                   Właściwości listy, które niedawno omawialiśmy, typ-stylu listy i położenie-stylu listy, można połączyć w jedną właściwość ogólną, styl-listy. W tej właściwości możemy użyć jednej lub wszystkich wartości właściwości listy jednocześnie. Kolejność tych wartości powinna być następująca: typ-stylu listy, po którym następuje pozycja w stylu listy.

                   Ul (styl listy: okrąg w środku; ) ol (styl listy: dolny-rzymski; )

                   Poziome wyświetlanie listy

                   Czasami chcemy wyświetlać listy w poziomie, a nie w pionie. Być może chcemy podzielić listę na kilka kolumn, aby zbudować listę nawigacyjną lub umieścić kilka pozycji listy w jednym wierszu. W zależności od treści i pożądanego wyglądu istnieje kilka sposobów wyświetlania list w pojedynczej linii, na przykład poprzez pobranie wartości właściwości wyświetlania elementów

                7. jak inline lub inline-block lub poprzez właściwość float.

                   Wyświetlanie listy

                   Najszybszym sposobem wyświetlenia listy w jednym wierszu jest podanie elementów

                8. display o wartości inline lub inline-block . To umieści wszystkie elementy
                9. w jednym wierszu z równymi odstępami między każdym elementem listy.

                   Jeśli odstępy między elementami

                10. powodują problemy, można je usunąć przy użyciu tych samych technik, które omówiliśmy w Lekcji 5, Pozycjonowanie treści.

                    Znacznie częściej będziemy używać wartości inline-block zamiast wartości inline. Wartość inline-block ułatwia dodawanie pionowego wypełnienia i innej przestrzeni do elementów

                11. , podczas gdy wartość wbudowana nie.

                    Kiedy wartość właściwości display zostanie zmieniona na inline lub inline-block , znacznik listy (kropka, liczba lub inny) zostanie usunięty.

                    • Pomarańczowy
                    • Zielony
                    • Niebieski

                    Li (wyświetlanie: blok inline; margines: 0 10px; )

                    Demonstracja listy z blokiem wbudowanym

                    Listy ze zmiennoprzecinkowym

                    Zmiana właściwości wyświetlania na inline lub inline-block jest szybka, ale usuwa znaczniki listy. Jeśli są potrzebne, dodaj pływak do każdego elementu

                12. jest lepszą opcją niż zmiana właściwości wyświetlania.

                    Montaż wszystkich elementów

                13. właściwości float, takie jak left, wyrównają wszystkie elementy w poziomie
                14. bezpośrednio obok siebie, bez żadnych odstępów między nimi. Kiedy używamy float dla
                15. , znacznik listy jest wyświetlany domyślnie i będzie umieszczony na górze elementu
                16. obok niego. Aby zapobiec pojawianiu się znacznika listy nad innymi elementami
                17. , należy dodać poziomy margines lub wypełnienie.
                    • Pomarańczowy
                    • Zielony
                    • Niebieski

                    Li ( float: lewy; margines: 0 20px; )

                    Demonstracja listy ze zmiennoprzecinkowym

                    Podobnie jak w przypadku innych elementów pływających, zakłóca to przepływ strony. Nie możemy zapomnieć o wyczyszczeniu pływaka i przywróceniu normalnego przepływu strony - najpopularniejszą metodą jest użycie clearfix.

                    Przykład listy nawigacji

                    Często projektujemy i znajdujemy menu nawigacyjne, które korzystają z list nieuporządkowanych. Listy te są zwykle układane poziomo przy użyciu jednej z dwóch metod wspomnianych wcześniej. Tutaj na przykład jest poziome menu nawigacyjne ułożone przy użyciu nieuporządkowanej listy, w której znajdują się elementy

                18. są wyświetlane jako blok inline.

                    Nawigacja ul ( czcionka: pogrubiona 11 pikseli „Helvetica Neue”, Helvetica, Arial, bezszeryfowa; margines: 0; dopełnienie: 0; transformacja tekstu: wielkie litery; ) .navigation li ( display: inline-block; ) .navigation a ( tło: #395870; tło: gradient liniowy (#49708f, #293f50); obramowanie po prawej stronie: 1px solid rgba(0, 0, 0, .3); kolor: #fff; dopełnienie: 12px 20px; dekoracja tekstu: brak; ) .navigation a:hover ( tło: #314b60; box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); ) .navigation li:first-child a ( border-promień: 4px 0 0 4px; ) .navigation li:last-child a ( border-right: 0; border-promień: 0 4px 4px 0; )

                    Demonstracja listy nawigacyjnej

                    Na praktyce

                    Teraz, gdy wiemy, jak tworzyć listy w HTML i CSS, przyjrzyjmy się naszej witrynie Styles Conference i zobaczmy, gdzie możemy używać list.

                    Teraz menu nawigacyjne w elementach

                    I