Jedním z typů seznamů implementovaných v HTML je seznam s odrážkami. Jinak se seznamy tohoto typu nazývají nečíslované nebo neuspořádané. Příjmení se často používá jako formální překlad názvu odpovídajícího tagu

, s jehož pomocí jsou seznamy tohoto typu organizovány v HTML dokumentech (UL - Unordered List, neuspořádaný seznam).

V seznamu s odrážkami se pro zvýraznění jeho prvků používají speciální znaky zvané značky seznamu (často se jim říká odrážky, což je formální výslovnost anglického výrazu bullet). Vzhled značek seznamu určuje prohlížeč a při vytváření vnořených seznamů prohlížeče automaticky diverzifikují vzhled značek na různých úrovních vnoření.

Tagy

A

Chcete-li vytvořit seznam s odrážkami, musíte použít značku kontejneru, uvnitř které jsou umístěny všechny prvky seznamu. Značky úvodního a závěrečného seznamu poskytují zalomení řádku před a za seznamem, čímž oddělují seznam od hlavního obsahu dokumentu, takže zde není potřeba používat značky odstavce


.

Každý prvek seznamu musí začínat značkou

• (LI - Položka seznamu, prvek seznamu). Štítek
• nevyžaduje odpovídající uzavírací značku, ačkoli její přítomnost není v zásadě zakázána. Prohlížeče se obvykle spustí pokaždé, když zobrazí dokument. nový prvek seznam z nového řádku.

  Poskytnuté informace jsou dostatečné pro vytvoření základního seznamu s odrážkami. Uveďme příklad HTML dokumentu pomocí odrážkového seznamu, jehož zobrazení prohlížečem je na Obr. 2.1.

  Znamení zvěrokruhu:

  • Beran

  • Býk

  • Dvojčata

  • Panna

  • Váhy

  • Štír

  • Střelec

  • Kozoroh

  • Vodnář

  • Ryba

  Rýže. 2.1. Zobrazení seznamu s odrážkami v prohlížeči

  Všimněte si, že kromě prvků seznamu označených tagem

