Goed typografysk ûntwerp is in wichtich part fan in suksesfolle webside. CSS jout jo in soad kontrôle oer it ferskinen fan tekst op de websiden fan de websiden dy't jo opbouwe. Dit befettet de mooglikheid om de kleur te feroarjen fan alle lettertypen dy jo brûke.
Lettertypen kinne feroare wurde troch in ekstern stylblêd , in ynterne stylblêd , of it kin feroare wurde troch ynline styling yn 'e HTML dokumint. Best practices dictate dat jo in ekstern stylblêd brûke moatte foar jo CSS-stylen. In ynterne stylblêd, dy't stilen yn it "kop" fan jo dokumint skreaun binne, wurde normaal allinnich brûkt foar lytse, side-websiden. Inline-stilen moatte foarkommen wurde om't sy binne oan 'e âlde "font" -tags dy't wy in protte jierren lyn behannele. Dizze ynlline-stylen meitsje it tige hurd om lettertype-styl te beheinen, om't jo se op elke eksimplaar fan 'e ynline-styl feroarje moatte.
Yn dit artikel sil jo leare hoe't jo de lettertypen feroarje mei in ekstern stylblêd en in styl dy't brûkt wurdt yn in paragraaf. Jo kinne it eigendom fan 'e styl brûke om de lettertype kleur te feroarjen op elke tag om tekst te besjen, ynklusyf de
tag.Styles oanmeitsje om lettertypefermogen te feroarjen
Foar dit foarbyld moatte jo in HTML dokumint hawwe foar jo side markearring en in aparte CSS-bestân dy't oan dit dokumint befettet. It HTML-dokumint soe wierskynlik in oantal eleminten meitsje. De ien dy't wy dogge foar it doel fan dit artikel is it paragraaf elemint.
Hjir is hoe't jo de lettertype kleur fan tekst yn 'e paragraaf-tags feroarje mei jo eksterne stylblêd.
Kleuren wearden kinne beskôge wurde as kleur-keywords, RGB-kleurennamen, of hexadezimalige kleurennamen.
- Foegje it stylattribut foar it paragraaf tag:
- p {}
- Plak it kleurige eigendom yn 'e styl. Plak in koloanje nei dy eigendom:
- p {color:}
- Dan addt jo kleurwearde nei it eigendom. Soargje derfoar dat dizze wearde mei in heule kolon einiget:
- p {color: black;}
De paragrafen yn jo side wurde no swart.
Dit foarbyld brûkt in kleurke kleur - "swart". Dat is in manier om kleur yn CSS te foegjen, mar it is tige beheind. It brûken fan kaaiwurden foar "swart" en "wyt" is rjochtfeardich, om't dizze twa kleuren tige spesifyk binne, mar wat bart as jo gebrûk meitsje fan keywords lykas "read", "blau" of "grien"? Hokker wat skaad fan read, blau, of grien sil jo krije? Jo kinne net spesifisearje hokker kleurskâns jo wolle mei kaaiwurden wolle. Dêrom wurde hexadeimale wearden faak brûkt op plak fan kleuren fan kleuren.
p {color: # 000000; }
Dizze CSS-styl soe ek de kleur fan jo ôfdielingen op swart sette, om't de hex koade fan # 000000 oersettet nei swart. Jo kinne sels skerp brûke mei dizze hexwearde en skriuw it as just # 000 en jo soene deselde ding krije.
As wy al neamd binne, heks-wearden goed wurkje as jo in kleur nedich binne dy't net gewoan swart of wyt is. Hjir is in foarbyld:
p {color: # 2f5687; }
Dizze hexwearde soe de paragrafen yn in blauwe kleur sette, mar yn tsjinstelling ta it stofwurd "blau" jouwt dizze hexoade de mooglikheid om in spesifike skaad fan blau te setten - wierskynlik de ien dy't de ûntwerper kieze as se it interface foar dizze webside. Yn dit gefal soe de kleur in middelgrote, slate-like blau wêze.
Uteinlik kinne jo ek RGBA kleurwearden foar lettertypen brûke. RGCA is no stipe yn alle moderne browsers, sadat jo dizze wearden mei lytsere soargen brûke kinne dat it net stipe wurdt yn in webblêder, mar jo kinne ek in maklike fallback sette.
p {color: rgba (47,86,135,1); }
Dizze wearde RGBA is itselde as de earder blauwe kleur dy't earder oantsjutte is. De earste 3 wearden sille de wearden fan 'e read, de griene en blauwende wearden en it lêste nûmer is de alpha-ynstelling. It stiet op "1", wat betsjut "100%", dus dizze kleur soe gjin transparânsje hawwe. As jo dit ynstelle om in desimaal nûmer, as .85, soe it oersetten wurde op 85% ûnevenheid en de kleur soe wat maklik wêze.
As jo wolle dat jo kleurwearden kûkt wurde wolle, soene jo dit dwaan:
p {
kleur: # 2f5687;
kleur: rgba (47.86.135,1);
}
Dizze syntaksje set de hextekoade earst. It skriuwt dan dizze wearde mei it RGBA-nûmer. Dit betsjut dat elke browser dy 't gjin RGBA stypje sil de earste wearde krije en de twadde ignorearje. Moderne browsers brûke de twadde per CSS-cascade.