Jak změnit barvu textu vašeho webu pomocí CSS

Mít kontrolu nad svým webem je důležitým prvkem webového designu. V ideálním světě byste měli být schopni změnit každý aspekt designu vašeho webu, aniž byste museli dělat kompromisy ohledně hotového produktu.

Webové stránky však mohou být často tvrdohlavé. Bez ponoření se do světa CSS není vždy možné dosáhnout požadovaných výsledků. Pojďme se podívat na to, jak lze pomocí CSS na vašem webu změnit barvu textu, abyste získali představu o tom, jak můžete pomocí CSS dosáhnout více.

Změna barvy textu webových stránek pomocí CSS

CSS byl pečlivě navržen tak, aby zajistil, že dává návrhářům moc nad projekty jejich webových stránek. Je neuvěřitelně snadné změnit barvu textu pomocí CSS na vašem webu; stačí k tomu jedno pravidlo.

barva: modrá;

Samozřejmě, pravidla CSS sama o sobě nefungují příliš dobře. Musíte je spárovat s třídami prvků, ID a identifikátory, abyste zajistili, že webové prohlížeče vědí, na co se daný styl vztahuje. Můžete vidět příklady použití tohoto pravidla s nadpisem H1, odstavcem P a tlačítkem níže.

h1 {barva: modrá; }
p {barva: červená; }
tlačítko {barva: červená; }

To by vám mělo poskytnout základní představu o tom, co je třeba udělat pro změnu barvy textu vašeho webu pomocí CSS. Obvykle to vyžaduje více, zvláště pokud chcete různým textům na svém webu dát různé barvy.

Příbuzný: Boxový model CSS s příklady

Nalezení správné třídy CSS

Než budete moci změnit konkrétní text na svém webu, musíte vědět, jak jej v CSS identifikovat. Většina webových prohlížečů má sadu nástrojů, které jsou navrženy tak, aby pomohly vývojářům, a je pravděpodobné, že ten, který používáte, má něco, čemu se říká Inspektor. To lze použít k nahlédnutí do HTML a dalšího kódu, který vytváří webové stránky.

Otevření inspektora

Otevření inspektora se v každém z prohlížečů na trhu liší. Níže jsme uvedli několik nejpopulárnějších prohlížečů, abychom vám poskytli náskok:

• Google Chrome: CTRL + Shift + C. nebo Menu tečky > Více nástrojů > Vývojářské nástroje
• Microsoft Edge: CTRL + Shift + C. nebo Menu tečky > Více nástrojů > Vývojářské nástroje
• Mozilla Firefox: CTRL + Shift + C. nebo Menu tečky > Více nástrojů > Nástroje pro vývojáře webu
• Apple Safari: Předvolby > Pokročilý > Zobrazit nabídku Develop na liště nabídek a pak Rozvíjet > Zobrazit webového inspektora

Nalezení správného stylu textu CSS

Při prvním otevření inspektora ve vašem prohlížeči to může být matoucí. Bude spousta věcí, kterým možná nebudete rozumět, ale prozatím si s tím nemusíte dělat starosti. Stačí najít název stylu textu, který se pokoušíte změnit.

Jako příklad budeme hledat a měnit styl textu CSS, který se používá pro hlavní záhlaví v sekci MakeUseOf Programming. Tento proces můžete zahájit kontrolou prvku, který je třeba změnit.

• Google Chrome: Klikněte pravým tlačítkem myši > Kontrolovat
• Microsoft Edge: Klikněte pravým tlačítkem myši > Kontrolovat
• Mozilla Firefox: Klikněte pravým tlačítkem myši > Kontrolovat nebo Otázka
• Apple Safari: Klikněte pravým tlačítkem myši > Zkontrolovat prvek

V takovém případě se okno konzoly/inspektora vaší webové stránky zaměří na prvek, který se pokoušíte změnit. V prohlížečích Chrome, Safari, Edge a Firefox byste měli vidět sekci označenou Styly který obsahuje veškerý kód CSS pro prvek, který kontrolujete.

Měli byste také vidět svůj prvek HTML zvýrazněný v podokně vedle tohoto. To lze použít k určení třídy nebo ID prvku, který měníte. V našem případě se díváme na hlavní nadpis H1 na naší stránce, který patří do třídy s názvem .listing-title.

