CSS boja u stilu liste. Kako promijeniti boju markera na listi? Tip markera liste lista-stil-tip

Da biste nekako razlikovali redove na listi za nabrajanje od glavnog teksta, možete napraviti boju znakova za nabrajanje na listi različitom od boje teksta.

Podrazumevana je crna tačka. Ako jednostavno postavite boju na element li, onda ništa neće raditi - boja će biti postavljena na cijelu liniju, a trebate samo promijeniti boju markera (ul li boja tačaka).

Kako promijeniti boju metka koristeći CSS

  1. Sakrivanje originalnih markera liste pomoću svojstva tip-stil liste
  2. Dodavanje vlastitih markera pomoću pseudo-elementa :prije i svojstva sadržaja. Ovo će vam omogućiti da umetnete bilo koji tekst ili simbol prije elementa li.
  3. Izgled markera može se kontrolisati kroz CSS stilove, mijenjajući boju, font, pozadinu i još mnogo toga. Koristio sam podebljani Montserrat font.
li (list-style-type: none; /* Sakrij zadane markere */ ) li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; boja: #d7002e; /* Boja markera * / sadržaj: " "; /* Marker */ padding-right: 7px; /* Uvlačenje od markera do teksta */ )

Ako imate situaciju da se markeri pojavljuju na nepotrebnim mjestima, na primjer u glavnom izborniku ili u duplikatu izbornika u podnožju, onda se to može lako popraviti. Samo ga dodajte roditeljski element, koji sadrži liste čije boje markera moramo promijeniti. Dodao sam riječ članak i sada se ove promjene odnose samo na područje sadržaja stranice.

članak li (list-style-type: none; /* Sakrij zadane markere */) članak li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; boja: #d7002e; /* Boja markera */ sadržaj: " "; /* Marker */ padding-right: 7px; / * Uvlačenje od markera do teksta */ )

Postoje dva popularna načina da promijenite boju metaka da se razlikuje od boje teksta.

Upotreba

