Pomocou CSS je ľahké nastaviť farbu textu v dokumente. Ak chcete, aby sa na vašej stránke vykresľovali odseky v určitej farbe, stačí zadať, že vo vašom externom štýle a prehliadači sa zobrazí text v tejto zvolenej farbe. Čo sa stane potom, keď chcete v rámci textu textu zmeniť farbu len jedného slova (alebo len niekoľkých slov)? Za týmto účelom budete musieť použiť inline prvok, napríklad značku.
Nakoniec, zmena farby jedného slova alebo menšej skupiny slov v rámci vety je jednoduché pomocou CSS a značky sú platné HTML, takže sa nebojte, aby to bol nejaký druh hack. S týmto prístupom sa tiež vyhnite používaniu zastaraných značiek a atribútov, ako je "font", ktorý je produktom predchádzajúcej éry HTML.
Tento článok je pre začínajúcich vývojárov webových stránok, ktorí sú pravdepodobne noví k HTML a CSS. Pomôže vám naučiť sa používať značku HTML a CSS na zmenu farby konkrétneho textu na vašich stránkach. Z uvedeného vyplýva, že existujú určité nevýhody tejto metódy, ktorú budem na konci tohto článku venovať. Prečítajte si teraz, ak sa chcete dozvedieť o krokoch na zmenu tejto farby textu! Je to veľmi jednoduché a trvá asi 2 minúty.
Pokyny krok za krokom
- Otvorte webovú stránku, ktorú chcete aktualizovať vo svojom obľúbenom textovom editori HTML. Môže to byť program ako Adobe Dreamweaver alebo jednoduchý textový editor ako Poznámkový blok, Poznámkový blok ++, TextEdit atď.
- V dokumente nájdite slová, ktoré chcete zobraziť v inej farbe na stránke. V záujme tohto návodu používajte niektoré slová, ktoré sa nachádzajú vo väčšom texte. Tento text bude obsiahnutý v dvojiciach. Nájdite jedno z dvoch slov, ktorých farbu chcete upraviť.
- Umiestnite kurzor pred prvé písmeno v slove alebo skupine slov, ktoré chcete zmeniť farbu. Pamätajte, že ak používate editor WYSIWYG, ako je Dreamweaver, teraz pracujete v režime "code view".
- Nechajte zabaliť text, ktorého farbu chceme zmeniť značkou, vrátane atribútu triedy. Celý odsek môže vyzerať takto: Toto je text, ktorý je zameraný vo vete.
- Práve sme použili inline element, aby daný konkrétny text "hák", ktorý môžeme použiť v CSS. Ďalším krokom je preskočiť do nášho externého súboru CSS a pridať nové pravidlo.
- V našom súbore CSS pridáme:
- .focus-text {
- farba: # F00;
- }
- Toto pravidlo by nastavilo, že inline prvok, ktorý sa má zobraziť v červenej farbe. Ak by sme mali predchádzajúci štýl, ktorý by nastavil text nášho dokumentu na čierny, tento inline štýl by spôsobil, že rozpínaný text sa bude sústrediť a vystupovať s rôznymi farbami. Mohli by sme pridať aj ďalšie štýly k tomuto pravidlu, a to možno urobiť textovú kurzívu alebo odvážne, aby sme ju ešte viac zdôrazňovali?
- Uložte svoju stránku.
- Otestujte stránku vo vašom obľúbenom webovom prehliadači, aby ste videli zmeny v efekte.
- Upozorňujeme, že okrem niektorých webových profesionálov sa rozhodli použiť aj iné prvky, ako sú páry alebo tagy. Tieto značky boli použité pre "tučné" a "kurzíva" konkrétne, ale boli zastarané a nahradené a. Štítky stále fungujú v moderných prehliadačoch, ale toľko webových vývojárov ich používa ako inline stylingové háčiky. Nie je to najhorší prístup, ale ak sa chcete vyhnúť akýmkoľvek zastaraným prvkom, navrhujem, aby ste sa držali značky pre tieto druhy stylingových potrieb.
Tipy a veci, ktoré treba dávať pozor
Aj keď tento prístup funguje v malom rozsahu pre potreby malého štýlu, ako keby ste v dokumente museli zmeniť len jeden malý text, môže sa rýchlo dostať mimo kontroly. Ak zistíte, že vaša stránka je plná vložených prvkov, ktoré majú všetky jedinečné triedy, ktoré používate vo svojom súbore CSS, môžete to robiť nesprávne. Nezabúdajte, že čím viac značiek sú na vašej stránke, tým je to ťažšie je pravdepodobné, že bude táto stránka pokračovať. Navyše dobrá webová typografia zriedkavo obsahuje toľko farieb atď. Na celej stránke!