ഇൻലൈൻ, ഉൾച്ചേർത്ത, ബാഹ്യ ശൈലി ഷീറ്റുകൾ: നിങ്ങൾക്ക് അറിയേണ്ട കാര്യങ്ങൾ ഇവിടെയുണ്ട്
ഫ്രണ്ട് എൻഡ് വെബ്സൈറ്റ് ഡവലപ്മെന്റ് പലപ്പോഴും 3-കാലിഡ് സ്റ്റൂലായി കണക്കാക്കപ്പെടുന്നു. ഈ കാലുകൾ താഴെപ്പറയുന്നവയാണ്:
ഈ സ്റ്റൂളിന്റെ രണ്ടാമത്തെ ലെഗ്, സിഎസ്എസ് അല്ലെങ്കിൽ കാസ്കാഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ, നമ്മൾ ഇന്നു ഇവിടെ നോക്കുന്നത്. പ്രത്യേകമായി, നിങ്ങൾക്ക് ഒരു പ്രമാണത്തിലേക്ക് ചേർക്കാൻ കഴിയുന്ന 3 സ്റ്റൈലുകളുടെ ശൈലിയിൽ ഞങ്ങൾ അഭിസംബോധന ചെയ്യേണ്ടതുണ്ട്.
- ഇൻലൈൻ ശൈലികൾ
- ഉൾച്ചേർത്ത ശൈലികൾ
- ബാഹ്യ ശൈലികൾ
ഓരോ തരത്തിലുമുള്ള CSS ശൈലികൾക്കും പ്രയോജനകരവും ഡ്രോപ്ബാക്കും ഉണ്ട്, അതുകൊണ്ട് അവ ഓരോന്നും ഓരോന്നിനും ആഴത്തിൽ പരിശോധിക്കാം.
ഇൻലൈൻ സ്റ്റൈലുകൾ
HTML പ്രമാണത്തിലെ ടാഗിൽ നേരിട്ട് എഴുതിയ ശൈലികളാണ് ഇൻലൈൻ സ്റ്റൈലുകൾ. ഇൻലൈൻ ശൈലികൾ പ്രയോഗിക്കുന്ന നിർദ്ദിഷ്ട ടാഗ് മാത്രമേ ബാധിക്കുകയുള്ളൂ. ഒരു സ്റ്റാൻഡേർഡ് ലിങ്ക്, ആങ്കർ, ടാഗ് എന്നിവയിൽ പ്രയോഗിക്കുന്ന ഇൻലൈൻ ശൈലിക്ക് ഒരു ഉദാഹരണം ഇതാ:
ഈ സിഎസ്എസ് ഭരണം ഈ ഒരു ലിങ്ക് ഓഫ് സ്റ്റാൻഡേർഡ് ടെക്സ്റ്റൈൽ ഡിസ്ട്രിബ്യൂട്ടാക്കി മാറ്റും. എന്നിരുന്നാലും, പേജിലെ മറ്റേതെങ്കിലും ലിങ്ക് മാറ്റില്ല. ഇൻലൈൻ ശൈലികളുടെ പരിമിതികളിലൊന്നാണ് ഇത്. അവ ഒരു നിർദ്ദിഷ്ട ഇനത്തിൽ മാത്രം മാറ്റം വരുത്തുന്നതിനാൽ, ഒരു യഥാർത്ഥ പേജ് ഡിസൈൻ നേടാൻ ഈ സ്റ്റൈലുകളിൽ നിങ്ങളുടെ HTML ഉപയോഗിക്കേണ്ടതാണ്. അത് ഒരു മികച്ച പരിശീലനമല്ല. യഥാർത്ഥത്തിൽ, "ഫോണ്ട്" ടാഗുകളുടെയും വെബ് പേജുകളിലെ ഘടനയും ശൈലിയും ചേർന്ന ദിവസങ്ങളിൽ നിന്ന് നീക്കംചെയ്യപ്പെട്ട ഒരു ചുവടുവയ്പ്പാണ് ഇത്.
ഇൻലൈൻ സ്റ്റൈലുകൾക്ക് വളരെ ഉയർന്ന പ്രത്യേകതയുണ്ട്.
ഇത് മറ്റ്, ഇൻലൈൻ ശൈലികളുമായി മാറ്റി എഴുതാൻ അവരെ ബുദ്ധിമുട്ടാക്കുന്നു. ഉദാഹരണത്തിന്, നിങ്ങൾ ഒരു സൈറ്റിനെ പ്രതികരിക്കാനും മീഡിയ ചോദ്യങ്ങൾ ഉപയോഗിച്ച് ചില ബ്രേക്ക്പോയിന്റുകളിൽ എങ്ങനെയാണ് ഒരു ഘടകത്തെ വീക്ഷിക്കണമെന്നും ആഗ്രഹിക്കുന്നെങ്കിൽ ഒരു മൂലകത്തിൽ ഇൻലൈൻ സ്റ്റൈലുകൾ ചെയ്യുന്നത് വളരെ പ്രയാസകരമാകും.
ആത്യന്തികമായി, ഇൻലൈൻ സ്റ്റൈലുകൾ വളരെ അപൂർവ്വമായി ഉപയോഗിക്കുമ്പോൾ ശരിക്കും അനുയോജ്യമാണ്.
വാസ്തവത്തിൽ, എന്റെ വെബ്പേജുകളിൽ ഇൻലൈൻ ശൈലികളെ ഞാൻ വിരളമായി ഉപയോഗിക്കുന്നു.
ഉൾച്ചേർത്ത സ്റ്റൈലുകൾ
പ്രമാണ തലയിൽ എംബെഡ് ചെയ്ത ശൈലികളാണ് ഉൾച്ചേർത്ത ശൈലികൾ. ഉൾച്ചേർത്ത ശൈലികൾ അവർ ഉൾച്ചേർത്തിരിക്കുന്ന പേജിലെ ടാഗുകൾ മാത്രമാണ് ബാധിക്കുന്നത്. ഒരിക്കൽ കൂടി, ഈ സമീപനം CSS- ന്റെ ഒരു മികച്ച ശക്തിയെ ഒന്നു നിഷേധിക്കുന്നു. എല്ലാ പേജിലും ശൈലികൾ ഉണ്ടാകും
, നിങ്ങൾ ഒരു sitewide മാറ്റം വരുത്താൻ ആഗ്രഹിക്കുന്നെങ്കിൽ, കണ്ണികളുടെ നിറം ചുവപ്പ് മുതൽ പച്ചയായി മാറ്റുന്നത് പോലെ, ഓരോ പേജിലും ഒരു ഉൾച്ചേർത്ത ശൈലി ഷീറ്റ് ഉപയോഗിക്കുന്നു എന്നതിനാൽ എല്ലാ പേജിലും ഈ മാറ്റം വരുത്തേണ്ടതുണ്ട്. ഇത് ഇൻലൈൻ ശൈലികളേക്കാൾ നല്ലതാണ് എന്നാൽ പല സന്ദർഭങ്ങളിലും ഇപ്പോഴും പ്രശ്നമുണ്ട്.
ചേർക്കപ്പെട്ട സ്റ്റൈൽഷീറ്റുകൾ
ഒരു പ്രമാണത്തിൽ ആ പേജിൽ ഒരു പ്രധാന മാർക്ക്അപ്പ് കോഡ് ചേർക്കുകയും അത് ഭാവിയിൽ നിയന്ത്രിക്കാൻ പേജ് പ്രയാസമുണ്ടാക്കുകയും ചെയ്യും.
എംബഡ് ചെയ്ത ശൈലി ഷീറ്റിന്റെ പ്രയോജനം, മറ്റ് ബാഹ്യ ഫയലുകൾ ലോഡ് ചെയ്യുന്നതിനുപകരം പേജ് ഉടനെ തന്നെ ലോഡ് ചെയ്യുമെന്നതാണ്. ഇത് ഡൌൺലോഡ് വേഗതയും പ്രകടന കാഴ്ചപ്പാടിൽ നിന്നുമുള്ള നേട്ടമാണ്.
ബാഹ്യ ശൈലി ഷീറ്റുകൾ
ഇന്ന് മിക്ക വെബ്സൈറ്റുകളും ബാഹ്യ ശൈലി ഷീറ്റുകൾ ഉപയോഗിക്കുന്നു. ഒരു പ്രത്യേക ഡോക്യുമെന്റിൽ എഴുതിയിരിക്കുന്ന വിവിധ ശൈലികൾ ബാഹ്യ ശൈലികളാണ്. ബാഹ്യ ശൈലി ഷീറ്റുകൾ അവർ അറ്റാച്ച് ചെയ്യുന്ന ഏതൊരു രേഖയെയും അത് ബാധിക്കും, അതായത് ഓരോ പേജും ഒരേ സ്റ്റൈൽ ഷീറ്റ് ഉപയോഗിക്കുന്ന (ഉദാഹരണമായി ഇത് എങ്ങനെയാണ് ചെയ്യുന്നത്) ഒരു 20 പേജ് വെബ് സൈറ്റ് ഉണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ഓരോന്നും ഒരു ദൃശ്യ മാറ്റം ആ ശൈലി എഡിറ്റുചെയ്യുന്നതിലൂടെ ആ പേജുകളിലെ.
ഇത് ദീർഘകാല സൈറ്റ് മാനേജുമെന്റ് കൂടുതൽ എളുപ്പമാക്കുന്നു.
ബാഹ്യ ശൈലി ഷീറ്റുകളിലേക്കുള്ള മാറ്റം, ഈ ബാഹ്യ ഫയലുകൾ തേടുന്നതിനും ലോഡ് ചെയ്യുന്നതിനും അവർക്ക് പേജുകൾ ആവശ്യമാണെന്നതാണ്. ഓരോ പേജും ഓരോ ശൈലിയിലും സിഎസ്എസ് ഷീറ്റിൽ ഉപയോഗിക്കുമല്ലോ, അതിനാൽ പല പേജുകളും യഥാർത്ഥത്തിൽ ആവശ്യമുള്ളതിനേക്കാൾ വലിയ CSS പേജ് ലോഡ് ചെയ്യും.
ബാഹ്യ CSS ഫയലുകൾക്കായി ഒരു പ്രകടനം ഹിറ്റ് ആണ് എന്നത് ശരിയാണ്, തീർച്ചയായും ഇത് മിനിമൈസ് ചെയ്യപ്പെടും. തീക്ഷ്ണമായി, സി.എസ്.എസ് ഫയലുകൾ വെറും ടെക്സ്റ്റ് ഫയലുകളാണ്, അതിനാൽ അവ പൊതുവേ ആരംഭത്തിൽ വളരെ വലുതാകില്ല. നിങ്ങളുടെ മുഴുവൻ സൈറ്റും 1 CSS ഫയൽ ഉപയോഗിച്ചാൽ, ആ പ്രാരംഭത്തിൽ ലോഡ് ചെയ്ത ശേഷം അത് കാഷെ ചെയ്യുന്നതാണ്.
ഇതിനർത്ഥം ആദ്യ പേജിൽ ചില സന്ദർശനങ്ങൾക്ക് ചെറിയ പ്രകടനം കാഴ്ചവയ്ക്കാൻ കഴിയുമെന്നതിനാൽ, തുടർന്നുള്ള പേജുകൾ കാഷെ ചെയ്ത CSS ഫയൽ ഉപയോഗിക്കും, അതിനാൽ എന്തെങ്കിലും ഹിറ്റ് നിഷേധിക്കപ്പെടും. ബാഹ്യ CSS ഫയലുകൾ ഞാൻ എന്റെ എല്ലാ വെബ്പേജുകളും നിർമ്മിക്കുന്നത് എങ്ങനെയാണ്.