Vytvorenie kombinovaného zoznamu v html. Vnorené zoznamy s automatickým číslovaním

Číslované zoznamy sú kolekciou prvkov s ich sériovými číslami. Typ a typ číslovania závisí od parametrov prvku

, ktorý sa používa na vytvorenie zoznamu. Nasledujúce hodnoty môžu slúžiť ako prvky číslovania:
• arabské číslice (1, 2, 3, ...);
• arabské číslice s nulou na začiatku pre čísla menšie ako desať (01, 02, 03, ...,10);
• veľké latinské písmená (A, B, C, ...);
• malé latinské písmená (a, b, c, ...);
• veľké rímske číslice (I, II, III, ...);
• malé rímske číslice (i, ii, iii, ...);
• arménske číslovanie;
• Gruzínske číslovanie.

Z praktického hľadiska možno princípy zobrazovania položiek v odrážkovom zozname aplikovať podobne ako pri číslovanom zozname. Ale vzhľadom na to, že máme čo do činenia s enumeráciou, existujú niektoré funkcie, o ktorých sa bude diskutovať ďalej.

Číslovanie zoznamu

Je povolené začať zoznam z ľubovoľného čísla; Na tento účel sa používa štartový atribút prvku

alebo hodnotu prvku
1. . Hodnota je akékoľvek kladné celé číslo. Nezáleží na tom, aký typ číslovania je nastavený, aj keď sa ako zoznam používajú latinské písmená. Ak sa na zoznam použijú naraz atribúty začiatku aj hodnoty, potom má prednosť druhý a číslovanie sa zobrazí od čísla určeného hodnotou , ako je uvedené v príklade 1.

   Príklad 1: Zmena číslovania zoznamu

   4. O svoje pracovisko by ste sa mali dobre starať.
   5. Upravte osvetlenie v miestnosti tak, aby bol zdroj svetla umiestnený na boku alebo za operátorom.
   10. Aby ste predišli zdravotným komplikáciám, odporúča sa vybrať stoličku s mäkkým sedadlom.

   Prvý prvok zoznamu v tomto príklade bude začínať rímskou číslicou IV, pretože je zadaný atribút start="4", potom nasleduje číslo V a posledný prvok je mimo poradia a je mu priradené číslo X (obrázok 1).

   Ryža. 1. Rímske číslice v zozname

   Písanie čísel

   Číslovaný zoznam má štandardne určitý vzhľad: najprv je číslo, potom bodka a potom sa text zobrazí oddelený medzerou. Táto forma písania je vizuálna a pohodlná, ale niektorí vývojári uprednostňujú iný spôsob navrhovania číslovania zoznamov. Totiž tak, že namiesto bodky je tu uzatváracia zátvorka, ako je znázornené na obr. 2 alebo niečo podobné.

   

   Ryža. 2. Číslovaný zoznam so zátvorkou

   Štýly vám umožňujú zmeniť typ číslovania zoznamu pomocou vlastností obsahu a protiprírastku. Najprv je potrebné nastaviť volič ol na counter-reset : položka , je to potrebné, aby číslovanie v každom novom zozname začalo odznova. V opačnom prípade bude číslovanie pokračovať a namiesto 1,2,3 uvidíte 5,6,7. Hodnota položky je jedinečný identifikátor pre počítadlo, vyberáme si ju sami. Ďalej musíte skryť pôvodné značky prostredníctvom vlastnosti štýlu list-style-type s hodnotou none .

   Vlastnosť content zvyčajne funguje v spojení s pseudoprvkami ::after a ::before. Konštrukcia li::before teda hovorí, že pred každý prvok zoznamu musí byť pridaný nejaký obsah (príklad 2).

   Príklad 2. Vytvorenie vlastného číslovania

   Li::before ( content: counter(item) ") "; /* K číslam pridáme zátvorku */ counter-increment: item; /* Nastavte názov počítadla */ )

   Vlastnosť content s hodnotou counter(item) zobrazuje číslo; Pridaním zátvorky, ako je znázornené v tomto príklade, získame požadovaný typ číslovania. na zvýšenie čísla zoznamu o jeden je potrebný protiprírastok. Všimnite si, že v celom texte sa používa rovnaký identifikátor s názvom item . Konečný kód je uvedený v príklade 3.

   Príklad 3: Zmena zobrazenia zoznamu

   1. najprv
   2. Po druhé
   3. Po tretie
   4. Po štvrté

   Pomocou vyššie uvedenej metódy môžete vytvoriť ľubovoľný typ číslovaného zoznamu, napríklad vložiť číslo do hranatých zátvoriek, v tomto prípade sa v štýloch zmení iba jeden riadok.

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

   Zoznam s ruskými písmenami

   Existuje očíslovaný zoznam s latinskými písmenami, ale v zozname nie sú žiadne ruské písmená. Môžu byť pridané umelo pomocou vyššie uvedenej techniky. Keďže číslovanie prebieha cez štýly, samotný zoznam zostáva pôvodný, pridáva sa doň len vybraná trieda, nazvime ju cyrilou (príklad 4).

   Príklad 4: Kód na vytvorenie zoznamu

   1. Jeden
   2. Dva
   3. Tri

   Pridávanie písmen sa vykonáva pomocou pseudoprvku ::before a vlastnosti content. Keďže každý riadok musí mať svoje vlastné písmeno, použijeme pseudotriedu :nth-child(1) , pričom číslo písmena bude napísané v zátvorkách. Prvé písmeno je prirodzene A, druhé je B, tretie je C atď. Celá táto sada sa pridá do voliča li nasledovne (príklad 5).

   Príklad 5: Použitie pseudo-triedy:n-té dieťa

   Cyrilické li:nth-child(1)::before (obsah: "a)"; ) .cyrilika li:n-té-dieťa(2)::pred (obsah: "b)"; ) .cyrilika li:nth-child(3)::before ( content: "at)"; )

   V tomto príklade za každým písmenom nasleduje zátvorka, všetky písmená sú malé. Môžete si definovať vlastný typ číslovania zoznamov, môže napríklad obsahovať veľké písmená s bodkou, s jednou alebo dvoma zátvorkami alebo len písmená. Na rozdiel od štandardného číslovania si tu môžeme robiť, čo chceme. Zoznam desiatich písmen by mal stačiť takmer na všetky situácie, no ak sa zrazu ukáže, že to nestačí, nič nám nebráni v rozšírení nášho zoznamu aspoň o všetky písmená ruskej abecedy.

   Nakoniec upravíme zarovnanie a polohu písmen, prípadne určíme veľkosť písma, farbu a ďalšie parametre (príklad 6).

   Príklad 6. Zoznam s ruskými písmenami

   1. Boršč
   2. Kotlety zo šťuky
   3. Kulebyaka
   4. Huby v kyslej smotane
   5. Palacinky s kaviárom
   6. Kvas

   Výsledok tento príklad znázornené na obr. 3.

   Zoznamy sú súčasťou Každodenný život. Zoznam úloh definuje, čo sa robí. Navigačné trasy ponúkajú zoznam trás krok za krokom. Recepty vyžadujú zoznam zložiek a zoznam pokynov. Zoznamy sa nachádzajú takmer všade, takže je ľahké pochopiť, prečo sú obľúbené aj na internete.

   Keď chceme na webovej stránke použiť zoznam, HTML ponúka na výber tri rôzne typy: zoznam s odrážkami, číslovaný zoznam a zoznam popisov. Ktorý typ zoznamu použiť a či vôbec nejaký zoznam použiť, závisí od obsahu a sémanticky najvhodnejšej možnosti jeho zobrazenia.

   Okrem troch odlišné typy zoznamy dostupné v HTML, existuje niekoľko spôsobov, ako tieto zoznamy upraviť pomocou CSS. Môžeme si napríklad vybrať, aký typ odrážky špecifikovať pre zoznam. Značka môže byť štvorec, kruh, číslo, písmeno alebo prípadne žiadny. Okrem toho sa môžeme rozhodnúť, ako sa má zoznam zobraziť – vertikálne alebo horizontálne. Všetky tieto možnosti zohrávajú dôležitú úlohu pri štylizácii našich webových stránok.

   Zoznamy s odrážkami

   Zoznam s odrážkami alebo bez poradia je jednoducho zoznam súvisiacich položiek, pri ktorých na poradí nezáleží. Vytvorenie zoznamu s odrážkami v HTML sa vykonáva pomocou prvku zoznamu blokov

   . Každá jednotlivá položka v zozname je označená prvkom
   • .

     Väčšina prehliadačov štandardne pridáva k prvku zvislý okraj a ľavú výplň

     a pred každým prvkom
     • kladie jednofarebný bod. Tento bod sa nazýva značka zoznamu a dá sa zmeniť pomocou CSS.
       • Oranžová
       • zelená
       • Modrá

       Zobraziť zoznam s odrážkami

       Číslované zoznamy

       Číslovaný alebo objednaný zoznam položiek

       Veľmi podobne ako zoznam s odrážkami, jednotlivé odrážky sa vytvárajú rovnakým spôsobom. Hlavný rozdiel medzi zoznamami je v tom, že v prípade usporiadaného zoznamu záleží na poradí, v akom sú položky prezentované.

       Pretože na poradí záleží, číslovaný zoznam používa ako predvolenú odrážku čísla namiesto bodky.

       1. Prejdite sa po Marhuľovej ulici
       2. Odbočte na Vinogradnaya

       Ukážka číslovaného zoznamu

       Číslované zoznamy majú tiež k dispozícii jedinečné atribúty vrátane začiatku a obrátenia.

       štartovací atribút

       Atribút štart určuje číslo, na ktorom má číslovaný zoznam začínať. V predvolenom nastavení začínajú zoznamy číslom 1, ale môžu nastať situácie, keď by zoznam mal začínať číslom 30 alebo iným číslom. Keď na element použijeme atribút štart

       , potom môžeme presne určiť, od ktorého čísla má začať počítanie číslovaného zoznamu.

       Atribút štart akceptuje iba celočíselné hodnoty, aj keď číslované zoznamy môžu používať rôzne systémy číslovania, napríklad rímske číslice.

       30. Prejdite sa po Marhuľovej ulici
       31. Odbočte na Vinogradnaya
       32. Zastavte sa na Shady Street

       Ukážka štartovacieho atribútu

       obrátený atribút

       Obrátený atribút pri pridaní do prvku

       umožňuje zobrazenie zoznamu v opačnom poradí. Zoznam piatich položiek očíslovaných 1 až 5 je možné obracať a očíslovať 5 až 1.

       Obrátený atribút je booleovský atribút a ako taký nemá žiadnu hodnotu. Môže to byť pravda alebo nepravda. False je predvolená hodnota, hodnota sa stane pravdivou, keď sa na prvku objaví obrátený atribút

       .
       1. Prejdite sa po Marhuľovej ulici
       2. Odbočte na Vinogradnaya
       3. Zastavte sa na Shady Street

       Ukážka obráteného atribútu

       atribút hodnoty

       Atribút value možno použiť na jednotlivé prvky

       1. v očíslovanom zozname, ak chcete zmeniť jeho hodnotu v zozname. Podľa toho sa prepočíta počet ľubovoľnej položky zoznamu, ktorá sa zobrazí pod položkou zoznamu s atribútom value.

          Napríklad, ak má druhá položka zoznamu atribút hodnoty nastavený na 9, číslo tejto položky zoznamu sa vypíše, ako keby to bolo deviate. Všetky nasledujúce položky zoznamu budú očíslované od 9.

          1. Prejdite sa po Marhuľovej ulici
          9. Odbočte na Vinogradnaya
          10. Zastavte sa na Shady Street

          Demonštrácia atribútu hodnoty

          Popisné zoznamy

          Ďalším typom zoznamu, ktorý uvidíte online (ale nie tak často ako zoznamy s odrážkami alebo číslované zoznamy), je zoznam popisov. Takéto zoznamy sa používajú na identifikáciu niekoľkých výrazov a ich popisov, ako napríklad v slovníku.

          Vytvorenie zoznamu popisov v HTML sa vykonáva pomocou prvku bloku

          . Namiesto použitia prvku

          Na označenie položiek zoznamu vyžaduje zoznam popisov dva prvky bloku:

          na obdobie a

          pre popis.

          Zoznam popisov môže obsahovať mnoho výrazov a popisov, jeden po druhom. Okrem toho môže takýto zoznam obsahovať niekoľko výrazov na jeden popis, ako aj niekoľko popisov na výraz. Jeden výraz môže mať viacero významov a môže byť predmetom viacerých opisov. Naopak, jeden popis môže zodpovedať viacerým výrazom.

          Pri pridávaní prvku zoznamu popisov

          musí ísť do prvku

          . Pojem a popis, ktorý za ním bezprostredne nasleduje, spolu súvisia. Preto je dôležité poradie týchto prvkov.

          V predvolenom nastavení prvok

          zahŕňa vertikálne vypchávky, podobné prvky

          A
          . Okrem toho prvok
          štandardne zahŕňa ľavý okraj.
          štúdia
          Venovať čas a pozornosť získavaniu vedomostí o vyučovanom predmete najmä prostredníctvom kníh.
          projektu
          Predložený plán alebo výkres, ktorý ukazuje, ako bude budova, odev alebo iná položka vyzerať a fungovať predtým, než bude postavená alebo vyrobená.
          Existujúce ciele, plány alebo zámery predtým, ako sú stelesnené alebo realizované v hmotnom objekte.
          podnikania
          Job
          Bežné povolanie, povolanie alebo remeslo osoby.
          Popis Zoznam Ukážka
          Vnorené zoznamy
          Funkciou, ktorá robí zoznamy veľmi výkonnými, je funkcia vnorenia. Každý zoznam môže byť vnorený do iného zoznamu a môžu byť vnorené viackrát. Ale schopnosť hniezdiť zoznamy donekonečna vám nedáva slobodu to urobiť. Zoznamy by mali byť vyhradené špeciálne tam, kde si zachovávajú najsémantický význam.
          Trik vnorenia zoznamov je vedieť, kde každý zoznam a položka zoznamu začína a končí. Keď už hovoríme konkrétne o odrážkových a číslovaných zoznamoch, jediný prvok, ktorý sa môže objaviť priamo vo vnútri
          A
          je prvkom
          1. . Zopakujme – jediný prvok, ktorý môžeme dať ako priameho potomka prvkov
             A
             , je
             1. .

                Avšak vo vnútri prvku

             2. možno pridať štandardnú sadu prvkov vrátane akýchkoľvek prvkov
                alebo
                .

                Ak chcete pripojiť zoznam - pred zatvorením položky zoznamu začnite nový zoznam. Keď je vnorený zoznam kompletný a uzavretý, zatvorte pripájaciu položku zoznamu a pokračujte v pôvodnom zozname.

                1. Vyvenčiť psa
                2. Zložiť bielizeň
                3. Choďte do obchodu a kúpte si:
                   • Mlieko
                   • Chlieb
                   • Syr
                4. Kosiť trávnik
                5. uvar večeru

                Ukážka vnorených zoznamov

                Keďže vnorené zoznamy môžu byť trochu mätúce a pri nesprávnom vykonaní môžu zobrazovať nechcené štýly – poďme sa na ne rýchlo pozrieť. Prvky

                A
                môže obsahovať iba prvky
                1. . Element
                2. môže obsahovať ľubovoľný bežný prvok, ktorý chcete. Avšak prvok
                3. musí byť priamym potomkom ktoréhokoľvek prvku
                   , alebo
                   .

                   Za zmienku tiež stojí, že keď sú zoznamy vnorené do iných zoznamov, ich značky sa budú meniť v závislosti od hĺbky vnorenia. V predchádzajúcom príklade používa zoznam s odrážkami vnorený do očíslovaného zoznamu kruh namiesto bodky ako značky. K tejto zmene dochádza, pretože zoznam s odrážkami je vnorený o jednu úroveň do číslovaného zoznamu.

                   Našťastie môžeme ovládať, ako vyzerajú odrážky na akejkoľvek úrovni, na čo sa pozrieme ďalej.

                   Položky zoznamu štýlov

                   Zoznamy s odrážkami a číslované zoznamy štandardne používajú odrážky položiek zoznamu. V prípade zoznamov s odrážkami to bývajú plné farebné bodky, zatiaľ čo v prípade číslovaných zoznamov to bývajú čísla. Používaním CSS štýl a polohu týchto značiek je možné upraviť.

                   vlastnosť typu list-style

                   Vlastnosť list-style-type sa používa na nastavenie obsahu značky položky zoznamu. Dostupné hodnoty sa pohybujú od štvorcov a desatinných miest až po arménske číslovanie a k prvkom je možné pridať štýl CSS

                   ,
                   alebo
                   1. .

                      Akákoľvek hodnota pre vlastnosť typu list-style môže byť pridaná do zoznamu s odrážkami alebo číslovaného zoznamu. S ohľadom na to môžete použiť číslovanie v zozname s odrážkami a nenumerické odrážky v číslovanom zozname.

                      • Oranžová
                      • zelená
                      • Modrá

                      Ul (typ štýlu zoznamu: štvorec; )

                      Ukážka vlastnosti typu list-style

                      hodnoty typu list-style

                      Ako už bolo spomenuté, vlastnosť list-style-type obsahuje niekoľko rôznych hodnôt. Nasledujúca tabuľka zobrazuje tieto hodnoty a ich zodpovedajúci obsah.

                      Použitie obrázka ako značky zoznamu

                      Môže prísť čas, keď predvolené hodnoty pre vlastnosť typu list-style nestačia a budeme chcieť definovať vlastnú značku zoznamu. Najčastejšie sa to robí umiestnením obrázka na pozadí pre každý prvok.

                   2. .

                      Proces zahŕňa odstránenie akejkoľvek predvolenej hodnoty vlastnosti typu štýlu zoznamu a pridanie obrázka pozadia a okrajov k prvku

                   3. .

                      Ďalšie podrobnosti – nastavením vlastnosti typu list-style-type na hodnotu none sa odstránia existujúce značky zoznamu. Vlastnosť pozadia nastaví obrázok na pozadí spolu s jeho polohou a v prípade potreby sa zopakuje. A vlastnosť padding poskytne priestor naľavo od textu pre obrázok na pozadí.

                      • Oranžová
                      • zelená
                      • Modrá

                      Li ( pozadie: url("arrow.png") 0 50 % bez opakovania; typ-štýlu zoznamu: žiadny; ľavý padding: 12px; )

                      Zobrazenie obrázka ako značky

                      vlastnosť list-style-position

                      V predvolenom nastavení sú odrážky zoznamu umiestnené naľavo od obsahu v prvku

                   4. . Tento štýl umiestnenia je opísaný ako outside , čo znamená, že celý obsah sa zobrazí priamo napravo, mimo značky zoznamu. Vlastnosťou list-style-position môžeme zmeniť predvolenú hodnotu outside na inside alebo inherit .

                      outside umiestni značku zoznamu naľavo od prvku

                   5. a nedovoľte, aby pod túto značku pretiekol žiadny obsah. Vnútorná hodnota (ktorá sa používa zriedka a je viditeľná) umiestni značku zoznamu na prvý riadok prvku
                   6. a v prípade potreby umožňuje, aby sa obsah ovinul okolo značky.
                      • Košíčky...
                      • Kropenie...

                      Ul ( list-style-position: inside; )

                      Ukážka vlastnosti v štýle zoznamu

                      Všeobecný štýl zoznamu vlastností

                      Vlastnosti zoznamu, o ktorých sme nedávno hovorili, list-style-type a list-style-position , možno spojiť do jednej všeobecnej vlastnosti, list-style . V tejto vlastnosti môžeme použiť jednu alebo všetky hodnoty vlastností zoznamu súčasne. Poradie týchto hodnôt by malo byť: list-style-type nasledovaný list-style-position .

                      Ul ( štýl zoznamu: kruh vo vnútri; ) ol ( štýl zoznamu: nižší rímsky; )

                      Horizontálne zobrazenie zoznamu

                      Niekedy chceme zoznamy zobraziť skôr horizontálne ako vertikálne. Možno chceme rozdeliť zoznam do niekoľkých stĺpcov, aby sme vytvorili navigačný zoznam alebo umiestniť niekoľko položiek zoznamu do jedného riadku. V závislosti od obsahu a želania vzhľad Existuje niekoľko spôsobov, ako zobraziť zoznamy ako jeden riadok, napríklad prevzatím hodnoty vlastnosti zobrazenia prvkov

                   7. ako inline alebo inline-block alebo prostredníctvom vlastnosti float.

                      Zobrazenie zoznamu

                      Väčšina rýchly spôsob zobrazenie zoznamu na jednom riadku - slúži na nastavenie prvkov

                   8. vlastnosť display s hodnotou inline alebo inline-block . Tým sa umiestnia všetky prvky
                   9. na jednom riadku s rovnakými medzerami medzi jednotlivými položkami zoznamu.

                      Ak medzery medzi prvkami

                   10. spôsobujú problémy, možno ich odstrániť pomocou rovnakých techník, o ktorých sme hovorili v lekcii 5, Obsah umiestnenia.

                       Oveľa častejšie budeme namiesto inline hodnoty používať hodnotu inline-block. Hodnota inline-block uľahčuje pridávanie vertikálnej výplne a iného priestoru k prvkom

                   11. , zatiaľ čo vložená hodnota nie.

                       Keď sa hodnota vlastnosti display zmení na inline alebo inline-block , značka zoznamu, či už ide o bodku, číslo alebo iné, sa odstráni.

                       • Oranžová
                       • zelená
                       • Modrá

                       Li ( displej: inline-block; okraj: 0 10px; )

                       Ukážka zoznamu s vloženým blokom

                       Zoznamy s plavákom

                       Zmena vlastnosti zobrazenia na inline alebo inline-block je rýchla, ale odstráni značky zoznamu. Ak sú potrebné, pridajte ku každému prvku plavák

                   12. je lepšia možnosť ako zmena vlastnosti zobrazenia.

                       Inštalácia pre všetky prvky

                   13. float vlastnosti ako vľavo zarovnajú všetky prvky horizontálne
                   14. tesne vedľa seba bez akýchkoľvek medzier medzi nimi. Keď použijeme plavák na
                   15. , značka zoznamu sa štandardne zobrazuje a bude umiestnená navrchu položky
                   16. vedľa neho. Ak chcete zabrániť tomu, aby sa značka zoznamu zobrazovala nad ostatnými položkami
                   17. , treba pridať vodorovný okraj alebo výplň.
                       • Oranžová
                       • zelená
                       • Modrá

                       Li ( float: left; margin: 0 20px; )

                       Ukážka zoznamu s plavákom

                       Rovnako ako pri iných plávajúcich prvkoch sa tým preruší tok stránky. Nesmieme zabudnúť vyčistiť float a vrátiť stránku do normálneho chodu – najbežnejší spôsob je cez clearfix.

                       Príklad navigačného zoznamu

                       Často navrhujeme a nachádzame navigačné ponuky, ktoré používajú neusporiadané zoznamy. Tieto zoznamy sú zvyčajne usporiadané horizontálne pomocou jednej z dvoch vyššie uvedených metód. Tu je napríklad horizontálne navigačné menu usporiadané pomocou neusporiadaného zoznamu, v ktorom sú prvky

                   18. sa zobrazujú ako vložený blok .

                       Navigation ul ( písmo: tučné 11px "Helvetica Neue", Helvetica, Arial, bezpätkové; okraj: 0; výplň: 0; text-transform: veľké písmená; ) .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ážka navigačného zoznamu

                       Na praxi

                       Teraz, keď už vieme, ako vytvárať zoznamy v HTML a CSS, pozrime sa na našu stránku Styles Conference a uvidíme, kde by sme mohli zoznamy použiť.

                       Teraz navigačné ponuky v prvkoch

                       A