Kuidas panna HTML-is nummerdatud loend algama kindla numbriga

Kui töötad HTML-iga, siis varem või hiljem vajad loendeid. Ja mitte ainult asjade loetlemiseks: mõnikord pead sa alusta nummerdatud loendit kindlast väärtusestCSS-i abil saab muuta nummerdamisstiili, ümber pöörata järjekorda või isegi täpploendipunkte kohandada. See võib tunduda väikese asjana, aga see on üks neist paigutuse ja semantika ülesannetest, mis on hea omandada.

Järgmistes ridades näete selgelt ja otsekoheselt, kuidas loendid HTML-is toimivad (järjestatud, järjestamata ja kirjeldavad loendid), millised atribuudid ja omadused on saadaval ning kuidas neid tõhusalt kasutada. Oleme lisanud ka... Praktilised näited CSS-i alguse, väärtuse, tagasipööramise ja loenduritega et katta kõige levinumad ja kõige vähem ilmsed kasutusjuhud.

Mis täpselt on HTML-i loend ja miks see on oluline?

HTML pakub kolme tüüpi loendeid: tellitud ( ), korratu ( ) ja kirjeldus ( Kui töötate teiste tööriistadega, saate ka kontrollida, kuidas loendite lisamine PowerPointisÕige valimine ei ole ainult esteetika küsimus; see mõjutab dokumendi semantikat ja seda, kuidas kasutajad seda mõistavad. SEO Ja abitehnoloogiad mõistavad sisu. Järjestatud loendis on kaudne järjestus; järjestamata loendis seda järjestust ei eksisteeri; kirjeldavas loendis luuakse kaart. termin ( ) tema definitsioon ( ).

Vaikimisi rakendavad brauserid teatud stiile: ja Neil on vertikaalne veeris ja vasakpoolne täidis, Tavaliselt nihutab see sisu paremale ja Neil pole oma veeriseid. Need väärtused mõjutavad joondust ja vahesid, seega on tavaline neid CSS-iga kohandada. säilitage ühtlane vertikaalne rütm koos ülejäänud lehega.

Järjestatud loendid ( ): põhistruktuur ja numeratsioon

Järjestatud loend luuakse koos … ja elemendid sees. Vaikimisi on numeratsioon 1, 2, 3… ja nii edasi. Soovi korral saate atribuudi „type” abil valida tähti (A, B, C) või rooma numbreid (I, II, III).

Atribuut tüüp See aktsepteerib mitmeid väärtusi: "1" (kümnendsüsteem), "a" (väiketähed), "A" (suurtähed), "i" (väikesed rooma tähed) ja "I" (suured rooma tähed). See kehtib kogu loendi kohta ja on kiire viis defineeri nummerdamissüsteem ilma CSS-i kasutamata.

<ol type="A">
  <li>Primer paso</li>
  <li>Segundo paso</li>
  <li>Tercer paso</li>
</ol>

Eelmises näites eelneb igale elemendile A, B, Cja nii edasi. Pidage meeles, et numeratsioon on puhtalt esinduslik: järjekorra dikteerib HTML-is, mitte ekraanil kuvatavas numbris.

Alusta nimekirja kindlast numbrist: algus ja väärtus

Nummerdatud loendi alguspunkti juhtimiseks on kaks natiivset lähenemisviisi: alustama y väärtus„.start“ määrab jada esimese väärtuse; „value“ võimaldab määrata igale elemendile kindla numbri, alustades seejärel progresseerumist sealt uuesti.

Kui teil on nimekirja vaja saabas 30-s kasutage algus="30"Kui soovite muuta ainult konkreetset elementi (näiteks hüpata loendi keskele 65. kohale), kasutage väärtus="65" selles Mõlemad atribuudid tagastati HTML5-ga pärast seda, kui need olid HTML 4.01 strict versioonis aegunud, seega täna Need on kehtivad ja väga kasulikud.

<!-- Arrancar en 30 -->
<ol start="30">
  <li>Treinta</li>
  <li>Treinta y uno</li>
  <li>Treinta y dos</li>
</ol>

<!-- Saltar a 65 en el segundo elemento -->
<ol>
  <li>Primero</li>
  <li value="65">Segundo</li>
  <li>Tercero</li>
</ol>

Nende atribuutide selge eelis on see, et nummerdamine jätkab tööd isegi CSS-i tõrke korral, tagades a tugev kogemus vanemates brauserites või keskkondades, kus stiilid on keelatud.

Pöördnumeratsioon: pöördatribuut

Kui soovite tagurpidi lugeda, lisab HTML5 atribuudi vastupidine sisse Selle abil nummerdatakse loend kõrgeimast madalaimani ilma täiendavate häkkimisteta. Saate selle jätta tõeväärtuseks või "pööratud" väärtusega; Mõlemad meetodid toimivad tänapäevastes brauserites.

<ol reversed>
  <li>Elemento A</li>
  <li>Elemento B</li>
  <li>Elemento C</li>
</ol>

See muster on väga praktiline edetabelite, uusimast vanimani kulgevate ajatelgede või loendite puhul, kus kahaneval järjekorral on mõte. See on semantiline atribuut, seega annab selgelt edasi kavatsuse dokumendi autorilt.

Nummerdamise kohandamine CSS-iga: loendurid ja ::before

Kui eelistate välimuse üle täielikku kontrolli, saate natiivsed markerid asendada CSS-loendurid ja genereeri nummerdatud "täpploend" ::before abil. See meetod võimaldab keerukamaid fonte, taustu, suurusi ja vorminguid kui tavaline nummerdamine.

Põhiidee on loenduri lähtestamine , suureneb iga ja värvige väärtus sisu: loendur(ese)Samal ajal keelate brauseri täpploendi kursori loendi stiilis:none abil, et vältida järjehoidjate dubleerimist.

ol { counter-reset: item; }
ol li { list-style: none; padding: 4px 8px; }
ol li::before {
  content: counter(item) ". ";
  counter-increment: item;
  display: inline-block;
  background: #323232;
  color: #fbfbfb;
  font: bold 16px Arial, Verdana;
  padding: 0 4px;
  margin: 0 6px 0 0;
}

See lähenemisviis on võimas, kuid sellel on üks oluline detail: CSS-loendurid ei "tea" algust ega väärtustTeisisõnu, kui alustate HTML-is 45-st, jätkab loendur lugemist 1-st, kui te seda käsitsi loenduri lähtestamisega ei kohanda.

Loenduri soovitud väärtusega sünkroonimiseks saate selle võrgus lähtestada, lahutades algsest numbrist ühe. Näiteks kui kolmas See peaks olema 45, sina kandideerid loenduri lähtestamine: punkt 44; elemendi enda või selle suhtes vastav.

<ol>
  <li>Primer ítem</li>
  <li>Segundo ítem</li>
  <li value="45" style="counter-reset: item 44;">Tercer ítem</li>
  <li>Cuarto ítem</li>
</ol>

See töötab, jah, aga see on kompromisslahendusSee sunnib sind loogikat (HTML ja CSS) dubleerima ning raskendab hooldust. Kui sa ei vaja väga spetsiifilist numbristiili, on tavaliselt eelistatav delegeerida nummerdamine brauserile ja sellega töötada. loendistiili tüüp põhiaspekti jaoks.

Ajaloolise kurioosumina lisasid mõned inimesed IE6/IE7 ühilduvuse, jättes `list-style:decimal` käsuga pärandhäkitud tärniga ja genereerides välimuse `::before`-ga. Tänapäeval pole seda vaja, kui just tegemist pole äärmiselt vananenud juhtumiga. häkkimised sellistele vanadele brauseritele.

Järjestamata loendid ( ): vinjetid ja isikupärastamine

Järjestamata loend määratleb omavahel seotud elemendid ilma ordinaalhierarhiata ja on kontseptuaalselt sarnane teiste rakenduste loenditega, näiteks ripploendid ExcelisVaikimisi kuvatakse see "ketta" täpiga, aga saate selle punkti muuta, kasutades loendistiili tüüp: puudub (täpp puudub), ketas (täidetud), ring (tühi) või ruut (ruut).

<ul style="list-style-type: square;">
  <li>Elemento uno</li>
  <li>Elemento dos</li>
  <li>Elemento tres</li>
</ul>

Lisaks saate kontrollida, kuhu paneel on värvitud. loendistiili positsioon: väljaspool (vaikimisi väljaspool kasti) ) või sees (täpploend jääb ploki sisse, tekstiga joondatud). See mõjutab joondamist ja mitmerealist käitumist.

