Zmena farby slova pomocou značky SPAN v CSS

click fraud protection

Farby, veľkosti a ďalšie parametre písma môžete určiť v externej šablóne so štýlmi CSS. Ak však chcete zmeniť farbu iba jedného slova alebo frázy, najjednoduchším a najjednoduchším spôsobom je použiť vloženú značku. Inline CSS je taký, ako to znie: Pridáva sa do kódu HTML stránky, nie do externej šablóny štýlov.

Nepoužívajte značku, ktorej podpora bola ukončená.

Tu je príklad, ako zmeniť farbu slova pomocou značky:

  1. Pomocou preferovaného textového alebo HTML editora v režime zobrazenia kódu umiestnite kurzor pred prvé písmeno slova alebo skupiny slov, ktoré chcete vyfarbiť.

  2. Text, ktorého farbu chceme zmeniť, nechajte zabaliť tagom vrátane atribútu triedy. Celý odsek môže vyzerať takto: Toto je text zameraný na vo vete.

  3. Dajte tomuto konkrétnemu textu „háčik“, ktorý môžeme použiť v CSS. Naším ďalším krokom je prejsť na náš externý súbor CSS a pridať nové pravidlo.

    V našom súbore CSS pridajme:

    .focus-text {

     farba: # F00;

    }

    Toto pravidlo by nastavilo, aby sa vložený prvok zobrazoval v červenej farbe. Keby sme mali predchádzajúci štýl, ktorý nastavil text nášho dokumentu na čierny, tento vložený štýl by spôsobil, že by sa text rozsahu sústredil na a vynikal inou farbou. K tomuto pravidlu by sme mohli pridať aj ďalšie štýly, napríklad text zvýrazniť kurzívou alebo tučným písmom, aby sme ho ešte viac zdôraznili?

    instagram viewer

  4. Uložte svoju stránku.

    Vyskúšajte stránku vo svojom obľúbenom webovom prehliadači, aby ste videli platné zmeny.

    Upozorňujeme, že okrem toho sa niektorí weboví profesionáli rozhodnú použiť aj ďalšie prvky, ako napríklad páry tagov alebo. Tieto značky boli pôvodne určené pre tučné písmo a kurzívu, boli však zastarané a nahradené znakom a. Značky stále fungujú v moderných prehliadačoch, takže ich mnoho webových vývojárov používa ako vložené stylingové háky. Toto nie je najhorší prístup, ale ak sa chcete vyhnúť akýmkoľvek zastaraným prvkom, odporúčame vám držať sa značky pre tieto druhy stylingových potrieb.

Tipy a veci, na ktoré si treba dať pozor

Aj keď tento prístup funguje dobre pre malé stylingové potreby, napríklad ak potrebujete v dokumente zmeniť iba jeden malý kúsok textu, môže sa rýchlo vymknúť spod kontroly. Ak zistíte, že vaša stránka je posiata vloženými prvkami, z ktorých všetky majú jedinečné triedy, ktoré používate vo svojom súbore CSS, môžete robíte to zle. Pamätajte, že čím viac týchto značiek sa na vašej stránke nachádza, tým ťažšie bude udržiavať fungovanie tejto stránky. dopredu. Okrem toho má dobrá webová typografia zriedka toľko farebných variantov atď. na celej stránke.

instagram story viewer