Edina razlika je v tem, da je ta oznaka narejena izključno za oštevilčenje seznamov. Ime oznake izhaja iz angleške okrajšave "Ordered List" - oštevilčen seznam.
Sintaksa oznake
- Element #1
- Element #2
- Element #3
- ...
Kjer lahko atribut type="value" sprejme naslednje vrednosti
- A - nastavi oznake v obliki velikih latiničnih črk (A, B, C..);
- a - nastavi oznake v obliki malih latiničnih črk (a, b, c..);
- I - določa oznake v obliki velikih rimskih številk (I, II, III, IV ..);
- i - nastavi oznake v obliki majhnih rimskih številk (i, ii, iii, iv..);
- 1 (privzeto) - nastavi oznake v obliki arabskih številk (1, 2, 3..);
Atribut start="value" podaja začetno vrednost (začetno vrednost) poročila.
Atribut reversed določa obratno štetje (če je potrebno).
Oznaka
- zahteva obvezno uporabo zaključne oznake
Seznanjena oznaka se uporablja za oblikovanje elementov seznama
Opomba
Znotraj seznama lahko račun spremenite v svojega. V ta namen je na oznaki poseben atribut value="".
- Element #1
- Element #2
- Element #3
Primeri z oštevilčenimi seznami v html ( )
Primer 1. HTML oštevilčen seznam z latiničnimi črkami
Primer z velikimi tiskanimi črkami
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
Primer z malimi črkami
- Element #10
- Element #11
- Element #12
Takole izgleda na strani:
- Element #1
- Element #2
- Element #3
Primer 2. HTML oštevilčen seznam z latiničnimi črkami
Primer z velikimi tiskanimi črkami
- Element #1
- Element #2
- Element #3
Takole izgleda na strani:
- Element #1
- Element #2
- Element #3
Primer z malimi črkami
- Element #1
- Element #2
- Element #3
Takole izgleda na strani:
- Element #1
- Element #2
- Element #3
Primer 3. Oštevilčen seznam html drugačen začetni položaj
Primer, ki prikazuje zmožnosti atributa start, ki omogoča nastavitev začetne vrednosti števca.
- Element #1
- Element #2
- Element #3
Takole izgleda na strani:
- Element #1
- Element #2
- Element #3
Primer 4. Spreminjanje števila v html oštevilčenih seznamih
Spodaj je primer z možnostjo spreminjanja vrednosti števca z uporabo atributa vrednosti pri prikazu novih elementov v oznakah
- Element #1
- Element #2
- Element #3
- Element #4
Takole izgleda na strani:
- Element #1
- Element #2
- Element #3
- Element #4
Primer 5. Obraten oštevilčen seznam v html
Spodaj je primer obratno oštevilčenega seznama (štetje v obratnem vrstnem redu).
- Element #1
- Element #2
- Element #3
- Element #4
Takole izgleda na strani:
- Element #1
- Element #2
- Element #3
- Element #4
Seznami se aktivno uporabljajo za samodejno oštevilčenje vsebinskih blokov. Vendar pa je pri uporabi ugnezdenih seznamov nemogoče dobiti oštevilčenje podčlenkov, kot so 1.1, 1.2, 1.3, saj bo vsak seznam neodvisen. Toda tisto, kar v SHTML ni mogoče, je mogoče dodeliti slogom.
Najprej si poglejmo, kako na splošno ustvariti ugnezdene sezname. Glavni vsebnik je oznaka
- , elemente seznama pa tvorijo oznake
- . Tudi ugnezdeni seznam se začne z
- , vendar mora biti ta oznaka znotraj vsebnika
- , tako se ohrani pravilna sintaksa (primer 1).
Primer 1: Običajni ugnezdeni seznam
Ugnezdeni seznam
- 1. odstavek
- Podčlen 1.1
- Podčlen 1.2
- Podčlen 1.3
- Točka 2
- Podčlen 2.1
- Podčlen 2.2
Rezultat tega primera je prikazan na sl. 1. Upoštevajte, da se številčenje ugnezdenih seznamov začne vsakič znova.
riž. 1. Pogled ugnezdenega seznama
Zdaj pa odstranimo vgrajeno oštevilčenje seznamov in ustvarimo novega, vendar v obliki, ki jo potrebujemo. Če želite to narediti, potrebujete tri atribute sloga: ponastavitev števca, povečanje števca in vsebino.
ponastavitev števca - nastavi spremenljivko, ki bo shranila vrednost števca;
protiporast - poveča ali zmanjša vrednost števca za določeno število;
vsebina - natisne vrednost števca pri uporabi argumenta števec (spremenljivka). Deluje v povezavi s psevdoelementi za ali pred.
Za prvi nivo seznama pokličimo spremenljivko števca list1 , za drugi nivo pa - list2 . Potem bo zagon števcev za sezname naslednji.
OL (ponastavitev protinastavitve: seznam1;) /* Seznam prve stopnje */
OL OL ( ponastavitev protinastavitve: seznam2; ) /* Drugostopenjski seznam*/V tem primeru izbirniki vsebine pomagajo ločiti ugnezdeni seznam od zunanjega seznama. Konstrukcija OL OL pomeni uporabo sloga samo za oznako
- , vendar le, če se nahaja znotraj druge oznake
- odstavek
- Podčlen
- Podčlen
- Podčlen
- odstavek
- Podčlen
- Podčlen
- na mestu, kjer se pojavi
- , brskalnik samodejno doda prelom vrstice;
- seznam ima zamike na vrhu in na dnu;
- Privzeto so oznake prikazane kot zapolnjen krog;
- Vsak element seznama je premaknjen v desno glede na glavno besedilo.
- disk - markerji v obliki napolnjenega kroga;
- krog - oznake v obliki odprtega kroga;
- kvadrat - kvadratni markerji.
- Sepulki
- Sepulcaria
- Sepulacija
- Ne bo delovalo, zato se boste morali potruditi. Če želite to narediti, skrijte oznake seznama z lastnostjo sloga seznama z vrednostjo none in v besedilu pred vsebino
- Svoj znak dodamo z uporabo psevdoelementa ::before. V primeru 2 trikotnik deluje kot tak marker.
Primer 2: Uporaba::before
Seznami - Sepulki
- Sepulcaria
- Sepulacija
Rezultat tega primera je prikazan na sl. 2. Ker uporaba lastnosti sloga seznama z vrednostjo none sploh ne odstrani označevalcev, ampak jih le skrije pred pogledom, se zdi seznam premaknjen v desno. Da se znebite te funkcije, primer doda lastnost zamika besedila z negativno vrednostjo. Njegova naloga je premakniti besedilo za en znak v levo.
riž. 2. Poljubni označevalci na seznamu
Ni nujno, da je znak v šestnajstiški obliki; vstavi se lahko neposredno v besedilo. Glavna stvar je, da dokument shranite v kodiranju UTF-8 in da ga urednik podpira. Same znake in njihove kode lahko vzamete na primer iz LibreOffice Writer (slika 3).
riž. 3. Izbira simbola v LibreOffice
Seznam z ročno narisanimi oznakami
Slogi vam omogočajo, da nastavite katero koli primerno sliko kot oznako prek lastnosti list-style-image. Vrednost je relativna ali absolutna pot do grafične datoteke, kot je prikazano v 3. primeru.
3. primer: uporaba slike kot označevalca
Seznami - Sepulki
- Sepulcaria
- Sepulacija
Najbolje je, da izberete majhno sliko, da elementov seznama ne spremenite v napise. Na sl. Slika 4 prikazuje rezultat primera uporabe majhnih slik kot označevalcev.
riž. 4. Risba kot marker
Uporaba slike v slogu seznama ima nekaj pomanjkljivosti:
- vzorca ni mogoče premikati navzgor ali navzdol;
- Položaj slike glede na besedilo se lahko razlikuje v različnih brskalnikih.
Tem pomanjkljivostim se je mogoče izogniti z lastnostjo ozadja, ki nastavi sliko ozadja. Za vsak element seznama
- odstranimo originalne oznake in nastavimo sliko ozadja brez ponavljanja. In da se besedilo ne pojavi na vrhu slike, ga premaknemo v desno z uporabo padding-left (primer 4).
Primer 4: Uporaba ozadja
Ul ( margin-left: -1em; ) li ( list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )
Položaj besedila in oznake
Obstajata dva načina za postavitev oznake glede na besedilo: oznako premaknete izven meje elementov seznama ali ovijete okoli besedila (slika 5).
znotraj zunaj riž. 5. Postavitev oznak glede na besedilo
Za nadzor položaja oznak uporabite lastnost list-style-position. Ima dva pomena: zunaj - oznake so postavljene zunaj besedilnega bloka (to je privzeta vrednost) in znotraj - oznake so del besedilnega bloka in so prikazane v elementu seznama (primer 5).
Primer 5: Spreminjanje položaja markerjev
Seznami - Preden začnete, preverite, ali je vključena oprema, ki je vključena v komplet 3BM.
- Če ena ali več perifernih naprav manjka, se takoj obrnite na tehnično osebje CC.
- Po vizualnem pregledu vašega delovnega območja lahko previdno vklopite napajanje 3BM.
Rezultat tega primera je prikazan na sl. 6.
Seznami se pogosto uporabljajo na spletnih straneh, zato je to vprašanje zelo pomembno. V HTML obstajata dve vrsti seznamov: oštevilčeni in neoštevilčeni (označeni). Za izdelavo seznamov se uporabljajo posebne oznake. V tej lekciji se bomo seznanili z glavnimi oznakami. Oglejmo si vrste seznamov v HTML po vrstnem redu in uporabimo resnične primere, da razumemo, v čem se razlikujejo in kako so izpisani.
Oštevilčeni seznami v HTML
Oštevilčeni seznami v HTML so urejeno zaporedje elementov. Na oštevilčenem seznamu je pred vsakim elementom samodejno serijska številka. Oštevilčen seznam izgleda takole:
- Prvi element seznama
- Drugi element seznama
- Tretji element seznama
- Četrti element seznama
- Peti element seznama
V tem primeru bo seznam prikazan z arabskimi številkami. Oštevilčeni seznami imajo atribute, s katerimi lahko nastavite obliko za prikaz oštevilčenja seznama:
1. Atributi "I" ali "i" - seznam je oštevilčen z latiničnimi črkami (velike ali male);
2. Atributi "A" ali "a" - oštevilčenje z latiničnimi črkami (velike ali male);
3. Atribut »začetek« se uporablja za zagotovitev, da se oštevilčenje ne začne od prve postavke, kot parameter je navedena serijska številka, iz katere je treba generirati seznam.Primer. Oštevilčen seznam, ki je sestavljen iz latiničnih črk in se začne z drugim elementom:
- Prvi element seznama
- Drugi element seznama
- Tretji element seznama
- Četrti element seznama
- Peti element seznama
Označeni seznami v HTML
Neurejeni seznami se imenujejo tudi neurejeni ali označeni seznami. Za označevanje elementov takšnega seznama se uporabljajo posebni znaki (označevalci). Tip označevalcev seznama je določen v kodi HTML s posebnimi atributi. Primer označenega seznama v HTML:
- Prvi element seznama
- Drugi element seznama
- Tretji element seznama
- Četrti element seznama
- Peti element seznama
V tem primeru bo seznam sestavljen iz oznak v obliki krepke pike. Atributi neurejenega seznama so:
1. "disk" - markerji v obliki napolnjenega kroga
2. "krog" - oznake v obliki praznega kroga
3. "kvadrat" - markerji v obliki napolnjenega kvadrataPrimer določanja določenega označevalca na seznamu:
- Prvi element seznama
- Drugi element seznama
- Tretji element seznama
- Četrti element seznama
- Peti element seznama
Grafične slike lahko uporabite tudi kot označevalce seznamov, kar vam omogoča čudovito oblikovanje dokumenta HTML. V praksi se to zelo pogosto uporablja. Za izvedbo te naloge morate v kodo napisati pot do slike, ki bo služila kot oznaka:
Prvi element seznama
Seznami so lahko tudi ugnezdeni, sestavljeni so iz več seznamov:
- Prvi element seznama
- Drugi element seznama
- Prva podpostavka seznama
- Druga podpostavka seznama
- Tretji element seznama
- Četrti element seznama
- Peti element seznama
To je verjetno vse, kar sem vam želel povedati o seznamih v HTML. Seznami so zelo pogosti na spletnih straneh. Če jih želite oblikovati, morate poznati določena pravila sklepanja.
V HTML obstajata dve vrsti seznamov: oštevilčeni in neoštevilčeni. Njihovo ustvarjanje je skoraj enako. Tudi oznake se razlikujejo za en znak. Ustvarite lahko tudi, ki lahko vključuje tako oštevilčene kot označevalne.
Te sezname je mogoče preoblikovati poljubno. Vse je odvisno od vaše domišljije. Najprej si bomo ogledali standardne sezname, enake kot v urejevalniku Word, nato pa jih bomo izboljšali in oblikovali do nerazpoznavnosti.
HTML oštevilčen seznam
Navadno oštevilčeno lahko ustvarite z naslednjimi oznakami:
- Prvi element seznama
- Drugi element seznama
- Tretji element na seznamu
- , nato samodejno postavi pred njo .
- 1 - arabske številke;
- A - velike črke;
- a - male latinske črke;
- I - velike rimske številke;
- i - male rimske številke.
-
.
Vrednost števca se poveča prek izbirnika OL LI:before, ki se mu dodajo atributi protipovišanja in sloga vsebine. Atribut counter-increment z vrednostjo list1 poveča vrednost tega števca za eno in content: counter(list1) "." prikaže vrednost števca pred elementom seznama. Ti atributi delujejo v parih, zato jih je treba omogočiti hkrati.
OL LI:prej ( /* Seznam prve stopnje */
protiporast: seznam1;
/* Izpis vrednosti kot 1., 2.*/
}
OL OL LI:prej ( /* Seznam druge stopnje */
protiporast: seznam2; /* Povečaj vrednost števca */
}Za ugnezdeni seznam ponovno uporabimo izbirnike vsebine (OL OL) in hkrati uporabimo izhod števca list1 in list2, v tem primeru bomo dobili oštevilčenje tiste vrste, ki jo potrebujemo.
Končna koda je prikazana v 2. primeru.
Primer 2. Ugnezdeni seznami s samodejnim oštevilčenjem
Ugnezdeni seznam
Rezultat tega primera je prikazan na sl. 2.
riž. 2. Vrsta samodejnega oštevilčenja seznama v brskalniku Opera
Komentiraj
Naveden primer ne deluje v brskalniku Internet Explorer do vključno različice 7, saj ne podpira nobene od danih slogovnih lastnosti.
Ker brskalnik Internet Explorer ne podpira veliko zanimivih slogovnih atributov, je treba običajno številčenje na seznamih posebej zanj pustiti nedotaknjeno. Če želite to narediti, odstranite list-style-type: none. Toda to bo vplivalo tudi na druge brskalnike, v katerih primer deluje pravilno, zato boste morali uporabiti kramp - to pomeni tehniko, ko različnim brskalnikom dodelite različno slogovno kodo. Uporabite lahko na primer oznako !important. Dodajanje !important vrednosti slogovnega atributa poveča njegovo pomembnost. Če ponovno definirate isti atribut brez !important, ga bodo brskalniki prezrli. Vendar ne v Intenet Explorer različici 6 in starejših.
LI (
list-style-type: brez !pomembno; /* Odstrani oštevilčenje v brskalnikih Opera, Safari, Firefox */
list-style-type: decimalno; /* Pusti oštevilčenje v brskalniku IE6 in spodaj */
}Če te kode zamenjamo z nizom z izbirnikom LI v primeru 2, dobimo ugnezdeni seznam, ki deluje pravilno v vseh brskalnikih.
Označeni seznami vam omogočajo, da veliko besedilo razdelite na ločene bloke, od katerih se vsak začne z oznako - običajno z majhno piko. To pritegne pozornost bralca na besedilo in poveča njegovo berljivost.
Z elementom
- Povezane so naslednje funkcije:
Slika 1 prikazuje rezultat primera, ki ponazarja zgornje funkcije označenega seznama.
riž. 1. Pogled seznama oznak
Vrsta markerja
Označevalci imajo lahko eno od treh oblik: zapolnjen krog (privzeto), prazen krog in kvadrat. Če želite izbrati vrsto označevalca, uporabite lastnost tipa sloga seznama ali univerzalno lastnost sloga seznama (1. primer). Veljajo naslednje vrednosti:
Primer 1: Spreminjanje videza markerja
Seznami
Primer prikazuje, kako ustvariti seznam z oznakami z uporabo majhnega enobarvnega kvadrata kot ikone oznake. Čeprav je število vrednosti omejeno na tri, to ne pomeni, da imamo na voljo samo tri vrste markerjev. Obstaja veliko posebnih znakov, ki lahko uspešno delujejo kot ikona markerja. Privijte jih neposredno na
Preprosti seznami izgledajo takole
V skladu s standardi mora biti vsak element seznama znotraj začetne in končne oznake li. Če pa ne vstavite zaključne oznake, bo rezultat popolnoma enak. Procesor je precej pameten. Med pretvorbo seznama razčleni začetne oznake. Če vidi novega
Tako je mogoče sestaviti sezname, kot je prikazano spodaj.
Toda z vidika strokovnjakov je to napačno.
Neoštevilčeni (ali bullet) seznami se ustvarijo na enak način, le da namesto oznake ol piše ul.
Ni številk ali črk - samo različni simboli, imenovani markerji.
HTML večnivojski oštevilčen seznam
Veliko uporabnikov zanima ta možnost. Zato je treba opozoriti, da je vsak oštevilčen seznam HTML mogoče narediti na več ravneh. Dodatne ravni so lahko enake ali označene.
Če želite ustvariti seznam, prikazan v zgornjem primeru, morate napisati naslednje.
Upoštevajte, da je v tej kodi za razliko od prvih primerov dodan atribut type. Zahvaljujoč temu lahko določite vrsto razvrščanja za oštevilčene in označene sezname.
Za oštevilčene navedemo abecedo ali vrsto številk, za druge primere pa vrsto označevalca.
Če uporabite posebno oznako HTML, lahko oštevilčen seznam postane karkoli želite.
Atribut tipa lahko podate s poljubno vrednostjo iz tabele. Ali pa v razredu slogov css določite list-style-type z želeno vrsto razvrščanja.
Prevod vrednosti je precej preprost. Dovolj je osnovno znanje angleščine. Toda tudi če ne morete prevesti besed "krog", "kvadrat" itd., Lahko vizualno razumete, kakšen bo rezultat, ko navedete te vrednosti v atributu tipa.
Za oštevilčene sezname uporabite naslednje možnosti:
Privzeto je vedno seznam z To pomeni, da če ne podate ničesar, je enako kot type="1".
Poleg tega se lahko oštevilčeni seznami začnejo na katerem koli želenem mestu. Privzeto se izhod začne od 1. Če pa želite, lahko začnete vsaj od sto. Če želite to narediti, morate podati začetni atribut s poljubno vrednostjo.
Poleg tega lahko zaključek naredite v obratnem vrstnem redu. Če želite to narediti, morate pisati obrnjeno.
Oblikovanje seznamov
Oštevilčen seznam HTML je lahko oblikovan tako lepo, da morda ne boste takoj ugotovili, da je to običajen seznam in ne slika, narejena v Photoshopu.
Tukaj so primeri čudovitih seznamov.
Kot je razvidno iz primera, lahko spremenite videz oštevilčenja in samih elementov.
Ustvarite lahko navaden seznam, kot je ta.
V slogih css morate določiti obliko za oznake ol. Upoštevajte, da bodo v tem primeru nastavitve uporabljene za vse sezname na spletnem mestu, kjer se uporablja ta slogovna datoteka.
Najprej razmislimo o možnosti z zasnovo okroglega seznama. Nazaj na kodo seznama. Tam je naveden zaokroženi seznam razreda. To je razred, s katerim se morate poigrati, da ustvarite takšno lepoto. Razred lahko poimenujete, kakor želite.
Zdaj pa poglejmo kvadratno zasnovo.
Stila sta precej podobna. Razlika je v tem, da je v prvem primeru element zaokrožen z uporabo zmogljivosti CSS.
Profesionalni oblikovalec postavitev mora predvideti in razumeti, da vsi uporabniki ne uporabljajo sodobnih računalnikov. Nimajo vsi nameščenih Windows 7, 8, 10 Obstaja odstotek uporabnikov, ki še vedno uporabljajo Windows XP in uporabljajo stare različice brskalnika Internet Explorer.
Skoraj vse sodobne oblikovne izboljšave elementov praviloma niso podprte z njimi. Uporabniku se bo zdelo, da na oblikovanju spletnega mesta sploh ni bilo dela. Da se je vse odmaknilo. Elementi trčijo drug ob drugega. Da bi se temu izognili, morate upoštevati vse možnosti.
Nekateri spletni skrbniki si pred njimi zatiskajo oči, saj njihov delež na sodobnem trgu postaja čedalje manjši. A za profesionalca je pomemben vsak obiskovalec, sploh če gre za komercialno stran.
Naredite nekaj primernega za vsakogar ali upoštevajte vse različice brskalnika.
- 1. odstavek
- , tako se ohrani pravilna sintaksa (primer 1).