ul { list-style-position: inside; }

Kui soovite kohandatud pilti, on olemas loendistiili piltKuigi selle kontroll on piiratud, on tausta omaduste (taustapilt, tausta asukoht, tausta suurus, korduse puudumine) kasutamine paindlikum. piisava täitevahega, et pilt tekstiga ei kattuks.

ul.custom { list-style: none; padding-left: 20px; }
ul.custom li {
  background-image: url("/ruta/a/tu-vineta.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 16px 16px;
  padding-left: 24px;
}

Võite kasutada ka lühendatud omaduste loendi stiilis Tüübi, pildi ja positsiooni grupeerimiseks ühte deklaratsiooni (näiteks loendistiilis: square inside;). Kui lisate nii pildi kui ka tüübi, toimib tüüp "plaanina B", kui pildi laadimine ebaõnnestub.

Kirjelduste loendid ( ): terminid ja definitsioonid

Kirjelduste loendeid kasutatakse terminite ja definitsioonide paaride seostamiseks, näiteks sõnastikus või restorani menüüs. Need on struktureeritud järgmiselt: (nimekiri) (tähtaeg) y (määratlus)Vaikimisi lisab brauser veerise seda termini suhtes liigutada.

<dl>
  <dt>Pizpireta</dt>
  <dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
  <dt>Pulular</dt>
  <dd>Abundar y bullir en un lugar.</dd>
</dl>

Kui eelistate teistsugust välimust, kohandage veeriseid ja tüpograafiat CSS-iga. Semantilisel tasandil, kui te tegelikult esindate Terminid ja definitsioonid, See on õige silt; kui soovite lihtsalt visuaalset loendit, kas CSS-iga võivad valikud olla lihtsamad.

Brauseri vaikekäitumine (tühikud ja tüpograafia)

Kasutajaagendi stiilid kehtivad tavaliselt järgmistele teemadele: ja a ~1em suurune üla-/alaserva ja ~40px suurune vasakpoolne täidissamal ajal kui pärib sarnaseid veerisi ja Lisa vasakääris. Loendite integreerimiseks lõikude ja pealkirjadega on soovitatav suurused ja line-height sidusal viisil.

html { font-size: 62.5%; } /* 1rem = 10px aproximado */
body { font-family: system-ui, sans-serif; }
p, ul, ol, dl { font-size: 1.6rem; margin: 1.6rem 0; }
li, dd { line-height: 1.6; }
dt { font-weight: 700; }

Nende kohandustega säilitavad plokid stabiilse vertikaalse rütmi, mis takistab mõnel loendil ilmumast "lähemal kohal" või "vabamal" kui ülejäänud sisu. See on peen detail, aga teeb lugemisel vahet.

Pesastatud loendid ja parimad tavad

Loendite elementide sees pesastamine on täiesti õigustatud. Olenemata tüübist. Oluline on, et iga alamloend oleks õigesti oma ülemelemendi sees ja et te ei unustaks asetage pesastatud loendisTasemete arvule praktilist piirangut ei ole, kuid loetavuse huvides on kõige parem neid mitte ületada.

<ul>
  <li>Carnívoro
    <ul>
      <li>León</li>
      <li>Buitre</li>
    </ul>
  </li>
  <li>Herbívoro
    <ul>
      <li>Vaca</li>
      <li>Cabra</li>
    </ul>
  </li>
</ul>

Järjestatud loendite pesastamisel saate alamloendi tüübi muuta järgmiselt: vältida visuaalset segadust (Näiteks numbrid 1. tasemel ja tähed 2. tasemel). Kui kasutate CSS-loendureid, pidage meeles, et iga loend saab oma loenduri lähtestada, et vältida järjestuste segamini ajamist.

Lingid loendites ja näidisnavigatsioonimenüü

Järjestamata loendi teisendamine navigeerimisribaks on tavaline. Iga See sisaldab täpploendit ja CSS-iga saate täpploendi eemaldada ning elemendid joondada. Flexboxiga on tulemus kaasaegne ja komplikatsioonideta ligipääsetav, säilitades samal ajal puhas semantika.

<nav>
  <span class="logo">Logo</span>
  <ul class="menu">
    <li><a href="#/home">Inicio</a></li>
    <li><a href="#/products">Productos</a></li>
    <li><a href="#/about">Sobre nosotros</a></li>
  </ul>
</nav>

nav { background: #273032; color: #fff; padding: 10px; display: flex; gap: 16px; align-items: center; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .8rem; }
.menu > li { margin: 0; }
.menu a { color: #ffc0cb; text-decoration: none; }

See muster kasutab ära asjaolu, et loend on kontseptuaalselt seotud linkide rühm. Täpploendite eemaldamine ja nende paigutamine flexi abil ritta muudab navigeerimise lihtsamaks. etteaimatav ja kohanemisvõimeline erinevatele ekraanisuurustele.

Lühendatud CSS loendite ja täpploendivalikute jaoks

La propiedad abreviada loendistiilis See võimaldab teil määrata täpploendi tüübi, asukoha ja pildi ühel real mis tahes järjekorras. Näiteks: list-style: seespool ruut; või list-style: puudub; kui loote kohandatud täpploendi taustaga või ::before.

/* Equivalentes */
ol { list-style-type: upper-roman; list-style-position: outside; list-style-image: none; }
ol { list-style: upper-roman outside; }

Pea meeles, et kui lisad nii pildi kui ka tüübi, toimib tüüp järgmiselt: varualternatiiv juhul kui pildi laadimine ebaõnnestub. See tagab vastupidavuse ja säilitab loetavuse ka ebatäiuslikes olukordades.

Ühilduvus, HTML4.01 vs HTML5 ja soovitused

Ühe etapi jooksul alusta ja kirjuta sisse ja väärtus peeti vananenuks (HTML 4.01 strict). Need tagastatakse HTML5-s ja tänaseni on nende kasutamine korrektne ning tänapäevased brauserid seda hästi toetavad. Kui töötate väga vanade dokumentidega, kontrollige DOCTYPE'i ja kohandage seda vastavalt kontekstile.

Paneelide stiliseerimiseks CSS on eelistatavam võrreldes HTML-i atribuutidega, kui eesmärk on puhtalt visuaalne. Aga kui teil on vaja, et loend algaks kindla numbri või loenduriga, on semantilised atribuudid (algus, vastupidine, väärtus) kõige selgem ja usaldusväärsem valik, jättes peenvormingu CSS-i hooleks.

Praktilised näited loendi alustamiseks kindla numbriga

Kujutage ette lehekülgede nummerdamist, mis on samal lehel jagatud eraldi osadeks. Saate kasutada nummerdamise jätkamist sealt, kus eelmine plokk pooleli jäi, või rakendada teise ploki esimesele elemendile väärtust, et säilitada loogiline järjepidevus ilma asju taustsüsteemis keerulisemaks muutmata.

<ol start="11">
  <li>Artículo 11</li>
  <li>Artículo 12</li>
  <li>Artículo 13</li>
</ol>

Toimetuse loendites, sisukordades või edetabelites rõhutab suure numbriga alustamine konteksti ("teine ​​osa", "50–26 parimat"). `reversed` abil saate luua kahaneva edetabeli ilma HTML-i ümber järjestamata ja `value` abil tutvusta hüppeid kui dokumendi loogika seda nõuab.

Millal CSS-loendureid kasutada ja kuidas üllatusi vältida

CSS-loendurite kasutamine on mõttekas siis, kui seda vajate kaunista markerit stiilidega, mida natiivne nummerdamine ei paku: taustad, äärised, erifondid, segavormingud. Samuti siis, kui soovite mittestandardset nummerdamist kombineerida muude kaunistustega.

Siiski pidage meeles, et kui kasutate start/value'i koos CSS-loenduritega, peate loenduri lähtestamise käsitsi sünkroonimineHTML-ist on lihtne unustada ühiku lahutamine või reasisese reegli jätmine. Kui teie prioriteediks on semantika ja robustsus, siis tuginege natiivsele numeratsioonile ja piirake loendureid juhtudega, kus esteetika neid tõeliselt õigustab.

Vahepealne strateegia ei ole natiivse paneeli allasurumine, vaid selle visuaalne peitmine ja stiili tugevdamiseks ::markeri või ::before'i kasutamine. Sellegipoolest vajab tegeliku markeri ja "dekoratiivse markeri" vaheline järjepidevus hoolikat kaalumist. ärge dubleeri teavet ekraanilugejatele.

Loendite ligipääsetavus ja semantika

Loendid aitavad abitehnoloogiatel reklaamida elementide arv ja igaühe rolli. Vältige "võlts"loendite loomist, kasutades ainult reavahetusi või eraldajaid; ja ärge kasutage loendeid asjade jaoks, mis ei ole loendid (näiteks veergude vormindamiseks). Sõnastike ja terminite-definitsioonide paaride puhul edastab suhet mingil moel täpsem et üldine nimekiri koos .

Kui muudate visuaalset järjestust CSS-iga (näiteks inverteerite või ümber järjestate), veenduge, et DOM-i järjestus järgiks loogilist voogu. Ja kui loote menüüsid , hoidke selged lingid, nähtav fookus ja sobivad rollid, kui otsustate ARIA lisada (ilma sellega üle pingutamata).

Nummerdatud loendi alustamiseks kindlast numbrist kasutage alustama; konkreetsete hüpete määramiseks: väärtus Tagasi lugemiseks: tagurpidi. Kui soovite tähti või rooma numbreid: tippige. Täpploendipunktide jaoks ja Kohandatud: loendistiil ja kui vajate pilte, siis veelgi parem taust-* täidisegaJa kui otsid keerukat "disaini" nummerdamist, kaalu CSS-loendureid, teades, et need ei "loe" algus-/väärtusväärtust.

Loendid võivad tunduda lihtsad, kuid need on küljenduse kujundamise põhiosa. Nende ressursside abil saate neid peaaegu iga stsenaariumi jaoks kohandada, kaotamata semantika, ligipääsetavus ja visuaalne kontroll.