എങ്ങനെയാണ് CSS നൊപ്പം വെബ്സൈറ്റ് ഫോണ്ട് നിറങ്ങൾ മാറ്റുക

നല്ല ടൈപ്പിഗ്രാഫിക് ഡിസൈൻ ഒരു വിജയകരമായ വെബ്സൈറ്റിലെ ഒരു പ്രധാന ഭാഗമാണ്. നിങ്ങൾ നിർമ്മിക്കുന്ന വെബ് പേജുകളിൽ വെബിലെ താളുകളുടെ വാചകത്തിൽ CSS നിങ്ങൾക്ക് വലിയ നിയന്ത്രണം നൽകുന്നു. നിങ്ങൾ ഉപയോഗിക്കുന്ന ഏതെങ്കിലും ഫോണ്ടുകളുടെ വർണ്ണം മാറ്റാനുള്ള കഴിവുണ്ട്.

ഒരു ബാഹ്യ ശൈലി ഷീറ്റ് , ആന്തരിക ശൈലി ഷീറ്റ് , അല്ലെങ്കിൽ HTML പ്രമാണത്തിനുള്ളിൽ ഇൻലൈൻ സ്റ്റൈലിംഗ് ഉപയോഗിച്ച് മാറ്റം വരുത്താം. നിങ്ങളുടെ CSS ശൈലികൾക്കായി ബാഹ്യ ശൈലി ഷീറ്റ് ഉപയോഗിക്കണമെന്ന് ഏറ്റവും മികച്ച കീഴ്വഴക്കങ്ങൾ നിർദേശിക്കുന്നു. നിങ്ങളുടെ പ്രമാണത്തിന്റെ "തല" യിൽ നേരിട്ട് എഴുതിയ പാറ്റേണായ ഒരു ആന്തരിക ശൈലി ഷീറ്റ് സാധാരണയായി ചെറിയ, ഒരു പേജ് സൈറ്റുകൾക്കായി മാത്രമാണ് ഉപയോഗിക്കുന്നത്. നമ്മൾ പഴയ "ഫോണ്ട്" ടാഗുകൾക്ക് സമാനമായതിനാൽ, ഇൻലൈൻ ശൈലികൾ ഒഴിവാക്കണം. ഇൻലൈൻ ശൈലിയിലെ ഓരോ സന്ദർഭത്തിലും മാറ്റം വരുത്തണമെങ്കിൽ ആ ഇൻലൈൻ സ്റ്റൈലുകൾ ഫോണ്ട് ശൈലി കൈകാര്യം ചെയ്യാൻ വളരെ പ്രയാസകരമാക്കുന്നു.

ഈ ആർട്ടിക്കിളിൽ, ഒരു ബാഹ്യ ശൈലി ഷീറ്റ് ഉപയോഗിച്ച് ഒരു ഫോണ്ട് വർണ്ണം എങ്ങനെ മാറ്റും എന്ന് ഒരു പഠന ടാഗിൽ ഉപയോഗിക്കുകയും ചെയ്യാം. നിങ്ങൾക്ക് ടാഗ് ഉൾപ്പെടെ ടെക്സ്റ്റ് ചുറ്റുമുള്ള ഏതെങ്കിലും ടാഗ് ഫോണ്ട് കളർ മാറ്റാൻ സമാന സ്റ്റൈൽ സ്വഭാവം പ്രയോഗിക്കാൻ കഴിയും.

ഫോണ്ട് വർണ്ണം മാറ്റുക എന്നതിലേക്ക് സ്റ്റൈലുകൾ ചേർക്കുന്നു

ഈ ഉദാഹരണത്തിന്, നിങ്ങളുടെ പേജ് മാർക്ക്അപ്പിനും ആ പ്രമാണത്തിൽ അറ്റാച്ച് ചെയ്ത പ്രത്യേക CSS ഫയലിനും നിങ്ങൾക്ക് ഒരു HTML പ്രമാണം ആവശ്യമാണ്. എച്.ടി.എം.എൽ രേഖയിൽ പല ഘടകങ്ങളും ഉണ്ടാകും. ഈ ലേഖനത്തിന്റെ ഉദ്ദേശ്യത്തിനായി ഞങ്ങൾ ബന്ധപ്പെട്ടതാണ് ഖണ്ഡിക ഘടകം.

