Numerotarea corectă în numeroase liste HTML cu CSS. Numerotarea corectă în numeroase liste HTML cu CSS Cum de a face o listă numerotată în CSS

Destul de des pentru a utiliza numerotarea: atunci când creați diferite liste, liste, design de conținut sau conținut etc.

În CSS, contoarele sunt folosite pentru a automatiza procesul de numerotare.

Pentru a începe, oferim un exemplu simplu. Apoi, mai cuprinzătoare - Creați o listă investit cu o numerotare automată a articolelor și subpozițiilor sale.

Contor de identificare

Mai întâi trebuie să identificați contorul.

Folosind proprietatea contra-resetare, contorul este atribuit un nume și o valoare inițială. Numele poate fi orice, dar nu poate începe cu numerele.

Fragment de cod:

Această intrare sugerează că pentru etichetă Un contor este instalat cu numărul de nume și valoarea inițială de 3.

În mod implicit, valoarea inițială a contorului este 0.

Creșterea contorului

Pentru a face acest lucru, servește proprietatea contra-incrementală. De asemenea, este folosit pentru a specifica creșterile contorului - numărul la care va crește valoarea contorului.

Fragment de cod:

corp (contra-resetare: numărul 3;)
Corpul P (contra-incrementare: numărul 3 ; }

Acest fragment de cod spune că paragrafele ( etichetă

) În corpul documentului va fi numerotat de numărul numeric cu incremental egal cu 3.

Primul paragraf va fi la numărul 6, deoarece valoarea inițială a contorului 3 și creșterea acestuia este de 3.

În mod implicit, valoarea incrementelor contra contrare este de 1.

Acum totul parametrii necesari Contorul este setat: Numele, valoarea inițială, creșterea și elementul care vor fi numerotate. Mai departe....

Afișați contorul

Acum este necesar să afișați valoarea contorului și să setați regulile pentru locația sa. Acest lucru se face folosind conținutul și pseudolerul înainte și retoferter.

Proprietatea de conținut introduce conținut la ( inainte de.) sau după ( după ) Elementul specificat.

Fragment de cod:

corp (contra-resetare: numărul 3;)
Corpul P: După (contra-incrementare: numărul 3 ; Conținut: "contor egal" (număr) "." ;)

Deci, la fragmentul de cod precedent, am adăugat proprietatea de conținut, care afișează cuvântul "egal", apoi valoarea numărului numărului și a punctului "". . Toate acestea sunt introduse în pagină după conținutul paragrafului ( etichetă

) Care este elementul pseudo-element după.

În cele din urmă...

Mai jos este exemplul descris.

Fragment de cod:

2 multiplicați cu 3

3 multiplicați cu 3

4 multiplicați cu 3

5 multiplicați cu 3

Rezultat:

Listele imbricate cu numerotare automată

Să luăm în considerare un exemplu de aplicare a contoarelor de automatizare a listelor de numerotare a procesului de numerotare.

Probabil că ați știut deja din ambele liste de învățare din CSS, că elementele listă sunt numerotate automat. Dar această numerotare este cea mai simplă.

Cum rămâne cu numerotarea automată a paragrafelor din formularul 1.1, 1.2, 2.1, 2.2 etc.?

Această sarcină este rezolvată folosind contoare care vă permit să automatizați procesul de numerotare a listelor nominale.

Fragment de cod:

Numerotarea automată în CSS

Lista de prima listă

Primul paragraf din primul punct

Al doilea paragraf din primul punct

A doua listă a listei

Primul paragraf al doilea punct

Al doilea paragraf din punctul 2

Lista a treia listă

Primul paragraf al treilea

Al doilea paragraf al treilea

Al treilea paragraf al treilea

Rezultat:

Acesta este modul în care există o automatizare a listelor de numerotare a procesului de numerotare!

Sprijină două tipuri de liste: numerotate și non-numerotate. Primul sunt folosite pentru a enumera cu privire la elementele de enumerate, al doilea - pentru a crea o listă de elemente echivalente. Există încă liste de definiții care sunt utilizate pentru a crea descrierea definiției blocurilor, dar, în experiența mea, folosită extrem de rar. Despre cum să lucrați cu aceste liste video pentru începători unde este prezentată în detaliu cum să lucrați cu aceste liste.

După ce ați lucrat cu liste standard HTML, fiecare mai devreme sau mai târziu se ciocnește cu problema imperfecțiunii sale. Faptul este că atunci când atașați o listă, numărarea din nou a listei atașate și începe din nou cu o unitate. Și la nivelul cuiburilor de la trei și la lungimea listei, mai mult de zece încep la problemele cu percepția asupra căreia elementul imbricat, la care aparține elementul părinte.

Luați în considerare această sarcină exemplu simplu. În codul de mai jos, elementele constau din ceea ce aș dori să văd:

1.
2.
1. 2.1.
2. 2.2.
3. 2.3.
4. 2.4.
3.
4.
1. 4.1.
2. 4.2.
3. 4.3.
4. 4.4.

Cu toate acestea, atunci când retrageți un astfel de cod HTML pe ecran, obținem ieșirea standard a listei numerotate HTML, în care toate listele atașate încep cu 1.

În figura de mai sus, ceea ce este prezentat la începutul elementelor de listă (fără text îndrăzneț) este numerotarea automată a listei

Pentru ca numerotarea să fie corectă, intuitivă de înțeles, este necesar ca fiecare atașament al listei să înceapă cu o figură care denotă nivelul de cuibărit. Și se poate face pur și simplu folosind CSS:

