Skift ordfarve med SPAN-tag i CSS

click fraud protection

Du kan angive skrifttypefarver, størrelser og andre parametre i et eksternt CSS-typografiark. Hvis du kun vil ændre farven på et ord eller en sætning, er den nemmeste og enkleste måde imidlertid at bruge taggen inline. Inline CSS er bare som det lyder: Det tilføjes i sidens HTML snarere end et eksternt stilark.

Undgå at bruge tagget, som er udfaset.

Sådan ændres farven på et ord ved hjælp af tagget:

  1. Brug din foretrukne tekst eller HTML-editor i kodevisningstilstand, og placer markøren foran det første bogstav i ordet eller gruppen af ​​ord, du vil farve.

  2. Lad indpakningen af ​​teksten, hvis farve vi vil ændre, med et tag, inklusive en klasseattribut. Hele afsnittet kan se sådan ud: Dette er tekst, der er fokuseret på i en sætning.

  3. Giv den specifikke tekst en "krog", som vi kan bruge i CSS. Vores næste trin er at springe til vores eksterne CSS-fil for at tilføje en ny regel.

    Lad os tilføje i vores CSS-fil:

    .fokus-tekst {

     farve: # F00;

    }

    Denne regel ville indstille det indbyggede element, det, til at blive vist i farven rød. Hvis vi havde en tidligere stil, der satte teksten i vores dokument til sort, ville denne indbyggede stil få spændteksten til at fokusere på og skille sig ud med den anden farve. Vi kunne også tilføje andre stilarter til denne regel, måske gøre teksten kursiv eller fed for at understrege den endnu mere?

    instagram viewer

  4. Gem din side.

    Test siden i din yndlingswebbrowser for at se ændringerne i kraft.

    Bemærk, at ud over den, vælger nogle webfagfolk at bruge andre elementer som eller tagparrene. Disse tags plejede at være med fed skrift og kursiv specifikt, men blev udfaset og erstattet med og. Mærkerne fungerer stadig i moderne browsere, men så mange webudviklere bruger dem som inline styling kroge. Dette er ikke den værste tilgang, men hvis du vil undgå forældede elementer, foreslår vi, at du holder fast med tagget til denne slags stylingbehov.

Tips og ting at passe på

Selvom denne fremgangsmåde fungerer fint til små stylingbehov, som hvis du kun har brug for at ændre et lille stykke tekst i et dokument, kan det hurtigt komme ud af kontrol. Hvis du finder ud af, at din side er fyldt med integrerede elementer, som alle har unikke klasser, som du bruger i din CSS-fil, kan du gør det forkert. Husk, jo flere af disse tags der findes på din side, jo sværere er det sandsynligt at være at opretholde den side frem. Derudover har god webtypografi sjældent så mange varianter af farve osv. gennem hele siden.

instagram story viewer