• , mohou být přítomny další prvky HTML. Ve výše uvedeném příkladu je jedním z těchto prvků prostý text, který není položkou seznamu, ale funguje jako jeho nadpis.

  Poznámka

  Některé učebnice jazyka HTML uvádějí, že k nastavení názvu seznamu by měla být použita značka kontejneru (LH - Záhlaví seznamu, záhlaví seznamu). Tuto značku v současnosti nerozpoznají žádné běžné prohlížeče a není součástí specifikace HTML. Jeho použití se tak stává bezpředmětným, ačkoli nepovede k žádným chybám.

  Ve štítku

  lze zadat dva parametry: COMPACT a TYPE.

  Parametr COMPACT je zapsán bez hodnoty a používá se k tomu, aby to prohlížeči oznámil tento seznam by měly být prezentovány v kompaktní formě. Může být například zmenšeno písmo nebo vzdálenost mezi řádky seznamu atd.

  Poznámka

  Aktuálně přítomnost parametru COMPACT ve značce

  nijak neovlivňuje zobrazení seznamů v předních prohlížečích. Proto aplikace tento parametr je nesmyslné, zejména proto, že jeho použití není doporučeno specifikací HTML 4.0.

  Parametr TYPE může nabývat následujících hodnot: disk, kruh a čtverec. Tento parametr se používá k vynucení zobrazení odrážek seznamu. Přesný typ značky bude záviset na prohlížeči, který používáte. Typické možnosti zobrazení jsou následující:

  TYP = disk - značky jsou zobrazeny jako vyplněné kruhy; TYP = kruh - značky jsou zobrazeny jako otevřené kruhy; TYP = čtverec - značky se zobrazují jako vyplněné čtverce. Příklad záznamu:

  .

  Výchozí hodnota je TYP = disk. U vnořených seznamů s odrážkami je výchozí hodnota disk na první úrovni, kruh na druhé úrovni, čtverec na třetí úrovni a dále. To je přesně to, co se dělá v nejnovější verze Prohlížeče Netscape a internet Explorer. Upozorňujeme, že jiné prohlížeče mohou značky zobrazovat jinak. Například v HTML specifikace 4.0 pro typ značky zobrazené při hodnotě TYP = čtverec je indikován nevyplněný čtverec (čtvercový obrys).

  Parametr TYPE se stejnými hodnotami lze použít k určení typu značek pro jednotlivé prvky seznamu. Za tímto účelem je povoleno zadat parametr TYPE s odpovídající hodnotou v tagu prvku seznamu

  • .

    Příklad záznamu:

  • .

    Poznámka

    Prohlížeče interpretují specifikaci typu odrážky pro jednotlivé položky seznamu odlišně. Prohlížeč Netscape změní vzhled značky pro tuto a všechny následující, dokud nenarazí na další předefinování vzhledu značky. Internetový prohlížeč Průzkumník změní vzhled značky pouze pro tento prvek.

    Grafické značky seznamu

    Můžete použít grafické obrázky jako odrážky seznamu, což se široce používá k vytváření atraktivních, dobře navržených dokumentů HTML. Ve skutečnosti se taková příležitost přímo nenabízí jazyk HTML, ale je implementován poněkud uměle. To neznamená, že to není doporučené nebo zavrženíhodné, ale pouze to, že zde nebudou použity žádné speciální konstrukce jazyka HTML.

    Abyste pochopili myšlenku, musíte pochopit mechanismus implementace seznamů na stránky HTML. Ukazuje se, že značka seznamu

    (stejně jako seznam značek jiných typů, diskutovaný níže) provádí jediný úkol - říká prohlížeči, že všechny informace umístěné za touto značkou by měly být zobrazeny posunuté doprava (odsazené) o určitou hodnotu. Tagy
    • , které ukazují na jednotlivé položky seznamu, poskytují standardní značky položek seznamu.

      Pokud potřebujeme vytvořit seznam s grafickými značkami, pak se bez značek zcela obejdeme

    • . Bude stačit vložit požadovaný grafický obrázek před každý prvek seznamu. Jediný problém, který je třeba vyřešit, je oddělení prvků seznamu od sebe. K tomu můžete použít značky odstavce

      Nebo vynutit posun řádku
      . Příklad implementace seznamu grafickými značkami, jejichž zobrazení je na Obr. 2.2 je zobrazen níže:

      který bude přenášen pouze jednou. Velikost souboru malého obrázku je také extrémně malá.

      Poznámka

      Metody vytváření seznamů s grafickými odrážkami jsou postupně popsány v kapitole 8.

      
      

      Hlavní použití seznamů:

      Číslované – zobrazí seznam prvků, které následují v přesně definovaném pořadí.

      S odrážkami – zobrazí prvky v náhodném pořadí.

      Víceúrovňové - pro specifikaci informací o určitých prvcích.

      Seznam definic – používá se k formátování slovníků.

      HTML stránka s číslovaným seznamem

      Tagy se používají k vytváření číslovaných seznamů

      1. Štítek

         Štítek

         1. Ve výchozím nastavení jsou položky seznamu číslovány v pořadí 1, 2, 3... Pomocí atributu TYP můžete změnit styl číslování.

            Číslování hodnot TYP A A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..

            Pokud již přidáte existující seznam nové hodnoty, prohlížeč jej automaticky přepočítá.

            Pomocí atributů POČÁTEČNÍ HODNOTA můžete změnit pořadí číslování seznamu.

            START - slouží k zadání počátečního čísla seznamu, odlišného od 1.

            HODNOTA - umožňuje přiřadit libovolnému prvku seznamu libovolné číslo.

            Příklad:

            HTML stránka s odrážkami

            Tagy se používají k vytváření seznamů s odrážkami

            Štítek

            Označí se začátek/konec celého seznamu.

            Štítek

            • označují začátek/konec jednotlivého prvku seznamu.

              Ve výchozím nastavení jsou položky seznamu označeny černým kroužkem. Atribut TYPE lze použít ke změně stylu označení.

              V rámci jednoho seznamu můžete použít různá označení prvků seznamu.

              Příklad:

              Víceúrovňová html stránka seznamu

              Chcete-li vytvořit víceúrovňové seznamy, můžete použít buď seznamy s odrážkami, číslované seznamy nebo kombinaci obou. Víceúrovňový seznam se vytvoří vnořením jednoho seznamu do těla druhého. Hlavním úkolem je nenechat se zmást. K tomu vám doporučuji udělat pro jednotlivé seznamy různá odsazení.

              Seznamy definic html stránek

              K vytváření seznamů definic se používají tři značky:

              - začátek/konec seznamu.

              - začátek/konec konkrétního období.

              - začátek/konec vysvětlujícího článku daného pojmu.

              Tagy

              A

              není nutné střídat. Tito. Můžete „propojit“ několik termínů do jedné definice a naopak.

              Příklad:

              HTML kód: Termín 1 Abstrakt1 až termín 1 Abstrakt2 až termín 1

              Displej prohlížeče: Termín 1 Abstrakt1 až termín 1 Abstrakt2 až termín 1

              Protože na tomto webu jsou na některé prvky aplikovány určité styly, jejich zobrazení v tabulce se poněkud liší od toho, co dostanete.

              HTML seznamy slouží k seskupování souvisejících informací. Existují tři typy seznamů:

              seznam s odrážkami —

              - každý prvek seznamu
              • označeno fixem,
                číslovaný seznam —
                - každý prvek seznamu
                1. označený číslem
                   seznam definic- - se skládá z výrazových dvojic
                   —
                   definice.

                   Každý seznam je kontejner, ve kterém jsou umístěny prvky seznamu nebo dvojice termín-definice. Prvky seznamu se chovají jako prvky bloku, jsou naskládány pod sebou a zabírají celou šířku bloku kontejneru. Každá položka seznamu má na straně další blok, který se nepodílí na rozvržení.

                   Vytváření HTML seznamů

                   1. Seznam s odrážkami

                   Seznam s odrážkami je neuspořádaný seznam (z anglického neuspořádaného seznamu). Vytvořeno pomocí spárované značky

                   . Značka prvku seznamu je štítek, například vyplněný kruh.

                   Prohlížeče ve výchozím nastavení přidávají do bloku seznamu následující formátování:

                   Každý prvek seznamu je vytvořen pomocí párového tagu

                2. (z anglické položky seznamu).
                dostupný .
                • Microsoft
                • Google
                • Jablko
                Rýže. 1. Seznam s odrážkami

                2. Číslovaný seznam

                Číslovaný seznam je vytvořen pomocí spárovaného tagu. Každá položka seznamu je také vytvořena pomocí prvku

              • . Prohlížeč čísluje prvky v pořadí automaticky, a pokud smažete jeden nebo více prvků takového seznamu, zbývající čísla se automaticky přepočítají.

                Blok seznamu má také výchozí styly prohlížeče:

              • K dispozici je atribut value, který umožňuje změnit výchozí číslo pro vybranou položku seznamu. Například pokud pro první položku v seznamu, kterou nastavíte
              • , pak bude zbývající číslování přepočítáno vzhledem k nové hodnotě.

                Pro značku

                K dispozici jsou následující atributy:
                Tabulka 1. Atributy značek

                Atribut	Popis, přijatá hodnota
                obrácený	Atribut obrácený způsobí, že se seznam zobrazí v obráceném pořadí (například 9, 8, 7...).
                Start	Atribut start určuje počáteční hodnotu, od které bude číslování začínat, například konstrukce první položce bude přiděleno sériové číslo „10“. Zároveň můžete zadat typ číslování, např. .
                typ	Atribut type určuje typ značky, která se má v seznamu použít (písmena nebo čísla). Přijímané hodnoty: 1 — výchozí hodnota, desítkové číslování. A — číslování seznamu v abecedním pořadí, velká písmena (A, B, C, D). a — číslování seznamu v abecedním pořadí, malá písmena (a, b, c, d). I - číslování římskými velkými číslicemi (I, II, III, IV). i — číslování římskými malými číslicemi (i, ii, iii, iv).

                1. Microsoft
                2. Google
                3. Jablko
                Rýže. 2. Číslovaný seznam

                3. Seznam definic

                Seznamy definic jsou vytvořeny pomocí značky

                . Chcete-li přidat výraz, použijte značku
                a pro vložení definice - tag
                .

                Blok seznamu definic má následující výchozí styly prohlížeče:

                Pro značky

                ,

                A

                dostupný .

                Ředitel:

                Petr Točilin

                Obsazení:

                Andrej Gaidulyan

                Alexej Gavrilov

                Vitalij Gogunskij

                Marija Koževnikovová

                Rýže. 3. Seznam definic

                4. Vnořený seznam

                Možnosti jednoduchých seznamů často nestačí, například při vytváření obsahu se bez vnořené položky. Označení pro vnořený seznam by bylo následující:

                • odstavec 1
                • bod 2.
                  • Článek 2.1.
                  • Článek 2.2.
                    • Článek 2.2.1.
                    • Článek 2.2.2.
                  • Článek 2.3.
                • bod 3.

                
                Rýže. 4. Vnořený seznam

                5. Víceúrovňový číslovaný seznam

                Víceúrovňový seznam se používá k zobrazení položek seznamu na různých úrovních s různým odsazením. Označení pro víceúrovňový číslovaný seznam by bylo následující:

                1. odstavec
                2. odstavec
                   1. odstavec
                   2. odstavec
                   3. odstavec
                      1. odstavec
                      2. odstavec
                      3. odstavec
                   4. odstavec
                3. odstavec
                4. odstavec

                Toto výchozí označení vytvoří nové číslování pro každý vnořený seznam, počínaje jedničkou. Chcete-li vytvořit vnořené číslování, musíte použít následující vlastnosti:
                counter-reset resetuje jeden nebo více čítačů, specifikuje hodnotu, která má být resetována;
                čítač-přírůstek udává hodnotu přírůstku čítače, tzn. v jakých přírůstcích bude každá následující položka očíslována;
                obsah - generovaný obsah, v tomto případě zodpovídá za zobrazení čísla před každou položkou seznamu.

                Ol ( /* odebere standardní číslování */ list-style: none; /* Identifikujte počítadlo a pojmenujte jej li. Hodnota počítadla není zadána - ve výchozím nastavení je 0 */ counter-reset: li; ) li :before ( /* Definujeme prvek, který bude číslován - li. Pseudoprvek before označuje, že obsah vložený pomocí vlastnosti content bude umístěn před položky seznamu. Zde také nastavíme hodnotu přírůstku čítače (výchozí je 1). */ counter-increment: li; / * Vlastnost content zobrazuje číslo položky seznamu. counters() znamená, že vygenerovaný text představuje hodnoty všech čítačů s tímto názvem. Tečka v uvozovkách přidá oddělovací tečku mezi čísla a před obsah každé položky seznamu se přidá tečka s mezerou */ content: counters(li,"."""; )
                Rýže. 5. Víceúrovňový číslovaný seznam

              HTML podporuje seznamy tří odlišné typy, z nichž každý má své vlastní parametry:

              • – číslovaný (pomocí čísel nebo písmen) seznam, jehož každý prvek má pořadové číslo (písmeno);
                1. – seznam s odrážkami (nečíslovaný), vedle každého prvku je umístěna značka (spíše než číselné nebo abecední znaky označující pořadové číslo);

                   • – seznam definic se skládá z párů název/hodnota, včetně termínů a definic.

                   Číslované seznamy

                   Do číslovaného seznamu prohlížeč automaticky vkládá čísla prvků v pořadí, počínaje určitou hodnotou (obvykle 1). To vám umožní vkládat a mazat položky seznamu bez narušení číslování, protože zbývající čísla budou automaticky přepočítána.
                   Číslované seznamy se vytvářejí pomocí prvku bloku

                   (z anglického Ordered List - číslovaný seznam). Vedle kontejneru
                   pro každou položku seznamu je umístěn prvek
                   1. (z anglického List Item - položka seznamu). Výchozí je číslovaný seznam s arabskými čísly.
                      Štítek
                      má následující syntaxi:
                      1. prvek 1
                      2. prvek 2
                      3. prvek 3

                      Položky číslovaného seznamu musí obsahovat více položek seznamu, jak ukazuje následující příklad:

                      Příklad: Číslovaný seznam

                      • Zkus to sám "

                      Návod krok za krokem

                      1. Získejte klíč
                      2. Vložte klíč do zámku
                      3. Otočte klíčem o dvě otáčky
                      4. Vytáhněte klíč ze zámku
                      5. Otevřít dveře

                      Návod krok za krokem

                      1. Získejte klíč
                      2. Vložte klíč do zámku
                      3. Otočte klíčem o dvě otáčky
                      4. Vytáhněte klíč ze zámku
                      5. Otevřít dveře

                      Někdy při pohledu na existující HTML kódy narazíte na argument typ v prvku

                      , které se používá k označení typu číslování (písmena, římské a arabské číslice atd.). Syntax:

                      Zde: typ – seznam symbolů:

                      • A - velká latinská písmena (A, B, C...);
                      • a - malá písmena latinky (a, b, c...);
                      • I - velké římské číslice (I, II, III...);
                      • i - malé římské číslice (i, ii, iii...);
                      • 1 - Arabské číslice (1, 2, 3 . . .) (ve výchozím nastavení).

                      Pokud chcete, aby seznam začínal číslem jiným než 1, měli byste to zadat pomocí atributu Startštítek

                      .
                      Následující příklad ukazuje číslovaný seznam s velkými římskými číslicemi a počáteční hodnotou XLIX:

                      Číslování lze také spustit pomocí atributu hodnota, který se přidá k prvku

                      1. následujícím způsobem:

                      7. V tomto případě bude sekvenční číslování seznamu přerušeno a od tohoto okamžiku začne číslování znovu, v tomto případě od sedmi.

                         Příklad použití atributu hodnotaštítek

                      8. , který umožňuje změnit číslo daného prvku seznamu:

                         V tomto příkladu by "První položka seznamu" měla číslo 1, "Druhá položka seznamu" by měla číslo 7 a "Třetí položka seznamu" by měla číslo 8.

                         Formátování číslovaných seznamů pomocí CSS

                         Chcete-li změnit čísla seznamu, měli byste použít vlastnost list-style-type CSS styly:

                         Styly číslovaného seznamu

                         Příklad	Význam	Popis
                         a, b, c	nižší-alfa	Malá písmena
                         A, B, C	horní alfa	Velká písmena
                         i, ii, iii	nižší římský	Římské číslice malými písmeny
                         I, II, III	horní román	Římské číslice velkými písmeny

                         Příklad: Použití vlastnosti CSS list-style-type

                         Seznamy s odrážkami

                         Seznamy s odrážkami jsou v podstatě podobné číslovaným seznamům, pouze neobsahují postupné číslování položek. Seznamy s odrážkami se vytvářejí pomocí prvku bloku

                         (z anglického Unordered List - nečíslovaný seznam). Každý prvek seznamu, stejně jako v číslovaných seznamech, začíná značkou
                         • . Prohlížeč odsadí každou položku seznamu a automaticky zobrazí odrážky.
                           Štítek
                           má následující syntaxi:
                           • První bod
                           • Druhý bod
                           • Třetí bod

                           V následujícím příkladu můžete vidět, že ve výchozím nastavení je před každou položku seznamu přidána malá značka ve formě vyplněného kruhu:

                           Uvnitř štítku

                           • Není nutné umístit pouze text, je přijatelné umístit jakýkoli prvek streamovaného obsahu (odkazy, odstavce, obrázky atd.)

                             Vnořené seznamy

                             Jakýkoli seznam může být vnořen do jiného. Uvnitř prvku
                           • Je přípustné vytvořit vnořený seznam nebo seznam druhé úrovně. Chcete-li vnořit seznam, popište nový seznam uvnitř prvku
                           • již existující seznam. Když vnoříte jeden seznam s odrážkami do druhého, prohlížeč automaticky změní styl odrážek pro seznam druhé úrovně. Jakýkoli seznam může být vnořen do jiného. Následující příklad ukazuje strukturu seznamu s odrážkami vnořeného do druhé položky číslovaného seznamu.

                             Příklad: Vnořené seznamy

                             • Zkus to sám "
                             • pondělí
                               1. Poslat mail
                               2. Návštěva v redakci
                                  • Výběr motivu
                                  • Dekorativní design
                                  • Konečná zpráva
                               3. Večerní prohlížení zpráv
                             • úterý
                               1. Upravit rozvrh
                               2. Posílejte obrázky
                             • Středa...
                             • pondělí
                               1. Poslat mail
                               2. Návštěva v redakci
                                  • Výběr motivu
                                  • Dekorativní design
                                  • Konečná zpráva
                               3. Večerní prohlížení zpráv
                             • úterý
                               1. Upravit rozvrh
                               2. Posílejte obrázky
                             • Středa...

                             Formátování seznamů s odrážkami

                             Pro změnu vzhled měla by se použít vlastnost značky seznamu list-style-type CSS styly:

                             Následující příklad ukazuje různé styly seznamů s odrážkami:

                             Příklad: Styly seznamu odrážek

                             • Zkus to sám "
                             • Káva
                             • Káva
                             • Káva
                             • Káva

                             Disk:

                             • Káva
                             • Mléko

                             Kruh:

                             • Káva
                             • Mléko

                             Náměstí:

                             • Káva
                             • Mléko

                             Žádný:

                             • Káva
                             • Mléko

                             Grafické značky.

                             V HTML je možné vytvořit seznam s grafickými značkami. Jedna věc je, když jsou značkami seznamu standardní kruhy nebo čtverce, a něco úplně jiného, ​​když si značku vybere sám vývojář v souladu s designem stránky. Aby byly položky seznamu krásné, často se používají malé obrázky.
                             Chcete-li nahradit běžnou značku grafickou, nahraďte vlastnost list-style-type za nemovitost list-style-image a uveďte adresu URL obrázku:

                             Příklad: Grafické značky

                             • Zkus to sám "

                             znamení zvěrokruhu

                             • Býk
                             • Blíženci

                             znamení zvěrokruhu

                             • Beran
                             • Býk
                             • Blíženci

                             Seznamy definic (popisů)

                             Seznamy definic jsou velmi užitečné pro vytvoření například vašeho osobního slovníku pojmů. Každá položka seznamu definice má dvě části: termín a jeho definici.
                             Celý seznam vložíte do prvku

                             (z anglického Definition List - seznam definic). Obsahuje značky

                             (z anglického Definition Term - definované slovo, termín) a

                             (z anglického Definition Description - popis definovaného pojmu).
                             Seznamy definic se často používají ve vědeckých, technických a vzdělávacích publikacích a používají je k sestavování glosářů, slovníků, referenčních knih atd.

                             Obecná struktura seznamu popisů je následující:

                             První termín

                             Popis prvního termínu

                             Druhé období

                             Popis druhého termínu

                             Následující příklad ukazuje jeden z možná použití seznam definic:

                             Příklad: Seznam definic

                             • Zkus to sám "

                             World Wide Web – z angličtiny. World Wide Web (WWW) je distribuovaný systém, který poskytuje přístup k souvisejícím dokumentům umístěným na různých počítačích připojených k internetu. Internet je sada sítí, které k přenosu informací používají jeden protokol výměny. Web je soubor jednotlivých webových stránek, které jsou vzájemně propojeny odkazy a jednotným designem.

                             Celosvětový web

                             - z angličtiny World Wide Web (WWW) je distribuovaný systém, který poskytuje přístup k souvisejícím dokumentům umístěným na různých počítačích připojených k internetu.

                             Internet

                             — soubor sítí, které k přenosu informací používají jediný protokol výměny.

                             webová stránka

                             - soubor jednotlivých webových stránek, které jsou vzájemně propojeny odkazy a jednotným designem.

                             Ve výchozím nastavení je text termínu přitisknut k levému okraji okna prohlížeče a popis termínu je umístěn níže a posunut doprava.

                             Čí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.