Hvilken tag definerer en nummerert liste. Punktliste. Punktlister i HTML

En punktliste defineres ved å legge til et lite punkt, vanligvis i form av en fylt sirkel, før hvert listeelement. Selve listen er dannet ved hjelp av en beholder

, og hvert listeelement begynner med en kode
• som vist under.
  • Første punkt
  • Andre punkt
  • Tredje punkt

  Listen må inneholde en avsluttende kode

, ellers vil det oppstå en feil. Avsluttende tag Selv om det ikke er nødvendig, anbefaler vi alltid å legge det til i klart separate listeelementer.

Eksempel 11.1 viser HTML-koden for å legge til en punktliste på en nettside.

Eksempel 11.1. Lag en punktliste

---

• Cheburashka
• Krokodille Gena
• Shapoklyak
• Rotte Larisa

---

Resultatet av dette eksemplet er vist i fig. 11.1.

Ris. 11.1. Punktlistevisning

Vær oppmerksom på polstringen øverst, nederst og til venstre på listen. Slike innrykk legges til automatisk.

Markører kan ha en av tre former: sirkel (standard), sirkel og firkant. For å velge en markørstil, bruk taggens typeattributt

. Akseptable verdier er gitt i tabellen. 11.1
Bord 11.1. List opp kulestiler

Listetype	HTML-kode	Eksempel
Liste med sirkelkuler		Først Sekund Tredje
Liste med sirkelkuler		Først Sekund Tredje
Liste med firkantede kuler		Først Sekund Tredje

Utseendet til markører kan variere litt i ulike nettlesere, samt når du endrer font og tekststørrelse.

Å lage en liste med firkantede kuler er vist i eksempel 11.2.

Eksempel 11.2. Type markører

Endre tro

• endring i religiøs tro (valgfritt: buddhisme, konfucianisme, hinduisme). Spesialtilbud - jødedom og islam sammen;
• en endring i troen på favorittfestens ufeilbarlighet;
• troen på at romvesener eksisterer;
• preferanse for et politisk system som det beste i sitt slag (å velge mellom: føydalisme, sosialisme, kommunisme, kapitalisme).

Resultatet av dette eksemplet er vist i fig. 11.2.

Lister er en del av hverdagen. Gjøremålslisten definerer hva som gjøres. Navigasjonsruter tilbyr en trinn-for-steg-liste med veibeskrivelser. Oppskrifter krever en liste over ingredienser og en liste med instruksjoner. Lister finnes nesten overalt, så det er lett å se hvorfor de også er populære på Internett.

Når vi ønsker å bruke en liste på et nettsted, tilbyr HTML tre forskjellige typer å velge mellom: punktliste, nummerert og beskrivelsesliste. Hvilken type liste du skal bruke, og om du i det hele tatt skal bruke en liste, avhenger av innholdet og det semantisk mest passende alternativet for å vise den.

I tillegg til de tre forskjellige typene lister som er tilgjengelige i HTML, er det flere måter å style disse listene på via CSS. For eksempel kan vi velge hvilken type kule som skal spesifiseres for listen. Markøren kan være en firkant, en sirkel, et tall, en bokstav eller muligens ingen. I tillegg kan vi bestemme hvordan listen skal vises – vertikalt eller horisontalt. Alle disse alternativene spiller en viktig rolle i stylingen av nettsidene våre.

Punktlister

En punktliste eller uordnet liste er ganske enkelt en liste over relaterte elementer som rekkefølgen ikke betyr noe for. Å lage en punktliste i HTML gjøres ved å bruke et blokklisteelement

