Če se odločite spremeniti standardna seznama ul in li, vas bo ta tema zanimala. Ker boste tukaj izvedeli nekaj izvirnih rešitev. Kar vam bo zagotovo pomagalo spremeniti standardni pogled v edinstvenega, kjer gre slog CSS, za okrasitev seznamov. Prednost je v tem, da bomo v vsem uporabljali le en razred, kar bo korenito spremenilo videz. Poleg teh možnosti lahko določite, na kateri številki naj se seznam začne, tukaj lahko vse naredite sami. Privzeta začetna vrednost za oštevilčene sezname je na prvi ali črki A.

Ko smo odpravili osnove, si bomo zdaj podrobneje ogledali elemente, ki se uporabljajo za zagotavljanje strukture in pomena različnim delom dizajna. Če kdo ne ve, sta ul in li veliko boljša možnost kot navadno besedilo, ker je, ko se besedilo prelomi, zlasti na mobilniku, popolnoma zamaknjeno in se ne ovije okoli označevalca.

Seznami veljajo za odličen način za predstavitev informacij na straneh, saj so lahko berljivi in ​​izgledajo dobro. Zdi se, da mnogi ljudje mislijo, da so oznake majhne slike, v resnici pa so vse ustvarjene z dokaj preprosto kodo HTML. Če želite, lahko različne vrste seznamov ugnezdite drug v drugega, le ne pozabite jih pravilno zapreti. V vseh teh seznamskih ukazih se lahko igrate z želenim besedilom.

Vedeti morate tudi, da seznami na začetku vsebujejo več elementov:

1 . neurejene informacije.
2 . Naročene informacije.
3 . Definicije.

Začnimo namestitev:

1. Možnost:

• Element seznama


• Edinstven seznam


• Originalni oglasi


• ZORNET.RU - spletni skrbnik


• Še en seznam

css

(Ksangelopan)
rob: 19px 0 0;
oblazinjenje:0;
slog seznama: brez;
protiponastavitev: li;
}
.ksangelopan li (
obroba: 2px polna #3575ad;
ozadje: #d7dee4;
položaj: relativni;
rob-spodaj: 17px;
oblazinjenje: 15px 9px;
}
.ksangelopan li:hover(
z-indeks: 1;
}
.ksangelopan li:prej (
obroba: 2px polna #2270b3;
položaj: absolutno;
zgoraj: -14px;
oblazinjenje: 3px 9px;
velikost pisave: 11px;
teža pisave: krepko;
barva: #246eaf;
ozadje: #f2f4f7;
protiprirastek: li;
vsebina: števec(li);
-webkit-transition-duration: 0,4s;
prehod-trajanje: 0,4s;
}
.ksangelopan li:hover:before (
ozadje: #2672b3;
barva: #f7f9fb;
-webkit-transform: translate(-11px, 0);
-ms-transform: translate(-11px, 0);
-o-transformacija: prevedi (-11px, 0);
transformacija: translate(-11px, 0);
}
.ksangelopan li:po (
vsebina: "";
položaj: absolutno;
prehod-trajanje: 0,3s;
-webkit-transition-property: širina;
prehodna lastnost: širina;
z-indeks: -1;
ozadje: #FFF;
višina: 100 %;
levo: 0;
vrh: 0;
širina: 0;
}
.ksangelopan li:hover:after (
širina: 100%
}

To je celotna postavitev.

2 Druga možnost:

• Element seznama


• Edinstven seznam


• Originalni oglasi


• ZORNET.RU - spletni skrbnik


• Še en seznam

css

Beleduzlopamges (
rob-spodaj: 8px;
oblazinjenje:0;
slog seznama: brez;
protiponastavitev: li;
}
.beleduzlopamges li (
položaj: relativni;
obroba: 2px polna #195588;
ozadje: #eff3f7;
oblazinjenje: 15px 19px 15px 27px;
rob: 12px 0 12px 40px;
-webkit-transition-duration: 0,3s;
prehod-trajanje: 0,3s;
}
.beleduzlopamges li:hover(
ozadje: #FFF;
}
.beleduzlopamges li:prej (
višina vrstice: 32px;
položaj: absolutno;
zgoraj: 4px;
levo: -39px;
širina: 39px
poravnava besedila: sredina;
velikost pisave: 16px;
teža pisave: krepko;
barva: #f9f5f5;
ozadje: #275b88;
protiprirastek: li;
vsebina: števec(li);
prehod-trajanje: 0,2s;
}
.beleduzlopamges li:hover:before (
širina:46px;
}
.beleduzlopamges li:after (
položaj: absolutno;
levo: 0;
zgoraj: 4px;
vsebina: "";
višina: 0;
širina: 0;
obroba: 16px polna prozorna;
barva-leve-obrobe: #275b88;
-webkit-transition-duration: 0,2s;
prehod-trajanje: 0,2s;
}
.beleduzlopamges li:hover:after (
rob-levo: 6px;
}

Središčna gama se lahko neodvisno nastavi pod glavnim slogom spletnega mesta.

3 Tretja možnost:

• Skripte za uCoz


• Predloge za uCoz


• Oblikovanje spletne strani


• Slogi za spletno stran


• Oblikovanje v CSS

css

