En av listtyperna som implementeras i HTML är punktlista. Annars kallas listor av denna typ för onumrerade eller oordnade. Efternamnet används ofta som en formell översättning av namnet på motsvarande tagg

, med hjälp av vilka listor av denna typ organiseras i HTML-dokument (UL - Unordered List, unordered list).

I en punktlista används specialtecken som kallas listmarkörer för att markera dess element (de kallas ofta bullets, vilket är det formella uttalet av den engelska termen bullet). Utseendet på listmarkörer bestäms av webbläsaren, och när du skapar kapslade listor diversifierar webbläsare automatiskt utseendet på markörer på olika kapslingsnivåer.

Taggar

Och

För att skapa en punktlista måste du använda en containertagg, i vilken alla element i listan finns. De inledande och avslutande listtaggarna ger en radbrytning före och efter listan, vilket skiljer listan från dokumentets huvudinnehåll, så det finns inget behov av att använda paragraftaggar här


.

Varje listelement måste börja med en tagg

• (LI - Listobjekt, listelement). Märka
• kräver inte en motsvarande stängningsbricka, även om dess närvaro i princip inte är förbjuden. Webbläsare startar vanligtvis varje gång de visar ett dokument. nytt element lista från en ny rad.

  Den information som tillhandahålls är tillräcklig för att skapa en grundläggande punktlista. Låt oss ge ett exempel på ett HTML-dokument som använder en punktlista, vars visning av webbläsaren visas i fig. 2.1.

  Stjärntecken:

  • Väduren

  • Oxen

  • tvillingar

  • Jungfrun

  • Vågar

  • Skorpion

  • Skytten

  • Stenbocken

  • Vattumannen

  • Fisk

  Ris. 2.1. Webbläsarvisning av punktlista

  Observera att förutom listan element markerade med taggen

