En av listetypene implementert i HTML er punktliste. Ellers kalles lister av denne typen unummererte eller uordnede. Etternavnet brukes ofte som en formell oversettelse av navnet på den tilsvarende taggen

, ved hjelp av hvilke lister av denne typen er organisert i HTML-dokumenter (UL - Unordered List, unordered list).

I en punktliste brukes spesialtegn kalt listemarkører for å fremheve elementene (de kalles ofte kuler, som er den formelle uttalen av det engelske uttrykket bullet). Utseendet til listemarkører bestemmes av nettleseren, og når de oppretter nestede lister, diversifiserer nettlesere automatisk utseendet til markører på forskjellige nestenivåer.

Tagger

Og

For å lage en punktliste, må du bruke en container-tag, der alle elementene i listen er plassert. Åpnings- og avslutningslistetaggene gir et linjeskift før og etter listen, og skiller dermed listen fra hovedinnholdet i dokumentet, så det er ikke nødvendig å bruke avsnittstagger her


.

Hvert listeelement må begynne med en kode

• (LI - Listeelement, listeelement). stikkord
• krever ikke en tilsvarende lukkebrikke, selv om dens tilstedeværelse i prinsippet ikke er forbudt. Nettlesere starter vanligvis hver gang de viser et dokument. nytt element liste fra en ny linje.

  Informasjonen som gis er tilstrekkelig til å konstruere en grunnleggende punktliste. La oss gi et eksempel på et HTML-dokument som bruker en punktliste, hvis visning av nettleseren er vist i fig. 2.1.

  Stjernetegn:

  • Væren

  • Tyren

  • tvillinger

  • Jomfruen

  • Vekter

  • Skorpion

  • Skytten

  • Steinbukken

  • Vannmannen

  • Fisk

  Ris. 2.1. Nettleservisning av punktliste

  Merk at i tillegg til listeelementene merket med taggen

