ഖണ്ഡിക 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 ശൈലികൾ കാര്യമായ സ്വാധീനം ചെലുത്തുന്നുവെങ്കിൽ, അവ എങ്ങനെയെങ്കിലും ബന്ധിപ്പിക്കണം എന്നത് വളരെ വ്യക്തമാണ്. ഇന്ന് നമ്മൾ CSS ശൈലി HTML-ലേക്ക് ബന്ധിപ്പിക്കുന്നതിനുള്ള നാല് പ്രധാന വഴികൾ നോക്കും.

നമുക്ക് നീട്ടിവെക്കരുത്, നമുക്ക് ആരംഭിക്കാം!

ഒരു പ്രത്യേക CSS ഫയൽ ഉൾപ്പെടെ!

ശൈലികൾ ബന്ധിപ്പിക്കുന്നതിനുള്ള ഏറ്റവും സൗകര്യപ്രദവും ലളിതവുമായ മാർഗ്ഗം ശൈലികളുമായി ഒരു പ്രത്യേക ഫയൽ ബന്ധിപ്പിക്കുക എന്നതാണ്. ഇത് ചെയ്യുന്നതിന്, ടെക്സ്റ്റ് എഡിറ്റർ നോട്ട്പാഡ്++ (അല്ലെങ്കിൽ മറ്റേതെങ്കിലും) ഉപയോഗിച്ച് .css എക്സ്റ്റൻഷൻ ഉപയോഗിച്ച് ഒരു ഫയൽ സൃഷ്‌ടിച്ച് ഞങ്ങൾ അത് സ്ഥാപിക്കാൻ ആഗ്രഹിക്കുന്ന ഫയലിൻ്റെ അതേ ഫോൾഡറിൽ വയ്ക്കുക.

തുടർന്ന് ടാഗുകൾക്കിടയിലുള്ള HTML ഫയലിൽ ഇനിപ്പറയുന്ന കോഡ് പോസ്റ്റ് ചെയ്യുക:

ഇതെല്ലാം എന്താണ് അർത്ഥമാക്കുന്നതെന്ന് ഇപ്പോൾ നോക്കാം:

ഇംഗ്ലീഷിൽ നിന്ന് വിവർത്തനം ചെയ്ത ലിങ്ക് # എന്നാൽ "ലിങ്ക്" എന്നാണ് അർത്ഥമാക്കുന്നത്. ഇതുവഴി നമ്മൾ അടുത്തതായി സംസാരിക്കാൻ പോകുന്നത് ഒരു ലിങ്കാണെന്ന് ബ്രൗസറിൽ കാണിക്കുന്നു. rel= # ഈ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് CSS ഫയൽ HTML ഫയലുമായി എങ്ങനെ ബന്ധപ്പെട്ടിരിക്കുന്നുവെന്ന് ഞങ്ങൾ കാണിക്കുന്നു. "stylesheet" # അതായത് CSS ഫയൽ ഒരു കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റാണ്. type="text/css" # ഇവിടെ എല്ലാം ലളിതമാണ്: ഫയൽ ടെക്‌സ്‌റ്റ് ഫോർമാറ്റിൽ എഴുതിയതാണെന്നും .css href="style.css" എന്ന വിപുലീകരണമുണ്ടെന്നതിൻ്റെ സൂചനയാണിത്. ഇത് CSS ശൈലികളുള്ള ഒരു ഫയലിലേക്കുള്ള ലിങ്കാണ്.

എൻ്റെ അഭിപ്രായത്തിൽ, CSS ശൈലികൾ ഉൾപ്പെടുത്തുന്നതിനുള്ള ഏറ്റവും ഇഷ്ടപ്പെട്ട മാർഗ്ഗമാണിത്.

ഞങ്ങൾ HTML ഫയലിൽ നേരിട്ട് ശൈലികൾ എഴുതുന്നു (ആദ്യ രീതി)

CSS ശൈലികൾ വ്യക്തമാക്കുന്നതിനുള്ള അടുത്ത മാർഗ്ഗം HTML പ്രമാണത്തിൽ നേരിട്ട് എഴുതുക എന്നതാണ്. ഇത് ഇതുപോലെ കാണപ്പെടുന്നു:

