Oikea numerointi HTML-sisäkkäisissä numeroiduissa luetteloissa CSS:n avulla. Numeroitu luettelo Numeroidun luettelon vakioluettelomerkit

HTML-listat käytetään ryhmittelemään toisiinsa liittyviä tietoja. Listoja on kolmenlaisia:

ranskalaiset viivat —

merkitty merkillä,
numeroitu luettelo —
1. merkitty numerolla
  määritelmien luettelo- - koostuu termipareista
  —
  määritelmä.
  Jokainen lista on säilö, jossa luetteloelementit tai termimäärittelyparit sijaitsevat. Listaelementit käyttäytyvät kuin lohkoelementit, pinottuna toistensa alle ja vievät koko säiliölohkon leveyden. Jokaisen luettelokohteen sivulla on lisälohko, joka ei osallistu asetteluun.
  
  HTML-luetteloiden luominen
  
  1. Luettelomerkitty luettelo
  
  Ranskalaiset viivat on järjestämätön lista (englanninkielisestä Unordered List -listasta). Luotu käyttämällä parillista tagia
  . Listaelementin merkki on tarra, esimerkiksi täytetty ympyrä.
  Selaimet lisäävät oletusarvoisesti seuraavan muotoilun luettelolohkoon:
  Jokainen luetteloelementti luodaan käyttämällä parillista tagia
2. (englanninkielisestä luettelokohdasta).
- Microsoft
- Google
- Omena
Riisi. 1. Luettelomerkitty luettelo
2. Numeroitu luettelo

Numeroitu luettelo luodaan käyttämällä parillista tagia. Jokainen luettelokohde luodaan myös elementin avulla
. Selain numeroi elementit järjestyksessä automaattisesti, ja jos poistat yhden tai useamman tällaisen luettelon elementin, loput luvut lasketaan automaattisesti uudelleen.
Luettelolohkossa on myös oletusselaimen tyylit:
Arvo-attribuutti on käytettävissä, jonka avulla voit muuttaa valitun luettelokohteen oletusnumeroa. Jos esimerkiksi asettamasi luettelon ensimmäinen kohde

, sitten jäljellä oleva numerointi lasketaan uudelleen suhteessa uuteen arvoon.

Tagille

Attribuutti	Kuvaus, hyväksytty arvo
päinvastainen	Käänteinen attribuutti saa luettelon näyttämään käänteisessä järjestyksessä (esimerkiksi 9, 8, 7...).
alkaa	Start-attribuutti määrittää alkuarvon, josta numerointi alkaa, esimerkiksi konstruktio ensimmäiselle tuotteelle annetaan sarjanumero "10". Voit myös määrittää numerointityypin samanaikaisesti, esim. .
tyyppi	Type-attribuutti määrittää luettelossa käytettävän merkin tyypin (kirjaimet tai numerot). Hyväksytyt arvot: 1 — oletusarvo, desimaalinumerointi. A — luettelon numerointi aakkosjärjestyksessä, isot kirjaimet (A, B, C, D). a — luettelon numerointi aakkosjärjestyksessä, pienet kirjaimet (a, b, c, d). I - numerointi roomalaisilla isoilla numeroilla (I, II, III, IV). i — numerointi roomalaisin pienin kirjaimin (i, ii, iii, iv).

Microsoft
Google
Omena

3. Määritelmien luettelo

Määritelmien luettelo luodaan tagilla

Määritelmäluettelolohkossa on seuraavat oletusselaimen tyylit:

Tunnisteita varten

Ja

saatavilla .

Johtaja:: Peter Tochilin
Heittää:: Andrei Gaidulyan; Aleksei Gavrilov; Vitali Gogunsky; Marija Koževnikova

Riisi. 3. Määritelmien luettelo

4. Sisäkkäinen luettelo

Usein yksinkertaisten luetteloiden ominaisuudet eivät riitä, esimerkiksi sisällysluetteloa luotaessa ei tule toimeen sisäkkäisiä kohteita. Sisäkkäisen luettelon merkintä olisi seuraava:

Kohta 1.
Kohta 2.
- Alakohta 2.1.
- Alakohta 2.2.
  - Kohta 2.2.1.
  - Kohta 2.2.2.
- Kohta 2.3.
Kohta 3.

Riisi. 4. Sisäkkäinen luettelo

5. Monitasoinen numeroitu luettelo

Monitasoista luetteloa käytetään luettelon kohteiden näyttämiseen eri tasoilla eri sisennyksillä. Monitasoisen numeroidun luettelon merkintä olisi seuraava:

