Yadda za'a canza Shafin Font Labarai tare da CSS

Kyakkyawan zane-zane yana da muhimmin ɓangare na shafin yanar gizon nasara. CSS yana ba ku iko mai yawa akan bayyanar rubutu akan shafukan yanar gizon yanar gizon da kuka gina. Wannan ya haɗa da ikon canza launi na kowane fonts da kake amfani da su.

Za'a iya canza launin launi ta amfani da takarda na waje, da takarda na cikin gida , ko ana iya canza ta hanyar salo a cikin takardun HTML. Ayyukan mafi kyau sunyi umurni cewa ya kamata ka yi amfani da takarda na waje don tsarin CSS naka. Wani takarda na ciki, wanda aka rubuta a kai tsaye a cikin "kai" na takardunku, ana amfani dashi ne kawai don kananan shafuka. Dole ne a kauce wa sifofin layi tun da sun kasance suna nuna alamun "font" da muka yi da shekaru da suka wuce. Wadannan sifofin layi suna da wuya a gudanar da salolin layi tun lokacin da kuna buƙatar canza su a kowane lokuta na layi.

A cikin wannan labarin, za ku koyi yadda za a canza launin launi ta amfani da takarda na waje da kuma salon da aka yi amfani da shi a cikin sakin layi. Zaka iya amfani da dukiyar kayan iri guda don canja launin launi a kowane tag wanda ke kewaye da rubutu, ciki har da tag.

Ƙara Sanya don canza launin Font

Don wannan misali, kuna buƙatar samun takardun HTML don takaddun shafi naku da kuma fayil ɗin CSS wanda yake a haɗe zuwa wannan takardun. Shafin HTML zai iya yin abubuwa da yawa a ciki. Abinda muke damu da manufar wannan labarin shine batun sakin layi.

Ga yadda za a canja launin launi na rubutu a cikin sakin layi na tarar ta amfani da takardar launi na waje.

Za'a iya bayyana dabi'u mai launi kamar kalmomin launi, Lambobin launi na RGB, ko lambobin launi na hexadecimal.

  1. Ƙara sifofin launi ga sakin layi na tag:
    1. p {}
  2. Sanya sautin launi a cikin style. Sanya mallaka a bayan wannan abu:
    1. p {launi:}
  3. Sa'an nan kuma ƙara darajar launi bayan kayan. Tabbatar kawo ƙarshen darajar tare da Semi-ma'auni:
    1. p {launi: baki;}

Sakin layi a shafinku zai zama baki.

Wannan misali yana amfani da maɓallin launi - "baki". Wannan hanya ɗaya ce don ƙara launi a CSS, amma yana da iyakance sosai. Yin amfani da kalmomi don "baki" da "fararen" yana da saukin ganewa tun da waɗannan launuka biyu sune musamman, amma menene ya faru idan ka yi amfani da kalmomi kamar "ja", "blue", ko "kore"? Daidai wane inuwa na ja, blue, ko kore za ku samu? Ba za ku iya ƙayyade ainihin launi inuwa da kake so ba tare da kalmomi. Wannan shi ya sa ake amfani da dabi'un hexadecimal a maimakon launuka.

p {launi: # 000000; }

Wannan tsarin na CSS zai sa launi na sakin layi zuwa baki, saboda lambar haɗin na # 000000 ya fassara zuwa baki. Kuna iya amfani da gajeren lokaci tare da darajar hex kuma rubuta shi kamar kawai # 000 kuma zaka sami abu ɗaya.

Kamar yadda muka riga muka ambata, hex yana darajar aiki sosai lokacin da kake bukatar launi wanda ba kawai baki ba ne ko fari. Ga misali:

p {launi: # 2f5687; }

Wannan darajar hex zai sanya sakin layi zuwa launi mai launi, amma ba kamar ma'anar "blue" ba, wannan lambar hex tana ba ka damar ƙaddamar da inuwa mai haske - watakila wanda mai zanen ya zaɓa lokacin da suke ƙirƙirar kallon don wannan shafin yanar gizon. A wannan yanayin, launi za ta zama tsakiyar tsaka-tsaki, launin shudi-kamar blue.

A ƙarshe, zaku iya amfani da dabi'u masu launi na RGBA don launukan launuka. RGCA yanzu ana goyan baya a duk masu bincike na zamani, saboda haka zaka iya amfani da waɗannan dabi'un ba tare da damuwa ba cewa ba za a goyi bayansa a cikin burauzar yanar gizo ba, amma zaka iya saita sauƙi mai sauƙi.

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

Wannan darajar RGBA daidai yake da launi mai launin launi wanda aka bayyana a baya. Lambobin farko na farko sunada dabi'un Red, Green, da Blue kuma lambar karshe ita ce haɗin alpha. Ana saita zuwa "1", wanda ke nufin "100%", don haka wannan launi ba zai sami gaskiya ba. Idan ka saita wannan zuwa lambar ƙima, kamar .85, zai fassara zuwa 85% opacity kuma launi zai zama dan kadan m.

Idan kana son bulletproof your launi dabi'u, za ku yi haka:

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

Wannan haɗin yana kafa lambar hex a farkon. Bayan haka ya sake yin amfani da lambar RGBA. Wannan yana nufin cewa duk wani tsofaffi wanda ba ya goyon bayan RGBA zai sami darajar farko kuma ya watsar da na biyu. Masu bincike na zamani zasu yi amfani da na biyu ta hanyar CSS.