###
  • Programi
  • Sigurnost
  • Vijesti
  • Zanimljiv
  • Savjet
  • Vijesti
  • Recenzije

    • Kako napraviti numeriranu listu u cssu. Dizajniranje lista u CSS-u. Popisi s grafičkim oznakama u HTML-u

    16.01.2021 Sigurnost

    Od autora: Web preglednici vam omogućuju promjenu izgled mnogo elemenata na stranici sa koristeći CSS. Ali kada renderiraju neke elemente na stranici, preglednici tvrdoglavo odbijaju promijeniti njihov dizajn. Na primjer, elementi obrazaca kao što su padajući popisi (select), radio gumbi (radio) i potvrdni okviri (checkbox) imaju svoj specifičan izgled u svakom operacijski sustav, a preglednici pokušavaju nametnuti ovaj izgled web obrascima.

    Web preglednici također određuju kako trebaju biti prikazani nenumerirani i numerirani popisi. Na primjer, preglednici jako otežavaju promjenu izgleda grafičkih oznaka za nenumerirane popise i brojeva za numerirane popise. Naravno, postoji nekoliko CSS svojstava za rad s popisima, kao što su list-style-type, list-style-image i list-style-position. Ali čak i učiniti nešto jednostavno (kao što je promjena boje brojeva na popisu) zahtijeva pribjegavanje sofisticiranim HTML/CSS zaobilaznim rješenjima.

    Srećom, kombiniranjem nekoliko manje poznatih CSS svojstava, brojevima numeriranih popisa možete dati željeni izgled. Zapravo, nakon čitanja ovog vodiča, moći ćete promijeniti fontove, boje i gotovo sve druge atribute brojeva na numeriranom popisu.

    Cijela tajna sastoji se od dvije komponente: prvo, potpuno sakriti standardne (zadane) brojeve u numeriranom popisu, i drugo, koristiti ::before pseudo-element za ponovno dodavanje ovih brojeva.

    1. Dodajte klasu ili identifikator (ID) za numerirani popis. Ovo je dobra ideja koja vam omogućuje da kasnije identificirate svaki popis za koji želite stvoriti vlastite brojače:

    1. Ovo je prvi element
    2. Ovo je drugi element
    3. Ovo je treći element
    4. Ovo je četvrti element
    5. Ovo je peti element
    6. Ovo je šesti element

    < ol class = "custom-counter" >

    < / ol >

    Ako koristite samo birače oznaka kao što su ol ili li, dobit ćete iste brojače, s istim izgledom, za sve numerirane popise na stranici.

    2. Otkažite zadani prikaz markera popisa. Prvo, morate biti sigurni da preglednik neće dodati zadani izgled za brojače. U tome će vam pomoći sljedeće pravilo:

    Prilagođeni brojač ( margin-left: 0; padding-right: 0; list-style-type: none; )

    Custom - counter (

    margina - lijevo: 0;

    ispuna - desno: 0;

    list-style-type: nijedan;

    Ovo pravilo također uklanja uvlake koje preglednici dodaju na početku numeriranih popisa. Budući da neki preglednici koriste svojstvo margine za uvlačenje, a drugi svojstvo padding, trebate postaviti oba ova svojstva na nulu.

    3. Postavite naziv za svojstvo protupovećanja elemenata popisa. U CSS-u postoji svojstvo koje se zove protupovećanje. Omogućuje vam postavljanje naziva za vaš brojač. To nam ne daje ništa posebno, osim što možemo identificirati svoj brojač kada koristimo pseudoelement ::before (što ćemo učiniti u sljedećem koraku). Evo jednostavnog primjera koda za određivanje naziva brojača:

    Prilagođeni brojač li (povećanje brojača: brojač koraka; )

    Custom - counter li (

    brojač prirasta : brojač koraka ;

    U ovom primjeru naziv step-counter ne znači ništa posebno. To nije vrijednost za CSS svojstvo ili bilo što drugo. Ovo je samo ime koje ćemo od sada koristiti. Možete smisliti bilo koje ime: stepenica, pult ili čak boce-korijenskog-piva-na-zidu.

    4. Upotrijebite pseudoelement ::before da biste dodali brojeve brojača i stilizirali ih:

    Custom-counter li::before ( content: counter(step-counter); margin-right: 5px; font-size: 80%; background-color: rgb(200,200,200); color: white; font-weight: bold; padding : 3px 8px; rubni radijus: 3px; )

    Prilagođeno - brojač li::before(

    sadržaj : brojač (brojač koraka ) ;

    margina - desno: 5px;

    ispuna: 3px 8px;

    granica - radijus : 3px ;

    Pseudo-element::before omogućuje umetanje sadržaja prije elementa. U našem slučaju, umetnut će sadržaj prije elementa liste. Vi koristite CSS svojstvo sadržaj kako biste rekli pregledniku koji sadržaj treba staviti na početak elementa popisa. To mogu biti stvarne riječi ili nešto što preglednik automatski generira.

    Ovdje koristimo counter(), koji kao parametar uzima identifikator dobiven iz svojstva counter-increment. Upamtite da smo u koraku 2 naveli naziv step-counter za svojstvo counter-increment, čime smo brojaču dali ime i rekli pregledniku da koristi brojač za svaki element popisa. Brojač će se povećati za jedan za svaki element popisa, tj. Kao rezultat, imat ćemo broj 1 ispred prvog elementa liste, broj 2 ispred drugog elementa liste, itd.

    Naravno, preglednici to obično rade. Međutim, korištenjem pseudoelementa ::before također možemo oblikovati ove brojeve na način koji ne bi bio moguć sa standardnim numeriranim stavkama popisa. U biti, sva ostala svojstva u gornjem pravilu koriste se za jednostavno kreiranje cool izgleda za brojač (npr. boja pozadine, zaobljeni kutovi, drugačija boja fonta, itd.). Ovi stilovi pokazuju samo neke od načina na koje možete promijeniti izgled brojeva u numeriranim popisima. A postoji još više što možete učiniti, stoga slobodno upotrijebite CSS trikove koje poznajete kako biste izradili zanimljive, zabavne i lijepe popise s brojevima.

    Na web stranici možete vidjeti gotov radni primjer korištenja ove tehnike

    Za popise, čija je izrada pomoću HTML-a opisana ovdje, dostupna su sljedeća CSS pravila.

    lista-stil-tip

    Određuje grafičku oznaku ili numeriranje popisa umjesto atributa tipa u HTML kodu. Vrijednosti svojstava za popise s grafičkim oznakama mogu biti:

    • disk- krug, postavljen prema zadanim postavkama.
    • krug- krug.
    • kvadrat- kvadrat.

    Za numerirane popise svojstvu se obično dodjeljuju sljedeće vrijednosti:

    • decimal- Arapski brojevi, zadana vrijednost.
    • niže-rimski- mali rimski brojevi.
    • gornji-roman- veliki rimski brojevi.
    • niži-alfa- mala latinična slova.
    • gornji-alfa- velika latinična slova.

    Također, za bilo koju vrstu popisa, svojstvo list-style-type može se postaviti na ništa, što će u potpunosti ukloniti oznaku.

    Druge vrijednosti dostupne su za numerirane popise, kao što su cjk-ideografski postavlja ideografsko numeriranje, Armenac- tradicionalni armenski, i decimalna-početna-nula postavit će numeriranje rimskim brojevima, ali s vodećom nulom: 01, 02, 03... 09, međutim u praksi se te i slične vrijednosti koriste izuzetno rijetko.

    Primjer u nastavku prikazuje tri popisa: numerirani popis s tradicionalnim armenskim numeriranjem, popis s grafičkim oznakama s krugom i numerirani popis sa stavkama numeriranim ideografski.

    Popisuje CSS

    1. Prva točka
    2. Druga točka
    3. Treća točka
    • Prva točka
    • Druga točka
    • Treća točka
    1. Prva točka
    2. Druga točka
    3. Treća točka


    Proizlaziti.

    Boja markera odgovara boji teksta na popisu određenom svojstvom boja.

    lista-stil-slika

    Omogućuje vam postavljanje vlastite slike kao oznake popisa. Na primjer, ako mapa koja sadrži stranicu popisa sadrži datoteku marker.png, koji želite koristiti, kod dizajna će biti sljedeći:

    Ul (list-style-image: url("marker.png"); )

    lista-stil-pozicija

    Određuje položaj markera: ili je postavljen izvan granice elementa popisa ( list-style-position: izvana), ili se tekst prelama oko njega ( list-style-position: unutra).

    Primjer ispod pokazuje razliku između ovih vrijednosti. U prvom slučaju marker se nalazi unutar liste, au drugom slučaju se nalazi izvan liste.

    lista-stil-pozicija

    • Pogledajte samo razliku između iznutra i izvana.
    • U slučaju unutarnjeg, marker se uklapa izravno u popis, ne izlazeći izvan njegovih granica i ne ometajući izgled. Tekst teče oko njega, čini se da je marker unutra.
    • Vanjska vrijednost pomiče oznaku izvan popisa.


    Kao rezultat, stvorena je sljedeća stranica:

    u stilu popisa

    Omogućuje vam da skratite kod ispisivanjem sva tri navedena svojstva u jednom redu. Pravila se pišu odvojena razmacima:

    Ul ( stil liste: kvadrat iznutra; )

    Pogledajmo primjer stranice s tri popisa. Prvi je numeriran brojevima u formatu 01, 02, drugi je označen prilagođenom slikom (datoteka marker.png u mapi sa stranicom), marker trećeg popisa je onemogućen.

    HTML kod je dan ispod.

    u stilu popisa

    1. Prva točka
    2. Druga točka
    3. Treća točka
    • Prva točka
    • Druga točka
    • Treća točka
    1. Prva točka
    2. Druga točka
    3. Treća točka


    Preglednik će prikazati sljedeću stranicu.

    Numerirane liste su skup elemenata sa svojim serijskim brojevima. Vrsta i vrsta numeriranja ovisi o atributima oznake

      , koji se koristi za izradu popisa. Svaka stavka na numeriranom popisu označena je oznakom
    1. kako je prikazano dolje.

      1. Prva točka
      2. Druga točka
      3. Treća točka

      Ako ne navedete nikakve dodatne atribute i samo napišite oznaku

        , tada je zadana postavka popis s arapskim brojevima (1, 2, 3,...), kao što je prikazano u primjeru 11.3.

        Primjer 11.3. Napravite numerirani popis

        Numerirani popis

        Rad s vremenom

        1. stvaranje točnosti (nikada nećete zakasniti ni na što);
        2. lijek za točnost (nikada se nećete žuriti);
        3. promjena u percepciji vremena i satova.


        Proizlaziti ovaj primjer prikazano na sl. 11.3.

        Riža. 11.3. Prikaz numeriranog popisa

        Imajte na umu da numerirani popis također dodaje automatsko uvlačenje na vrhu, dnu i lijevo od teksta.

        Elementi numeriranja mogu biti sljedeće vrijednosti:

        • Arapski brojevi (1, 2, 3, ...);
        • velika latinična slova (A, B, C, ...);
        • mala latinična slova (a, b, c, ...);
        • veliki rimski brojevi (I, II, III, ...);
        • malim rimskim brojevima (i, ii, iii, ...).

        Za označavanje vrste numeriranog popisa koristite atribut type oznake

          . Njegove moguće vrijednosti dane su u tablici. 11.2.

          Stol 11.2. Vrste numeriranih lista
          Vrsta popisa HTML kôd Primjer
          Arapski brojevi

          		1. Čeburaška
          2. Krokodil Gena
          3. Šapokljak
          Velika slova latiničnog alfabeta

          		A. Čeburaška
          B. Krokodil Gena
          C. Shapoklyak
          Mala slova latinične abecede

          		a. Čeburaška
          b. Krokodil Gena
          c. Shapoklyak
          Rimski brojevi u velika slova

          		I. Čeburaška
          II. Krokodil Gena
          III. Shapoklyak
          Rimski brojevi malim slovima

          		ja Čeburaška
          ii. Krokodil Gena
          iii. Shapoklyak

          Za početak popisa s određenom vrijednošću, upotrijebite početni atribut oznake

            . Nije važno na koji je tip popis postavljen korištenjem type, atribut start radi isto i s rimskim i s arapskim brojevima. Primjer 11.4 pokazuje kako stvoriti popis pomoću velikih rimskih brojeva koji počinju s osam.

            Primjer 11.4. Numeriranje popisa

            rimski brojevi

            1. Kralj Magnum XLIV
            2. Kralj Siegfried XVI
            3. Kralj Sigismund XXI
            4. Kralj Husbrandt I


            Rezultat ovog primjera prikazan je na sl. 11.4.

            Riža. 11.4. Numerirani popis rimskim brojevima


            Vrlo često morate koristiti numeriranje: prilikom izrade raznih popisa, popisa, dizajniranja tablice sadržaja ili tablice sadržaja itd.

            CSS koristi brojače za automatizaciju procesa numeriranja.

            Počnimo s jednostavnim primjerom. Zatim ćemo, na kompliciraniji način, stvoriti ugniježđeni popis s automatskim numeriranjem njegovih stavki i podstavki.

            Identifikacija brojila

            Prvo morate identificirati mjerač.

            Korištenjem svojstva counter-reset, brojaču se dodjeljuje ime i početna vrijednost. Ime može biti bilo koje, ali ne može započeti brojem.

            Isječak koda:

            Ovaj unos kaže da za oznaku instaliran je brojač s imenom broj s početnom vrijednošću 3.

            Prema zadanim postavkama početna vrijednost brojača je 0.

            Povećanje brojača

            Za to se koristi svojstvo protuinkrementa. Također se koristi za određivanje inkremenata brojača - broja za koji će se vrijednost brojača povećati.

            Isječak koda:

            tijelo (poništavanje brojača: broj 3 ;)
            tijelo p ( protupovećanje : broj 3 ; }

            Ovaj isječak koda kaže da paragrafi ( označiti

            ) u tijelu dokumenta bit će numerirani brojačem brojeva u koracima od 3.

            Prvi odlomak bit će označen brojem 6, budući da je početna vrijednost brojača 3, a njegov inkrement 3.

            Zadana vrijednost za inkremente brojača je 1.

            Sada su postavljeni svi potrebni parametri brojača: naziv, početna vrijednost, inkrement i element koji će biti numeriran. Unaprijediti....

            Prikaz brojača

            Sada morate prikazati vrijednost brojača i postaviti pravila za njegovu lokaciju. To se radi korištenjem svojstva sadržaja i pseudoelemenata prije i poslije.

            Svojstvo content umeće sadržaj ispred ( prije) ili nakon ( nakon) navedenog elementa.

            Isječak koda:

            tijelo (poništavanje brojača: broj 3 ;)
            tijelo p:nakon ( protupovećanje : broj 3 ; content : " jednako " brojač(broj) "." ;)

            Dakle, prethodnom isječku koda dodali smo svojstvo sadržaja koje ispisuje riječ "jednako" iza koje slijedi vrijednost broja brojača i točka "." . Sve se to umeće na stranicu nakon sadržaja odlomka ( označiti

            ), što kaže pseudoelement after.

            Eventualno...

            Ispod je opisani primjer.

            Isječak koda:






            2 puta 3


            3 puta 3


            4 puta 3


            5 puta 3




            Proizlaziti:

            Ugniježđene liste s automatskim numeriranjem

            Pogledajmo primjer korištenja brojača za automatizaciju procesa numeriranja ugniježđenih popisa.

            Trebali biste već znati, i iz HTML-a i iz proučavanja popisa u CSS-u, da se stavke popisa automatski numeriraju. Ali ovo numeriranje je najjednostavnije.

            Što je s automatskim numeriranjem potklauzula poput 1.1, 1.2, 2.1, 2.2 itd.?

            Ovaj problem je riješen pomoću brojača koji vam omogućuju automatizaciju procesa numeriranja ugniježđenih popisa.

            Isječak koda:





            Automatsko numeriranje u CSS-u


            1. Prva stavka popisa


              1. Prvi podstavak stavka 1

              2. Drugi podstavak 1. stavka

            2. Druga stavka popisa


              1. Prvi podstavak stavka 2

              2. Drugi podstavak 2. stavka

            3. Treća stavka na popisu


              1. Prvi podstavak stavka 3

              2. Drugi podstavak 3. stavka

              3. Treći podstavak 3. stavka




              Proizlaziti:

              Ovako automatizirate proces numeriranja ugniježđenih popisa!

              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 rješavanja 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; poravnanje teksta: središte; margina: 5px 10px; visina linije: 40px; širina: 40px; visina: 40px; )

                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; poravnanje teksta: centar; margina: 5px 10px; visina linije: 40px; širina: 40px; visina: 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.
                • poništavanje 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