kohta
kohta
1. kohta
2. kohta
3. kohta
  1. kohta
  2. kohta
  3. kohta
4. kohta
kohta
kohta

Tämä oletusmerkintä luo uuden numeroinnin jokaiselle sisäkkäiselle luettelolle alkaen yhdestä. Sisäkkäisen numeroinnin luomiseksi sinun on käytettävä seuraavia ominaisuuksia:
counter-reset nollaa yhden tai useamman laskurin ja määrittää nollattavan arvon;
vastainkrementti määrittää laskurin inkrementtiarvon, ts. millä askeleilla kukin seuraava kohta numeroidaan;
sisältö - luotu sisältö, tässä tapauksessa se vastaa numeron näyttämisestä ennen jokaista luettelokohtaa.

Ol ( /* poista vakionumerointi */ list-style: none; /* Tunnista laskuri ja anna sille nimi li. Laskurin arvoa ei ole määritetty - oletusarvoisesti se on 0 */ counter-reset: li; ) li :before ( /* Määrittelemme numeroitavan elementin - li Pseudo-elementti ennen tarkoittaa, että content-ominaisuuden avulla lisätty sisältö sijoitetaan ennen luettelon alkioita. Tässä asetetaan laskurin lisäyksen arvo (oletus on 1 */ laskurilisäys: li / * Sisältö-ominaisuus näyttää luettelokohteen numeron laskurit () tarkoittaa, että luotu teksti edustaa kaikkien laskurien arvoja lainausmerkeissä numeroiden väliin ja jokaisen luettelokohdan sisällön eteen lisätään piste */ content: counters(li,"") ".
Riisi. 5. Monitasoinen numeroitu luettelo

Numeroidut luettelot ovat kokoelma elementtejä sarjanumeroineen. Numeroinnin tyyppi ja tyyppi riippuvat tunnisteen attribuuteista

kuten alla.

Ensimmäinen kohta
Toinen kohta
Kolmas kohta

Jos et määritä muita määritteitä ja kirjoita vain tunniste

Esimerkki 11.3. Luo numeroitu luettelo

Numeroitu luettelo

Työskentely ajan kanssa

täsmällisyyden luominen (et koskaan myöhästy mistään);
parannuskeino täsmällisyyteen (sinulla ei ole koskaan kiirettä);
muutos ajan ja kellojen käsityksessä.

Tämän esimerkin tulos on esitetty kuvassa. 11.3.

Riisi. 11.3. Numeroitu luettelonäkymä

Huomaa, että numeroitu luettelo lisää myös automaattisen sisennyksen tekstin ylä-, ala- ja vasemmalle puolelle.

Seuraavat arvot voivat toimia numerointielementteinä:

arabialaiset numerot (1, 2, 3, ...);
latinalaiset isot kirjaimet (A, B, C, ...);
pienet latinalaiset kirjaimet (a, b, c, ...);
isot roomalaiset numerot (I, II, III, ...);
pienet roomalaiset numerot (i, ii, iii, ...).

Numeroidun luettelon tyypin ilmoittamiseksi käytä tagin type-attribuuttia

Listan tyyppi	HTML-koodi	Esimerkki
Arabialaiset numerot		1. Cheburashka 2. Krokotiili Gena 3. Shapoklyak
Latinalaisen aakkoston isot kirjaimet		A. Cheburashka B. Krokotiili Gena C. Shapoklyak
Latinalaisen aakkoston pienet kirjaimet		a. Cheburashka b. Krokotiili Gena c. Shapoklyak
Roomalaiset numerot isoilla kirjaimilla		I. Cheburashka II. Krokotiili Gena III. Shapoklyak
Roomalaiset numerot pienillä kirjaimilla		i. Cheburashka ii. Krokotiili Gena iii. Shapoklyak

Jos haluat aloittaa luettelon tietyllä arvolla, käytä tagin start-attribuuttia

Esimerkki 11.4. Listan numerointi

roomalaiset numerot

Kuningas Magnum XLIV
Kuningas Siegfried XVI
Kuningas Sigismund XXI
Kuningas Husbrandt I

Tämän esimerkin tulos on esitetty kuvassa. 11.4.

Riisi. 11.4. Numeroitu luettelo roomalaisilla numeroilla

Numeroidut luettelot ovat kokoelma elementtejä sarjanumeroineen. Numeroinnin tyyppi ja tyyppi riippuvat elementin parametreista

arabialaiset numerot (1, 2, 3, ...);
Arabialaiset numerot, joiden alussa on nolla, jos numerot ovat alle kymmenen (01, 02, 03, ...,10);
latinalaiset isot kirjaimet (A, B, C, ...);
pienet latinalaiset kirjaimet (a, b, c, ...);
isot roomalaiset numerot (I, II, III, ...);
pienet roomalaiset numerot (i, ii, iii, ...);
Armenian numerointi;
Georgian numerointi.

Käytännön näkökulmasta kohtien näyttämisen periaatteita luettelomerkittynä luettelona voidaan soveltaa samalla tavalla kuin numeroitua luetteloa. Mutta koska kyseessä on luettelointi, on joitakin ominaisuuksia, joista keskustellaan edelleen.

Listan numerointi

Luettelo voidaan aloittaa mistä tahansa numerosta; elementin start-attribuuttia käytetään tähän tarkoitukseen

. Arvo on mikä tahansa positiivinen kokonaisluku. Sillä ei ole väliä, minkä tyyppinen numerointi on asetettu, vaikka luettelona käytettäisiin latinalaisia kirjaimia. Jos sekä alku- että arvoattribuutteja käytetään luettelossa samanaikaisesti, jälkimmäinen on etusijalla ja numerointi näytetään arvon määrittämästä numerosta, kuten esimerkissä 1.
Esimerkki 1: Listan numeroinnin muuttaminen
Luettelot
1. Sinun tulee pitää hyvää huolta työpaikastasi.
2. Säädä huoneen valaistus siten, että valonlähde sijaitsee käyttäjän sivulla tai takana.
3. Lääketieteellisten komplikaatioiden välttämiseksi on suositeltavaa valita tuoli, jossa on pehmeä istuin.
Tämän esimerkin luettelon ensimmäinen elementti alkaa roomalaisella numerolla IV, koska määritetään start="4"-attribuutti, sitten tulee numero V ja viimeinen elementti tulee epäkuntoon ja sille annetaan numero X (kuva 1).
Riisi. 1. Roomalaiset numerot luettelossa
Numeroiden kirjoittaminen
Oletusarvon mukaan numeroidulla listalla on tietty ulkoasu: ensin on numero, sitten piste ja sen jälkeen teksti näytetään välilyönnillä erotettuna. Tämä kirjoitusmuoto on visuaalinen ja kätevä, mutta jotkut kehittäjät haluavat nähdä eri tavan suunnitella luetteloiden numerointi. Nimittäin siten, että pisteen sijasta on sulkusulku, kuten kuvassa 10 näkyy. 2 tai jotain vastaavaa.
Riisi. 2. Numeroitu luettelonäkymä suluilla
Tyylien avulla voit muuttaa luettelon numerointityyppiä sisällön ja vastalisäysominaisuuksien avulla. Ensin ol-valitsin on asetettava asentoon counter-reset : item , tämä on tarpeen, jotta jokaisen uuden listan numerointi alkaa alusta. Muussa tapauksessa numerointi jatkuu ja 1,2,3:n sijasta näet 5,6,7. Nimikkeen arvo on laskurin yksilöllinen tunniste, jonka valitsemme itse. Seuraavaksi sinun on piilotettava alkuperäiset merkit tyyliominaisuuden list-style-type kautta arvolla none .
Sisältö-ominaisuus toimii yleensä yhdessä pseudoelementtien ::after ja ::before kanssa. Siten li::before-konstruktio sanoo, että ennen jokaista listan elementtiä on lisättävä jotain sisältöä (esimerkki 2).
Esimerkki 2. Oman numerointisi luominen
Li::before ( sisältö: laskuri(tuote) ") "; /* Lisää numeroihin sulkumerkki */ counter-increment: item; /* Aseta laskurin nimi */ )
Sisältö-ominaisuus, jossa on arvo counter(item), näyttää numeron; Lisäämällä sulut, kuten tässä esimerkissä näkyy, saamme tarvittavan numerointityypin. vastalisäystä tarvitaan listan numeron kasvattamiseksi yhdellä. Huomaa, että kaikkialla käytetään samaa tunnistetta nimeltä item . Lopullinen koodi näkyy esimerkissä 3.
Esimerkki 3: Luettelonäkymän muuttaminen
Luettelot
1. Ensimmäinen
2. Toinen
3. Kolmas
4. Neljäs
Yllä olevalla menetelmällä voit tehdä minkä tahansa tyyppisen numeroidun luettelon, esimerkiksi laittaa numeron hakasulkeisiin, tässä tapauksessa vain yksi rivi muuttuu tyyleissä.
Sisältö: "[" laskuri(tuote) "] ";
Luettelo venäjän kirjaimilla
Siellä on numeroitu luettelo latinalaisilla kirjaimilla, mutta luettelossa ei ole venäläisiä kirjaimia. Ne voidaan lisätä keinotekoisesti käyttämällä yllä olevaa tekniikkaa. Koska numerointi tapahtuu tyylien kautta, itse lista pysyy alkuperäisenä, siihen lisätään vain valittu luokka, kutsutaan sitä kyriliksi (esimerkki 4).
Esimerkki 4: Koodi luettelon luomiseksi
1. Yksi
2. Kaksi
3. Kolme
Kirjainten lisääminen tapahtuu pseudoelementillä ::before ja content-ominaisuuden avulla. Koska jokaisella rivillä on oltava oma kirjain, käytämme pseudoluokkaa :nth-child(1) , jonka kirjainnumero kirjoitetaan sulkeisiin. Ensimmäinen kirjain on luonnollisesti A, toinen on B, kolmas on C jne. Tämä koko joukko lisätään li-valitsimeen seuraavasti (esimerkki 5).
Esimerkki 5: Pseudoluokka:nth-lapsi
Kyriliini li:nth-child(1)::ennen ( sisältö: "a)"; ) .kyrillinen li:nth-child(2)::before ( sisältö: "b)"; ) .kyrillinen li:nth-child(3)::before ( sisältö: "at)"; )
Tässä esimerkissä jokaista kirjainta seuraa sulkumerkki, kaikki kirjaimet ovat pieniä. Voit määrittää oman tyyppisi luettelonumerointiin, esimerkiksi se voi sisältää isoja kirjaimia pisteen kanssa, yhdellä tai kahdella hakasulkeella tai vain kirjaimia. Toisin kuin tavallinen numerointi, voimme vapaasti tehdä täällä mitä haluamme. Kymmenen kirjaimen luettelon pitäisi riittää melkein kaikkiin tilanteisiin, mutta jos tämä yhtäkkiä osoittautuu riittämättömäksi, mikään ei estä meitä laajentamasta luetteloa sisältämään ainakin kaikki venäjän aakkosten kirjaimet.
Lopuksi säädämme kirjainten kohdistusta ja sijaintia, valinnaisesti määritämme fontin koon, värin ja muut parametrit (esimerkki 6).
Esimerkki 6. Luettelo venäjän kirjaimilla
Lista
1. Borssikeitto
2. Hauen kotletteja
3. Kulebyaka
4. Sienet smetana
5. Pannukakkuja kaviaarilla
6. Kvass
Tämän esimerkin tulos on esitetty kuvassa. 3.

Tukee kahdenlaisia luetteloita: numeroituja ja numeroimattomia. Ensiksi mainittuja käytetään elementtien järjestykseen luetteloimiseen, jälkimmäisiä käytetään vastaavien elementtien luettelon luomiseen. On myös luetteloita määritelmistä, joita käytetään määritelmä-kuvauslohkojen luomiseen, mutta kokemukseni mukaan niitä käytetään erittäin harvoin. Siellä on tietoa näiden luetteloiden käsittelystä video aloittelijoille, joka näyttää yksityiskohtaisesti, kuinka näitä luetteloita käytetään.

Kun olet työskennellyt tavallisten HTML-sisäkkäisten numeroitujen luetteloiden kanssa, ennemmin tai myöhemmin jokainen kohtaa sen epätäydellisyyden ongelman. Tosiasia on, että kun listaa sisäkkäin, sisäkkäisen luettelon numerointi alkaa yhä uudelleen yhdestä. Ja kun sisäkkäisyystaso on kolme ja luettelon pituus yli kymmenen, ongelmat alkavat havaita, mikä sisäkkäinen elementti kuuluu mihinkin pääelementtiin.

Tarkastellaan tätä ongelmaa yksinkertaisella esimerkillä. Alla olevassa koodissa elementit koostuvat siitä, mitä haluaisimme nähdä:
1. 1.
2. 2.
  1. 2.1.
  2. 2.2.
  3. 2.3.
  4. 2.4.
3. 3.
4. 4.
  1. 4.1.
  2. 4.2.
  3. 4.3.
  4. 4.4.
Kuitenkin, kun tällainen HTML-koodi näytetään näytöllä, saamme numeroidun HTML-luettelon vakiotulosteen, jossa kaikki sisäkkäiset luettelot alkavat numerolla 1.

Yllä olevassa kuvassa listan elementtien alussa (ei lihavoituna) on listan automaattinen numerointi