• , kan andra HTML-element finnas. I exemplet ovan är ett av dessa element vanlig text, som inte är ett listobjekt, utan fungerar som dess titel.

  Notera

  Vissa läroböcker i HTML-språket anger att en containertagg ska användas för att ställa in listtiteln (LH - Listhuvud, listhuvud). Den här taggen känns för närvarande inte igen av några vanliga webbläsare och är inte en del av HTML-specifikationen. Därmed blir dess användning meningslös, även om det inte kommer att leda till några fel.

  I taggen

  två parametrar kan anges: COMPACT och TYPE.

  COMPACT-parametern skrivs utan värde och används för att indikera för webbläsaren att denna lista bör presenteras i en kompakt form. Till exempel kan typsnittet eller avståndet mellan listrader etc. minskas.

  Notera

  För närvarande, närvaron av COMPACT-parametern i taggen

  påverkar inte på något sätt visningen av listor i ledande webbläsare. Därför ansökan denna parameterär meningslöst, särskilt eftersom dess användning inte rekommenderas av HTML 4.0-specifikationen.

  Parametern TYPE kan ha följande värden: skiva, cirkel och kvadrat. Den här parametern används för att tvinga fram uppkomsten av listpunkter. Den exakta typen av markör beror på vilken webbläsare du använder. Typiska visningsalternativ är följande:

  TYPE = skiva - markörer visas som fyllda cirklar; TYP = cirkel - markörer visas som öppna cirklar; TYP = fyrkant - markörer visas som fyllda rutor. Exempelinlägg:

  .

  Standardvärdet är TYPE = skiva. För kapslade punktlistor är standardvärdet skiva på första nivån, cirkel på andra nivån, kvadrat på tredje nivån och därefter. Detta är precis vad som görs i senaste versionerna Netscape webbläsare och Internet Explorer. Observera att andra webbläsare kan visa markörer annorlunda. Till exempel i HTML-specifikationer 4.0 för den typ av markör som visas med värdet TYPE = kvadrat, en ofylld ruta (fyrkantig kontur) indikeras.

  Parametern TYPE med samma värden kan användas för att specificera typen av markörer för individuella listelement. För att göra detta tillåts parametern TYPE med motsvarande värde specificeras i listelementtaggen

  • .

    Exempelinlägg:

  • .

    Notera

    Webbläsare tolkar punkttypspecifikationen för ett enskilt listobjekt på olika sätt. Netscape-webbläsaren ändrar utseendet på markören för denna och alla efterföljande tills nästa omdefiniering av markörens utseende påträffas. Webbläsare Utforskaren ändrar bara utseendet på markören för detta element.

    Grafiska listmarkörer

    Du kan använda grafiska bilder som listpunkter, vilket används ofta för att skapa attraktiva, väldesignade HTML-dokument. I själva verket ges en sådan möjlighet inte direkt HTML-språk, men implementeras något artificiellt. Detta betyder inte att det inte är rekommenderat eller förkastligt att göra det, utan bara att inga speciella HTML-språkkonstruktioner kommer att användas här.

    För att förstå idén måste du förstå mekanismen för att implementera listor på HTML-sidor. Det visar sig att listan taggen

    (som, faktiskt, lista taggar av andra typer, diskuterade nedan) utför en enda uppgift - den talar om för webbläsaren att all information som finns efter denna tagg ska visas förskjuten till höger (indragen) med ett visst belopp. Taggar
    • , pekar på enskilda listelement, ger utdata standardmarkörer lista element.

      Om vi ​​behöver bygga en lista med grafiska markörer så klarar vi oss helt utan taggar

    • . Det räcker med att infoga den önskade grafiska bilden före varje element i listan. Det enda problemet som behöver lösas är att separera listelementen från varandra. Du kan använda stycketaggar för detta

      Eller tvinga fram en radmatning
      . Ett exempel på att implementera en lista med grafiska markörer, vars visning visas i fig. 2.2 visas nedan:

      som endast kommer att sändas en gång. Filstorlekarna för en liten bild är också extremt små.

      Notera

      Metoder för att skapa listor med grafiska kulor diskuteras i tur och ordning i kapitel 8.

      
      

      Huvudsakliga användningsområden för listor:

      Numrerad - för att lista element som följer i en strikt definierad ordning.

      Punktlista - för att lista element i slumpmässig ordning.

      Multi-level - för att specificera informationen för vissa element.

      Lista över definitioner - används för att formatera ordböcker.

      Numrerad lista HTML-sida

      Taggar används för att skapa numrerade listor

      1. Märka

         Märka

         1. Som standard är listobjekt numrerade i ordning 1, 2, 3... Med hjälp av TYPE-attributet kan du ändra numreringsstilen.

            Värdenumrering TYP A A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..

            Om du redan lägger till befintlig lista nya värden kommer webbläsaren automatiskt att räkna om det.

            Med STARTVÄRDE-attributen kan du ändra numreringsordningen för listan.

            START - tjänar till att ange startnumret för listan, som skiljer sig från 1.

            VÄRDE - gör det möjligt att tilldela ett godtyckligt nummer till valfritt element i listan.

            Exempel:

            Punktlista HTML-sida

            Taggar används för att skapa punktlistor

            Märka

            Början/slutet av hela listan är markerad.

            Märka

            • ange början/slutet av ett enskilt listelement.

              Som standard är listobjekt markerade med en svart cirkel. Attributet TYPE kan användas för att ändra märkningsstilen.

              Inom en lista kan du använda olika markeringar för listelement.

              Exempel:

              Flernivålista HTML-sida

              För att skapa listor på flera nivåer kan du använda antingen punktlistor eller numrerade listor, eller en kombination av båda. En lista på flera nivåer skapas genom att kapsla en lista i en annans brödtext. Huvuduppgiften är att inte bli förvirrad. För att göra detta råder jag dig att göra olika indrag för enskilda listor.

              Listor över html-sidedefinitioner

              Tre taggar används för att skapa listor med definitioner:

              - start/slut på listan.

              - början/slutet av en specifik termin.

              - början/slutet av termens förklarande artikel.

              Taggar

              Och

              det är inte nödvändigt att alternera. De där. Du kan "länka" flera termer till en definition och vice versa.

              Exempel:

              HTML-kod: Termin 1 Sammanfattning 1 till termin 1 Sammanfattning 2 till termin 1

              Webbläsarvisning: Termin 1 Sammanfattning 1 till termin 1 Sammanfattning 2 till termin 1

              Eftersom vissa stilar på den här sidan tillämpas på vissa element, är deras visning i tabellen något annorlunda än vad du kommer att få.

              HTML-listor används för att gruppera relaterad information. Det finns tre typer av listor:

              punktlista —

              - varje element i listan
              • markerad med en markör,
                numrerad lista —
                - varje element i listan
                1. markerade med ett nummer
                   lista över definitioner- - består av termpar
                   —
                   definition.

                   Varje lista är en behållare inom vilken listelement eller termdefinitionspar finns. Listelement beter sig som blockelement, staplade under varandra och upptar behållarblockets hela bredd. Varje listobjekt har ett extra block placerat på sidan, som inte deltar i layouten.

                   Skapa HTML-listor

                   1. Punktlista

                   Punktlistaär en oordnad lista (från engelsk överordnad lista). Skapat med en parad tagg

                   . Markören för ett listelement är en etikett, till exempel en fylld cirkel.

                   Webbläsare lägger som standard till följande formatering i listblocket:

                   Varje listelement skapas med hjälp av en parad tagg

                2. (från engelsk lista).
                tillgängliga .
                • Microsoft
                • Google
                • Äpple
                Ris. 1. Punktlista

                2. Numrerad lista

                Numrerad lista skapas med en parad tagg. Varje listobjekt skapas också med hjälp av elementet

              • . Webbläsaren numrerar elementen i ordning automatiskt, och om du tar bort ett eller flera element i en sådan lista kommer de återstående siffrorna att automatiskt räknas om.

                Listblocket har också standard webbläsarstilar:

              • Värdeattributet är tillgängligt, vilket gör att du kan ändra standardnumret för den valda listposten. Till exempel om för det första objektet i listan du ställer in
              • , då kommer den återstående numreringen att räknas om i förhållande till det nya värdet.

                För tagg

                Följande attribut är tillgängliga:
                Tabell 1. Taggattribut

                Attribut	Beskrivning, accepterat värde
                omvänt	Det omvända attributet gör att listan visas i omvänd ordning (till exempel 9, 8, 7...).
                Start	Startattributet anger det initiala värdet från vilket numreringen börjar, till exempel en konstruktion den första artikeln kommer att tilldelas serienumret "10". Du kan också ange numreringstypen samtidigt, t.ex. .
                typ	Type-attributet anger vilken typ av markör som ska användas i listan (bokstäver eller siffror). Godkända värden: 1 — standardvärde, decimalnumrering. A — listnumrering i alfabetisk ordning, stora bokstäver(A, B, C, D). a — listnumrering i alfabetisk ordning, små bokstäver (a, b, c, d). I - numrering i romerska huvudsiffror (I, II, III, IV). i — numrering i romerska gemener (i, ii, iii, iv).

                1. Microsoft
                2. Google
                3. Äpple
                Ris. 2. Numrerad lista

                3. Lista över definitioner

                Listor med definitioner skapas med en tagg

                . För att lägga till en term, använd en tagg
                , och för att infoga en definition - taggen
                .

                Definitionslistblocket har följande standard webbläsarstilar:

                För taggar

                ,

                Och

                tillgängliga .

                Direktör:

                Peter Tochilin

                Kasta:

                Andrey Gaidulyan

                Alexey Gavrilov

                Vitaly Gogunsky

                Mariya Kozhevnikova

                Ris. 3. Lista över definitioner

                4. Kapslad lista

                Ofta räcker inte möjligheterna med enkla listor; till exempel när du skapar en innehållsförteckning finns det inget sätt att göra utan kapslade objekt. Markeringen för den kapslade listan skulle vara följande:

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

                
                Ris. 4. Kapslad lista

                5. Numrerad lista på flera nivåer

                En flernivålista används för att visa listobjekt på olika nivåer med olika indrag. Markeringen för en numrerad lista med flera nivåer skulle vara följande:

                1. paragraf
                2. paragraf
                   1. paragraf
                   2. paragraf
                   3. paragraf
                      1. paragraf
                      2. paragraf
                      3. paragraf
                   4. paragraf
                3. paragraf
                4. paragraf

                Denna standarduppmärkning skapar en ny numrering för varje kapslad lista, som börjar med en. För att skapa kapslad numrering måste du använda följande egenskaper:
                counter-reset återställer en eller flera räknare, som specificerar värdet som ska återställas;
                counter-increment anger räknarens inkrementvärde, dvs. i vilka steg varje efterföljande artikel kommer att numreras;
                innehåll — genererat innehåll, in I detta fall ansvarar för att visa numret före varje listobjekt.

                Ol ( /* ta bort standardnumreringen */ list-stil: ingen; /* Identifiera räknaren och ge den namnet li. Räknarens värde är inte specificerat - som standard är det 0 */ counter-reset: li; ) li :before ( /* Vi definierar elementet som ska numreras - li. Before-pseudo-elementet indikerar att innehållet som infogas med hjälp av innehållsegenskapen kommer att placeras före listobjekten. Här ställer vi också in värdet på räknarökningen (standard är 1). */ counter-increment: li; / * Content-egenskapen visar numret på listobjektet. counters() betyder att den genererade texten representerar värdena för alla räknare med det namnet. En punkt inom citattecken lägger till en separeringsperiod mellan siffror, och en punkt med ett mellanslag läggs till före innehållet i varje listobjekt */ content: counters(li,".") "."; )
                Ris. 5. Numrerad lista på flera nivåer

              HTML stöder listor med tre olika typer, som var och en har sina egna parametrar:

              • – en numrerad (med siffror eller bokstäver) lista, vars varje element har ett serienummer (bokstav);
                1. – en punktlista (ej numrerad) bredvid varje element som en markör är placerad på (i stället för numeriska eller alfabetiska tecken som anger ett serienummer);

                   • – en definitionslista består av namn/värdepar, inklusive termer och definitioner.

                   Numrerade listor

                   I en numrerad lista infogar webbläsaren automatiskt elementnummer i ordning, med början med ett visst värde (vanligtvis 1). Detta gör att du kan infoga och ta bort listobjekt utan att störa numreringen, eftersom de återstående siffrorna kommer att räknas om automatiskt.
                   Numrerade listor skapas med hjälp av ett blockelement

                   (från den engelska beställda listan - numrerad lista). Bredvid containern
                   för varje listobjekt placeras ett element
                   1. (från det engelska listobjektet - listobjekt). Standard är en numrerad lista med arabiska siffror.
                      Märka
                      har följande syntax:
                      1. element 1
                      2. element 2
                      3. element 3

                      Numrerade listobjekt måste innehålla flera listobjekt, som visas i följande exempel:

                      Exempel: Numrerad lista

                      • Prova själv "

                      Steg-för-steg-instruktion

                      1. Hämta nyckeln
                      2. Sätt in nyckeln i låset
                      3. Vrid nyckeln två varv
                      4. Ta ut nyckeln ur låset
                      5. Öppna dörren

                      Steg-för-steg-instruktion

                      1. Hämta nyckeln
                      2. Sätt in nyckeln i låset
                      3. Vrid nyckeln två varv
                      4. Ta ut nyckeln ur låset
                      5. Öppna dörren

                      Ibland när du tittar på befintliga HTML-koder kommer du att stöta på argumentet typ i element

                      , som används för att ange typen av numrering (bokstäver, romerska och Arabiska siffror och så vidare.). Syntax:

                      Här: typ – listsymboler:

                      • A - stora latinska bokstäver (A, B, C...);
                      • a - latinska små bokstäver (a, b, c...);
                      • I - stora romerska siffror (I, II, III...);
                      • i - små romerska siffror (i, ii, iii...);
                      • 1 - Arabiska siffror (1, 2, 3 . . .) (används som standard).

                      Om du vill att listan ska börja med ett annat tal än 1 bör du ange detta med attributet Start märka

                      .
                      Följande exempel visar en numrerad lista med stora romerska siffror och ett startvärde på XLIX:

                      Numrering kan också startas med attributet värde, som läggs till elementet

                      1. på följande sätt:

                      7. I det här fallet kommer den sekventiella numreringen av listan att avbrytas och från denna punkt börjar numreringen igen, i detta fall från sju.

                         Exempel på attributanvändning värde märka

                      8. , som låter dig ändra numret på ett givet listelement:

                         I det här exemplet skulle "första listobjektet" vara nummer 1, "andra listobjektet" skulle vara nummer 7 och "tredje listobjektet" skulle vara nummer 8.

                         Formatera numrerade listor med CSS

                         För att ändra listnummer bör du använda egenskapen list-stil-typ CSS-formatmallar:

                         Numrerade liststilar

                         Exempel	Menande	Beskrivning
                         a, b, c	lägre alfa	Små bokstäver
                         A, B, C	övre alfa	Stora bokstäver
                         i, ii, iii	lägre-romersk	Romerska siffror med små bokstäver
                         I, II, III	övre-roman	Romerska siffror med versaler

                         Exempel: Tillämpa en CSS-egenskap list-stil-typ

                         Punktlistor

                         Punktlistor liknar i huvudsak numrerade listor, bara de innehåller inte sekventiell numrering av objekt. Punktlistor skapas med hjälp av ett blockelement

                         (från den engelska unordered list - unnumbered list). Varje listelement, som i numrerade listor, börjar med en tagg
                         • . Webbläsaren drar in varje listobjekt och visar automatiskt punkter.
                           Märka
                           har följande syntax:
                           • Första punkten
                           • Andra punkten
                           • Tredje punkten

                           I följande exempel kan du se att en liten markör i form av en fylld cirkel som standard läggs till före varje listobjekt:

                           Inuti en tagg

                           • Det är inte nödvändigt att endast placera text; det är acceptabelt att placera alla delar av strömmande innehåll (länkar, stycken, bilder, etc.)

                             Kapslade listor

                             Vilken lista som helst kan kapslas in i en annan. Inuti ett element
                           • Det är tillåtet att skapa en kapslad lista eller en lista på andra nivån. För att kapsla en lista, beskriv den nya listan inuti elementet
                           • redan befintlig lista. När du kapslar en punktlista i en annan ändrar webbläsaren automatiskt punktstilen för den andra nivån. Vilken lista som helst kan kapslas in i en annan. Följande exempel visar strukturen för en punktlista kapslad i det andra objektet i en numrerad lista.

                             Exempel: kapslade listor

                             • Prova själv "
                             • måndag
                               1. Skicka brev
                               2. Besök hos redaktören
                                  • Att välja ett tema
                                  • Dekorativ design
                                  • Slutrapport
                               3. Kvällsvisning av meddelanden
                             • tisdag
                               1. Revidera schemat
                               2. Skicka bilder
                             • onsdag...
                             • måndag
                               1. Skicka brev
                               2. Besök hos redaktören
                                  • Att välja ett tema
                                  • Dekorativ design
                                  • Slutrapport
                               3. Kvällsvisning av meddelanden
                             • tisdag
                               1. Revidera schemat
                               2. Skicka bilder
                             • onsdag...

                             Formatera punktlistor

                             För förändring utseende listmarkeringsegenskapen ska användas list-stil-typ CSS-formatmallar:

                             Följande exempel visar olika stilar av punktlistor:

                             Exempel: Bullet List Styles

                             • Prova själv "
                             • Kaffe
                             • Kaffe
                             • Kaffe
                             • Kaffe

                             Skiva:

                             • Kaffe
                             • Mjölk

                             Cirkel:

                             • Kaffe
                             • Mjölk

                             Fyrkant:

                             • Kaffe
                             • Mjölk

                             Ingen:

                             • Kaffe
                             • Mjölk

                             Grafiska markörer.

                             I HTML är det möjligt att skapa en lista med grafiska markörer. Det är en sak när listmarkörerna är standardcirklar eller fyrkanter, och en helt annan när utvecklaren själv väljer markören i enlighet med siddesignen. För att göra listobjekt vackra används ofta små bilder.
                             För att ersätta en vanlig markör med en grafisk, byt ut egenskapen list-stil-typ per fastighet list-stil-bild och ange webbadressen till bilden:

                             Exempel: Grafiska markörer

                             • Prova själv "

                             stjärntecken

                             • Oxen
                             • Tvillingarna

                             stjärntecken

                             • Väduren
                             • Oxen
                             • Tvillingarna

                             Listor med definitioner (beskrivningar)

                             Definitionslistor är mycket användbara för att skapa, till exempel, din personliga ordbok över termer. Varje definitionslista har två delar: termen och dess definition.
                             Du lägger hela listan i ett element

                             (från den engelska definitionslistan - definitionslista). Den innehåller taggar

                             (från den engelska Definition Term - ett definierat ord, term) och

                             (från den engelska Definition Description - beskrivning av termen som definieras).
                             Listor med definitioner används ofta i vetenskapliga, tekniska och pedagogiska publikationer och använder dem för att sammanställa ordlistor, ordböcker, uppslagsböcker, etc.

                             Den allmänna strukturen för listan med beskrivningar är som följer:

                             Första terminen

                             Beskrivning av den första termen

                             Andra terminen

                             Beskrivning av den andra termen

                             Följande exempel visar en av möjliga användningsområden lista över definitioner:

                             Exempel: Definitionslista

                             • Prova själv "

                             World Wide Web - från engelska. World Wide Web (WWW) är ett distribuerat system som ger tillgång till relaterade dokument som finns på olika datorer anslutna till Internet. Internet är en uppsättning nätverk som använder ett enda utbytesprotokoll för att överföra information. En webbplats är en uppsättning individuella webbsidor som är sammanlänkade med länkar och en enhetlig design.

                             World Wide Web

                             - från engelska World Wide Web (WWW) är ett distribuerat system som ger tillgång till relaterade dokument som finns på olika datorer anslutna till Internet.

                             Internet

                             — En uppsättning nätverk som använder ett enda utbytesprotokoll för att överföra information.

                             Hemsida

                             - en uppsättning individuella webbsidor som är sammanlänkade med länkar och en enhetlig design.

                             Som standard trycks termens text till vänster kant av webbläsarfönstret, och beskrivningen av termen finns nedan och flyttas till höger.

                             Numrerade listor är en samling element med deras serienummer. Typen och typen av numrering beror på elementparametrarna

                             , som används för att skapa listan. Följande värden kan fungera som numreringselement:
                             • Arabiska siffror (1, 2, 3, ...);
                             • Arabiska siffror med en inledande nolla för nummer mindre än tio (01, 02, 03, ...,10);
                             • stora latinska bokstäver (A, B, C, ...);
                             • latinska små bokstäver (a, b, c, ...);
                             • stora romerska siffror (I, II, III, ...);
                             • gemener romerska siffror (i, ii, iii, ...);
                             • armenisk numrering;
                             • georgisk numrering.

                             Ur praktisk synvinkel kan principerna för att visa objekt i en punktlista tillämpas på liknande sätt som en numrerad lista. Men med tanke på att vi har att göra med en uppräkning finns det några funktioner som kommer att diskuteras vidare.

                             Listnumrering

                             Det är tillåtet att starta listan från valfritt nummer; elementets startattribut används för detta ändamål

                             eller elementets värde
                             1. . Värdet är vilket positivt heltal som helst. Det spelar ingen roll vilken typ av numrering som ställs in, även om latinska bokstäver används som lista. Om både start- och värdeattributen tillämpas på en lista samtidigt, har den senare företräde och numreringen visas från numret som anges av värdet , som visas i exempel 1.

                                Exempel 1: Ändra listnumreringen

                                4. Du ska ta väl hand om din arbetsplats.
                                5. Justera belysningen i rummet så att ljuskällan är placerad på sidan eller bakom operatören.
                                10. För att undvika medicinska komplikationer rekommenderas det att välja en stol med ett mjukt säte.

                                Det första elementet i listan i det här exemplet börjar med den romerska siffran IV, eftersom attributet start="4" anges, sedan kommer talet V, och det sista elementet kommer ur funktion och tilldelas numret X (Figur 1).

                                Ris. 1. Romerska siffror i listan

                                Skriva siffror

                                Som standard har en numrerad lista ett visst utseende: först finns det ett nummer, sedan en prick, och efter det visas texten avgränsad med ett mellanslag. Denna form av skrivning är visuell och bekväm, men vissa utvecklare föredrar att se ett annat sätt att utforma numreringen av listor. Nämligen så att det i stället för en prick finns ett slutande fäste, som visas i fig. 2 eller något liknande.

                                

                                Ris. 2. Numrerad listvy med parentes

                                Med stilar kan du ändra typen av listnumrering med hjälp av egenskaperna för innehåll och mothöjning. Först måste ol-väljaren ställas in på mot-återställning : item , detta är nödvändigt så att numreringen i varje ny lista börjar på nytt. Annars kommer numreringen att fortsätta och istället för 1,2,3 ser du 5,6,7. Artikelvärdet är en unik identifierare för disken, vi väljer det själva. Därefter måste du dölja de ursprungliga markörerna genom stilegenskapen list-style-type med värdet none .

                                Content-egenskapen fungerar vanligtvis tillsammans med pseudoelementen ::after och ::before. Således säger li::before-konstruktionen att visst innehåll måste läggas till före varje element i listan (exempel 2).

                                Exempel 2. Skapa din egen numrering

                                Li::before ( innehåll: counter(item) ") "; /* Lägg till en parentes till siffrorna */ counter-increment: item; /* Ställ in namnet på räknaren */ )

                                Innehållsegenskapen med värdet räknare(objekt) visar ett nummer; Genom att lägga till en parentes, som visas i det här exemplet, får vi den önskade typen av numrering. motökning behövs för att öka listnumret med en. Observera att samma identifierare, med namnet item , används genomgående. Den slutliga koden visas i exempel 3.

                                Exempel 3: Ändra listvyn

                                1. Först
                                2. Andra
                                3. Tredje
                                4. Fjärde

                                Med metoden ovan kan du göra vilken typ av numrerad lista som helst, till exempel sätta ett nummer inom hakparenteser, i det här fallet kommer bara en rad att ändras i stilarna.

                                Innehåll: "[" counter(item) "] ";

                                Lista med ryska bokstäver

                                Det finns en numrerad lista med latinska bokstäver, men det finns inga ryska bokstäver för listan. De kan tillsättas artificiellt med ovanstående teknik. Eftersom numreringen görs genom stilar, förblir själva listan original, bara den valda klassen läggs till den, låt oss kalla den cyrilic (exempel 4).

                                Exempel 4: Kod för att skapa en lista

                                1. Ett
                                2. Två
                                3. Tre

                                Lägga till bokstäver görs med pseudoelementet ::before och innehållsegenskapen. Eftersom varje rad måste ha sin egen bokstav kommer vi att använda pseudoklassen :nth-child(1) , med bokstavsnumret skrivet inom parentes. Den första bokstaven är naturligtvis A, den andra är B, den tredje är C, etc. Hela denna uppsättning läggs till i li-väljaren enligt följande (exempel 5).

                                Exempel 5: Använda pseudo-class:nth-child

                                Cyrilic li:nth-child(1)::before ( innehåll: "a)"; ) .cyrilic li:nth-child(2)::before ( innehåll: "b)"; ) .cyrilic li:nth-child(3)::before ( innehåll: "at)"; )

                                I det här exemplet följs varje bokstav av en parentes, alla bokstäver är gemener. Du kan definiera din egen typ av listnumrering, till exempel kan den innehålla versaler med en punkt, med en eller två parenteser, eller bara bokstäver. Till skillnad från standardnumrering är vi fria att göra vad vi vill här. En lista med tio bokstäver borde räcka för nästan alla situationer, men om detta plötsligt visar sig inte räcka, hindrar ingenting oss från att utöka vår lista till att omfatta åtminstone alla bokstäverna i det ryska alfabetet.

                                Vi justerar slutligen inriktningen och positionen för bokstäverna, anger eventuellt teckenstorlek, färg och andra parametrar (exempel 6).

                                Exempel 6. Lista med ryska bokstäver

                                1. Borsch
                                2. Gäddkotletter
                                3. Kulebyaka
                                4. Svamp i gräddfil
                                5. Pannkakor med kaviar
                                6. Kvass

                                Resultat detta exempel visas i fig. 3.