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

Chcete svůj web vylepšit různými barvami písma? Můžete to udělat pomocí CSS. CSS je zkratka pro Cascading Style Sheets a je výchozím jazykem používaným pro vytváření a správu stylu jakéhokoli webu.

Existují tři způsoby použití CSS na HTML dokument. Jsou to inline CSS, interní/vložené CSS a externí CSS.

Metoda jedna: Inline CSS

Chcete-li změnit barvu písma v CSS, budete muset vytvořit pravidlo CSS pro nastavení hodnota vlastnosti barvy.

Inline metoda používá vlastnost style, kterou můžete použít na téměř jakýkoli prvek. Zde je příklad, který nastaví barvu písma odstavce HTML na červenou:

Odstavec textu

Stejného efektu můžete dosáhnout pomocí interního/vloženého CSS nebo externího CSS.

Metoda 2: Interní/embedded CSS

Tuto metodu můžete použít, když chcete vytvořit pravidla CSS, která ovlivňují více než jednu instanci prvku HTML, ale pouze na jedné stránce. Pravidla CSS jsou poté zapsána do záhlaví stránky HTML pomocí prvku stylu:

Metoda třetí: Externí CSS

Třetím způsobem, jak dosáhnout stejného efektu, je použití externí šablony stylů CSS. Pomocí textového editoru vytvořte soubor s příponou „.css“. Běžnou praxí je nazývat tento soubor nějak podobně

stylesheet.css ale můžete jej pojmenovat jakkoli, pokud ponecháte příponu „.css“.

Chcete-li obarvit text těla zeleně, například pomocí externí šablony stylů, jednoduše vložte pravidlo CSS takto:

p { barva: modrá }

Do dokumentu HTML byste měli vložit odkaz na vaši šablonu stylů v prvku HTML head:

Odstavec textu

Změna barvy písma v HTML, bez použití CSS

Nejlepším postupem je použít CSS, ale zde je návod, jak změnit barvu písma pouze pomocí HTML:

Odstavec textu

Prvek font spolu s jeho atributem color je zastaralý. Je to proto, že jsou spíše prezentačními než strukturálními prvky. Moderní HTML by se mělo skládat pouze ze strukturálních prvků.

Změna barvy písma v CSS je relativně jednoduchá

Ukázali jsme vám tři způsoby, jak změnit barvu písma v CSS. Také jsme vám ukázali, jak to udělat starým způsobem pomocí značky HTML font. Vyzkoušejte je a zjistěte, který vám nejlépe vyhovuje!

Jakmile si osvojíte změnu barvy písma pomocí CSS a HTML, možná budete chtít zvládnout změnu velikosti písma v HTML.

Jak změnit velikost písma HTML v CSS

Přečtěte si další

O autorovi