Nizualisanelag (
oblazinjenje:0;
slog seznama: brez;
protiponastavitev: li;
}
.nizualisanelag li(
položaj: relativni;
oblazinjenje: 9px 17px 17px 25px;
rob-levo: 39px;
prehod-trajanje: 0,2s;
kazalec: kazalec;
teža pisave: krepko;
barva: #343638;
}
.nizualisanelag li:prej (
obroba: 3px polna prozorna;
višina črte: 35px;
položaj: absolutno;
vrh: 0;
levo:-29px;
širina:41px;
poravnava besedila: sredina;
velikost pisave: 14px;
teža pisave: krepko;
barva: #619dce;
protiprirastek: li;
vsebina: števec(li);
prehod-trajanje: 0,3s;

velikost škatle: border-box;
}
.nizualisanelag li:hover:before (
barva: #337AB7;
}
.nizualisanelag li:after (
položaj: absolutno;
vrh: 0;
levo: -29px;
širina: 41px
višina: 41px;
obroba: 5px polna #468bd0;
polmer obrobe: 50 %
vsebina: "";
motnost: 0,5
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
velikost škatle: border-box;
}
.nizualisanelag li:hover:after (
animacija: 500 ms enostavnost vstopa ven 0 s bounceIn;
motnost: 1
}

@keyframes bounceIn(
0% {
motnost: 0
transformacija: scale3d(.3, .3, .3);
}
20% {
transformacija: scale3d(1.3, 1.3, 1.3);
}
40% {
transformacija: scale3d(.9, .9, .9);
}
60% {
motnost: 1
transformacija: scale3d(1.03, 1.03, 1.03);
}
80% {
transformacija: scale3d(.97, .97, .97);
}
do (
motnost: 1
transformacija: scale3d(1, 1, 1);
}
}

Prihaja s čudovito animacijo.

4 Četrta možnost:

• Prvi element za spletno mesto


• Drugi element za spletno stran


• Tretji element za spletno stran


• Četrti element za spletno stran


• Peti element za spletno mesto

css

oblazinjenje:0;
slog seznama: brez;
}
.kudezamuden li(
oblazinjenje:6px;
}
.kudezamuden li:pred (
oblazinjenje-desno: 11px;
teža pisave: krepko;
barva: #4979a0;
vsebina: "\2606";
prehod-trajanje: 0,4s;
}
.kudezamuden li:hover:before (
barva: #235e90;
vsebina: "\2605";
}

Podobno kot v prejšnjih različicah je bila spremenjena le sama ikona.

Na splošno je to majhen izbor seznamov, ki bo skrbniku spletne strani omogočil lep seznam na portalu, kjer si ga lahko sam bolj uredi, kot si ga sam želi ogledati.

Če morate elemente uvrstiti na oštevilčen seznam namesto na seznam z oznakami, bo tukaj uporabljen urejen HTML. Ta seznam je ustvarjen z uporabo oznake ol. Številčenje se začne pri ena in se poveča za eno za vsak naslednji element urejenega seznama z oznako li.

Naloga

Prikaz označenega seznama vodoravno brez oznak.

rešitev

Oznaka označenega seznama

privzeto prikaže elemente
• navpično ena na drugo. Za ustvarjanje navigacijskih elementov je v nekaterih primerih seznam priročno prikazati vodoravno. Ta pogled seznama lahko dobite na več načinov.

  Morali bi se že zavedati, da ima HTML blokovne in vgrajene elemente. Inline elementi ne ustvarjajo lastnih blokov, primer takih elementov so oznake oz . Elementi bloka so prikazani v novi vrstici in ustvarijo pravokoten blok, primer takih oznak

  oz

  Torej, označite

• je tudi blok element.

  Za označevanje

