Hvordan endre nettside skriftfarger med CSS

CSS gir deg kontroll over utseendet til tekst på websidene du bygger og administrerer. I denne guiden viser vi deg hvordan du endrer skriftfarger i CSS ved å bruke fargeord, heksadesimale fargekoder eller RGB-fargetall.

Hvordan bruke CSS-stiler for å endre skriftfarge

Fargeverdier kan uttrykkes som fargeord, heksadesimale fargetall eller RGB-fargetall. For denne leksjonen må du ha et HTML-dokument for å se CSS-endringene og en separat CSS-fil som er vedlagt dokumentet. Vi skal se på avsnittelementet, spesielt.

Bruk fargenøkkelord for å endre skriftfarger

Hvis du vil endre tekstfargen for hvert avsnitt i HTML-filen, går du til det eksterne stilarket og skriver

p {}. Plasser farge eiendom i stil fulgt av et kolon, som p {farge:}. Deretter legger du til fargeverdien din etter eiendommen, og avslutter den med semikolon. I dette eksemplet endres avsnittsteksten til fargen svart:

p {
farge svart;
}

Bruk heksadesimale verdier til å endre skriftfarger

Bruk av fargeord for å endre teksten til rød, grønn, blå eller annen grunnleggende farge gir deg ikke den presisjonen du ser etter når du lager forskjellige nyanser av disse fargene. Det er det heksadesimale verdier er for.

Denne CSS-stilen kan brukes til å farge avsnittene dine svart fordi hex-koden # 000000 oversettes til svart. Du kan til og med bruke stenografi med den hexverdien og skrive den som # 000 med de samme resultatene.

p {
farge: # 000000;
}

Hex-verdier fungerer bra når du trenger en farge som ikke bare er svart eller hvit. For eksempel gir denne heksekoden deg muligheten til å angi en veldig spesifikk nyanse av blått - et mellomlag, skiferlignende blått:

p {
farge: # 2f5687;
}

Hex fungerer ved å sette RGB (rød, grønn, blå) verdier for en farge separat med basis-seksten verdier. Derfor inneholder de bokstavene EN gjennom F i tillegg til sifrene 0 gjennom 9.

Hver farge, rød, grønn og blå, får sin egen tosifrede verdi. 00 er den laveste mulige verdien, mens FF er den høyeste. Fargene er oppført i RGB-rekkefølge i sekskant, så de to første sifrene representerer den røde verdien og så videre.

Bruk RGBA-fargeverdier til å endre skriftfarger

Til slutt kan du bruke RGBA-fargeverdier til å redigere skriftfarger. RGCA støttes i alle moderne nettlesere, slik at du kan bruke disse verdiene med tillit til at det vil fungere for de fleste seere, men du kan også angi en enkel tilbakebetaling.

Denne RGBA-verdien er den samme som den skiferblå fargen som er angitt ovenfor:

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

De tre første verdiene setter verdiene Rød, Grønn og Blå, og det endelige tallet er alfa-innstillingen for gjennomsiktighet. Alfa-innstillingen er satt til 1 til å bety 100 prosent, så denne fargen har ingen gjennomsiktighet. Hvis du setter denne verdien til et desimaltall, som 0,85, oversettes det til 85 prosent opasitet, og fargen vil være litt gjennomsiktig.

Hvis du ønsker å skuddsikre fargeverdiene dine, kopier du denne CSS-koden:

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

Denne syntaksen setter først heksekoden og overskriver deretter verdien med RGBA-nummeret. Dette betyr at enhver eldre nettleser som ikke støtter RGBA vil få den første verdien og ignorere den andre.

Det er viktig å huske på at fargeegenskapen fungerer på alle HTML-tekstelementer i CSS. Du kan for eksempel endre alle koblingsfargene dine. Dette eksemplet vil gjøre lenkene dine lyse grønne:

en {
farge: # 16c616;
}

Dette fungerer med flere elementer samtidig. Du kan stille inn hvert tittelnivå samtidig. For eksempel vil dette sette alle tittelelementene dine til en midnattblå farge:

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

Det er ikke alltid lett å komme med hex- eller RGBA-verdiene for fargene dine. De fleste webdesignere vil bruke et bilderedigeringsprogram, som Photoshop eller GIMP, for å generere de nøyaktige kodene. Du kan også finne praktiske verktøy for fargevelger på nettet, som denne fra w3schools.

Andre måter å style en HTML-side på

Fontfarger kan endres med et eksternt stilark, et internt stilark eller innebygd styling i HTML-dokumentet. Beste fremgangsmåter tilsier imidlertid at du skal bruke et eksternt stilark for CSS-stilene dine.

Et internt stilark, som er stiler skrevet direkte i "hodet" på dokumentet ditt, brukes vanligvis bare på små nettsider. Inline-stiler bør unngås, siden de ligner på de gamle "font" -kodene som vi jobbet med for mange år siden. Disse innebygde stilene gjør det veldig vanskelig å administrere skriftstilen, siden du må endre dem i alle tilfeller av den innebygde stilen.