Primjeri stilskog dizajna ul li lista CSS. Kako postaviti stavke popisa vodoravno? Oznaka ol specificira

Pozdrav, dragi čitatelji bloga. Danas, u sklopu ovog odjeljka, želim govoriti o raznim Html popisima koji se mogu izraditi na temelju UL, OL, LI i DL oznaka posebno dizajniranih za to. Parovi UL i LI stvaraju popise s grafičkim oznakama, parovi OL i LI stvaraju numerirane popise, a elementi DL, DT i DD stvaraju takozvane popise definicija. Također ćemo ukratko razmotriti principe stvaranja ugniježđenih struktura.

Želio bih vas podsjetiti da smo već uspjeli razgovarati o osnovama modernog, kao i tabelarnog izgleda (). Osim toga, dotakli smo se osnova i učili.

Bullet liste temeljene na UL i LI oznakama

Oznaka UL koristi se za izradu popisa s grafičkim oznakama, a oznaka OL za izradu numeriranih popisa. Ove oznake su parne i blok oznake, baš kao i element LI.

Između početnih i završnih oznaka nalaze se pojedinačne stavke popisa, koje su pak zatvorene u početni i završni LI element. Preglednik dodaje uvlake od jednog retka na vrhu i dnu HTML popisa, slično uvlaci koju stvara oznaka odlomka.

Pogledajmo, na primjer, opciju s grafičkim oznakama koja bi mogla izgledati ovako:

  • Prvi red
  • Drugi
  • Zadnji element

Unutar otvarajuće i završne UL oznake mogu biti samo LI elementi, a unutar samih elemenata (klauzula) možete umetnuti bilo koji sadržaj (tekst, slike, naslove, odlomke, poveznice pa čak i druge liste).

Oni. UL služi samo za pružanje popisa s grafičkim oznakama (ne poredanog) i svega što ćete vidjeti na web stranica unutar njega, implementira se korištenjem sadržaja LI elemenata.

Za UL možete promijeniti vrstu markera upisivanjem u njega različita značenja za atribut "Vrsta". Ako “Vrsta” (kontrola izgleda markera) za UL element nije navedena, tada će se prikazati zadani izgled markera (disk - krug ispunjen bojom teksta):

    1. — ispunjen krug (zadano);
      • - nepopunjeni krug;
        • - kvadrat

U gornjim primjerima naveli smo atribut "Type" u UL elementu pomoću ovaj tip markeri za sve artikle. Ali atribut "Vrsta" također se može navesti za svaku pojedinačnu LI oznaku, postavljajući vlastitu vrstu markera za ovu stavku.

Primjer popis s grafičkim oznakama S različite vrste marker za svaku stavku:

  1. Marker u obliku ispunjenog diska
  2. Marker u obliku neobojenog diska
  3. Kvadrat

Numerirani popisi u HTML-u na temelju OL oznake

Za izradu numeriranog popisa koriste se OL oznake unutar kojih će se opet nalaziti LI elementi. OL i LI, kao što sam već spomenuo, bazirani su na blokovima (to jest, imaju tendenciju da zauzmu sav prostor koji im je dostupan u širini) i ništa osim LI elemenata ne može se postaviti unutar OL-a.

Ispostavilo se da su OL i UL servisne oznake koje su potrebne samo da naznače pregledniku kakvu vrstu popisa stvaramo (označenog ili numeriranog). U slučaju numerirane stavke, lijevo od svake stavke nećemo vidjeti oznaku, već broj i točku iza njega:

  1. Prvi red
  2. Druga točka
  3. Treća linija

