Inhoud
Met CSS is het eenvoudig om de kleur van de tekst in een document in te stellen. Als u wilt dat alinea's op uw pagina in een bepaalde kleur worden weergegeven, geeft u dat eenvoudig op in uw externe stijlblad en toont de browser uw tekst in die gekozen kleur. Wat gebeurt er dan als je de kleur van slechts één woord (of misschien maar een paar woorden) binnen een tekstparagraaf wilt veranderen? Daarvoor moet je een inline-element gebruiken, zoals de tag.
Uiteindelijk is het gemakkelijk om de kleur van een enkel woord of een kleine groep woorden in een zin te veranderen met behulp van CSS, en de tags zijn geldige HTML, dus maak je geen zorgen dat dit een soort hack is. Met deze aanpak vermijd je 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 in HTML en CSS. Het helpt u te leren hoe u de HTML-tag en CSS gebruikt om de kleur van specifieke tekst op uw pagina's te wijzigen. Dat gezegd hebbende, er zijn enkele nadelen aan deze methode, die we aan het einde van dit artikel zullen behandelen. Lees nu verder om de stappen te leren 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 tekst-HTML-editor. Dit kan een programma zijn zoals Adobe Dreamweaver of een eenvoudige teksteditor zoals Notepad, Notepad ++, TextEdit, etc.
- Zoek in het document de woorden die u in een andere kleur op de pagina wilt weergeven. Laten we voor deze zelfstudie enkele woorden gebruiken die in een grotere alinea met tekst staan. Die tekst wordt opgenomen in het tagpaar. Zoek een van de twee woorden waarvan u de kleur wilt bewerken.
- Plaats uw cursor voor de eerste letter van het woord of de groep woorden waarvan u de kleur wilt wijzigen. Onthoud dat als u een WYSIWYG-editor zoals Dreamweaver gebruikt, u momenteel in "codeweergave" werkt.
- Laten we de tekst omwikkelen waarvan we de kleur willen veranderen met een tag, inclusief een class attribuut. De hele paragraaf kan er als volgt uitzien:
Dit is tekst waarop in een zin wordt gefocust.
- We hebben zojuist een inline-element, de, gebruikt om die specifieke tekst een "hook" 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 toevoegen:
.focus-text {
kleur: # F00;
}
- Met deze regel zou dat inline-element, de, in de kleur rood worden weergegeven. Als we een eerdere stijl hadden die de tekst van ons document op zwart zette, zou deze inline stijl ervoor zorgen dat de spantekst wordt gefocust en opvalt met de andere kleur. We zouden ook andere stijlen aan deze regel kunnen toevoegen, misschien door de tekst cursief of vet te maken om het nog meer te benadrukken?
- Sla uw pagina op.
- Test de pagina in uw favoriete webbrowser om te zien welke wijzigingen van kracht zijn.
- Houd er rekening mee dat sommige webprofessionals naast de kiezen voor andere elementen, zoals de of tagparen. Deze tags waren vroeger specifiek voor vet en cursief, maar waren verouderd en vervangen door en. De tags werken echter nog steeds in moderne browsers, dus veel webontwikkelaars gebruiken ze als inline stylinghaken. Dit is niet de slechtste aanpak, maar als u verouderde elementen wilt vermijden, raden we u aan om voor dit soort stylingbehoeften bij de tag te blijven.
Tips en dingen om op te letten
Hoewel deze aanpak prima werkt voor kleine stylingbehoeften, zoals wanneer u slechts een klein stukje tekst in een document moet wijzigen, kan het snel uit de hand lopen. Als u merkt dat uw pagina bezaaid is met inline-elementen, die allemaal unieke klassen hebben die u in uw CSS-bestand gebruikt, doet u het mogelijk verkeerd, onthoud: hoe meer van deze tags op uw pagina, hoe moeilijker het is is waarschijnlijk het behoud van die pagina in de toekomst. Bovendien heeft goede webtypografie zelden zoveel varianten van kleur, etc. op de hele pagina.
