CSS ബന്ധിപ്പിക്കുന്നുപല തരത്തിൽ സംഭവിക്കുന്നു, അവ സാഹചര്യത്തെ ആശ്രയിച്ച് ഉപയോഗിക്കുന്നു. ഇപ്പോൾ നമ്മൾ ഈ രീതികൾ കൂടുതൽ വിശദമായി പരിശോധിക്കും. ധാരാളം വിവരങ്ങൾ ഉണ്ടാകും, അതിനാൽ അത് ഓർമ്മിക്കാൻ പോലും ശ്രമിക്കരുത്, എന്നാൽ എന്താണെന്ന് മനസിലാക്കാൻ ശ്രമിക്കുക.
അതെ, മുമ്പത്തെ പാഠത്തിൽ ഇതിനകം സ്പർശിച്ച ഒരു പോയിൻ്റ് കൂടി, പക്ഷേ ഞാൻ അത് വീണ്ടും ആവർത്തിക്കും. പലപ്പോഴും, പല തുടക്കക്കാരും "കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ" അല്ലെങ്കിൽ ലളിതമായി "സ്റ്റൈൽ ഷീറ്റുകൾ" എന്ന പദത്തെ ഭയപ്പെടുന്നു, അതിനാൽ ടെക്സ്റ്റിൽ അത്തരം പദപ്രയോഗങ്ങൾ നേരിടുമ്പോൾ, എന്താണ് പറയുന്നതെന്ന് അവർക്ക് മനസ്സിലാകുന്നില്ലെന്ന് അവർക്ക് ഉപബോധമനസ്സോടെ തോന്നുന്നു. അതിനാൽ, വാസ്തവത്തിൽ, നിങ്ങൾ പരിചിതമായ രൂപത്തിൽ പട്ടികകളൊന്നുമില്ല - ഇല്ല. ഈ വാക്കുകൾ ഒരു കാര്യം മാത്രം വിവരിക്കുന്നു - CSS മായി ബന്ധപ്പെട്ട എല്ലാം, അതായത്, വിവിധ CSS നിയമങ്ങൾ, പ്രോപ്പർട്ടികൾ, മൂല്യങ്ങൾ മുതലായവ. പൊതുവേ, ഈ പാഠപുസ്തകത്തിൽ നമ്മൾ പഠിക്കുന്ന എല്ലാം. വഴിയിൽ, ഇതിൽ "CSS", "styles" എന്നീ വാക്കുകളും ഉൾപ്പെടുത്താം.
അന്തർനിർമ്മിത ശൈലികൾ
ബിൽറ്റ്-ഇൻ ശൈലികൾ (ഇൻലൈൻ) ബന്ധിപ്പിക്കുന്നത് പേജിലെ ഒരു നിർദ്ദിഷ്ട ടാഗിൽ സ്റ്റൈൽ ആട്രിബ്യൂട്ട് പ്രയോഗിക്കുന്നത് ഉൾപ്പെടുന്നു. ഈ സാഹചര്യത്തിൽ, ആട്രിബ്യൂട്ട് മൂല്യം ഒന്നോ അതിലധികമോ ആണ് (അർദ്ധവിരാമങ്ങളാൽ വേർതിരിച്ചത്) അനുബന്ധ മൂല്യങ്ങൾക്കൊപ്പം. ചട്ടം പോലെ, ഒരു നിർദ്ദിഷ്ട പേജിൽ ഒരു നിർദ്ദിഷ്ട ഘടകത്തിൻ്റെ സവിശേഷതകൾ മാറ്റേണ്ട സന്ദർഭങ്ങളിൽ ഈ രീതി ഉപയോഗിക്കുന്നു.
പൊതുവായ വാക്യഘടന
<тег style="свойство:значение; свойство:значение; ...">...
ഇൻലൈൻ ശൈലികൾ CSS-ലേക്ക് ബന്ധിപ്പിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം
ഖണ്ഡിക 1
ഖണ്ഡിക 2
ഫലം ബ്രൗസറിൽ
ഖണ്ഡിക 1
ഖണ്ഡിക 2
ആന്തരിക ശൈലികൾ
ആന്തരിക ശൈലികൾ ഡോക്യുമെൻ്റിൻ്റെ തലക്കെട്ടിൽ സൂചിപ്പിച്ചിരിക്കുന്നു, ടാഗ് ഉപയോഗിച്ച് ബന്ധിപ്പിച്ചിരിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, CSS മേലിൽ ഒരു ഘടകത്തെ ബാധിക്കില്ല, എന്നാൽ ഈ പേജിൽ നിലവിലുള്ള ശൈലികളിൽ വ്യക്തമാക്കിയ എല്ലാ ഘടകങ്ങളെയും ബാധിക്കും. സാധാരണയായി, ഒരു HTML പേജിനുള്ളിൽ സമാനമായ നിരവധി ഘടകങ്ങളുടെ ശൈലികൾ മാറ്റേണ്ടിവരുമ്പോൾ ഈ രീതി ഉപയോഗിക്കുന്നു.
ആന്തരിക ശൈലികൾ CSS-ലേക്ക് ബന്ധിപ്പിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം
ഖണ്ഡിക 1
ഖണ്ഡിക 2
ഫലം ബ്രൗസറിൽ
ഖണ്ഡിക 1
ഖണ്ഡിക 2
ബാഹ്യ ശൈലികൾ
ബാഹ്യ ശൈലികൾ ഉപയോഗിച്ച് ഒരു പ്രത്യേക ഫയലിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. ഈ സാഹചര്യത്തിൽ, എല്ലാ ശൈലികളും .css വിപുലീകരണത്തോടുകൂടിയ ഒരു സാധാരണ ടെക്സ്റ്റ് ഫയലിൽ സ്ഥിതിചെയ്യുകയും ഈ ഫയൽ കണക്റ്റുചെയ്തിരിക്കുന്ന എല്ലാ പേജുകളുടെയും ഘടകങ്ങളെ ബാധിക്കുകയും ചെയ്യുന്നു. സാധാരണയായി, വെബ്സൈറ്റ് ശൈലികൾ സൃഷ്ടിക്കുന്നത് ഈ രീതിയിലാണ് ആരംഭിക്കുന്നത്, കാരണം അതിൻ്റെ സഹായത്തോടെ മാത്രമേ CSS ൻ്റെ എല്ലാ ഗുണങ്ങളും അനുഭവപ്പെടുകയുള്ളൂ, കാരണം ഒരു ഫയലിലെ ഡാറ്റ മാറ്റുന്നതിലൂടെ നിങ്ങൾക്ക് ഒരേസമയം ധാരാളം പേജുകളുടെ പ്രദർശനം നിയന്ത്രിക്കാൻ കഴിയും. ഇതിനകം സൈറ്റിൽ പ്രവർത്തിക്കുന്ന പ്രക്രിയയിൽ, ആവശ്യമെങ്കിൽ, ആന്തരിക അല്ലെങ്കിൽ ബിൽറ്റ്-ഇൻ ശൈലികൾ ചേർത്തു.
ബാഹ്യ ശൈലികൾ ഉപയോഗിക്കുമ്പോൾ, രചയിതാക്കൾ തികച്ചും വ്യത്യസ്തമായ രീതികളിൽ പ്രവർത്തിക്കുന്നു. ചിലത് എല്ലാ സൈറ്റ് ശൈലികളും ഒരു ഫയലിൽ സംഭരിക്കുന്നു, മറ്റുള്ളവ - പലതിലും. ഉദാഹരണത്തിന്, ഒരു ഫയലിൽ മുഴുവൻ സൈറ്റിനുമുള്ള ശൈലികൾ അടങ്ങിയിരിക്കുന്നു, അത് എല്ലാ പേജുകളിലും ഉണ്ട്, മറ്റൊന്ന് അധികമായി ചില വിഭാഗങ്ങളിലേക്ക് മാത്രം ബന്ധിപ്പിച്ചിരിക്കുന്നു, മൂന്നാമത്തേത് - ചില ഉപവിഭാഗങ്ങളിലേക്ക് മുതലായവ. നിങ്ങൾ എന്താണ് ചെയ്യുന്നത് എന്ന് തീരുമാനിക്കേണ്ടത് നിങ്ങളാണ്.
ബാഹ്യ ശൈലികൾ CSS-ലേക്ക് ബന്ധിപ്പിക്കുന്നതിനുള്ള ഉദാഹരണം
ഖണ്ഡിക 1
ഖണ്ഡിക 2
style.css ഫയലിൻ്റെ ഉള്ളടക്കം
ബോഡി (പശ്ചാത്തലം: #ccccff; /* പേജ് പശ്ചാത്തല നിറം */ ) p ( നിറം: ചുവപ്പ്; /* ഖണ്ഡിക വാചകം നിറം */ ഫോണ്ട്-കുടുംബം: ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്; /* ഖണ്ഡിക ഫോണ്ട് */ ഫോണ്ട് വലുപ്പം: 150 % ;
ഫലം ബ്രൗസറിൽ
ഖണ്ഡിക 1
ഖണ്ഡിക 2
നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, എല്ലാം വളരെ ലളിതമാണ്. പൊതുവേ, മിക്കവാറും എല്ലാ സിഎസ്എസ് പ്രോപ്പർട്ടികളുടെയും പേരുകൾ ഉപയോഗിച്ച് അവ എന്തൊക്കെ മാറ്റങ്ങളാണ് വരുത്തുന്നതെന്ന് നിങ്ങൾക്ക് ഇതിനകം മനസ്സിലാക്കാൻ കഴിയും, തീർച്ചയായും, നിങ്ങൾക്ക് കുറച്ച് ഇംഗ്ലീഷെങ്കിലും അറിയാമെങ്കിൽ.
ഇതിൻ്റെ മിക്ക ഉദാഹരണങ്ങളിലും CSS ട്യൂട്ടോറിയൽപ്രകടനത്തിന് ഏറ്റവും ദൃശ്യമായതിനാൽ ഞാൻ ആന്തരിക ശൈലികൾ ഉപയോഗിക്കും. കൂടുതൽ പഠനത്തിനായി, നിങ്ങൾ ഉടനടി ബാഹ്യ ശൈലികളുടെ ഒരു ഫയൽ സൃഷ്ടിക്കുകയും അവ ഉപയോഗിക്കാൻ ഉപയോഗിക്കുകയും ചെയ്യുന്നതാണ് നല്ലത്. ഉദാഹരണത്തിന്, ഒരു സ്റ്റൈൽ സബ്ഫോൾഡർ ഉണ്ടാക്കുക, അതിൽ ഒരു style.css ഫയൽ സൃഷ്ടിച്ച് നിങ്ങളുടെ HTML പേജിൽ ഉൾപ്പെടുത്തുക.
@ഇറക്കുമതി നിയമം വഴിയുള്ള CSS ഉൾപ്പെടെ
പ്രത്യേക ഫയലുകളിൽ സ്ഥിതിചെയ്യുന്ന ശൈലികൾ ബന്ധിപ്പിക്കുന്നതിനുള്ള മറ്റൊരു മാർഗ്ഗം റൂൾ ഉപയോഗിക്കുക എന്നതാണ് . നിരവധി സ്റ്റൈൽ ഷീറ്റുകൾ ഒന്നായി സംയോജിപ്പിക്കാൻ ഈ നിയമം ഉപയോഗിക്കുന്നു, ഇത് ചിലപ്പോൾ വളരെ സൗകര്യപ്രദമാണ്. ബാഹ്യ അല്ലെങ്കിൽ ആന്തരിക സ്റ്റൈൽ ഷീറ്റുകളിൽ കണക്ഷൻ സംഭവിക്കുന്നു, റൂൾ നാമത്തിന് ശേഷം, url() നിർമ്മാണം എഴുതുന്നു, അവിടെ CSS ഫയലിൻ്റെ വിലാസം ഉദ്ധരണികളിൽ സൂചിപ്പിച്ചിരിക്കുന്നു (" "). അല്ലെങ്കിൽ url() എഴുതിയിട്ടില്ല, പക്ഷേ ഉദ്ധരണികളും ഫയൽ വിലാസവും ഉടനടി ദൃശ്യമാകും. പൊതുവായ വാക്യഘടന ഇപ്രകാരമാണ്.
ഒരു ബാഹ്യ ശൈലി ഷീറ്റിൽ
@import url("ഫയൽ വിലാസം"); @ഇമ്പോർട്ട് "ഫയൽ വിലാസം"; ...
ഉള്ളിൽ
ബാഹ്യ ശൈലി ഷീറ്റുകളിൽ ഈ നിയമത്തിൻ്റെ ഉപയോഗം നോക്കാം, ഇതിനായി ഞാൻ നിങ്ങൾക്ക് താരതമ്യത്തിനായി രണ്ട് ഉദാഹരണങ്ങൾ നൽകും.
ഉദാഹരണം 1: ബാഹ്യ ശൈലികളുടെ സാധാരണ കണക്ഷൻ
പേജ് ഉള്ളടക്കം.
ഉദാഹരണം 2: @import CSS റൂളിനൊപ്പം ബാഹ്യ ശൈലികൾ ബന്ധിപ്പിക്കുന്നു
പേജ് ഉള്ളടക്കം.
style1.css ഫയലിൻ്റെ ഉള്ളടക്കം
@ഇറക്കുമതി url("style/style2.css"); @ഇറക്കുമതി url("style/style3.css"); ഇവിടെ താഴെ, കൂടാതെ, പ്രോപ്പർട്ടികൾ, മൂല്യങ്ങൾ മുതലായവയുള്ള പതിവ് ശൈലികൾ ഉണ്ടാകാം.
ഭരിക്കാൻ ശരിയായി പ്രവർത്തിച്ചു, അത് സ്റ്റൈൽ ഷീറ്റിൻ്റെ തുടക്കത്തിൽ തന്നെ വ്യക്തമാക്കിയിരിക്കണം. ഇവിടെയുള്ള നിയമം മാത്രമാണ് അപവാദം , ഇത് എല്ലായ്പ്പോഴും ആദ്യം വരുന്നു, പ്രായോഗികമായി ഇത് വളരെ അപൂർവമായി മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ.
ഈ വൈവിധ്യമാർന്ന CSS രീതികൾ ഉടനടി ഉപയോഗിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നില്ല - സാധാരണ ബാഹ്യ ശൈലി ഷീറ്റുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക, ഇത് പ്രധാന ഓപ്ഷനാണ്. നിങ്ങൾക്ക് വേണമെങ്കിൽ, നിങ്ങൾക്ക് തീർച്ചയായും, പരീക്ഷണം നടത്താം, പക്ഷേ കൂടുതലൊന്നും. പൊതുവേ, CSS എങ്ങനെ ബന്ധിപ്പിക്കണമെന്ന് നിങ്ങൾക്ക് എല്ലായ്പ്പോഴും തീരുമാനിക്കാം, പ്രധാന കാര്യം എന്താണ് ബന്ധിപ്പിക്കേണ്ടത്. :)
ഇഷ്ടാനുസൃത ശൈലികൾ
പല ബ്രൗസറുകൾക്കും ഉപയോക്താക്കൾ തന്നെ CSS-ൽ ഒരു ഫയൽ ഉൾപ്പെടുത്താനുള്ള കഴിവുണ്ട്, അതുവഴി അവർ കാണുന്ന സൈറ്റുകളുടെ രൂപം മാറ്റാൻ കഴിയും, അവർ പറയുന്നതുപോലെ, "തങ്ങൾക്ക് അനുയോജ്യമാകും." ഉദാഹരണത്തിന്, ഫോണ്ട് വലുപ്പവും ടൈപ്പ്ഫേസും, ടെക്സ്റ്റിൻ്റെ നിറവും ചില ഘടകങ്ങളുടെ പശ്ചാത്തലവും മാറ്റുക. സ്വാഭാവികമായും, ഈ സാഹചര്യത്തിൽ, ശൈലികൾ ഉപയോക്താവ് തന്നെ സൃഷ്ടിക്കുന്നു. ഉദാഹരണത്തിന്, Internet Explorer-ൽ നിങ്ങൾക്ക് ഇതിലേക്ക് പോയി ഇഷ്ടാനുസൃത ശൈലികൾ പ്രവർത്തനക്ഷമമാക്കാം: ടൂളുകൾ → ഇൻ്റർനെറ്റ് ഓപ്ഷനുകൾ → പൊതുവായ → രൂപഭാവം.
ഈ ട്യൂട്ടോറിയലിൽ css-നെ html-ലേക്ക് എങ്ങനെ ബന്ധിപ്പിക്കാമെന്ന് നിങ്ങൾ പഠിക്കും. ഉദാഹരണങ്ങൾക്കൊപ്പം നിരവധി ഓപ്ഷനുകൾ നോക്കാം. വ്യത്യസ്ത ബ്രൗസറുകൾക്കായുള്ള ശൈലികളുടെയും ഹാക്കുകളുടെയും അസമന്വിത ലോഡ് ചെയ്യുന്നതിനെക്കുറിച്ചും ഞങ്ങൾ സംസാരിക്കും.
ഒരു പ്രത്യേക ഫയലിൽ css-ലേക്ക് html-ലേക്ക് എങ്ങനെ ബന്ധിപ്പിക്കാം
ഒരു പ്രത്യേക സ്റ്റൈൽ ഫയൽ ഉപയോഗിച്ച് css-ലേക്ക് html-ലേക്ക് എങ്ങനെ കണക്‌റ്റ് ചെയ്യാമെന്ന് ഇപ്പോൾ ഞാൻ കാണിച്ചുതരാം. ഒരു പ്രത്യേക css ഫയൽ സൃഷ്ടിച്ചു. തുടർന്ന്, പ്രത്യേക കമാൻഡുകൾ ഉപയോഗിച്ച്, അത് ആവശ്യമായ രേഖകളുമായി ബന്ധിപ്പിക്കുന്നു. ഈ തരത്തെ ബാഹ്യ ശൈലി ഷീറ്റ് എന്ന് വിളിക്കുന്നു.
ഈ രീതി ഏറ്റവും അഭികാമ്യമാണ്. HTML പ്രമാണങ്ങളിൽ നിന്ന് വെവ്വേറെ വെബ്സൈറ്റ് ശൈലികൾ വികസിപ്പിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. സ്‌റ്റൈലിംഗ് പിന്നീട് ഒരൊറ്റ style.css ഫയലിൽ നിരവധി പേജുകളിൽ ഉപയോഗിക്കാനാകും.
ഹെഡ് ടാഗിൽ ഞങ്ങൾ പാത കൃത്യമായി എഴുതുന്നു. പേജ് പ്രദർശിപ്പിക്കുന്നതിന് ആവശ്യമായ എല്ലാ സിസ്റ്റം വിവരങ്ങളും ഇത് വ്യക്തമാക്കുന്നു. ഇത് ഇതുപോലെ ബന്ധിപ്പിക്കുന്നു:
മറ്റ് കണക്ഷൻ രീതികളും ഉണ്ട്. അവ ഒരു അധിക ഓപ്ഷനായി മാത്രം ഉപയോഗിക്കുക.
ഇൻലൈൻ ശൈലികൾക്ക് ഉയർന്ന മുൻഗണനയുണ്ടെന്ന് പറയേണ്ടതാണ്. നിങ്ങൾ എക്‌സ്‌റ്റേണൽ css ഉൾപ്പെടുത്തിയാലും, ഒരു പ്രത്യേക ടാഗിനുള്ള ഇൻലൈൻ ശൈലികൾക്ക് ബ്രൗസർ മുൻഗണന നൽകും. മുൻഗണനയിൽ രണ്ടാം സ്ഥാനത്ത് ആന്തരിക ശൈലികളാണ്. അവ അന്തർനിർമ്മിതമായവയെക്കാൾ താഴ്ന്നതാണ്, എന്നാൽ ബാഹ്യമായവയെക്കാൾ ഉയർന്നതാണ്.
പൊതുവേ, ഒരു അധിക ഓപ്ഷനായി, ഇൻലൈൻ അല്ലെങ്കിൽ ആന്തരിക ശൈലികൾ ഉപയോഗിക്കുന്നത് നിങ്ങൾക്ക് ഉപയോഗപ്രദമാകും. പ്രധാന css ഫയലിനെ ബാധിക്കാതെ ഒരു നിശ്ചിത പേജിൽ ചില ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യണമെങ്കിൽ ഇത് വളരെ ഉപയോഗപ്രദമാണ്.
ഒരു വെബ്സൈറ്റ് പേജിലേക്ക് css ശൈലികൾ ബന്ധിപ്പിക്കുന്നതിന് കുറഞ്ഞത് മൂന്ന് വഴികളുണ്ട്. ലേഖനം ഈ ബൈൻഡിംഗ് രീതികൾ വിശദമായി വിവരിക്കുകയും സമഗ്രമായ വിശദീകരണങ്ങൾ നൽകുകയും ചെയ്യുന്നു.
ആദ്യം, എന്തുകൊണ്ടാണ് നിങ്ങൾ ഒരു വെബ്സൈറ്റ് പേജിലേക്ക് എന്തും ബൈൻഡ് ചെയ്യേണ്ടതെന്നും എന്തിനാണ് css ശൈലികൾ ഒരു പ്രത്യേക ഫയലിൽ സ്ഥാപിച്ചതെന്നും വിശദീകരിക്കണം.
വെബ് പേജ് കണ്ടൻ്റ് സ്റ്റൈൽ സെറ്റുകളുടെ (സിഎസ്എസ്) ആവിർഭാവത്തിനു ശേഷം, വെബ് ഡെവലപ്പർമാർക്കിടയിൽ വളരെ ഉപയോഗപ്രദമായ ഒരു നിയമമുണ്ട്: "അതിൻ്റെ അവതരണത്തിൽ നിന്ന് ഉള്ളടക്കം വേർതിരിക്കുക!"
അതായത്, വെബ് പേജിൽ ശുദ്ധമായ HTML കോഡ് അടങ്ങിയിരിക്കുന്നു, കൂടാതെ എല്ലാ ഡിസൈനുകളും CSS നിയമങ്ങളുടെ പ്രത്യേക സെറ്റുകളിലും വെയിലത്ത് ഈ വെബ് പേജിന് പുറത്തുള്ളതുമാണ്. ഇത് ഒരു വെടിക്ക് രണ്ട് പക്ഷികളെ കൊന്നു.
ഒന്നാമതായി, html കോഡ് വൃത്തിയായി തുടർന്നു. അതിൽ ഉള്ളടക്കവും അടയാളപ്പെടുത്തലും മാത്രമേ ഉണ്ടായിരുന്നുള്ളൂ. ഇത് പേജിൻ്റെ ഭാരം ഗണ്യമായി ലഘൂകരിച്ചു.
രണ്ടാമതായി, ഈ വിഭജനം വെബ് പേജിനെ തന്നെ ബാധിക്കാതെ ഡിസൈൻ ശൈലികൾ കൂടുതൽ കാര്യക്ഷമമായി എഡിറ്റ് ചെയ്യുന്നത് സാധ്യമാക്കി.
സൈറ്റുകളുടെ ഉദാഹരണങ്ങളുള്ള മുഴുവൻ ഗാലറികളും ഉണ്ടായിരുന്നു, അവിടെ ഒരു CSS ശൈലിയിലുള്ള ഫയൽ മറ്റൊന്ന് മാറ്റിസ്ഥാപിച്ചാൽ മതിയാകും, കൂടാതെ ബ്ലോക്ക് പ്ലേസ്‌മെൻ്റിൻ്റെ രൂപകൽപ്പനയും ഘടനയും അനുസരിച്ച് സൈറ്റ് തൽക്ഷണം പൂർണ്ണമായും രൂപാന്തരപ്പെടും.
എല്ലാവർക്കും ശുഭദിനം.
അതിനാൽ, മുമ്പത്തെ ലേഖനങ്ങളിലൊന്നിൽ ഞങ്ങൾ പരിചയപ്പെട്ടു.
എന്നാൽ വളരെ പ്രധാനപ്പെട്ട ഒരു വിഷയം ഞങ്ങൾ അഭിസംബോധന ചെയ്തിട്ടില്ല. അതായത് - HTML കോഡിലേക്ക് CSS ശൈലികൾ എങ്ങനെ ബന്ധിപ്പിക്കാംഞങ്ങളുടെ വെബ്സൈറ്റിൻ്റെ പേജുകൾ.
ഈ ചോദ്യം യഥാർത്ഥത്തിൽ വളരെ പ്രധാനമാണ്. എല്ലാത്തിനുമുപരി നമ്മൾ css ശൈലികൾ തെറ്റായി ബന്ധിപ്പിച്ചാൽഞങ്ങളുടെ സൈറ്റിൻ്റെ പേജുകളിലേക്ക്, അപ്പോൾ ഞങ്ങൾക്ക് ഈ ശൈലികൾ ഉപയോഗിക്കാൻ കഴിയില്ല. ബ്രൗസർ അവയെ അവഗണിക്കും, ചില ശൈലികളുടെ ഉപയോഗം നൽകുന്ന ഫലം ഞങ്ങൾ കാണില്ല.
പേജ് കോഡിലേക്ക് CSS ശൈലികൾ ബന്ധിപ്പിക്കുന്നതിന് വ്യത്യസ്ത മാർഗങ്ങളുണ്ട്, ഇന്ന് ഞങ്ങൾ അവയെല്ലാം നോക്കാൻ ശ്രമിക്കും.
നമുക്ക് തുടങ്ങാം.
ഒരു HTML ഡോക്യുമെൻ്റിലേക്ക് CSS കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ബന്ധിപ്പിക്കുന്നതിൻ്റെ സ്വഭാവത്തെ അടിസ്ഥാനമാക്കി, ഇവയുണ്ട്: ബാഹ്യവും ആന്തരികവുമായ ശൈലി ഷീറ്റുകൾ.
1. ആന്തരിക CSS ശൈലി ഷീറ്റുകൾ.
ആന്തരിക ശൈലി ഷീറ്റുകൾ ഞങ്ങളുടെ വെബ് പേജിനുള്ളിൽ തന്നെ സ്ഥിതിചെയ്യുന്നു. അതെ, അതെ... ഓരോ വ്യക്തിഗത പേജിൻ്റെയും HTML കോഡിനുള്ളിൽ തന്നെ.
ഇത് തീർച്ചയായും അൽപ്പം അസൗകര്യമാണ്, പക്ഷേ ഇപ്പോഴും അത്തരമൊരു സാധ്യത നിലനിൽക്കുന്നു, അതിനെക്കുറിച്ച് എനിക്ക് പറയാതിരിക്കാൻ കഴിയില്ല.
അതിനാൽ, പേജ് കോഡിലേക്ക് CSS ശൈലികൾ ലിങ്ക് ചെയ്യുന്നതിനുള്ള ആദ്യ മാർഗം ടാഗ് ഉപയോഗിക്കുക എന്നതാണ്, HTML പ്രമാണത്തിൻ്റെ മുഴുവൻ ഉള്ളടക്കത്തിലും പ്രയോഗിക്കുക. മുഴുവൻ സൈറ്റിനുമുള്ള എല്ലാ ശൈലികളും പോലും അവയിൽ നിങ്ങൾക്ക് ഇഷ്ടമുള്ളത്രയും ഉണ്ടാകാം. എന്നാൽ ഇത് അൽപ്പം തെറ്റാണ്. ഞാൻ ബാഹ്യ സ്റ്റൈൽ ഷീറ്റുകൾ നോക്കുമ്പോൾ കുറച്ച് കഴിഞ്ഞ് ഇതിനെക്കുറിച്ച് സംസാരിക്കും.
ചിലപ്പോൾ നിങ്ങൾ ചെയ്യേണ്ടി വരും HTML കോഡിനുള്ളിൽ CSS ശൈലികൾ എഴുതുക.
ഉദാഹരണത്തിന്, നിങ്ങളുടെ വെബ്‌സൈറ്റിൽ ഏതെങ്കിലും തരത്തിലുള്ള പരസ്യ ബാനർ സ്ഥാപിക്കുമ്പോൾ, നിങ്ങൾ ഈ ബാനറിൻ്റെ കോഡ് പേജ് കോഡിലേക്ക് തിരുകുന്നു.
ഈ ബാനർ ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന് (അതിന് അനുവദിച്ചിരിക്കുന്ന അതിരുകൾക്കപ്പുറത്തേക്ക് പോകാതിരിക്കാൻ, ഒരുപക്ഷേ ഇതിന് ഒരു ഫ്രെയിം ആവശ്യമാണ്, മുതലായവ), ചിലപ്പോൾ നിങ്ങൾ അതിലേക്ക് നിരവധി CSS നിർദ്ദേശങ്ങൾ അറ്റാച്ചുചെയ്യേണ്ടതുണ്ട്.
എന്നാൽ പൊതുവായ ശൈലി ഷീറ്റിൽ മാറ്റങ്ങൾ വരുത്തുന്നതിൽ അർത്ഥമില്ല. ബാനർ ഒരു താൽക്കാലിക പ്രതിഭാസമാണ്. ഇന്ന് ഒന്ന്, നാളെ മറ്റൊന്ന്. അതിനാൽ, ഈ ബാനറിൻ്റെ കോഡിനുള്ളിൽ നേരിട്ട് അതിനുള്ള ശൈലികൾ എഴുതുന്നത് എളുപ്പമാണ്.
അതായത്, ഒരു നിർദ്ദിഷ്ട പേജ് ഘടകത്തിലേക്ക് മാത്രം ഞങ്ങൾ CSS ശൈലികൾ ബന്ധിപ്പിക്കേണ്ടതുണ്ട്. ഇത് വളരെ ലളിതമായി ചെയ്തു - സ്റ്റൈൽ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച്.
ഈ രീതിയിൽ എഴുതിയ ശൈലികൾ അവ ആരുടെ ടാഗിൽ സ്ഥാപിച്ചിരിക്കുന്നുവോ ആ ഘടകത്തെ മാത്രമേ ബാധിക്കുകയുള്ളൂ. ഈ സാഹചര്യത്തിൽ, ഈ ഖണ്ഡികയ്ക്ക് മാത്രം (ടാഗ്
). അല്ലാതെ മറ്റാർക്കും അല്ല!
2. ബാഹ്യ ശൈലി ഷീറ്റുകൾ.
എക്‌സ്‌റ്റേണൽ സിഎസ്എസ് സ്റ്റൈൽ ഷീറ്റുകൾ എന്നതിൻ്റെ അർത്ഥം അവ എഴുതിയിരിക്കുന്നത് HTML ഡോക്യുമെൻ്റിൻ്റെ ബോഡിയിലല്ല, മറിച്ച് ഒരു പ്രത്യേക പ്രത്യേക ഫയലിലാണ് എന്നാണ്. ഈ ഫയലുകൾക്ക് വിപുലീകരണമുണ്ട് .css
അതിനാൽ, വാഗ്ദാനം ചെയ്തതുപോലെ, ബാഹ്യ സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിക്കുന്നതാണ് നല്ലത് എന്ന് ഞാൻ നിങ്ങളോട് പറയും.
നിങ്ങളുടെ സൈറ്റിൻ്റെ പേജുകൾ അൽപ്പം വേഗത്തിൽ ലോഡ് ചെയ്യാൻ ഇത് അനുവദിക്കുന്നു എന്നതാണ് വസ്തുത. ഒരുപക്ഷേ ഒരു സെക്കൻ്റിൻ്റെ ഒരു ഭാഗത്തേക്ക്, പക്ഷേ വേഗതയേറിയതാണ്. ഇത് നിങ്ങളുടെ സൈറ്റിലെ ലോഡ് കുറയ്ക്കുന്നുനിങ്ങളുടെ സന്ദർശകർക്ക് കൂടുതൽ സൗകര്യപ്രദവും - പേജുകൾ ലോഡ് ചെയ്യാൻ അവർ കുറച്ച് കാത്തിരിക്കേണ്ടി വരും.
എന്തുകൊണ്ടാണ് ഇത് സംഭവിക്കുന്നത്?
നിങ്ങളുടെ സൈറ്റിനായുള്ള CSS ശൈലികൾ ഒരു പ്രത്യേക ഫയലിലാണെങ്കിൽ, ഒരു പുതിയ പേജ് ലോഡ് ചെയ്യുമ്പോൾ ഉപയോക്താവിൻ്റെ ബ്രൗസറിന് ഈ ശൈലികൾ ലോഡ് ചെയ്യേണ്ടതില്ല. അത് ഒരിക്കൽ ഡൗൺലോഡ് ചെയ്യുന്നു, കാഷെയിൽ (സന്ദർശകൻ്റെ കമ്പ്യൂട്ടറിലെ മെമ്മറി ഏരിയ) സ്ഥാപിക്കുന്നു, അടുത്ത പേജ് ലോഡ് ചെയ്യുമ്പോൾ, അത് അവിടെ നിന്ന് ശൈലികൾ എടുക്കുന്നു.
ഒരു വെബ് പേജിലേക്ക് CSS സ്റ്റൈൽഷീറ്റ് ഫയലുകൾ അറ്റാച്ചുചെയ്യാൻ രണ്ട് വഴികളുണ്ട്.
ആദ്യ രീതി, ഏറ്റവും സാധാരണമായത്, ടാഗ് ഉപയോഗിക്കുക എന്നതാണ് ആട്രിബ്യൂട്ടുകൾക്കൊപ്പം: rel = "stylesheet" തരം = "text/css" href = "style file.css" പേജ് ഹെഡർ കോഡിനുള്ളിൽ (ടാഗ്
).ഉദാഹരണത്തിന്:
| 1 2 3 4 | <തല > ..... <ലിങ്ക് rel = "stylesheet" തരം = "text/css" href = "style.css" > </തല> |
ഈ ഉദാഹരണം style.css ഫയലിൽ എഴുതിയ CSS ശൈലികൾ പേജിലേക്ക് അറ്റാച്ചുചെയ്യുന്നു. മുഴുവൻ പ്രമാണത്തിലും അവ സാധുവാണ്.
മറ്റൊരു വഴിയുണ്ട് HTML-ലേക്ക് ബാഹ്യ ശൈലി ഷീറ്റുകൾ അറ്റാച്ചുചെയ്യുകപ്രമാണം. ഇത് @ഇറക്കുമതി നിർദ്ദേശം ഉപയോഗിക്കുന്നു. നിലവിലെ സ്റ്റൈൽ ഷീറ്റിലേക്ക് ഒരു CSS ഫയലിൻ്റെ ഉള്ളടക്കങ്ങൾ ഇറക്കുമതി ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.
ചില സ്റ്റൈൽ ഷീറ്റുകൾ മറ്റുള്ളവയിലേക്ക് ചേർക്കുന്നതിനും ഒരു HTML പ്രമാണത്തിലേക്ക് ഒരു സ്റ്റൈൽ ഷീറ്റ് ഫയൽ അറ്റാച്ചുചെയ്യുന്നതിനും നിങ്ങൾക്ക് ഇത് രണ്ടും ഉപയോഗിക്കാം. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ അത് ടാഗിനുള്ളിൽ എഴുതേണ്ടതുണ്ട്