Kubuni nzuri ya kubuni ni sehemu muhimu ya tovuti yenye mafanikio. CSS inakupa udhibiti mkubwa juu ya kuonekana kwa maandishi kwenye kurasa za wavuti za kurasa za wavuti unayojenga. Hii inajumuisha uwezo wa kubadilisha rangi ya fonts yoyote unayotumia.
Rangi za herufi zinaweza kubadilishwa kwa kutumia karatasi ya nje ya mtindo , karatasi ya ndani ya mtindo , au inaweza kubadilishwa kwa kutumia styling inline ndani ya hati ya HTML. Mazoea bora yanaagiza kwamba unapaswa kutumia karatasi ya nje ya mtindo kwa mitindo yako ya CSS. Karatasi ya mtindo wa ndani, ambayo ni mitindo imeandikwa moja kwa moja kwenye "kichwa" cha waraka wako, kwa ujumla hutumiwa tu kwenye maeneo madogo, ukurasa mmoja. Mitindo ya ndani inapaswa kuepukwa kwani inafanana na vitambulisho vya zamani vya "font" ambazo tulitenda kwa miaka mingi iliyopita. Wale mitindo ya ndani inafanya kuwa ngumu sana kusimamia mtindo wa font tangu utahitaji kubadili kila wakati wa mtindo wa ndani.
Katika makala hii, utajifunza jinsi ya kubadilisha rangi ya font kwa kutumia karatasi ya nje ya mtindo na mtindo unaotumiwa kwenye lebo ya aya. Unaweza kutumia mali hiyo ya mtindo kubadilisha rangi ya font kwenye lebo yoyote inayozunguka maandishi, ikiwa ni pamoja na lebo
Kuongeza Mitindo ya Kubadilisha Rangi ya Font
Kwa mfano huu, unahitaji kuwa na hati ya HTML ya kurasa yako ya ukurasa na faili tofauti ya CSS iliyoambatana na waraka huo. Hati ya HTML ingewezekana kufanya idadi ya vipengele ndani yake. Yule tunayo wasiwasi kwa lengo la makala hii ni kipengele cha kifungu.
Hapa ni jinsi ya kubadilisha rangi ya maandishi ya maandiko ndani ya vitambulisho vya aya kwa kutumia karatasi yako ya mtindo wa nje.
Maadili ya rangi yanaweza kuonyeshwa kama maneno ya rangi, namba za rangi ya RGB, au namba za rangi ya hexadecimal.
- Ongeza sifa ya mtindo kwa lebo ya aya:
- p {}
- Weka mali ya rangi katika mtindo. Weka colon baada ya mali hiyo:
- p {rangi:}
- Kisha kuongeza thamani ya rangi yako baada ya mali. Hakikisha kumaliza thamani hiyo na nusu ya koloni:
- p {rangi: nyeusi;}
Aya katika ukurasa wako sasa itakuwa nyeusi.
Mfano huu hutumia neno muhimu la rangi - "nyeusi". Hiyo ni njia moja ya kuongeza rangi katika CSS, lakini ni kikwazo sana. Kutumia maneno muhimu kwa "nyeusi" na "nyeupe" ni sawa tangu rangi hizo mbili ni maalum sana, lakini kinachotokea ikiwa unatumia maneno kama "nyekundu", "bluu", au "kijani"? Hasa ni kivuli gani cha rangi nyekundu, bluu, au kijani? Huwezi kutaja hasa kivuli cha rangi unachohitaji kwa maneno. Hii ndiyo sababu maadili ya hexadecimal hutumiwa mara nyingi badala ya maneno muhimu ya rangi.
p {rangi: # 000000; }
Mtindo huu wa CSS pia utaweka rangi ya aya zako kuwa nyeusi, kwa sababu kanuni ya hex ya # 000000 inatafsiriwa na nyeusi. Unaweza hata kutumia shorthand kwa hex thamani hiyo na kuandika ni kama # 000 na wewe kupata kitu kimoja.
Kama tulivyosema, maadili ya hex hufanya vizuri wakati unahitaji rangi ambayo sio nyeusi au nyeupe tu. Hapa ni mfano:
p {rangi: # 2f5687; }
Thamani hii ya hex itaweka alama kwa rangi ya rangi ya bluu, lakini tofauti na neno la msingi "bluu", msimbo huu wa hex huwapa uwezo wa kuweka kivuli maalum cha rangi ya bluu - uwezekano ambao mtengenezaji huchagua wakati waunda interface tovuti hii. Katika kesi hii, rangi itakuwa katikati ya rangi, bluu-kama bluu.
Hatimaye, unaweza kutumia maadili ya rangi ya RGBA kwa rangi ya font pia. RGCA sasa inasaidiwa kwenye vivinjari vyote vya kisasa, hivyo unaweza kutumia maadili haya bila wasiwasi sana kwamba haitasaidiwa kwenye kivinjari cha wavuti, lakini unaweza pia kuweka rahisi kurudi.
p {rangi: rgba (47,86,135,1); }
Thamani hii ya RGBA ni sawa na rangi ya rangi ya bluu iliyotajwa hapo awali. Maadili ya kwanza ya 3 yameweka maadili ya Mwekundu, Myekundu, na Bluu na namba ya mwisho ni mipangilio ya alpha. Imewekwa kwenye "1", ambayo ina maana "100%", hivyo rangi hii haitakuwa na uwazi. Ikiwa ukiweka hiyo kwa nambari ya decimal, kama .85, ingeweza kutafsiri kwa 85% ya opacity na rangi ingekuwa ya uwazi kidogo.
Ikiwa unataka kupiga marufuku maadili ya rangi yako, ungependa kufanya hivi:
p {
rangi: # 2f5687;
rangi: rgba (47,86,135,1);
}
Syntax hii huweka msimbo wa hex kwanza. Halafu hurejesha thamani hiyo na nambari ya RGBA. Hii ina maana kwamba kivinjari chochote kikubwa ambacho hachiunga mkono RGBA kinapata thamani ya kwanza na kupuuza pili. Vivinjari vya kisasa vitatumia pili kwa kila msimu wa CSS.