V tomto okamžiku můžete vyzkoušet styl textu CSS, který budete přidávat na svůj web. Horní část sekce stylu CSS v konzole webu lze použít k aplikaci pravidel na konkrétní prvek, na který jste cílili. Samozřejmě to však není trvalé.

Příbuzný: Jak vytvořit responzivní navigační panel pomocí HTML a CSS

Přidání nového CSS

Nyní je čas přidat nový CSS na váš web. Způsob, jakým to uděláte, bude záviset na typu platformy webových stránek, kterou používáte. Možnosti jako Shopify vyžadují rozšíření, která vám umožní přidat CSS bez změny souborů.

Jakkoli však přidáte kód CSS, musíte se ujistit, že je správný. Použití pravidel CSS v textovém stylu není příliš obtížné, ale může to být frustrující, když nemůžete přijít na to, jak změnit barvu textu. Pro náš příklad je to kód, který bychom potřebovali přidat na náš web.

.listing-title {
barva: modrá;
}

Co když se barva textu nezmění?

Jakmile upravíte soubor CSS, měli byste vidět změnu, kterou jste provedli, jakmile obnovíte stránku. Vždy to ale není tak jednoduché. CSS může být složitější, než lidé očekávají, a v této fázi možná budete muset udělat více.

• Vyprázdnění mezipaměti: Webové stránky často používají ukládání do mezipaměti, aby se zkrátila doba načítání. Vaše mezipaměť vám může bránit ve sledování změn na webových stránkách a při provádění změn v CSS je musíte vyprázdnit.
• Vyšší ve stylu: CSS načítá styly postupně, a to znamená, že první pravidla ve vašem stylu budou ta, která se zobrazí na vašem webu. Pohyblivé styly mohou být dobrým způsobem, jak jim dát přednost před jinými styly.
• Používání důležitých tagů: Tato další možnost není považována za osvědčený postup a je nejlepší ji rezervovat, když nemáte jinou možnost. K textovým stylům CSS můžete přidat důležitou značku, která jim dá přednost před všemi ostatními styly, a to je vidět níže:

.listing-title {
barva: modrá! důležité;
}

Další styl CSS Fun

CSS je neuvěřitelně účinný nástroj, který vám při práci s textem a dalšími prvky na vašem webu poskytuje přístup k řadě různých možností. To nezůstane jen u barvy textu CSS a můžete se s textem načíst, pokud se rozhodnete naučit se trochu CSS. Níže najdete několik dalších základních pravidel pro styl textu CSS:

• Velikost písma: Tím se změní velikost textu na vašem webu, např. Velikost písma: 12px;
• Hmotnost písma: Hmotnost označuje tloušťku písma, přičemž tučné písmo znamená vysokou gramáž a tenký text je nízký, např. Hmotnost písma: 400;
• Zarovnání textu: Tím se změní zarovnání textu, se kterým pracujete, např. Zarovnání textu: vpravo;
• Textový stín: To vám umožní přidat do textu stín s řadou atributů, např. Textový stín: 2px 2px 3px černý;
• Transformace textu: Tím se změní velikost textu, se kterým pracujete, např. Text-transform: uppercase;
• Textová dekorace: To vám umožní přidat podtržení, pomlčky a další dekorace do textu, např. Text-decoration: underline;

Toto je pouze poškrábání povrchu toho, co můžete dělat s textovými styly v CSS. Na webu je spousta průvodců, kteří vám s tímto procesem mohou pomoci, a vždy je dobré udělat si průzkum, jak začnete.

Příbuzný: Jak změnit text vašeho webu pomocí vlastnosti rodiny písem CSS

Zjistěte více než barva textu CSS

Cvičení, experimentování a pokusy a omyly jsou nejlepší způsoby, jak se naučit nástroj, jako je CSS. Šablony stylů se mohou zdát skličující, když s nimi poprvé začnete pracovat, ale pracuje se s nimi neuvěřitelně snadno, když jste s nimi strávili nějaký čas.

10 jednoduchých příkladů kódu CSS, které se můžete naučit za 10 minut

Potřebujete pomoc s CSS? Nejprve zkuste tyto základní příklady kódu CSS a poté je použijte na své vlastní webové stránky.

Číst dále

O autorovi