Riktig nummerering i HTML nestede nummererte lister ved hjelp av CSS. Styling lister i CSS Standard kuler for punktlister

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

– 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 engelsk listeelement - listeelement). Standard er en nummerert liste med arabiske tall.
stikkord

element 1
element 2
element 3

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

Eksempel: Nummerert liste

Prøv selv"

Trinn-for-steg instruksjon

Få nøkkelen
Sett nøkkelen inn i låsen
Vri nøkkelen to omdreininger
Få nøkkelen ut av låsen
Åpne døren

Trinn-for-steg instruksjon

Få nøkkelen
Sett nøkkelen inn i låsen
Vri nøkkelen to omdreininger
Få nøkkelen ut av låsen
Åpne døren

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

Arabiske tall

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

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

på følgende måte:
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

, 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

. Nettleseren rykker inn hvert listeelement og viser automatisk kuler.
stikkord

Første punkt
Andre punkt
Tredje punkt

I følgende eksempel kan du se at en liten markør i form av en fylt sirkel som standard legges til 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 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.

Når det er nødvendig å nummerere noe på en nettside, brukes oftest en ordnet liste (

Pseudoelementet:before brukes til å vise ønsket innhold før elementet det legges til. Fungerer sammen med innholdsegenskapen.

Det er imidlertid verdt å gjøre det klart at nummererte tellere kan brukes på mer enn bare ordnede lister. Anta for eksempel at du ønsket å nummerere en liste med definisjoner (

element er et nytt spørsmål, så vi bruker nummerering på dem. Det vil se ekstremt enkelt ut:

Innholdsegenskapen lar deg sette inn generert innhold i teksten på en nettside som ikke opprinnelig er til stede i teksten.
tellerverdi Skriver ut verdien til telleren spesifisert av egenskapen for tilbakestilling av teller.
Teller-reset-egenskapen setter en identifikator for telleren og setter startverdien.
Egenskapen counter-increment spesifiserer trinnet som tellerverdien økes med.

Faq ( counter-reset: my-badass-counter; ) .faq dt:before ( innhold: teller(my-badass-counter); counter-increment: my-badass-counter; )
Pseudoelementet :before kan tildeles hvilken som helst stil. For eksempel:

Etter å ha mestret denne egenskapen, kan du nummerere hva du vil. Her om dagen la jeg for eksempel ut en av favorittoppskriftene mine og nummererte hvert trinn/bilde med romertall. Dette fungerte som en påminnelse for meg: tall trenger ikke være desimaler.

Den numeriske varianten er representert som verdier for egenskapen listestil.
Nemlig:

Alt som kreves er å angi ønsket alternativ i tellerverdien.

Innhold: teller(min-teller, lavere-romersk);
Fremtiden til CSS3

Materialet ovenfor er relevant for i dag, men det blekner i forhold til mulighetene som er skjult i CSS3-lister. Når nettlesere støtter dem, vil det for eksempel være mulig å jobbe med listemarkører direkte.

Li::marker ( width: 30px; text-align: right; margin-right: 10px; display: inline-block; ) ol ( list-style: symbols("*""2020""2021""A7"); ) ul ( liste-stil-type: "det skal være en stjerne her)"; )

Hvis du noen gang har prøvd å endre CSS-stiler for linjenumre (siffer) i ordnede lister
, da har du sannsynligvis støtt på problemer. Det er umulig å nå stilene til disse elementene ved å bruke CSS-velgere. Men ganske ofte innebærer grensesnittdesign å endre farge, bakgrunn, størrelse osv.

Her er det enkleste eksemplet på en ustilt liste:

html

Å plante et tre

Bygg et hus

Oppdra en sønn

La oss se på flere måter å løse problemet ovenfor.

Tradisjonelt en klønete måte.

Den tradisjonelle måten å løse dette problemet på er å skjule linjenumrene som automatisk tildeles av nettleseren. I dette tilfellet brukes listestilen: ingen;-egenskapen. .

css
li( listestil: ingen; ) .num( farge: hvit; bakgrunn: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px;)
html

1Å plante et tre

2 Bygg et hus

3 Oppdra en sønn

Enig, det ser overflødig og lite fleksibelt ut. Vi skjuler automatisk plasserte sekvensnumre og erstatter dem med manuelt spesifiserte verdier, roter oppsettet osv.

La oss se hvordan vi kan oppnå det samme resultatet uten å blokkere oppsettet og bruke pseudo-elementet::before og CSS-egenskapene content , counter-increment , counter-reset .

En vakker og riktig måte.

Først vil vi gi koden og demoen, og deretter vil vi finne ut hva som er hva.

css
ol( counter-reset: myCounter; ) li( liste-stil: ingen; ) li:before ( counter-increment: myCounter; content:counter(myCounter); farge: hvit; bakgrunn: #2980B9; display: inline-block; tekstjustering: senter; marg: 5px 10px; linjehøyde: 40px; bredde: 40px; høyde: 40px; )
html

Å plante et tre

Bygg et hus

Oppdra en sønn

Som du kan se, forblir html-koden ren og vakker. I dette tilfellet overføres all styling av listeelementene til css.

La oss se punkt for punkt:

li::før– oppretter et pseudo-element i listen, som tar plassen til det første barnet.

counter-reset:myCounter;– tilbakestiller myCounter css-telleren inne i hver
.
counter-increment: myCounter;– øker css-telleren myCounter for hvert pseudo-element::før .

content:counter(myCounter);– skriver ut gjeldende verdi av myCounter-telleren inne i::before-pseudo-elementet.

Mer informasjon om css-tellere finner du i

Ganske ofte må du bruke nummerering: når du lager forskjellige lister, lister, designer en innholdsfortegnelse eller innholdsfortegnelse, etc.

CSS bruker tellere for å automatisere nummereringsprosessen.

La oss starte med et enkelt eksempel. Deretter, på en mer komplisert måte, lager vi en nestet liste med automatisk nummerering av elementene og underelementene.

Måleridentifikasjon

Først må du identifisere måleren.

Ved å bruke counter-reset-egenskapen blir telleren tildelt et navn og en startverdi. Navnet kan være hva som helst, men kan ikke begynne med et tall.

Kodebit:

Denne oppføringen sier det for taggen en teller med navn med en startverdi på 3 er installert.

Som standard er startverdien til telleren 0.

Tellerøkning

Motveksegenskapen brukes til dette. Den brukes også til å spesifisere tellerinkrementer - tallet som tellerverdien vil øke med.

Kodebit:

body (mot-tilbakestilling: nummer 3 ;)
body p (motøkning: nummer 3 ; }

Denne kodebiten sier at avsnitt ( stikkord
) i hoveddelen av dokumentet vil nummereres med talltelleren i trinn på 3.

Det første avsnittet vil være nummerert 6, siden startverdien til telleren er 3 og økningen er 3.

Standardverdien for tellerinkrementer er 1.

Nå er alle nødvendige tellerparametere satt: navn, startverdi, inkrement og element som skal nummereres. Lengre....

Tellerdisplay

Nå må du vise tellerverdien og angi reglene for plasseringen. Dette gjøres ved å bruke innholdsegenskapen og pseudoelementene før og etter.

Innholdsegenskapen setter inn innholdet før ( før) eller etter ( etter) av det angitte elementet.

Kodebit:

body (mot-tilbakestilling: nummer 3 ;)
body p:after (motøkning: nummer 3 ; content : " er lik " teller(tall) "." ;)

Så til den forrige kodebiten la vi til en innholdsegenskap som skriver ut ordet "lik" etterfulgt av verdien av tellernummeret og en prikk "." . Alt dette settes inn på siden etter avsnittsinnholdet ( stikkord
), som er det etter pseudo-elementet sier.

Etter hvert...

Nedenfor er det beskrevne eksemplet.

Kodebit:

2 ganger 3

3 ganger 3

4 ganger 3

5 ganger 3

Resultat:

Nestede lister med automatisk nummerering

La oss se på et eksempel på bruk av tellere for å automatisere prosessen med å nummerere nestede lister.

Du bør allerede vite, både fra HTML og fra å studere lister i CSS, at listeelementer nummereres automatisk. Men denne nummereringen er den enkleste.

Hva med automatisk nummerering av underklausuler som 1.1, 1.2, 2.1, 2.2 osv.?

Dette problemet løses ved å bruke tellere som lar deg automatisere prosessen med å nummerere nestede lister.

Kodebit:

Automatisk nummerering i CSS

Første listeelement

Første ledd i paragraf 1

1. ledd annet ledd

Andre listeelement

Første ledd i paragraf 2

2. ledd annet ledd

Tredje element på listen

Første ledd i nr. 3

3. ledd annet ledd

3. ledd tredje ledd

Resultat:

Slik automatiserer du prosessen med å nummerere nestede lister!

God dag!

I denne artikkelen vil du lære om alle mulighetene til lister, forstå hvordan du lager en nummerert liste, og mestre tagger som vil hjelpe deg å gjøre en enkel punktliste til en mer interessant og merkbar med vilkårlige kuler. Etter å ha fullført leksjonen vil du ha en forståelse av hvor lister brukes og under hvilke omstendigheter de kan brukes.

Denne artikkelen er den tredje i dette korte kurset om grunnleggende HTML. Før du leser denne leksjonen, anbefaler jeg å gå gjennom de to foregående:

Artikkelen har nettopp begynt, og du kan allerede merke bruken av en standard punktliste. På nettstedet mitt ser det ganske enkelt ut: til venstre er det et lite innrykk med en linje og en firkantet markør. Senere i artikkelen vil vi se i detalj på hvilke typer markører som finnes, hvordan du lager tall, og også hvordan du lager din egen markør.

I hver del av artikkelen vil opprettelsen av visse lister være ledsaget av detaljerte forklaringer for å sette inn en bestemt liste.

1. Punktlister i HTML

Denne typen liste brukes til å liste opp i teksten et sett med elementer med lignende betydninger. Dette kan være en liste over lenker som er relatert til samme emne, detaljert forklaring for enkeltdeler av teksten. Men la oss se hvordan punktlister ser ut i kode:

Og slik ser det ut i nettleseren:
Ris. 1.1. Standardvisning av HTML-punktliste i uordnet liste i nettleseren
1.1 Standard kuler for punktlister

På bildet over (Figur 1.1.) kan du se sirklene i begynnelsen av hvert menyelement. Dette er markøren. Som standard vises den som en fylt sirkel i nettleseren. Det finnes flere typer markører i HTML: fylt sirkel, tom sirkel og firkant. De krever ingen CSS eller tredjepartsbilder:

1.2 Listemarkør i form av en tom sirkel

Du kjenner attributtverdiene, men la oss nå se hvordan du lager en HTML-punktliste i kode. Fra tabellen ovenfor valgte vi den andre verdien "sirkel" for typeattributtet og satte den til vår punktliste:

<html > <hodet > <tittel > Eksempel på en punktliste med en tom sirkelmarkør</tittel> </hode> <kroppen > Stjerner: <ul type = "sirkel" > <li > Sirius</li> <li > Arcturus</li> <li > Pollux</li> <li > Betelgeuse</li> <li > Sol</li> </ul> </body> </html>
La oss umiddelbart se hvordan denne koden vil se ut i nettleseren:
Ris. 1.2. Visning av en listemarkør som en sirkel i nettleseren
1.3 Listemarkør i form av en firkant

La oss også se på det siste eksemplet med en firkantet markør for en HTML-liste:

Vær oppmerksom på markøren, den har blitt firkantet:
Ris. 1.3. Visning av en listemarkør som en firkant i nettleseren
Viktig notat: Denne metoden brukes ikke lenger til å lage stiler for punktlister. Det er et klart skille mellom CSS (les hva CSS er) og HTML. HTML er for markering og CSS er for å skape et attraktivt utseende.

Koden som inneholder dette attributtet når du spesifiserer gjeldende dokumenttype som HTML5 (""), vil gi en feilmelding under validering. Hvis du ikke har hørt hva validering er, er dette stedet for deg.

Feilen vil være som følger:
Ris. 1.4. Feil på validatoren ved bruk av "type"-attributtet til en liste
Vi har sortert ut punktlistene. La oss nå gå videre til nummererte lister, og så se på nestede lister og flere ferdige eksempler, som brukes oftest på ekte nettsteder.

2. Nummererte lister i HTML

I motsetning til den forrige typen lister har nummererte lister én viktig funksjon: de nummereres automatisk. Dette er nyttig når du trenger å nummerere en stor liste. Å gjøre det manuelt vil ta mye tid, og du kan fortsatt bli forvirret. En nummerert liste angis ved hjelp av taggen. Slik ser det ut i praksis:

Eksempel på nummerert liste:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html > <hodet > <tittel > Eksempel på en standard nummerert liste</tittel> </hode> <kroppen > Fra én til fem: <ol > <li > Først</li> <li > Sekund</li> <li > Tredje</li> <li > Fjerde</li> <li > Femte</li> </ol> </body> </html>
Slik ser en nummerert liste ut: standardinnstillinger i nettleseren:
Ris. 2.1. Nummerert liste i nettleser med standardinnstillinger
I likhet med forgjengeren (punktliste), har den sine egne stiler for å vise tall. Vanlig nummerering er ikke den eneste typen punkt for en nummerert liste i HTML.

2.1 Standard kuler for nummererte lister

Her har vi ikke et valg mellom tre typer markører, men av fem:

Navn på markør «type»-attributtverdi Eksempel på liste
Markører i form av arabiske tall 1
Badminton

Baseball

Markører i form av små latinske bokstaver en
Chomolungma

Chogori

Kanchenjunga

Markører i form av store latinske bokstaver EN
Summit plummet

Tantrum Alley

Insano

Små romertallsmarkører Jeg
Filippinsk hav

Det arabiske hav

korallhavet

Store romertallsmarkører Jeg
rød

Grønn

Blå

2.2 Egen nummerering i HTML-listen

I tillegg til den vanlige utgangen av en nummerert liste, kan vi også starte nummereringen fra et hvilket som helst nummer. For å gjøre dette må du angi tilleggsattributtet "start" . Denne nummereringen fungerer på alle typer markører for nummererte lister. Slik ser det ut i praksis:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html > <hodet > <tittel > Egendefinert nummerering for en nummerert liste</tittel> </hode> <kroppen > Vi begynner å nummerere fra tolv: <ol type = "a" start = "12"> <li > Tolv</li> <li > Tretten</li> <li > Fjorten</li> <li > Femten</li> <li > Seksten</li> </ol> </body> </html>
Slik vil det se ut på det virkelige nettstedet:
Ris. 2.2. Nummerering fra et vilkårlig nummer i en nummerert liste
I bildet ovenfor nummererte vi listen fra tolv, mens vi laget markører i form av små latinske bokstaver. Nå tror jeg det har blitt klart hvordan du bruker disse attributtene i prosjektene dine.

Vel, la oss nå gå videre til nestede HTML-lister.

3. Hvordan lage en flernivåliste (nestet) i HTML

Flernivålister brukes på nettstedet for å bygge menyer. Denne menyen ser oftest ut til å være enten en nedadgående rullegardin (leksjon på) eller en venstre eller høyre rullegardinmeny. Slike menyer lar deg lagre andre menyelementer i en kompakt form.

Ved å bruke bilmodeller som eksempel, vil vi bygge en flernivåliste i HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html > <hodet > <tittel > HTML Nested Bullet List</tittel> </hode> <kroppen > <ul > <li > Citroen<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </body> </html>
Legg merke til hvordan flernivålisten ser ut i nettleseren:
Ris. 3.1. Eksempel på en flernivåliste i HTML
Vi laget en flernivåliste ved å bruke punkttegn (tag
). En liste over flere nivåer med Citroen-modeller dukket opp med andre markører. Hovedlisten har fylte kuler, og listen på 2. nivå har tomme sirkler. Men som du husker, ved å bruke "type"-attributtet kan vi redefinere markører (det er bedre å sette ).

Men vi kan forene oss lister på flere nivåer nummerert og merket som følger:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html > <hodet > <tittel > Nummererte, punkt- og flernivålister i HTML</tittel> </hode> <kroppen > <ul > <li > Første gruppe tulipaner<ol > <li > Første klasse<ul > <li > Enkle tidlige tulipaner</li> </ul> </li> <li > Andre klasse<ul > <li > Terry tulipaner</li> </ul> </li> </ol> </li> </ul> </body> </html>
I eksemplet ovenfor har vi dobbel hekking (2 nivåer). Først er en liste over to klasser tulipaner inkludert; vi har den nummerert. Deretter legges en punktliste i hvert av elementene i den nummererte listen.

La oss se hvordan det ser ut i nettleseren:
Ris. 3.2. Eksempel på en nummerert liste på flere nivåer til en punktliste i nettleseren
4. Nyttig materiale på HTML-lister

Dette er informasjon som krever forståelse av CSS-egenskaper. For å gjøre dette anbefaler jeg å studere følgende leksjoner: . Alle eksempler vil være umiddelbart med kildekode og er delt inn i HTML (struktur), CSS (stiler) og Resultat (resultat) faner.

4.1 Hvordan lage en HTML-liste til en streng

Konvertering av en HTML-liste til en streng kan være nødvendig når du oppretter en horisontal meny. Det er veldig enkelt å gjøre:

4.2 Hvordan lage en HTML-liste uten ikon

Liste-type-egenskapen i CSS er ansvarlig for dette (mer detaljer):

4.3 Hvordan sentrere en liste i HTML

Listeelementet er et blokkelement, så det må sentreres ved hjelp av polstring. Men det er en viktig poeng— vi må spesifisere eksplisitt bredden for at justeringen skal fungere:

4.4 Hvordan lage en liste i HTML med bilder

Bare én CSS-egenskap, list-style-image , er nok. Inne i url-en, spesifiser adressen før ikonet. Jeg vil bare merke meg at det er bedre å umiddelbart velge et lite bilde, fordi høyden på listelinjen avhenger av det:

4.5 Punktliste HTML din kule

I dette tilfellet må du koble til fontikoner på forhånd (for eksempel FontAwesome). Deretter kan du lage et hvilket som helst ikon i stedet for en standardmarkør:

4.6 Hvordan lage en liste i HTML i flere kolonner

For å lage en liste i flere kolonner vil vi bruke CSS-eiendom kolonnetall (egenskapen støttes kun i følgende nettlesere: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Du må også angi høyden på listen for å se delingen i flere kolonner:

5. HTML Combo List

For å lage en kombinasjonsboks i HTML er bedre Bare bruk ikonfonter. For eksempel Flaticon eller Fontawesome.

Denne informasjonen er allerede for avanserte personer, så først trenger du.

6. Øv på å jobbe med lister

I videoen under kan du se alt arbeidet med HTML-lister i praksis:

For å konsolidere informasjonen som er mottatt, anbefaler jeg å gjøre alle trinnene manuelt. Prøv forskjellige kuler for lister, lag nummererte lister, og gå deretter videre til flernivålister (nestede) og eksperimenter med dem.

Det er her vi avslutter med listene og går videre til neste leksjon om bilder.

Hvis du trenger mer enn bare det grunnleggende innen nettstedsbygging, men ønsker å mestre yrket som Frontend-utvikler, så ta hensyn til kurset fra nettskolen Netology - "" og nettskolen Skillbox og kurs "".

Kurset varer lenge, men du vil få strukturert kunnskap som du umiddelbart kan få jobb med dersom du er interessert i dette feltet.

Navn på markør	«type»-attributtverdi	Eksempel på liste
Markører i form av arabiske tall	1	Badminton Baseball
Markører i form av små latinske bokstaver	en	Chomolungma Chogori Kanchenjunga
Markører i form av store latinske bokstaver	EN	Summit plummet Tantrum Alley Insano
Små romertallsmarkører	Jeg	Filippinsk hav Det arabiske hav korallhavet
Store romertallsmarkører	Jeg	rød Grønn Blå

Riktig nummerering i HTML nestede nummererte lister ved hjelp av CSS. Styling lister i CSS Standard kuler for punktlister

Nummererte lister

Eksempel: Nummerert liste

Formatering av nummererte lister med CSS

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

Punktlister

Nestede lister

Eksempel: Nestede lister

Formatering av punktlister

Eksempel: Bullet List Styles

Grafiske markører.

Eksempel: Grafiske markører

Lister over definisjoner (beskrivelser)

Eksempel: Definisjonsliste

Fremtiden til CSS3

html

Tradisjonelt en klønete måte.

css

html

En vakker og riktig måte.

css

html

Måleridentifikasjon

Tellerøkning

Tellerdisplay

Etter hvert...

Nestede lister med automatisk nummerering

1. Punktlister i HTML

1.1 Standard kuler for punktlister

1.2 Listemarkør i form av en tom sirkel

1.3 Listemarkør i form av en firkant

2. Nummererte lister i HTML

2.1 Standard kuler for nummererte lister

2.2 Egen nummerering i HTML-listen

3. Hvordan lage en flernivåliste (nestet) i HTML

4. Nyttig materiale på HTML-lister

4.1 Hvordan lage en HTML-liste til en streng

4.2 Hvordan lage en HTML-liste uten ikon

4.3 Hvordan sentrere en liste i HTML

4.4 Hvordan lage en liste i HTML med bilder

4.5 Punktliste HTML din kule

4.6 Hvordan lage en liste i HTML i flere kolonner

5. HTML Combo List

6. Øv på å jobbe med lister