Ang magandang disenyo ng typographic ay isang mahalagang bahagi ng isang matagumpay na website. Binibigyan ka ng CSS ng mahusay na kontrol sa paglitaw ng teksto sa mga web page ng mga web page na iyong binuo. Kabilang dito ang kakayahang baguhin ang kulay ng anumang mga font na iyong ginagamit.
Ang mga kulay ng font ay maaaring mabago gamit ang isang panlabas na estilo ng sheet , isang panloob na estilo ng sheet , o maaaring ito ay mabago gamit ang inline na estilo sa loob ng dokumentong HTML. Ang mga pinakamahuhusay na kasanayan ay nangangasiwa na dapat mong gamitin ang isang panlabas na style sheet para sa iyong mga estilo ng CSS. Ang isang panloob na estilo ng sheet, na mga estilo na nakasulat nang direkta sa "ulo" ng iyong dokumento, sa pangkalahatan ay ginagamit lamang para sa mga maliit, isang-pahinang mga site. Dapat na iwasan ang mga estilo ng inline dahil ang mga ito ay katulad ng mga lumang "font" na mga tag na aming ginawa sa maraming taon na ang nakakaraan. Ang mga inline na estilo ay napakahirap na pamahalaan ang estilo ng font dahil kakailanganin mong baguhin ang mga ito sa bawat pagkakataon ng estilo ng inline.
Sa artikulong ito, matututunan mo kung paano baguhin ang kulay ng font gamit ang isang panlabas na style sheet at isang estilo na ginagamit sa isang tag na talata. Maaari mong ilapat ang parehong estilo ng estilo upang baguhin ang kulay ng font sa anumang tag na pumapaligid sa teksto, kabilang ang tag na
.Pagdaragdag ng mga Estilo upang Baguhin ang Kulay ng Font
Para sa halimbawang ito, kakailanganin mong magkaroon ng isang HTML na dokumento para sa markup ng iyong pahina at isang hiwalay na file na CSS na naka-attach sa dokumentong iyon. Ang HTML dokumento ay malamang na gumawa ng isang bilang ng mga elemento sa loob nito. Ang isa na kami ay nag-aalala para sa layunin ng artikulong ito ay ang elementong talata.
Narito kung paano baguhin ang kulay ng teksto ng teksto sa loob ng mga tag ng talata gamit ang iyong panlabas na style sheet.
Maaaring ipahayag ang mga halaga ng kulay bilang mga keyword ng kulay, mga kulay ng RGB, o mga numero ng kulay ng hexadecimal.
- Idagdag ang estilo ng katangian para sa tag na talata:
- p {}
- Ilagay ang ari-arian ng kulay sa estilo. Maglagay ng colon pagkatapos ng property na iyon:
- p {color:}
- Pagkatapos ay idagdag ang halaga ng iyong kulay pagkatapos ng property. Tiyaking tapusin ang halaga na may isang semi-colon:
- p {color: black;}
Ang mga parapo sa iyong pahina ay magiging itim na ngayon.
Ang halimbawang ito ay gumagamit ng isang kulay na keyword - "itim". Iyon ay isang paraan upang magdagdag ng kulay sa CSS, ngunit ito ay napaka-takda. Ang paggamit ng mga keyword para sa "itim" at "puti" ay tapat dahil ang mga dalawang kulay ay napaka tiyak, ngunit ano ang mangyayari kung gumagamit ka ng mga keyword tulad ng "red", "blue", o "green"? Mismong kung anong lilim ng pula, asul, o berde ang makakakuha ka? Hindi mo maaaring tukuyin kung anong kulay ang lilim na gusto mo gamit ang mga keyword. Ito ang dahilan kung bakit madalas na ginagamit ang mga hexadecimal value sa halip ng mga kulay na keyword.
p {color: # 000000; }
Ang estilo ng CSS na ito ay itatakda din ang kulay ng iyong mga talata sa itim, dahil ang hex code ng # 000000 ay isinasalin sa itim. Maaari mo ring gamitin ang shorthand sa hex na halaga at isulat ito bilang lamang # 000 at nais mong makuha ang parehong bagay.
Bilang na nabanggit na namin, ang mga halaga ng hex ay mahusay na gumagana kapag kailangan mo ng isang kulay na hindi lamang itim o puti. Narito ang isang halimbawa:
p {color: # 2f5687; }
Ang halaga ng hex na ito ay itatakda ang mga talata sa isang asul na kulay, ngunit hindi katulad ng keyword na "asul", ang hex code na ito ay nagbibigay sa iyo ng kakayahang magtakda ng isang napaka tiyak na lilim ng asul - malamang ang isa na pinili ng taga-disenyo kapag nililikha nila ang interface para sa sa website na ito. Sa kasong ito, ang kulay ay magiging isang mid-range, slate-like blue.
Sa wakas, maaari mong gamitin ang mga halaga ng RGBA na kulay para sa mga kulay ng font pati na rin. Sinusuportahan na ngayon ang RGCA sa lahat ng mga modernong browser, kaya maaari mong gamitin ang mga halagang ito nang may kaunting pag-aalala na hindi ito susuportahan sa isang web browser, ngunit maaari ka ring magtakda ng madaling fallback.
p {color: rgba (47,86,135,1); }
Ang halaga ng RGBA ay pareho ng slate blue color na tinukoy na mas maaga. Ang unang 3 na halaga ay nagtakda ng mga halaga ng Red, Green, at Blue at ang pangwakas na numero ay ang alpha setting. Ito ay naka-set sa "1", na nangangahulugang "100%", kaya ang kulay na ito ay walang transparency. Kung itinakda mo iyon sa isang numero ng decimal, tulad ng .85, ito ay isalin sa 85% opacity at ang kulay ay magiging bahagyang transparent.
Kung nais mong hindi masusubaybayan ang iyong mga halaga ng kulay, gagawin mo ito:
p {
kulay: # 2f5687;
kulay: rgba (47,86,135,1);
}
Ang syntax na ito ang unang nagtatakda ng hex code. Pagkatapos ay pinapalitan nito ang halaga na may RGBA number. Nangangahulugan ito na ang anumang mas lumang browser na hindi sumusuporta sa RGBA ay makakakuha ng unang halaga at huwag pansinin ang pangalawa. Gagamitin ng mga modernong browser ang ikalawang bawat CSS cascade.