Ako zmeniť farbu textu na vašich webových stránkach pomocou CSS

Ovládanie vašich webových stránok je dôležitým prvkom webového dizajnu. V ideálnom svete by ste mali byť schopní zmeniť každý aspekt dizajnu vašich stránok bez toho, aby ste museli robiť kompromisy v súvislosti s hotovým výrobkom.

Webové stránky však môžu byť často tvrdohlavé. Bez ponorenia sa do sveta CSS nie je vždy možné dosiahnuť požadované výsledky. Poďme sa pozrieť na to, ako môžete pomocou CSS na svojom webe zmeniť farbu textu, aby ste získali predstavu o tom, ako môžete pomocou CSS dosiahnuť viac.

Zmena farby textu webovej stránky pomocou CSS

CSS bol starostlivo navrhnutý tak, aby zaistil, že dáva návrhárom moc nad projektmi ich webových stránok. Je neuveriteľne ľahké zmeniť farbu textu pomocou CSS na vašom webe; Na to potrebujete iba jedno pravidlo.

farba: modrá;

Samozrejme, pravidlá CSS samy o sebe nefungujú veľmi dobre. Musíte ich spárovať s triedami prvkov, ID a identifikátormi, aby ste zaistili, že webové prehliadače budú vedieť, na ktorý štýl sa vzťahuje. Nižšie môžete vidieť príklady použitia tohto pravidla s nadpisom H1, odstavcom P a tlačidlom.

h1 {farba: modrá; }
p {farba: červená; }
tlačidlo {farba: červená; }

To by vám malo poskytnúť základné informácie o tom, čo je potrebné urobiť pre zmenu farby textu vášho webu pomocou CSS. Obvykle to vyžaduje viac, najmä ak chcete rôznym textom na svojich webových stránkach dodať rôzne farby.

Súvisiace: Boxový model CSS vysvetlený na príkladoch

Nájdenie správnej triedy CSS

Predtým, ako budete môcť zmeniť konkrétny text na svojom webe, musíte ho vedieť identifikovať v rámci CSS. Väčšina webových prehliadačov má sadu nástrojov, ktoré sú navrhnuté tak, aby pomáhali vývojárom, a je pravdepodobné, že ten, ktorý používate, má niečo, čo sa nazýva Inšpektor. To sa dá použiť na nahliadnutie do HTML a iného kódu, ktorý vytvára webovú stránku.

Otvorenie inšpektora

Otvorenie inšpektora sa líši v každom z prehliadačov na trhu. Aby sme vám poskytli náskok, pokryli sme niekoľko z najobľúbenejších prehliadačov uvedených nižšie:

• Google Chrome: CTRL + Shift + C. alebo Bodky menu > Viac nástrojov > Nástroje pre vývojárov
• Microsoft Edge: CTRL + Shift + C. alebo Bodky menu > Viac nástrojov > Nástroje pre vývojárov
• Mozilla Firefox: CTRL + Shift + C. alebo Bodky menu > Viac nástrojov > Nástroje pre vývojárov webu
• Apple Safari: Predvoľby > Pokročilé > Zobraziť ponuku Rozvinúť na paneli s ponukami a potom Rozvinúť > Zobraziť webového inšpektora

Nájdenie správneho štýlu textu CSS

Pri prvom otvorení programu Inspector vo vašom prehliadači to môže byť mätúce. Bude veľa vecí, ktorým možno nebudete rozumieť, ale zatiaľ si s tým nemusíte robiť starosti. Stačí nájsť názov štýlu textu, ktorý sa pokúšate zmeniť.

Ako príklad nájdeme a zmeníme textový štýl CSS, ktorý sa používa pre hlavičku v sekcii Programovanie MakeUseOf. Tento proces môžete začať kontrolou prvku, ktorý je potrebné zmeniť.

• Google Chrome: Kliknite pravým tlačidlom myši > Skontrolovať
• Microsoft Edge: Kliknite pravým tlačidlom myši > Skontrolovať
• Mozilla Firefox: Kliknite pravým tlačidlom myši > Skontrolovať alebo Q
• Apple Safari: Kliknite pravým tlačidlom myši > Preskúmať prvok

V takom prípade sa okno konzoly/inšpektora vašej webovej stránky zameria na prvok, ktorý sa pokúšate zmeniť. V prehliadačoch Chrome, Safari, Edge a Firefox by ste mali vidieť sekciu označenú Štýly ktorý obsahuje všetok kód CSS pre prvok, ktorý kontrolujete.

Tiež by ste mali vidieť svoj prvok HTML zvýraznený na table vedľa tohto. Toto je možné použiť na zistenie triedy alebo ID prvku, ktorý meníte. V našom prípade sa pozeráme na hlavný nadpis H1 na našej stránke, ktorý patrí do triedy s názvom .listing-title.