നിങ്ങളുടെ ബാഹ്യ ശൈലി ഷീറ്റ് ഉപയോഗിച്ച് ഖണ്ഡിക ടാഗുകൾക്കുള്ളിൽ ടെക്സ്റ്റിന്റെ ഫോണ്ട് വർണ്ണം എങ്ങനെ മാറ്റാമെന്നത് ഇവിടെയുണ്ട്.

വർണ്ണ മൂല്യങ്ങൾ വർണ കീവേഡുകൾ, RGB വർണ്ണ സംഖ്യകൾ, അല്ലെങ്കിൽ ഹെക്സാഡെസിമൽ വർണ്ണ സംഖ്യകളായി സൂചിപ്പിക്കാം.

1. ഖണ്ഡിക ടാഗിനുള്ള സ്റ്റൈൽ ആട്രിബ്യൂട്ട് ചേർക്കുക:
   1. p {}
2. വർണ സ്വഭാവം ശൈലിയിൽ വയ്ക്കുക. ആ വസ്തുവിന് ശേഷം ഒരു കോളൺ സ്ഥാപിക്കുക:
   1. p {color:}
3. വസ്തുവിന് ശേഷം നിങ്ങളുടെ വർണ്ണ മൂല്യങ്ങൾ ചേർക്കുക. സെമി-കോളൺ ഉപയോഗിച്ച് ആ മൂല്യം അവസാനിപ്പിക്കാൻ ഉറപ്പാക്കുക:
   1. p {വർ:: കറുപ്പ്;}

നിങ്ങളുടെ പേജിലെ ഖണ്ഡികകൾ ഇപ്പോൾ കറുപ്പ് ആകും.

"Black" - ഒരു വർണ്ണ കീവേഡ് ഈ ഉദാഹരണം ഉപയോഗിക്കുന്നു. ഇത് CSS ൽ നിറം ചേർക്കാൻ ഒരു വഴിയാണ്, പക്ഷെ അത് വളരെ പരിമിതമാണ്. ഈ രണ്ട് നിറങ്ങൾ വളരെ കൃത്യമായതിനാൽ "കറുപ്പ്", "വൈറ്റ്" എന്നിവയ്ക്കുള്ള കീവേഡുകൾ ഉപയോഗിക്കുന്നത് വളരെ ലളിതമാണ്, പക്ഷെ "ചുവപ്പ്", "നീല", അല്ലെങ്കിൽ "പച്ച" എന്ന കീവേഡുകളാണ് ഉപയോഗിക്കുന്നത്. ചുവപ്പ്, നീല, അല്ലെങ്കിൽ പച്ച നിറങ്ങളിൽ ഏതു തണലിൽ ലഭിക്കും? കീവേഡുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ആവശ്യമുള്ള നിറം ഷേഡിനെ വ്യക്തമാക്കാൻ കഴിയില്ല. ഹെക്സാഡെസിമൽ മൂല്യങ്ങൾ നിറം കീവേഡുകൾക്ക് പകരം ഉപയോഗിക്കാറുണ്ട്.

