Sådan ændres websitefontfarver med CSS

CSS giver dig kontrol over udseendet af tekst på de websider, du bygger og administrerer. I denne vejledning viser vi dig, hvordan du ændrer skrifttypefarver i CSS ved hjælp af farveord, hexadecimale farvekoder eller RGB-farvenumre.

Sådan bruges CSS-stilarter til at ændre skriftfarve

Farveværdier kan udtrykkes som farvenøgleord, hexadecimale farvetal eller RGB-farvetal. Til denne lektion skal du have et HTML-dokument for at se CSS-ændringer og en separat CSS-fil, der er vedhæftet dette dokument. Vi skal specifikt se på afsnitelementet.

Brug farvenøgleord til at ændre skrifttypefarver

For at ændre tekstfarven for hvert afsnit i din HTML-fil skal du gå til det eksterne typografiark og skrive p {}. Anbring farve ejendom i stil efterfulgt af et kolon, ligesom p {farve:}. Tilføj derefter din farveværdi efter ejendommen, og slut den med et semikolon. I dette eksempel ændres afsnitsteksten til farven sort:

p {
farve: sort;
}

Brug hexadecimale værdier til at ændre skrifttypefarver

Brug af farve nøgleord til at ændre teksten til rød, grøn, blå eller en anden grundlæggende farve giver dig ikke den præcision, du ser efter, når du opretter forskellige nuancer af disse farver. Det er, hvad hexadecimale værdier er for.

Denne CSS-stil kan bruges til at farve dine afsnit sort, fordi hex-koden # 000000 oversættes til sort. Du kan endda bruge stenografi med den hex-værdi og skrive det som # 000 med de samme resultater.

p {
farve: # 000000;
}

Hex-værdier fungerer godt, når du har brug for en farve, der ikke blot er sort eller hvid. For eksempel giver denne hex-kode dig muligheden for at indstille en meget specifik nuance af blå — en mellemklasse, skiferlignende blå:

p {
farve: # 2f5687;
}

Hex fungerer ved at indstille RGB (rød, grøn, blå) værdier for en farve separat med base-seksten værdier. Derfor indeholder de bogstaverne EN igennem F ud over cifrene 0 igennem 9.

Hver farve, rød, grøn og blå, modtager sin egen tocifrede værdi. 00 er den lavest mulige værdi, mens FF er den højeste. Farverne er anført i RGB-rækkefølge i hexadecimalt format, så de to første cifre repræsenterer den røde værdi og så videre.

Brug RGBA-farveværdier til at ændre skrifttypefarver

Endelig kan du bruge RGBA-farveværdier til at redigere skrifttypefarver. RGCA understøttes i alle moderne browsere, så du kan bruge disse værdier med tillid til, at det fungerer for de fleste seere, men du kan også indstille en let tilbageførsel.

Denne RGBA-værdi er den samme som den skiferblå farve, der er angivet ovenfor:

p {
farve: rgba (47,86,135,1);
}

De første tre værdier indstiller de røde, grønne og blå værdier, og det endelige tal er alfa-indstillingen for gennemsigtighed. Alfa-indstillingen er indstillet til 1 til at betyde 100 procent, så denne farve har ingen gennemsigtighed. Hvis du indstiller denne værdi til et decimaltal, som f.eks. 85, oversættes det til 85 procent opacitet, og farven ville være lidt gennemsigtig.

Hvis du vil skudsikker dine farveværdier, skal du kopiere denne CSS-kode:

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

Denne syntaks indstiller først hex-koden og overskriver derefter denne værdi med RGBA-nummeret. Dette betyder, at enhver ældre browser, der ikke understøtter RGBA, får den første værdi og ignorerer den anden.

Det er vigtigt at huske på, at farveegenskaben fungerer på ethvert HTML-tekstelement i CSS. Du kan for eksempel ændre alle dine linkfarver. Dette eksempel gør dine links lyse grønne:

en {
farve: # 16c616;
}

Dette fungerer også med flere elementer på én gang. Du kan indstille hvert titelniveau samtidigt. For eksempel vil dette indstille alle dine titelelementer til en midnatblå farve:

h1, h2, h3, h4, h5, h6 {
farve: # 020833;
}

Det er ikke altid let at komme med hex- eller RGBA-værdierne til dine farver. De fleste webdesignere bruger et billedredigeringsprogram som Photoshop eller GIMP til at generere de nøjagtige koder. Du kan også finde praktiske farvevælgerværktøjer online, f.eks denne fra w3schools.

Andre måder at style en HTML-side på

Fontfarver kan ændres med et eksternt typografiark, et internt stilark eller inline-styling i HTML-dokumentet. Imidlertid dikterer bedste praksis, at du skal bruge et eksternt typografiark til dine CSS-typografier.

Et internt stilark, som er typografier skrevet direkte i "dokumentets" hoved, bruges normalt kun til små websider med en side. Inline-stilarter bør undgås, da de ligner de gamle "font" tags, som vi behandlede for mange år siden. Disse indbyggede stilarter gør det meget svært at administrere skrifttypestil, da du er nødt til at ændre dem i hvert tilfælde af den indbyggede stil.