Liste su dio svakodnevnog života. Lista obaveza definiše šta se radi. Navigacijske rute nude popis uputa korak po korak. Recepti zahtijevaju popis sastojaka i popis uputstava. Liste se nalaze gotovo posvuda, pa je lako vidjeti zašto su popularne i na internetu.

Kada želimo da koristimo listu na veb lokaciji, HTML nudi tri različite vrste koje možete izabrati: sa nabrajanjem, numerisanim i opisnim listama. Koju vrstu liste koristiti i hoće li se uopće koristiti, ovisi o sadržaju i semantički najprikladnijoj opciji za njegovo prikazivanje.

Pored tri različite vrste lista dostupnih u HTML-u, postoji nekoliko načina za stiliziranje ovih lista putem CSS-a. Na primjer, možemo odabrati koju vrstu metka da navedemo za listu. Oznaka može biti kvadrat, krug, broj, slovo ili nijedna. Osim toga, možemo odlučiti kako lista treba biti prikazana - okomito ili horizontalno. Sve ove opcije igraju važnu ulogu u oblikovanju naših web stranica.

Liste sa oznakama

Lista sa nabrajanjem ili neuređena lista je jednostavno lista povezanih stavki za koje redosled nije bitan. Kreiranje liste sa nabrajanjem u HTML-u se vrši pomoću elementa liste blokova

