Med CSS är det enkelt att ställa in textens färg i ett dokument. Om du vill att stycken på din sida ska visas i en viss färg anger du bara det i ditt externa stilark och webbläsaren visar din text i den valda färgen. Vad händer då när du vill ändra färgen på bara ett ord (eller kanske bara några ord) i ett stycke text? För det måste du använda ett inline-element som taggen.
I slutändan är det enkelt att byta färg på ett enda ord eller en liten grupp av ord i en mening med CSS, och taggarna är giltiga HTML, så oroa dig inte om att det här är något slags hack. Med detta tillvägagångssätt undviker du också att använda utskrivna taggar och attribut som "font", vilket är en produkt av en föråldrad HTML-era.
Den här artikeln är för att starta webbutvecklare som troligen är nya för HTML och CSS. Det hjälper dig att lära dig hur du använder HTML-taggen och CSS för att ändra färgen på specifik text på dina sidor. Med detta sagt finns det vissa nackdelar med den här metoden, som vi kommer att täcka i slutet av denna artikel. För nu läs vidare för att lära dig stegen för att ändra denna textfärg. Det är väldigt enkelt och ska ta ungefär två minuter.
Steg för steg Instruktion
- Öppna webbsidan som du vill uppdatera i din HTML textredigerare. Det här kan vara ett program som Adobe Dreamweaver eller en enkel textredigerare som Anteckningar, Notepad ++, TextEdit etc.
- I dokumentet letar du efter de ord du vill visas i en annan färg på sidan. För denna handledningens skull, låt oss använda några ord som ligger inom ett större stycke text. Den texten kommer att finnas i taggparet. Hitta ett av två ord vars färg du vill redigera.
- Placera markören före första bokstaven i ordet eller gruppen av ord du vill ändra färg. Kom ihåg att om du använder en WYSIWYG-editor som Dreamweaver jobbar du i "kodvisning" just nu.
- Låt vikta texten vars färg vi vill ändra med en tagg, inklusive en klassattribut. Hela stycket kan se ut så här:
Detta är text som är inriktad på i en mening.
- Vi har just använt ett inline-element, den, för att 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.
- I vår CSS-fil, låt oss lägga till:
-
.fokus-text {
-
färg: # F00;
-
}
- Denna regel skulle ställa in det inline elementet, som ska visas i färgröd. Om vi hade en tidigare stil som satt texten i vårt dokument till svart, skulle den här inline-stilen leda till att spalttexten fokuseras på och sticker ut med olika färger. Vi kan också lägga till andra stilar till den här regeln, kanske göra texten kursiv eller fet för att betona det ännu mer?
- Spara din sida.
- Testa sidan i din favoritwebbläsare för att se ändringarna i kraft.
- Observera att förutom att vissa webbprofessorer väljer att använda andra element som eller taggarparen. Dessa taggar brukade vara djärva och kursiva specifikt, men avlägsnades och ersattes med och. Taggarna arbetar fortfarande i moderna webbläsare, men så många webbutvecklare använder dem som inline styling krokar. Det här är inte det värsta tillvägagångssättet, men om du vill undvika några avstängda 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 behöver ändra bara en liten bit text i ett dokument, kan det snabbt gå ur kontroll. Om du tycker att din sida är fylld med inline-element, som alla har unika klasser som du använder i din CSS-fil, kanske du gör fel, Kom ihåg, ju fler av dessa taggar som finns på din sida desto svårare kommer sannolikt att vara att behålla den sidan framåt. Dessutom har bra webtypografi sällan så många varianter av färg etc. i hela sidan.
