Ändra ordfärg med SPAN-tagg i CSS

click fraud protection

Du kan ange teckensnittsfärger, storlekar och andra parametrar i ett externt CSS-formatmall. Om du bara vill ändra färgen på ett ord eller en fras är det enklaste och enklaste sättet att använda taggen inline. Inline CSS är precis som det låter: Det läggs till i sidans HTML, snarare än ett externt formatmall.

Undvik att använda taggen som har upphört.

Så här ändrar du färg på ett ord med taggen:

  1. Använd din föredragna text- eller HTML-redigerare i kodvisningsläge och placera markören före den första bokstaven i ordet eller gruppen av ord du vill färga.

  2. Låt linda texten vars färg vi vill ändra med en tagg, inklusive ett klassattribut. Hela stycket kan se ut så här: Detta är en text som fokuseras på i en mening.

  3. Ge den specifika texten en "krok" som vi kan använda i CSS. Vårt nästa steg är att hoppa till vår externa CSS-fil för att lägga till en ny regel.

    Låt oss lägga till i vår CSS-fil:

    .fokus-text {

     färg: # F00;

    }

    Denna regel skulle ställa in det inbyggda elementet, det, för att visas i färgen röd. Om vi ​​hade en tidigare stil som ställde in texten i vårt dokument till svart, skulle denna inbyggda stil leda till att spänntexten fokuserades på och sticker ut med olika färger. Vi kan också lägga till andra stilar till denna regel, kanske göra texten kursiv eller fet för att betona den ännu mer?

    instagram viewer

  4. Spara din sida.

    Testa sidan i din favoritwebbläsare för att se ändringarna.

    Observera att förutom webben väljer vissa webbproffs att använda andra element som taggpar. Dessa taggar brukade vara för fetstil och kursiv, men avskaffades och ersattes med och. Taggarna fungerar fortfarande i moderna webbläsare, men så många webbutvecklare använder dem som inline styling krokar. Detta är inte det värsta tillvägagångssättet, men om du vill undvika föråldrade element föreslår vi att du håller fast med taggen för dessa typer av stylingbehov.

Tips och saker att se upp för

Även om detta tillvägagångssätt fungerar bra för små stylingbehov, som om du bara behöver ändra en liten bit text i ett dokument, kan det snabbt komma ur kontroll. Om du upptäcker att din sida är full av inbyggda element, som alla har unika klasser som du använder i din CSS-fil, kan du göra det fel, kom ihåg, ju fler av dessa taggar som finns på din sida, desto svårare är det att vara att hålla den sidan igång fram. Dessutom har bra webbtypografi sällan så många färgvarianter etc. genom hela sidan.

instagram story viewer