Cum se face o listă numerotată în css. Proiectarea listelor în CSS. Liste cu marcatori în HTML

De la autor: Browserele web vă permit să schimbați aspect multe elemente dintr-o pagină cu folosind CSS. Dar atunci când redă unele elemente pe pagină, browserele refuză cu încăpățânare să-și schimbe designul. De exemplu, elementele de formular, cum ar fi listele derulante (selectare), butoanele radio (radio) și casetele de selectare (caseta de selectare) au propriul lor aspect specific în fiecare sistem de operare, iar browserele încearcă să impună acest aspect pe formularele web.

Browserele web specifică, de asemenea, cum ar trebui să fie afișate listele nenumerotate și numerotate. De exemplu, browserele fac foarte dificilă schimbarea aspectului marcatorilor pentru listele nenumerotate și a numerelor pentru listele numerotate. Desigur, există mai multe proprietăți CSS pentru lucrul cu liste, cum ar fi list-style-type, list-style-image și list-style-position. Dar chiar și a face ceva simplu (cum ar fi schimbarea culorii numerelor dintr-o listă) necesită recurgerea la soluții complexe HTML/CSS.

Din fericire, combinând câteva proprietăți CSS mai puțin cunoscute, puteți da numerelor listei numerotate aspectul dorit. De fapt, după ce ai citit acest tutorial, vei putea schimba fonturile, culorile și aproape orice alt atribut al numerelor dintr-o listă numerotată.

Întregul secret constă din două componente: în primul rând, ascunde complet numerele standard (implicite) din lista numerotată și, în al doilea rând, folosește pseudo-elementul ::before pentru a adăuga aceste numere înapoi.

1. Adăugați o clasă sau un identificator (ID) pentru lista numerotată. Aceasta este o idee bună, permițându-vă să identificați ulterior fiecare listă pentru care doriți să vă creați propriile contoare:

Acesta este primul element
Acesta este al doilea element
Acesta este al treilea element
Acesta este al patrulea element
Acesta este al cincilea element
Acesta este al șaselea element

< ol class = "custom-counter" >

< / ol >

Dacă utilizați doar selectoare de etichete precum ol sau li, veți ajunge cu aceleași contoare pentru toate listele numerotate de pe pagină, cu același aspect.

2. Anulați vizualizarea implicită a marcatorului de listă. În primul rând, trebuie să vă asigurați că browserul nu va adăuga aspect implicit pentru contoare. Următoarea regulă vă va ajuta să faceți acest lucru:

Contor personalizat ( margine-stânga: 0; padding-dreapta: 0; list-style-type: niciunul; )

