Hvordan endre skriftfarger på nettstedet med CSS
Lag fontene på nettstedet til hvilken som helst farge du ønsker
Hva du bør vite
CSS gir deg kontroll over utseendet til tekst på nettsidene du bygger og administrerer. I denne veiledningen viser vi deg hvordan du endrer skriftfarger i CSS ved å bruke fargenøkkelord, heksadesimale fargekoder eller RGB-fargetall.
Hvordan bruke CSS-stiler for å endre skriftfarge
Fargeverdier kan uttrykkes som fargenøkkelord, 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 det dokumentet . Vi skal se på avsnittselementet, spesifikt.
Bruk fargenøkkelord for å endre skriftfarger
For å endre tekstfargen for hvert avsnitt i HTML-filen, gå til det eksterne stilarket og skriv p { } . Plasser farge eiendom i stilen etterfulgt av et kolon, som p { farge: } . Deretter legger du til fargeverdien etter egenskapen, og avslutter den med et semikolon. I dette eksemplet endres avsnittsteksten til fargen svart:
p {
farge svart;
}
Ashley Nicole DeLeon / Lifewire
Bruk heksadesimale verdier for å endre skriftfarger
Å bruke fargenøkkelord for å endre teksten til rød, grønn, blå eller en annen grunnfarge vil ikke gi deg den presisjonen du kanskje ser når du lager forskjellige nyanser av disse fargene. Det er hva heksadesimale verdier er for.
Denne CSS-stilen kan brukes til å fargelegge avsnittene dine svarte fordi hex-koden #000000 oversettes til svart. Du kan til og med bruke stenografi med den hex-verdien og skrive den som #000 med samme resultat.
p {
farge: #000000;
}
Hex-verdier fungerer bra når du trenger en farge som ikke bare er svart eller hvit. For eksempel gir denne hex-koden deg muligheten til å angi en veldig spesifikk nyanse av blått - en mellomtone, skiferlignende blå:
p {
farge: #2f5687;
}
Hex fungerer ved å angi RGB-verdiene (rød, grønn, blå) for en farge separat med basis-seksten verdier. Det er derfor de inneholder 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 en hex, så de to første sifrene representerer den røde verdien og så videre.
Bruk RGBA-fargeverdier for å endre skriftfarger
Til slutt kan du bruke RGBA-fargeverdier for å redigere skriftfarger. RGCA støttes i alle moderne nettlesere, så du kan bruke disse verdiene med tillit til at det vil fungere for de fleste seere, men du kan også sette en enkel tilbakestilling.
Denne RGBA-verdien er den samme som den skiferblå fargen spesifisert ovenfor:
p {
farge: rgba(47,86,135,1);
}
De tre første verdiene angir verdiene for rød, grønn og blå, og det siste tallet er alfa-innstillingen for gjennomsiktighet. Alfa-innstillingen er satt til 1 for å bety 100 prosent, så denne fargen har ingen gjennomsiktighet. Hvis du setter den verdien til et desimaltall, som 0,85, vil det oversettes til 85 prosent opasitet og fargen vil være litt gjennomsiktig.
Hvis du vil skuddsikre fargeverdiene dine, kopier denne CSS-koden:
p {
farge: #2f5687;
farge: rgba(47,86,135,1);
}
Denne syntaksen setter hex-koden først 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 lenkefargene dine. Dette eksemplet vil gjøre koblingene dine lysegrønne:
en {
farge: #16c616;
}
Dette fungerer også med flere elementer samtidig. Du kan stille inn alle tittelnivåer samtidig. For eksempel vil dette sette alle tittelelementene dine til en midnattsblå farge:
h1, h2, h3, h4, h5, h6 {
farge: #020833;
}
Det er ikke alltid lett å finne 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 fargevelgerverktøy på nettet, som denne fra w3schools .
Andre måter å style en HTML-side på
Skriftfarger kan endres med et eksternt stilark, et internt stilark eller innebygd stil i HTML-dokumentet. Beste praksis tilsier imidlertid at du bør bruke et eksternt stilark for CSS-stilene dine.
Et internt stilark, som er stiler skrevet direkte i 'hodet' av dokumentet ditt, brukes vanligvis bare for små ensides nettsteder. Innebygde stiler bør unngås siden de er beslektet med de gamle 'font'-taggene som vi behandlet for mange år siden. Disse innebygde stilene gjør det veldig vanskelig å administrere skriftstilen siden du må endre dem ved hver forekomst av den innebygde stilen.