Endre ordfarge med SPAN-tag i CSS

click fraud protection

Du kan spesifisere skriftfarger, størrelser og andre parametere i et eksternt CSS-stilark. Hvis du vil endre fargen på bare ett ord eller uttrykk, er den enkleste og enkleste måten å bruke taggen innebygd. Inline CSS er akkurat slik det høres ut: Det legges til i sidens HTML, i stedet for et eksternt stilark.

Unngå å bruke taggen, som er utfaset.

Slik endrer du fargen på et ord ved hjelp av taggen:

  1. Bruk den foretrukne teksten eller HTML-redigereren i kodevisningsmodus, og plasser markøren før den første bokstaven i ordet eller gruppen av ord du vil farge.

  2. La vikle teksten hvis farge vi vil endre med en tag, inkludert et klasseattributt. Hele avsnittet kan se slik ut: Dette er tekst som er fokusert på i en setning.

  3. Gi den spesifikke teksten en "krok" som vi kan bruke i CSS. Vårt neste trinn er å hoppe til vår eksterne CSS-fil for å legge til en ny regel.

    La oss legge til i CSS-filen:

    .fokus-tekst {

     farge: # F00;

    }

    Denne regelen vil angi at det innebygde elementet, det, skal vises i fargen rød. Hvis vi hadde en tidligere stil som satte teksten i dokumentet vårt til svart, ville denne innebygde stilen føre til at spennteksten ble fokusert på og skiller seg ut med den forskjellige fargen. Vi kan også legge til andre stiler i denne regelen, kanskje gjøre teksten kursiv eller fet for å understreke den enda mer?

    instagram viewer

  4. Lagre siden din.

    Test siden i favorittnettleseren din for å se endringene som trer i kraft.

    Merk at i tillegg til, velger noen web-profesjonelle å bruke andre elementer som eller tag-parene. Disse kodene pleide å være for fet skrift og kursiv, men ble utfaset og erstattet med og. Merkelappene fungerer fremdeles i moderne nettlesere, men så mange nettutviklere bruker dem som integrerte stylingkroker. Dette er ikke den verste tilnærmingen, men hvis du vil unngå foreldede elementer, foreslår vi at du holder deg med merkelappen for denne typen stylingbehov.

Tips og ting å passe på

Selv om denne tilnærmingen fungerer bra for små stylingbehov, som om du trenger å endre bare en liten tekstbit i et dokument, kan den raskt komme ut av kontroll. Hvis du finner ut at siden din er full av innebygde elementer, som alle har unike klasser du bruker i CSS-filen, kan du gjør det galt, husk at jo flere av disse kodene som er på siden din, jo vanskeligere er det å være å vedlikeholde den siden framover. I tillegg har god webtypografi sjelden så mange farger, osv. gjennom hele siden.

instagram story viewer