Personalizat - contor (

margine - stânga : 0 ;

umplutura - dreapta : 0 ;

list-style-type: niciunul;

Această regulă elimină, de asemenea, indentarea pe care browserele o adaugă la începutul listelor numerotate. Deoarece unele browsere folosesc proprietatea margine pentru indentare, iar altele folosesc proprietatea padding, trebuie să setați ambele proprietăți la zero.

3. Setați un nume pentru proprietatea de contra-increment a elementelor listei. Există o proprietate în CSS numită counter-increment. Vă permite să setați un nume pentru contorul dvs. Acest lucru nu ne oferă nimic special, cu excepția faptului că ne putem identifica contorul când folosim pseudo-elementul ::before (ceea ce vom face în pasul următor). Iată un exemplu de cod simplu pentru specificarea numelui contorului:

Personalizat-contor li ( counter-increment: step-counter; )

Personalizat - contor li (

counter-increment: step-count;

În acest exemplu, numele contor de pași nu înseamnă nimic special. Nu este o valoare pentru o proprietate CSS sau orice altceva. Acesta este doar un nume pe care îl vom folosi de acum înainte. Puteți veni cu orice nume: pas, tejghea sau chiar sticle-de-rădăcină-bere-pe-perete.

4. Folosiți pseudo-elementul ::before pentru a adăuga numere de contor și pentru a le stila:

Contor personalizat li::before (conținut: contor(contor de pași); margine-dreapta: 5px; dimensiunea fontului: 80%; culoarea fundalului: rgb(200,200,200); culoare: alb; greutate font: bold; umplutură : 3px 8px; raza marginii: 3px; )

Personalizat - counter li::before(

continut : counter (step - counter ) ;

margine - dreapta : 5px ;

umplutură: 3px 8px;

chenar - raza : 3px ;

Pseudo-elementul::before vă permite să inserați conținut înaintea unui element. În cazul nostru, acesta va insera conținutul înaintea elementului listă. Folosesti proprietate CSS conținut pentru a spune browserului ce conținut ar trebui să pună la începutul elementului listei. Acestea ar putea fi cuvinte reale sau ceva generat automat de browser.

Aici folosim counter(), care ia ca parametru identificatorul obtinut din proprietatea counter-increment. Amintiți-vă că la pasul 2, am specificat numele step-counter pentru proprietatea counter-increment, dând astfel contorului un nume și spunând browserului să folosească un contor pentru fiecare element al listei. Contorul va crește cu unul pentru fiecare element al listei, adică. Ca urmare, vom avea numărul 1 înaintea primului element al listei, numărul 2 înaintea celui de-al doilea element al listei etc.

Desigur, browserele fac de obicei acest lucru. Cu toate acestea, folosind pseudo-elementul ::before putem, de asemenea, stila aceste numere într-un mod care nu ar fi posibil cu elementele standard numerotate din listă. În esență, toate celelalte proprietăți din regula de mai sus sunt folosite pentru a crea pur și simplu un aspect cool pentru contor (de exemplu, culoarea fundalului, colțurile rotunjite, culoarea fontului diferită etc.). Aceste stiluri demonstrează doar câteva dintre modalitățile prin care puteți schimba aspectul numerelor din listele numerotate. Și puteți face și mai multe, așa că nu ezitați să utilizați trucurile CSS pe care le cunoașteți pentru a crea liste numerotate interesante, distractive și frumoase.

Puteți vedea un exemplu de lucru gata făcut de utilizare a acestei tehnici pe site

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 type 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.

Listează CSS

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 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 se află în interiorul listei, în al doilea caz, este plasat în afara listei.

listă-stil-poziție

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.

stil 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 următoarea pagină.

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

așa cum se arată mai jos.

Primul punct
Al doilea punct
Al treilea punct

Dacă nu specificați niciun atribut suplimentar și scrieți doar eticheta

Exemplul 11.3. Creați o listă numerotată

Lista numerotata

Lucrul cu timpul

crearea de punctualitate (nu vei întârzia niciodată la nimic);
remediu pentru punctualitate (nu te vei grăbi niciodată);
modificarea percepției timpului și a ceasurilor.

Rezultat acest exemplu prezentat în Fig. 11.3.

Orez. 11.3. Vizualizare listă numerotată

Rețineți că o listă numerotată adaugă și indentare automată în partea de sus, de jos și din stânga textului.

Elementele de numerotare pot fi următoarele valori:

numere arabe (1, 2, 3, ...);
litere mari latine (A, B, C, ...);
litere latine mici (a, b, c, ...);
cifre romane majuscule (I, II, III, ...);
cifre romane mici (i, ii, iii, ...).

Pentru a indica tipul listei numerotate, utilizați atributul tip al etichetei

Tip de listă	Cod HTML	Exemplu
numere arabe		1. Ceburașka 2. Crocodil Gena 3. Shapoklyak
Litere mari ale alfabetului latin		A. Cheburashka B. Crocodil Gena C. Shapoklyak
Litere mici ale alfabetului latin		A. Cheburashka b. Crocodilul Gena c. Shapoklyak
numere romane în majuscule		I. Cheburashka II. Crocodilul Gena III. Shapoklyak
Cifre romane cu litere mici		i. Cheburashka ii. Crocodilul Gena iii. Shapoklyak

Pentru a începe o listă cu o anumită valoare, utilizați atributul start al etichetei

Exemplul 11.4. Numerotarea listei

numere romane

Regele Magnum XLIV
Regele Siegfried al XVI-lea
Regele Sigismund XXI
Regele Husbrandt I

Rezultatul acestui exemplu este prezentat în Fig. 11.4.

Orez. 11.4. Lista numerotata cu cifre romane

Destul de des trebuie să utilizați numerotarea: atunci când creați diverse liste, liste, proiectați un cuprins sau un cuprins etc.

CSS folosește contoare pentru a automatiza procesul de numerotare.

Să începem cu un exemplu simplu. Apoi, într-un mod mai complicat, vom crea o listă imbricată cu numerotarea automată a articolelor și sub-articolelor sale.

Identificarea contorului

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

Folosind proprietatea de resetare a contorului, contorului i se atribuie un nume și valoarea initiala. Numele poate fi orice, dar nu poate începe cu un număr.

Fragment de cod:

Această intrare spune că pentru etichetă este instalat un numărător numit număr cu o valoare inițială de 3.

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

Creștere contor

Proprietatea de contra-increment este folosită pentru aceasta. Este, de asemenea, folosit pentru a specifica incrementele contorului - numărul cu care valoarea contorului va crește.

Fragment de cod:

corp ( contraresetare : numărul 3 ;)
body p ( contra-increment: numărul 3 ; }

Acest fragment de cod spune că paragrafele ( etichetă

) în corpul documentului va fi numerotat cu contorul de numere în trepte de 3.

Primul paragraf va fi numerotat 6, deoarece valoarea inițială a contorului este 3, iar incrementul său este 3.

Valoarea implicită pentru incrementele contorului este 1.

Acum sunt setati toti parametrii contorului necesari: nume, valoare initiala, increment si element care va fi numerotat. Mai departe....

Display de contor

Acum trebuie să afișați valoarea contorului și să setați regulile pentru locația acestuia. Acest lucru se face folosind proprietatea conținut și pseudoelementele înainte și după.

Proprietatea conținut inserează conținutul înainte de ( inainte de) sau după ( după) a elementului specificat.

Fragment de cod:

corp ( contraresetare : numărul 3 ;)
body p:după (contra-increment: numărul 3 ; continut : " este egal cu " contor(numar) "." ;)

Așadar, la fragmentul de cod anterior am adăugat o proprietate de conținut care afișează cuvântul „egal” urmat de valoarea numărului contorului și de un punct „”. . Toate acestea sunt inserate în pagină după conținutul paragrafului ( etichetă

), ceea ce spune pseudo-elementul de după.

În cele din urmă...

Mai jos este exemplul descris.

Fragment de cod:

de 2 ori 3

de 3 ori 3

de 4 ori 3

de 5 ori 3

Rezultat:

Liste imbricate cu numerotare automată

Să ne uităm la un exemplu de utilizare a contoarelor pentru a automatiza procesul de numerotare a listelor imbricate.

Ar trebui să știți deja, atât din HTML, cât și din studierea listelor în CSS, că articolele din listă sunt numerotate automat. Dar această numerotare este cea mai simplă.

Dar numerotarea automată a subclauzelor precum 1.1, 1.2, 2.1, 2.2 etc.?

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

Fragment de cod:

Numerotare automată în CSS

Primul articol din listă

Alineatul (1) primul paragraf

Al doilea paragraf al 1-lea paragraf

Al doilea articol din listă

Alineatul (2) primul paragraf

Al doilea paragraf al al doilea paragraf

Al treilea articol de pe listă

primul paragraf al alineatului 3

Al doilea paragraf al al treilea paragraf

Al treilea paragraf al al treilea paragraf

Rezultat:

Acesta este modul în care automatizezi procesul de numerotare a listelor imbricate!

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

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

html

A planta un copac
Construiește o casă
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 de a ascunde numerele de linii care sunt atribuite automat de browser. În acest caz, este folosită proprietatea list-style: none;. .

css

html

1 A planta un copac
2 Construiește o casă
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

html

A planta un copac
Construiește o casă
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:contor(myCounter);– imprimă valoarea curentă a contorului myCounter în interiorul pseudo-elementului::before.

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