. Svaka pojedinačna stavka na listi je označena elementom
• .

  Prema zadanim postavkama, većina pretraživača elementu dodaje vertikalnu marginu i lijevi padding

  , i prije svakog elementa
  • stavlja jednobojnu tačku. Ova tačka se zove marker liste i može se promeniti pomoću CSS-a.
    • Narandžasta
    • Zeleno
    • Plava

    Prikaži listu sa nabrajanjem

    Numerisane liste

    Brojčana ili poređana lista stavki

    Vrlo slično listi za nabrajanje, pojedinačne tačke se kreiraju na isti način. Glavna razlika između lista je u tome što je za uređenu listu bitan redosled kojim su stavke predstavljene.

    Budući da je redoslijed bitan, numerirana lista koristi brojeve umjesto tačke kao zadanu oznaku.

    1. Prošećite ulicom Apricot
    2. Skrenite na Vinogradnu

    Demonstracija numerisane liste

    Numerisane liste takođe imaju jedinstvene atribute koji su im dostupni, uključujući početak i obrnuto.

    start atribut

    Atribut start specificira broj na kojem treba početi numerirana lista. Prema zadanim postavkama, liste počinju od 1, ali mogu postojati situacije u kojima bi lista trebala početi od 30 ili nekog drugog broja. Kada koristimo start atribut na elementu

    , tada možemo tačno odrediti od kojeg broja treba početi brojanje numerisane liste.

    Atribut start prihvata samo celobrojne vrednosti, iako se može koristiti u numerisanim listama različiti sistemi numeriranje, na primjer rimski brojevi.

    30. Prošećite ulicom Apricot
    31. Skrenite na Vinogradnu
    32. Zaustavite se u Shady Street

    Demonstracija startnog atributa

    obrnuti atribut

    Obrnuti atribut kada se doda elementu

    omogućava da se lista prikaže u obrnutim redosledom. Lista od pet stavki označenih brojevima od 1 do 5 može se obrnuti i numerisati od 5 do 1.

    Obrnuti atribut je Boolean atribut i kao takav ne poprima nikakvu vrijednost. Može biti istinito ili lažno. False je zadana vrijednost, vrijednost postaje istinita kada se obrnuti atribut pojavi na elementu

    .
    1. Prošećite ulicom Apricot
    2. Skrenite na Vinogradnu
    3. Zaustavite se u Shady Street

    Demonstracija obrnutog atributa

    atribut vrijednosti

    Atribut value se može primijeniti na pojedinačne elemente

    1. u numerisanoj listi da promenite njenu vrednost na listi. Broj bilo koje stavke liste koja se pojavljuje ispod stavke liste sa atributom vrednosti biće ponovo izračunat u skladu sa tim.

       Na primjer, ako druga stavka liste ima atribut vrijednosti postavljen na 9, broj te stavke liste će biti ispisan kao da je deveta. Sve naredne stavke liste će biti numerisane počevši od 9.

       1. Prošećite ulicom Apricot
       9. Skrenite na Vinogradnu
       10. Zaustavite se u Shady Street

       Demonstracija atributa vrijednosti

       Liste opisa

       Druga vrsta liste koju ćete vidjeti na mreži (ali ne tako često kao liste s nabrajanjem ili brojevima) je lista opisa. Takve liste se koriste za identifikaciju nekoliko pojmova i njihovih opisa, kao u glosaru, na primjer.

       Kreiranje liste opisa u HTML-u se vrši pomoću blok elementa

       . Umjesto korištenja elementa

       Da biste označili stavke liste, lista opisa zahtijeva dva blok elementa:

       za termin i

       za opis.

       Lista opisa može sadržavati mnogo pojmova i opisa, jedan za drugim. Osim toga, takva lista može sadržavati nekoliko pojmova po opisu, kao i nekoliko opisa po pojmu. Jedan izraz može imati više značenja i biti podložan višestrukim opisima. Suprotno tome, jedan opis može odgovarati nekoliko pojmova.

       Prilikom dodavanja elementa liste opisa

       mora ići do elementa

       . Pojam i opis koji odmah slijedi povezani su jedan s drugim. Stoga je redoslijed ovih elemenata važan.

       Po defaultu, element

       uključuje vertikalni padding, poput elemenata

       I
       . Osim toga, element
       podrazumevano uključuje levu marginu.
       studije
       Posvećivanje vremena i pažnje sticanju znanja o predmetu koji se predaje, posebno kroz knjige.
       projekat
       Predani plan ili crtež koji pokazuje kako će zgrada, odjeća ili drugi predmet izgledati i funkcionirati prije nego što bude izgrađena ili napravljena.
       Postojeći ciljevi, planovi ili namjere prije nego što budu utjelovljeni ili ostvareni u opipljivom objektu.
       posao
       Posao
       Redovno zanimanje, profesija ili zanat osobe.
       Lista opisa Demonstracija
       Ugniježđene liste
       Funkcija koja liste čini veoma moćnim je funkcija ugniježđenja. Svaka lista može biti ugniježđena unutar druge liste i može biti ugniježđena više puta. Ali mogućnost beskonačnog ugniježđenja lista ne daje vam slobodu da to učinite. Liste treba posebno rezervirati tamo gdje zadržavaju najviše semantičkog značenja.
       Trik za ugniježđenje lista je znati gdje svaka lista i stavka liste počinje i gdje se završava. Govoreći konkretno o listama sa nabrajanjem i brojevima, jedinom elementu koji se može pojaviti direktno unutra
       I
       je element
       1. . Ponovimo - jedini element koji možemo staviti kao direktni potomak elemenata
          I
          , je
          1. .

             Međutim, unutar elementa

          2. može se dodati standardni skup elemenata, uključujući bilo koje elemente
             ili
             .

             Da biste ugnijezdili listu, pokrenite novu listu prije zatvaranja stavke liste. Kada je ugniježđena lista potpuna i zatvorena, zatvorite priloženu stavku liste i nastavite s originalnom listom.

             1. Prošetaj psa
             2. Presavijte veš
             3. Idite u prodavnicu i kupite:
                • Mlijeko
                • Hleb
                • Sir
             4. Kositi travnjak
             5. Skuvaj večeru

             Demonstracija ugniježđenih lista

             Budući da ugniježđene liste mogu biti malo zbunjujuće i prikazati neželjene stilove ako se rade pogrešno - pogledajmo ih na brzinu. Elementi

             I
             može sadržavati samo elemente
             1. . Element
             2. može sadržavati bilo koji regularni element koji želite. Međutim, element
             3. mora biti direktni potomak bilo kojeg elementa
                , ili
                .

                Također je vrijedno napomenuti da kada su liste ugniježđene unutar drugih lista, njihovi markeri će se mijenjati ovisno o dubini ugniježđenja. U prethodnom primjeru, lista za nabrajanje ugniježđena unutar numerisane liste koristi krug umjesto tačke kao markere. Do ove promjene dolazi zato što je lista s nabrajanjem ugniježđena jedan nivo unutar numerisane liste.

                Srećom, možemo kontrolisati kako tačke metka izgledaju na bilo kojem nivou, što ćemo pogledati u nastavku.

                Stavke liste stilova

                Liste sa nabrajanjem i numerisane liste podrazumevano koriste oznake za nabrajanje stavki liste. Za liste sa nabrajanjem to su obično pune tačke, dok su za numerisane liste to obično brojevi. Korišćenjem CSS stil a položaj ovih markera se može podesiti.

                svojstvo tipa-stil liste

                Svojstvo list-style-type se koristi za postavljanje sadržaja markera stavke liste. Dostupne vrijednosti se kreću od kvadrata do decimalni brojevi elementima se mogu dodati do armenske numeracije i stila u CSS-u

                ,
                ili
                1. .

                   Bilo koja vrijednost za svojstvo tipa-stil liste može se dodati listi s nabrajanjem ili brojevima. Imajući ovo na umu, možete koristiti numerisanje u listi sa nabrajanjem i nenumeričke oznake za nabrajanje u numerisanoj listi.

                   • Narandžasta
                   • Zeleno
                   • Plava

                   Ul (tip-stil liste: kvadrat; )

                   Demonstracija svojstva tipa-stil liste

                   vrijednosti tipa lista-stil

                   Kao što je ranije spomenuto, svojstvo tipa-stil liste sadrži pregršt različitih vrijednosti. Sljedeća tabela prikazuje ove vrijednosti i njihov odgovarajući sadržaj.

                   Korišćenje slike kao markera liste

                   Može doći vrijeme kada zadane vrijednosti za svojstvo tipa-stil liste neće biti dovoljne i želimo definirati vlastiti marker liste. To se najčešće radi postavljanjem pozadinske slike za svaki element.

                2. .

                   Proces uključuje uklanjanje bilo koje zadane vrijednosti svojstva u stilu liste i dodavanje pozadinske slike i margina elementu

                3. .

                   Više detalja - postavljanje svojstva tipa stila liste na ništa će ukloniti postojeće markere liste. Svojstvo pozadine će se postaviti pozadinska slika zajedno sa svojim položajem i ponavljanjem ako je potrebno. I svojstvo padding će osigurati prostor lijevo od teksta za pozadinsku sliku.

                   • Narandžasta
                   • Zeleno
                   • Plava

                   Li ( background: url("arrow.png") 0 50% bez ponavljanja; tip-stil liste: nema; padding-left: 12px; )

                   Prikazivanje slike kao markera

                   list-style-position svojstvo

                   Podrazumevano, oznake za nabrajanje liste su pozicionirane lijevo od sadržaja u elementu

                4. . Ovaj stil pozicioniranja je opisan kao izvan , što znači da će se sav sadržaj pojaviti direktno s desne strane, izvan markera liste. Sa svojstvom list-style-position možemo promijeniti zadanu vrijednost outdoor u inside ili inherit .

                   spolja postavlja marker liste lijevo od elementa

                5. i ne dozvolite da bilo koji sadržaj teče ispod ovog markera. Unutrašnja vrijednost (koja se rijetko koristi i može se vidjeti) postavlja marker liste na prvi red elementa
                6. i dozvoljava sadržaju da se omota oko markera ako je potrebno.
                   • kolači...
                   • prskanje...

                   Ul (pozicija-stil liste: unutra; )

                   Demonstracija svojstva pozicije u stilu liste

                   Generički stil liste nekretnina

                   Svojstva liste o kojima smo nedavno razgovarali, list-style-type i list-style-position, mogu se kombinovati u jedno generičko svojstvo, list-style. U ovom svojstvu možemo koristiti jednu ili sve vrijednosti svojstva liste istovremeno. Redoslijed ovih vrijednosti trebao bi biti: list-style-type praćeno list-style-position .

                   Ul ( stil liste: krug unutra; ) ol ( stil liste: donji-rimski; )

                   Horizontalni prikaz liste

                   Ponekad želimo da prikažemo liste horizontalno, a ne vertikalno. Možda želimo podijeliti listu u nekoliko kolona da bismo napravili navigacijsku listu ili smjestili nekoliko stavki liste u jedan red. U zavisnosti od sadržaja i želje izgled Postoji nekoliko načina da se liste prikažu kao jedan red, na primjer uzimanjem vrijednosti svojstva prikaza elemenata

                7. kao inline ili inline-block ili preko svojstva float.

                   Prikaz liste

                   Većina brz način prikazati listu u jednom redu - ovo je za postavljanje elemenata

                8. svojstvo prikaza sa vrijednošću inline ili inline-block . Ovo će staviti sve elemente
                9. u jednom redu sa jednakim razmakom između svake stavke liste.

                   Ako su razmaci između elemenata

                10. uzrokuju probleme, mogu se ukloniti koristeći iste tehnike o kojima smo raspravljali u lekciji 5, Pozicioniranje sadržaja.

                    Mnogo češće ćemo koristiti vrijednost inline-bloka umjesto inline vrijednosti. Vrijednost inline-block olakšava dodavanje vertikalnog paddinga i drugog prostora elementima

                11. , dok inline vrijednost nije.

                    Kada se vrijednost svojstva prikaza promijeni u inline ili inline-block , marker liste, bilo da je tačka, broj ili drugo, se uklanja.

                    • Narandžasta
                    • Zeleno
                    • Plava

                    Li (prikaz: inline-block; margina: 0 10px; )

                    Demonstracija liste sa inline-blokom

                    Liste sa plutajućim

                    Promjena svojstva prikaza na inline ili inline-block je brza, ali uklanja markere liste. Ako su potrebni, dodajte float svakom elementu

                12. je najbolja opcija nego mijenjanje svojstva prikaza.

                    Montaža za sve elemente

                13. float svojstva kao što je lijevo će poravnati sve elemente horizontalno
                14. direktno jedan pored drugog bez ikakvih razmaka između njih. Kada koristimo float za
                15. , oznaka liste je prikazana prema zadanim postavkama i biće pozicionirana na vrhu stavke
                16. pored njega. Da biste spriječili da se marker liste pojavi na vrhu drugih stavki
                17. , mora se dodati horizontalna margina ili padding.
                    • Narandžasta
                    • Zeleno
                    • Plava

                    Li ( float: lijevo; margina: 0 20px; )

                    Demonstracija liste sa float-om

                    Kao i kod svih plutajućih elemenata, ovo prekida tok stranice. Ne smijemo zaboraviti da obrišemo float i vratimo stranicu u normalan tok - najčešći metod je putem clearfixa.

                    Primjer navigacijske liste

                    Često dizajniramo i pronalazimo navigacijske menije koji koriste neuređene liste. Ove liste se obično postavljaju horizontalno koristeći jednu od dvije metode spomenute ranije. Evo, na primjer, horizontalnog navigacijskog menija postavljenog pomoću neuređene liste, u kojoj su elementi

                18. se prikazuju kao inline-block .

                    Navigacija ul ( font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif; margina: 0; padding: 0; transformacija teksta: velika slova; ) .navigation li ( display: inline-block; ) .navigation a ( pozadina: linear-gradient(#49708f, #293f50): 1px solid rgba(0, 0, 0,3) .navigacija; background: #314b60 box-shadow: inset 0 0 10px rgba(0, 0, 0, .3 ) .navigation li: first-child a ( border-radius: 4px 0 0 4px; ) .navigation li: . zadnje dijete a ( granica desno: 0; radijus granice: 0 4px 4px 0; )

                    Demonstracija navigacijske liste

                    U praksi

                    Sada kada znamo kako da kreiramo liste u HTML-u i CSS-u, pogledajmo našu stranicu Konferencije stilova i vidimo gde bismo mogli da koristimo liste.

                    Sada navigacijski meniji u elementima

                    I