എങ്ങനെയാണ് CSS പ്രമാണങ്ങൾ വെബ്ക്യാസുകളിൽ പ്രവർത്തിക്കുന്നത്

സിഎസ്എസ് ഒരു വെബ്സൈറ്റ് സ്റ്റെയിലിങ് ഒരു പ്രധാന ഭാഗം ധാരണ ആശയം മനസ്സിലാക്കുന്നു.

ഉപയോഗിക്കുന്ന വസ്തുവിന്റെ ശൈലിയാണ് സിഎസ്എസ് അവകാശം നൽകുന്നത്. നിങ്ങൾ സ്റ്റൈൽ പ്രോപ്പർട്ടി പശ്ചാത്തല വർണ്ണം നോക്കിയാൽ "ഇൻഹെറിറ്റൻസ്" എന്ന പേരിൽ ഒരു വിഭാഗം കാണാം. നിങ്ങൾ മിക്ക വെബ് ഡിസൈനർമാരേയും പോലെയാണെങ്കിൽ, ആ വിഭാഗം നിങ്ങൾ അവഗണിച്ചു, എന്നാൽ അത് ഒരു ലക്ഷ്യത്തിനായി സേവിക്കുന്നു.

എന്താണ് CSS ഇൻഹെറിറ്റൻസ്?

ഒരു HTML പ്രമാണത്തിലെ ഓരോ എലവും ഒരു വൃക്ഷത്തിന്റെ ഭാഗമാണ്, പ്രാരംഭ ഘടകം ഒഴികെ എല്ലാ ഘടകങ്ങളും അതിനെ ഉൾക്കൊള്ളുന്ന ഒരു പാരന്റ് ഘടകമാണ്. ആ പാരന്റ് മൂലകത്തിൽ പ്രയോഗിച്ചിരിക്കുന്നത് ഏത് രീതിയിലാണ് ഉപയോഗിക്കുന്നത്, അതിൽ പാരസ്പര്യത്തിന് അവകാശമുണ്ടെങ്കിൽ അവ അതിൽ ഉൾക്കൊള്ളുന്ന ഘടകങ്ങളിൽ പ്രയോഗിക്കാൻ കഴിയും.

ഉദാഹരണത്തിന്, ചുവടെയുള്ള ഈ HTML കോഡ് ഒരു ഇഎം ടാഗ് ഉൾക്കൊള്ളുന്ന ഒരു H1 ടാഗ് ഉണ്ട്:

ഇതൊരു വലിയ തലക്കെട്ട് ആണ്

ഇ.എം. എലമെന്റ് H1 മൂലകത്തിന്റെ ഒരു കുഞ്ഞാണ്, കൂടാതെ പാരമ്പര്യമായി കൈമാറിയ H1 ലുള്ള ഏതെങ്കിലും ശൈലികൾ EM ടെക്സ്റ്റിലേക്കും അയയ്ക്കും. ഉദാഹരണത്തിന്:

h1 {font-size: 2em; }

ഫോണ്ട്-സൈസ് പ്രോപ്പർട്ടി അനന്തരാവകാശമായിട്ടുള്ളതിനാൽ, "ബിഗ്" (ഇ.എം. ടാഗിനുള്ളിലുള്ളത് ചേർന്നത്) എന്നുള്ള പാഠം H1 ബാക്കിയുള്ള അതേ വലുപ്പമായിരിക്കും. കാരണം ഇത് CSS പ്രോപ്പർട്ടിയിലെ മൂല്യത്തിന്റെ പാരമ്പര്യം.

എങ്ങനെയാണ് സിഎസ്എസ് ഇൻഹെറിറ്റൻസ് ഉപയോഗിക്കുക

ഇത് ഉപയോഗിക്കാൻ എളുപ്പമുള്ള മാർഗ്ഗം പാരമ്പര്യേതരമല്ലാത്ത CSS പ്രോപ്പർട്ടികൾ പരിചയപ്പെടുത്തുക എന്നതാണ്. വസ്തുവിന് പാരമ്പര്യമുണ്ടെങ്കിൽ, രേഖയിൽ എല്ലാ കുട്ടികൾക്കും ഒരേ അളവിൽ അതേ മൂല്യം നിലനിൽക്കും എന്ന് നിങ്ങൾക്ക് അറിയാം.

