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;
}

Yllustraasje fan in persoan dy't CSS brûkt om har websidekleuren te feroarjen 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

feroarje tekstkleur yn css

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. ôfbylding alt 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. hoe te feroarjen lettertype kleur yn css 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. ôfbylding alt 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

firefox-ynspekteur-finster Foardat jo de spesifike tekst op jo webside kinne feroarje, moatte jo witte hoe’t jo it identifisearje binnen jo CSS. De measte webbrowsers hawwe in set ark dy’t binne ûntworpen om ûntwikkelders te helpen, en it is wierskynlik dat dejinge dy’t jo brûke hat wat in Inspector neamd wurdt . Dit kin brûkt wurde om te sjen yn ‘e HTML en oare koade dy’t in webside bouwt.

It iepenjen fan de ynspekteur

chrome ynspekteur finster It iepenjen fan de ynspekteur is oars yn elk fan ‘e browsers op’ e merk. Wy hawwe hjirûnder in hantsjefol fan ‘e populêrste browsers behannele om jo in foarsprong te jaan:

  • 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

chrome ynspeksje elemint It kin betiizjend wêze as jo de ynspekteur foar it earst iepenje yn jo browser. D’r sille in protte dingen wêze dy’t jo miskien net begripe, mar jo hoege jo no gjin soargen te meitsjen oer dit. Jo moatte gewoan de stylnamme fine fan ‘e tekst dy’t jo besykje te feroarjen. As foarbyld sille wy de CSS-tekststyl fine en feroarje dy’t brûkt wurdt foar de haadkoptekst op ‘e MakeUseOf-programmearring seksje. Jo kinne dit proses begjinne troch it elemint te ynspektearjen dat feroare wurde moat.

  • Google Chrome : Rjochtsklik > Ynspektearje
  • Microsoft Edge : Rjochtsklik > Ynspektearje
  • Mozilla Firefox : Rjochtsklik > Ynspektearje of Q
  • Apple Safari : Rjochtsklik > Ynspektearje elemint
css tekstkleur tafoegje Troch dit te dwaan sil jo websidekonsole / ynspekteurfinster fokusje op it elemint dat jo besykje te feroarjen. Yn Chrome, Safari, Edge en Firefox soene jo in seksje moatte sjen mei de namme Styles dy’t alle CSS-koade befettet foar it elemint dat jo ynspektearje. Jo moatte ek jo HTML-elemint markearre sjen yn in paniel njonken dit. Dit kin brûkt wurde om de klasse of ID út te finen fan it elemint dat jo feroarje. Yn ús gefal sjogge wy nei de haadkop fan H1 op ús side, en dit heart ta in klasse neamd .listing-title. Op dit punt kinne jo de CSS-tekststyl testje dy’t jo sille tafoegje oan jo webside. It boppeste diel fan ‘e seksje fan’ e CSS-styl yn ‘e websidekonsole kin brûkt wurde om regels ta te passen op it spesifike elemint dat jo hawwe rjochte. Fansels is dit lykwols net permanint.

Jo nije CSS tafoegje

foegje css ta oan webside It is no tiid om jo nije CSS ta te foegjen oan jo webside. De manier wêrop jo dit dogge sil ôfhingje fan it type websideplatfoarm dat jo brûke, mei opsjes lykas Shopify dy’t tafoegings fereaskje om jo CSS ta te foegjen sûnder jo bestannen te feroarjen. Hoe dan ek jo CSS-koade tafoegje, jo moatte der wis fan wêze dat it goed is. It brûken fan CSS-regels yn tekststyl is net te hurd, mar it kin frustrerend wêze as jo net kinne útfine hoe’t jo jo tekstkleur kinne feroarje. Foar ús foarbyld is dit de koade dy’t wy moatte tafoegje oan ús webside.

.listing-title { color: blue; }

Wat as jo tekstkleur net feroaret?

css tekstkleur gjin feroaring Sadree’t jo jo CSS-bestân bewurke hawwe, moatte jo de wiziging sjen kinne dy’t jo makke hawwe sa gau as jo jo side ferfarskje. It is lykwols net altyd sa ienfâldich as dit. CSS kin komplekser wêze as minsken ferwachtsje, en jo moatte miskien mear dwaan op dit poadium.

  • 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

leuk mei css CSS is in ongelooflijk krêftich ark, dat jo tagong jout ta in gasthear fan ferskate opsjes as jo wurkje mei tekst en oare eleminten op jo webside. Dit hâldt net allinich op mei CSS-tekstkleur, en jo kinne in protte dwaan mei jo tekst as jo kieze om in bytsje CSS te learen. Jo kinne wat mear basisregels foar CSS-tekststyl hjirûnder fine:

  • 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.


Leave a comment

Your email address will not be published. Required fields are marked *