മൂന്ന് തരത്തിൽ ശൈലികൾ ചേർക്കാം.

ആന്തരിക ശൈലികൾ

ഇന്റീരിയർ ശൈലിഒരു html ടാഗിന്റെ ഒരു തരം വിപുലീകരണമാണ്. ഒരു കൂട്ടം ഒബ്‌ജക്‌റ്റിന് പകരം ഒരു പ്രത്യേക ഒബ്‌ജക്റ്റിനായി ചില പ്രോപ്പർട്ടികൾ സജ്ജീകരിക്കേണ്ടത് ആവശ്യമായി വരുമ്പോൾ ഈ ശൈലി സൃഷ്‌ടിക്കുന്നു. ഈ ഗുണങ്ങളെ വിളിക്കുന്നു ഗുണവിശേഷങ്ങൾശൈലി.

അത്തരമൊരു ശൈലി സൃഷ്ടിക്കാൻ, പാരാമീറ്റർ ഉപയോഗിക്കുക ശൈലി, എല്ലാ ടാഗുകൾക്കും ഉള്ളത്. പരാമീറ്റർ ശൈലിലിസ്റ്റ് ചെയ്തവ "അർദ്ധവിരാമം"നിർദ്ദിഷ്ട മൂല്യങ്ങളുള്ള ആട്രിബ്യൂട്ടുകൾ. ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ ഒരു അടയാളം കൂടാതെ നിയുക്തമാക്കിയിരിക്കുന്നു "തുല്യം", പതിവുപോലെ, പക്ഷേ പരിചിതമാണ് "വൻകുടൽ".

ഉദാഹരണത്തിന്, ഓറഞ്ച് നിറത്തിലും 22 പിക്സൽ വലുപ്പത്തിലും ഒരു പ്രത്യേക തലക്കെട്ട് എഴുതാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. ഇത് ചെയ്യുന്നതിന്, ഇനിപ്പറയുന്നവ എഴുതുക:

പാഠം 1

പാഠം 1

ഈ ഉദാഹരണം നോക്കാം. പദപ്രയോഗം "പാഠം 1"ടൈറ്റിൽ ടാഗ് ഉപയോഗിച്ച് ഹൈലൈറ്റ് ചെയ്തിരിക്കുന്നു

. ടാഗിൽ

പാരാമീറ്റർ ഉപയോഗിച്ച് ഒരു ശൈലി സൃഷ്ടിക്കുന്നു ശൈലി. ശൈലിക്ക് 2 ഗുണങ്ങളുണ്ട് നിറം(നിറം) കൂടാതെ അക്ഷര വലിപ്പം(ഫോണ്ട് വലുപ്പം), വേർതിരിച്ചിരിക്കുന്നു "അർദ്ധവിരാമം". ആട്രിബ്യൂട്ട് നിറംമൂല്യം നിശ്ചയിച്ചിരിക്കുന്നു #CD6600, ആട്രിബ്യൂട്ട് അക്ഷര വലിപ്പംമൂല്യം നിശ്ചയിച്ചിരിക്കുന്നു 22px.

ആഗോള ശൈലികൾ

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

ഒരു ഡോക്യുമെന്റിലേക്ക് ഗ്ലോബൽ ശൈലികൾ ഇനിപ്പറയുന്ന രീതിയിൽ ചേർക്കുന്നു:

1. ഒരു ടാഗിനുള്ളിൽ ജോടിയാക്കിയ ടാഗ് ചേർത്തു
   

   ചുവപ്പ് നിറവും വലിപ്പവും 20 പിക്സലുകൾ:

   
   
   

   ഈ ശൈലികൾ ചേർത്ത ശേഷം, നിങ്ങളുടെ പ്രമാണത്തിന്റെ എല്ലാ തലക്കെട്ടുകളും ടാഗുകൾ ഉപയോഗിച്ച് ഹൈലൈറ്റ് ചെയ്യുന്നു

   ഒപ്പം

   അധിക ടാഗുകൾ ഇല്ലാതെ ആവശ്യമുള്ള പ്രോപ്പർട്ടികൾ ഉണ്ടായിരിക്കും. നിങ്ങൾക്ക് എന്തെങ്കിലും പ്രോപ്പർട്ടി മാറ്റാനോ ചേർക്കാനോ താൽപ്പര്യമുണ്ടെങ്കിൽ, നിങ്ങൾ അത് അനുയോജ്യമായ ശൈലിയിൽ മാറ്റുകയോ ചേർക്കുകയോ ചെയ്യുക.

   അനുബന്ധ ശൈലികൾ

   ലിങ്ക് ചെയ്ത സ്റ്റൈൽ ഷീറ്റ്വിപുലീകരണത്തോടുകൂടിയ ഒരു പ്രത്യേക ഫയലിൽ സൃഷ്ടിക്കപ്പെടുന്നു .cssഒരു പ്രമാണത്തിലേക്ക് (അല്ലെങ്കിൽ നിരവധി പ്രമാണങ്ങൾ) ബന്ധിപ്പിക്കുക.

   ശൈലികൾ ചേർക്കുന്നതിനുള്ള ഈ രീതി വിവരിച്ച എല്ലാ രീതികളിലും ഏറ്റവും സൗകര്യപ്രദമാണ് കൂടാതെ ഒരു വെബ് ഡെവലപ്പർക്ക് കൂടുതൽ അവസരങ്ങൾ നൽകുന്നു.

   ഒന്നാമതായി, ഒരു പ്രത്യേക ഫയലിൽ വിവരിച്ചിരിക്കുന്ന ശൈലികളുടെ പ്രഭാവം അത് ബന്ധിപ്പിച്ചിട്ടുള്ള എത്ര പ്രമാണങ്ങളിലേക്കും വ്യാപിക്കുന്നു, അതേ ഫയൽ മറ്റ് സൈറ്റുകളിലും ഉപയോഗിക്കാം.

   രണ്ടാമതായി, html പേജുകൾ മാറ്റാതെ തന്നെ നിങ്ങൾക്ക് ശൈലികൾ മാറ്റാം. സ്റ്റൈൽ ഫയൽ കണക്റ്റുചെയ്തിരിക്കുന്ന എല്ലാ പേജുകളിലേക്കും എല്ലാ മാറ്റങ്ങളും സ്വയമേവ പ്രയോഗിക്കപ്പെടും.

   മൂന്നാമതായി, നിങ്ങൾ ആദ്യം ബ്രൗസർ കാഷെകൾ ലോഡ് ചെയ്യുമ്പോൾ (ഓർമ്മിക്കുന്നു) അത്തരം ഫയലുകൾ, അതിനാൽ നിങ്ങളുടെ സൈറ്റ് കുറച്ച് വേഗത്തിൽ ലോഡ് ചെയ്യും.

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

   ഒരു ഡോക്യുമെന്റിലേക്ക് ഒരു സ്റ്റൈൽ ഫയൽ ബന്ധിപ്പിക്കുന്നതിന്, ടാഗിനുള്ളിലെ പ്രമാണത്തിന്റെ തുടക്കത്തിൽ നിങ്ങൾ ചെയ്യേണ്ടത് ആവശ്യമാണ് ടാഗ് തിരുകുക മൂന്ന് പാരാമീറ്ററുകൾക്കൊപ്പം:

   
   
   

   പരാമീറ്ററുകൾ എവിടെയാണ് rel="സ്റ്റൈൽഷീറ്റ്"ഒപ്പം type="text/css"സ്ഥിരാങ്കങ്ങളും പരാമീറ്ററുമാണ് hrefസ്റ്റൈൽ ഫയലിന്റെ വിലാസം നൽകിയിരിക്കുന്നു. വിലാസം കേവലമോ ആപേക്ഷികമോ ആകാം.

   ഉദാഹരണത്തിന്:

   
   
   

   സ്‌റ്റൈൽ ഫയലിനുള്ളിൽ, ഗ്ലോബൽ ശൈലികൾ പോലെ, ആവശ്യമായ എല്ലാ ശൈലികളും വിവരിച്ചിരിക്കുന്നു, ലൈൻ ബ്രേക്കുകളാൽ വേർതിരിച്ചിരിക്കുന്നു:

   ശൈലി1 (
   ആട്രിബ്യൂട്ട്1: മൂല്യം;
   ആട്രിബ്യൂട്ട്2: മൂല്യം;
   ...
   }
   ശൈലി2 (
   ആട്രിബ്യൂട്ട്1: മൂല്യം;
   ആട്രിബ്യൂട്ട്2: മൂല്യം;
   ...
   }
   ...

   ഉദാഹരണത്തിന്, നമുക്ക് തലക്കെട്ടുകളുള്ള ഏതെങ്കിലും HTML പ്രമാണം സൃഷ്ടിക്കാം, ശൈലികളില്ലാതെ അത് എങ്ങനെ കാണപ്പെടുന്നുവെന്ന് നോക്കാം. നമുക്ക് എല്ലാ തലക്കെട്ടുകളും ചെയ്യാം

   ഓറഞ്ച് നിറവും വലിപ്പവും 22 പിക്സലും എല്ലാ തലക്കെട്ടുകളും

   ചുവപ്പ് നിറവും 20 പിക്സൽ വലിപ്പവും. ഇത് ചെയ്യുന്നതിന്, ഇനിപ്പറയുന്നവ അടങ്ങുന്ന style.css എന്ന സ്റ്റൈൽ ഫയൽ സൃഷ്ടിക്കുക:

   h1 (
   നിറം: #CD6600;
   ഫോണ്ട് വലുപ്പം: 22px
   }
   h2 (
   നിറം: #FF0000;
   ഫോണ്ട് വലുപ്പം: 20px
   }
   

   ഈ ഫയൽ ഞങ്ങളുടെ പ്രമാണവുമായി ബന്ധിപ്പിക്കുക, അതിൽ എഴുതുക:

   
   
   

   എന്താണ് CSS കാസ്‌കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ?

   CSS (കാസ്കേഡ് സ്റ്റൈൽ ഷീറ്റ്)- കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ. വെബ് ഡെവലപ്പർക്ക് അധിക കഴിവുകൾ നൽകുന്ന ഒരു തരം HTML വിപുലീകരണമാണിത്.

   ശൈലിടെക്സ്റ്റ് ഫോർമാറ്റിംഗ് ഘടകങ്ങളുടെ ഒരു കൂട്ടമാണ്. ഉദാഹരണത്തിന്, ടെക്സ്റ്റ് നിറം, ഫോണ്ട്, വലിപ്പം, വിന്യാസം മുതലായവ. ഈ പരാമീറ്ററുകളെല്ലാം ശൈലികളിൽ സൂക്ഷിക്കാം.

   എന്നാൽ ഫോർമാറ്റിംഗ് ടാഗുകൾ ഉപയോഗിച്ച് ടെക്സ്റ്റ് ഫോർമാറ്റ് ചെയ്യാനും HTML നിങ്ങളെ അനുവദിക്കുന്നു. എന്താണ് നേട്ടം സി.എസ്.എസ് HTML-ന് മുമ്പോ?

   HTML-നേക്കാൾ CSS-ന്റെ പ്രയോജനങ്ങൾ

   1. സി.എസ്.എസ്ഒരു പ്രവർത്തനത്തിൽ മുഴുവൻ പാരാമീറ്ററുകളും ഒരേസമയം മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

      അതിനാൽ സൈറ്റിലെ എല്ലാ തലക്കെട്ടുകളും ടാഗുകളാൽ വ്യക്തമാക്കിയിരിക്കുന്നു

      ,

      ,

      ഒപ്പം

      ഒരേ നിറമായിരുന്നു, സാധാരണ HTML-ൽ ഇതിനായി ഞങ്ങൾ ഓരോ തലക്കെട്ടും ഒരു കണ്ടെയ്‌നറിൽ സ്ഥാപിക്കേണ്ടതുണ്ട് പരാമീറ്റർ ഉപയോഗിച്ച് നിറം="#CD6600":

      തലക്കെട്ട് 1

      
      ...
      

      തലക്കെട്ട് 4

      നമുക്ക് തലക്കെട്ടുകളുടെ നിറം മാറ്റണമെങ്കിൽ, മുഴുവൻ പ്രമാണത്തിലും തിരഞ്ഞ് ഓരോ തലക്കെട്ടും വ്യക്തിഗതമായി മാറ്റേണ്ടതുണ്ട്.

      ഒപ്പം സഹായത്തോടെ സി.എസ്.എസ്ടാഗുകൾക്കായി ഞങ്ങൾ ഒരു ശൈലി സൃഷ്ടിക്കും

      ,

      ,

      ഒപ്പം

      ഒരു പ്രത്യേക ഫയലിൽ. അധിക ടാഗുകളില്ലാതെ ഈ ടാഗുകൾ വ്യക്തമാക്കിയ എല്ലാ തലക്കെട്ടുകൾക്കും ആവശ്യമുള്ള പ്രോപ്പർട്ടികൾ ഉണ്ടായിരിക്കും.

      തലക്കെട്ടുകളുടെ ഏതെങ്കിലും പ്രോപ്പർട്ടി മാറ്റണമെങ്കിൽ, ടാഗുകളുടെ ശൈലി മാറ്റേണ്ടതുണ്ട്, കൂടാതെ എല്ലാ തലക്കെട്ടുകളും സ്വയമേവ മാറ്റപ്പെടും.

   2. സാധാരണ HTML-നേക്കാൾ കൂടുതൽ ഓപ്ഷനുകൾ ശൈലികൾ ഡെവലപ്പർക്ക് നൽകുന്നു.

      ഉദാഹരണത്തിന്, ശൈലികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു പ്രത്യേക html ടാഗിന്റെ സ്റ്റാൻഡേർഡ് പാരാമീറ്ററുകൾ ഉപയോഗിച്ച് സജ്ജമാക്കാൻ കഴിയാത്ത ടെക്സ്റ്റ് പ്രോപ്പർട്ടികൾ സജ്ജമാക്കാൻ കഴിയും.

   3. എല്ലാ ശൈലികളും ഒരു പ്രത്യേക ഫയലിൽ സൂക്ഷിക്കാം. ബ്രൗസർ അത്തരം ഫയലുകൾ കാഷെ ചെയ്യുന്നു (ഓർമ്മിക്കുന്നു), അതിനാൽ നിങ്ങളുടെ സൈറ്റ് കുറച്ച് വേഗത്തിൽ ലോഡ് ചെയ്യും.

   വ്യത്യസ്ത തരം ശൈലികളുടെ സംയോജനം

   വിവരിച്ച എല്ലാത്തരം ശൈലികളും പരസ്പരം സംയോജിച്ച് ഉപയോഗിക്കാം. ഈ സാഹചര്യത്തിൽ മാത്രം മുൻ‌ഗണനകൾ ഓർമ്മിക്കുന്നത് മൂല്യവത്താണ്: ആന്തരിക ശൈലികൾക്ക് ഉയർന്ന മുൻ‌ഗണനയുണ്ട്, തുടർന്ന് ആഗോളവും ഏറ്റവും കുറഞ്ഞ മുൻഗണനയും - അനുബന്ധ ശൈലി ഷീറ്റുകൾ.

   ഉദാഹരണത്തിന്, നമുക്ക് എല്ലാ തലക്കെട്ടുകളും ഉണ്ടാക്കാം

   ഓറഞ്ച് നിറത്തിൽ, ഒരു പ്രത്യേക നിറം ചുവപ്പാണ്. ഓറഞ്ച് തലക്കെട്ടുകൾക്കായി ഒരു ആഗോള ശൈലിയും ചുവപ്പ് നിറത്തിലുള്ളവയ്ക്ക് ആന്തരികമായ ഒരു ശൈലിയും സൃഷ്ടിക്കാം:

   
   h1 (
   നിറം: #CD6600
   }
   

   
   

   തലക്കെട്ട് 1

   
   

   തലക്കെട്ട് 2

   
   

   തലക്കെട്ട് 3

   
   
   
   

   ഈ ഉദാഹരണത്തിന്റെ ഫലമായി "തലക്കെട്ട് 1"ഒപ്പം "തലക്കെട്ട് 3"ഓറഞ്ചും ആയിരിക്കും "തലക്കെട്ട് 2"- ചുവപ്പ്.

   ബ്രൗസർ സ്റ്റൈൽ ഷീറ്റ് വായിക്കുമ്പോൾ, അതിനനുസരിച്ച് ഡോക്യുമെന്റ് ഫോർമാറ്റ് ചെയ്യുന്നു.

   CSS ചേർക്കുന്നതിനുള്ള മൂന്ന് വഴികൾ

   ഒരു സ്റ്റൈൽ ഷീറ്റ് തിരുകാൻ മൂന്ന് വഴികളുണ്ട്:

   • ബാഹ്യ ശൈലി ഷീറ്റ്
   • ആന്തരിക ശൈലി ഷീറ്റ്
   • അന്തർനിർമ്മിത ശൈലി

   ബാഹ്യ സ്റ്റൈൽ ഷീറ്റ്

   നിരവധി പേജുകളിൽ ശൈലികൾ പ്രയോഗിക്കേണ്ടിവരുമ്പോൾ ഒരു ബാഹ്യ ശൈലി ഷീറ്റ് അനുയോജ്യമാണ്. ഒരു എക്‌സ്‌റ്റേണൽ സ്‌റ്റൈൽ ഷീറ്റ് ഉപയോഗിച്ച്, ഒരൊറ്റ ഫയൽ എഡിറ്റ് ചെയ്‌ത് മുഴുവൻ വെബ്‌സൈറ്റിന്റെയും രൂപം മാറ്റാനാകും. ഓരോ പേജും ടാഗ് ഉപയോഗിച്ച് സ്റ്റൈൽ ഷീറ്റിലേക്ക് ലിങ്ക് ചെയ്യണം . ടാഗ് ചെയ്യുക തല വിഭാഗത്തിൽ സ്ഥിതിചെയ്യുന്നു:

   പ്രോപ്പർട്ടി മൂല്യത്തിനും അതിന്റെ യൂണിറ്റുകൾക്കുമിടയിൽ ഇടങ്ങൾ ഇടരുത്! "margin-left:20 px" ("margin-left:20px" എന്നതിന് പകരം) IE-ൽ (ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ ബ്രൗസർ) പ്രവർത്തിക്കും, എന്നാൽ Firefox അല്ലെങ്കിൽ Opera ബ്രൗസറുകളിൽ പ്രവർത്തിക്കില്ല.

   ആന്തരിക ശൈലി ഷീറ്റ്

   ഒരു വ്യക്തിഗത പ്രമാണത്തിന് തനതായ ശൈലി ഉള്ളപ്പോൾ ഒരു ആന്തരിക ശൈലി ഷീറ്റ് ഉപയോഗിക്കുന്നു. ടാഗ് ഉപയോഗിച്ച് ഒരു HTML പേജിന്റെ ഹെഡ് സെക്ഷനിൽ നിങ്ങൾ ആന്തരിക ശൈലികൾ നിർവ്വചിക്കുന്നു

   HTML പേജ് കോഡ് ഇതുപോലെ കാണപ്പെടും:

   ബിൽറ്റ്-ഇൻ സ്റ്റൈലിംഗ്

   
   
   

   ഡെമോ കാണുക

   ബാഹ്യ ശൈലികൾ

   CSS ശൈലികൾ ഉൾപ്പെടുത്തുന്നതിനുള്ള ഏറ്റവും സാധാരണമായ മാർഗ്ഗങ്ങളിലൊന്നാണ് ബാഹ്യ ശൈലികൾ.

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

   ഒരു വെബ് പേജിലേക്ക് ബാഹ്യ ശൈലികൾ ചേർക്കുന്നതിന്, ടാഗ് ഉപയോഗിക്കുക href, rel="stylesheet" ആട്രിബ്യൂട്ടുകൾ വ്യക്തമാക്കുന്നു:

   ബിൽറ്റ്-ഇൻ സ്റ്റൈലിംഗ്

   മുഴുവൻ പേജിനുമുള്ള ശൈലികൾ ഒരേസമയം നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

   ഈ ഖണ്ഡിക ഒരു ക്ലാസ് ഉപയോഗിച്ചാണ് ഫോർമാറ്റ് ചെയ്തിരിക്കുന്നത്.

   
   
   

   ഇപ്പോൾ HTML ഫയലിൽ മൂലകങ്ങളുടെ സ്റ്റൈലിംഗിനെ സംബന്ധിച്ച് ഒരു വിവരവുമില്ല. ഒരു CSS ഫയൽ ഉൾപ്പെടുത്തുന്നതിലൂടെ, എല്ലാ ശൈലികളും പേജ് ലേഔട്ട് കോഡ് അലങ്കോലപ്പെടുത്തുന്നില്ല.

   ഡെമോ കാണുക

   ശൈലികൾ ഇറക്കുമതി ചെയ്യുന്നു

   ബാഹ്യ സ്റ്റൈൽ ഷീറ്റുകൾ ഇമ്പോർട്ടുചെയ്യാൻ നിങ്ങൾക്ക് @ഇറക്കുമതി CSS റൂൾ ഉപയോഗിക്കാം. ഇത് ചെയ്യുന്നതിന്, ടാഗ് ഉപയോഗിക്കുക

   ഇത് മുമ്പത്തെ ഉദാഹരണങ്ങളുടെ അതേ ശൈലികൾ ഉപയോഗിക്കുന്നു, എന്നാൽ @import ഉപയോഗിച്ച് ഇറക്കുമതി ചെയ്തതാണ്:

   ബിൽറ്റ്-ഇൻ സ്റ്റൈലിംഗ്

   മുഴുവൻ പേജിനുമുള്ള ശൈലികൾ ഒരേസമയം നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

   ഈ ഖണ്ഡിക ഒരു ക്ലാസ് ഉപയോഗിച്ചാണ് ഫോർമാറ്റ് ചെയ്തിരിക്കുന്നത്.

   
   
   

   ഡെമോ കാണുക

   CSS ഫോണ്ടുകൾ ബന്ധിപ്പിക്കുന്ന ഈ രീതി സൈറ്റിന്റെ പ്രകടനത്തെ പ്രതികൂലമായി ബാധിച്ചേക്കാം, അതിനാൽ ഇത് ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നു .

   എന്നിരുന്നാലും, പ്രകടനത്തെ ബാധിക്കാതെ ഒരു CSS കോഡ് മറ്റൊന്നിനുള്ളിൽ ഇൻലൈൻ ചെയ്യുന്നതിന് ഏറ്റവും പുറത്തുള്ള സ്റ്റൈൽഷീറ്റ് ഫയലിനുള്ളിൽ @import റൂൾ ഉപയോഗിക്കാം.

   ഏത് രീതികളാണ് ഉപയോഗിക്കേണ്ടത് എന്നതിനെക്കുറിച്ച് കർശനവും വേഗത്തിലുള്ളതുമായ നിയമങ്ങളൊന്നുമില്ല. നിർദ്ദിഷ്ട സാഹചര്യത്തിൽ നിന്ന് മുന്നോട്ട് പോകുന്നതും സ്റ്റൈലിംഗ് ഘടകങ്ങൾക്ക് ഏറ്റവും അനുയോജ്യമായ രീതികൾ തിരഞ്ഞെടുക്കുന്നതും നല്ലതാണ്.

   "ഒരു വെബ്‌പേജിലേക്ക് CSS എങ്ങനെ ചേർക്കാം" എന്ന ലേഖനത്തിന്റെ വിവർത്തനം തയ്യാറാക്കിയത് സൗഹൃദ പ്രോജക്റ്റ് ടീമാണ്.

   
   
   ആട്രിബ്യൂട്ട് http-equiv="Content-Style-Type"ഈ ഘടകം സൂചിപ്പിക്കുന്നു മെറ്റാസ്റ്റൈൽ ഷീറ്റിനെയും ആട്രിബ്യൂട്ടിനെയും സൂചിപ്പിക്കുന്നു ഉള്ളടക്കം="ടെക്സ്റ്റ്/സിഎസ്എസ്"ശൈലി ഷീറ്റുകൾ ഭാഷയിൽ എഴുതുമെന്ന് സൂചിപ്പിക്കുന്നു സി.എസ്.എസ്. ഒരു HTML ഡോക്യുമെന്റിലേക്ക് ശൈലികൾ ചേർക്കുന്നത് എങ്ങനെയെന്ന് മനസിലാക്കാൻ, HTML പഠിക്കുന്ന പ്രക്രിയയിൽ ഞങ്ങൾ സൃഷ്ടിച്ച ആദ്യത്തെ പ്രമാണത്തിന്റെ ഉദാഹരണത്തിലേക്ക് മടങ്ങാം. "ഡോം" എന്ന നിർമ്മാണ കമ്പനിയുടെ വിവരണമുള്ള ഒരു പേജായിരുന്നു ഇത് എന്ന് ഞാൻ നിങ്ങളെ ഓർമ്മിപ്പിക്കട്ടെ. അവൾ ഇതുപോലെ കാണപ്പെട്ടു:

   തലക്കെട്ടിന്റെ നിറം നിലവിലെ കറുപ്പിൽ നിന്ന് പച്ചയിലേക്ക് മാറ്റാൻ ഞങ്ങൾ ആഗ്രഹിച്ചുവെന്ന് പറയാം. അപ്പോൾ നമുക്ക് ഒരു അധിക ആട്രിബ്യൂട്ട് എഴുതാം, അത് ഡിസൈൻ ശൈലി നേരിട്ട് മൂലകത്തിൽ സജ്ജമാക്കുന്നു H1:

   
   

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

   ആന്തരിക ശൈലി ഷീറ്റുകൾ

   ഒരു ഘടകത്തിനുള്ളിൽ നിർവചിച്ചിരിക്കുന്ന സ്റ്റൈൽ ഷീറ്റ് HTMLആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു ശൈലി, വിളിച്ചു ആന്തരികം.

   
   

   ആന്തരിക സ്റ്റൈൽ ഷീറ്റുകളുടെ പോരായ്മ അവയാണ് സാർവത്രികമല്ലാത്തത്. ഉപയോഗത്തിന്റെ ഫലമായി ശൈലി ആട്രിബ്യൂട്ട്പ്രമാണത്തിലെ ഒരു തലക്കെട്ട് മാത്രം പച്ചയായി മാറും. ബാക്കിയുള്ളവർക്കായി നിങ്ങൾ കൃത്യമായി ചോദിക്കേണ്ടിവരും ശൈലി ആട്രിബ്യൂട്ട്അല്ലെങ്കിൽ നിങ്ങൾ ഒരു ട്രിപ്പിൾ സ്റ്റൈൽ ഷീറ്റ് സൃഷ്ടിക്കണം.

   ബിൽറ്റ്-ഇൻ സ്റ്റൈൽ ഷീറ്റുകൾ

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

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

   നിങ്ങൾക്ക് ഒരു ആട്രിബ്യൂട്ട് മൂല്യമായി ഒരു മാർക്ക്അപ്പ് ഘടകത്തിലേക്ക് നേരിട്ട് CSS കോഡ് ഉൾച്ചേർക്കാനാകും ശൈലി. ഈ ആട്രിബ്യൂട്ട് എല്ലാ HTML ഘടകങ്ങൾക്കും ലഭ്യമാണ്. CSS ഉപയോഗിച്ച്, നൽകിയിരിക്കുന്ന HTML ഘടകത്തിനായി നിങ്ങൾക്ക് നിരവധി സ്റ്റൈലിംഗ് പ്രോപ്പർട്ടികൾ വ്യക്തമാക്കാൻ കഴിയും. ഓരോ വസ്തുവിനും ഒരു പേരും മൂല്യവും ഉണ്ട്, ഒരു കോളൻ കൊണ്ട് വേർതിരിച്ചിരിക്കുന്നു (:). ഓരോ പ്രഖ്യാപിത സ്വത്തും ഒരു അർദ്ധവിരാമം (;) കൊണ്ട് വേർതിരിച്ചിരിക്കുന്നു.

   ഒരു മൂലകത്തിന് ഇത് ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്

   :

   CSS ശൈലികൾ ചേർക്കുന്നതിനുള്ള വഴികൾ

   ഒരു വെബ് പേജിലേക്ക് ഒരു സ്റ്റൈൽ ഷീറ്റ് പ്രയോഗിക്കുന്നതിന് CSS സ്റ്റാൻഡേർഡ് മൂന്ന് ഓപ്ഷനുകൾ വാഗ്ദാനം ചെയ്യുന്നു:

   • ബാഹ്യ ശൈലി ഷീറ്റ് - ഒരു പ്രത്യേക .css ഫയലിൽ സ്റ്റൈൽ ഷീറ്റ് നിയമങ്ങൾ നിർവചിക്കുന്നു, തുടർന്ന് ഒരു ടാഗ് ഉപയോഗിച്ച് HTML പ്രമാണത്തിൽ ഈ ഫയൽ ഉൾപ്പെടുത്തുക
   • ഇന്റേണൽ സ്റ്റൈൽ ഷീറ്റ് - ഒരു ടാഗ് ഉപയോഗിച്ച് സ്റ്റൈൽ ഷീറ്റ് നിയമങ്ങൾ നിർവചിക്കുക

     ഉദാഹരണം: ഇന്റേണൽ സ്റ്റൈൽ ഷീറ്റ്

     • സ്വയം പരീക്ഷിച്ചു നോക്കൂ"

     തലക്കെട്ട്

     ആദ്യം ടെക്സ്റ്റ് ചെയ്യുക

     വാചകം രണ്ട്

     ടെക്സ്റ്റ് മൂന്ന്

     തലക്കെട്ട്

     ആദ്യം ടെക്സ്റ്റ് ചെയ്യുക

     വാചകം രണ്ട്

     ടെക്സ്റ്റ് മൂന്ന്

     
     
     

     ഈ ഉദാഹരണത്തിൽ, ഞങ്ങൾ CSS ഉപയോഗിച്ച് മൂലകത്തിന്റെ പശ്ചാത്തല നിറം സജ്ജമാക്കുന്നു : പശ്ചാത്തല നിറം:പല പച്ച, തലക്കെട്ടുകൾക്കുള്ള നിറവും ഫോണ്ട് തരവും

     : നിറം:നീല; font-family:verdana, അതുപോലെ ഖണ്ഡികകൾക്കുള്ള ഫോണ്ട് വലുപ്പം, നിറം, മധ്യഭാഗത്തുള്ള വാചക വിന്യാസം

     : ഫോണ്ട് വലുപ്പം: 20px; നിറം:ചുവപ്പ്; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ.

     അന്തർനിർമ്മിത ശൈലി

     നിങ്ങൾക്ക് ഒരു HTML പേജിന്റെ ഒരൊറ്റ ഘടകം ഫോർമാറ്റ് ചെയ്യേണ്ടിവരുമ്പോൾ, ഇതിനകം പ്രത്യേക ശൈലിയിലുള്ള ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് സ്റ്റൈൽ വിവരണം ഓപ്പണിംഗ് ടാഗിനുള്ളിൽ നേരിട്ട് സ്ഥാപിക്കാവുന്നതാണ്. ഉദാഹരണത്തിന്:

     ഖണ്ഡിക

     അത്തരം ശൈലികളെ ബിൽറ്റ്-ഇൻ (ഇൻലൈൻ), അല്ലെങ്കിൽ എംബഡഡ് എന്ന് വിളിക്കുന്നു. ഒരു എലമെന്റിന്റെ ഓപ്പണിംഗ് ടാഗിനുള്ളിൽ നേരിട്ട് നിർവചിച്ചിരിക്കുന്ന നിയമങ്ങൾ ബാഹ്യ CSS ഫയലിൽ നിർവചിച്ചിരിക്കുന്ന നിയമങ്ങളെ അസാധുവാക്കുന്നു, അതുപോലെ തന്നെ ഘടകത്തിനുള്ളിൽ നിർവചിച്ചിരിക്കുന്ന നിയമങ്ങളും

     തലക്കെട്ട്

     ആദ്യം ടെക്സ്റ്റ് ചെയ്യുക

     വാചകം രണ്ട്

     ടെക്സ്റ്റ് മൂന്ന്

     
     
     

     ചുമതലകൾ

     • മധ്യഭാഗത്ത് ടെക്സ്റ്റ് വിന്യാസം

       ഇൻലൈൻ പാരഗ്രാഫ് ശൈലി ഉപയോഗിച്ച്, വാചകത്തിന്റെ മധ്യഭാഗം.