BODY പോലെ വളരെ ഉയർന്ന തലത്തിലേക്ക് നിങ്ങളുടെ അടിസ്ഥാന ശൈലികൾ സജ്ജമാക്കാനാണ് ഇതിനുള്ള ഏറ്റവും നല്ല മാർഗം. ശാരീരിക വസ്തുവിലാണ് നിങ്ങളുടെ ഫോണ്ട്-കുടുംബം സജ്ജീകരിച്ചതെങ്കിൽ, തുടർന്ന്, മുഴുവൻ രേഖയും അതേ ഫോണ്ട്-കുടുംബത്തെ നിലനിർത്തും. ഇത് ശരിക്കും എളുപ്പത്തിൽ ചെറിയ സ്റ്റൈൽഷീറ്റുകൾ നിർമ്മിക്കും, കാരണം മൊത്തത്തിലുള്ള മൊത്തത്തിലുള്ള ശൈലികൾ ഉണ്ട്. ഉദാഹരണത്തിന്:

body {font-family: Arial, sans-serif; }

ഇൻഹറിറ്റ് സ്റ്റൈൽ മൂല്യം ഉപയോഗിക്കുക

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

ശരീരം {margin: 1em; } p {മാർജിൻ: }

ഇൻഹെറിറ്റൻസ് കംപ്യൂട്ട് ചെയ്ത മൂല്യങ്ങൾ ഉപയോഗിക്കുന്നു

ലിംഗ്റ്റിന്റെ വലുപ്പത്തിലുള്ള വലുപ്പങ്ങൾ ഉപയോഗിക്കുന്ന പാരമ്പര്യ മൂല്യങ്ങൾക്കായി ഇത് പ്രധാനപ്പെട്ടതാണ്. ഒരു കമ്പ്യൂട്ട് മൂല്യം വെബ് പേജിലെ മറ്റ് ചില മൂല്യങ്ങളുമായി ബന്ധമുള്ള മൂല്യമാണ്.

നിങ്ങളുടെ BODY ഘടകത്തിൽ 1em എന്നതിന്റെ ഫോണ്ട്-വ്യാപ്തി സജ്ജീകരിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ മുഴുവൻ പേജും വലിപ്പം കുറഞ്ഞത് 1 മാത്രമാണ്. ഇതിന് കാരണം ഹെഡിംഗ്സ് (H1-H6), മറ്റ് ഘടകങ്ങൾ (ചില ബ്രൌസറുകൾ വ്യത്യസ്തമായ ടേബിൾ പ്രോപ്പർട്ടികളാണ് കണക്കാക്കുന്നത്) പോലെയുള്ള ഘടകങ്ങൾ വെബ് ബ്രൌസറിൽ ആപേക്ഷിക വലിപ്പമുണ്ട്. മറ്റ് ഫോണ്ട് സൈസ് വിവരങ്ങളുടെ അഭാവത്തിൽ വെബ് ബ്രൗസർ എല്ലായ്പ്പോഴും H1 തലക്കെട്ട് പേജിലെ ഏറ്റവും വലിയ വാചകമാണ്, അതിനുശേഷം H2, എന്നിവയും ഉണ്ടാകും. നിങ്ങളുടെ BODY ഘടകം ഒരു പ്രത്യേക ഫോണ്ട് സൈസായി സജ്ജമാക്കുമ്പോൾ, അത് "ശരാശരി" ഫോണ്ട് സൈസ് ആയി ഉപയോഗിക്കാറുണ്ട്, കൂടാതെ തലക്കെട്ട് ഘടകങ്ങൾ അതിൽ നിന്ന് കണക്കുകൂട്ടും.

പാരമ്പര്യത്തിന്റെയും പശ്ചാത്തല സവിശേഷതയുടെയും കുറിച്ച് ഒരു കുറിപ്പ്

ലിസ്റ്റുചെയ്തിരിക്കുന്ന നിരവധി ശൈലികൾ സിഎക്സ് 2-ൽ കൈമാറപ്പെട്ടിട്ടില്ല. എന്നാൽ വെബ് ബ്രൌസറുകൾ ഇപ്പോഴും മൂല്യങ്ങൾ നിലനിർത്തുന്നു. ഉദാഹരണത്തിന്, നിങ്ങൾ ഇനിപ്പറയുന്ന HTML, CSS എന്നിവ എഴുതിയിട്ടുണ്ടെങ്കിൽ: