Hur man ändrar teckensnittsfärger på webbplatsen med CSS

CSS ger dig kontroll över utseendet på texten på de webbsidor du bygger och hanterar. I den här guiden visar vi dig hur du ändrar teckensnittsfärger i CSS med hjälp av färgnyckelord, hexadecimala färgkoder eller RGB-färgnummer.

Hur man använder CSS-stilar för att ändra teckensnittsfärg

Färgvärden kan uttryckas som färgnyckelord, hexadecimala färgnummer eller RGB-färgnummer. För den här lektionen måste du ha ett HTML-dokument för att se CSS-ändringarna och a separat CSS-fil som är bifogad det dokumentet. Vi ska titta på avsnittelementet specifikt.

Använd färgnyckelord för att ändra teckensnittsfärger

För att ändra textfärgen för varje stycke i din HTML-fil, gå till det externa formatmallen och skriv p {}. Placera Färg egendom i stil följt av ett kolon, som p {färg:}. Lägg sedan till ditt färgvärde efter egenskapen och avsluta det med ett semikolon. I det här exemplet ändras stycketexten till färgen svart:

p {
svart färg;
}

Använd hexadecimala värden för att ändra teckensnittsfärger

Att använda färgnyckelord för att ändra texten till rött, grönt, blått eller någon annan grundläggande färg ger dig inte den precision du kan titta när du skapar olika nyanser av dessa färger. Det är vad hexadecimala värden är för.

Denna CSS-stil kan användas för att färga dina stycken svart eftersom hexkoden # 000000 översätts till svart. Du kan till och med använda stenografi med det hex-värdet och skriva det som # 000 med samma resultat.

p {
färg: # 000000;
}

Hexvärden fungerar bra när du behöver en färg som inte bara är svart eller vit. Till exempel ger den här hex-koden dig möjligheten att ställa in en mycket specifik nyans av blått - en mellanklass, skifferliknande blå:

p {
färg: # 2f5687;
}

Hex fungerar genom att ställa in RGB-värden (röd, grön, blå) för en färg separat med bas-sexton värden. Det är därför de innehåller bokstäverna A genom F förutom siffrorna 0 genom 9.

Varje färg, röd, grön och blå, får sitt eget tvåsiffriga värde. 00 är det lägsta möjliga värdet, medan FF är den högsta. Färgerna listas i RGB-ordning i hex, så de två första siffrorna representerar det röda värdet och så vidare.

Använd RGBA-färgvärden för att ändra teckensnittsfärger

Slutligen kan du använda RGBA-färgvärden för att redigera teckensnittsfärger. RGCA stöds i alla moderna webbläsare, så du kan använda dessa värden med tillförsikt att det fungerar för de flesta tittare, men du kan också ställa in en lätt reserv.

Detta RGBA-värde är detsamma som den skifferblå färg som anges ovan:

p {
färg: rgba (47,86,135,1);
}

De första tre värdena anger de röda, gröna och blå värdena och det slutliga numret är alfa-inställningen för transparens. Alfa-inställningen är inställd på 1 för att betyda 100 procent, så den här färgen har ingen transparens. Om du ställer in värdet till ett decimaltal, som 0,85, översätts det till 85 procent opacitet och färgen skulle vara något transparent.

Om du vill skydda dina färgvärden, kopiera den här CSS-koden:

p {
färg: # 2f5687;
färg: rgba (47,86,135,1);
}

Denna syntax ställer in hexkoden först och skriver sedan över det värdet med RGBA-numret. Detta innebär att alla äldre webbläsare som inte stöder RGBA får det första värdet och ignorerar det andra.

Det är viktigt att komma ihåg att färgegenskapen fungerar på alla HTML-textelement i CSS. Du kan till exempel ändra alla dina länkfärger. Det här exemplet kommer att göra dina länkar ljusgröna:

en {
färg: # 16c616;
}

Detta fungerar med flera element samtidigt. Du kan ställa in varje titelnivå samtidigt. Detta ställer till exempel in alla dina titelelement till en midnattblå färg:

h1, h2, h3, h4, h5, h6 {
färg: # 020833;
}

Att komma med hex- eller RGBA-värdena för dina färger är inte alltid lätt. De flesta webbdesigners använder ett bildredigeringsprogram, som Photoshop eller GIMP, för att generera exakta koder. Du kan också hitta praktiska verktyg för färgväljare online, som den här från w3schools.

Andra sätt att utforma en HTML-sida

Teckensnittsfärger kan ändras med ett externt formatmall, ett internt formatmall eller integrerad stil i HTML-dokumentet. Bästa praxis dikterar dock att du ska använda ett externt formatmall för dina CSS-stilar.

Ett internt formatmall, som är stilar skrivna direkt i "huvudet" i ditt dokument, används vanligtvis bara för små webbplatser med en sida. Inbyggda stilar bör undvikas eftersom de liknar de gamla "font" -taggarna som vi behandlade för många år sedan. Dessa inbyggda stilar gör det mycket svårt att hantera teckensnittsstil eftersom du måste ändra dem vid varje instans av inline-stilen.