Unsaon Pag-usab sa Mga Linya sa Font sa Website Gamit ang CSS

Ang maayong disenyo sa typographic usa ka importante nga bahin sa malampuson nga website. Ang CSS naghatag kanimo og maayong pagkontrol sa pagpakita sa teksto sa mga panid sa web sa mga panid sa web nga imong gitukod. Naglakip kini sa abilidad sa pag-usab sa kolor sa bisan unsang mga font nga imong gigamit.

Ang kolor sa font mahimo nga usbon gamit ang usa ka estilo sa gawas nga estilo , usa ka internal style sheet , o kini mahimong usbon gamit ang inline styling sulod sa HTML nga dokumento. Ang labing maayo nga mga pamaagi nagdikta nga kinahanglan mong gamiton ang usa ka estilo sa gawas nga estilo alang sa imong estilo sa CSS. Ang usa ka internal style sheet, nga mga estilo nga gisulat direkta sa "ulo" sa imong dokumento, sa kasagaran gigamit lang alang sa gagmay, usa-ka-pahina nga mga site. Kinahanglan likayan ang mga estilo sa inline tungod kay kini susama sa daan nga "font" tags nga atong giatubang sa daghang katuigan ang milabay. Ang mga inline nga mga estilo nagpalisod sa pagdumala sa estilo sa font tungod kay kinahanglan nimo nga usbon kini sa matag higayon sa inline style.

Niini nga artikulo, makakat-on ka kung unsaon pag-usab ang kolor sa font gamit ang usa ka estilo sa gawas nga estilo ug usa ka estilo nga gigamit sa tag usa ka parapo. Mahimo nimo magamit ang pareho nga kabtangan sa estilo aron mausab ang kolor sa font sa bisan unsang tag nga naglibot sa teksto, lakip ang tag .

Pagdugang sa mga Estilo sa Pag-usab sa Kolor nga Font

Tungod niini nga pananglitan, kinahanglan nimo nga adunay usa ka dokumento sa HTML alang sa markup sa imong pahina ug usa ka lain nga CSS file nga gilakip sa dokumento. Ang dokumento sa HTML lagmit makahimo sa daghang mga elemento niini. Ang usa nga atong gihunahuna alang sa katuyoan niini nga artikulo mao ang elemento sa parapo.

Ania ang giunsa pagbag-o ang kolor sa teksto sa sulod sa mga tag sa parapo gamit ang imong estilo sa estilo sa gawas.

Ang mga bili sa kolor mahimong ipahayag ingon nga kolor nga mga keyword, mga numero sa kolor sa RGB, o numero sa kolor sa hexadecimal.

  1. Idugang ang estilo nga hiyas alang sa tag sa parapo:
    1. p {}
  2. Ibutang ang kabtangan sa kolor sa estilo. Ibutang ang usa ka colon sunod niana nga kabtangan:
    1. p {color:}
  3. Dayon idugang ang imong kolor nga bili human sa propiedad. Siguroha nga tapuson ang bili sa usa ka semi-colon:
    1. p {color: black;}

Ang mga parapo sa imong panid mahimong itom.

Kini nga pananglitan naggamit sa usa ka kolor nga keyword - "itom". Kana usa ka paagi sa pagdugang sa kolor sa CSS, apan limitado kaayo kini. Ang paggamit sa mga keyword alang sa "itom" ug "puti" maoy matul-id tungod kay ang duha ka mga kolor mga espesipiko kaayo, apan unsay mahitabo kon mogamit ka sa mga keyword sama sa "pula", "asul", o "berde"? Unsa man ang imong makuha nga pula, asul, o berde? Dili nimo mahibal-an kon unsa nga kolor ang gusto nimo gamit ang mga keyword. Mao kini ang hinungdan kon nganong ang hexadecimal values ​​kasagaran gigamit sa dapit sa kolor nga mga keyword.

p {kolor: # 000000; }

Kini nga estilo sa CSS mag-ingon usab sa kolor sa imong mga parapo ngadto sa itom, tungod kay ang hex code nga # 000000 gihubad nga itom. Mahimo ka pa nga maggamit sa pagkasandog uban sa bili nga hex ug isulat kini ingon nga # 000 ug imong makuha ang sama nga butang.

Sumala sa nahisgutan na namo, ang mga hiyas sa hex maayo kon gikinahanglan nimo ang kolor nga dili lang itom o puti. Ania ang usa ka pananglitan:

p {color: # 2f5687; }

Ang kini nga bili nga hex ang magpahimutang sa mga parapo ngadto sa usa ka kolor nga asul, apan dili sama sa "blue" nga pulong, kining hex nga code naghatag kanimo sa katakos sa paghimo sa usa ka piho nga landong sa asul - lagmit ang usa nga gipili sa tigdisenyo sa diha nga sila naghimo sa interface alang sa kini nga website. Sa kini nga kaso, ang kolor mahimong tunga-tunga, ingon nga slate-asul.

Sa katapusan, mahimo nimo gamiton ang RGBA nga mga hiyas sa kolor alang sa mga kolor sa font. Ang RGCA gisuportahan na karon sa tanang modernong mga browser, aron imong magamit kini nga mga mithi uban ang gamay nga kabalaka nga kini dili suportado sa usa ka web browser, apan mahimo ka usab nga magbutang sa sayon ​​nga pagkahulog.

p {color: rgba (47,86,135,1); }

Kini nga RGBA nga kantidad sama sa slate blue color nga gipasabut sa sayo pa. Ang una nga 3 nga mga mithi nagbutang sa Red, Green, ug Blue values ​​ug ang katapusan nga numero mao ang alpha setting. Gihimo kini nga "1", nga nagpasabot nga "100%", busa kini nga kolor walay transparency. Kon imong ibutang kana sa usa ka decimal nga numero, sama sa .85, kini mahubad ngadto sa 85% opacity ug ang kolor gamay nga transparent.

Kung gusto nimo nga dili madala sa bala ang imong mga hiyas sa kolor, mahimo nimo kini:

p {
kolor: # 2f5687;
kolor: rgba (47,86,135,1);
}

Kini nga syntax nag-una sa code sa hex. Dayon kini mokulit sa bili sa numero sa RGBA. Kini nagpasabot nga ang bisan kinsa nga mas karaan nga browser nga wala nagsuporta sa RGBA makadawat sa unang bili ug dili ibalewala ang ikaduha. Ang mga modernong mga browser mogamit sa ikaduha sa matag CSS cascade.