liste HTML folosit pentru a grupa informații conexe. Există trei tipuri de liste:

listă cu puncte —

- fiecare element al listei
• marcat cu un marker,
  lista numerotata —
  - fiecare element al listei
  1. marcat cu un număr
     lista de definitii- - este format din perechi de termeni
     —
     definiție.

     Fiecare listă este un container în care se află elementele listei sau perechile termen-definiție. Elementele de listă se comportă ca elemente de bloc, stivuite unele sub altele și ocupând întreaga lățime a blocului container. Fiecare element din listă are un bloc suplimentar situat în lateral, care nu participă la aspect.

     Crearea listelor HTML

     1. Lista cu marcatori

     Listă cu puncte este o listă neordonată (din lista de neordonate în engleză). Creat folosind o etichetă asociată

     . Markerul unui element de listă este o etichetă, de exemplu, un cerc umplut.

     Browserele adaugă în mod implicit următoarea formatare la blocul de listă:

     Fiecare element de listă este creat folosind o etichetă asociată

  2. (din limba engleză articol de listă).
  disponibil .
  • Microsoft
  • Google
  • Măr
  Orez. 1. Lista cu marcatori

  2. Lista numerotata

  Lista numerotata este creat folosind o etichetă asociată. Fiecare element de listă este, de asemenea, creat folosind elementul

• . Browserul numerotează automat elementele în ordine, iar dacă ștergeți unul sau mai multe elemente dintr-o astfel de listă, numerele rămase vor fi automat recalculate.

  Blocul listă are și stiluri implicite de browser:

• Este disponibil atributul valoare, ceea ce vă permite să schimbați numărul implicit pentru elementul din listă selectat. De exemplu, dacă pentru primul element din listă ați setat
• , atunci numerotarea rămasă va fi recalculată în raport cu noua valoare.

  Pentru etichetă

  Următoarele atribute sunt disponibile:
  Tabelul 1. Atributele etichetei

  Atribut	Descriere, valoare acceptată
  inversat	Atributul inversat face ca lista să fie afișată în ordine inversă (de exemplu, 9, 8, 7...).
  start	Atributul start specifică valoarea inițială de la care va începe numerotarea, de exemplu, o construcție primului articol i se va atribui numărul de serie „10”. De asemenea, puteți specifica tipul de numerotare în același timp, de exemplu, .
  tip	Atributul type specifică tipul de marcator de utilizat în listă (litere sau cifre). Valori acceptate: 1 — valoare implicită, numerotare zecimală. A — numerotarea listei în ordine alfabetică, litere mari (A, B, C, D). a — numerotarea listei în ordine alfabetică, litere mici (a, b, c, d). I - numerotarea cu cifre romane majuscule (I, II, III, IV). i — numerotarea cu cifre romane mici (i, ii, iii, iv).

  1. Microsoft
  2. Google
  3. Măr
  Orez. 2. Lista numerotata

  3. Lista definițiilor

  Liste de definiții sunt create folosind o etichetă

  . Pentru a adăuga un termen, utilizați o etichetă
  , și pentru a insera o definiție - eticheta
  .

  Blocul listei de definiții are următoarele stiluri implicite de browser:

  Pentru etichete

  ,

  Și

  disponibil .

  Director:

  Peter Tochilin

  Distribuție:

  Andrei Gaidulyan

  Alexei Gavrilov

  Vitali Gogunsky

  Mariya Kozhevnikova

  
  Orez. 3. Lista definițiilor

  4. Lista imbricată

  Adesea, capacitățile listelor simple nu sunt suficiente, de exemplu, atunci când creați un cuprins, nu există nicio modalitate de a face fără; articole imbricate. Marcajul pentru lista imbricată ar fi următorul:

  • Paragraful 1.
  • Punctul 2.
    • Subclauza 2.1.
    • Subclauza 2.2.
      • Subclauza 2.2.1.
      • Subclauza 2.2.2.
    • Subclauza 2.3.
  • Punctul 3.

  
  Orez. 4. Lista imbricată

  5. Lista numerotată cu mai multe niveluri

  O listă cu mai multe niveluri este utilizată pentru a afișa elementele din listă la diferite niveluri, cu indentări diferite. Marcajul pentru o listă numerotată cu mai multe niveluri ar fi după cum urmează:

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

  Acest marcaj implicit va crea o nouă numerotare pentru fiecare listă imbricată, începând cu una. Pentru a crea numerotarea imbricată, trebuie să utilizați următoarele proprietăți:
  counter-reset resetează unul sau mai multe contoare, specificând valoarea de resetat;
  counter-increment specifică valoarea incrementului contorului, i.e. în ce trepte va fi numerotat fiecare articol următor;
  conținut - conținut generat, în acest caz este responsabil pentru afișarea numărului înaintea fiecărui element din listă.

  Ol ( /* elimină numerotarea standard */ list-style: none; /* Identificați contorul și dați-i numele li. Valoarea contorului nu este specificată - implicit este 0 */ counter-reset: li; ) li :before ( /* Definim elementul care va fi numerotat - li Pseudo-elementul înainte indică faptul că conținutul inserat folosind proprietatea conținut va fi plasat înaintea elementelor din listă. Valoarea incrementului contorului este setată aici (implicit este 1 */ counter-increment: li /). * Proprietatea conținut afișează numărul contoarelor din listă () înseamnă că textul generat reprezintă valorile tuturor contoarelor cu acest nume între numere și se adaugă un punct cu un spațiu înainte de conținutul fiecărui element din listă */ conținut: counters(li,".") "."
  Orez. 5. Lista numerotată cu mai multe niveluri