Kao što sam maloprije spomenuo, elementi UL, OL i LI imaju mogućnost korištenja atributa TYPE. Omogućuje vam da konfigurirate vrstu markera ili odredite koji će se brojevi ili slova koristiti za numeriranje stavki popisa. Za numerirani popis, parametri ovog atributa mogu poprimiti sljedeće vrijednosti:

    1. — numeriranje će se izvoditi uobičajenim arapskim brojevima (ista će se opcija koristiti prema zadanim postavkama, u nedostatku atributa "Vrsta");
      1. — velika slova kao numeriranje;
        1. - mala slova;
          1. - veliki rimski brojevi;
            1. - male rimske brojke;

            Primjer numeriranog popisa s različitim vrstama numeriranja za svaku stavku:

            1. numeriran velikim rimskim brojevima
            2. Numeracija malim latiničnim slovima
            3. Numeracija malim rimskim brojevima

            Prilikom izrade numeriranih popisa također je moguće započeti numeriranje ne od jednog, već od broja navedenog u atributu START. Na primjer:

            1. Prvi element čiji je broj naveden u OL oznaci s atributom start="23".
            2. Sljedeća stavka, s brojem jedan veći
            3. Još jedan

            Za OL, također možete započeti novo numeriranje od bilo koje vrijednosti, počevši od bilo koje stavke, upisivanjem atributa VRIJEDNOST sa traženim brojem u početni LI ove stavke. Na primjer:

            1. Prva točka s brojem jedan
            2. Ovaj element će dobiti broj naveden u atributu value="32".
            3. Predmet s velikim brojem

            Dizajniranje izgleda popisa u CSS-u (style sheets)

            Ali obično sada izgled markeri nisu specificirani kroz atribut TYPE, već , za koji su specificirana odgovarajuća svojstva.

            Ovdje ću samo dati primjer različitih grafičkih oznaka za nenumerirane popise, čiji se izgled postavlja putem zasebna datoteka s kaskadnim listovima stilova.

            • Prva točka
            • Drugi
            • Posljednji

            Ali o tome ćemo u sljedećim člancima. Ovako je postavljen izgled UL markera na ovom blogu. Slike se koriste kao oznake: za obične stavke nenumeriranog popisa - , za ugniježđene stavke nenumeriranog popisa - .

            Posebni i ugniježđeni popisi u HTML kodu

            Treća i posljednja vrsta naziva se “definicijski popisi” i određuju se pomoću tri oznake - DL, DT i DD. DL govori pregledniku da je ono što slijedi popis definicija.

            Tipično se ovaj tip koristi (ili se namjeravao koristiti) za pisanje rječničkih unosa koji se sastoje od pojmova (okruženih DT oznakama) i njihovih opisa (okruženih DD oznakama).

            Prvi mandat
            Opis
            Drugi termin
            Njegov opis

            Ako pogledate gornji primjer, primijetit ćete da je DD element (opis pojma) pomaknut (za 40 piksela) u odnosu na DT element (sam pojam).

            Općenito, DL, DT i DD su blok oznake, a unutar DT elementa može se umetnuti samo sadržaj s ugrađenim oznakama (ispada da se blok elementi naslova i odlomaka ne mogu koristiti unutar DT). A unutar DD oznaka možete umetnuti bilo koje elemente, i inline i block.

            Ugniježđeni popis u Html-u se stvara po analogiji s jednostavnim, ali unutar glavne liste, neke od stavki su opet zatvorene u početnu i završnu oznaku UL ili OL.

            Imajte na umu da se završni LI stavke u kojoj će se kreirati ugniježđena stavka postavlja tek nakon cijelog koda ugniježđene liste (to je vrlo važno za njezin ispravan prikaz na web stranici). Ugniježđeni popis može izgledati otprilike ovako:

            1. Prvi odlomak glavnog numeriran
            2. Druga točka
              • Prvi element ugniježđenih grafičkih oznaka
              • Drugi
              • Treća i posljednja točka
            3. Treći element označen brojem

            Sretno ti! Vidimo se uskoro na stranicama bloga

            Moglo bi vas zanimati

            Kako ubaciti link i sliku (fotografiju) u HTML - IMG i A tagovi Select, Option, Textarea, Label, Fieldset, Legend - oznake HTML obrasci padajuće liste i tekstualno polje
            Html forme za web stranicu - oznake Form, Input and Select, Option, Textarea, Label i druge za izradu elemenata web forme
            Kako su postavljene boje u Html i CSS kodu, izbor RGB nijansi u tablicama, Yandex izlaz i drugi programi
            Ugradi i objekt - HTML oznaka te za prikaz medijskih sadržaja (video, flash, audio) na web stranicama
            Oznake naslova i atributi H1-H6, vodoravna crta Hr, prijelom retka Br i prijelom odlomka P prema Html 4.01 standardu
            Tablice u HTML-u - Table, Tr i Td oznake, kao i Colspan, Cellpadding, Cellspacing i Rowspan za njihovo stvaranje
            Što je jezik hiperteksta HTML označavanje i kako vidjeti popis svih oznaka u W3C validatoru
            Font (lice, veličina i boja), Blockquote i Pre oznake - staro oblikovanje teksta u čisti HTML(bez koristeći CSS)
            Iframe i Frame - što su i kako najbolje koristiti okvire u Html-u
            Img - Html tag za umetanje slike (Src), poravnavanje i omatanje teksta oko nje (align), kao i postavljanje pozadine (background)

            Jedina razlika je u tome što je ova oznaka striktno napravljena za numeriranje popisa. Naziv oznake dolazi od engleske kratice "Ordered List" - numerirani popis.

            Sintaksa oznake

              1. Element #1
              2. Element #2
              3. Element #3
              4. ...

              Gdje atribut type="value" može uzeti sljedeće vrijednosti

              • A - postavlja oznake u obliku velikih latiničnih slova (A, B, C..);
              • a - postavlja oznake u obliku malih latiničnih slova (a, b, c..);
              • I - postavlja oznake u obliku velikih rimskih brojeva (I, II, III, IV..);
              • i - postavlja oznake u obliku malih rimskih brojeva (i, ii, iii, iv..);
              • 1 (zadano) - postavlja oznake u obliku arapskih brojeva (1, 2, 3..);

              Atribut start="value" navodi početnu vrijednost (početnu vrijednost) izvješća.

              Obrnuti atribut specificira obrnuto brojanje (ako je potrebno).

              Označiti

                zahtijeva obaveznu upotrebu završne oznake

              Upareni tag koristi se za formiranje elemenata popisa

            1. . Između početnih i završnih oznaka nalaze se pojedinačne riječi, fraze, odlomci, slike, dijelovi koda i još mnogo toga što je sadržaj popisa s grafičkim oznakama.

              Bilješka

              Unutar popisa možete promijeniti račun u svoj. U tu svrhu postoji poseban atribut value="" na oznaci

            2. , kojoj je dodijeljena neka numerička vrijednost. Na primjer

              1. Element #1
              2. Element #2
              3. Element #3

              Primjeri s numeriranim popisima u html-u (
                )

              Primjer 1. HTML numerirana lista latiničnim slovima

              Primjer s velikim slovima

              1. Element #1
              2. Element #2
              3. Element #3
              1. Element #1
              2. Element #2
              3. Element #3

              Primjer s malim slovima

              1. Element #10
              2. Element #11
              3. Element #12

              Ovako to izgleda na stranici:

              1. Element #1
              2. Element #2
              3. Element #3

              Primjer 2. HTML numerirana lista latiničnim slovima

              Primjer s velikim slovima

              1. Element #1
              2. Element #2
              3. Element #3

              Ovako to izgleda na stranici:

              1. Element #1
              2. Element #2
              3. Element #3

              Primjer s malim slovima

              1. Element #1
              2. Element #2
              3. Element #3

              Ovako to izgleda na stranici:

              1. Element #1
              2. Element #2
              3. Element #3

              Primjer 3. Numerirani popis html različite početne pozicije

              Primjer koji pokazuje mogućnosti atributa start, koji vam omogućuje postavljanje početne vrijednosti brojača.

              1. Element #1
              2. Element #2
              3. Element #3

              Ovako to izgleda na stranici:

              1. Element #1
              2. Element #2
              3. Element #3

              Primjer 4. Promjena brojanja u html numeriranim listama

              Ispod je primjer s mogućnošću promjene vrijednosti brojača pomoću atributa vrijednosti prilikom prikaza novih elemenata u oznakama

            3. .

              1. Element #1
              2. Element #2
              3. Element #3
              4. Element #4

              Ovako to izgleda na stranici:

              1. Element #1
              2. Element #2
              3. Element #3
              4. Element #4

              Primjer 5. Obrnuti numerirani popis u html-u

              Dolje je primjer obrnuto numeriranog popisa (brojenje obrnutim redoslijedom).

              1. Element #1
              2. Element #2
              3. Element #3
              4. Element #4

              Ovako to izgleda na stranici:

              1. Element #1
              2. Element #2
              3. Element #3
              4. Element #4

              Ako ste ikada pokušali promijeniti CSS stilove brojeva redaka (znamenki) u uređenim popisima

                , onda ste vjerojatno naišli na probleme. CSS selektorima nemoguće je doći do stilova ovih elemenata. Ali prilično često dizajn sučelja uključuje promjenu njegove boje, pozadine, veličine itd.

                Evo najjednostavnijeg primjera nestilizirane liste:

                html

                1. Zasaditi drvo
                2. Sagradite kuću
                3. Odgajati sina

                Pogledajmo nekoliko načina za rješavanje gornjeg problema.

                Tradicionalno nespretan način.

                Tradicionalni način rješavanja ovog problema je skrivanje brojeva redaka koje preglednik automatski dodjeljuje. U ovom slučaju koristi se svojstvo list-style: none; .

                css

                li( list-style: none; ) .num( boja: bijela; pozadina: #2980B9; prikaz: inline-block; text-align: center; margina: 5px 10px; line-height: 40px; width: 40px; height: 40 px)

                html

                1. 1 Zasaditi drvo
                2. 2 Sagradite kuću
                3. 3 Odgajati sina

                Slažem se, izgleda suvišno i nefleksibilno. Sakrivamo automatski postavljene redne brojeve i zamjenjujemo ih ručno određenim vrijednostima, zatrpavamo izgled itd.

                Pogledajmo kako možemo postići isti rezultat bez začepljenja izgleda i korištenja pseudo-elementa::before i CSS svojstava content, counter-increment, counter-reset.

                Lijep i ispravan način.

                Prvo ćemo dati kod i demo, a onda ćemo shvatiti što je što.

                css

                ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); boja: bijela; pozadina: #2980B9; display: inline-block; text-align: margin: 5px 10px; line-height: 40px;

                html

                1. Zasaditi drvo
                2. Sagradite kuću
                3. Odgajati sina

                Kao što vidite, html kod ostaje čist i lijep. U ovom slučaju, sav stil elemenata popisa prenosi se u css.

                Pogledajmo točku po točku:

                • li::prije– stvara pseudoelement unutar liste, koji zauzima mjesto prvog djeteta.
                • reset brojača:mojBrojač;– resetira myCounter css brojač unutar svakog
                    .
                  1. protupovećanje: mojBrojač;– povećava css brojač myCounter za svaki pseudo-element::before.
                  2. sadržaj:brojač(mojBrojač);– ispisuje trenutnu vrijednost brojača myCounter unutar pseudoelementa::before.

                Više detalja o css brojačima možete pronaći u

                HTML liste koristi se za grupiranje povezanih informacija. Postoje tri vrste popisa:

                popis s grafičkim oznakama —

                  - svaki element liste
                • označeno markerom,
                  numerirani popis —
                    - svaki element liste
                  1. označena brojem
                    popis definicija- - sastoji se od parova pojmova
                    —
                    definicija.

                    Svaki popis je spremnik unutar kojeg se nalaze elementi popisa ili parovi pojmova i definicija. Elementi popisa ponašaju se kao elementi bloka, složeni jedan ispod drugog i zauzimaju cijelu širinu bloka spremnika. Svaki element liste ima dodatni blok, koji se nalazi sa strane, koji ne sudjeluje u rasporedu.

                    Stvaranje HTML popisa

                    1. Popis s grafičkim oznakama

                    Popis s grafičkim oznakama je neuređeni popis (s engleskog neuređenog popisa). Stvoreno pomoću uparene oznake

                    . Oznaka elementa popisa je oznaka, na primjer, ispunjeni krug.

                    Preglednici prema zadanim postavkama dodaju sljedeće oblikovanje u blok popisa:

                    Svaki element popisa kreira se pomoću uparene oznake

                  2. (sa engleskog popisa).
                    dostupno .
                  • Microsoft
                  • Google
                  • Jabuka
                  Riža. 1. Popis s grafičkim oznakama

                  2. Numerirani popis

                  Numerirani popis se stvara pomoću uparene oznake. Svaka stavka popisa također se stvara pomoću elementa

                • . Preglednik automatski numerira elemente redom, a ako izbrišete jedan ili više elemenata takvog popisa, preostali brojevi će se automatski ponovno izračunati.

                  Blok popisa također ima zadane stilove preglednika:

                • Dostupan je atribut vrijednosti koji vam omogućuje promjenu zadanog broja za odabranu stavku popisa. Na primjer, ako za prvu stavku na popisu postavite
                • , tada će se preostalo numeriranje ponovno izračunati u odnosu na novu vrijednost.

                  Za oznaku

                    Dostupni su sljedeći atributi:

                    Tablica 1. Atributi oznake
                    Atribut Opis, prihvaćena vrijednost
                    obrnuto Atribut reversed uzrokuje da se popis prikazuje obrnutim redoslijedom (na primjer, 9, 8, 7...).
                    početak Atribut start određuje početnu vrijednost od koje će početi numeriranje, na primjer, konstrukcija
                      prvom artiklu će se dodijeliti redni broj “10”. Istodobno možete odrediti i vrstu numeriranja, na primjer,
                        .
                    tip Atribut tipa određuje vrstu markera koji će se koristiti na popisu (slova ili brojke). Prihvaćene vrijednosti:
                    1 — zadana vrijednost, decimalno numeriranje.
                    A — numeriranje popisa abecednim redom, velika slova (A, B, C, D).
                    a — numeriranje popisa abecednim redom, mala slova (a, b, c, d).
                    I - numeracija velikim rimskim brojevima (I, II, III, IV).
                    i — numeriranje malim rimskim brojevima (i, ii, iii, iv).
                    1. Microsoft
                    2. Google
                    3. Jabuka
                    Riža. 2. Numerirani popis

                    3. Popis definicija

                    Popisi definicija stvaraju se pomoću oznake

                    . Za dodavanje pojma upotrijebite oznaku
                    , a za umetanje definicije - tag
                    .

                    Blok popisa definicija ima sljedeće zadane stilove preglednika:

                    Za oznake

                    ,
                    I
                    dostupno .

                    Direktor:
                    Petar Točilin
                    Uloge:
                    Andrej Gaiduljan
                    Aleksej Gavrilov
                    Vitalij Gogunski
                    Mariya Kozhevnikova

                    Riža. 3. Popis definicija

                    4. Ugniježđeni popis

                    Mogućnosti jednostavnih popisa često nisu dovoljne, na primjer, kada se stvara sadržaj, nema načina bez kojeg ugniježđene stavke. Oznaka za ugniježđeni popis bila bi sljedeća:

                    • Stavak 1.
                    • Točka 2.
                      • Podtočka 2.1.
                      • Podtočka 2.2.
                        • Podtočka 2.2.1.
                        • Podtočka 2.2.2.
                      • Podtočka 2.3.
                    • Točka 3.

                    Riža. 4. Ugniježđeni popis

                    5. Višerazinski numerirani popis

                    Višerazinski popis koristi se za prikaz stavki popisa na različitim razinama s različitim uvlakama. Oznaka za višerazinski numerirani popis bila bi sljedeća:

                    1. paragraf
                    2. paragraf
                      1. paragraf
                      2. paragraf
                      3. paragraf
                        1. paragraf
                        2. paragraf
                        3. paragraf
                      4. paragraf
                    3. paragraf
                    4. paragraf

                    Ovo zadano označavanje stvorit će novo numeriranje za svaki ugniježđeni popis, počevši od jedan. Da biste stvorili ugniježđeno numeriranje, trebate koristiti sljedeća svojstva:
                    poništavanje brojača poništava jedan ili više brojača, specificirajući vrijednost koja se poništava;
                    counter-increment specificira vrijednost inkrementa brojača, tj. u kojim će koracima svaka sljedeća stavka biti numerirana;
                    sadržaj - generirani sadržaj, u ovom slučaju odgovoran je za prikaz broja prije svake stavke popisa.

                    Ol ( /* uklonite standardno numeriranje */ list-style: none; /* Identificirajte brojač i dajte mu ime li. Vrijednost brojača nije navedena - prema zadanim je postavkama 0 */ counter-reset: li; ) li :before ( /* Definiramo element koji će biti numeriran - li Pseudoelement before označava da će sadržaj umetnut pomoću svojstva content biti postavljen ispred stavki popisa. Ovdje se postavlja vrijednost inkrementa brojača (zadano je 1 */ counter-increment: li /). * Svojstvo sadržaja prikazuje broj stavke popisa counters() znači da generirani tekst predstavlja vrijednosti svih brojača s tim nazivom između brojeva, a ispred sadržaja svake stavke popisa dodaje se točka s razmakom */ content: counters(li,".") "."
                    Riža. 5. Višerazinski numerirani popis



2024 wisemotors.ru. Kako radi. Željezo. Rudarstvo. Kriptovaluta.