ഈ HTML പ്രമാണം ബ്രൗസറിൽ എങ്ങനെ പ്രദർശിപ്പിക്കും എന്ന് നോക്കുകയാണെങ്കിൽ, ടാഗുകൾക്കിടയിലുള്ള വാചകം നമുക്ക് കാണാം ചുവന്നു. സ്റ്റൈൽ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച്, അടുത്തതായി ഞങ്ങൾക്ക് ഡിസ്പ്ലേ സ്റ്റൈൽ പാരാമീറ്ററുകൾ ഉണ്ടെന്ന് ഞങ്ങൾ പറയുന്നു. നിറംനിറത്തിന് ഉത്തരവാദിയായ ഒരു സെലക്ടറാണ്. ചുവപ്പ്എന്നതാണ് ഈ സെലക്ടറിൻ്റെ മൂല്യം. ഈ രീതിയിൽ, ഒരു പ്രത്യേക തരം ഡിസ്പ്ലേ ഉപയോഗിച്ച് നമുക്ക് ടെക്സ്റ്റിൻ്റെ ചില ഭാഗങ്ങൾ ഹൈലൈറ്റ് ചെയ്യാൻ കഴിയും.

HTML-നുള്ളിൽ കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ സ്ഥാപിക്കുന്നു (രണ്ടാമത്തെ രീതി)

CSS ശൈലികൾ ഉൾപ്പെടുത്തുന്നതിനുള്ള മറ്റൊരു മാർഗ്ഗം HTML ഫയലിനുള്ളിൽ തന്നെ കാസ്കേഡിംഗ് ടേബിളുകൾ സ്ഥാപിക്കുക എന്നതാണ്. എൻ്റെ അഭിപ്രായത്തിൽ, ഈ രീതി ഏറ്റവും സൗകര്യപ്രദമല്ല, കാരണം ഇത് ഉപയോഗിക്കുന്നത്, സൈറ്റ് കോഡ് വിശകലനം ചെയ്യുന്നത് വളരെ സൗകര്യപ്രദമല്ല. CSS ശൈലികൾ എഴുതാൻ തുടങ്ങുന്നതിന്, നിങ്ങൾ HTML ഫയലിലേക്ക് ടാഗുകൾ ചേർക്കേണ്ടതുണ്ട് . പ്രായോഗികമായി, ഇത് ഇതുപോലെ കാണപ്പെടുന്നു:

ഒരു ഉദാഹരണം ഇതാ: ഒരു HTML പ്രമാണത്തിൽ CSS ശൈലികൾ പ്രദർശിപ്പിക്കുന്നു

ടാഗിനുള്ളിൽ ഞങ്ങൾ CSS നിയമങ്ങൾക്കനുസൃതമായി, ചുരുണ്ട ബ്രേസുകൾ ഉപയോഗിച്ച് കോഡും എഴുതുന്നു എന്നത് ശ്രദ്ധിക്കുക. തുടർന്നുള്ള ലേഖനങ്ങളിൽ ഞാൻ CSS ലെ വാക്യഘടനയുടെ നിയമങ്ങളെക്കുറിച്ച് കൂടുതൽ വിശദമായി സംസാരിക്കും.

ഒന്നിലധികം CSS ഫയലുകൾ ഒരു HTML പ്രമാണത്തിലേക്ക് ബന്ധിപ്പിക്കുന്നു.

ഒന്നിലധികം CSS ഫയലുകൾ ഒരേസമയം ഉൾപ്പെടുത്താൻ HTML നിയമങ്ങൾ അനുവദിക്കുന്നു. പല വെബ്മാസ്റ്ററുകളും ഇത് ഉപയോഗിക്കുന്നു: അവർ ടെക്സ്റ്റിനും ഇമേജുകൾക്കുമായി പ്രത്യേക CSS ഫയലുകൾ സൃഷ്ടിക്കുന്നു. അല്ലെങ്കിൽ പേജിൻ്റെ ഹെഡർ, ഫൂട്ടർ, മെയിൻ ബോഡി എന്നിവയ്‌ക്കായി പ്രത്യേക ഫയലുകൾ. ഇത് എങ്ങനെ നടപ്പിലാക്കണമെന്ന് നമുക്ക് നോക്കാം.