Dacă ați încercat vreodată să schimbați stilurile CSS ale numerelor de linii (cifre) în liste ordonate

, atunci probabil ați întâmpinat probleme. Este imposibil să ajungeți la stilurile acestor elemente folosind selectoare CSS. Dar, destul de des, designul interfeței implică schimbarea culorii, fundalului, dimensiunii, etc.

Iată cel mai simplu exemplu de listă fără stil:

html

1. A planta un copac
2. Construiește o casă
3. Crește un fiu

Să ne uităm la mai multe moduri de a rezolva problema de mai sus.

În mod tradițional, un mod stângaci.

Modul tradițional de a rezolva această problemă este ascunderea numerelor de linie care sunt atribuite automat de browser. În acest caz, este utilizată proprietatea list-style: none; .

css

li( list-style: none; ) .num( culoare: alb; fundal: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; lățime: 40px; înălțime: 40px)

html

1. 1 A planta un copac
2. 2 Construiește o casă
3. 3 Crește un fiu

De acord, pare redundant și inflexibil. Ascundem numerele de secvență plasate automat și le înlocuim cu valori specificate manual, aglomeram aspectul etc.

Să vedem cum putem obține același rezultat fără a înfunda aspectul și a folosi pseudo-element::before și proprietățile CSS content , counter-increment , counter-reset .

Un mod frumos și corect.

Mai întâi vom furniza codul și demonstrația, apoi ne vom da seama ce este.

css

