Dobrý typografický design je důležitou součástí úspěšné webové stránky. CSS vám poskytuje skvělou kontrolu nad vzhledem textu na webových stránkách, které vytváříte. To zahrnuje možnost změnit barvu libovolných písem, které používáte.
Barvy písma lze měnit pomocí externího stylu , interního stylu nebo může být změněn pomocí inline stylingu v dokumentu HTML. Doporučené postupy diktují, že pro styly CSS byste měli používat externí stylový list. Vnitřní stylový list, který jsou styly psané přímo v hlavičce vašeho dokumentu, se obecně používají pouze pro malé stránky o jedné stránce. Inline styly by měly být vyloučeny, protože jsou podobné starým značkám, které jsme řešili před mnoha lety. Tyto inline styly způsobují, že je velmi obtížné řídit styl písma, protože je třeba je měnit v každé instanci inline stylu.
V tomto článku se dozvíte, jak změnit barvu písma pomocí externího stylu a stylu, který se používá v tagu odstavce. Můžete použít stejnou vlastnost stylu pro změnu barvy písma na libovolné značce, která obklopuje text, včetně značky
.Přidání stylů ke změně barvy písma
V tomto příkladu byste museli mít HTML dokument pro značku stránky a samostatný soubor CSS, který je k tomuto dokumentu připojen. Dokument HTML by pravděpodobně vytvořil řadu prvků v něm. Pro účely tohoto článku se jedná o prvek odstavce.
Zde je návod, jak změnit barvu písma textu uvnitř značek odstavců pomocí externího stylu.
Hodnoty barev mohou být vyjádřeny jako klíčová slova barev, čísla barev RGB nebo čísla hexadecimálních barev.
- Přidejte atribut stylu pro značku odstavce:
- p {}
- Umístěte vlastnost barvy ve stylu. Umístěte dvojtečku za tuto vlastnost:
- p {barva:}
- Potom přidejte hodnotu barvy za vlastnost. Ujistěte se, že tuto hodnotu ukončíte dvojtečkou:
- p {barva: černá;}
Odstavky na vaší stránce budou nyní černé.
Tento příklad používá barevné klíčové slovo - "černé". To je jeden způsob, jak přidat barvu v CSS, ale je to velmi omezující. Použití klíčových slov pro "černé" a "bílé" je jednoduché, protože tyto dvě barvy jsou velmi specifické, ale co se stane, pokud použijete klíčová slova jako "červená", "modrá" nebo "zelená"? Přesně tak, jaký stín červené, modré nebo zelené získáte? V klíčových slovech nelze určit přesně požadovaný odstín. To je důvod, proč se často používají hexadecimální hodnoty namísto barevných klíčových slov.
p {barva: # 000000; }}
Tento styl CSS také nastaví barvu odstavců na černou barvu, protože hexadecimální kód # 000000 překládá do černé barvy. Můžete dokonce použít zkratku s touto hodnotou hexadecimálních hodnot a napsat to jako # 000 a ty bys dostal totéž.
Jak jsme již zmínili, hex values fungují dobře, když potřebujete barvu, která není pouze černá nebo bílá. Zde je příklad:
p {barva: # 2f5687; }}
Tato hexadecimální hodnota by nastavila odstavce na modrou barvu, ale na rozdíl od klíčového slova "modrý", tento hex kód vám dává možnost nastavit velmi specifický odstín modré - pravděpodobně ten, který návrhář zvolí při vytváření rozhraní na této webové stránce. V tomto případě by barva byla střední, břidlicově modrá.
Nakonec můžete také použít barvy písma RGBA pro barvy písma. RGCA je nyní podporována ve všech moderních prohlížečích, abyste mohli tyto hodnoty používat s trochou obav, že nebudou podporovány ve webovém prohlížeči, ale můžete také nastavit snadnou zálohu.
p {barva: rgba (47,86,135,1); }}
Tato hodnota RGBA je stejná jako bílá modrá barva zadaná dříve. První 3 hodnoty nastavují hodnoty červené, zelené a modré a konečným číslem je nastavení alfa. Je nastavena na hodnotu "1", což znamená "100%", takže tato barva nebude mít průhlednost. Nastavíte-li to na desetinné číslo, jako je 0,85, překládá se na 85% opacitu a barva bude mírně průhledná.
Chcete-li své barevné hodnoty odolat proti broukům, udělejte toto:
p {
barva: # 2f5687;
barva: rgba (47,86,135,1);
}}
Tato syntaxe nejprve nastaví hexadecimální kód. Poté tuto hodnotu přepíše číslem RGBA. To znamená, že starší prohlížeč, který nepodporuje RGBA, by získal první hodnotu a ignoroval druhou. Moderní prohlížeče použijí druhý pro kaskádu CSS.