Barva sloga seznama css. Kako spremeniti barvo oznak na seznamu? Tip označevalnika seznama list-style-type

Če želite nekako ločiti vrstice označenega seznama od glavnega besedila, lahko barvo oznak na seznamu razlikujete od barve besedila.

Privzeto je črna pika. Če preprosto nastavite barvo na element li, potem nič ne bo delovalo - barva bo nastavljena na celotno črto in spremeniti morate le barvo markerja (ul li barva pik).

Kako spremeniti barvo oznake s CSS

  1. Skrivanje originalnih označevalcev seznama z uporabo lastnosti list-style-type
  2. Dodajanje lastnih označevalcev s psevdoelementom :prej in lastnosti vsebino. To vam bo omogočilo vstavljanje poljubnega besedila ali simbola pred element li.
  3. Videz označevalca je mogoče nadzirati s slogi CSS, spreminjanjem barve, pisave, ozadja itd. Uporabil sem krepko pisavo Montserrat.
li ( list-style-type: none; /* Skrij privzete oznake */ ) li:before ( družina pisav: "Montserrat", sans-serif; teža pisave: 400; barva: #d7002e; /* Barva oznake * / content: " "; /* Marker */ padding-right: 7px; /* Zamik od markerja do besedila */ )

Če imate situacijo, ko se oznake pojavljajo na nepotrebnih mestih, na primer v glavnem meniju ali v podvojenem meniju v nogi, potem je to mogoče enostavno popraviti. Samo dodajte nadrejeni element, ki vsebuje sezname, katerih barve označevalcev moramo spremeniti. Dodal sem besedo Članek in zdaj te spremembe veljajo samo za področje vsebine spletnega mesta.

Članek li ( list-style-type: none; /* Skrij privzete oznake */ ) Članek li:before ( družina pisav: "Montserrat", sans-serif; teža pisave: 400; barva: #d7002e; /* Barva označevalca */ vsebina: " "; /* Označevalnik */ padding-right: 7px; / * Zamik od markerja do besedila */ )

Obstajata dva priljubljena načina za spreminjanje barve oznak, da se razlikuje od barve besedila.

Uporaba

Znotraj vsakega elementa

  • vlagamo , nato pa vanjo postavimo besedilo. Z drugimi besedami, namesto tradicionalne sheme

  • besedilo

    • ustvarite dizajn

  • besedilo

    • V tem primeru barvo označevalcev določa lastnost barvnega sloga za izbirnik li, barvo besedila pa določa izbirnik razpona (primer 1).

    Primer 1: Uporaba ugnezdenih oznak

    Barva besedila in oznak na seznamu

    • Violina
    • Kitara
    • Dude
    • Organ organ
    • Celesta

    Rezultat tega primera je prikazan spodaj (slika 1).

    riž. 1. Oznake, ki se po barvi razlikujejo od glavnega besedila

    Kljub svoji preprostosti je metoda neprijetna, zlasti pri obsežnih seznamih, saj boste morali zdaj vsakemu elementu seznama dodajati .

    Uporaba::prej

    Bistvo je naslednje: originalne oznake seznama odstranimo prek lastnosti list-style-type in dodamo lastne oznake z uporabo psevdoelementa ::before in lastnosti vsebine. Ta povezava vam omogoča, da v tem primeru vstavite poljubno besedilo ali simbol pred element

  • . Poleg tega lahko vrsto besedila (barvo, pisavo, ozadje itd.) nadzirate tudi s slogi, kot je prikazano v primeru 2.

    2. primer: uporaba psevdoelementa ::before

    Barva označevalca seznama

    • sever
    • jug
    • Zahod
    • vzhod

    Rezultat tega primera je prikazan na sl. 2.

    V članku je predstavljenih več metod, ki vam omogočajo, da nastavite določen označevalec za neoštevilčen seznam, ter navaja njihove prednosti in slabosti.

    Če analizirate katero koli spletno stran, lahko ugotovite, da vsebina zelo pogosto vsebuje sezname različnih vrst: menije, sezname izdelkov itd. V kodi HTML je oznaka odgovorna za oštevilčen seznam, oznaka pa za označenega seznam.

    Omeniti velja tudi dejstvo, da so v praksi veliko pogostejši seznami z oznakami, ki pa imajo eno majhno pomanjkljivost. Oznaka na seznamu se prikaže drugače, odvisno od brskalnika, ki ga uporabljate. Za resnega oblikovalca je to problem.

    Če želite odpraviti ta negativni učinek, morate preklicati izpis markerja z lastnostjo sloga seznama:

    ol, ul ( slog seznama: brez; )

    S tem se začne oblikovanje seznama z edinstvenimi oznakami in ikonami. Spodaj so najpogostejši načini predstavitve ikon elementov seznama, ki so edinstvene in dosledne v vseh brskalnikih.

    Markerji skozi slike

    Najpogostejši in najpreprostejši način določanja označevalca za seznam je uporaba slike ozadja (lastnost ozadja). Metoda temelji na podajanju slike ozadja v tabeli slogov za elemente seznama in lastnosti oblazinjenja, ki rezervira prostor za nov označevalec. Spodaj je primer kode:

    ul ( slog seznama: brez; ) li ( ozadje: url (pot do slike) brez ponavljanja; oblazinjenje levo: 20 slikovnih pik; )

    Ta metoda razveseljuje s svojo edinstvenostjo, saj vam omogoča, da nastavite absolutno kateri koli marker v obliki slike. Spodaj je prikazana naša koda v brskalniku:

    Glavna pozitivna stran te metode je, da je 100-odstotno združljiva med brskalniki, kljub temu pa obstaja majhna pomanjkljivost. Uporaba slike je dodaten klic strežniku.

    Prejšnja uporaba markerjev

    Obstaja možnost, da lahko storite brez slike, če to dovoljujejo pogoji oblikovanja. To je zelo pogosto dovoljeno pri oblikovanju glavne vsebine, ko je seznam označen z najpreprostejšimi elementi, kot sta kvadrat ( ) ali puščica ( →). Tako smo prišli do točke, da lahko vsak primeren poseben znak deluje kot marker.

    Nato se pojavi vprašanje, kako v elemente seznama vstaviti posebne znake. Seveda ne ročno, sicer bi bil to zelo dolgotrajen in dolgočasen postopek, poleg tega pa bi bil tudi delovno intenziven. Psevdoelement nam bo pomagal rešiti se iz te situacije prej, katerega uporaba je vezana na določen izbirnik, kar nam omogoča avtomatizacijo našega procesa dodeljevanja oznak iz posebnih znakov. Ta rešitev je primerna za večino brskalnikov, ob upoštevanju dejstva, da bo za IE napisana izražanje.

    Spodaj je primer kode, ki ustvari označen seznam s pomišljajem:

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

    V praksi dobimo naslednjo sliko:

    Naj vas spomnim, da so v realnih pogojih vdori povezani s pogojnimi komentarji.

    Pri uporabi te metode je glavna stvar poznati kodiranje zahtevane ikone. Omeniti velja tudi, da so za izražanje posebni znaki zapisani kot številska kombinacija ali mnemonična koda. Kar zadeva lastnost vsebine, je v tem primeru najprej postavljena poševnica, nato pa je zapisana šestnajstiška koda.

    Uporaba insertAdjacentHTML

    Zgornja metoda ne deluje vedno pravilno v legendarnem IE (kljub vdoru). Natančneje, "bergle" za ta brskalnik niso v celoti razvite. Učinkovitejša metoda temelji na vstavi sosednjiHTML, spodaj je koda za to metodo:

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

    Označevalci, ki jih narišejo lastnosti CSS

    Nekatere kvadratne oznake je mogoče narisati z nekaterimi lastnostmi CSS. Na primer, kvadrat z barvnim polnilom je narisan z lastnostjo barve ozadja, kvadrat v obliki okvirja pa je narisan z lastnostjo meja (mimogrede, kvadrat s polnilom je mogoče narisati na ta način) . Primer vnosa v datoteko CSS:

    li( //z-index: izraz(runtimeStyle.zIndex = 1, to. notranjiHTML = "

    " + to. notranjiHTML) /* kramp za e6 in 7 */) li: pred, . listMarkerBackColor( barva ozadja: #539127; širina: 7px; višina: 7px; vsebina: "" ; lebdeč: levo; rob: 6px 6px 0 0; overflow: skrito; ) html. listMarkerBackColor( margin- desno: 1px; /* popravi majhno napako v IE6 */ }

    Tako bo marker, narisan z lastnostmi CSS, v praksi videti takole:

    Uporaba pred in prvim otrokom v kombinaciji

    Ta metoda se pogosto uporablja pri ustvarjanju krušnih drobtin na spletnem mestu. Za tiste, ki ne veste, o čem govorimo, si oglejte spodnji primer.

    V tem primeru je vsaka povezava med seboj ločena s posebnim znakom, vendar pred prvim elementom ne sme biti nobenega posebnega znaka. Pri tem nam bo pomagal psevdorazred prvorojenec, ki dostopa le do prvega elementa seznama. V kodi bi moralo izgledati takole

    HTML

    < ul> < li>< a href= "#" >domov < li>< a href= "#" >Blog < li>< a href= "#" >CSS < li>Veljavna koda pri uporabi target= "_blank"

    li:before( vsebina: " \21 92" ; ) li: prvi otrok: pred( vsebina: "" ; )

    Prav tako je treba omeniti, da se ta tehnika ne uporablja samo za drobtinice, ampak tudi za običajne označene sezname, odvisno od načrtovanja.

    V katerih brskalnikih deluje?

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

    zaključki

    Če povzamemo, lahko opazimo dejstvo, da je uporaba psevdoelementa pred upravičena in racionalna v glavni vsebini, saj ni posebnih zahtev za oblikovanje seznamov. To pa bo zmanjšalo obremenitev strežnika v primerjavi z možnostjo uporabe slike. In če opazite tudi dejstvo, da lahko glavna vsebina vsebuje veliko označenih seznamov, potem lahko razlika postane pomembnejša. Toda slike imajo velike koristi v smislu oblikovalskih rešitev markerjev.

    Seznami CSS— niz lastnosti, odgovornih za oblikovanje seznamov. Uporaba seznamov HTML je zelo pogosta pri ustvarjanju navigacijskih vrstic spletnega mesta. Postavke seznama predstavljajo zbirko blokovnih elementov.

    Z uporabo standardnih lastnosti CSS lahko spremenite videz označevalca seznama, dodajte sliko za marker, in spremenite lokacijo markerja. Višino bloka markerjev lahko nastavite z lastnostjo line-height.

    Oblikovanje seznamov z uporabo slogov CSS

    1. Tip označevalnika seznama list-style-type

    Lastnost spremeni vrsto markerja oz odstrani marker za označene in oštevilčene sezname. Podedovano.

    list-style-type
    Vrednote:
    disk Privzeta vrednost. Zapolnjen krog deluje kot oznaka za elemente seznama.
    armenski Tradicionalno armensko številčenje.
    krog Odprt krog deluje kot oznaka.
    cjk-ideografski Ideografsko številčenje.
    decimalno 1, 2, 3, 4, 5, …
    decimalna-začetna-ničla 01, 02, 03, 04, 05, …
    gruzijsko Tradicionalno gruzijsko oštevilčenje.
    hebrejščina Tradicionalno hebrejsko številčenje.
    hiragana Japonsko oštevilčenje: a, i, u, e, o, …
    hiragana-iroha Japonsko številčenje: i, ro, ha, ni, ho, …
    katakana Japonsko oštevilčenje: A, I, U, E, O, …
    katakana-iroha Japonsko oštevilčenje: I, RO, HA, NI, HO, …
    nižja alfa a, b, c, d, e, …
    spodnje-grški Male črke grške abecede.
    nižje-lat a, b, c, d, e, …
    spodnje-rim i, ii, iii, iv, v, …
    nič Markerja ni.
    kvadrat Zapolnjen ali nepopolnjen kvadrat deluje kot oznaka.
    zgornja alfa A, B, C, D, E, …
    zgornje-lat A, B, C, D, E, …
    zgornji roman I, II, III, IV, V, …
    začetnica Nastavi vrednost lastnosti na privzeto vrednost.
    dedovati Podeduje vrednost lastnosti od nadrejenega elementa.

    Sintaksa

    Ul (vrsta sloga seznama: brez;) ul (vrsta sloga seznama: kvadrat;) ol (vrsta sloga seznama: brez;) ol (vrsta sloga seznama: nižja alfa;) riž. 1. Primer oblikovanja označenih in oštevilčenih seznamov

    2. Slike za elemente seznama list-style-image

    Slike in gradientna polnila lahko uporabite kot oznake elementov seznama. Podedovano.

    Sintaksa

    Ul (slika-sloga-seznama: url("images/romb.png");) ul (slika-sloga-seznama: linearni-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
    riž. 2. Oblikujte seznam z oznakami s sliko
    riž. 3. Oblikujte seznam z oznakami z uporabo preliva

    3. Položaj sloga seznama

    Ta lastnost omogoča, da oznako postavite zunaj ali znotraj vsebine elementa seznama. Podedovano.

    Ta članek z vadnico se bo osredotočil na delo s seznami v CSS, naučili se boste, kako spremeniti vrsto oznake, lokacijo oznake glede na element seznama, ustvariti svoje lastne oznake in celo spremeniti barvo oznake.

    Mislim, da že veste, da HTML 5 uporablja dve glavni vrsti seznamov (brez opisnih seznamov in elementov menija):