Ktorý tag sa použije na vytvorenie zoznamu definícií. HTML: Číslovaný zoznam a zoznam s odrážkami. Špeciálne a vnorené zoznamy v HTML kóde

Zoznamy sú súčasťou každodenného života. 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 rôznych typov zoznamov dostupných v HTML existuje niekoľko spôsobov, ako upraviť tieto zoznamy 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 vnoriť 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. Pomocou CSS je možné prispôsobiť štýl a polohu týchto značiek.

                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 požadovaného vzhľadu 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

                   Najrýchlejší spôsob, ako zobraziť zoznam na jednom riadku, je zadať prvky

                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