. Hvert enkelt element i listen er merket med et element
• .

  Som standard legger de fleste nettlesere til vertikal marg og venstre utfylling til elementet

  , og før hvert element
  • setter et ensfarget punkt. Dette punktet kalles en listemarkør og kan endres ved hjelp av CSS.
    • oransje
    • Grønn
    • Blå

    Vis punktliste

    Nummererte lister

    Nummerert eller bestilt liste over varer

    Svært lik en punktliste, individuelle punktpunkter opprettes på samme måte. Hovedforskjellen mellom lister er at for en ordnet liste spiller rekkefølgen varene presenteres på.

    Fordi rekkefølgen er viktig, bruker en nummerert liste tall i stedet for et punktum som standardpunkt.

    1. Gå langs Apricot Street
    2. Sving inn på Vinogradnaya

    Nummerert listedemonstrasjon

    Nummererte lister har også unike attributter tilgjengelig for dem, inkludert start og reversering.

    start attributt

    Startattributtet spesifiserer nummeret som den nummererte listen skal begynne med. Som standard starter lister på 1, men det kan være situasjoner der listen bør starte på 30 eller et annet tall. Når vi bruker startattributtet på et element

    , så kan vi nøyaktig bestemme fra hvilket tall tellingen av den nummererte listen skal begynne.

    Startattributtet godtar bare heltallsverdier, selv om nummererte lister kan bruke forskjellige nummereringssystemer, for eksempel romertall.

    30. Gå langs Apricot Street
    31. Sving inn på Vinogradnaya
    32. Stopp på Shady Street

    Demonstrasjon av startattributtet

    omvendt attributt

    Det omvendte attributtet når det legges til et element

    lar listen vises i omvendt rekkefølge. En liste med fem elementer nummerert 1 til 5 kan reverseres og nummereres 5 til 1.

    Det omvendte attributtet er et boolsk attributt, og som sådan får det ingen verdi. Det kan være sant eller usant. False er standardverdien, verdien blir sann når det omvendte attributtet vises på elementet

    .
    1. Gå langs Apricot Street
    2. Sving inn på Vinogradnaya
    3. Stopp på Shady Street

    Demonstrasjon av det omvendte attributtet

    verdi attributt

    Verdiattributtet kan brukes på individuelle elementer

    1. i en nummerert liste for å endre verdien i listen. Antallet listeelementer som vises under et listeelement med et verdiattributt, vil bli beregnet på nytt tilsvarende.

       For eksempel, hvis det andre listeelementet har et verdiattributt satt til 9, vil nummeret til det listeelementet bli utgitt som om det var det niende. Alle påfølgende listeelementer vil bli nummerert fra og med 9.

       1. Gå langs Apricot Street
       9. Sving inn på Vinogradnaya
       10. Stopp på Shady Street

       Demonstrasjon av verdiattributt

       Beskrivelse Lister

       En annen type liste du vil se på nettet (men ikke så ofte som punktlister eller nummererte lister) er beskrivelseslisten. Slike lister brukes til å identifisere flere termer og deres beskrivelser, som for eksempel i en ordliste.

       Å lage en beskrivelsesliste i HTML gjøres ved hjelp av et blokkelement

       . I stedet for å bruke elementet

       For å merke opp listeelementer krever en beskrivelsesliste to blokkelementer:

       for terminen og

       for beskrivelse.

       En beskrivelsesliste kan inneholde mange termer og beskrivelser, etter hverandre. I tillegg kan en slik liste inneholde flere termer per beskrivelse, samt flere beskrivelser per term. Ett begrep kan ha flere betydninger og være gjenstand for flere beskrivelser. Omvendt kan én beskrivelse passe til flere begreper.

       Når du legger til et beskrivelseslisteelement

       må gå til elementet

       . Begrepet og beskrivelsen som følger umiddelbart er relatert til hverandre. Derfor er rekkefølgen på disse elementene viktig.

       Som standard, element

       inkluderer vertikal polstring, som elementer

       Og
       . I tillegg kommer elementet
       inkluderer venstre marg som standard.
       studier
       Vie tid og oppmerksomhet til å få kunnskap om emnet som undervises, spesielt gjennom bøker.
       prosjekt
       En innsendt plan eller tegning som viser hvordan en bygning, klær eller annen gjenstand vil se ut og fungere før den bygges eller lages.
       Eksisterende mål, planer eller intensjoner før de er nedfelt eller realisert i et konkret objekt.
       virksomhet
       Jobb
       En persons vanlige yrke, yrke eller håndverk.
       Beskrivelse Liste Demonstrasjon
       Nestede lister
       Funksjonen som gjør lister veldig kraftige er hekkefunksjonen. Hver liste kan nestes i en annen liste, og de kan nestes flere ganger. Men muligheten til å hekke lister i det uendelige gir deg ikke friheten til å gjøre det. Lister bør reserveres spesielt der de har den mest semantiske betydningen.
       Trikset med å hekke lister er å vite hvor hver liste og listeelement begynner og slutter. Snakker spesifikt om punktlister og nummererte lister, det eneste elementet som kan vises direkte inni
       Og
       er et element
       1. . La oss gjenta - det eneste elementet vi kan sette som en direkte etterkommer av elementene
          Og
          , er
          1. .

             Imidlertid inne i elementet

          2. et standard sett med elementer kan legges til, inkludert alle elementer
             eller
             .

             For å neste en liste, start en ny liste før du lukker listeelementet. Når den nestede listen er fullført og lukket, lukker du det vedlagte listeelementet og fortsetter med den opprinnelige listen.

             1. Gå tur med hunden
             2. Brett tøyet
             3. Gå til butikken og kjøp:
                • Melk
                • Brød
                • Ost
             4. Klipp plenen
             5. lage middag

             Demonstrasjon av nestede lister

             Siden nestede lister kan være litt forvirrende og vise uønskede stiler hvis de gjøres feil - la oss ta en rask titt på dem. Elementer

             Og
             kan bare inneholde elementer
             1. . Element
             2. kan inneholde hvilket som helst vanlig element du ønsker. Imidlertid elementet
             3. må være en direkte etterkommer av begge elementene
                , eller
                .

                Det er også verdt å merke seg at når lister er nestet inne i andre lister, vil markørene deres endres avhengig av dybden på hekkingen. I forrige eksempel bruker en punktliste som er nestet i en nummerert liste en sirkel i stedet for en prikk som markører. Denne endringen skjer fordi punktlisten er nestet ett nivå i den nummererte listen.

                Heldigvis kan vi kontrollere hvordan kulepunkter ser ut på et hvilket som helst nivå, som vi skal se på neste gang.

                Stylinglisteelementer

                Punkt- og nummererte lister bruker listeelementpunkter som standard. For punktlister pleier disse å være ensfargede prikker, mens for nummererte lister har disse en tendens til å være tall. Ved å bruke CSS kan stilen og plasseringen til disse markørene tilpasses.

                liste-stil-type eiendom

                Liste-stil-type-egenskapen brukes til å angi innholdet i listeelementmarkøren. Tilgjengelige verdier spenner fra kvadrater og desimaler til armensk nummerering og CSS-stil kan legges til elementer

                ,
                eller
                1. .

                   En hvilken som helst verdi for egenskapen listestil kan legges til i en punktliste eller nummerert liste. Med dette i tankene kan du bruke nummerering i en punktliste og ikke-numeriske punkt i en nummerert liste.

                   • oransje
                   • Grønn
                   • Blå

                   Ul ( liste-stil-type: kvadrat; )

                   Demonstrasjon av egenskapen listestil-type

                   liste-stil-type verdier

                   Som nevnt tidligere inneholder egenskapen listestil-type en håndfull forskjellige verdier. Følgende tabell viser disse verdiene og deres tilsvarende innhold.

                   Bruke et bilde som en listemarkør

                   Det kan komme en tid da standardverdiene for egenskapen listestil-type ikke er nok, og vi ønsker å definere vår egen listemarkør. Dette gjøres oftest ved å plassere et bakgrunnsbilde for hvert element.

                2. .

                   Prosessen innebærer å fjerne enhver standard listestil-type egenskapsverdi og legge til et bakgrunnsbilde og marger til elementet

                3. .

                   Flere detaljer - ved å sette egenskapen listestiltype til ingen vil eksisterende listemarkører fjernes. Bakgrunnsegenskapen vil angi bakgrunnsbildet sammen med posisjonen og gjenta om nødvendig. Og padding-egenskapen vil gi plass til venstre for teksten for bakgrunnsbildet.

                   • oransje
                   • Grønn
                   • Blå

                   Li (bakgrunn: url("arrow.png") 0 50% no-repeat; liste-stil-type: ingen; polstring-venstre: 12px; )

                   Viser et bilde som en markør

                   liste-stil-posisjon eiendom

                   Som standard er listepunkter plassert til venstre for innholdet i elementet

                4. . Denne posisjoneringsstilen beskrives som utenfor , noe som betyr at alt innhold vil vises direkte til høyre, utenfor listemarkøren. Med egenskapen list-style-posisjon kan vi endre standardverdien for outside til inside eller arve .

                   utenfor plasserer listemarkøren til venstre for elementet

                5. og ikke la noe innhold flyte under denne markøren. Innerverdien (som sjelden brukes og kan sees) plasserer listemarkøren på den første linjen i elementet
                6. og lar innholdet vikle rundt markøren om nødvendig.
                   • Muffins...
                   • Dryssing...

                   Ul ( liste-stil-posisjon: inne; )

                   Demonstrasjon av eiendom i listestil-posisjon

                   Generisk eiendomsliste-stil

                   Listeegenskapene vi nylig diskuterte, listestil-type og listestil-posisjon , kan kombineres til én generisk egenskap, listestil . I denne egenskapen kan vi bruke én eller alle listeegenskapsverdiene samtidig. Rekkefølgen på disse verdiene skal være: liste-stil-type etterfulgt av liste-stil-posisjon .

                   Ul ( liste-stil: sirkel inni; ) ol ( liste-stil: lavere-romersk; )

                   Horisontal listevisning

                   Noen ganger ønsker vi å vise lister horisontalt i stedet for vertikalt. Kanskje vi ønsker å dele listen i flere kolonner for å bygge en navigasjonsliste eller plassere flere listeelementer i en rad. Avhengig av innhold og ønsket utseende, er det flere måter å vise lister på som en enkelt linje, for eksempel ved å ta verdien av visningsegenskapen på elementene

                7. som inline eller inline-block eller via float-egenskapen.

                   Listevisning

                   Den raskeste måten å vise en liste på én linje er å gi elementene

                8. vise egenskap med verdien inline eller inline-block . Dette vil sette alle elementene
                9. på én linje med lik avstand mellom hvert listeelement.

                   Hvis mellomrommene mellom elementene

                10. forårsaker problemer, kan de fjernes ved å bruke de samme teknikkene som vi diskuterte i leksjon 5, Plassering av innhold.

                    Mye oftere vil vi bruke inline-block-verdien i stedet for inline-verdien. Inline-blokkverdien gjør det enkelt å legge til vertikal polstring og annen plass til elementer

                11. , mens den innebygde verdien ikke gjør det.

                    Når verdien til visningsegenskapen endres til inline eller inline-block , fjernes listemarkøren, enten en prikk, tall eller annet.

                    • oransje
                    • Grønn
                    • Blå

                    Li (display: inline-block; margin: 0 10px; )

                    Demonstrasjon av en liste med inline-blokk

                    Lister med flyte

                    Det er raskt å endre visningsegenskapen til inline eller inline-blokk, men det fjerner listemarkørene. Hvis de er nødvendige, kan du legge til en flottør til hvert element

                12. er et bedre alternativ enn å endre visningsegenskapen.

                    Montering for alle elementer

                13. flyteegenskaper som venstre vil justere alle elementer horisontalt
                14. rett ved siden av hverandre uten hull mellom dem. Når vi bruker flyte for
                15. , vises listemarkøren som standard og vil bli plassert på toppen av elementet
                16. ved siden av han. For å forhindre at listemarkøren vises på toppen av andre elementer
                17. , horisontal marg eller polstring må legges til.
                    • oransje
                    • Grønn
                    • Blå

                    Li ( flyte: venstre; marg: 0 20px; )

                    Demonstrasjon av en liste med flyte

                    Som med alle flytende elementer, bryter dette flyten på siden. Vi må ikke glemme å tømme float og returnere siden til normal flyt – den vanligste metoden er via clearfix.

                    Eksempel på navigasjonsliste

                    Vi designer og finner ofte navigasjonsmenyer som bruker uordnede lister. Disse listene er vanligvis lagt ut horisontalt ved å bruke en av de to metodene nevnt tidligere. Her er for eksempel en horisontal navigasjonsmeny lagt opp ved hjelp av en uordnet liste, der elementene

                18. vises som inline-blokk.

                    Navigasjon ul ( font: fet 11px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; utfylling: 0; teksttransformasjon: store bokstaver; ) .navigation li (display: inline-block; ) .navigation a ( bakgrunn: #395870; lineær-gradient(#49708f, #293f50: 1px solid rgba(0, 0, .3); bakgrunn: #314b60; box-shadow: innfelt 0 0 10px 1px rgba(0, 0, 0, .3); siste barn a (kant-høyre: 0; kant-radius: 0 4px 4px 0; )

                    Navigasjonsliste demonstrasjon

                    På praksis

                    Nå som vi vet hvordan vi lager lister i HTML og CSS, la oss ta en titt på stilkonferansesiden vår og se hvor vi kan bruke lister.

                    Nå navigasjonsmenyer i elementer

                    Og