CSS listele - schimbarea, ștergerea, înlocuirea marcatorilor, indentare

În acest capitol:

Caracteristicile proprietatilor CSS pentru listele de stil

• Modificați vizualizarea marcajului standard pentru listele numerotate
• Setarea tipului de marcator pentru listele cu marcatori
• Setarea unei imagini în locul unui marcator pentru elementele listate

Utilizând etichete HTML, puteți crea două tipuri de liste care au marcaje: numerotate și marcate. În mod prestabilit, majoritatea browserelor afișează jetoanele de liste cu marcatori sub forma unui cerc, iar marcatorii sunt numerotați sub formă de numere de ordine. CSS oferă posibilitatea de a schimba aspectul marcajelor standard. Apoi, veți vedea exemple cu diferite tipuri de marcatori, cu care puteți schimba aspectul listelor dvs.

Modificați și ștergeți jetoanele

Pentru a modifica aspectul standard al markerului în CSS, utilizați proprietatea de tip listă. Valoarea este tipul de marcator la care doriți să înlocuiți standardul.

Un exemplu care demonstrează câteva tipuri de markeri pentru listele numerotate:

1. Faceți clic pe valoarea listei de proprietăți - tip de stil
2. Urmăriți schimbarea marcatorilor
3. Utilizați cei mai potriviți markeri pentru listele dvs.

ol # myList list-style-type: zecimal;
>

Faceți clic pe orice valoare a proprietății pentru a vedea rezultatul

În cazul listelor cu marcatori, există doar trei tipuri de markere care pot fi setate cu valorile cercului, discului și celei uriașe:

Cu valoarea niciunui, puteți elimina marcajele din elementele din listă, dar marginea din stânga va rămâne:

Înlocuirea marcatorilor cu imagini

Dacă nu utilizați niciunul dintre marcatorii impliciți, atunci CSS oferă posibilitatea de a le înlocui cu orice imagine, în acest caz proprietatea list-style-image vă va ajuta. în sensul că trebuie să înregistrați calea către imaginea selectată.

Luați în considerare faptul că imaginea nu va fi scalată automat sub listă și va fi afișată în dimensiunea sa, deci va trebui să selectați o imagine potrivită dimensiunii sau să o editați pe cea existentă prin micșorarea sau mărirea acesteia la dimensiunea dorită:

Indicați lista

Când eliminați marcajele din elementele de listă, puteți, de asemenea, să ștergeți sau să micșorați dimensiunea liniei stângi pe care browserul o stabilește în mod prestabilit. Pentru a elimina complet indentarea, va trebui să utilizați proprietatea din stânga de umplere. care vă permite să ajustați indentarea internă:

În acest exemplu, am eliminat complet indentarea din partea stângă, astfel încât elementele din listă sunt acum adiacente apropierii de marginea ferestrei browserului. Și după cum puteți vedea din exemplu, lista cu marcatori este afișată exact așa cum a fost intenționată, dar gloanțele au dispărut în lista numerotată. Motivul constă în marcatorii înșiși - în mod prestabilit, markerii nu fac parte din conținutul articolelor din listă, deci dacă eliminați linia stângă nu se mișcă împreună cu conținutul elementelor