Barva css stylu seznamu. Jak změnit barvu značek v seznamu? Typ značky seznamu typ-stylu seznamu

Chcete-li nějak odlišit řádky seznamu s odrážkami od hlavního textu, můžete barvu odrážek v seznamu odlišit od barvy textu.

Výchozí nastavení je černá tečka. Pokud jednoduše nastavíte barvu na prvek li, pak nebude fungovat nic - barva se nastaví na celý řádek a stačí změnit barvu fixu (ul li barvu teček).

Jak změnit barvu odrážky pomocí CSS

  1. Skrytí původních značek seznamu pomocí vlastnosti list-style-type
  2. Přidání vlastních značek pomocí pseudoprvku :před a vlastnosti obsah. To vám umožní vložit libovolný text nebo symbol před prvek li.
  3. Vzhled značky lze ovládat pomocí stylů CSS, změnou barvy, písma, pozadí a dalších. Použil jsem tučné písmo Montserrat.
li ( list-style-type: none; /* Skrýt výchozí značky */ ) li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Barva značky * / content: " "; /* Značka */ padding-right: 7px; /* Odsazení od značky k textu */ )

Pokud máte situaci, kdy se značky objevují na nepotřebných místech, například v hlavní nabídce nebo v duplicitní nabídce v patičce, lze to snadno opravit. Stačí přidat nadřazený prvek, který obsahuje seznamy, jejichž barvy značek musíme změnit. Přidal jsem slovo článek a nyní se tyto změny vztahují pouze na obsahovou oblast webu.

článek li ( list-style-type: none; /* Skrýt výchozí značky */ ) článek li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Barva značky */ obsah: " "; /* Značka */ padding-right: 7px; / * Odsazení od značky k textu */ )

Existují dva oblíbené způsoby, jak změnit barvu odrážek tak, aby se lišily od barvy textu.

Používání

Uvnitř každého prvku

  • investujeme a poté do něj vložíme text. Jinými slovy, namísto tradičního schématu

  • text

    • vytvořit design

  • text

    • V tomto případě je barva značek určena vlastností stylu barvy pro selektor li a barva textu je určena selektorem rozsahu (příklad 1).

    Příklad 1: Použití vnořených značek

    Barva textu a odrážek v seznamu

    • Housle
    • Kytara
    • Dudy
    • Varhanní orgán
    • Celesta

    Výsledek tohoto příkladu je uveden níže (obrázek 1).

    Rýže. 1. Značky, které se liší barvou od hlavního textu

    Navzdory své jednoduchosti je metoda nepohodlná, zejména u objemných seznamů, protože nyní budete muset přidat do každé položky seznamu .

    Použití::před

    Jde o toto: odstraníme původní značky seznamu pomocí vlastnosti list-style-type a přidáme vlastní značky pomocí pseudoprvku ::before a vlastnosti content. Tento odkaz vám v tomto případě umožňuje vložit libovolný text nebo symbol před prvek

  • . Kromě toho lze typ textu (barvu, písmo, pozadí atd.) ovládat také pomocí stylů, jak je ukázáno v příkladu 2.

    Příklad 2: Použití pseudoprvku ::before

    Seznam barvy značky

    • Severní
    • Jižní
    • Západ
    • Východní

    Výsledek tohoto příkladu je znázorněn na Obr. 2.

    Článek představuje několik metod, které vám umožňují nastavit konkrétní značku pro nečíslovaný seznam, a také uvádí jejich výhody a nevýhody

    Pokud analyzujete jakýkoli web, můžete zjistit, že obsah velmi často obsahuje seznamy různého druhu: menu, seznamy produktů atd. V HTML kódu je tag zodpovědný za očíslovaný seznam a tag za odrážkový seznam.

    Za zmínku také stojí fakt, že v praxi jsou mnohem častější seznamy s odrážkami, které však mají jeden malý nedostatek. Značka v seznamu se zobrazuje odlišně v závislosti na prohlížeči, který používáte. Pro seriózního designéra je to problém.

    Chcete-li odstranit tento negativní efekt, musíte zrušit výstup značky pomocí vlastnosti list-style:

    ol, ul ( styl seznamu: žádný; )

    Tím začíná vytváření seznamu s jedinečnými značkami a ikonami. Níže jsou uvedeny nejběžnější způsoby prezentace ikon položek seznamu, které jsou jedinečné a konzistentní ve všech prohlížečích.

    Značky prostřednictvím obrázků

    Nejběžnějším a nejjednodušším způsobem, jak určit značku pro seznam, je použít obrázek na pozadí (vlastnost pozadí). Metoda je založena na specifikaci obrázku na pozadí pro položky seznamu v tabulce stylů a také vlastnosti padding, která rezervuje místo pro novou značku. Níže je uveden příklad kódu:

    ul ( styl seznamu: žádný; ) li( pozadí: url (cesta k obrázku) neopakovat se; odsazení vlevo: 20px; )

    Tato metoda potěší svou jedinečností, protože vám umožňuje nastavit absolutně jakoukoli značku ve formě obrázku. Níže je uvedeno, jak bude náš kód vypadat v prohlížeči:

    Hlavní pozitivní stránkou této metody je, že je 100% kompatibilní s různými prohlížeči, ale i přes to existuje malá nevýhoda. Použití obrázku je další volání na server.

    Dříve používané značky

    Existuje možnost, kdy se obejdete bez obrázku, pokud to konstrukční podmínky umožňují. To je velmi často povoleno při návrhu hlavního obsahu, kdy je seznam označen nejjednoduššími prvky, jako je čtverec ( ) nebo šipka ( →). Došli jsme tedy k bodu, že jako značka může fungovat jakákoli vhodná speciální postava.

    Dále vyvstává otázka, jak vkládat speciální znaky do prvků seznamu. Samozřejmě ne ručně, jinak by to byl velmi zdlouhavý a zdlouhavý proces a navíc by byl pracný. Pseudoprvek nám pomůže dostat se z této situace před, jehož použití je vázáno na konkrétní selektor, což nám umožňuje automatizovat náš proces přiřazování značek ze speciálních znaků. Toto řešení je vhodné pro většinu prohlížečů s ohledem na skutečnost, že pro IE bude napsáno výraz.

    Níže je uveden příklad kódu, který vytváří seznam s odrážkami s pomlčkou:

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

    V praxi dostaneme následující obrázek:

    Dovolte mi připomenout, že v reálných podmínkách jsou hacky spojeny s podmíněnými komentáři.

    Při použití této metody je hlavní věcí znát kódování požadované ikony. Za zmínku také stojí, že pro vyjádření se speciální znaky zapisují jako číselná kombinace nebo mnemotechnický kód. Pokud jde o vlastnost content, v tomto případě se nejprve umístí lomítko a poté se zapíše hexadecimální kód.

    Pomocí insertAdjacentHTML

    Výše uvedená metoda ne vždy funguje správně v legendárním IE (navzdory hacku). Přesněji řečeno, „berličky“ pro tento prohlížeč nejsou plně vyvinuty. Efektivnější metoda je založena na insertAdjacentHTML, níže je kód pro tuto metodu:

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

    Značky nakreslené vlastnostmi CSS

    Některé čtvercové značky lze kreslit pomocí některých vlastností CSS. Například čtverec s barevnou výplní se nakreslí pomocí vlastnosti background-color a čtverec ve formě rámečku se vykreslí pomocí vlastnosti border (mimochodem, čtverec s výplní lze nakreslit tímto způsobem) . Příklad záznamu v souboru CSS:

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

    " + toto. innerHTML) /* hack pro e6 a 7 */) li: před, . listMarkerBackColor( barva pozadí: #539127; šířka: 7px; výška: 7px; obsah: "" ; plovoucí: vlevo; okraj: 6px 6px 0 0 ; přetečení: skryté; ) html . listMarkerBackColor( pravý okraj: 1px; /* oprava malé chyby v IE6 */ }

    Značka nakreslená s vlastnostmi CSS tedy bude v praxi vypadat takto:

    Kombinované použití před prvním dítětem a prvním dítětem

    Tato metoda se často používá při vytváření strouhanky na webu. Pro ty, kteří nevědí, o čem mluvíme, podívejte se na příklad níže.

    V tomto případě je každý odkaz od sebe oddělen speciálním znakem, ale před prvním prvkem by neměl být žádný speciální znak. S tím nám pomůže pseudotřída první dítě, který přistupuje pouze k prvnímu prvku seznamu. V kódu by to mělo vypadat takto

    HTML

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

    li:before( content: " \21 92" ; ) li: první dítě: před( content: "" ; )

    Za zmínku také stojí, že tato technika se používá nejen pro strouhanku, ale také pro běžné seznamy s odrážkami, v závislosti na zadání návrhu.

    V jakých prohlížečích to funguje?

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

    závěry

    Abychom to shrnuli, můžeme poznamenat skutečnost, že použití předchozího pseudoprvku je oprávněné a racionální v hlavním obsahu, protože neexistují žádné zvláštní požadavky na návrh seznamů. To zase sníží zatížení serveru ve srovnání s možností při použití obrázku. A pokud si také všimnete skutečnosti, že hlavní obsah může obsahovat mnoho seznamů s odrážkami, pak může být rozdíl výraznější. Ale obrázky mají velký přínos, pokud jde o řešení designu značek.

    CSS seznamy— soubor vlastností odpovědných za návrh seznamů. Používání seznamů HTML je velmi běžné při vytváření navigačních panelů webových stránek. Položky seznamu představují kolekci prvků bloku.

    Pomocí standardních vlastností CSS můžete změnit vzhled značky seznamu, přidat obrázek pro značku, a změnit umístění značky. Výšku bloku značky lze nastavit pomocí vlastnosti line-height.

    Navrhování seznamů pomocí stylů CSS

    1. Typ štítku seznamu typ-styl-listu

    Vlastnost změní typ značky resp odstraní značku pro seznamy s odrážkami a číslované seznamy. Zděděno.

    list-style-type
    Hodnoty:
    disk Výchozí hodnota. Vyplněný kruh funguje jako značka pro položky seznamu.
    arménský Tradiční arménské číslování.
    kruh Otevřený kruh funguje jako značka.
    cjk-ideografický Ideografické číslování.
    desetinný 1, 2, 3, 4, 5, …
    desetinná-počáteční-nula 01, 02, 03, 04, 05, …
    gruzínský Tradiční gruzínské číslování.
    hebrejština Tradiční hebrejské číslování.
    hiragana Japonské číslování: a, i, u, e, o, …
    hiragana-iroha Japonské číslování: i, ro, ha, ni, ho, …
    katakana Japonské číslování: A, I, U, E, O, …
    katakana-iroha Japonské číslování: I, RO, HA, NI, HO, …
    nižší-alfa a, b, c, d, e, …
    nižší řecký Malá písmena řecké abecedy.
    nižší latina a, b, c, d, e, …
    nižší římský i, ii, iii, iv, v, …
    žádný Není tam žádný fix.
    náměstí Zaplněný nebo nevyplněný čtverec funguje jako značka.
    horní alfa A, B, C, D, E, …
    horní latina A, B, C, D, E, …
    horní román I, II, III, IV, V, …
    počáteční Nastaví hodnotu vlastnosti na výchozí hodnotu.
    zdědit Zdědí hodnotu vlastnosti z nadřazeného prvku.

    Syntax

    Ul (typ-stylu-seznamu: žádný;) ul (typ-stylu-seznamu: čtverec;) ol (typ-stylu-seznamu: žádný;) ol (typ-stylu-seznamu: nižší-alfa;) Rýže. 1. Příklad návrhu odrážkových a číslovaných seznamů

    2. Obrázky pro položky seznamu list-style-image

    Jako značky položek seznamu můžete použít obrázky a přechodové výplně. Zděděno.

    Syntax

    Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
    Rýže. 2. Navrhněte seznam s odrážkami pomocí obrázku
    Rýže. 3. Navrhněte seznam s odrážkami pomocí přechodu

    3. List-style-position

    Tato vlastnost poskytuje možnost umístit značku mimo nebo dovnitř obsahu položky seznamu. Zděděno.

    Tento výukový článek se zaměří na práci se seznamy v CSS, dozvíte se, jak změnit typ odrážky, umístění odrážky vzhledem k položce seznamu, vytvořit si vlastní odrážky a dokonce i změnit barvu odrážky.

    Myslím, že už víte, že HTML 5 používá dva hlavní typy seznamů (s výjimkou seznamů popisů a položek nabídky):