p {color: # 000000; }

ഈ CSS ശൈലി കറുത്ത നിറത്തിൽ നിങ്ങളുടെ ഖണ്ഡികയുടെ നിറവും സജ്ജമാക്കും, കാരണം # 000000 എന്ന ഹെക്സ് കോഡ് കറുത്ത തർജ്ജമയാണ്. ആ ഹെക്സോൺ മൂല്യം ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഷോർട്ട് ഹാൻഡ് ഉപയോഗിക്കാനും അത് # 000 ആയി എഴുതാനും സാധിക്കും.

ഞങ്ങൾ നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, നിങ്ങൾക്കാവശ്യമുള്ള ഒരു ഹെക്സ് കറുപ്പോ വെള്ളയോ അല്ലാത്ത നിറം ആവശ്യമുള്ളപ്പോൾ ഹെക്സ് മൂല്യങ്ങൾ നന്നായി പ്രവർത്തിക്കുന്നു. ഒരു ഉദാഹരണം ഇതാ:

p {വർഗ്ഗം: # 2f5687; }

ഈ ഹെക്സ് മൂല്യം ഒരു നീല നിറത്തിലേക്ക് ഖണ്ഡികകളെ സജ്ജമാക്കും, എന്നാൽ "നീല" എന്ന കീവേഡിൽ നിന്ന് വ്യത്യസ്തമായി, ഈ ഹെക്സ് കോഡ് നീലനിറത്തിൽ വളരെ പ്രത്യേകമായ തണൽ സജ്ജമാക്കാനുള്ള കഴിവു നൽകുന്നു - ഡിസൈനർ ഈ വെബ്സൈറ്റ്. ഈ സാഹചര്യത്തിൽ, നിറം ഒരു മിഡ് റേഞ്ച്, സ്ലേറ്റ്-പോലുള്ള നീലമായിരിക്കും.

അവസാനമായി, നിങ്ങൾക്ക് ഫോണ്ട് നിറങ്ങളിൽ RGBA വർണ്ണ മൂല്യങ്ങൾ ഉപയോഗിക്കാം. എല്ലാ ആധുനിക ബ്രൌസറുകളിലും ഇപ്പോൾ RGCA പിന്തുണയ്ക്കുന്നു, അതിനാൽ ഈ മൂല്യങ്ങൾ ഒരു വെബ് ബ്രൌസറിൽ പിന്തുണയ്ക്കില്ല, എന്നാൽ നിങ്ങൾക്ക് എളുപ്പത്തിൽ ഒരു ഫോൾബാക്ക് സജ്ജമാക്കാം.

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

നേരത്തെ സൂചിപ്പിച്ച സ്ലേറ്റ് നീല നിറം പോലെ തന്നെയാണ് ഈ RGBA മൂല്യം. ആദ്യത്തെ 3 മൂല്ല്യങ്ങൾ ചുവപ്പ്, ഗ്രീൻ, ബ്ലൂ മൂല്യങ്ങൾ സജ്ജീകരിച്ചു, അവസാന സംഖ്യ ആൽഫ ക്രമീകരണം. "100" എന്ന് അർത്ഥം വരുന്ന "1" എന്ന് ഇത് സജ്ജമാക്കിയിട്ടുണ്ട്, അതിനാൽ ഈ നിറം സുതാര്യമാകില്ല. നിങ്ങൾ .85 പോലെ ഒരു ഡെസിമൽ നമ്പറാക്കിയിട്ടുണ്ടെങ്കിൽ അത് 85% ഒപാസിറ്റിയിലേക്ക് വിവർത്തനം ചെയ്യും, നിറം അല്പം സുതാര്യമായിരിക്കും.

നിങ്ങളുടെ വർണ്ണ മൂല്യങ്ങൾ ബുള്ളറ്റ് പ്രൂഫ് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നെങ്കിൽ, നിങ്ങൾ ഇത് ചെയ്യും:

p {
നിറം: # 2f5687;
നിറം: rgba (47,86,135,1);
}

ഈ സിന്റാക്സ് ആദ്യം ഹെക്സ് കോഡ് സെറ്റ് ചെയ്യുന്നു. ഇത് പിന്നീട് RGBA നമ്പറുമായി ആ മൂല്യം തിരുത്തിയെഴുതുന്നു. ഇതിനർത്ഥം, RGBA പിന്തുണയ്ക്കുന്ന പഴയ ബ്രൗസർ ആദ്യത്തെ മൂല്യവും രണ്ടാമത്തെ അവഗണനയും നൽകുമെന്നതാണ്. നൂതന ബ്രൌസറുകൾ രണ്ടാമത്തെ സിഎസ്എസ് കാസ്കേഡ് ഉപയോഗിക്കും.