Med CSS er det enkelt å sette fargen på teksten i et dokument. Hvis du vil at avsnitt på siden skal gjengis i en bestemt farge, angir du bare at i ditt eksterne stilark og nettleseren vil vise teksten i den valgte fargen. Hva skjer da når du vil endre fargen på bare ett ord (eller kanskje bare noen få ord) i et avsnitt med tekst? For det må du bruke et inline-element som taggen.
Til slutt, å endre fargen på et enkelt ord eller en liten gruppe ord i en setning er enkelt å bruke CSS, og kodene er gyldige HTML, så vær så bekymret for at dette er en slags hack. Med denne tilnærmingen unngår du også å bruke utdaterte tagger og attributter som "font", som er et produkt av en tidligere HTML-epoke.
Denne artikkelen er for begynnelsen av webutviklere som sannsynligvis er nye for HTML og CSS. Det vil hjelpe deg å lære hvordan du bruker HTML-taggen og CSS til å endre fargen på bestemt tekst på sidene dine. Når det er sagt, er det noen ulemper med denne metoden, som vi vil dekke på slutten av denne artikkelen. For nå, les videre for å lære trinnene for å endre denne tekstfargen. Det er veldig enkelt og bør ta om lag to minutter.
Trinnvis instruksjon
- Åpne nettsiden du vil oppdatere i din favoritttekst HTML-editor. Dette kan være et program som Adobe Dreamweaver eller en enkel tekstredigerer som Notisblokk, Notepad ++, TextEdit, etc.
- I dokumentet finner du ordene du vil bli vist i en annen farge på siden. For å få hjelp til denne opplæringen, la oss bruke noen ord som ligger innenfor et større avsnitt av tekst. Denne teksten vil være inneholdt i taggparet. Finn ett av to ord hvis farge du vil redigere.
- Plasser markøren før første bokstav i ordet eller gruppen av ord du vil endre farge. Husk at hvis du bruker en WYSIWYG-editor som Dreamweaver, jobber du i "kodevisning" akkurat nå.
- La pakke teksten hvis farge vi vil endre med en tag, inkludert en klassetributt. Hele avsnittet kan se slik ut:
Dette er tekst som er fokusert på i en setning.
- Vi har nettopp brukt et inlineelement, den, for å gi den spesifikke teksten en "krok" som vi kan bruke i CSS. Vårt neste skritt er å hoppe til vår eksterne CSS-fil for å legge til en ny regel.
- I vår CSS-fil, la oss legge til:
-
.fokus-tekst {
-
farge: # F00;
-
}
- Denne regelen vil sette det inlineelementet, den, som skal vises i fargenrød. Hvis vi hadde en tidligere stil som setter teksten i dokumentet til svart, ville denne inline-stilen føre til at strekkteksten fokuseres på og skiller seg ut med den forskjellige fargen. Vi kan også legge til andre stiler til denne regelen, kanskje gjør teksten kursiv eller fet for å understreke det enda mer?
- Lagre siden din.
- Test siden i din favoritt nettleser for å se endringene i effekt.
- Legg merke til at i tillegg til det, velger noen webprofessorer å bruke andre elementer som eller tagparene. Disse kodene pleide å være for fet og kursiv spesifikt, men ble avskrevet og erstattet med og. Kodene fungerer fortsatt i moderne nettlesere, men så mange webutviklere bruker dem som inline styling kroker. Dette er ikke den verste tilnærmingen, men hvis du ønsker å unngå utdaterte elementer, foreslår vi å holde fast med taggen for slike stylingbehov.
Tips og ting å passe på
Mens denne tilnærmingen fungerer bra for små styling behov som om du trenger å endre bare et lite stykke tekst i et dokument, kan det raskt komme ut av kontroll. Hvis du finner ut at siden din er fylt med inline-elementer, som alle har unike klasser som du bruker i CSS-filen, kan det hende du gjør feil, Husk, jo flere av disse kodene som er på siden din, jo vanskeligere er det Det vil sannsynligvis være å opprettholde den siden fremover. I tillegg har god webtypografi sjelden det mange varianter av farge osv. Over hele siden.