• se ni obnašal kot blokovni element, lahko uporabite CSS, da ga naredite inline.

  Lastnost display CSS je odgovorna za to, kako bo element prikazan v dokumentu. Razmislite o treh njegovih vrednostih (čeprav jih je več):

  • blok - element je upodobljen kot element bloka.
  • inline - element je upodobljen kot inline.
  • inline-block - element block-line, več o tej vrsti elementov preberite spodaj, mi ga bomo uporabili.

  Najprej naredimo vodoravni seznam tako, da njegove oznake spremenimo v elemente v vrstici. V slogu CSS napišimo pravilo, v katerem je izbirnik li nastavljen na lastnost display z vrednostjo inline.

  • 1. odstavek
  • Točka 2
  • Točka 3
  
  
  

  Torej je ta slog deloval in dobil vodoravno razporeditev elementov seznama:

  Slika 1. Primer dela #1.

  Ta metoda ima slabosti. Dejstvo je, da imajo inline elementi nekaj omejitev v primerjavi z blokovnimi elementi. Njim na primer ni mogoče določiti širine in višine, blokovnim pa lahko.

  Na primer, želimo, da ima element menija, ki ga ustvarjamo, širino 150 slikovnih pik in višino 40 slikovnih pik. Poskusimo spremeniti slog v naslednjega, to je, dodamo dve pravili, ki nastavita velikost elementa menija:

  Ta urejanja ne bodo povzročila nobenih sprememb. Da so menijski elementi razporejeni vodoravno in da lahko nastavite njihovo širino in višino, morajo biti nastavljeni na tip inline-block. Spremenimo naš primer kode:

  • 1. odstavek
  • Točka 2
  • Točka 3
  
  
  

  Ta koda deluje in spremembe so vidne:

  
  Slika 2. Primer dela št. 2.

  Lahko pa obstajajo različne možnosti, na primer, v meniju moramo prikazati ugnezdene sezname:

  • Uredi
    • Prekliči
    • Cut
    • Kopirati
    • Vstavi
  • napis
    • Krepko
    • Ležeče
    • podčrtano
  • Velikost
    • majhna
    • normalno
    • Povprečje
    • Velik
  
  
  

  Tukaj je rezultat te kode:

  
  Slika 3. Primer dela #3.

  Vidimo, da bloki niso poravnani po višini, kot bi želeli. Seveda lahko določite enako višino za vse bloke, vendar njene natančne vrednosti ne vemo vedno vnaprej in se lahko spremeni.

  In pravzaprav, zakaj se to dogaja?

  Naši bloki imajo lastnost prikaza inline-block. To pomeni, da imajo tako lastnosti elementov na ravni bloka (možnost določanja širine in višine) kot elementov v vrstici. Kar vidimo, je kakovost vgrajenih elementov.

  Oglejmo si niz z znaki "A" različnih velikosti:

  A A A A A A A

  Vidimo, da so vse črke navpično poravnane s spodnjo vrstico. Natančneje, vzdolž osnovne črte, vendar zdaj ne bomo prišli v divjino. Enako se je torej zgodilo z našimi bloki.

  Lastnost vertical-align se uporablja za navpično poravnavo besedila. V našem primeru št. 3 bi uporabili top , ki bo zgornjo obrobo elementa poravnal z vrhom najvišjega elementa v vrstici.

  Za zdaj ga uporabite za niz z znaki "A" različnih velikosti:

  A A A A A A A

  Zdi se, da črke malo "skačejo". Obrobo CSS sem nastavil na najvišjo črko, tako da lahko vidite, da dejansko ni preskokov, med zgornjo obrobo (ki je poravnana) in zgornjo točko znaka "A" je prazen prostor.

  Lastnost vertical-align je treba uporabiti za vsak element v vrstici, ni podedovana. Več o tej lastnosti lahko preberete: vertical-align.

  Po tej digresiji bomo elemente seznama še naprej postavljali vodoravno.

  Drugi način

  Elemente seznama lahko postavite vodoravno z lastnostjo float. Ta lastnost določa, na katero stran je element poravnan, ima dva položaja: levo in desno.

  Tukaj je primer uporabe te kode:

  • 1. odstavek
  • Točka 2
  • Točka 3
  
  
  

  Tukaj je rezultat kode:

  Slika 4. Primer delovanja.

  Zdi se, da primer deluje. Toda pri uporabi te lastnosti obstaja en odtenek. Zdaj bomo razmislili o tem. Za primer vzemimo kodo, ki ima dva vodoravna seznama z različnimi načini vodoravnega razporejanja elementov: display in float:

  • 1. odstavek
  • Točka 2
  • Točka 3
  • 1. odstavek
  • Točka 2
  • Točka 3
  
  
  

  Tukaj je rezultat kode:

  Slika 5. Primer delovanja.

  V teh primerih so vsebniki seznama

  imajo rdeč rob debeline 1 slikovne pike. Toda zgornji seznam, ki uporablja lastnost display, vključuje elemente seznama. Toda elementi seznama, ustvarjenega z lastnostjo float, padejo iz vsebnika.

  Hkrati pa na prvi pogled vse deluje. Ampak zamenjajmo sezname. Seznam z razrednim menijem-1 postavimo v kodo pred seznam z razrednim menijem-2 (zdaj je nižje).

  Evo, kaj dobimo kot rezultat:

  Slika 6. Primer delovanja.

  Elementi spodnjega menija se prav tako ovijajo okoli zgornjega menija, ker nihče ni preklical dejanja lastnosti float in velja za vse naslednje elemente.

  Kako rešiti ta problem?

  Če želite to narediti, morate uporabiti lastnost clear, ta prekliče ovijalni element drugega elementa, če ima nastavljeno lastnost float.

  Tukaj je spremenjen primer z uporabo lastnosti clear:

  • 1. odstavek
  • Točka 2
  • Točka 3
  • 1. odstavek
  • Točka 2
  • Točka 3
  
  
  

  Vidi se, da se spodnji seznam ne ovija več okoli zgornjega, elementi se ne zaletavajo drug v drugega. Toda na prvem seznamu oznak

  • še vedno zunaj posode
    .
    Slika 7. Primer delovanja.

    Poleg tega pri delu ne vemo vedno, kateri element bo sledil elementu z uporabo float. Idealno bi bilo zapreti delo lastnosti float v istem bloku, v katerem je odprta.

    To se naredi s psevdo elementom. Tukaj je koda:

    • 1. odstavek
    • Točka 2
    • Točka 3
    • 1. odstavek
    • Točka 2
    • Točka 3
    
    
    

    Zdaj imamo 100 % delujočo kodo.

    Slika 8. Primer delovanja.

    Ta tehnika z lastnostjo float se običajno uporablja pri postavitvi spletnih mest za poravnavo stolpcev, ki jih ustvarijo oznake

    . Na ta način dobimo normalno konstrukcijo stebrov z zahtevano višinsko poravnavo. Ko ustvarjamo meni, nam v večini primerov ni pomembna višina blokov, skoraj vedno je enaka. Zato je uporaba pravila (display : inline-block ) v teh primerih povsem upravičena.

    Toda zaradi popolnosti smo tukaj pregledali vse možne možnosti. Čeprav morda obstajajo drugi načini, na primer uporaba tabel CSS, iskalniki toplo priporočajo uporabo tabel samo za predvideni namen in ne za organiziranje navigacijskih elementov ali kako drugače.

    Če ste kdaj poskušali spremeniti sloge css številk vrstic (številk) v urejenih seznamih

    , potem se je zagotovo soočila s težavami. Do stilov teh elementov je nemogoče dostopati z izbirniki css. Toda precej pogosto oblikovanje vmesnika vključuje spreminjanje njihove barve, ozadja, velikosti itd.

    Tukaj je najenostavnejši primer neslogovnega seznama:

    html

    1. Posaditi drevo
    2. Zgraditi hišo
    3. vzgojiti sina

    Oglejmo si več načinov za rešitev zgornje težave.

    Tradicionalni neroden način.

    Tradicionalni način za rešitev te težave je skrivanje številk vrstic, ki jih samodejno postavi brskalnik. To uporablja slog seznama lastnosti: none; .

    css

    li( list-style: none; ) .num( barva: bela; ozadje: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px;)

    html

    1. 1 Posaditi drevo
    2. 2 Zgraditi hišo
    3. 3 vzgojiti sina

    Strinjam se, izgleda odveč in ni prilagodljiv. Avtomatsko postavljene zaporedne številke skrijemo in jih nadomestimo z ročno določenimi vrednostmi, zamašimo postavitev itd.

    Poglejmo, kako lahko dosežemo enak rezultat, ne da bi zamašili postavitev in uporabili psevdoelement::before in lastnosti css content, counter-increment, counter-reset.

    Lep in pravilen način.

    Najprej bomo podali kodo in demo, nato pa bomo ugotovili, kaj je kaj.

    css

    ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); barva: bela; ozadje: #2980B9; display: inline-block; poravnava besedila: sredina; rob: 5px 10px; višina vrstice: 40px; širina: 40px; višina: 40px; )

    html

    1. Posaditi drevo
    2. Zgraditi hišo
    3. vzgojiti sina

    Kot lahko vidite, koda html ostane čista in lepa. V tem primeru se vsi stili elementov seznama prenesejo v css.

    Razčlenimo točko za točko:

    • li::prej- ustvari psevdoelement znotraj seznama, ki zavzame mesto prvega otroka.
    • ponastavitev števca:myCounter;- ponastavi števec css myCounter znotraj vsakega
      .
      1. protiporast: myCounter;- poveča števec css myCounter za vsak psevdoelement::before.
      2. content:counter(myCounter);- Prikaže trenutno vrednost števca myCounter znotraj psevdoelementa::before.

    več o css-števcih najdete v

    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

    1. Postavka #1
    2. Postavka #2
    3. Postavka #3
    4. ...

    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 uporabo zaključne oznake

    Oznaka par se uporablja za oblikovanje elementov seznama

  • . Med začetno in končno oznako so ločene besede, fraze, odstavki, slike, deli kode in še veliko več, kar je vsebina označenega seznama.

    Opomba

    Znotraj seznama je možno spremeniti račun v svojega. Za to oznako obstaja poseben atribut value="".

  • , ki mu je dodeljena neka številska vrednost. Na primer

    1. Postavka #1
    10. Postavka #2
    11. Postavka #3

  Primeri z oštevilčenimi seznami v html (

  )

  Primer 1. Oštevilčen seznam html v obliki latiničnih črk

  Primer z velikimi tiskanimi črkami

  1. Postavka #1
  2. Postavka #2
  3. Postavka #3

  1. Postavka #1
  2. Postavka #2
  3. Postavka #3

  Primer male črke

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

  Takole je videti na strani:

  1. Postavka #1
  2. Postavka #2
  3. Postavka #3

  Primer 2. Oštevilčen html seznam z latinicami

  Primer z velikimi tiskanimi črkami

  1. Postavka #1
  2. Postavka #2
  3. Postavka #3

  Takole je videti na strani:

  1. Postavka #1
  2. Postavka #2
  3. Postavka #3

  Primer male črke

  1. Postavka #1
  2. Postavka #2
  3. Postavka #3

  Takole je videti na strani:

  1. Postavka #1
  2. Postavka #2
  3. Postavka #3

  Primer 3. Oštevilčen seznam html z različnimi začetnimi položaji

  Primer, ki prikazuje zmožnosti atributa start, ki omogoča nastavitev začetne vrednosti števca.

  50. Postavka #1
  51. Postavka #2
  52. Postavka #3

  Takole je videti na strani:

  1. Postavka #1
  2. Postavka #2
  3. Postavka #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

