Saraksta stila css krāsa. Kā sarakstā mainīt marķieru krāsu? Saraksts marķiera tips list-style-type

Lai kaut kādā veidā atšķirtu aizzīmju saraksta rindiņas no galvenā teksta, varat iestatīt aizzīmju krāsu sarakstā atšķirīgu no teksta krāsas.

Noklusējums ir melns punkts. Ja vienkārši iestatīsit li elementa krāsu, nekas nedarbosies - krāsa tiks iestatīta uz visu līniju, un jums būs jāmaina tikai marķiera krāsa (punktu ul li krāsa).

Kā mainīt aizzīmju krāsu, izmantojot CSS

  1. Sākotnējo saraksta marķieru slēpšana, izmantojot īpašumu saraksta stila veids
  2. Savu marķieru pievienošana, izmantojot pseidoelementu : iepriekš un īpašības saturu. Tas ļaus pirms elementa ievietot jebkuru tekstu vai simbolu li.
  3. Marķiera izskatu var kontrolēt, izmantojot CSS stilus, mainot krāsu, fontu, fonu un daudz ko citu. Es izmantoju treknu Montserratas fontu.
li ( saraksta stila veids: nav; /* Slēpt noklusējuma marķierus */ ) li:before ( font-family: "Montserrat", sans-serif; fonta svars: 400; krāsa: #d7002e; /* Marķiera krāsa * / saturs: " "; /* Marķieris */ padding-right: 7px /* Atkāpe no marķiera līdz tekstam */ )

Ja jums ir situācija, kad marķieri parādās nevajadzīgās vietās, piemēram, galvenajā izvēlnē vai dublētajā kājenes izvēlnē, to var viegli novērst. Vienkārši pievienojiet to vecāku elements, kurā ir saraksti, kuru marķieru krāsas mums ir jāmaina. Es pievienoju vārdu rakstu un tagad šīs izmaiņas attiecas tikai uz vietnes satura apgabalu.

rakstu li ( saraksta stila veids: nav; /* Slēpt noklusējuma marķierus */ ) rakstu li:before ( fontu saime: "Montserrat", sans-serif; fonta svars: 400; krāsa: #d7002e; /* Marķiera krāsa */ saturs: " "; /* Marķieris */ padding-right: 7px; / * Atkāpe no marķiera līdz tekstam */ )

Ir divi populāri veidi, kā mainīt aizzīmju krāsu, lai tā atšķirtos no teksta krāsas.

Lietošana

Katra elementa iekšpusē

  • mēs ieguldām , un pēc tam ievietojam tekstu tajā. Citiem vārdiem sakot, tradicionālās shēmas vietā

  • tekstu

    • izveidot dizainu

  • tekstu

    • Šajā gadījumā marķieru krāsu nosaka li atlasītāja krāsu stila rekvizīts, un teksta krāsu nosaka diapazona atlasītājs (1. piemērs).

    1. piemērs: ligzdoto tagu izmantošana

    Teksta un aizzīmju krāsa sarakstā

    • Vijole
    • Ģitāra
    • Dūdas
    • Mucas ērģeles
    • Celesta

    Šī piemēra rezultāts ir parādīts zemāk (1. attēls).

    Rīsi. 1. Marķieri, kas pēc krāsas atšķiras no galvenā teksta

    Neskatoties uz vienkāršību, metode ir neērta, īpaši ar apjomīgiem sarakstiem, jo ​​tagad jums būs jāpievieno katrs saraksta vienums .

    Lietošana::pirms

    Lieta ir šāda: mēs noņemam sākotnējos saraksta marķierus, izmantojot rekvizītu list-style-type, un pievienojam savus marķierus, izmantojot pseidoelementu ::before un satura rekvizītu. Šajā gadījumā šī saite ļauj ievietot jebkuru tekstu vai simbolu pirms elementa

  • . Turklāt teksta veidu (krāsu, fontu, fonu utt.) var kontrolēt, izmantojot stilus, kā parādīts 2. piemērā.

    2. piemērs: pseidoelementa ::before izmantošana

    Saraksta marķiera krāsa

    • Ziemeļi
    • Dienvidi
    • Rietumi
    • Austrumi

    Šī piemēra rezultāts ir parādīts attēlā. 2.

    Rakstā ir parādītas vairākas metodes, kas ļauj iestatīt konkrētu marķieri nenumerētam sarakstam, kā arī norādītas to priekšrocības un trūkumi

    Ja analizējat jebkuru vietni, varat atklāt faktu, ka saturs ļoti bieži satur dažāda veida sarakstus: izvēlnes, produktu sarakstus utt. HTML kodā tags ir atbildīgs par numurētu sarakstu, bet tags par aizzīmēm. sarakstu.

    Ir arī vērts atzīmēt faktu, ka praksē aizzīmju saraksti ir daudz izplatītāki, taču tiem ir viens neliels trūkums. Sarakstā esošais marķieris tiek rādīts atšķirīgi atkarībā no izmantotās pārlūkprogrammas. Nopietnam dizainerim tā ir problēma.

    Lai novērstu šo negatīvo efektu, jums ir jāatceļ marķiera izvade, izmantojot saraksta stila rekvizītu:

    ol, ul ( saraksta stils: nav; )

    Tas sāk izveidot sarakstu ar unikāliem marķieriem un ikonām. Tālāk ir norādīti visizplatītākie veidi, kā parādīt saraksta vienumu ikonas, kas ir unikālas un konsekventas visās pārlūkprogrammās.

    Marķieri caur attēliem

    Visizplatītākais un vienkāršākais veids, kā norādīt saraksta marķieri, ir izmantot fona attēlu (fona rekvizītu). Metodes pamatā ir saraksta elementu fona attēla norādīšana stila tabulā, kā arī polsterējuma rekvizīts, kas rezervē vietu jaunajam marķierim. Zemāk ir koda piemērs:

    ul (saraksta stils: nav; ) li( fons: url (ceļš uz attēlu) neatkārtojas; polsterējums- pa kreisi: 20 pikseļi; )

    Šī metode priecē ar savu unikalitāti, jo tā ļauj attēla formā iestatīt absolūti jebkuru marķieri. Tālāk ir norādīts, kā mūsu kods izskatīsies pārlūkprogrammā:

    Šīs metodes galvenā pozitīvā puse ir tā, ka tā ir 100% saderīga ar vairākām pārlūkprogrammām, taču, neskatoties uz to, ir neliels trūkums. Attēla izmantošana ir papildu zvans serverim.

    Marķieri ar pirms

    Ir iespēja, kad var iztikt bez bildes, ja projektēšanas apstākļi to atļauj. Tas ļoti bieži tiek atļauts, veidojot galveno saturu, kad saraksts ir atzīmēts ar vienkāršākajiem elementiem, piemēram, kvadrātu ( ) vai bultiņu ( →). Tādējādi mēs esam nonākuši pie tā, ka jebkurš piemērots īpašais varonis var darboties kā marķieris.

    Tālāk rodas jautājums, kā saraksta elementos ievietot speciālās rakstzīmes. Protams, ne ar rokām, pretējā gadījumā tas būtu ļoti ilgstošs un nogurdinošs process, turklāt tas būtu arī darbietilpīgs. Pseidoelements palīdzēs mums izkļūt no šīs situācijas pirms tam, kuras izmantošana ir saistīta ar konkrētu atlasītāju, kas ļauj automatizēt mūsu procesu, piešķirot marķierus no īpašajām rakstzīmēm. Šis risinājums ir piemērots lielākajai daļai pārlūkprogrammu, ņemot vērā to, ka IE gadījumā tas tiks rakstīts izteiksme.

    Tālāk ir sniegts koda piemērs, kas izveido sarakstu ar aizzīmēm ar domuzīmi:

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

    Praksē mēs iegūstam šādu attēlu:

    Atgādināšu, ka reālos apstākļos hakeri ir saistīti ar nosacītiem komentāriem.

    Izmantojot šo metodi, galvenais ir zināt vajadzīgās ikonas kodējumu. Ir arī vērts atzīmēt, ka izteiksmei īpašās rakstzīmes tiek rakstītas kā ciparu kombinācija vai mnemonisks kods. Kas attiecas uz satura rekvizītu, šajā gadījumā vispirms tiek ievietota slīpsvītra un pēc tam tiek ierakstīts heksadecimālais kods.

    Izmantojot insertAdjacentHTML

    Iepriekš minētā metode ne vienmēr darbojas pareizi leģendārajā IE (neskatoties uz uzlaušanu). Precīzāk, šīs pārlūkprogrammas “kruķi” nav pilnībā izstrādāti. Efektīvāka metode ir balstīta uz insertAdjacentHTML, tālāk ir šīs metodes kods:

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

    Marķieri, kas zīmēti pēc CSS rekvizītiem

    Dažus kvadrātveida marķierus var uzzīmēt, izmantojot dažus CSS rekvizītus. Piemēram, kvadrāts ar krāsainu aizpildījumu tiek uzzīmēts, izmantojot īpašību background-color, un kvadrāts rāmja formā tiek uzzīmēts, izmantojot rekvizītu border (starp citu, šādā veidā var uzzīmēt kvadrātu ar aizpildījumu) . Ieraksta piemērs CSS failā:

    li( //z-index: izteiksme(runtimeStyle.zIndex = 1,šis. innerHTML = "

    " + šis. innerHTML) /* uzlauzt e6 un 7 */) li: pirms, . listMarkerBackColor( fona krāsa: #539127; platums: 7 pikseļi; augstums: 7 pikseļi; saturs: "" ; peldēšana: pa kreisi; mala: 6 pikseļi 6 pikseļi 0 0 ; pārpilde: paslēpts; ) html . listMarkerBackColor( mala- pa labi: 1px; /* izlabojiet nelielu kļūdu IE6 */ }

    Tādējādi marķieris, kas uzzīmēts ar CSS īpašībām, praksē izskatīsies šādi:

    Lietojot pirms un pirmā bērna kombinācijā

    Šo metodi bieži izmanto, veidojot maizes drupatas vietnē. Tiem, kas nezina, par ko mēs runājam, skatiet tālāk redzamo piemēru.

    Šajā gadījumā katra saite ir atdalīta viena no otras ar īpašu rakstzīmi, taču pirms pirmā elementa nedrīkst būt īpaša rakstzīme. Šajā jautājumā mums palīdzēs pseidoklase pirmais bērns, kas piekļūst tikai pirmajam saraksta elementam. Kodā tam vajadzētu izskatīties šādi

    HTML

    < ul> < li>< a href= "#" >mājas < li>< a href= "#" >Emuārs < li>< a href= "#" >CSS < li>Derīgs kods, izmantojot target= "_blank"

    li: pirms( saturs: " \21 92" ; ) li: pirmais bērns: pirms( saturs: "" ; )

    Ir arī vērts atzīmēt, ka šo paņēmienu izmanto ne tikai rīvmaizēm, bet arī parastajiem sarakstiem ar aizzīmēm atkarībā no dizaina īsuma.

    Kādās pārlūkprogrammās tas darbojas?

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

    secinājumus

    Rezumējot, var atzīmēt faktu, ka pseidoelementa pirms izmantošana ir pamatota un racionāla galvenajā saturā, jo nav īpašu prasību sarakstu veidošanai. Tas savukārt samazinās servera slodzi, salīdzinot ar opciju, izmantojot attēlu. Un, ja ņemat vērā arī faktu, ka galvenajā saturā var būt daudz sarakstu ar aizzīmēm, atšķirība var kļūt vēl nozīmīgāka. Taču attēliem ir liela nozīme marķieru dizaina risinājumu ziņā.

    CSS saraksti— rekvizītu kopums, kas atbild par sarakstu veidošanu. HTML sarakstu izmantošana ir ļoti izplatīta, veidojot vietņu navigācijas joslas. Saraksta vienumi ir bloka elementu kolekcija.

    Izmantojot standarta CSS rekvizītus, varat mainīt saraksta marķiera izskatu, pievienojiet attēlu marķierim, un mainīt marķiera atrašanās vietu. Marķiera bloka augstumu var iestatīt ar line-height rekvizītu.

    Sarakstu veidošana, izmantojot CSS stilus

    1. Saraksts marķiera tips list-style-type

    Rekvizīts maina marķiera veidu vai noņem marķieri aizzīmētiem un numurētiem sarakstiem. Iedzimts.

    saraksta stila veids
    Vērtības:
    disku Noklusējuma vērtība. Aizpildīts aplis darbojas kā saraksta vienumu marķieris.
    armēņu Tradicionālā armēņu numerācija.
    aplis Atvērts aplis darbojas kā marķieris.
    cjk-ideogrāfisks Ideogrāfiskā numerācija.
    decimālzīme 1, 2, 3, 4, 5, …
    decimāldaļas vadošā nulle 01, 02, 03, 04, 05, …
    gruzīnu Tradicionālā gruzīnu numerācija.
    ebreju valoda Tradicionālā ebreju numerācija.
    hiragana Numerācija japāņu valodā: a, i, u, e, o, …
    hiragana-iroha Numerācija japāņu valodā: i, ro, ha, ni, ho, …
    katakana Numerācija japāņu valodā: A, I, U, E, O,…
    katakana-iroha Numerācija japāņu valodā: I, RO, HA, NI, HO,…
    zemākā alfa a, b, c, d, e,…
    apakšgrieķu valoda Grieķu alfabēta mazie burti.
    zemākā latīņu valoda a, b, c, d, e,…
    apakšromiešu i, ii, iii, iv, v, …
    neviens Nav marķiera.
    kvadrāts Aizpildīts vai neaizpildīts kvadrāts darbojas kā marķieris.
    augšējā alfa A, B, C, D, E,…
    augšējā latīņu valoda A, B, C, D, E,…
    augšējais-romāns I, II, III, IV, V,…
    sākotnējā Iestata rekvizīta vērtību uz noklusējuma vērtību.
    mantot Manto rekvizītu vērtību no vecākelementa.

    Sintakse

    Ul (saraksta stila veids: nav;) ul (saraksta stila veids: kvadrāts;) ol (saraksta stila veids: nav;) ol (saraksta stila veids: apakšējā alfa;) Rīsi. 1. Aizzīmju un numurētu sarakstu noformēšanas piemērs

    2. Attēli saraksta vienumiem list-style-image

    Varat izmantot attēlus un gradienta aizpildījumus kā saraksta vienumu marķierus. Iedzimts.

    Sintakse

    Ul (saraksta stila attēls: url("images/romb.png");) ul (saraksta stila attēls: lineārs gradients (#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
    Rīsi. 2. Izveidojiet sarakstu ar aizzīmēm, izmantojot attēlu
    Rīsi. 3. Izveidojiet sarakstu ar aizzīmēm, izmantojot gradientu

    3. Saraksta stila pozīcija

    Šis rekvizīts nodrošina iespēju novietot marķieri ārpus saraksta vienuma satura vai tā iekšpusē. Iedzimts.

    Šajā apmācības rakstā galvenā uzmanība tiks pievērsta darbam ar sarakstiem CSS, jūs uzzināsit, kā mainīt aizzīmes veidu, aizzīmes atrašanās vietu attiecībā pret saraksta vienumu, izveidot savas aizzīmes un pat mainīt aizzīmes krāsu.

    Es domāju, ka jūs jau zināt, ka HTML 5 izmanto divus galvenos sarakstu veidus (izņemot aprakstu sarakstus un izvēlnes vienumus):