ol( counter-reset: myCounter; ) li( list-style: none; ) li:before (contor-increment: myCounter; content:counter(myCounter); culoare: alb; fundal: #2980B9; display: inline-block; text-align: margine: 5px 10px; înălțime de linie: 40px;

html

1. A planta un copac
2. Construiește o casă
3. Crește un fiu

După cum puteți vedea, codul html rămâne curat și frumos. În acest caz, toate stilurile elementelor listei sunt transferate în css.

Să privim punct cu punct:

• li::inainte– creează un pseudo-element în interiorul listei, care ia locul primului copil.
• counter-reset:myCounter;– resetează contorul myCounter css din fiecare
  .
  1. contra-increment: myCounter;– incrementează contorul css myCounter pentru fiecare pseudo-element::before .
  2. continut:counter(myCounter);– imprimă valoarea curentă a contorului myCounter în interiorul pseudo-elementului::before.

Mai multe detalii despre contoarele CSS pot fi găsite în

Listele numerotate sunt o colecție de elemente cu numerele lor de serie. Tipul și tipul numerotării depind de parametrii elementului

, care este folosit pentru a crea lista. Următoarele valori pot servi ca elemente de numerotare:
• Cifre arabe (1, 2, 3, ...);
• Cifre arabe cu zero înainte pentru numerele mai mici de zece (01, 02, 03, ...,10);
• litere mari latine (A, B, C, ...);
• litere latine mici (a, b, c, ...);
• cifre romane majuscule (I, II, III, ...);
• cifre romane mici (i, ii, iii, ...);
• numerotarea armeană;
• numerotarea georgiană.

Din punct de vedere practic, principiile afișării articolelor într-o listă cu marcatori pot fi aplicate într-un mod similar unei liste numerotate. Dar având în vedere că avem de-a face cu o enumerare, există câteva caracteristici care vor fi discutate în continuare.

Numerotarea listei

Este permisă începerea listei de la orice număr; atributul start al elementului este folosit în acest scop

sau valoarea elementului
1. . Valoarea este orice număr întreg pozitiv. Nu contează ce tip de numerotare este setat, chiar dacă literele latine sunt folosite ca listă. Dacă atât atributele de început, cât și de valoare sunt aplicate unei liste în același timp, atunci aceasta din urmă are prioritate și numerotarea este afișată din numărul specificat de valoare , așa cum se arată în Exemplul 1.

   Exemplul 1: Modificarea numerotării listei

   4. Ar trebui să ai grijă de locul tău de muncă.
   5. Reglați iluminarea în cameră astfel încât sursa de lumină să fie situată în lateral sau în spatele operatorului.
   10. Pentru a evita complicațiile medicale, este recomandat să alegeți un scaun cu un scaun moale.

   Primul element al listei din acest exemplu va începe cu cifra romană IV, deoarece este specificat atributul start="4", apoi vine numărul V, iar ultimul element iese din ordine și i se atribuie numărul X (Figura 1).

   Orez. 1. Cifrele romane din listă

   Scrierea numerelor

   În mod implicit, o listă numerotată are un anumit aspect: mai întâi există un număr, apoi un punct, iar după aceea textul este afișat separat de un spațiu. Această formă de scriere este vizuală și convenabilă, dar unii dezvoltatori preferă să vadă un mod diferit de a proiecta numerotarea listelor. Și anume, astfel încât în ​​loc de punct să existe o paranteză de închidere, așa cum se arată în Fig. 2 sau ceva asemanator.

   

   Orez. 2. Vedere listă numerotată cu paranteză

   Stilurile vă permit să schimbați tipul de numerotare a listei folosind proprietățile de conținut și de contra-increment. În primul rând, selectorul ol trebuie să fie setat la contraresetare : item , acest lucru este necesar pentru ca numerotarea în fiecare listă nouă să înceapă din nou. În caz contrar, numerotarea va continua și în loc de 1,2,3 veți vedea 5,6,7. Valoarea articolului este un identificator unic pentru contor; o alegem noi înșine. Apoi, trebuie să ascundeți marcatorii originali prin proprietatea de stil list-style-type cu valoarea none .

   Proprietatea de conținut funcționează de obicei împreună cu pseudo-elementele ::after și ::before. Astfel, construcția li::before spune că un anumit conținut trebuie adăugat înaintea fiecărui element al listei (exemplul 2).

   Exemplul 2. Crearea propriei numerotari

   Li::before ( continut: counter(element) ") "; /* Adăugați o paranteză la numere */ counter-increment: item; /* Setează numele contorului */ )

   Proprietatea de conținut cu contorul de valoare (articolul) afișează un număr; Adăugând o paranteză, așa cum se arată în acest exemplu, obținem tipul necesar de numerotare. contra-increment este necesar pentru a mări numărul listei cu unul. Rețineți că același identificator, numit element , este folosit pe tot parcursul. Codul final este prezentat în Exemplul 3.

   Exemplul 3: Modificarea vizualizării listei

   1. Primul
   2. Al doilea
   3. Al treilea
   4. Al patrulea

   Folosind metoda de mai sus, puteți face orice tip de listă numerotată, de exemplu, puneți un număr între paranteze drepte, în acest caz, doar o singură linie se va schimba în stiluri.

   Continut: "[" counter(element) "] ";

   Lista cu litere rusești

   Există o listă numerotată cu litere latine, dar nu există litere rusești pentru listă. Ele pot fi adăugate artificial folosind tehnica de mai sus. Deoarece numerotarea se face prin stiluri, lista în sine rămâne originală, doar clasa selectată este adăugată la ea, să o numim chirilic (exemplul 4).

   Exemplul 4: Cod pentru a crea o listă

   1. unu
   2. Două
   3. Trei

   Adăugarea de litere se face folosind pseudo-elementul ::before și proprietatea conținut. Deoarece fiecare linie trebuie să aibă propria sa literă, vom folosi pseudoclasa :nth-child(1) , cu numărul literei scris între paranteze. Prima literă, desigur, este A, a doua este B, a treia este C etc. Acest întreg set este adăugat la selectorul li după cum urmează (exemplul 5).

   Exemplul 5: Utilizarea pseudo-class:nth-child

   Chirilic li:nth-child(1)::before ( conținut: „a)”; ) .chirilic li:nth-child(2)::before ( continut: „b)”; ) .chirilic li:nth-child(3)::before ( continut: „la)”; )

   În acest exemplu, fiecare literă este urmată de o paranteză, toate literele sunt litere mici. Puteți defini propriul tip de numerotare a listei, de exemplu poate conține majuscule cu punct, cu una sau două paranteze sau numai litere. Spre deosebire de numerotarea standard, suntem liberi să facem tot ce vrem aici. O listă de zece litere ar trebui să fie suficientă pentru aproape toate situațiile, dar dacă acest lucru se dovedește brusc a nu fi suficient, nimic nu ne împiedică să ne extindem lista pentru a include cel puțin toate literele alfabetului rus.

   În final ajustăm alinierea și poziția literelor, specificăm opțional dimensiunea fontului, culoarea și alți parametri (exemplul 6).

   Exemplul 6. Lista cu litere rusești

   1. Ciorbă
   2. cotlet de știucă
   3. Kulebyaka
   4. Ciuperci în smântână
   5. Clatite cu caviar
   6. Cvas

   Rezultatul acestui exemplu este prezentat în Fig. 3.

   Pentru liste, a căror creare folosind HTML este descrisă aici, sunt furnizate următoarele reguli CSS.

   tip-list-stil

   Specifică o numerotare marcator sau listă în locul atributului tip din codul HTML. Valorile proprietăților pentru listele cu marcatori pot fi:

   • disc- cerc, setat implicit.
   • cerc- cerc.
   • pătrat- pătrat.

   Pentru listele numerotate, proprietății i se atribuie de obicei următoarele valori:

   • zecimal- Cifre arabe, valoare implicită.
   • inferior-roman- cifre romane mici.
   • superior-roman- cifre romane majuscule.
   • alfa inferior- litere latine mici.
   • alfa superioară- litere mari latine.

   De asemenea, pentru orice tip de listă, proprietatea list-style-type poate fi setată la none, ceea ce va elimina cu totul marcatorul.

   Alte valori sunt disponibile pentru listele numerotate, cum ar fi cjk-ideografice stabilește numerotarea ideografică, armean- armeană tradițională și zecimal-înainte-zero va seta numerotarea în cifre romane, dar cu zero înainte: 01, 02, 03... 09, cu toate acestea, în practică, aceste valori și valori similare sunt utilizate extrem de rar.

   Exemplul de mai jos afișează trei liste: o listă numerotată cu numerotare tradițională armeană, o listă cu marcatori cu un cerc și o listă numerotată cu articole numerotate ideografic.

   1. Primul punct
   2. Al doilea punct
   3. Al treilea punct
   • Primul punct
   • Al doilea punct
   • Al treilea punct
   1. Primul punct
   2. Al doilea punct
   3. Al treilea punct

   Rezultat.

   Culoarea marcajelor se potrivește cu culoarea textului din lista specificată de proprietate culoare.

   listă-stil-imagine

   Vă permite să vă setați propria imagine ca marcator de listă. De exemplu, dacă folderul care conține pagina de listă conține fișierul marker.png, pe care doriți să îl utilizați, atunci codul de proiectare va fi următorul:

   Ul ( list-style-image: url("marker.png"); )

   listă-stil-poziție

   Determină poziția markerului: fie este plasat în afara graniței elementului de listă ( list-style-position: exterior), sau textul se înfășoară în jurul lui ( list-style-position: interior).

   Exemplul de mai jos arată diferența dintre aceste valori. În primul caz, marcatorul este în interiorul listei, în al doilea caz, este plasat în afara listei.

   • Priviți doar diferența dintre interior și exterior.
   • În cazul interiorului, marcatorul se încadrează direct în listă, fără a depăși granițele sale și fără a interfera cu aspectul. Textul curge în jurul lui, markerul pare să fie înăuntru.
   • Valoarea exterioară mută marcatorul în afara listei.

   Ca urmare, este creată următoarea pagină:

   

   stil de listă

   Vă permite să scurtați codul scriind toate cele trei proprietăți listate într-o singură linie. Regulile sunt scrise separate prin spații:

   Ul (stil listă: pătrat în interior; )

   Să ne uităm la un exemplu de pagină cu trei liste. Primul este numerotat cu numere în formatul 01, 02, al doilea este marcat cu o imagine personalizată (fișier marker.png în folderul cu pagina), marcatorul celei de-a treia liste este dezactivat.

   Codul HTML este dat mai jos.

   1. Primul punct
   2. Al doilea punct
   3. Al treilea punct
   • Primul punct
   • Al doilea punct
   • Al treilea punct
   1. Primul punct
   2. Al doilea punct
   3. Al treilea punct

   Browserul va afișa următoarea pagină.