• .

  10. Postavka #1
  11. Postavka #2
  100. Postavka #3
  101. Postavka #4

  Takole je videti na strani:

  1. Postavka #1
  2. Postavka #2
  3. Postavka #3
  4. Postavka #4

  Primer 5. Reverzibilni oštevilčeni seznam v html

  Spodaj je primer obratno oštevilčenega seznama (štetje v obratnem vrstnem redu).

  10. Postavka #1
  11. Postavka #2
  12. Postavka #3
  13. Postavka #4

  Takole je videti na strani:

  1. Postavka #1
  2. Postavka #2
  3. Postavka #3
  4. Postavka #4

  Jezik HTML ponuja poseben niz oznak za predstavitev informacij v obliki seznamov. Seznami so ena najpogosteje uporabljenih oblik predstavitve podatkov v elektronskih in tiskanih dokumentih. Skoraj vsak dan naletimo na sezname, pa naj bo to seznam stvari, ki jih moramo opraviti v trgovini, študentov v razredu ali samo stvari, ki jih je treba opraviti. Možnost organiziranja struktur seznamov je na voljo v številnih urejevalnikih besedil, zlasti zmogljiv urejevalnik besedil Microsoft Word ima priročna orodja za oblikovanje seznamov različnih vrst (možnosti ustvarjanja seznamov HTML z uporabo Microsoft Worda so obravnavane v 8. poglavju). Tukaj je nekaj primerov, ko je uporaba seznamov zelo priročna:

  • Združevanje delov informacij v eno samo strukturo za berljiv videz.
  • Opis zapletenih procesov po korakih.
  • Razporeditev informacij v slogu kazala, katerega odstavki kažejo na ustrezne razdelke dokumenta.

  Upoštevajte, da so zgornji elementi samo organizirani v obliki strukture seznama.

  HTML ponuja naslednje glavne vrste seznamov: označeni, oštevilčeni in definicijski seznam. Naslednje oznake se uporabljajo za implementacijo seznamov različnih vrst:

  ,
  ,

  , , . S pomočjo različnih vrst seznamov, ki so vgrajeni v dokument, je mogoče implementirati različne funkcije, katerih opis je predmet tega poglavja. Upoštevane so značilnosti gradnje seznamov različnih vrst, pa tudi uporaba ugnezdenih seznamov.

  označeni seznam

  Ena od vrst seznamov, implementiranih v HTML, je seznam z oznakami. Sicer se tovrstnim seznamom reče neurejeni oz

  neurejeno. Priimek se pogosto uporablja kot uradni prevod ustreznega imena oznake.

  , s pomočjo katerega so tovrstni seznami organizirani v dokumentih HTML (UL - Unordered List, neurejen seznam).

  Na označenem seznamu se za poudarjanje njegovih elementov uporabljajo posebni znaki, imenovani označevalci seznama (pogosto imenovani oznake, kar je uradni zvok angleškega izraza bullet). Videz oznak seznama določa brskalnik, pri ustvarjanju ugnezdenih seznamov pa brskalniki samodejno popestrijo videz oznak različnih stopenj gnezdenja.

  Oznake

  in<LI >

  Če želite ustvariti označeni seznam, morate uporabiti vsebnik oznak, znotraj katerega so vsi elementi seznama. Oznaki začetnega in končnega seznama zagotavljata prelom vrstice pred in za seznamom in tako ločita seznam od glavne vsebine dokumenta, zato tukaj ni treba uporabljati oznak odstavkov.

  
  .

  Vsak element seznama se mora začeti z oznako

  • (LI - Element seznama, element seznama). Oznaka
  • ne potrebuje ustrezne zaključne oznake, čeprav njena prisotnost načeloma ni prepovedana. Brskalniki običajno začnejo vsako novo postavko seznama v novi vrstici, ko prikažejo dokument.

    Zgornje informacije zadostujejo za sestavo elementarnega seznama z oznakami. Tukaj je primer dokumenta HTML z uporabo označenega seznama, katerega upodabljanje brskalnika je prikazano na sliki. 2.1.

    Znaki zodiaka:

    • Oven

    • Bik

    • Dvojčki

    • Rak

    • lev

    • Devica

    • Luske

    • Škorpijon

    • Strelec

    • Kozorog

    • Vodnar

    • ribe

    riž. 2.1. Prikaz označenega seznama v brskalniku

    Upoštevajte, da poleg elementov seznama, označenih z oznako

  • , so lahko prisotni drugi elementi HTML. V zgornjem primeru je eden od teh elementov golo besedilo, ki ni element seznama, ampak igra vlogo njegovega naslova.

    Opomba

    V nekaterih učbenikih jezika HTML je navedeno, da je treba za nastavitev naslova seznama uporabiti oznako vsebnika (LH - Glava seznama, glava seznama). Te oznake trenutno ne prepozna noben običajni brskalnik in ni del specifikacije HTML. Tako njegova uporaba postane nesmiselna, čeprav ne bo povzročila nobenih napak.

    V oznaki

    določite lahko dva parametra: COMPACT in TYPE.

    Parameter COMPACT je zapisan brez vrednosti in se uporablja za nakazovanje brskalniku, da mora biti dani seznam prikazan v strnjeni obliki. Na primer, pisavo ali razmik med vrsticami seznama je mogoče zmanjšati itd.

    Opomba

    Trenutno prisotnost parametra COMPACT v oznaki

    ne vpliva na prikaz seznamov vodilnih brskalnikov. Zato je uporaba tega parametra nesmiselna, še posebej, ker njegova uporaba ni priporočena s specifikacijo HTML 4.0.

    Parameter TYPE ima lahko naslednje vrednosti: disk, krog in kvadrat. Ta parameter se uporablja za vsiljevanje videza oznak seznama. Natančen videz označevalca je odvisen od brskalnika, ki ga uporabljate. Tipične možnosti prikaza so naslednje:

    TYPE = disk - oznake so prikazane kot zapolnjeni krogi; TYPE = krog - oznake so prikazane kot nezapolnjeni krogi; TYPE = kvadrat - oznake so prikazane kot zapolnjeni kvadrati. Primer snemanja:

    .

    Privzeta vrednost je TYPE = disk. Za ugnezdene sezname z oznakami je privzeta vrednost disk na prvi ravni, krog na drugi ravni in kvadrat na tretji ravni. Prav to je storjeno v najnovejših različicah brskalnikov Netscape in Internet Explorer. Upoštevajte, da lahko drugi brskalniki prikazujejo oznake drugače. Na primer, v specifikaciji HTML 4.0 je vrsta označevalca, prikazana, ko je TYPE = square, podana kot kvadratni obris.

    Parameter TYPE z enakimi vrednostmi lahko uporabite za določanje vrste označevalcev za posamezne elemente seznama. Če želite to narediti, je parameter TYPE z ustrezno vrednostjo dovoljeno določiti v oznaki elementa seznama

    • .

      Primer snemanja:

    • .

      Opomba

      Brskalniki različno razlagajo navedbo vrste markerja za posamezno postavko seznama. Brskalnik Netscape spremeni videz označevalca za tega in vse naslednje, dokler ne naleti na naslednjo redefinicijo videza označevalca. Internet Explorer spremeni le videz označevalca za ta element.

      Seznam grafičnih označevalcev

      Grafične slike lahko uporabite kot označevalce seznamov, ki se pogosto uporabljajo za ustvarjanje privlačnih, lepo oblikovanih dokumentov HTML. Dejansko te možnosti ne zagotavlja neposredno jezik HTML, ampak je implementirana nekoliko umetno. To ne pomeni, da to ni priporočljivo ali zavrženo, temveč le, da tukaj ne bodo uporabljeni posebni jezikovni konstrukti HTML.

      Da bi razumeli idejo, morate razumeti, kako so seznami implementirani na straneh HTML. Izkazalo se je, da oznaka seznama

      (kot tudi druge vrste oznak seznama, obravnavanih spodaj) opravlja edino nalogo - brskalniku nakazuje, da morajo biti vse informacije, ki se nahajajo za to oznako, prikazane s premikom v desno (zamik) za določeno količino. oznake
      • Kazanje na posamezne elemente seznama zagotavlja standardne oznake elementov seznama.

        Če moramo sestaviti seznam z grafičnimi označevalci, potem lahko sploh brez oznak

      • . Dovolj bo, da pred vsak element seznama vstavite želeno grafično podobo. Edina naloga, ki jo je treba v tem primeru rešiti, je ločiti elemente seznama drug od drugega. Za to lahko uporabite oznake odstavkov.

        Ali prisilno podajanje v vrstico
        . Primer izvedbe seznama z grafičnimi oznakami, katerega prikaz je prikazan na sl. 2.2 je prikazano spodaj:

        Znaki zodiaka:
        

        Oven
        

        Bik
        

        dvojčka
        

        Pack
        

        Leo
        

        Devica
        

        Luske
        

        Škorpijon
        

        Strelec
        

        Kozorog
        

        Vodnar
        

        ribe

        

        riž. 2.2. Označen seznam z grafičnimi oznakami

        V danem primeru je grafična datoteka Green_ball.gif uporabljena kot oznaka elementa seznama. Upoštevajte, da lahko uporaba grafike na straneh HTML znatno poveča količino prenesenih informacij. Vendar je v tem primeru to povečanje izjemno majhno. Tukaj je ista datoteka uporabljena za vse oznake,

        ki bo posredovan samo enkrat. Tudi velikost datoteke, ki vsebuje majhno sliko, je izjemno majhna.

        Opomba

        Tehnike za ustvarjanje seznamov z grafičnimi označevalci so obravnavane v 8. poglavju.

        oštevilčen seznam

        Druga vrsta seznama, implementiranega v HTML, je oštevilčen seznam. V nasprotnem primeru se seznami te vrste imenujejo urejeni. Priimek se pogosto uporablja kot uradni prevod ustreznega imena oznake.

        , s pomočjo katerega so tovrstni seznami organizirani v dokumentih HTML (OL - Ordered List, urejen seznam).

        Tovrstni seznami so običajno urejeno zaporedje posameznih elementov. Razlika od označenih seznamov je v tem, da je na oštevilčenem seznamu pred vsakim elementom samodejno serijska številka. Vrsta oštevilčenja je odvisna od brskalnika in se lahko nastavi s parametri oznak seznama. V nasprotnem primeru je izvajanje oštevilčenih seznamov podobno izvajanju označenih seznamov.

        Oznake

        in

        1. Če želite ustvariti oštevilčen seznam, morate uporabiti oznako vsebnika, znotraj katere se nahajajo vsi elementi seznama. Začetna in končna oznaka seznama zagotavljata prelom vrstice pred in za seznamom in tako ločita seznam od glavne vsebine dokumenta.

           Kot pri označenem seznamu se mora vsak element na označenem seznamu začeti z oznako

        2. .

           Tukaj je primer dokumenta HTML z uporabo oštevilčenega seznama, katerih prikaz brskalnik je prikazan na sl. 2.3.

           Najsvetlejše zvezde, vidne z Zemlje, so:

           • Sirius

           • K anopus

           • Arktur

           • Alfa Kentavra

           • Vega

           • K apela

           • Rigel

           • Procyon

           • Achernar

           • Beta Kentavra

           • Vetelgeuse

           • Aldebaran

             
             . . .

           • Mizar

             
             . . .

           • Polar

           

           riž. 2.Z. oštevilčen seznam

           V oznaki

           lahko določite naslednje parametre: COMPACT, TYPE in START.

           Parameter COMPACT ima enak pomen kot označeni seznami. Parameter TYPE se uporablja za podajanje načina oštevilčenja seznama. Lahko ima naslednje vrednosti:

           TYPE = A - nastavi oznake v obliki velikih latiničnih črk;

           TYPE = a - nastavi oznake v obliki malih latiničnih črk;

           TIP = I - nastavi oznake v obliki velikih rimskih številk;

           TYPE = i - nastavi oznake v obliki majhnih rimskih številk;

           TYPE = 1 - nastavi oznake v obliki arabskih številk.

           Privzeto je vedno uporabljena vrednost TYPE = 1, tj. oštevilčenje z arabskimi številkami. To velja tudi za ugnezdene urejene sezname. Tukaj, za razliko od označenih seznamov, brskalniki privzeto ne naredijo različnih oštevilčenj na različnih ravneh gnezdenja seznamov. Upoštevajte, da je za številko elementa seznama vedno dodatno prikazan znak "pika".

           S parametrom TYPE z enakimi vrednostmi lahko določite, kako naj bodo posamezni elementi seznama oštevilčeni. Če želite to narediti, je parameter TYPE z ustrezno vrednostjo dovoljeno določiti v oznaki elementa seznama

           1. .

              Primer snemanja:

           2. .

              Oznaka START parameter

              vam omogoča, da začnete oštevilčevati seznam ne od enega. Vrednost parametra START mora biti vedno naravno število, ne glede na vrsto številčenja seznama. Tukaj je primer:
              .

              Takšen zapis določa oštevilčenje seznama iz velike latinične črke "E". Za druge vrste oštevilčevanja bo vnos START=5 nastavil oštevilčenje iz številke "5", rimske številke "V" itd.

              Spreminjanje vrste oštevilčenja seznama in vrednosti številk se lahko izvede tudi za kateri koli element seznama. Oznaka

              5. za oštevilčene sezname dovoljuje uporabo parametrov TYPE in VALUE. Parameter TYPE ima lahko enake vrednosti kot za oznako
                 .

                 p primer zapisa:

                 1. .

                    Opomba

                    Brskalniki različno razlagajo navedbo vrste oštevilčenja za posamezno postavko seznama. Brskalnik Netscape spremeni oštevilčenje za ta element in vse naslednje elemente, dokler ne naleti na naslednjo preglasitev. Internet Explorer spremeni samo videz številke za ta element.

                    Wvrednost parametra VALUE oznake

                 2. - omogoča spreminjanje številke danega elementa seznama. To spremeni oštevilčenje vseh naslednjih elementov. Tipična uporaba je za sezname, kjer so nekateri elementi izpuščeni. Primer takega seznama je bil podan zgoraj (slika 2.3). Podaja urejen seznam najsvetlejših zvezd, v katerem so na 58. in 75. mestu zvezde, ki so dobro vidne v naših zemljepisnih širinah (Mizar je najsvetlejša zvezda v ozvezdju Velikega medveda, Severnica pa je Mali medved).

                    Tukaj je še en izviren primer uporabe oštevilčenja različnih vrst. Spodnja koda HTML definira tri sezname z različnim številčenjem. Za lažji pregled je vsak od seznamov postavljen v ločeno celico tabele. Vsi trije seznami so enaki in se razlikujejo le po vrsti oštevilčenja: v prvem stolpcu tabele - arabske številke, v drugem - rimske, v tretjem pa je oštevilčenje v latiničnih črkah. Upoštevajte, da so elementi seznama prazni, tj. za katero koli oznako

                 3. ni podatkov. Primer te vrste lahko uporabimo kot korespondenčno tabelo med arabskimi in rimskimi številkami. Izkazalo se je, da lahko s katerim koli brskalnikom, ki podpira sezname, ustvarite takšno tabelo (slika 2-4), tako da vnesete priloženo kodo HTML. Oštevilčevanje z rimskimi številkami deluje pravilno do vrednosti 3999. Če pregledate desni stolpec, lahko razumete, kako se izvaja oštevilčenje z latiničnimi črkami. Po izčrpanju enočrkovne številke (od A do Z) se kot naslednja številka vzame prva dvočrkovna številka - AA itd.

                    . . .

                    . . .

                    . . .

                    

                    riž. 2.4. Različne vrste številčenja seznamov HTML

                    Seznam definicij

                    Seznami definicij, imenovani tudi slovarji definicij terminov, so posebna vrsta seznamov. Za razliko od drugih vrst seznamov je vsak element seznama definicij vedno sestavljen iz dveh delov. Prvi del elementa seznama vsebuje opredeljen izraz, drugi del pa besedilo v obliki slovarskega stavka, ki razkriva pomen pojma.

                    Seznami definicij so določeni z uporabo oznake vsebnika

                    (Seznam definicij). Znotraj oznake vsebnika

                    (Definicija izraza) definirani izraz je označen in oznaka

                    (Opis definicije) - odstavek s svojo definicijo. Za oznake

                    in

                    lahko izpustite ustrezne končne oznake.

                    Na splošno je seznam definicij napisan takole:

                    Izraz

                    Opredelitev pojma

                    V besedilu za oznako

                    elementov na ravni bloka, kot so oznake odstavkov, ni mogoče uporabiti

                    ali naslovi

                    -

                    . Praviloma mora biti besedilo pojma, ki ga definiramo, v eni vrstici. Besedilo, ki vsebuje definicijo izraza, se prikaže z začetkom v naslednji vrstici (ali vrstico za vrstico v nekaterih brskalnikih) za definicijo izraza, zamaknjeno v desno. V informacijah za oznako

                    , lahko postavite elemente na ravni bloka. Iz tega zlasti sledi, da so seznami definicij lahko ugnezdeni.

                    V oznaki

                    podati je lahko parameter COMPACT, katerega namen je podoben kot pri drugih zgoraj opisanih seznamih.

                    Tukaj je primer dokumenta HTML, ki uporablja seznam definicij:

                    Razvrstitev tipičnih človeških temperamentov,
                    ustanovljeno

                    na poglede Hipokrata

                    Flegmatična oseba

                    Pasiven, zelo sposoben, počasi se prilagaja;
                    razpoloženje je stabilno, malo dovzetno za zunanje vplive;
                    letargija čustvenih reakcij in počasnost voljne aktivnosti
                    
                    

                    sangvinik

                    Aktiven, energičen, prilagodljiv, -
                    živahnost in mobilnost čustvenih reakcij, hitrost in moč voljnih manifestacij
                    
                    

                    Kolerik

                    Aktiven, zelo energičen, vztrajen;
                    impulzivnost in moč čustvenih reakcij, nasilne voljne manifestacije
                    
                    

                    melanholičen

                    Pasiven, enostaven za utrujenost, težko prilagodljiv -
                    šibkost voljnih manifestacij in prevlado depresivnega razpoloženja, dvoma vase

                    Prikaz danega dokumenta HTML v brskalniku je prikazan na sl. 2.5.

                    

                    riž. 2.5. Seznam definicij (podoben skupini vnosov v slovarju)

                    Tipski seznami

                    in

                    Tipski seznami

                    in se zdaj praktično ne uporabljajo, čeprav je njihova podpora s strani vodilnih brskalnikov še vedno na voljo. V specifikaciji HTML 4.0 sta obe vrsti seznamov označeni kot zastareli. Namesto tega je predlagana uporaba označenih seznamov, ki jih določa oznaka

                    .

                    Sprva so bili seznami teh vrst zasnovani kot bolj kompaktni od običajnih označenih seznamov. Po pravilih pisanja elementov teh seznamov niso smeli uporabljati blokovnih elementov, kar pomeni, da gnezdenje tovrstnih seznamov ni mogoče izvesti. Vsak element seznama je bila ena vrstica besedila.

                    Za sezname, kot je

                    načrtovana je bila uvedba omejitve "dolžine besedila elementa seznama (24 znakov). Takšna omejitev bi omogočila

                    tipski seznami

                    v obliki, ki je podobna izpisovanju imenikov v operacijskih sistemih UNIX in MS-DOS pri uporabi ključa /W (v več stolpcih). Poleg tega oznake niso bile prikazane za elemente seznama te vrste.

                    Trenutno vse te zamisli niso bile implementirane, saj nadaljnja uporaba tovrstnih seznamov ni priporočljiva. Sodobne različice brskalnikov upodabljajo sezname teh vrst na povsem enak način kot sezname vrste

                    .

                    Ugnezdeni seznami

                    Včasih mora element seznama ene vrste vključevati celoten seznam iste ali druge vrste. To bo organiziralo večnivojske ali ugnezdene sezname. HTML omogoča poljubno gnezdenje različnih tipov seznamov, vendar je potrebna previdnost pri njihovem organiziranju.

                    Spodaj je koda HTML dokumenta z ugnezdenimi seznami, katerih prikaz je prikazan na sl. 2.6. V tem primeru ima vsak element označenega seznama svoj oštevilčen seznam.

                    Sateliti nekaterih planetov

                    • Zempa

                      1. Luna

                    • mapc

                      1. Fobos

                      2. Deimos

                    • Uran

                      1. Ariel

                      2. Umbriel

                      3. Titanija

                      4. Oberon

                      5. Miranda

                    • Neptun

                      1. Triton

                      2. Nereida