Wat te witten
- Kleurkaaiwurd : Fier yn in HTML-bestân p { color: black;} yn om de kleur foar elke paragraaf te feroarjen, wêrby’t swart ferwiist nei jo keazen kleur.
- Heksadesimale : Fier yn in HTML-bestân p {color: #000000;} yn om de kleur te feroarjen, wêrby’t 000000 ferwiist nei jo keazen hexadecimale wearde.
- RGBA : Fier yn in HTML-bestân p {color: rgba(47,86,135,1);} yn om de kleur te feroarjen, wêrby’t 47,86,135,1 ferwiist nei jo keazen RGBA-wearde.
CSS jout jo kontrôle oer it uterlik fan tekst op ‘e websiden dy’t jo bouwe en beheare. Yn dizze hantlieding litte wy jo sjen hoe’t jo lettertypekleuren feroarje kinne yn CSS mei help fan kleurkaaiwurden, heksadesimale kleurkoades, of RGB-kleurnûmers.
Hoe kinne jo CSS-stilen brûke om lettertypekleur te feroarjen
Kleurwearden kinne wurde útdrukt as kleurkaaiwurden, hexadesimale kleurnûmers, of RGB-kleurnûmers. Foar dizze les moatte jo in HTML-dokumint hawwe om de CSS-wizigingen te sjen en in apart CSS-bestân dat oan dat dokumint is taheakke. Wy sille spesifyk nei it paragraaf-elemint sjen.
Brûk kleurkaaiwurden om lettertypekleuren te feroarjen
Om de tekstkleur foar elke paragraaf yn jo HTML-bestân te feroarjen, gean dan nei it eksterne stylblêd en typ p { } . Plak it kleureigenskip yn ‘e styl folge troch in kolon, lykas p {color: } . Foegje dan jo kleurwearde ta nei it pân, einigje it mei in puntkomma. Yn dit foarbyld wurdt de alineatekst feroare yn de kleur swart:
p {
kleur: swart;
}
Ashley Nicole DeLeon / Lifewire
Brûk heksadesimale wearden om lettertypekleuren te feroarjen
It brûken fan kleurkaaiwurden om de tekst te feroarjen yn read, grien, blau, of in oare basiskleur sil jo net de krektens jaan dy’t jo miskien sykje by it meitsjen fan ferskate skaden fan dy kleuren. Dat is wêr’t heksadesimale wearden foar binne. Dizze CSS-styl kin brûkt wurde om jo paragrafen swart te kleurjen, om’t de hex-koade #000000 oerset nei swart. Jo kinne sels shorthand brûke mei dy hex-wearde en skriuwe as #000 mei deselde resultaten.
p {
kleur: #000000;
}
Hex-wearden wurkje goed as jo in kleur nedich hawwe dy’t net gewoan swart of wyt is. Bygelyks, dizze hex-koade jout jo de mooglikheid om in heul spesifike skaad fan blau yn te stellen – in mid-range, lei-like blau:
p {
kleur: #2f5687;
}
Hex wurket troch it ynstellen fan de RGB (read, grien, blau) wearden fan in kleur apart mei basis-sechstjin wearden. Dêrom befetsje se neist de sifers 0 oant en mei 9 de letters A oant en mei F. Elke kleur, read, grien en blau, krijt syn eigen twa-siferswearde. 00 is de leechste wearde mooglik, wylst FF is de heechste. De kleuren wurde fermeld yn RGB folchoarder yn in hex, sadat de earste twa sifers fertsjintwurdigje de reade wearde ensafuorthinne.
Brûk RGBA-kleurwearden om lettertypekleuren te feroarjen
Uteinlik kinne jo RGBA-kleurwearden brûke om lettertypekleuren te bewurkjen. RGCA wurdt stipe yn alle moderne browsers, dus jo kinne dizze wearden brûke mei fertrouwen dat it sil wurkje foar de measte sjoggers, mar jo kinne ek in maklike fallback ynstelle. Dizze RGBA-wearde is itselde as de hjirboppe spesifisearre leiblauwe kleur:
p {
kleur: rgba(47,86,135,1);
}
De earste trije wearden set de reade, griene en blauwe wearden yn en it lêste nûmer is de alfa-ynstelling foar transparânsje. De alfa-ynstelling is ynsteld op 1 om 100 prosint te betsjutten, dus dizze kleur hat gjin transparânsje. As jo dizze wearde ynstelle op in desimaal getal, lykas .85, fertaalt it nei 85 prosint opasiteit en soe de kleur wat transparant wêze. As jo jo kleurwearden kûgelbefeiligje wolle, kopiearje dan dizze CSS-koade:
p {
kleur: #2f5687;
kleur: rgba(47,86,135,1);
}
Dizze syntaksis stelt earst de hex-koade yn en oerskriuwt dy wearde dan mei it RGBA-nûmer. Dit betsjut dat elke âldere browser dy’t RGBA net stipet de earste wearde sil krije en de twadde negearje. It is wichtich om te hâlden dat it kleureigenskip wurket op elk HTML-tekstelemint yn CSS. Jo kinne bygelyks al jo keppelingskleuren feroarje. Dit foarbyld sil jo keppelings helder grien meitsje:
a {
kleur: #16c616;
}
Dit wurket ek mei meardere eleminten tagelyk. Jo kinne elk titelnivo tagelyk ynstelle. Dit sil bygelyks al jo titeleleminten ynstelle op in middernachtblauwe kleur:
h2, h2, h3, h4, h5, h6 {
kleur: #020833;
}
It is net altyd maklik om te kommen mei de hex- as RGBA-wearden foar jo kleuren. De measte webûntwerpers sille in byldbewurkingsprogramma brûke, lykas Photoshop of GIMP, om de krekte koades te generearjen. Jo kinne ek handige ark foar kleurkiezer online fine, lykas dizze fan w3schools.
Oare manieren om in HTML-side te styljen
Lettertypekleuren kinne feroare wurde mei in ekstern stylblêd, in ynterne stylblêd, of ynline styling binnen it HTML-dokumint. Best practices diktearje lykwols dat jo in ekstern stylblêd moatte brûke foar jo CSS-stilen. In ynterne stylblêd, dat binne stilen dy’t direkt yn ‘e “kop” fan jo dokumint skreaun binne, wurde oer it generaal allinich brûkt foar lytse websides fan ien side. Inline-stilen moatte wurde mijd, om’t se ferlykber binne mei de âlde “lettertype”-tags dy’t wy in protte jierren lyn behannele hawwe. Dizze ynline-stilen meitsje it heul lestich om lettertypestyl te behearjen, om’t jo se moatte feroarje by elk eksimplaar fan ‘e ynline-styl.
Oersicht
It is hiel nijsgjirrich om te notearjen dat ferskate websiden hiel goed deselde HTML-koade kinne hawwe, mar har styling as CSS is wat se oars meitsje soe! Prate oer CSS yn it bysûnder, grafysk ûntwerper toant har kreativiteit dêrtroch. Net allinich jout it de webûntwerper kontrôle oer it uterlik fan ‘e websiden, mar it helpt ek by it meitsjen fan in fisuele hierargy troch parameters lykas foarm, kleur, romte en grutte.
Scope
Yn dizze tutorial sille wy it folgjende leare-
- Wy sille begjinne mei in koarte ynlieding oer in HTML-bestân en hoe’t jo it ynstelle.
- Dan sille wy leare hoe’t jo de tekstkleur yn CSS kinne feroarje en de ferskate metoaden om dit te dwaan-
- Mei help fan kleur kaaiwurden
- Heksadesimale wearden brûke
- Gebrûk fan RGBA-kleurwearden
Basisstruktuer fan in HTML-bestân
De presintaasje fan in dokumint skreaun yn opmaaktalen lykas HTML wurdt beskreaun mei in stylblêdtaal bekend as CSS. HTML stiet foar HyperText Markup Language, wylst CSS de ôfkoarting is foar Cascading Style Sheets. Se binne unyk yn har syntaksis. Wylst HTML koe wurde beskôge as de struktuer fan in webside, CSS is de styling dien op ‘e struktuer.
It ynstellen fan in HTML-bestân
Lit ús meitsje in HTML triem neamd Index.html. Wy sille it it CSS-bestân style.css neame. Mei dit bestân sille jo leare hoe’t jo tekstkleur feroarje kinne yn CSS. Nei it tafoegjen fan de fereaske boilerplate, is de ynhâld fan Index.html as folget –
<!doctype html> <html> <head> <link href="style.css" rel="stylesheet" /> </head> <body> <h2>Welcome to InterviewBit!</h2> <h2> Learning CSS!</h2> <p> Hello World!</p> </body> </html> Learje hoe’t jo tekstkleur feroarje kinne yn CSS
Wy kinne tekstkleur yn CSS frij maklik feroarje. D’r binne trije techniken dy’t wy kinne brûke, dy’t as folgjend binne-
- Mei help fan kleur kaaiwurden
- Heksadesimale wearden brûke
- Gebrûk fan RGBA-kleurwearden
Kleurkaaiwurden brûke om tekstkleur yn CSS te feroarjen
Om tekstkleur yn CSS te feroarjen, kinne jo de kleurkaaiwurden brûke om dit te berikken.
- Kleurkaaiwurden binne neat oars as de nammen fan ‘e kleuren lykas read, blau, giel, ensfh.
- Wy sille de lettertypekleur fan ‘e koptekst of de h2-tag yn Index.html feroarje nei read.
- Om dit te dwaan sille jo nei it eksterne CSS-bestân gean, dat is style.css. Jo moatte de folgjende koade deroan tafoegje –
De lettertypekleur sil mei súkses feroare wurde yn read fan ‘e standertkleur.
Heksadesimale wearden brûke om tekstkleuren yn CSS te feroarjen
Faker as net, by it ûntwerpen fan in webside, kin d’r in spesifyk kleurskema as merkkit wêze dat jo miskien moatte brûke. Dit kin net mooglik wêze as jo kleurkaaiwurden brûke lykas blau, grien, read, ensfh Sa kinne jo no leare om de heksadesimale wearden te brûken om de lettertypekleur fan ‘e paragraaf-eleminten te feroarjen. 
Litte wy ris sjen hoe’t jo dit kinne berikke – Foegje de folgjende koade ta oan style.css. Dit sil de kleur fan ‘e paragraaf-eleminten feroarje nei in spesifike skaad fan blau fan ús kar.
RGBA-kleurwearden brûke om tekstkleur yn CSS te feroarjen
RGBA-kleurweardemanipulaasje is ek in goede manier om tekstkleur yn CSS te feroarjen. De RGBA-ôfkoarting stiet foar Red, Blue, Green en Alpha.
De Alpha-wearde kontrolearret de transparânsje fan ‘e kleur. Bygelyks, as de wearde fan Alpha is ynsteld op 1: it betsjut dat de kleur folslein ûntrochsichtich is. Oan ‘e oare kant, as it 0,75 is, suggerearret it dat de kleur mar 75% ûntrochsichtich of 25% transparant soe wêze. 
Dat hjir is hoe’t jo de kleur fan ús h2-tag sille feroarje yn Index.html mei de RGBA-kleurwearden –
h2 { color: rgba(47,86,135,1); } Sadree’t de boppesteande koade is tafoege oan de style.css triem, kinne jo sizze dat jo witte hoe te feroarjen lettertype kleur yn CSS. 
No witte jo hoe’t jo lettertypekleur yn CSS effisjint feroarje kinne. Hoewol dit ek kin wurde berikt fia ynterne CSS en ynline CSS, bliuwt de bêste praktyk mei it brûken fan in eksterne CSS-bestân, krekt lykas jo diene yn dizze tutorial. Dus no, de folgjende kear dat immen jo freget, “Hoe kinne jo de lettertypekleur feroarje mei CSS?” jo sille har net allinich kinne fertelle hoe’t se dat moatte dwaan, mar ek wat tips diele oer ferskate lettertype-eigenskippen!
Konklúzje
Yn dizze tutorial hawwe wy de trije ferskillende manieren behannele wêrop jo lettertypekleur yn CSS kinne feroarje. Om it gear te nimmen, se binne-
- Kleurkaaiwurden brûke – Jo kinne gewoan kleurkaaiwurden brûke dy’t neat oars binne as de namme fan kleuren, om jo HTML-bestân te stylearjen.
- Heksadesimale wearden brûke – Heksadesimale wearden kinne jo tuskenkleuren en spesifike kleuren krije, wat net mooglik is by it brûken fan kleurkaaiwurden. Dus no, as jo frege wurde om in bepaald kleurskema as in merkkit te folgjen, wite jo hokker technyk jo moatte brûke yn CSS.
- RGBA-wearden brûke – As jo bewust binne fan ‘e wearden fan Read, Blau, Grien en Alpha dy’t moatte wurde brûkt, dan is dit de bêste manier foar jo om tekstkleur yn CSS te feroarjen. As ûntwerper kinne jo ek de transparânsje fan ‘e kleur manipulearje mei it Alpha-attribuut fan dizze metoade.
Kontrolearje oer jo webside is in wichtich elemint fan webûntwerp. Yn in ideale wrâld soene jo elk aspekt fan it ûntwerp fan jo side moatte kinne feroarje sûnder te hoege te kompromissen oer it ôfmakke produkt.
Fansels kinne websiden lykwols faak koppig wêze. It is net altyd mooglik om de resultaten te berikken dy’t jo wolle sûnder yn ‘e wrâld fan CSS te dûken. Litte wy ris sjen hoe’t jo tekstkleur kinne feroarje mei CSS op jo webside om jo in idee te jaan hoe’t jo mear kinne berikke mei de krêft fan CSS.
Feroarje webside tekstkleur mei CSS
CSS is soarchfâldich ûntworpen om te soargjen dat it ûntwerpers macht jout oer har websideprojekten. It is ongelooflijk maklik om tekstkleur te feroarjen mei CSS op jo webside; jo hawwe mar ien regel nedich om it te dwaan.
color: blue;Fansels wurkje lykwols CSS-regels op har eigen net heul goed. Jo moatte se kombinearje mei elemintklassen, ID’s en identifiers om te soargjen dat webbrowsers witte wêr’t de styl op jildt. Jo kinne sjen foarbylden fan dizze regel wurdt brûkt mei in H1 heading, P alinea, en in knop hjirûnder.
h2 { color: blue; } p { color: red; } button { color: red; }Dit soe jo in basisbegryp jaan moatte fan wat jo moatte dwaan om de kleur fan ‘e tekst fan jo webside te feroarjen mei CSS. It duorret meastentiids mear as dit, benammen as jo ferskate kleuren wolle jaan oan ‘e ferskillende tekst op jo webside.
De juste CSS-klasse fine
It iepenjen fan de ynspekteur
- Google Chrome : CTRL + Shift + C of Menupunten > Mear ark > Untwikkeldersark
- Microsoft Edge : CTRL + Shift + C of Menu Dots > Mear ark > Untwikkelders ark
- Mozilla Firefox : CTRL + Shift + C of menupunten > Mear ark > ark foar webûntwikkelders
- Apple Safari : Foarkarren > Avansearre > Untwikkelje sjen litte yn menubalke en dan Untwikkelje > Webynspekteur sjen litte
De juste CSS-tekststyl fine
- Google Chrome : Rjochtsklik > Ynspektearje
- Microsoft Edge : Rjochtsklik > Ynspektearje
- Mozilla Firefox : Rjochtsklik > Ynspektearje of Q
- Apple Safari : Rjochtsklik > Ynspektearje elemint
Jo nije CSS tafoegje
.listing-title { color: blue; }Wat as jo tekstkleur net feroaret?
- De cache leegje : Websites brûke faak caching om laadtiden te ferminderjen. Jo cache kin jo foarkomme dat jo websidewizigingen sjogge, en jo moatte it leegje as jo wizigingen meitsje yn CSS.
- Heger yn it stylblêd : CSS laadt stilen sequentieel, en dit betsjut dat de earste regels yn jo stylblêd dejingen sille wêze dy’t op jo webside werjaan. Bewegende stilen kinne in goede manier wêze om har prioriteit te jaan boppe oare stilen.
- Wichtige tags brûke : Dizze folgjende opsje wurdt net beskôge as bêste praktyk en is it bêste reservearre foar wannear’t jo gjin oare kar hawwe. Jo kinne in wichtige tag tafoegje oan jo CSS-tekststilen om se prioriteit te jaan boppe alle oare stilen, en dit kin hjirûnder sjoen wurde:
.listing-title { color: blue !important; }Oare tekststyl CSS Fun
- Lettertypegrutte : Dit feroaret de grutte fan tekst op jo webside, bygelyks lettertypegrutte: 12px;
- Lettertype-gewicht : Gewicht ferwiist nei de dikte fan in lettertype, mei fet is heech gewicht en tinne tekst is leech, bygelyks lettertype-gewicht: 400;
- Text-align : Dit feroaret de ôfstimming fan de tekst dêr’t jo mei wurkje, bygelyks text-align: right;
- Tekst-skaad : Hjirmei kinne jo in skaad tafoegje oan jo tekst mei in ferskaat oan attributen, bygelyks tekst-skaad: 2px 2px 3px swart;
- Text-transform : Dit feroaret it gefal fan ‘e tekst wêrmei jo wurkje, bygelyks tekst-transform: haadletters;
- Tekst-dekoraasje : Hjirmei kinne jo ûnderstreken, streepkes en oare dekoraasjes tafoegje oan tekst, bgl. tekst-dekoraasje: ûnderstreekje;
Dit is gewoan it oerflak fan wat jo kinne dwaan mei tekststilen yn CSS. D’r binne in protte gidsen op it web dy’t jo kinne helpe mei dit proses, en it is altyd in goed idee om wat ûndersyk te dwaan as jo begjinne.
Learje mear dan CSS-tekstkleur
Oefenjen, eksperimintearjen en probearjen en flater binne de bêste manieren om in ark lykas CSS te learen. Stylblêden kinne dreech lykje as jo earst mei har wurkje, mar se binne ongelooflijk maklik om mei te wurkjen as jo ienris wat tiid mei har trochbrocht hawwe.
- Hoe kinne jo pdf's fusearje op mac
- Hoe te bewarjen sitroenen
- Hoe kinne jo in bidet brûke
- Hoe kinne jo in hamster sliepe?
- Hoe soargje foar in trekhynder