Vytvoření seznamu seznamů v html. Vnořené seznamy s automatickým číslováním

Číslované seznamy jsou sbírkou prvků s jejich sériovými čísly. Typ a typ číslování závisí na parametrech prvku

, který slouží k vytvoření seznamu. Následující hodnoty mohou sloužit jako prvky číslování:
• arabské číslice (1, 2, 3, ...);
• arabské číslice s úvodní nulou pro čísla menší než deset (01, 02, 03, ...,10);
• velká latinská písmena (A, B, C, ...);
• malá písmena latinky (a, b, c, ...);
• velká římská čísla (I, II, III, ...);
• malá římská čísla (i, ii, iii, ...);
• arménské číslování;
• Gruzínské číslování.

Z praktického hlediska lze principy zobrazování položek v odrážkovém seznamu aplikovat podobně jako u číslovaného seznamu. Ale vzhledem k tomu, že máme co do činění s výčtem, existují některé funkce, o kterých se bude dále diskutovat.

Číslování seznamu

Je povoleno začít seznam z libovolného čísla; K tomuto účelu se používá atribut start prvku

nebo hodnotu prvku
1. . Hodnota je libovolné kladné celé číslo. Nezáleží na tom, jaký typ číslování je nastaven, i když jsou jako seznam použita latinka. Pokud jsou na seznam aplikovány oba atributy začátku a hodnoty současně, pak má přednost druhý a číslování se zobrazí od čísla určeného hodnotou , jak je uvedeno v příkladu 1.

   Příklad 1: Změna číslování seznamu

   4. O své pracoviště byste se měli dobře starat.
   5. Upravte osvětlení v místnosti tak, aby byl zdroj světla umístěn na straně nebo za operátorem.
   10. Aby se předešlo zdravotním komplikacím, doporučuje se zvolit židli s měkkým sedákem.

   První prvek seznamu v tomto příkladu bude začínat římskou číslicí IV, protože je zadán atribut start="4", pak následuje číslo V a poslední prvek je mimo pořadí a je mu přiřazeno číslo X (obrázek 1).

   Rýže. 1. Římské číslice v seznamu

   Psaní čísel

   Ve výchozím nastavení má číslovaný seznam určitý vzhled: nejprve je číslo, pak tečka a poté se text zobrazí oddělený mezerou. Tato forma psaní je vizuální a pohodlná, ale někteří vývojáři dávají přednost jinému způsobu navrhování číslování seznamů. Totiž tak, že místo tečky je uzavírací závorka, jak je znázorněno na Obr. 2 nebo něco podobného.

   

   Rýže. 2. Číslovaný seznam se závorkou

   Styly umožňují změnit typ číslování seznamů pomocí vlastností obsahu a protipřírůstku. Nejprve je třeba nastavit volič ol na counter-reset : položka , je to nutné, aby číslování v každém novém seznamu začalo znovu. V opačném případě bude číslování pokračovat a místo 1,2,3 uvidíte 5,6,7. Hodnota položky je jedinečný identifikátor počítadla, volíme si ji sami. Dále musíte skrýt původní značky prostřednictvím vlastnosti stylu list-style-type s hodnotou none .

   Vlastnost content obvykle funguje ve spojení s pseudoprvky ::after a ::before. Konstrukce li::before tedy říká, že před každý prvek seznamu musí být přidán nějaký obsah (příklad 2).

   Příklad 2. Vytvoření vlastního číslování

   Li::before ( content: counter(item) ") "; /* Přidejte k číslům závorku */ counter-increment: item; /* Nastavte název čítače */ )

   Vlastnost content s hodnotou counter(item) zobrazuje číslo; Přidáním závorky, jak ukazuje tento příklad, získáme požadovaný typ číslování. pro zvýšení čísla seznamu o jednu je potřeba protipřírůstek. Všimněte si, že všude je použit stejný identifikátor, pojmenovaný item . Konečný kód je uveden v příkladu 3.

   Příklad 3: Změna zobrazení seznamu

   1. První
   2. Druhý
   3. Třetí
   4. Čtvrtý

   Pomocí výše uvedené metody můžete vytvořit libovolný typ číslovaného seznamu, například vložit číslo do hranatých závorek, v tomto případě se ve stylech změní pouze jeden řádek.

   Obsah: "[" counter(item) "] ";

   Seznam s ruskými písmeny

   Existuje číslovaný seznam s latinskými písmeny, ale pro seznam nejsou žádná ruská písmena. Mohou být přidány uměle pomocí výše uvedené techniky. Vzhledem k tomu, že se číslování provádí prostřednictvím stylů, samotný seznam zůstává původní, pouze se do něj přidá vybraná třída, říkejme jí cyrilice (příklad 4).

   Příklad 4: Kód pro vytvoření seznamu

   1. Jeden
   2. Dva
   3. Tři

   Přidávání písmen se provádí pomocí pseudoprvku ::before a vlastnosti content. Protože každý řádek musí mít své vlastní písmeno, použijeme pseudotřídu :nth-child(1) , s číslem písmene napsaným v závorce. První písmeno je přirozeně A, druhé B, třetí C atd. Celá tato sada se přidá do voliče li následovně (příklad 5).

   Příklad 5: Použití pseudo-class:nth-child

   Cyrilice li:nth-child(1)::before (obsah: "a)"; ) .cyrilice li:nth-child(2)::before (obsah: "b)"; ) .cyrilice li:nth-child(3)::before ( content: "at)"; )

   V tomto příkladu je za každým písmenem závorka, všechna písmena jsou malá. Můžete si definovat vlastní typ číslování seznamů, může například obsahovat velká písmena s tečkou, s jednou nebo dvěma závorkami nebo pouze písmena. Na rozdíl od standardního číslování si zde můžeme dělat, co chceme. Seznam deseti písmen by měl stačit téměř pro všechny situace, ale pokud se náhle ukáže, že to nestačí, nic nám nebrání rozšířit náš seznam o alespoň všechna písmena ruské abecedy.

   Nakonec upravíme zarovnání a polohu písmen, případně specifikujeme velikost písma, barvu a další parametry (příklad 6).

   Příklad 6. Seznam s ruskými písmeny

   1. Boršč
   2. Štikové řízky
   3. Kulebyaka
   4. Houby v zakysané smetaně
   5. Palačinky s kaviárem
   6. Kvass

   Výsledek tento příklad znázorněno na Obr. 3.

   Seznamy jsou součástí Každodenní život. Seznam úkolů definuje, co se dělá. Navigační trasy nabízejí seznam tras krok za krokem. Recepty vyžadují seznam ingrediencí a seznam pokynů. Seznamy se nacházejí téměř všude, takže je snadné pochopit, proč jsou také populární na internetu.

   Když chceme na webu použít seznam, HTML nabízí tři různé typy na výběr: seznam s odrážkami, číslovaný a popisný seznam. Jaký typ seznamu použít a zda seznam vůbec použít, závisí na obsahu a sémanticky nejvhodnější možnosti jeho zobrazení.

   Kromě tří odlišné typy seznamy dostupné v HTML, existuje několik způsobů, jak tyto seznamy stylizovat pomocí CSS. Můžeme si například vybrat, jaký typ odrážky pro seznam určíme. Značka může být čtverec, kruh, číslo, písmeno nebo případně žádný. Kromě toho se můžeme rozhodnout, jak má být seznam zobrazen – vertikálně nebo horizontálně. Všechny tyto možnosti hrají důležitou roli při stylování našich webových stránek.

   Seznamy s odrážkami

   Seznam s odrážkami nebo neuspořádaný seznam je jednoduše seznam souvisejících položek, u kterých na pořadí nezáleží. Vytvoření seznamu s odrážkami v HTML se provádí pomocí prvku seznamu bloků

   . Každá jednotlivá položka v seznamu je označena prvkem
   • .

     Ve výchozím nastavení většina prohlížečů přidává k prvku vertikální okraj a odsazení vlevo

     a před každým prvkem
     • klade jednobarevný bod. Tento bod se nazývá značka seznamu a lze jej změnit pomocí CSS.
       • oranžový
       • Zelená
       • Modrý

       Zobrazit seznam s odrážkami

       Číslované seznamy

       Číslovaný nebo seřazený seznam položek

       Velmi podobně jako seznam s odrážkami se stejným způsobem vytvářejí jednotlivé odrážky. Hlavní rozdíl mezi seznamy spočívá v tom, že u uspořádaného seznamu záleží na pořadí, ve kterém jsou položky prezentovány.

       Protože na pořadí záleží, číslovaný seznam používá jako výchozí odrážku čísla místo tečky.

       1. Procházka po Apricot Street
       2. Odbočte na Vinogradnaya

       Ukázka číslovaného seznamu

       Číslované seznamy mají také k dispozici jedinečné atributy, včetně počátečního a obráceného.

       počáteční atribut

       Atribut start určuje číslo, na kterém má číslovaný seznam začínat. Ve výchozím nastavení začínají seznamy 1, ale mohou nastat situace, kdy by seznam měl začínat 30 nebo jiným číslem. Když na element použijeme atribut start

       , pak můžeme přesně určit, od kterého čísla má počítání číslovaného seznamu začít.

       Atribut start přijímá pouze celočíselné hodnoty, i když číslované seznamy mohou používat různé systémy číslování, jako jsou římské číslice.

       30. Procházka po Apricot Street
       31. Odbočte na Vinogradnaya
       32. Zastavte na Shady Street

       Ukázka atributu start

       obrácený atribut

       Atribut obrácený při přidání do prvku

       umožňuje zobrazení seznamu v opačném pořadí. Seznam pěti položek očíslovaných 1 až 5 lze obrátit a očíslovat 5 až 1.

       Atribut obrácený je booleovský atribut a jako takový nenabývá žádné hodnoty. Může to být pravda nebo nepravda. False je výchozí hodnota, hodnota se stane pravdivou, když se na prvku objeví obrácený atribut

       .
       1. Procházka po Apricot Street
       2. Odbočte na Vinogradnaya
       3. Zastavte na Shady Street

       Ukázka obráceného atributu

       atribut hodnoty

       Atribut value lze aplikovat na jednotlivé prvky

       1. v číslovaném seznamu změnit jeho hodnotu v seznamu. Číslo libovolné položky seznamu, která se objeví pod položkou seznamu s atributem value, bude podle toho přepočítáno.

          Například, pokud má druhá položka seznamu atribut value nastavený na 9, číslo této položky seznamu bude na výstupu, jako by to bylo deváté. Všechny následující položky seznamu budou číslovány od 9.

          1. Procházka po Apricot Street
          9. Odbočte na Vinogradnaya
          10. Zastavte na Shady Street

          Demonstrace atributu hodnoty

          Popisné seznamy

          Dalším typem seznamu, který uvidíte online (ale ne tak často jako seznamy s odrážkami nebo číslované seznamy), je seznam popisů. Tyto seznamy se používají k identifikaci několika termínů a jejich popisů, jako například ve slovníku.

          Vytvoření seznamu popisů v HTML se provádí pomocí prvku block

          . Místo použití prvku

          K označení položek seznamu vyžaduje seznam popisu dva prvky bloku:

          na termín a

          pro popis.

          Popisný seznam může obsahovat mnoho termínů a popisů, jeden po druhém. Kromě toho může takový seznam obsahovat několik termínů na popis a také několik popisů na termín. Jeden termín může mít více významů a může být předmětem více popisů. Naopak, jeden popis může odpovídat několika výrazům.

          Při přidávání prvku seznamu popisu

          musí jít do prvku

          . Termín a popis, který za ním bezprostředně následuje, spolu souvisí. Proto je důležité pořadí těchto prvků.

          Ve výchozím nastavení prvek

          zahrnuje vertikální vycpávky, podobné prvky

          A
          . Navíc živel
          standardně zahrnuje levý okraj.
          studie
          Věnovat čas a pozornost získávání znalostí o vyučovaném předmětu, zejména prostřednictvím knih.
          projekt
          Odeslaný plán nebo výkres, který ukazuje, jak bude budova, oblečení nebo jiná položka vypadat a fungovat, než bude postavena nebo vyrobena.
          Existující cíle, plány nebo záměry předtím, než jsou ztělesněny nebo realizovány ve hmotném objektu.
          podnikání
          Práce
          Běžné povolání, povolání nebo řemeslo osoby.
          Popis Seznam Ukázka
          Vnořené seznamy
          Funkce, díky které jsou seznamy velmi výkonné, je funkce vnořování. Každý seznam může být vnořen do jiného seznamu a mohou být vnořeny vícekrát. Ale schopnost vnořovat seznamy donekonečna vám k tomu nedává svobodu. Seznamy by měly být vyhrazeny speciálně tam, kde si zachovávají největší sémantický význam.
          Trik vnořování seznamů je vědět, kde každý seznam a položka seznamu začíná a končí. Když už mluvíme konkrétně o seznamech s odrážkami a číslovaných seznamech, jediném prvku, který se může objevit přímo uvnitř
          A
          je prvkem
          1. . Opakujeme – jediný prvek, který můžeme dát jako přímého potomka prvků
             A
             , je
             1. .

                Nicméně uvnitř prvku

             2. lze přidat standardní sadu prvků, včetně libovolných prvků
                nebo
                .

                Chcete-li připojit seznam - před zavřením položky seznamu začněte nový seznam. Jakmile je vnořený seznam kompletní a uzavřený, zavřete přiloženou položku seznamu a pokračujte s původním seznamem.

                1. Vyvenčit psa
                2. Skládané prádlo
                3. Jděte do obchodu a kupte:
                   • Mléko
                   • Chléb
                   • Sýr
                4. Posekat trávník
                5. vařit večeři

                Ukázka vnořených seznamů

                Protože vnořené seznamy mohou být trochu matoucí a zobrazovat nežádoucí styly, pokud jsou provedeny nesprávně, pojďme se na ně rychle podívat. Elementy

                A
                může obsahovat pouze prvky
                1. . Živel
                2. může obsahovat libovolný běžný prvek, který chcete. Nicméně prvek
                3. musí být přímým potomkem kteréhokoli prvku
                   nebo
                   .

                   Za zmínku také stojí, že když jsou seznamy vnořeny do jiných seznamů, jejich značky se budou měnit v závislosti na hloubce vnoření. V předchozím příkladu používá seznam s odrážkami vnořený do číslovaného seznamu jako značky místo tečky kruh. K této změně dochází, protože seznam s odrážkami je vnořen o jednu úroveň do číslovaného seznamu.

                   Naštěstí můžeme ovládat, jak vypadají odrážky na jakékoli úrovni, na kterou se podíváme příště.

                   Styling položek seznamu

                   Seznamy s odrážkami a číslované seznamy používají ve výchozím nastavení odrážky položek seznamu. U seznamů s odrážkami to bývají plné barevné tečky, zatímco u číslovaných seznamů to bývají čísla. Používáním CSS styl a polohu těchto značek lze upravit.

                   vlastnost typu list-style

                   Vlastnost list-style-type se používá k nastavení obsahu značky položky seznamu. Dostupné hodnoty se pohybují od čtverců a desetinných míst až po arménské číslování a k prvkům lze přidat styly CSS

                   ,
                   nebo
                   1. .

                      Do seznamu s odrážkami nebo číslovaného seznamu lze přidat jakoukoli hodnotu pro vlastnost list-style-type. S ohledem na to můžete použít číslování v seznamu s odrážkami a nenumerické odrážky v číslovaném seznamu.

                      • oranžový
                      • Zelená
                      • Modrý

                      Ul (list-style-type: square; )

                      Ukázka vlastnosti list-style-type

                      hodnoty typu list-style

                      Jak již bylo zmíněno dříve, vlastnost list-style-type obsahuje několik různých hodnot. Následující tabulka ukazuje tyto hodnoty a jejich odpovídající obsah.

                      Použití obrázku jako značky seznamu

                      Může nastat chvíle, kdy výchozí hodnoty pro vlastnost list-style-type nestačí a budeme chtít definovat vlastní značku seznamu. Nejčastěji se to provádí umístěním obrázku na pozadí pro každý prvek.

                   2. .

                      Proces zahrnuje odstranění jakékoli výchozí hodnoty vlastnosti typu seznamu a přidání obrázku na pozadí a okrajů k prvku

                   3. .

                      Další podrobnosti – nastavením vlastnosti list-style-type na none odstraníte existující značky seznamu. Vlastnost pozadí nastaví obrázek na pozadí spolu s jeho polohou a v případě potřeby se zopakuje. A vlastnost padding poskytne místo nalevo od textu pro obrázek na pozadí.

                      • oranžový
                      • Zelená
                      • Modrý

                      Li ( pozadí: url("arrow.png") 0 50 % bez opakování; typ-stylu seznamu: žádný; levý padding: 12px; )

                      Zobrazení obrázku jako značky

                      vlastnost list-style-position

                      Ve výchozím nastavení jsou odrážky seznamu umístěny nalevo od obsahu v prvku

                   4. . Tento styl umístění je popsán jako outside , což znamená, že veškerý obsah se zobrazí přímo vpravo, mimo značku seznamu. Pomocí vlastnosti list-style-position můžeme změnit výchozí hodnotu outside na inside nebo inherit .

                      outside umístí značku seznamu nalevo od prvku

                   5. a nedovolte, aby pod touto značkou protékal žádný obsah. Vnitřní hodnota (která se používá zřídka a je vidět) umístí značku seznamu na první řádek prvku
                   6. a umožňuje, aby se obsah v případě potřeby obalil kolem značky.
                      • Košíčky...
                      • Kropení...

                      Ul (list-style-position: inside; )

                      Demonstrace vlastnosti ve stylu seznamu

                      Obecný styl seznamu vlastností

                      Vlastnosti seznamu, o kterých jsme nedávno hovořili, list-style-type a list-style-position , lze zkombinovat do jedné obecné vlastnosti, list-style . V této vlastnosti můžeme použít jednu nebo všechny hodnoty vlastností seznamu současně. Pořadí těchto hodnot by mělo být: list-style-type následovaný list-style-position .

                      Ul ( styl seznamu: kruh uvnitř; ) ol ( styl seznamu: nižší římský; )

                      Horizontální zobrazení seznamu

                      Někdy chceme seznamy zobrazovat spíše vodorovně než svisle. Možná chceme rozdělit seznam do několika sloupců a vytvořit navigační seznam nebo umístit několik položek seznamu do jednoho řádku. V závislosti na obsahu a přání vzhled Existuje několik způsobů, jak zobrazit seznamy jako jeden řádek, například převzetím hodnoty vlastnosti zobrazení prvků

                   7. jako inline nebo inline-block nebo prostřednictvím vlastnosti float.

                      Zobrazení seznamu

                      Většina rychlý způsob zobrazit seznam na jednom řádku - slouží k nastavení prvků

                   8. vlastnost display s hodnotou inline nebo inline-block . Tím se vloží všechny prvky
                   9. na jednom řádku se stejnými mezerami mezi každou položkou seznamu.

                      Pokud jsou mezery mezi prvky

                   10. způsobují problémy, lze je odstranit pomocí stejných technik, o kterých jsme hovořili v lekci 5, Umístění obsahu.

                       Mnohem častěji budeme místo inline hodnoty používat hodnotu inline-block. Hodnota inline-block usnadňuje přidání vertikálního odsazení a dalšího prostoru k prvkům

                   11. , zatímco vložená hodnota nikoli.

                       Když se hodnota vlastnosti display změní na inline nebo inline-block , odstraní se značka seznamu, ať už jde o tečku, číslo nebo jiné.

                       • oranžový
                       • Zelená
                       • Modrý

                       Li ( display: inline-block; margin: 0 10px; )

                       Ukázka seznamu s inline-blokem

                       Seznamy s plovákem

                       Změna vlastnosti zobrazení na inline nebo inline-block je rychlá, ale odstraní značky seznamu. Pokud jsou potřeba, přidejte ke každému prvku plovák

                   12. je lepší volba než změna vlastnosti zobrazení.

                       Instalace pro všechny prvky

                   13. float vlastnosti jako vlevo zarovnají všechny prvky vodorovně
                   14. přímo vedle sebe bez jakýchkoli mezer mezi nimi. Když použijeme plovák pro
                   15. , značka seznamu se zobrazí ve výchozím nastavení a bude umístěna nad položkou
                   16. vedle něj. Chcete-li zabránit tomu, aby se značka seznamu zobrazovala nad ostatními položkami
                   17. , je třeba přidat vodorovný okraj nebo výplň.
                       • oranžový
                       • Zelená
                       • Modrý

                       Li ( plovoucí: vlevo; okraj: 0 20px; )

                       Ukázka seznamu s plovákem

                       Stejně jako u jiných plovoucích prvků to přeruší tok stránky. Nesmíme zapomenout vyčistit float a vrátit stránku do normálního chodu – nejběžnější způsob je přes clearfix.

                       Příklad navigačního seznamu

                       Často navrhujeme a nacházíme navigační nabídky, které používají neuspořádané seznamy. Tyto seznamy jsou obvykle uspořádány vodorovně pomocí jedné ze dvou výše uvedených metod. Zde je například horizontální navigační nabídka rozložená pomocí neuspořádaného seznamu, ve kterém jsou prvky

                   18. jsou zobrazeny jako inline-block .

                       Navigation ul ( písmo: tučné 11px "Helvetica Neue", Helvetica, Arial, bezpatkové; okraj: 0; výplň: 0; text-transform: velká písmena; ) .navigation li ( display: inline-block; ) .navigation a ( background: #395870; background: linear-gradient(#49708f, #293f50); border-right: 1px solid rgba(0, 0, 0, .3); color: #fff; padding: 12px 20px; text-decoration: none; ) .navigation a:hover ( background: #314b60; box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); ) .navigation li:first-child a ( border-radius: 4px 0 0 4px; ) .navigation li:last-child a ( border-right: 0; border-radius: 0 4px 4px 0; )

                       Ukázka navigačního seznamu

                       Na praxi

                       Nyní, když víme, jak vytvářet seznamy v HTML a CSS, pojďme se podívat na naše stránky Styles Conference a zjistit, kde bychom mohli seznamy použít.

                       Nyní navigační nabídky v prvcích

                       A