V tomto mieste si môžete vyskúšať štýl textu CSS, ktorý pridáte na svoj web. Hornú časť sekcie štýlu CSS v konzole webovej stránky je možné použiť na aplikáciu pravidiel na konkrétny prvok, na ktorý ste zacielili. Toto však, samozrejme, nie je trvalé.

Súvisiace: Ako vytvoriť responzívny navigačný panel pomocou HTML a CSS

Pridanie nového CSS

Teraz je čas pridať nový CSS na váš web. Spôsob, akým to urobíte, bude závisieť od typu platformy webových stránok, ktorú používate. Možnosti ako Shopify vyžadujú rozšírenia, ktoré vám umožnia pridať CSS bez zmeny súborov.

Akokoľvek pridávate kód CSS, musíte sa uistiť, že je správny. Použitie pravidiel CSS v textovom štýle nie je príliš ťažké, ale môže byť frustrujúce, keď nemôžete prísť na to, ako zmeniť farbu textu. V našom prípade je to kód, ktorý by sme museli pridať na náš web.

.listing-title {
farba: modrá;
}

Čo keď sa farba textu nezmení?

Po úprave súboru CSS by ste mali vidieť zmenu, ktorú ste vykonali, akonáhle obnovíte svoju stránku. Nie vždy je to však také jednoduché. CSS môže byť komplexnejší, ako ľudia očakávajú, a v tejto fáze možno budete musieť urobiť viac.

• Vyprázdnenie vyrovnávacej pamäte: Webové stránky často používajú ukladanie do vyrovnávacej pamäte na skrátenie času načítania. Vaša vyrovnávacia pamäť vám môže brániť v zobrazovaní zmien na webových stránkach a pri vykonávaní zmien v CSS ho musíte vyprázdniť.
• Vyššie v štýle: CSS načítava štýly postupne, a to znamená, že prvé pravidlá vo vašej šablóne štýlov budú tie, ktoré sa zobrazia na vašom webe. Pohyblivé štýly môžu byť dobrým spôsobom, ako im dať prednosť pred inými štýlmi.
• Použitie dôležitých značiek: Táto ďalšia možnosť sa nepovažuje za osvedčený postup a je najlepšie si ju rezervovať, keď nemáte inú možnosť. Do svojich textových štýlov CSS môžete pridať dôležitú značku, ktorá im dá prednosť pred všetkými ostatnými štýlmi, čo je možné vidieť nižšie:

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

Iný štýl textu, CSS, zábava

CSS je neuveriteľne účinný nástroj, ktorý vám pri práci s textom a ďalšími prvkami na vašom webe poskytuje prístup k množstvu rôznych možností. Toto nekončí len pri farbe textu CSS a môžete sa s ním poriadne zaťažiť, keď sa rozhodnete naučiť sa trochu CSS. Ďalšie základné pravidlá pre štýl textu CSS nájdete nižšie:

• Veľkosť písma: Toto zmení veľkosť textu na vašom webe, napr. Veľkosť písma: 12 pixlov;
• Hmotnosť písma: Váha označuje hrúbku písma, pričom tučné písmo znamená vysokú gramáž a tenký text je nízky, napr. Hmotnosť písma: 400;
• Zarovnanie textu: Toto zmení zarovnanie textu, s ktorým pracujete, napr. Zarovnanie textu: vpravo;
• Text-tieň: To vám umožní pridať do textu tieň s radom atribútov, napr. Textový tieň: 2 pixely 2 pixely 3 pixely čierny;
• Transformácia textu: Toto zmení veľkosť písmen textu, s ktorým pracujete, napr. Text-transform: uppercase;
• Textová dekorácia: To vám umožní pridať k textu podčiarknutia, pomlčky a ďalšie dekorácie, napr. Text-decoration: underline;

Toto je iba poškriabanie povrchu toho, čo môžete robiť s textovými štýlmi v CSS. Na internete je množstvo sprievodcov, ktorí vám s týmto procesom môžu pomôcť, a vždy je dobré urobiť si najskôr prieskum.

Súvisiace: Ako zmeniť text svojich webových stránok pomocou vlastnosti rodiny písem CSS

Viac informácií ako farba textu CSS

Cvičenie, experimentovanie a pokus - omyl sú najlepšie spôsoby, ako sa naučiť nástroj ako CSS. Šablóny štýlov sa môžu zdať skľučujúce, keď s nimi prvýkrát začnete pracovať, ale pracuje sa s nimi neuveriteľne ľahko, ak ste s nimi strávili nejaký čas.

10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút

Potrebujete pomoc s CSS? Na začiatok vyskúšajte tieto základné príklady kódu CSS a potom ich aplikujte na svoje webové stránky.

Čítajte ďalej

O autorovi