ഞങ്ങൾ നിരവധി CSS സ്റ്റൈൽ ഫയലുകൾ സൃഷ്ടിക്കുന്നു. അവരുടെ പേരുകൾ style-1.css എന്നും style-2.css എന്നും ആയിരിക്കട്ടെ. HTML ഫയൽ ഉള്ള അതേ ഫോൾഡറിൽ ഞങ്ങൾ ഇത് ഒന്നാം നമ്പർ രീതി പോലെ സ്ഥാപിക്കുന്നു.

ഒരു ഉദാഹരണം ഇതാ: ഒരു HTML പ്രമാണത്തിൽ CSS ശൈലികൾ പ്രദർശിപ്പിക്കുന്നു

എല്ലാം ആദ്യ രീതിക്ക് സമാനമാണ്, ഈ സാഹചര്യത്തിൽ മാത്രം ഞങ്ങൾ ഒരേസമയം രണ്ട് ഫയലുകളിലേക്കുള്ള ലിങ്കുകൾ സൂചിപ്പിക്കുന്നു.

അതേ തരത്തിലുള്ള ഒരു ഫയലിലേക്ക് ഉള്ളിലെ CSS ഫയലിലേക്ക് ലിങ്ക് ചെയ്യുക.

മുകളിലുള്ള എല്ലാ രീതികൾക്കും പുറമേ, ഒരു CSS ഫയലിനുള്ളിൽ മറ്റ് പലതിലേക്കും ലിങ്കുകൾ സ്ഥാപിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു രീതിയുണ്ട്!

ഇത് ഇനിപ്പറയുന്ന രീതിയിൽ നടപ്പിലാക്കുന്നു:
ആദ്യം, ഞങ്ങൾ നിങ്ങളുടെ കോഡിലേക്ക് ഒരു CSS ഫയലെങ്കിലും അതേ രീതിയിൽ ബന്ധിപ്പിക്കേണ്ടതുണ്ട്.

രണ്ടാമതായി, ഇതിനകം ബന്ധിപ്പിച്ച ഫയലിലേക്ക് ഇനിപ്പറയുന്ന കോഡ് നൽകുക:

@ഇറക്കുമതി url("style-2.css");

ഈ വരിയിൽ ഞങ്ങളുടെ ഫയലിലേക്ക് ഒരു അധിക CSS ഫയൽ ഉൾപ്പെടുന്നു. CSS ബന്ധിപ്പിക്കുന്നതിൽ നിങ്ങൾക്ക് എന്തെങ്കിലും ബുദ്ധിമുട്ടുകൾ ഉണ്ടെങ്കിൽ, നിങ്ങൾക്ക് അവരോട് അഭിപ്രായങ്ങളിൽ ചോദിക്കാവുന്നതാണ്.
മുമ്പത്തെ രണ്ട് പാഠങ്ങളിൽ നിന്ന് ഞങ്ങൾ പഠിച്ചതുപോലെ, ഓരോ വെബ്‌മാസ്റ്ററും മാസ്റ്റർ ചെയ്യേണ്ട ശക്തമായ ഒരു ഉപകരണമാണ് CSS സാങ്കേതികവിദ്യ! മെറ്റീരിയലിൻ്റെ സ്വാംശീകരണം മെച്ചപ്പെടുത്തുന്നതിന്, ഓരോ പാഠത്തിൻ്റെയും അവസാനം ലഭിച്ച വിവരങ്ങൾ ഏകീകരിക്കുന്നതിന് ഒരു പരിശീലന വീഡിയോ + ടെസ്റ്റ് ചേർക്കാൻ ഞാൻ തീരുമാനിച്ചു.

മെറ്റീരിയൽ ഫിക്സേഷൻ ടെസ്റ്റ്:

HTML ഫയലിൽ ഒരു ലിങ്ക് നൽകി ഞങ്ങൾ CSS ഫയൽ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്. ഇനിപ്പറയുന്ന രീതികളിൽ ഏതാണ് ശരി?