• , kan andre HTML-elementer være til stede. I eksemplet ovenfor er ett av disse elementene ren tekst, som ikke er et listeelement, men fungerer som tittelen.

  Merk

  Noen lærebøker på HTML-språket indikerer at en container-tag skal brukes til å angi listetittelen (LH - Listehode, listeoverskrift). Denne taggen gjenkjennes for øyeblikket ikke av noen vanlige nettlesere og er ikke en del av HTML-spesifikasjonen. Dermed blir bruken meningsløs, selv om det ikke vil føre til noen feil.

  I taggen

  to parametere kan spesifiseres: COMPACT og TYPE.

  COMPACT-parameteren skrives uten verdi og brukes til å indikere for nettleseren at denne listen bør presenteres i en kompakt form. For eksempel kan skrifttypen eller avstanden mellom listelinjer osv. reduseres.

  Merk

  For øyeblikket er tilstedeværelsen av COMPACT-parameteren i taggen

  påvirker ikke på noen måte visningen av lister i ledende nettlesere. Derfor søknaden denne parameteren er meningsløst, spesielt siden bruken ikke anbefales av HTML 4.0-spesifikasjonen.

  TYPE-parameteren kan ha følgende verdier: plate, sirkel og firkant. Denne parameteren brukes til å fremtvinge fremkomsten av listepunkter. Den nøyaktige typen markør vil avhenge av nettleseren du bruker. Typiske visningsalternativer er som følger:

  TYPE = plate - markører vises som utfylte sirkler; TYPE = sirkel - markører vises som åpne sirkler; TYPE = firkant - markører vises som fylte ruter. Eksempel på oppføring:

  .

  Standardverdien er TYPE = plate. For nestede punktlister er standardverdien plate på første nivå, sirkel på andre nivå, firkant på tredje nivå og utover. Dette er nøyaktig hva som gjøres i siste versjoner Netscape-nettlesere og Internet Explorer. Vær oppmerksom på at andre nettlesere kan vise markører annerledes. For eksempel i HTML-spesifikasjoner 4.0 for typen markør som vises når verdien TYPE = kvadrat, er en ufylt firkant (kvadratisk kontur) indikert.

  TYPE-parameteren med samme verdier kan brukes til å spesifisere typen markører for individuelle listeelementer. For å gjøre dette kan TYPE-parameteren med tilsvarende verdi spesifiseres i listeelement-taggen

  • .

    Eksempel på oppføring:

  • .

    Merk

    Nettlesere tolker punkttypespesifikasjonen for et enkelt listeelement annerledes. Netscape-nettleseren endrer utseendet til markøren for denne og alle påfølgende inntil neste redefinisjon av utseendet til markøren oppdages. Nettleser Utforsker endrer utseendet til markøren bare for dette elementet.

    Grafiske listemarkører

    Du kan bruke grafiske bilder som listepunkter, som er mye brukt til å lage attraktive, godt utformede HTML-dokumenter. En slik mulighet gis faktisk ikke direkte HTML-språk, men er implementert noe kunstig. Dette betyr ikke at det ikke er anbefalt eller forkastelig, men bare at ingen spesielle HTML-språkkonstruksjoner vil bli brukt her.

    For å forstå ideen må du forstå mekanismen for å implementere lister på HTML-sider. Det viser seg at listen tag

    (som, faktisk, liste tags av andre typer, diskutert nedenfor) utfører en enkelt oppgave - den forteller nettleseren at all informasjon som ligger etter denne taggen skal vises forskjøvet til høyre (innrykket) med en viss mengde. Tagger
    • , peker på individuelle listeelementer, gir utdata standard markører liste elementer.

      Hvis vi trenger å bygge en liste med grafiske markører, kan vi klare oss helt uten tagger

    • . Det vil være nok å sette inn ønsket grafisk bilde før hvert element i listen. Det eneste problemet som må løses er å skille listeelementene fra hverandre. Du kan bruke avsnittstagger for dette

      Eller tvinge en linjemating
      . Et eksempel på implementering av en liste med grafiske markører, hvis visning er vist i fig. 2.2 er vist nedenfor:

      som bare vil bli overført én gang. Filstørrelsene til et lite bilde er også ekstremt små.

      Merk

      Metoder for å lage lister med grafiske kuler er diskutert etter tur i kapittel 8.

      
      

      Hovedbruk av lister:

      Nummerert - for å liste elementer som følger i en strengt definert rekkefølge.

      Punkttegn – for å liste elementer i tilfeldig rekkefølge.

      Multi-level - for å spesifisere informasjonen til visse elementer.

      Liste over definisjoner - brukes til å formatere ordbøker.

      Nummerert liste HTML-side

      Tagger brukes til å lage nummererte lister

      1. stikkord

         stikkord

         1. Som standard er listeelementer nummerert i rekkefølge 1, 2, 3... Ved å bruke TYPE-attributtet kan du endre nummereringsstilen.

            Verdinummerering TYPE A A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..

            Hvis du allerede legger til eksisterende liste nye verdier, vil nettleseren automatisk beregne den på nytt.

            Ved å bruke STARTVERDI-attributtene kan du endre nummereringsrekkefølgen på listen.

            START - tjener til å spesifisere startnummeret til listen, forskjellig fra 1.

            VERDI - gjør det mulig å tildele et vilkårlig nummer til et hvilket som helst element i listen.

            Eksempel:

            Punktliste html-side

            Tagger brukes til å lage punktlister

            stikkord

            Begynnelsen/slutten av hele listen er markert.

            stikkord

            • angi begynnelsen/slutten av et individuelt listeelement.

              Som standard er listeelementer merket med en svart sirkel. TYPE-attributtet kan brukes til å endre merkestilen.

              Innenfor en liste kan du bruke forskjellige markeringer for listeelementer.

              Eksempel:

              HTML-side med flere nivåer

              For å lage lister på flere nivåer kan du bruke enten punktlister eller nummererte lister, eller en kombinasjon av begge. En liste på flere nivåer opprettes ved å legge én liste i kroppen til en annen. Hovedoppgaven er ikke å bli forvirret. For å gjøre dette anbefaler jeg deg å lage forskjellige innrykk for individuelle lister.

              Lister over html-sidedefinisjoner

              Tre tagger brukes til å lage lister med definisjoner:

              - start/slutt av listen.

              - begynnelsen/slutten av en bestemt periode.

              - begynnelsen/slutten av begrepets forklarende artikkel.

              Tagger

              Og

              det er ikke nødvendig å veksle. De. Du kan "lenke" flere termer til én definisjon, og omvendt.

              Eksempel:

              HTML-kode: Termin 1 Abstrakt 1 til termin 1 Abstrakt 2 til termin 1

              Nettleservisning: Term 1 Abstract1 to term 1 Abstract2 to term 1

              Siden på denne siden brukes visse stiler på noen elementer, er visningen deres i tabellen noe forskjellig fra det du får.

              HTML-lister brukes til å gruppere relatert informasjon. Det er tre typer lister:

              punktliste —

              - hvert element i listen
              • merket med en markør,
                nummerert liste —
                - hvert element i listen
                1. merket med et nummer
                   liste over definisjoner- - består av terminpar
                   —
                   definisjon.

                   Hver liste er en beholder der listeelementer eller termdefinisjonspar er plassert. Listeelementer oppfører seg som blokkelementer, stablet under hverandre og opptar hele bredden av beholderblokken. Hvert listeelement har en ekstra blokk plassert på siden, som ikke deltar i oppsettet.

                   Opprette HTML-lister

                   1. Punktliste

                   Punktliste er en uordnet liste (fra engelsk uordnet liste). Laget med en sammenkoblet tag

                   . Markøren til et listeelement er en etikett, for eksempel en fylt sirkel.

                   Nettlesere legger som standard følgende formatering til listeblokken:

                   Hvert listeelement opprettes ved hjelp av en sammenkoblet tag

                2. (fra engelsk listeelement).
                tilgjengelig .
                • Microsoft
                • Google
                • eple
                Ris. 1. Punktliste

                2. Nummerert liste

                Nummerert liste opprettes ved hjelp av en sammenkoblet tag. Hvert listeelement opprettes også ved hjelp av elementet

              • . Nettleseren nummererer elementene automatisk i rekkefølge, og hvis du sletter ett eller flere elementer i en slik liste, vil de resterende tallene automatisk beregnes på nytt.

                Listeblokken har også standard nettleserstiler:

              • Verdiattributtet er tilgjengelig, som lar deg endre standardnummeret for det valgte listeelementet. For eksempel hvis for det første elementet i listen du angir
              • , så vil den gjenværende nummereringen bli beregnet på nytt i forhold til den nye verdien.

                For tag

                Følgende attributter er tilgjengelige:
                Tabell 1. Tag-attributter

                Egenskap	Beskrivelse, akseptert verdi
                reversert	Det reverserte attributtet fører til at listen vises i omvendt rekkefølge (for eksempel 9, 8, 7...).
                start	Startattributtet spesifiserer startverdien som nummereringen skal begynne fra, for eksempel en konstruksjon det første elementet vil bli tildelt serienummeret "10". Du kan også angi nummereringstypen samtidig, for eksempel .
                type	Type-attributtet spesifiserer typen markør som skal brukes i listen (bokstaver eller tall). Godkjente verdier: 1 — standardverdi, desimalnummerering. A — listenummerering i alfabetisk rekkefølge, store bokstaver(A, B, C, D). a — listenummerering i alfabetisk rekkefølge, små bokstaver (a, b, c, d). I - nummerering i romerske hovedtall (I, II, III, IV). i — nummerering i romerske små tall (i, ii, iii, iv).

                1. Microsoft
                2. Google
                3. eple
                Ris. 2. Nummerert liste

                3. Liste over definisjoner

                Lister over definisjoner opprettes ved hjelp av en tag

                . For å legge til et begrep, bruk en tag
                , og for å sette inn en definisjon - taggen
                .

                Definisjonslisteblokken har følgende standard nettleserstiler:

                For tagger

                ,

                Og

                tilgjengelig .

                Regissør:

                Peter Tochilin

                Skuespillere:

                Andrey Gaidulyan

                Alexey Gavrilov

                Vitaly Gogunsky

                Mariya Kozhevnikova

                Ris. 3. Liste over definisjoner

                4. Nestet liste

                Ofte er mulighetene til enkle lister ikke nok; for eksempel når du lager en innholdsfortegnelse, er det ingen måte å klare seg uten nestede elementer. Markeringen for den nestede listen vil være som følger:

                • Paragraf 1.
                • Punkt 2.
                  • Underklausul 2.1.
                  • Underklausul 2.2.
                    • Punkt 2.2.1.
                    • Punkt 2.2.2.
                  • Punkt 2.3.
                • Punkt 3.

                
                Ris. 4. Nestet liste

                5. Nummerert liste på flere nivåer

                En flernivåliste brukes til å vise listeelementer på forskjellige nivåer med forskjellige innrykk. Markeringen for en nummerert liste på flere nivåer vil være som følger:

                1. avsnitt
                2. avsnitt
                   1. avsnitt
                   2. avsnitt
                   3. avsnitt
                      1. avsnitt
                      2. avsnitt
                      3. avsnitt
                   4. avsnitt
                3. avsnitt
                4. avsnitt

                Denne standardoppmerkingen vil opprette en ny nummerering for hver nestede liste, og starter med én. For å lage nestet nummerering, må du bruke følgende egenskaper:
                counter-reset tilbakestiller en eller flere tellere, og spesifiserer verdien som skal tilbakestilles;
                counter-increment spesifiserer teller-inkrement-verdien, dvs. i hvilke trinn hver påfølgende vare vil bli nummerert;
                innhold — generert innhold, i i dette tilfellet er ansvarlig for å vise nummeret foran hvert listeelement.

                Ol ( /* fjern standardnummereringen */ listestil: ingen; /* Identifiser telleren og gi den navnet li. Tellerverdien er ikke spesifisert - som standard er den 0 */ counter-reset: li; ) li :before ( /* Vi definerer elementet som skal nummereres - li. Before-pseudo-elementet indikerer at innholdet som er satt inn ved hjelp av innholdsegenskapen vil bli plassert før listeelementene. Her setter vi også verdien for teller-inkrementet (standard er 1). */ counter-increment: li; / * Content-egenskapen viser nummeret til listeelementet. counters() betyr at den genererte teksten representerer verdiene til alle tellere med det navnet. En periode i anførselstegn legger til en skilleperiode mellom tall, og en periode med et mellomrom legges til før innholdet i hvert listeelement */ content: counters(li,".") "."; )
                Ris. 5. Nummerert liste på flere nivåer

              HTML støtter lister med tre forskjellige typer, som hver har sine egne parametere:

              • – en nummerert (med tall eller bokstaver) liste, hvor hvert element har et serienummer (bokstav);
                1. – en punktliste (ikke nummerert), ved siden av hvert element som en markør er plassert (i stedet for numeriske eller alfabetiske tegn som indikerer et serienummer);

                   • – en definisjonsliste består av navn/verdipar, inkludert termer og definisjoner.

                   Nummererte lister

                   I en nummerert liste setter nettleseren automatisk inn elementnummer i rekkefølge, og starter med en bestemt verdi (vanligvis 1). Dette lar deg sette inn og slette listeelementer uten å forstyrre nummereringen, siden de gjenværende tallene automatisk beregnes på nytt.
                   Nummererte lister opprettes ved hjelp av et blokkelement

                   (fra English Ordered List - nummerert liste). Ved siden av beholderen
                   for hvert listeelement plasseres et element
                   1. (fra engelsk listeelement - listeelement). Standard er en nummerert liste med arabiske tall.
                      stikkord
                      har følgende syntaks:
                      1. element 1
                      2. element 2
                      3. element 3

                      Nummererte listeelementer må inneholde flere listeelementer, som vist i følgende eksempel:

                      Eksempel: Nummerert liste

                      • Prøv selv"

                      Trinn-for-steg instruksjon

                      1. Få nøkkelen
                      2. Sett nøkkelen inn i låsen
                      3. Vri nøkkelen to omdreininger
                      4. Få nøkkelen ut av låsen
                      5. Åpne døren

                      Trinn-for-steg instruksjon

                      1. Få nøkkelen
                      2. Sett nøkkelen inn i låsen
                      3. Vri nøkkelen to omdreininger
                      4. Få nøkkelen ut av låsen
                      5. Åpne døren

                      Noen ganger når du ser på eksisterende HTML-koder vil du komme over argumentet type i element

                      , som brukes til å angi type nummerering (bokstaver, romerske og Arabiske tall og så videre.). Syntaks:

                      Her: type – listesymboler:

                      • A - store latinske bokstaver (A, B, C...);
                      • a - små latinske bokstaver (a, b, c...);
                      • I - store romertall (I, II, III...);
                      • i - små romertall (i, ii, iii...);
                      • 1 - Arabiske tall (1, 2, 3 . . .) (brukes som standard).

                      Hvis du vil at listen skal begynne med et annet tall enn 1, bør du spesifisere dette ved å bruke attributtet start stikkord

                      .
                      Følgende eksempel viser en nummerert liste med store romertall og en startverdi på XLIX:

                      Nummerering kan også startes ved å bruke attributtet verdi, som legges til elementet

                      1. på følgende måte:

                      7. I dette tilfellet vil den sekvensielle nummereringen av listen bli avbrutt, og fra dette tidspunktet vil nummereringen begynne på nytt, i dette tilfellet fra syv.

                         Eksempel på attributtbruk verdi stikkord

                      8. , som lar deg endre nummeret til et gitt listeelement:

                         I dette eksemplet vil "første listeelement" være nummer 1, "andre listeelement" ville være nummer 7, og "tredje listeelement" ville være nummer 8.

                         Formatering av nummererte lister med CSS

                         For å endre listenummer bør du bruke eiendommen liste-stil-type CSS-stilark:

                         Nummererte listestiler

                         Eksempel	Betydning	Beskrivelse
                         a, b, c	lavere alfa	Liten bokstav
                         A, B, C	øvre alfa	Store bokstaver
                         i, ii, iii	lavere-romersk	Romertall med små bokstaver
                         I, II, III	øvre-roman	Romertall med store bokstaver

                         Eksempel: Bruk av en CSS-egenskap liste-stil-type

                         Punktlister

                         Punktlister er i hovedsak lik nummererte lister, bare de inneholder ikke sekvensiell nummerering av elementer. Punktlister opprettes ved hjelp av et blokkelement

                         (fra den engelske Unordered List - unummerert liste). Hvert listeelement, som i nummererte lister, begynner med en kode
                         • . Nettleseren rykker inn hvert listeelement og viser automatisk kuler.
                           stikkord
                           har følgende syntaks:
                           • Første punkt
                           • Andre punkt
                           • Tredje punkt

                           I det følgende eksempelet kan du se at det som standard legges til en liten markør i form av en fylt sirkel før hvert listeelement:

                           Inne i en merkelapp

                           • Det er ikke nødvendig å bare plassere tekst; det er akseptabelt å plassere et hvilket som helst element av strømmeinnhold (lenker, avsnitt, bilder, etc.)

                             Nestede lister

                             Enhver liste kan nestes i en annen. Inne i et element
                           • Det er tillatt å lage en nestet liste eller en liste på andre nivå. For å neste en liste, beskriv den nye listen inne i elementet
                           • allerede eksisterende liste. Når du legger en punktliste inn i en annen, endrer nettleseren automatisk punktstilen for andrenivålisten. Enhver liste kan nestes i en annen. Følgende eksempel viser strukturen til en punktliste som er nestet i det andre elementet i en nummerert liste.

                             Eksempel: Nestede lister

                             • Prøv selv"
                             • mandag
                               1. Send mail
                               2. Besøk til redaktøren
                                  • Velge et tema
                                  • Dekorativt design
                                  • Sluttrapport
                               3. Kveldsvisning av meldinger
                             • tirsdag
                               1. Revider tidsplanen
                               2. Send bilder
                             • Onsdag...
                             • mandag
                               1. Send mail
                               2. Besøk til redaktøren
                                  • Velge et tema
                                  • Dekorativt design
                                  • Sluttrapport
                               3. Kveldsvisning av meldinger
                             • tirsdag
                               1. Revider tidsplanen
                               2. Send bilder
                             • Onsdag...

                             Formatering av punktlister

                             For forandring utseende listemarkør-egenskapen skal brukes liste-stil-type CSS-stilark:

                             Følgende eksempel viser ulike stiler av punktlister:

                             Eksempel: Bullet List Styles

                             • Prøv selv"
                             • Kaffe
                             • Kaffe
                             • Kaffe
                             • Kaffe

                             Plate:

                             • Kaffe
                             • Melk

                             Sirkel:

                             • Kaffe
                             • Melk

                             Torget:

                             • Kaffe
                             • Melk

                             Ingen:

                             • Kaffe
                             • Melk

                             Grafiske markører.

                             I HTML er det mulig å lage en liste med grafiske markører. En ting er når listemarkørene er standardsirkler eller firkanter, og en helt annen når utvikleren selv velger markøren i samsvar med sidedesignet. For å gjøre listeelementer vakre, brukes ofte små bilder.
                             For å erstatte en vanlig markør med en grafisk, bytt ut egenskapen liste-stil-type per eiendom liste-stil-bilde og angi nettadressen til bildet:

                             Eksempel: Grafiske markører

                             • Prøv selv"

                             Stjernetegn

                             • Tyren
                             • Tvillingene

                             Stjernetegn

                             • Væren
                             • Tyren
                             • Tvillingene

                             Lister over definisjoner (beskrivelser)

                             Definisjonslister er svært nyttige for å lage for eksempel din personlige ordbok med termer. Hvert definisjonslisteelement har to deler: begrepet og dets definisjon.
                             Du legger hele listen inn i et element

                             (fra den engelske definisjonslisten - liste over definisjoner). Den inkluderer tagger

                             (fra den engelske Definition Term - et definert ord, begrep) og

                             (fra den engelske Definition Description - beskrivelse av begrepet som defineres).
                             Lister over definisjoner brukes ofte i vitenskapelige, tekniske og pedagogiske publikasjoner, og bruker dem til å sette sammen ordlister, ordbøker, oppslagsbøker, etc.

                             Den generelle strukturen til listen over beskrivelser er som følger:

                             Første termin

                             Beskrivelse av første termin

                             Andre termin

                             Beskrivelse av andre ledd

                             Følgende eksempel viser en av mulige bruksområder liste over definisjoner:

                             Eksempel: Definisjonsliste

                             • Prøv selv"

                             World Wide Web - fra engelsk. World Wide Web (WWW) er et distribuert system som gir tilgang til relaterte dokumenter som ligger på forskjellige datamaskiner koblet til Internett. Internett er et sett med nettverk som bruker en enkelt utvekslingsprotokoll for å overføre informasjon. Et nettsted er et sett med individuelle nettsider som er sammenkoblet med lenker og en enhetlig design.

                             Verdensveven

                             - fra engelsk World Wide Web (WWW) er et distribuert system som gir tilgang til relaterte dokumenter som ligger på forskjellige datamaskiner koblet til Internett.

                             Internett

                             — et sett med nettverk som bruker en enkelt utvekslingsprotokoll for å overføre informasjon.

                             Nettsted

                             - et sett med individuelle nettsider som er sammenkoblet med lenker og en enhetlig design.

                             Som standard trykkes teksten til begrepet til venstre kant av nettleservinduet, og beskrivelsen av begrepet er plassert under og flyttet til høyre.

                             Nummererte lister er en samling av elementer med deres serienumre. Type og type nummerering avhenger av elementparametrene

                             , som brukes til å lage listen. Følgende verdier kan tjene som nummereringselementer:
                             • Arabiske tall (1, 2, 3, ...);
                             • Arabiske tall med innledende null for tall mindre enn ti (01, 02, 03, ...,10);
                             • store latinske bokstaver (A, B, C, ...);
                             • små latinske bokstaver (a, b, c, ...);
                             • store romertall (I, II, III, ...);
                             • små romertall (i, ii, iii, ...);
                             • armensk nummerering;
                             • georgisk nummerering.

                             Fra et praktisk synspunkt kan prinsippene for å vise elementer i en punktliste brukes på samme måte som en nummerert liste. Men gitt at vi har å gjøre med en oppregning, er det noen funksjoner som vil bli diskutert videre.

                             Listenummerering

                             Det er tillatt å starte listen fra hvilket som helst tall; elementets startattributt brukes til dette formålet

                             eller verdien av elementet
                             1. . Verdien er et hvilket som helst positivt heltall. Det spiller ingen rolle hvilken type nummerering som er satt, selv om latinske bokstaver brukes som en liste. Hvis både start- og verdiattributtene brukes på en liste samtidig, har sistnevnte forrang og nummereringen vises fra tallet spesifisert av verdi , som vist i eksempel 1.

                                Eksempel 1: Endring av listenummerering

                                4. Du bør ta godt vare på arbeidsplassen din.
                                5. Juster belysningen i rommet slik at lyskilden er plassert på siden eller bak operatøren.
                                10. For å unngå medisinske komplikasjoner, anbefales det å velge en stol med et mykt sete.

                                Det første elementet i listen i dette eksemplet vil begynne med romertall IV, siden start="4"-attributtet er spesifisert, så kommer tallet V, og det siste elementet kommer ut av rekkefølge og tildeles tallet X (figur 1).

                                Ris. 1. Romertall i listen

                                Skrive tall

                                Som standard har en nummerert liste et bestemt utseende: først er det et tall, deretter en prikk, og etter det vises teksten atskilt med et mellomrom. Denne formen for skriving er visuell og praktisk, men noen utviklere foretrekker å se en annen måte å designe nummereringen av lister på. Nemlig slik at det i stedet for en prikk er en lukkebrakett, som vist i fig. 2 eller noe lignende.

                                

                                Ris. 2. Nummerert listevisning med parentes

                                Stiler lar deg endre typen listenummerering ved å bruke egenskapene for innhold og motvekst. Først må ol-velgeren settes til mot-nullstilling : element , dette er nødvendig slik at nummereringen i hver ny liste starter på nytt. Ellers vil nummereringen fortsette og i stedet for 1,2,3 vil du se 5,6,7. Vareverdien er en unik identifikator for telleren, vi velger den selv. Deretter må du skjule de originale markørene gjennom stilegenskapen list-style-type med verdien none .

                                Innholdsegenskapen fungerer vanligvis sammen med ::after og ::before pseudo-elementene. Dermed sier li::before-konstruksjonen at noe innhold må legges til før hvert element i listen (eksempel 2).

                                Eksempel 2. Lage din egen nummerering

                                Li::before ( innhold: counter(item) ") "; /* Legg til en parentes til tallene */ counter-increment: item; /* Angi navnet på telleren */ )

                                Innholdsegenskapen med verdien teller(element) viser et tall; Ved å legge til en parentes, som vist i dette eksemplet, får vi den nødvendige typen nummerering. Motvekst er nødvendig for å øke listenummeret med én. Vær oppmerksom på at den samme identifikatoren, kalt element , brukes hele tiden. Den endelige koden er vist i eksempel 3.

                                Eksempel 3: Endre listevisning

                                1. Først
                                2. Sekund
                                3. Tredje
                                4. Fjerde

                                Ved å bruke metoden ovenfor kan du lage en hvilken som helst type nummerert liste, for eksempel sette et tall i hakeparenteser, i dette tilfellet vil bare én linje endres i stilene.

                                Innhold: "[" counter(item) "] ";

                                Liste med russiske bokstaver

                                Det er en nummerert liste med latinske bokstaver, men det er ingen russiske bokstaver for listen. De kan tilsettes kunstig ved å bruke teknikken ovenfor. Siden nummereringen gjøres gjennom stiler, forblir selve listen original, bare den valgte klassen legges til den, la oss kalle den kyrillisk (eksempel 4).

                                Eksempel 4: Kode for å lage en liste

                                1. En
                                2. To
                                3. Tre

                                Å legge til bokstaver gjøres ved å bruke ::before pseudo-elementet og innholdsegenskapen. Siden hver linje må ha sin egen bokstav, vil vi bruke pseudoklassen :nth-child(1) , med bokstavnummeret skrevet i parentes. Den første bokstaven er naturligvis A, den andre er B, den tredje er C, osv. Hele dette settet legges til li-velgeren som følger (eksempel 5).

                                Eksempel 5: Bruke pseudo-class:nth-child

                                Kyrisk li:nth-child(1)::before ( innhold: "a)"; ) .cyrilic li:nth-child(2)::before ( innhold: "b)"; ) .cyrilic li:nth-child(3)::before ( innhold: "at)"; )

                                I dette eksemplet er hver bokstav etterfulgt av en parentes, alle bokstaver er små. Du kan definere din egen type listenummerering, for eksempel kan den inneholde store bokstaver med en prikk, med en eller to parenteser, eller bare bokstaver. I motsetning til standardnummerering står vi fritt til å gjøre hva vi vil her. En liste på ti bokstaver burde være nok for nesten alle situasjoner, men hvis dette plutselig viser seg å ikke være nok, er det ingenting som hindrer oss i å utvide listen til å inkludere i det minste alle bokstavene i det russiske alfabetet.

                                Vi justerer til slutt justeringen og plasseringen av bokstavene, spesifiser eventuelt skriftstørrelse, farge og andre parametere (eksempel 6).

                                Eksempel 6. Liste med russiske bokstaver

                                1. Borsch
                                2. Gjeddekoteletter
                                3. Kulebyaka
                                4. Sopp i rømme
                                5. Pannekaker med kaviar
                                6. Kvass

                                Resultat dette eksemplet vist i fig. 3.