Farba css štýlu zoznamu. Ako zmeniť farbu značiek v zozname? Typ značky zoznamu typ-štýl zoznamu

Ak chcete nejako odlíšiť riadky zoznamu s odrážkami od hlavného textu, môžete zmeniť farbu odrážok v zozname od farby textu.

Predvolená je čierna bodka. Ak jednoducho nastavíte farbu na prvok li, nebude fungovať nič - farba sa nastaví na celý riadok a stačí zmeniť farbu fixky (ul li farbu bodiek).

Ako zmeniť farbu odrážky pomocou CSS

  1. Skrytie pôvodných značiek zoznamu pomocou vlastnosti list-style-type
  2. Pridanie vlastných značiek pomocou pseudoprvku :predtým a vlastnosti obsahu. To vám umožní vložiť akýkoľvek text alebo symbol pred prvok li.
  3. Vzhľad značky je možné ovládať pomocou štýlov CSS, zmeny farby, písma, pozadia a podobne. Použil som tučné písmo Montserrat.
li ( list-style-type: none; /* Skryť predvolené značky */ ) li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Farba značky * / content: " "; /* Značka */ padding-right: 7px; /* Odsadenie od značky po text */ )

Ak sa vám stane, že sa značky objavia na nepotrebných miestach, napríklad v hlavnom menu alebo v duplicitnom menu v päte, dá sa to jednoducho napraviť. Stačí pridať nadradený prvok, ktorý obsahuje zoznamy, ktorých farby značiek musíme zmeniť. Pridal som slovo článok a teraz sa tieto zmeny vzťahujú iba na obsahovú oblasť lokality.

článok li ( list-style-type: none; /* Skryť predvolené značky */ ) článok li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Farba značky */ content: " "; /* Značka */ padding-right: 7px; / * Odsadenie od značky po text */ )

Existujú dva populárne spôsoby, ako zmeniť farbu odrážok tak, aby sa líšili od farby textu.

Použitie

