Goeie tipografiese ontwerp is 'n belangrike deel van 'n suksesvolle webwerf. CSS gee jou groot beheer oor die voorkoms van teks op die webbladsye van die webbladsye wat jy bou. Dit sluit in die vermoë om die kleur van enige lettertipes wat jy gebruik, te verander.
Lettertipe kleure kan verander word met behulp van 'n eksterne stylvel , 'n interne stylvel , of dit kan verander word met behulp van inline-stilering in die HTML-dokument. Beste praktyke dikteer dat u 'n eksterne stylblad vir u CSS-style moet gebruik. 'N Interne stylblad, wat style is wat direk in die kop van jou dokument geskryf word, word gewoonlik slegs vir klein een bladsy-werwe gebruik. Inline style moet vermy word, aangesien hulle soortgelyk is aan die ou "font" -kaarte wat ons baie jare gelede behandel het. Hierdie inline-style maak dit baie moeilik om fontstyl te bestuur, aangesien jy dit by elke instansie van die inlynstyl moet verander.
In hierdie artikel leer jy hoe om die lettertipe-kleur te verander met 'n eksterne stylvel en 'n styl wat in 'n paragraafetiket gebruik word. Jy kan dieselfde styl eiendom toepas om die lettertipe kleur te verander op enige merker wat teks omring, insluitend die
-tag.Stelle byvoeg om skrifkleure te verander
Vir hierdie voorbeeld moet u 'n HTML-dokument vir u bladsy-opmaak en 'n aparte CSS-lêer hê wat aan die dokument geheg is. Die HTML-dokument sal waarskynlik 'n aantal elemente daarin maak. Die een waarvoor ons besig is met die doel van hierdie artikel is die paragraafelement.
Gaan soos volg te werk om die lettertipe kleur van teks binne paragraaf-etikette te verander met u eksterne stylblad.
Kleurwaardes kan uitgedruk word as kleurwoorde, RGB-kleurnommers of heksadesimale kleurgetalle.
- Voeg die style kenmerk by vir die paragraaf tag:
- p {}
- Plaas die kleur eiendom in die styl. Plaas 'n kolon na daardie eiendom:
- p {kleur:}
- Voeg dan jou kleurwaarde na die eiendom toe. Maak seker dat jy die waarde met 'n semi-kolon beëindig:
- p {kleur: swart;}
Die paragrawe in jou bladsy sal nou swart wees.
Hierdie voorbeeld gebruik 'n kleur navraag - "swart". Dit is een manier om kleur in CSS te voeg, maar dit is baie beperkend. Die gebruik van sleutelwoorde vir "swart" en "wit" is eenvoudig omdat die twee kleure baie spesifiek is, maar wat gebeur as jy sleutelwoorde soos "rooi", "blou" of "groen" gebruik? Presies watter skaduwee van rooi, blou of groen sal jy kry? U kan nie presies spesifiseer watter kleurskerm u met sleutelwoorde wil hê nie. Daarom word heksadesimale waardes dikwels gebruik in plaas van kleur sleutelwoorde.
p (kleur: # 000000; }
Hierdie CSS-styl sal ook die kleur van jou paragrawe in swart stel, want die hex kode van # 000000 vertaal na swart. Jy kan selfs kortskrif gebruik met daardie hex waarde en skryf dit as net # 000 en jy sal dieselfde ding kry.
Soos ons reeds genoem het, werk hex-waardes goed wanneer u 'n kleur nodig het wat nie net swart of wit is nie. Hier is 'n voorbeeld:
p (kleur: # 2f5687; }
Hierdie hex-waarde stel die paragrawe in 'n blou kleur, maar in teenstelling met die term "blou", bied hierdie heks-kode u die geleentheid om 'n baie spesifieke blou kleur te stel - waarskynlik die een wat die ontwerper kies wanneer hulle die koppelvlak skep vir hierdie webwerf. In hierdie geval sal die kleur 'n middelafstand wees, leisteenblou.
Ten slotte kan jy ook RGBA-kleurwaardes vir skrifkleure gebruik. RGCA word nou ondersteun in alle moderne blaaiers, dus jy kan hierdie waardes gebruik met min bekommernis dat dit nie in 'n webblaaier ondersteun sal word nie, maar jy kan ook 'n maklike terugval instel.
p (kleur: rgba (47,86,135,1); }
Hierdie RGBA-waarde is dieselfde as die leisteenblou kleur wat vroeër gespesifiseer is. Die eerste 3 waardes stel die rooi, groen en blou waardes in en die finale getal is die alfa-instelling. Dit is ingestel op "1", wat beteken "100%", so hierdie kleur sal geen deursigtigheid hê nie. As jy dit op 'n desimale getal, soos .85, stel, sal dit na 85% deursigtigheid vertaal en die kleur sal effens deursigtig wees.
As jy jou kleurwaardes wil bulletproof, sou jy dit doen:
p {
kleur: # 2f5687;
kleur: rgba (47,86,135,1);
}
Hierdie sintaks stel die hex kode eerste. Dit oorskryf dan daardie waarde met die RGBA nommer. Dit beteken dat enige ouer blaaier wat nie RGBA ondersteun nie, die eerste waarde sal kry en die tweede ignoreer. Moderne blaaiers sal die tweede per CSS-kaskade gebruik.