V externím šabloně stylů CSS můžete určit barvy, velikosti a další parametry písma. Pokud však chcete změnit barvu pouze jednoho slova nebo fráze, nejjednodušší a nejjednodušší způsob je použít vloženou značku. Inline CSS je přesně tak, jak to zní: Přidává se do kódu HTML stránky, nikoli do externí šablony stylů.
Nepoužívejte značku, jejíž podpora byla ukončena.
Tady je způsob, jak změnit barvu slova pomocí značky:
Pomocí preferovaného editoru textu nebo HTML v režimu zobrazení kódu umístěte kurzor před první písmeno slova nebo skupiny slov, která chcete obarvit.
Text, jehož barvu chceme změnit, necháme zabalit tagem, včetně atributu třídy. Celý odstavec může vypadat takto: Toto je text zaměřený na větu.
-
Dejte tomuto konkrétnímu textu „háček“, který můžeme použít v CSS. Naším dalším krokem je přeskočit na náš externí soubor CSS a přidat nové pravidlo.
V našem souboru CSS přidejme:
.focus-text {
barva: # F00;
}
Toto pravidlo by nastavilo, aby se vložený prvek,, zobrazoval v červené barvě. Pokud bychom měli předchozí styl, který nastavil text našeho dokumentu na černou, tento vložený styl by způsobil, že by se text rozsahu soustředil a vynikl jinou barvou. K tomuto pravidlu bychom mohli přidat i další styly, třeba text zvýraznit kurzivou nebo tučně, abychom ho ještě více zdůraznili?
-
Uložte stránku.
Vyzkoušejte stránku ve svém oblíbeném webovém prohlížeči, abyste viděli platné změny.
Všimněte si, že kromě toho se někteří weboví profesionálové rozhodnou použít i další prvky, jako jsou páry tagů nebo. Tyto značky byly konkrétně určeny pro tučné písmo a kurzívu, ale byly zastaralé a nahrazeny znaky a. Značky stále fungují v moderních prohlížečích, nicméně mnoho vývojářů webu je používá jako inline styling hooks. To není nejhorší přístup, ale pokud se chcete vyhnout zastaralým prvkům, doporučujeme držet se značky pro tyto druhy stylingových potřeb.
Tipy a věci, na které si musíte dát pozor
I když tento přístup funguje dobře pro potřeby malých stylů, jako když potřebujete v dokumentu změnit jen jeden malý kousek textu, může se rychle vymknout kontrole. Pokud zjistíte, že je vaše stránka poseta vloženými prvky, z nichž všechny mají jedinečné třídy, které používáte ve svém souboru CSS, můžete dělá to špatně, pamatujte, čím více těchto značek je na vaší stránce, tím těžší bude pravděpodobně udržovat fungování této stránky vpřed. Navíc dobrá webová typografie má zřídka tolik barevných variant atd. po celé stránce.