ഓപ്ഷൻ 1:

ഓപ്ഷൻ 2:

ഓപ്ഷൻ 3:

ഓപ്ഷൻ 4:

നമുക്ക് നേരിട്ട് HTML ഫയലിൽ CSS കാസ്കേഡുകൾ സ്ഥാപിക്കാമോ?

CSS സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിക്കാതെ HTML പ്രമാണങ്ങളുടെ രൂപവും ഫോർമാറ്റിംഗും മാറ്റുന്നത് ഇപ്പോൾ സങ്കൽപ്പിക്കാൻ പ്രയാസമാണ്, കാരണം HTML വളരെക്കാലമായി ഡിസൈൻ സ്വയം പര്യാപ്തമായ ഭാഷയായി മാറുകയും വെബ് ഡോക്യുമെൻ്റുകൾ രൂപപ്പെടുത്തുന്നതിനും അടയാളപ്പെടുത്തുന്നതിനുമുള്ള അതിൻ്റെ യഥാർത്ഥ പ്രവർത്തനങ്ങൾ നിർവഹിക്കാൻ തുടങ്ങിയതിനാൽ. ഈ ലേഖനത്തിൽ, ഒരു HTML ഡോക്യുമെൻ്റിൽ നിങ്ങൾക്ക് CSS സംയോജിപ്പിക്കാൻ കഴിയുന്ന വ്യത്യസ്ത വഴികൾ ഞങ്ങൾ വിശദീകരിക്കും.

CSS, HTML എന്നിവയെക്കുറിച്ച് ചുരുക്കത്തിൽ

മുമ്പ്, HTML ഉപയോഗിച്ചാണ് വെബ് പേജുകൾ രൂപകൽപ്പന ചെയ്തിരുന്നത്. ഇപ്പോൾ ഈ സമീപനം പ്രായോഗികമല്ല, കൂടാതെ CSS ടൂളുകൾ സ്റ്റൈലിംഗിനായി ഉപയോഗിക്കുന്നു, അത് അതിശയകരമായ ഡിസൈനുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള വളരെ വിശാലമായ സാധ്യതകളാണ്.

സൈറ്റ് ഡിസൈൻ ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന്, നിങ്ങൾ HTML പ്രമാണത്തിലേക്ക് CSS ബന്ധിപ്പിക്കേണ്ടതുണ്ട് - ഈ ഉപകരണങ്ങൾ പരസ്പരം വേർതിരിക്കാനാവാത്തവിധം പ്രവർത്തിക്കുന്നു - HTML ഘടന സൃഷ്ടിക്കുന്നു, കൂടാതെ സ്റ്റൈൽ ഷീറ്റുകൾ രൂപത്തിന് ഉത്തരവാദികളാണ്.

നിങ്ങളുടെ HTML കോഡിലെ ശൈലികളുടെ പ്രദർശനം നിങ്ങൾക്ക് ഇഷ്ടാനുസൃതമാക്കാൻ കഴിയുന്ന നിരവധി അടിസ്ഥാന മാർഗങ്ങളുണ്ട്, ഓരോന്നിനും അതിൻ്റേതായ ഗുണങ്ങളും ദോഷങ്ങളുമുണ്ട്.

CSS ഫയൽ ബന്ധിപ്പിക്കുന്നു

ഡെവലപ്പർമാർ ഏറ്റവും പ്രായോഗികവും സൗകര്യപ്രദവുമായി കണക്കാക്കുന്ന പ്രധാന രീതി ഇതാണ്.

ഈ രീതി ഉപയോഗിച്ച്, HTML പ്രമാണത്തിൻ്റെ ഒരു ഘടനയുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ഒരു വെബ് പേജിൻ്റെ രൂപകൽപ്പന വേഗത്തിൽ മാറ്റാൻ കഴിയും - ഉദാഹരണത്തിന്, ഒരേ സൈറ്റിനായി നിങ്ങൾക്ക് നിരവധി ഡിസൈൻ ഓപ്ഷനുകൾ എഴുതാനും അനുബന്ധ ആവശ്യമനുസരിച്ച് അവയെ ബന്ധിപ്പിക്കാനും കഴിയും.