Ol (stil de listă: nici unul, contra-resetare: Li;) Li: înainte (contra-increment: Li, contoare: contoare (Li, ")". ")

Aplicarea acestui cod CSS la etichete

Lista numerotată va primi ceea ce aveți nevoie: numerotat în mod corespunzător numeroase liste HTML:

Formarea de numerotare corectă în lista numerotată HTML utilizând CSS

Luați în considerare mai detaliat proprietățile listei numerotate HTML, care pot fi modificate cu folosind CSS..

lista de stil: Nici unul;
- anulați toate stilurile de listă pentru elementele OL (dacă au fost atribuite anterior) utilizând proprietatea în stil list
contra-resetare: Li;
- atribuiți ID-ul Li în care elementul ol va fi stocat utilizând proprietatea contra-resetare.
contra-increment: Li;
- denotați identificatorul Li ca un contor care va număra numărul de afișaj al elementelor OL pe pagină și va fi afișat utilizând conținutul și proprietatea Pseudo-Element: înainte de Li
conținut: Contoare (Li, ".") "."
- setați secvența de ieșire a contorului LI pentru toate elementele listei numerotate OL.

Astfel, prin schimbarea celor patru proprietăți CSS ale a două elemente OL și Li ale unei liste numerotate, puteți obține o listă HTML frumos numerotată, care este ușor percepută și mai familiară pentru noi, deoarece trimite în mod clar cuiburile de elemente și aparținând elemente materne ale listei.

Codul HTML și CSS al listei numerotate cu numerotarea corectă

Pentru a descoperi cu ușurință și aplicați informațiile descrise mai sus, citez un cod HTML și CSS complet de lucru al unei liste numerotate cu numerotarea corectă a elementelor imbricate:

Numerotarea corectă a numeroaselor elemente de listă în HTML cu CSS

1.
2.
1. 2.1.
2. 2.2.
3. 2.3.
4. 2.4.
3.
4.
1. 4.1.
2. 4.2.
3. 4.3.
4. 4.4.

Multumesc pentru atentie! \u003d D.

P.S. Cu privire la modul de a crea numerotarea corectă în listele de etichete mixte și etichete ale HTML cu CSS, puteți citi în → acest articol . O soluție universală pentru crearea proprietăților CSS este dată pentru tipuri diferite Listele HTML.

Pentru liste, crearea căreia sunt descrise aici mijloacele HTML, următoarele reguli CSS sunt furnizate.

listă-stil de tip

Specifică marcajul sau numerotarea listelor în locul atributului de tip în codul HTML. Valorile proprietății pentru listele de etichete pot fi:

dISC. - Cercul, instalat în mod implicit.
cerc - Cercul.
pătrat. - Piața.

Pentru listele numerotate, proprietatea este de obicei atribuită valori:

zecimal - numere arabe, valoarea implicită este setată.
inferior-roman. - Numerele romane mici.
superior-roman. - numerele romane.
inferior alfa. - Strânge litere latine.
superior-alfa. - litere latine capitale.

De asemenea, pentru orice tip de listă, proprietatea tipului de stil în stil, puteți specifica valoarea none, care va elimina în siguranță marcatorul.

Alte valori sunt disponibile pentru listele numerotate, de exemplu, cJK-ideografie Specifică numerotarea ideografică Armean. - Armenian tradițional și zecimal-zero Va stabili numerotarea numerelor romane, dar cu zero la început: 01, 02, 03 ... 09, cu toate acestea, în practică, acestea și valorile ca ele sunt extrem de rar utilizate.

Exemplul de mai jos afișează trei liste: numerotate cu numerotarea tradițională armeană, marcată cu un cerc și numerotate, elemente în care sunt numerotate ideografic.

CSS Listele

Primul punct
Al doilea punct
Al treilea punct

Primul punct
Al doilea punct
Al treilea punct

Primul punct
Al doilea punct
Al treilea punct

Rezultat.

Culoarea markerilor coincide cu culoarea textului din lista specificată de proprietate culoare.

listă-imagine-imagine

Vă permite să instalați propria imagine ca marker. De exemplu, dacă fișierul conține pagina conține fișierul marker.png.pe care doriți să le utilizați, codul de proiectare va fi după cum urmează:

Ul (imaginea în stil list: adresa URL ("marker.png");)

listă-poziție în stil

Specifică poziția markerului: fie este transferată elementul din străinătate al listei ( lista-poziție în stil: în afara) sau textul este consolidat ( lista-stil în stil: în interior).

Exemplul de mai jos prezintă diferența dintre aceste valori. În primul caz, marcatorul din listă, în cel de-al doilea caz, se face dincolo de limitele sale.

listă-poziție în stil

Arăți doar ceea ce diferă interiorul din afară.
În cazul interior, marcatorul se încadrează în listă, fără a depăși limitele sale și nu interferă stratul. Textul îl întărește, markerul este ca în interior.
Valoarea exterioară face un marcator în afara listei.

Ca rezultat, se creează o pagină:

stilul de listă

Vă permite să reduceți codul scriind toate cele trei proprietăți enumerate cu o singură linie. Regulile sunt înregistrate prin spațiu:

Ul (stil-stil: pătrat înăuntru;)

Luați în considerare un exemplu al unei pagini cu trei liste. Primul număr este numerotat în formatul 01, 02, al doilea este marcat cu un model personalizat (fișierul marker.png din dosarul cu pagina), markerul celei de-a treia liste este dezactivat.

Codul HTML este prezentat mai jos.

stilul de listă

Primul punct
Al doilea punct
Al treilea punct

Primul punct
Al doilea punct
Al treilea punct

Primul punct
Al doilea punct
Al treilea punct

Browserul va afișa pagina următoare.

O zi buna!

În acest articol, veți afla despre toate caracteristicile listelor, veți înțelege cum să faceți o listă numerotată, etichete master care vor ajuta la realizarea unei liste simple marcate și mai vizibile cu markeri arbitrari. După trecerea lecției, veți avea o înțelegere a locului în care se aplică listele și în ce circumstanțe pot fi utilizate.

Acest articol este al treilea în acest curs mic elementele de bază ale HTML. Înainte de a citi această lecție, vă recomand să treceți în ultimele două:

Numai articolul a început, și puteți observa deja utilizarea unei liste standard marcate. În site-ul meu arată destul de simplu: în partea stângă există o mică liniuță în linie și un marker pătrat. Mai mult în articol, vom lua în considerare în detaliu ce sunt markeri, cum să faceți numere, precum și cum să vă faceți propriul marker.

În fiecare parte a articolului, crearea anumitor liste va fi însoțită de explicații detaliate privind introducerea unei liste.

1. Listele marcate în HTML

Acest tip de liste este folosit pentru a enumera setul de elemente similare cu setul. Poate fi o listă de referințe asociate cu un subiect, explicatie detaliata Pentru părțile individuale ale textului. Dar să vedem cum arată playlisturile în cod:

Dar se pare că în browser:

Smochin. 1.1. Vizualizare standard a unei liste HTML marcate neasculate în browser

1.1 markeri standard pentru o listă marcată

În imaginea de mai sus (Figura 1.1) Puteți observa cercurile de la începutul fiecărui element de meniu. Acesta este un marker. În mod implicit, este în browser sub forma unui cerc pictat. Există mai multe tipuri de markeri în HTML: un cerc, un cerc gol și un pătrat. Ei nu necesită CSS fie să conecteze imagini terțe:

1.2 marcator de listă sub forma unui cerc gol

Valorile atributelor pe care le cunoașteți și acum să vedem cum să facem o listă HTML marcată în cod. De la tabelul de mai sus, am ales cea de-a doua valoare "cerc" pentru atributul de tip și o setați la lista noastră marcată:

<hTML\u003e <head\u003e <titlu\u003eUn exemplu de listă marcată, cu un marcator sub forma unui cerc gol</ Titlu\u003e </ Head\u003e <corp\u003e <p\u003eSTARS:</ P\u003e <ul tip \u003d "cerc"\u003e <li\u003eSirius.</ Li\u003e <li\u003eArctur.</ Li\u003e <li\u003ePollux.</ Li\u003e <li\u003eBethelgeuse</ Li\u003e <li\u003eSoarele</ Li\u003e </ ul\u003e. </ Corp\u003e </ Html\u003e

Uită-te imediat la modul în care acest cod va arăta în browser:

Smochin. 1.2. Vizualizarea markerului pentru lista sub forma unui cerc din browser

1.3 marcatorul de listă sub formă de pătrat

Să vedem, de asemenea, ultimul exemplu cu un marker pătrat pentru lista HTML:

Fiți atenți la marcator, a devenit pătrat:

Smochin. 1.3 Vizualizarea markerului pentru lista sub forma unui pătrat în browser

Notă importantă: Acum, acest mod nu mai este folosit pentru a crea stiluri cu liste marcate. Există o diviziune clară a CSS (ce este citită CSS) și HTML. HTML - pentru marcare și CSS - pentru a crea un aspect atractiv.

Codul care conține acest atribut atunci când specifică tipul de document curent ca HTML5 (""), Voi da o eroare la validare. Dacă nu ați auzit ce este validare, atunci sunteți aici.

Eroarea va fi după cum urmează:

Smochin. 1.4. Eroare la validator când utilizați atributul "Tip" din listă

Cu liste marcate au fost exprimate. Acum trecem la numerotate și apoi luăm în considerare listele subfate și câteva exemple gata făcute care sunt cele mai des utilizate în site-urile reale.

2. Listele numerotate în HTML

Spre deosebire de tipul anterior de liste, există o caracteristică importantă în listele numerotate: ele fixează automat numerotarea. Acest lucru este util atunci când trebuie să numerotați o listă mare. Manualul va dura mult timp, în timp ce vă puteți pierde. Lista numerotată este setată utilizând eticheta. Cum arată în practică:

Un exemplu de listă numerotată:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<hTML\u003e <head\u003e <titlu\u003eUn exemplu de listă standard numerotată</ Titlu\u003e </ Head\u003e <corp\u003e <p\u003eDe la unul la cinci:</ P\u003e <oL\u003e <li\u003ePrimul</ Li\u003e <li\u003eAl doilea</ Li\u003e <li\u003eAl treilea</ Li\u003e <li\u003eAl patrulea</ Li\u003e <li\u003ea cincea</ Li\u003e </ ol\u003e </ Corp\u003e </ Html\u003e

Acest lucru arată ca o listă numerotată cu setări standard În browser:

Smochin. 2.1. Lista numerotată în browser cu setări standard

La fel ca predecesorul său (lista marcată), are propriile stiluri la numerele de ieșire. Numerotarea normală nu este singura formă de markeri dintr-o listă numerotată în HTML.

2.1 Markere standard pentru lista numerotată

Aici avem o alegere de trei tipuri de markeri, dar de la cinci:

Numele markerului	Valoarea atributului "Tip"	Exemplu de listă
Markeri sub formă de numere arabe	1	Badminton. Baseball
Markeri sub formă de litere latine mici	a.	Jomolungma. Cherchrie. Kanchenjanga.
Markeri sub formă de scrisori de capital latin	A.	Summit Rummed. Alee tantrum. Insano.
Markeri sub formă de numere romane în litere mici	i.	Marea Filipineză. Marea Arabiei Marea Coral.
Markeri sub formă de numere romane în majuscule	I.	roșu Verde Albastru

2.2 Numerotarea proprie în lista HTML

În plus față de ieșirea obișnuită a unei liste numerotate, putem începe și numerotarea dvs. de la orice cifră. Pentru a face acest lucru, trebuie să setați un atribut suplimentar "Start". Astfel de numere funcționează pe toate tipurile de markeri din listele numerotate. Cum arată în practică:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<hTML\u003e <head\u003e <titlu\u003eNumerotare arbitrară pentru o listă numerotată</ Titlu\u003e </ Head\u003e <corp\u003e <p\u003eÎncepem numerotarea de la doisprezece:</ P\u003e <oL TYPE \u003d "A" START \u003d "12"\u003e <li\u003eDoisprezece</ Li\u003e <li\u003eTreisprezece</ Li\u003e <li\u003ePaisprezece</ Li\u003e <li\u003eCincisprezece</ Li\u003e <li\u003eŞaisprezece</ Li\u003e </ ol\u003e </ Corp\u003e </ Html\u003e

Acesta este modul în care acesta va fi afișat pe site-ul real:

Smochin. 2.2. Numerotarea de la un număr arbitrar într-o listă numerotată

În imaginea de mai sus, am numărat o listă începând de la doisprezece, în timp ce erau markeri sub formă de litere latine mici. Acum, cred că a devenit clar cum să utilizați aceste atribute în proiectele dvs.

Acum, hai să mergem la listele HTML imbricate.

3. Cum se face o listă multi-nivel (încorporată) în HTML

Listele pe mai multe niveluri sunt utilizate pe site-ul în construcția meniului. Acest meniu pare cel mai adesea ca fie în jos (co / lecție), fie cădere la stânga sau la dreapta. Astfel de meniuri vă permit să stocați alte elemente de meniu într-un formular compact.

Pe exemplul modelelor de mașini, vom construi o listă pe mai multe niveluri în HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<hTML\u003e <head\u003e <titlu\u003eLista de etichete imbricate HTML</ Titlu\u003e </ Head\u003e <corp\u003e <ul\u003e <li\u003eCitroen.<ul\u003e <li\u003eBerlingo.</ Li\u003e <li\u003eC1.</ Li\u003e <li\u003eC2.</ Li\u003e <li\u003eC3 Picasso.</ Li\u003e <li\u003eC4 Grand Picasso.</ Li\u003e </ ul\u003e. </ Li\u003e <li\u003eKia.</ Li\u003e <li\u003eToyota.</ Li\u003e <li\u003eAudi.</ Li\u003e <li\u003eLexus.</ Li\u003e </ ul\u003e. </ Corp\u003e </ Html\u003e

Vă rugăm să rețineți cum arată lista multi-nivel din browser:

Smochin. 3.1. Un exemplu de listă multi-nivel în HTML

Am făcut o listă multi-nivel utilizând o etichetă (etichetă

Dar putem combina listele cu mai multe niveluri cu numerotate și etichetate după cum urmează:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<hTML\u003e <head\u003e <titlu\u003eListe numerotate, etichetate și multi-nivel în HTML</ Titlu\u003e </ Head\u003e <corp\u003e <ul\u003e <li\u003ePrimul grup de lalele<oL\u003e <li\u003eClasa întâi<ul\u003e <li\u003eSimple lalele timpurii</ Li\u003e </ ul\u003e. </ Li\u003e <li\u003eClasa a doua<ul\u003e <li\u003eTerry Lulips</ Li\u003e </ ul\u003e. </ Li\u003e </ ol\u003e </ Li\u003e </ ul\u003e. </ Corp\u003e </ Html\u003e

În exemplul de mai sus avem dublu cuibărit (nivelul 2). În primul rând, este investit lista a două clase de lalele, este numerotată. Apoi, o listă marcată este investită în fiecare dintre elementele listei numerotate.

Ne uităm la viziunea sa în browser:

4. Materiale utile pe listele HTML

Iată informațiile pentru care este necesară înțelegerea proprietăților CSS. Pentru a face acest lucru, vă recomand să explorați următoarele lecții :. Toate exemplele vor fi imediat cu cod sursa Și împărțită în filele HTML (structură), CSS (stiluri) și rezultat.

4.1 Cum se face o listă de HTML într-un șir

Efectuați lista HTML în șir poate fi necesară atunci când creați un meniu orizontal. Faceți-o foarte simplă:

4.2 Cum se face o listă de HTML fără pictogramă

Pentru aceasta corespunde proprietății de tip în stil în stil CSS (mai mult):

4.3 Cum se face o listă în HTML în centru

Elementul de listă este element blocPrin urmare, în centru trebuie să fie aliniat cu liniuțe externe. Dar există una un moment important - Trebuie să specificăm în mod explicit lățimea, astfel încât alinierea a lucrat:

4.4 Cum se face o listă în HTML cu imagini

Doar o singură proprietate de imagine a listei CSS. În interiorul adresei URL-ului indică adresa la pictogramă. Vreau doar să observ că imaginea este mai bine să se ridice imediat, deoarece înălțimea liniei de listă depinde de ea:

4.5 Lista HTML marcator marcator

În acest caz, este necesar să se conecteze icoanele de fonturi în avans (de exemplu, Fontawesome). Apoi puteți face orice pictogramă în loc de un marker standard:

4.6 Cum se face o listă în HTML în mai multe coloane

Pentru a face o listă cu mai multe coloane pe care le vom folosi cSS proprietate Numărul de coloane (proprietatea este acceptată numai în următoarele browsere: adică 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). De asemenea, trebuie să setați înălțimea pentru listă pentru a vedea partiția în mai multe coloane:

5. Listă combinată HTML

Pentru a face o listă combinată în Html mai bine. Utilizare totală Fonturile pictogramelor. De exemplu, flaticon sau fontawesome.

Aceste informații sunt deja avansate, deci va fi necesar pentru un început.

6. Practici de lucru cu liste

În videoclipul de mai jos puteți vedea toate lucrările cu liste HTML în practică:

Pentru a asigura informațiile primite, recomand toate acțiunile de făcut manual. Încercați diferite markeri pentru liste, creați liste numerotate și după mutarea la listele multi-nivel (atașate) și experimentați cu acestea.

În acest sens, cu listele de sfârșit și treceți la următoarea lecție pe imagini.

Dacă aveți nevoie de mai mult decât elementele de bază ale clădirilor site-ului și doriți să stăpâniți profesia Dezvoltator interfețe, Acordați atenție cursului de la netologia școlii online - "" și școala online și cursul "".

Cursul durează mult timp, dar cunoștințele pe care le veți primi structurate, cu care puteți obține imediat un loc de muncă dacă sunteți interesat de această direcție.