Unutar svakog elementa

  • mi investiramo , a zatim stavljamo tekst unutar njega. Drugim riječima, umjesto tradicionalne šeme

  • tekst

    • kreirati dizajn

  • tekst

    • U ovom slučaju, boja markera je određena svojstvom stila boje za li selektor, a boja teksta određena je selektorom raspona (primjer 1).

    Primjer 1: Korištenje ugniježđenih oznaka

    Boja teksta i oznaka na listi

    • Violina
    • gitara
    • Gajde
    • Organ organa
    • Celesta

    Rezultat ovog primjera je prikazan ispod (Slika 1).

    Rice. 1. Markeri koji se po boji razlikuju od glavnog teksta

    Uprkos svojoj jednostavnosti, metoda je nezgodna, posebno sa obimnim listama, jer ćete sada morati da dodajete svaku stavku liste .

    Upotreba::prije

    Poenta je sledeća: uklanjamo originalne markere liste kroz svojstvo tipa-stil liste i dodajemo sopstvene markere koristeći pseudoelement ::before i svojstvo content. Ova veza vam omogućava da umetnete bilo koji tekst ili simbol prije elementa, u ovom slučaju

  • . Štaviše, tip teksta (boja, font, pozadina, itd.) se takođe može kontrolisati kroz stilove, kao što je prikazano u primeru 2.

    Primjer 2: Upotreba pseudoelementa ::before

    Boja markera liste

    • Sjever
    • Jug
    • Zapad
    • Istok

    Rezultat ovog primjera prikazan je na sl. 2.

    Članak predstavlja nekoliko metoda koje vam omogućavaju da postavite određeni marker za nenumerisanu listu, a također ukazuje na njihove prednosti i nedostatke

    Ako analizirate bilo koji sajt, možete otkriti da sadržaj vrlo često sadrži liste raznih vrsta: menije, liste proizvoda itd. U HTML kodu oznaka je odgovorna za numerisanu listu, a oznaka za označenu lista.

    Vrijedi napomenuti i činjenicu da su u praksi liste sa nabrajanjem mnogo češće, ali imaju jedan mali nedostatak. Oznaka na listi se pojavljuje drugačije u zavisnosti od pretraživača koji koristite. Za ozbiljnog dizajnera ovo je problem.

    Da biste eliminirali ovaj negativni efekat, morate otkazati izlaz markera koristeći svojstvo stila liste:

    ol, ul (stil liste: nema; )

    Ovo počinje formiranje liste sa jedinstvenim markerima i ikonama. Ispod su najčešći načini za predstavljanje ikona stavki liste koje su jedinstvene i konzistentne u svim pretraživačima.

    Markeri kroz slike

    Najčešći i najjednostavniji način za navođenje markera za listu je korištenje pozadinske slike (svojstvo pozadine). Metoda se zasniva na određivanju u tabeli stilova pozadinske slike za stavke liste, kao i svojstva paddinga, koja rezerviše prostor za novi marker. Ispod je primjer koda:

    ul ( stil liste: nema; ) li( pozadina: url (putanja do slike) ne ponavlja; padding- lijevo: 20px; )

    Ova metoda oduševljava svojom jedinstvenošću, jer vam omogućava da postavite apsolutno bilo koji marker u obliku slike. Ispod je kako će naš kod izgledati u pretraživaču:

    Glavna pozitivna strana ove metode je da je 100% kompatibilna sa svim pretraživačima, ali uprkos tome, postoji mali nedostatak. Korišćenje slike je dodatni poziv serveru.

    Markeri koji se koriste ranije

    Postoji opcija kada možete bez slike, ako to dozvoljavaju uslovi dizajna. Ovo je vrlo često dozvoljeno pri dizajniranju glavnog sadržaja, kada je lista označena najjednostavnijim elementima, kao što su kvadrat ( ) ili strelica ( →). Dakle, došli smo do toga da svaki odgovarajući specijalni znak može djelovati kao marker.

    Zatim se postavlja pitanje kako umetnuti posebne znakove u elemente liste. Naravno, ne ručno, inače bi to bio veoma dugotrajan i zamoran proces, plus bio bi i radno intenzivan. Pseudo-element će nam pomoći da se izvučemo iz ove situacije prije, čija je upotreba vezana za određeni selektor, što nam omogućava da automatiziramo naš proces dodjeljivanja markera iz posebnih znakova. Ovo rješenje je pogodno za većinu pretraživača, uzimajući u obzir činjenicu da će za IE biti napisano izraz.

    Ispod je primjer koda koji proizvodi listu s nabrajanjem s crticom:

    li( this. innerHTML = "-" + this. innerHTML) /*IE hack*/ ) li: before( content: " \201 3" ; }

    U praksi dobijamo sledeću sliku:

    Da vas podsjetim da su u stvarnim uslovima hakovi povezani sa uslovnim komentarima.

    Kada koristite ovu metodu, glavna stvar je znati kodiranje potrebne ikone. Također je vrijedno napomenuti da se za izražavanje posebni znakovi pišu kao numerička kombinacija ili mnemonički kod. Što se tiče svojstva sadržaja, u ovom slučaju se prvo postavlja kosa crta, a zatim se upisuje heksadecimalni kod.

    Korištenje insertAdjacentHTML

    Gornja metoda ne radi uvijek ispravno u legendarnom IE (uprkos haku). Tačnije, „štake“ za ovaj pretraživač nisu u potpunosti razvijene. Efikasnija metoda se zasniva na insertAdjacentHTML, ispod je kod za ovu metodu:

    li( //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }

    Markeri nacrtani CSS svojstvima

    Neki kvadratni markeri se mogu nacrtati pomoću nekih CSS svojstava. Na primjer, kvadrat s ispunom u boji se crta pomoću svojstva background-color, a kvadrat u obliku okvira se crta pomoću svojstva granice (usput, kvadrat s ispunom se može nacrtati na ovaj način) . Primjer unosa u CSS fajlu:

    li( //z-indeks: izraz(runtimeStyle.zIndex = 1, ovo. innerHTML = "

    " + ovo. innerHTML) /* hack za e6 i 7 */) li: prije, . listMarkerBackColor( boja pozadine: #539127; širina: 7px; visina: 7px; sadržaj: "" ; float: lijevo; margina: 6px 6px 0 0 ; overflow: skriveno; ) html . listMarkerBackColor( margin-desno: 1px; /* popraviti mali bug u IE6 */ }

    Dakle, marker nacrtan sa CSS svojstvima će izgledati ovako u praksi:

    Korištenje prije i prvog djeteta u kombinaciji

    Ova metoda se često koristi pri kreiranju krušnih mrvica na web stranici. Za one koji ne znaju o čemu govorimo, pogledajte primjer u nastavku.

    U ovom slučaju, svaka veza je odvojena jedna od druge posebnim znakom, ali ne bi trebalo biti nikakvog posebnog znaka prije prvog elementa. U tome će nam pomoći pseudo-klasa prvo dijete, koji pristupa samo prvom elementu liste. U kodu bi to trebalo izgledati ovako

    HTML

    < ul> < li>< a href= "#" >Dom < li>< a href= "#" >Blog < li>< a href= "#" >CSS < li>Važeći kod kada koristite target= "_blank"

    li:prije (sadržaj: " \21 92" ; ) li: prvo dijete: prije (sadržaj: "" ; )

    Također je vrijedno napomenuti da se ova tehnika koristi ne samo za krušne mrvice, već i za obične liste s nabrajanjem, ovisno o dizajnu.

    U kojim pretraživačima radi?

    6.0+ 4.0+ 9.5+ 3.0+ 3.0+ - -

    zaključci

    Da rezimiramo, možemo primijetiti činjenicu da je upotreba pseudoelementa prije opravdana i racionalna u glavnom sadržaju, budući da ne postoje posebni zahtjevi za dizajn lista. Ovo će zauzvrat smanjiti opterećenje servera, u poređenju sa opcijom kada se koristi slika. A ako primijetite i činjenicu da glavni sadržaj može sadržavati mnogo lista sa nabrajanjem, onda razlika može postati značajnija. Ali slike imaju velike koristi u smislu dizajnerskih rješenja markera.

    CSS liste— skup svojstava odgovornih za dizajn lista. Korištenje HTML lista je vrlo uobičajeno kada se kreiraju trake za navigaciju web stranice. Stavke liste predstavljaju kolekciju blok elemenata.

    Koristeći standardna CSS svojstva možete promijenite izgled markera liste, dodajte sliku za marker, i promijeniti lokaciju markera. Visina bloka markera može se podesiti pomoću svojstva line-height.

    Dizajniranje lista koristeći CSS stilove

    1. Tip markera liste lista-stil-tip

    Svojstvo mijenja tip markera ili uklanja marker za liste sa oznakama i brojevima. Naslijeđeno.

    tip-stil liste
    vrijednosti:
    disk Zadana vrijednost. Popunjeni krug služi kao marker za stavke liste.
    Jermenski Tradicionalna armenska numeracija.
    krug Otvoreni krug služi kao marker.
    cjk-ideographic Ideografsko numerisanje.
    decimalni 1, 2, 3, 4, 5, …
    decimalna-početna-nula 01, 02, 03, 04, 05, …
    georgian Tradicionalna gruzijska numeracija.
    hebrejski Tradicionalna hebrejska numeracija.
    hiragana Japansko numerisanje: a, i, u, e, o,…
    hiragana-iroha Japansko numerisanje: i, ro, ha, ni, ho,…
    katakana Japansko numerisanje: A, I, U, E, O,…
    katakana-iroha Japansko numerisanje: I, RO, HA, NI, HO, …
    niži alfa a, b, c, d, e, …
    donje-grčki Mala slova grčke abecede.
    niži latinski a, b, c, d, e, …
    nižerimski i, ii, iii, iv, v, …
    nijedan Nema markera.
    kvadrat Popunjen ili nepopunjen kvadrat služi kao marker.
    gornji alfa A, B, C, D, E, …
    gornji latinski A, B, C, D, E, …
    gornji roman I, II, III, IV, V, …
    početni Postavlja vrijednost svojstva na zadanu vrijednost.
    nasljediti Nasljeđuje vrijednost svojstva od roditeljskog elementa.

    Sintaksa

    Ul (tip-stil-liste: nema;) ul (tip-stil-liste: kvadrat;) ol (tip-stil-liste: nema;) ol (tip-stil-liste: niži-alfa;) Rice. 1. Primjer dizajniranja lista sa nabrajanjem i brojevima

    2. Slike za stavke liste lista-stil-slika

    Možete koristiti slike i gradijentne ispune kao markere stavki liste. Naslijeđeno.

    Sintaksa

    Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
    Rice. 2. Dizajnirajte listu sa nabrajanjem koristeći sliku
    Rice. 3. Dizajnirajte listu sa nabrajanjem koristeći gradijent

    3. Pozicija u stilu liste

    Ovo svojstvo pruža mogućnost postavljanja markera izvan ili unutar sadržaja stavke liste. Naslijeđeno.

    Ovaj tutorial članak će se fokusirati na rad sa listama u CSS-u, naučit ćete kako promijeniti vrstu metka, lokaciju metka u odnosu na stavku liste, kreirati vlastite oznake za nabrajanje, pa čak i promijeniti boju metka.

    Mislim da već znate da HTML 5 koristi dvije glavne vrste lista (isključujući liste opisa i stavke menija):