ശൈലികളുള്ള ഒരു ഫയൽ ഉൾപ്പെടുത്തുന്നതിന്, നിങ്ങൾ ആദ്യം ഫയൽ ഘടന കോൺഫിഗർ ചെയ്യണം - കോഡിൽ നേരിട്ട് ആവശ്യമുള്ള ഡോക്യുമെൻ്റിലേക്കുള്ള ശരിയായ പാത നിങ്ങൾക്ക് എഴുതാൻ കഴിയും.

പ്രധാന HTML പ്രമാണം സ്ഥിതി ചെയ്യുന്ന ഒരു ഡയറക്‌ടറി സൃഷ്‌ടിക്കുക, അതേ ഫോൾഡറിൽ ഒരു ടെക്‌സ്‌റ്റ് എഡിറ്ററിൽ സ്‌റ്റൈൽ എന്ന പേരിൽ ഒരു ഫയൽ സൃഷ്‌ടിച്ച് അത് .css റെസല്യൂഷനിൽ സംരക്ഷിക്കുക. എല്ലാ നിർദ്ദിഷ്ട ഡോക്യുമെൻ്റ് സ്റ്റൈലിംഗ് നിയമങ്ങളോടും കൂടിയ CSS കോഡ് ഇതിൽ അടങ്ങിയിരിക്കും.

ഒരു HTML ടാഗ് ഉപയോഗിച്ചാണ് CSS കണക്ഷൻ ചെയ്യുന്നത് href ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച്. ഇത് ഇതുപോലെ കാണപ്പെടുന്നു:

ഇവിടെ കോഡ് ഒപ്റ്റിമൽ ആയി കണക്കാക്കപ്പെടുന്നവയിൽ സ്ഥിതിചെയ്യുന്നു, എന്നാൽ ആവശ്യമില്ല. ഇത് പ്രമാണത്തിൽ എവിടെയും സ്ഥാപിക്കാവുന്നതാണ്.

ഈ രീതി സൗകര്യപ്രദമാണ്, കാരണം സ്റ്റൈൽ ഷീറ്റിലെ എല്ലാ മാറ്റങ്ങളും ഒരു പ്രത്യേക ഫയലിലാണ് നിർമ്മിച്ചിരിക്കുന്നത്, ഇത് കോഡ് മനസ്സിലാക്കാനും വായിക്കാനും എളുപ്പമാക്കുകയും ഡോക്യുമെൻ്റ് വൃത്തിയുള്ളതാക്കുകയും ചെയ്യുന്നു.

നിങ്ങൾ style.css-ൽ മാറ്റങ്ങൾ വരുത്തി ബ്രൗസറിൽ index.html തുറക്കുകയാണെങ്കിൽ, നൽകിയ എല്ലാ മാറ്റങ്ങളും നിങ്ങൾക്ക് കാണാൻ കഴിയും.

അതുപോലെ, നിങ്ങൾക്ക് സൈറ്റ് ഘടനയിൽ ഫയലിലേക്കുള്ള പാത മാത്രമല്ല, ഇൻ്റർനെറ്റിൽ സ്ഥിതിചെയ്യുന്ന ശൈലിയിലുള്ള പേജിലേക്കുള്ള ഒരു ലിങ്കും സജ്ജമാക്കാൻ കഴിയും. ഈ സാഹചര്യത്തിൽ, href ആട്രിബ്യൂട്ടിന് ശേഷമുള്ള ഉദ്ധരണി ചിഹ്നങ്ങളിലും ഇത് യോജിക്കുന്നു.

ഒരു പ്രത്യേക ഫയലിൽ നിന്ന് ഒരു സ്റ്റൈൽ ഷീറ്റ് ഉൾപ്പെടുത്തുന്ന രീതി സൈറ്റിൻ്റെ പ്രകടനത്തെ ഒപ്റ്റിമൈസ് ചെയ്യുന്നു, കാരണം ഇത് കാഷെയിൽ നിന്ന് ഡാറ്റ ലോഡ് ചെയ്യാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു, അതിൻ്റെ ഫലമായി പേജുകൾ വേഗത്തിൽ ലോഡ് ചെയ്യുന്നു.

ഒരു HTML പ്രമാണത്തിനുള്ളിലെ സ്റ്റൈൽ ഷീറ്റുകൾ

ചിലപ്പോൾ സ്റ്റൈൽ പാരാമീറ്ററിൻ്റെ മൂല്യം സ്റ്റൈൽ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് HTML പ്രമാണത്തിൻ്റെ ബോഡിയിൽ നേരിട്ട് സജ്ജീകരിച്ചിരിക്കുന്നു.

വാക്യഘടന:

ഈ ഖണ്ഡികയിലെ വാചകം ചുവപ്പാണ്

വ്യക്തമായ പോരായ്മ സാർവത്രികതയുടെ അഭാവമാണ്; ഓരോ ടാഗിനും നിങ്ങൾ ഒരു മൂല്യം വ്യക്തമാക്കേണ്ടതുണ്ട്.

കൂടാതെ, ഇൻ്റേണൽ സ്‌റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിച്ച് കണക്‌റ്റുചെയ്യുന്നത് മുമ്പത്തെ രീതിയിൽ നിന്ന് വ്യത്യസ്തമായി വിവരങ്ങൾ കാഷെ ചെയ്യാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നില്ല.

ആഗോള ശൈലി

ഒരു HTML ഡോക്യുമെൻ്റിലുടനീളം നിങ്ങൾക്ക് ഒരു നിർദ്ദിഷ്ട ഘടകം സ്റ്റൈൽ ചെയ്യണമെങ്കിൽ, ടാഗ് ഉപയോഗിക്കുക

ടാഗിൽ നിർദ്ദിഷ്ട ശൈലി പ്രയോഗിക്കും

, അത് പേജിൽ രജിസ്റ്റർ ചെയ്ത ഉടൻ.

ഈ രീതിയിൽ CSS ഉൾപ്പെടുത്തുന്നത് ബാഹ്യ സ്റ്റൈൽ ഷീറ്റിനേക്കാൾ ബ്രൗസർ ഉയർന്ന മുൻഗണനയിൽ വായിക്കും.

ഒരു വെബ്സൈറ്റിലേക്ക് ഒരു ഫോണ്ട് എങ്ങനെ ചേർക്കാം

ഏതൊരു വെബ് പേജിൻ്റെയും പ്രധാന ഡിസൈൻ ഘടകങ്ങളിൽ ഒന്നാണ് ഫോണ്ട്. ഒരു വെബ്‌സൈറ്റ് ഒരു ഉപയോക്താവിൽ ഉണ്ടാക്കുന്ന മതിപ്പ് നേരിട്ട് ഉപയോഗിക്കുന്ന ഫോണ്ടിനെ ആശ്രയിച്ചിരിക്കുന്നു. ഭാഗ്യവശാൽ, നിങ്ങൾക്ക് സ്റ്റാൻഡേർഡ് ഹെഡ്‌സെറ്റുകളിലേക്ക് സ്വയം പരിമിതപ്പെടുത്തേണ്ടതില്ല - ഇത് എങ്ങനെ ചെയ്യാമെന്ന് ഞങ്ങൾ നിങ്ങളോട് പറയും.

CSS ഉപയോഗിച്ച്, ഫോണ്ടുകൾ ഇനിപ്പറയുന്ന രീതിയിൽ ബന്ധിപ്പിച്ചിരിക്കുന്നു:

• അനുയോജ്യമായ ഹെഡ്‌സെറ്റ് കണ്ടെത്തി ഡൗൺലോഡ് ചെയ്യുക.
• CSS ഫയൽ തുറന്ന് അതിൽ ഇനിപ്പറയുന്ന കോഡ് എഴുതുക:

