Jak změnit barvy písma webových stránek pomocí CSS

CSS vám dává kontrolu nad vzhledem textu na webových stránkách, které vytváříte a spravujete. V této příručce vám ukážeme, jak změnit barvy písma v CSS pomocí klíčových slov barev, hexadecimálních kódů barev nebo čísel barev RGB.

Jak používat styly CSS ke změně barvy písma

Hodnoty barev lze vyjádřit jako klíčová slova barev, hexadecimální čísla barev nebo čísla barev RGB. V této lekci budete potřebovat dokument HTML, abyste viděli změny CSS, a samostatný soubor CSS, který je připojen k tomuto dokumentu. Podíváme se konkrétně na odstavec.

Pomocí barevných klíčových slov můžete změnit barvy písma

Chcete-li změnit barvu textu pro každý odstavec v souboru HTML, přejděte do externí šablony stylů a zadejte p {}. Umístete barva vlastnost ve stylu následovaném dvojtečkou, jako p {barva:}. Poté přidejte svou barevnou hodnotu za vlastnost a ukončete ji středníkem. V tomto příkladu se text odstavce změní na černou barvu:

p {
Černá barva;
}

Ke změně barev písma použijte hexadecimální hodnoty

Použití barevných klíčových slov ke změně textu na červenou, zelenou, modrou nebo jinou základní barvu vám neposkytne přesnost, kterou možná hledáte při vytváření různých odstínů těchto barev. K tomu slouží hexadecimální hodnoty.

Tento styl CSS lze použít k vybarvení odstavců černou barvou, protože hexadecimální kód # 000000 se překládá do černé. Můžete dokonce použít zkratku s touto hexadecimální hodnotou a zapsat ji jako # 000 se stejnými výsledky.

p {
barva: # 000000;
}

Hex hodnoty fungují dobře, když potřebujete barvu, která není jen černá nebo bílá. Například tento hexadecimální kód vám dává možnost nastavit velmi specifický odstín modré - střední, břidlicovou modrou:

p {
barva: # 2f5687;
}

Hex funguje tak, že nastavuje hodnoty RGB (červená, zelená, modrá) barvy samostatně se základními šestnácti hodnotami. Proto obsahují písmena A přes F kromě číslic 0 přes 9.

Každá barva, červená, zelená a modrá, dostává svou vlastní dvoucifernou hodnotu. 00 je nejnižší možná hodnota, zatímco FF je nejvyšší. Barvy jsou uvedeny v pořadí RGB v hexadecimálním formátu, takže první dvě číslice představují červenou hodnotu atd.

Pomocí barevných hodnot RGBA můžete změnit barvy písma

Nakonec můžete k úpravám barev písma použít hodnoty barev RGBA. RGCA je podporováno ve všech moderních prohlížečích, takže můžete tyto hodnoty používat s jistotou, že bude fungovat pro většinu diváků, ale můžete také nastavit snadnou záložní verzi.

Tato hodnota RGBA je stejná jako výše uvedená břidlicově modrá barva:

p {
barva: rgba (47,86,135,1);
}

První tři hodnoty nastavují hodnoty červené, zelené a modré a konečné číslo je nastavení alfa pro průhlednost. Nastavení alfa je nastaveno na 1, což znamená 100 procent, takže tato barva nemá žádnou průhlednost. Pokud nastavíte tuto hodnotu na desítkové číslo, například 0,85, překládá se to na 85 procent krytí a barva by byla mírně průhledná.

Pokud chcete odrážet hodnoty barev, zkopírujte tento kód CSS:

p {
barva: # 2f5687;
barva: rgba (47,86,135,1);
}

Tato syntaxe nejprve nastaví hexadecimální kód a poté tuto hodnotu přepíše číslem RGBA. To znamená, že jakýkoli starší prohlížeč, který nepodporuje RGBA, získá první hodnotu a druhou bude ignorovat.

Je důležité mít na paměti, že vlastnost color funguje u libovolného textového prvku HTML v CSS. Můžete například změnit všechny barvy odkazů. V tomto příkladu budou vaše odkazy jasně zelené:

a {
barva: # 16c616;
}

To funguje také s více prvky najednou. Můžete nastavit každou úroveň titulu současně. Například tím nastavíte všechny prvky názvu na půlnoční modrou barvu:

h1, h2, h3, h4, h5, h6 {
barva: # 020833;
}

Přijít s hexadecimálními hodnotami nebo hodnotami RGBA pro vaše barvy není vždy snadné. Většina webových designérů použije ke generování přesných kódů program pro úpravu obrázků, jako je Photoshop nebo GIMP. Pohodlné nástroje pro výběr barev najdete také online tohle od w3schools.

Další způsoby stylování stránky HTML

Barvy písma lze změnit pomocí externí šablony stylů, interní šablony stylů nebo vloženého stylingu v dokumentu HTML. Osvědčené postupy však diktují, že byste pro své styly CSS měli použít externí šablonu stylů.

Interní šablona stylů, což jsou styly napsané přímo v „hlavě“ dokumentu, se obvykle používají pouze pro malé jednostránkové weby. Vloženým stylům je třeba se vyhnout, protože jsou podobné starým značkám „font“, kterými jsme se zabývali před mnoha lety. Tyto vložené styly velmi ztěžují správu stylu písma, protože je musíte změnit při každé instanci vloženého stylu.