Vo vnútri každého prvku

  • investujeme a potom do nej umiestnime text. Inými slovami, namiesto tradičnej schémy

  • text

    • vytvoriť dizajn

  • text

    • V tomto prípade je farba značiek určená vlastnosťou štýlu farby pre selektor li a farba textu je určená selektorom rozsahu (príklad 1).

    Príklad 1: Používanie vnorených značiek

    Farba textu a odrážok v zozname

    • husle
    • Gitara
    • Gajdy
    • Orgánový orgán
    • Celesta

    Výsledok tohto príkladu je uvedený nižšie (obrázok 1).

    Ryža. 1. Značky, ktoré sa farebne líšia od hlavného textu

    Napriek svojej jednoduchosti je táto metóda nepohodlná, najmä pri objemných zoznamoch, pretože teraz budete musieť pridať do každej položky zoznamu .

    Použitie::predtým

    Ide o toto: odstránime pôvodné značky zoznamu prostredníctvom vlastnosti list-style-type a pridáme vlastné značky pomocou pseudoprvku ::before a vlastnosti content. Tento odkaz vám v tomto prípade umožňuje vložiť akýkoľvek text alebo symbol pred prvok

  • . Okrem toho typ textu (farba, písmo, pozadie atď.) možno ovládať aj pomocou štýlov, ako je znázornené v príklade 2.

    Príklad 2: Použitie pseudoprvku ::before

    Uveďte farbu značky

    • Severná
    • Juh
    • West
    • východ

    Výsledok tohto príkladu je znázornený na obr. 2.

    Článok predstavuje niekoľko metód, ktoré vám umožňujú nastaviť konkrétnu značku pre nečíslovaný zoznam, a tiež uvádza ich výhody a nevýhody

    Ak analyzujete akúkoľvek stránku, zistíte, že obsah veľmi často obsahuje zoznamy rôznych druhov: menu, zoznamy produktov atď. V HTML kóde je tag zodpovedný za očíslovaný zoznam a tag za odrážkový zoznam.

    Za zmienku stojí aj fakt, že v praxi sú oveľa bežnejšie zoznamy s odrážkami, no majú jednu malú nevýhodu. Značka v zozname sa zobrazuje odlišne v závislosti od prehliadača, ktorý používate. Pre seriózneho dizajnéra je to problém.

    Ak chcete odstrániť tento negatívny efekt, musíte zrušiť výstup značky pomocou vlastnosti v štýle zoznamu:

    ol, ul ( štýl zoznamu: žiadny; )

    Tým sa začína vytváranie zoznamu s jedinečnými značkami a ikonami. Nižšie sú uvedené najbežnejšie spôsoby prezentácie ikon položiek zoznamu, ktoré sú jedinečné a konzistentné vo všetkých prehliadačoch.

    Značky cez obrázky

    Najbežnejším a najjednoduchším spôsobom určenia značky pre zoznam je použitie obrázka na pozadí (vlastnosť pozadia). Metóda je založená na špecifikovaní obrázka pozadia pre položky zoznamu v tabuľke štýlov, ako aj vlastnosti padding, ktorá vyhradzuje priestor pre novú značku. Nižšie je uvedený príklad kódu:

    ul ( štýl zoznamu: žiadny; ) li( pozadie: adresa URL (cesta k obrázku) bez opakovania; odsadenie vľavo: 20 pixelov; )

    Táto metóda poteší svojou jedinečnosťou, pretože vám umožňuje nastaviť absolútne akúkoľvek značku vo forme obrázka. Nižšie uvádzame, ako bude náš kód vyzerať v prehliadači:

    Hlavnou pozitívnou stránkou tejto metódy je, že je 100% kompatibilná s rôznymi prehliadačmi, ale napriek tomu existuje malá nevýhoda. Použitie obrázka je dodatočné volanie na server.

    Značky používané predtým

    Existuje možnosť, keď môžete urobiť bez obrázka, ak to umožňujú konštrukčné podmienky. Toto je veľmi často povolené pri navrhovaní hlavného obsahu, keď je zoznam označený najjednoduchšími prvkami, ako je štvorec ( ) alebo šípka ( →). Dospeli sme teda k tomu, že ako marker môže pôsobiť každá vhodná špeciálna postava.

    Ďalej vyvstáva otázka, ako vložiť špeciálne znaky do prvkov zoznamu. Prirodzene, nie ručne, inak by to bol veľmi zdĺhavý a zdĺhavý proces, navyše by bol aj prácny. Pseudoprvok nám pomôže dostať sa z tejto situácie predtým, ktorej použitie je viazané na špecifický selektor, čo nám umožňuje automatizovať náš proces priraďovania značiek zo špeciálnych znakov. Toto riešenie je vhodné pre väčšinu prehliadačov, berúc do úvahy skutočnosť, že pre IE bude napísané výraz.

    Nižšie je uvedený príklad kódu, ktorý vytvára zoznam s odrážkami s pomlčkou:

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

    V praxi dostaneme nasledujúci obrázok:

    Dovoľte mi pripomenúť, že v reálnych podmienkach sú hacky spojené s podmienenými komentármi.

    Pri použití tejto metódy je hlavnou vecou poznať kódovanie požadovanej ikony. Za zmienku tiež stojí, že na vyjadrenie sa špeciálne znaky píšu ako číselná kombinácia alebo mnemotechnický kód. Čo sa týka vlastnosti content, v tomto prípade sa najprv umiestni lomka a potom sa zapíše hexadecimálny kód.

    Pomocou insertAdjacentHTML

    Vyššie uvedená metóda nie vždy funguje správne v legendárnom IE (napriek hacku). Presnejšie povedané, „barle“ pre tento prehliadač nie sú úplne vyvinuté. Efektívnejšia metóda je založená na insertAdjacentHTML, nižšie je kód pre túto metódu:

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

    Značky nakreslené vlastnosťami CSS

    Niektoré štvorcové značky možno nakresliť pomocou niektorých vlastností CSS. Napríklad štvorec s farebnou výplňou sa nakreslí pomocou vlastnosti background-color a štvorec vo forme rámu sa nakreslí pomocou vlastnosti border (mimochodom, štvorec s výplňou sa dá nakresliť týmto spôsobom) . Príklad položky v súbore CSS:

    li( //z-index: expression(runtimeStyle.zIndex = 1, toto. innerHTML = "

    " + toto. innerHTML) /* hack pre e6 a 7 */) li: predtým, . listMarkerBackColor( farba pozadia: #539127; šírka: 7px; výška: 7px; obsah: "" ; float: left; margin: 6px 6px 0 0 ; overflow: hidden; ) html . listMarkerBackColor( okraj- vpravo: 1px; /* oprava malej chyby v IE6 */ }

    Značka nakreslená s vlastnosťami CSS bude teda v praxi vyzerať takto:

    Kombinované použitie pred prvým dieťaťom a prvým dieťaťom

    Táto metóda sa často používa pri vytváraní strúhanky na webovej stránke. Pre tých, ktorí nevedia, o čom hovoríme, pozrite si príklad nižšie.

    V tomto prípade je každý odkaz od seba oddelený špeciálnym znakom, ale pred prvým prvkom by nemal byť žiadny špeciálny znak. S tým nám pomôže pseudotrieda prvorodené dieťa, ktorý pristupuje len k prvému prvku zoznamu. V kóde by to malo vyzerať takto

    HTML

    < ul> < li>< a href= "#" >Domov < li>< a href= "#" >Blog < li>< a href= "#" >CSS < li>Platný kód pri použití target= "_blank"

    li:before( content: " \21 92" ; ) li: prvé dieťa: pred( content: "" ; )

    Za zmienku tiež stojí, že táto technika sa používa nielen pre strúhanku, ale aj pre bežné zoznamy s odrážkami v závislosti od návrhu.

    V akých prehliadačoch to funguje?

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

    závery

    Aby sme to zhrnuli, môžeme si všimnúť skutočnosť, že použitie predchádzajúceho pseudoprvku je opodstatnené a racionálne v hlavnom obsahu, pretože neexistujú žiadne špeciálne požiadavky na dizajn zoznamov. To zase zníži zaťaženie servera v porovnaní s možnosťou pri použití obrázka. A ak si tiež všimnete skutočnosť, že hlavný obsah môže obsahovať veľa zoznamov s odrážkami, rozdiel môže byť výraznejší. Ale obrázky majú veľký úžitok z hľadiska riešení dizajnu markerov.

    CSS zoznamy— súbor vlastností zodpovedných za návrh zoznamov. Používanie zoznamov HTML je veľmi bežné pri vytváraní navigačných panelov webových stránok. Položky zoznamu predstavujú kolekciu prvkov bloku.

    Pomocou štandardných vlastností CSS môžete zmeniť vzhľad značky zoznamu, pridajte obrázok pre značku, a zmeniť umiestnenie značky. Výšku bloku značky je možné nastaviť pomocou vlastnosti line-height.

    Navrhovanie zoznamov pomocou štýlov CSS

    1. Typ značky zoznamu typ-štýl zoznamu

    Vlastnosť zmení typ značky resp odstráni značku pre zoznamy s odrážkami a číslované zoznamy. Zdedené.

    list-style-type
    Hodnoty:
    disk Predvolená hodnota. Vyplnený kruh funguje ako značka pre položky zoznamu.
    arménsky Tradičné arménske číslovanie.
    kruh Otvorený kruh funguje ako značka.
    cjk-ideografický Ideografické číslovanie.
    desiatkový 1, 2, 3, 4, 5, …
    desatinná-počiatočná-nula 01, 02, 03, 04, 05, …
    gruzínsky Tradičné gruzínske číslovanie.
    hebrejčina Tradičné hebrejské číslovanie.
    hiragana Japonské číslovanie: a, i, u, e, o, …
    hiragana-iroha Japonské číslovanie: i, ro, ha, ni, ho, …
    katakana Japonské číslovanie: A, I, U, E, O, …
    katakana-iroha Japonské číslovanie: I, RO, HA, NI, HO, …
    nižšia-alfa a B C d e, …
    dolnogrécky Malé písmená gréckej abecedy.
    nižšia latinčina a B C d e, …
    nižšia rímska i, ii, iii, iv, v, …
    žiadny Nie je tam žiadna značka.
    námestie Vyplnený alebo nevyplnený štvorec funguje ako značka.
    horná alfa A B C D E, …
    horný-lat A B C D E, …
    horný román I, II, III, IV, V, …
    počiatočné Nastaví hodnotu vlastnosti na predvolenú hodnotu.
    dediť Zdedí hodnotu vlastnosti z nadradeného prvku.

    Syntax

    Ul (typ-štýlu-zoznamu: žiadny;) ul (typ-štýlu-zoznamu: štvorec;) ol (typ-štýlu-zoznamu: žiadny;) ol (typ-štýlu-zoznamu: nižší-alfa;) Ryža. 1. Príklad navrhovania odrážkových a číslovaných zoznamov

    2. Obrázky pre položky zoznamu list-style-image

    Ako značky položiek zoznamu môžete použiť obrázky a prechodové výplne. Zdedené.

    Syntax

    Ul (obrázok-štýlu zoznamu: url("images/romb.png");) ul (Obrázok-štýlu-zoznamu: lineárny-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
    Ryža. 2. Navrhnite zoznam s odrážkami pomocou obrázka
    Ryža. 3. Navrhnite zoznam s odrážkami pomocou prechodu

    3. List-style-position

    Táto vlastnosť poskytuje možnosť umiestniť značku mimo alebo do obsahu položky zoznamu. Zdedené.

    Tento tutoriálový článok sa zameria na prácu so zoznamami v CSS, dozviete sa, ako zmeniť typ odrážky, umiestnenie odrážky vzhľadom na položku zoznamu, vytvárať si vlastné odrážky a dokonca zmeniť farbu odrážky.

    Myslím, že už viete, že HTML 5 používa dva hlavné typy zoznamov (okrem zoznamov popisov a položiek ponuky):