ആദ്യം, ഫോണ്ടിൻ്റെ പേര് വ്യക്തമാക്കിയിരിക്കുന്നു, തുടർന്ന് അതിലേക്കുള്ള പാത, ഒടുവിൽ പാരാമീറ്ററുകൾ. ഈ ഉദാഹരണത്തിൽ, ഫോണ്ട് ഫയൽ ഫോണ്ട് ഫോൾഡറിലാണ് സ്ഥിതിചെയ്യുന്നത്, അത് റൂട്ട് ഡയറക്ടറിയിലാണ് സ്ഥിതി ചെയ്യുന്നത്. സൗകര്യാർത്ഥം, വിവിധ ഫയലുകൾക്കും ഘടകങ്ങൾക്കും (ചിത്രങ്ങൾ, സ്ക്രിപ്റ്റുകൾ, സ്റ്റൈൽ ഷീറ്റുകൾ മുതലായവ) പ്രത്യേക ഫോൾഡറുകൾ സൃഷ്ടിക്കുന്നതാണ് നല്ലത്.

അതിനാൽ, ഫോണ്ട് ഫോൾഡറിൽ നമുക്ക് സാധാരണ പാരാമീറ്ററുകൾ ഉള്ള OpenSans.ttf എന്ന ഒരു ഫയൽ ഉണ്ട്. ഇത് ഇപ്പോൾ ബ്രൗസറിൽ പ്രദർശിപ്പിക്കും.

ഗൂഗിൾ ഫോണ്ടുകൾ വഴി ഫോണ്ട് ബന്ധിപ്പിക്കുന്നു

CSS-ലും HTML-ലും ഫോണ്ടുകൾ ഉൾപ്പെടുത്തുന്നതിനുള്ള ഏറ്റവും സാധാരണമായ മാർഗ്ഗം Google ഫോണ്ട് സേവനമാണ്.

ഇൻ്റർഫേസ് അവബോധജന്യമാണ് - പേരോ നിർദ്ദിഷ്ട പാരാമീറ്ററുകളോ ഉപയോഗിച്ച് നിങ്ങൾക്ക് അനുയോജ്യമായ ഒരു ഫോണ്ട് കണ്ടെത്തേണ്ടതുണ്ട്, ഈ ഫോണ്ട് തിരഞ്ഞെടുക്കുക ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക, തുടർന്ന് ടാഗ് ഫീൽഡിൽ ചേർത്ത ഒരു കോഡ് സേവനം തൽക്ഷണം സൃഷ്ടിക്കുന്നു. HTML ഡോക്യുമെൻ്റും ശൈലികളുള്ള അനുബന്ധ CSS ഫയലും.

HTML-ൽ ഇത് എങ്ങനെ കാണണം:

ശൈലികളുള്ള CSS ഫയലിൽ:

ഫോണ്ട്-ഫാമിലി: "ഓപ്പൺ സാൻസ്", സാൻസ്-സെരിഫ്;

ഈ രീതി സൗകര്യപ്രദമാണ്, കാരണം ഇത് വളരെ വലിയ ഡാറ്റാബേസിൽ നിന്ന് ആവശ്യമുള്ള ഫോണ്ട് വേഗത്തിൽ കണ്ടെത്താൻ നിങ്ങളെ അനുവദിക്കുകയും ധാരാളം സമയം ലാഭിക്കുകയും ചെയ്യുന്നു, അതുപോലെ ചില ബ്രൗസറുകളിൽ ഫോണ്ടുകളുടെ തെറ്റായ പ്രദർശനം മൂലം ഉണ്ടാകുന്ന പ്രശ്നങ്ങൾ ഇല്ലാതാക്കുന്നു.

നമുക്ക് സംഗ്രഹിക്കാം

അതിനാൽ, HTML പ്രമാണങ്ങളിലേക്ക് CSS ശൈലികൾ ബന്ധിപ്പിക്കുന്നതിനുള്ള പ്രധാന വഴികൾ ഞങ്ങൾ പരിശോധിച്ചു. ഓരോ നിർദ്ദിഷ്ട കേസിലും ഡവലപ്പർ മുമ്പാകെ സജ്ജമാക്കിയ ടാസ്ക്കുകളെ അടിസ്ഥാനമാക്കി, നിങ്ങൾക്ക് ഉയർന്ന മുൻഗണനയുള്ള ഓപ്ഷൻ തിരഞ്ഞെടുക്കാം.

