Pomocí CSS je snadné nastavit barvu textu v dokumentu. Pokud chcete, aby odstavce na vaší stránce byly vykresleny v určité barvě, jednoduše zadejte, že ve vašem externím listu stylů a v prohlížeči se zobrazí text v této vybrané barvě. Co se stane, když chcete v rámci textu odstavce změnit barvu pouze jednoho slova (nebo možná jen pár slov)? K tomu budete muset použít vložený element, jako je značka.
Nakonec, změna barvy jediného slova nebo malé skupiny slov uvnitř věty je snadné pomocí CSS a značky jsou platné HTML, takže se nebojte, aby to byl jakýsi hack. Tímto přístupem se také vyvarujete používání zastaralých tagů a atributů, jako je "font", který je produktem minulé doby HTML.
Tento článek je určen začínajícím vývojářům webů, kteří jsou pravděpodobně noví k HTML a CSS. Pomůže vám zjistit, jak používat značku HTML a CSS ke změně barvy konkrétního textu na vašich stránkách. To je řečeno, existují některé nevýhody této metody, kterou budu hovořit na konci tohoto článku. Prozatím si přečtěte další informace o změnách této barvy textu! Je to velmi snadné a mělo by trvat asi 2 minuty.
Pokyny krok za krokem
- Otevřete webovou stránku, kterou chcete aktualizovat ve vašem oblíbeném textovém editoru HTML. Může to být program jako Adobe Dreamweaver nebo prostý textový editor jako Poznámkový blok, Poznámkový blok ++, TextEdit atd.
- V dokumentu vyhledejte slova, která chcete zobrazit na stránce v jiné barvě. Kvůli tomuto výukovému programu můžete použít několik slov, která se nacházejí ve větším odstavci textu. Tento text bude obsažen v páru dvojic. Najděte jedno ze dvou slov, jejichž barvu chcete upravit.
- Umístěte kurzor před první písmeno ve slově nebo skupině slov, které chcete změnit barvu. Nezapomeňte, že pokud používáte editor WYSIWYG jako Dreamweaver, nyní pracujete v režimu "code view".
- Nechte zabalit text, jehož barvu chceme změnit se značkou, včetně atribut třídy. Celý odstavec může vypadat takto: Jedná se o text, který je zaměřen ve větě.
- Právě jsme použili vložený prvek, který nám dává tento konkrétní text "hák", 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řidejte:
- .focus-text {
- barva: # F00;
- }}
- Toto pravidlo by nastavilo, že vložený prvek, který se má zobrazit v barvě červené. Pokud bychom měli předchozí styl, který by nastavil text našeho dokumentu na černou, tento inline styl by způsobil, že se rozpínací text bude zaměřovat a vystupovat s různými barvami. Mohli bychom do tohoto pravidla přidat i další styly, které by mohly být ještě více zdůrazněny kurzívou textu nebo odvážné?
- Uložit stránku.
- Otestujte stránku ve vašem oblíbeném webovém prohlížeči, abyste viděli změny v efektu.
- Všimněte si, že někteří weboví profesionálové se rozhodli použít i jiné prvky, jako jsou páry nebo tagy. Tyto značky se používaly jako "tučné" a "kurzíva" konkrétně, ale byly zastaralé a nahrazeny a. Značky stále fungují v moderních prohlížečích, nicméně mnoho webových vývojářů je používá jako inline stylingové háčky. Nejde o nejhorší přístup, ale pokud se chcete vyhnout všem zastaralým prvkům, navrhuji, aby se na tyto typy stylingových potřeb přidržovala značka.
Tipy a věci, na které si dávejte pozor
Zatímco tento přístup funguje dobře pro malé stylové potřeby, jako kdybyste museli v dokumentu změnit jen malý kus textu, může se rychle dostat mimo kontrolu. Pokud zjistíte, že vaše stránka je plná vložených prvků, které mají všechny jedinečné třídy, které používáte ve svém souboru CSS, můžete to udělat špatně. Pamatujte si, že čím více tagů jsou na vaší stránce, tím tvrdší je pravděpodobné, že bude tato stránka pokračovat. Navíc, dobrá webová typografie má zřídka mnoho barevných variant atd. Po celé stránce!