Met CSS is het eenvoudig om de kleur van de tekst in een document in te stellen. Als u alinea's op uw pagina in een bepaalde kleur wilt weergeven, geeft u dat gewoon op in uw externe stijlpagina en de browser zal uw tekst in die gekozen kleur weergeven. Wat gebeurt er wanneer u de kleur van slechts één woord (of misschien slechts een paar woorden) in een alinea van de tekst wilt wijzigen? Daarvoor moet u een inline-element zoals de tag gebruiken.
Uiteindelijk is het eenvoudig om de kleur van een enkel woord of een kleine groep woorden in een zin te wijzigen met behulp van CSS, en de tags zijn geldige HTML, dus maak je geen zorgen dat dit een soort hack is. Met deze aanpak, vermijdt u ook het gebruik van verouderde tags en attributen zoals "font", een product van een vervlogen HTML-tijdperk.
Dit artikel is bedoeld voor beginnende webontwikkelaars die waarschijnlijk nieuw zijn voor HTML en CSS. Het helpt je te leren hoe je de HTML-tag en CSS kunt gebruiken om de kleur van specifieke tekst op je pagina's te wijzigen. Dat gezegd hebbende, er zijn enkele nadelen aan deze methode, die we aan het einde van dit artikel bespreken. Lees voor nu meer over de stappen om deze tekstkleur te wijzigen. Het is heel gemakkelijk en duurt ongeveer twee minuten.
Stap voor stap instructie
- Open de webpagina die u wilt bijwerken in uw favoriete HTML-teksteditor. Dit kan een programma zijn zoals Adobe Dreamweaver of een eenvoudige teksteditor zoals Notepad, Notepad ++, TextEdit, enz.
- Zoek in het document de woorden die u in een andere kleur op de pagina wilt weergeven. Laten we omwille van deze tutorial enkele woorden gebruiken die zich binnen een grotere alinea van de tekst bevinden. Die tekst bevindt zich binnen het tag-paar. Zoek een van de twee woorden waarvan u de kleur wilt bewerken.
- Plaats uw cursor vóór de eerste letter in het woord of de groep woorden waarvan u de kleur wilt wijzigen. Onthoud dat als u een WYSIWYG-editor zoals Dreamweaver gebruikt, u nu in "codeweergave" werkt.
- Laat de tekst waarvan we de kleur willen veranderen, omslaan met een tag, inclusief een klassenattribuut. De hele alinea ziet er misschien als volgt uit:
Dit is tekst waarop in een zin wordt gefocust.
- We hebben zojuist een inline-element gebruikt, de, om die specifieke tekst een "haak" te geven die we in CSS kunnen gebruiken. Onze volgende stap is om naar ons externe CSS-bestand te springen om een nieuwe regel toe te voegen.
- Laten we in ons CSS-bestand het volgende toevoegen:
-
.focus-text {
-
kleur: # F00;
-
}
- Deze regel zou dat inline element instellen, de, om in de kleur rood weer te geven. Als we een vorige stijl hadden die de tekst van ons document in zwart zette, zou deze inline stijl ervoor zorgen dat de spantekst wordt scherpgesteld en opvallen met de andere kleur. We kunnen ook andere stijlen aan deze regel toevoegen, waardoor de tekst cursief of vet kan worden gemaakt om deze nog meer te benadrukken?
- Sla je pagina op.
- Test de pagina in uw favoriete webbrowser om de aangebrachte wijzigingen te zien.
- Merk op dat sommige webprofessionals naast de andere kiezen voor andere elementen, zoals de tag-paren. Deze tags waren specifiek bedoeld voor vet en cursief, maar waren verouderd en vervangen door en. De tags werken nog steeds in moderne browsers, maar veel webontwikkelaars gebruiken ze als inline stijlhaken. Dit is niet de slechtste aanpak, maar als u alle verouderde elementen wilt vermijden, raden we u aan de tag voor dit soort stylingbehoeften aan te houden.
Tips en dingen om op te letten
Hoewel deze benadering prima werkt voor kleine stylingbehoeften, bijvoorbeeld als u slechts één klein stukje tekst in een document hoeft te wijzigen, kan het snel uit de hand lopen. Als u vindt dat uw pagina bezaaid is met inline-elementen, die allemaal unieke klassen hebben die u in uw CSS-bestand gebruikt, doet u het misschien verkeerd, Onthoud dat hoe meer van deze tags op uw pagina staan, hoe moeilijker het wordt is waarschijnlijk om die pagina in de toekomst te behouden. Bovendien heeft goede webtypografie zelden zoveel kleurvarianten, enzovoort op de hele pagina.