വെബ് പേജുകൾ രൂപകൽപന ചെയ്യുന്നത് ഒരു ക്രിയാത്മക പ്രക്രിയയാണ്, എന്നിരുന്നാലും, ശ്രദ്ധാപൂർവ്വമായ സമീപനം ആവശ്യമാണ്. കോഡിൽ അഭിപ്രായമിടാനുള്ള കഴിവ് പ്രയോജനപ്പെടുത്തുക, വെബ്‌സൈറ്റ് ഒപ്റ്റിമൈസേഷനെ കുറിച്ച് മറക്കരുത്.

ഒരു വെബ്സൈറ്റ് പേജിലേക്ക് css ശൈലികൾ ബന്ധിപ്പിക്കുന്നതിന് കുറഞ്ഞത് മൂന്ന് വഴികളുണ്ട്. ലേഖനം ഈ ബൈൻഡിംഗ് രീതികൾ വിശദമായി വിവരിക്കുകയും സമഗ്രമായ വിശദീകരണങ്ങൾ നൽകുകയും ചെയ്യുന്നു.

ആദ്യം, എന്തുകൊണ്ടാണ് നിങ്ങൾ ഒരു വെബ്‌സൈറ്റ് പേജിലേക്ക് എന്തും ബൈൻഡ് ചെയ്യേണ്ടതെന്നും എന്തിനാണ് css ശൈലികൾ ഒരു പ്രത്യേക ഫയലിൽ സ്ഥാപിച്ചിരിക്കുന്നതെന്നും വിശദീകരിക്കണം.

വെബ് പേജ് കണ്ടൻ്റ് സ്റ്റൈൽ സെറ്റുകളുടെ (സിഎസ്എസ്) ആവിർഭാവത്തിനു ശേഷം, വെബ് ഡെവലപ്പർമാർക്കിടയിൽ വളരെ ഉപയോഗപ്രദമായ ഒരു നിയമമുണ്ട്: "അതിൻ്റെ അവതരണത്തിൽ നിന്ന് ഉള്ളടക്കം വേർതിരിക്കുക!"

അതായത്, വെബ് പേജിൽ ശുദ്ധമായ HTML കോഡ് അടങ്ങിയിരിക്കുന്നു, കൂടാതെ എല്ലാ ഡിസൈനുകളും CSS നിയമങ്ങളുടെ പ്രത്യേക സെറ്റുകളിലും വെയിലത്ത് ഈ വെബ് പേജിന് പുറത്തുള്ളതുമാണ്. ഇത് ഒരു വെടിക്ക് രണ്ട് പക്ഷികളെ കൊന്നു.

ഒന്നാമതായി, html കോഡ് വൃത്തിയായി തുടർന്നു. അതിൽ ഉള്ളടക്കവും അടയാളപ്പെടുത്തലും മാത്രമേ ഉണ്ടായിരുന്നുള്ളൂ. ഇത് പേജിൻ്റെ ഭാരം ഗണ്യമായി ലഘൂകരിച്ചു.

രണ്ടാമതായി, ഈ ഡിവിഷൻ വെബ് പേജിനെ തന്നെ ബാധിക്കാതെ ഡിസൈൻ ശൈലികൾ കൂടുതൽ കാര്യക്ഷമമായി എഡിറ്റ് ചെയ്യുന്നത് സാധ്യമാക്കി.

സൈറ്റുകളുടെ ഉദാഹരണങ്ങളുള്ള മുഴുവൻ ഗാലറികളും ഉണ്ടായിരുന്നു, അവിടെ ഒരു CSS ശൈലിയിലുള്ള ഫയൽ മറ്റൊന്ന് മാറ്റിസ്ഥാപിച്ചാൽ മതിയാകും, കൂടാതെ ബ്ലോക്ക് പ്ലേസ്‌മെൻ്റിൻ്റെ രൂപകൽപ്പനയും ഘടനയും അനുസരിച്ച് സൈറ്റ് തൽക്ഷണം പൂർണ്ണമായും രൂപാന്തരപ്പെടും.