Alegerea indicatorilor standard în listele este, în general, redusă, mai ales dacă vorbiți despre liste fără numere. Ce se întâmplă dacă sarcina este să creați și să utilizați propriile marcaje, texte sau grafice? Această problemă este complet rezolvată ....
Adevărul imediat o să fac o rezervare, că pentru început vom dezasambla bazele teoretice mai probabile, deoarece există un browser numit de cine știe toată lumea. Soluția normală se bazează pe utilizarea conținutului generat automat, iar browserul menționat mai sus (să fim cinstiți până la sfârșit - nu numai el însuși) nu acceptă această caracteristică. Dar funcționează excelent în Mozilla, FireFox, Netscape 6+, Opera și Safari. Apoi vom analiza soluția universală. Din păcate, nu atât de elegant.
Uită-te la acest CSS:
Pentru a începe, ascundem marcatorul de listă, care este implicit cu ajutorul stilului de listă: none; apoi setați marginea stângă 1em, dar deplasați textul spre stânga cu aceeași valoare, adică -1em pentru a "scoate" marcajele standard din blocul elementului din listă. Utilizați: înainte de pseudo-element pentru a genera un marcator de text. În proprietatea conținutului, caracterele solicitate sunt specificate utilizând echivalentul de evacuare hexazecimală Unicode, conform cerințelor CSS2.1. În exemplu, este generată o secvență de caractere dintr-un arbore dublu și un spațiu. Grațios, simplu și frumos, dar nu pentru IE ...
... și o soluție care se potrivește tuturor browserelor. Din păcate, nu mai este așa de frumoasă. Marcatorul de text va fi pur și simplu introdus înaintea fiecărui element din listă. După cum se arată mai jos:
iar foaia de stil pentru această opțiune trebuie modificată ușor. Aici:
Cu toate acestea, există un dezavantaj în această metodă, deși nu este foarte critic. Dacă browserul CSS este dezactivat în browserul utilizatorului, acesta va vedea două marcatori pentru fiecare element de listă - un marcator generat de browser și un jeton pe care l-am adăugat manual.
Să ne uităm la o altă întrebare: cum să faceți un marcator folosind o imagine?
Pentru a aplica un marker grafic, utilizați proprietatea listă-stil-imagine. după cum se arată în exemplul de mai jos
Proprietatea de tip listă este folosită aici doar în cazul în care browser-ul utilizatorului nu are capacitatea de a folosi imaginea. Și proprietatea listă-stil-imagine specifică calea către imaginea dorită. Nu putem controla dimensiunea imaginii care este utilizată ca marcator de listă din tabelul CSS și, prin urmare, trebuie să ne asigurăm că imaginea are dimensiunile corespunzătoare. Un alt detaliu este faptul că valorile markerilor grafice sunt moștenite, iar dacă veți crea liste imbricate și doriți să renunțe la imaginea marker în ele, este necesar să se utilizeze proprietatea list-style-imagine din nou. Iată cum:
Dar dacă doriți să aveți o imagine destul de mare ca marcator de listă, această metodă nu va mai funcționa, deoarece o parte a imaginii poate fi pur și simplu "tăiată". Pentru a rezolva această limitare, trebuie să faceți ceva diferit:
Mai întâi setăm valorile pentru marginea din stânga și pentru linia stângă a listei (de ce am explicat-o într-unul din articolele anterioare). Apoi ștergeți tokenul implicit. Acum, lucrul principal: padding: 0.5em 0 0.5em 54px; - vom face loc pe partea stângă a unui element de listă, în scopul de a pune la imaginea noastră mare (de exemplu, pixeli 54h54), și apoi specificați proprietatea de fonturi, astfel încât textul elementului din listă nu este discordantă cu dimensiunea imaginii markerului, și în cele din urmă, folosind fundalul de proprietate. Pentru a insera această imagine ca marcator de listă.
Trimiteți-le prietenilor: