അഭിനന്ദനങ്ങൾ! നിങ്ങളുടെ ഫയൽ തയ്യാറാണ്. ഇത് ഇപ്പോൾ ശൂന്യമാണ്, എന്നാൽ പിന്നീട് അത് പ്രസക്തമായ ഉള്ളടക്കം കൊണ്ട് പൂരിപ്പിക്കാം. ചുവടെ ഞങ്ങൾ അടിസ്ഥാനകാര്യങ്ങൾ നോക്കും - css ബന്ധിപ്പിക്കുന്നതിനുള്ള വഴികൾ.
ബാഹ്യ ശൈലി ഷീറ്റുകൾ
ഒരുപക്ഷേ ബാഹ്യമായ സി.എസ്.എസ്- ഇതാണ് ഏറ്റവും ശരിയും ഒപ്റ്റിമൽ പരിഹാരംസൈറ്റിനായി. പേജിൽ മാത്രം സൂചിപ്പിച്ചാൽ മതി ലിങ്ക് ടാഗ്(മറ്റ് ഫയലുകൾ ഉൾപ്പെടുത്തുന്നതിനായി സൃഷ്ടിച്ചത്) സ്റ്റൈൽ ഷീറ്റിലേക്കുള്ള ഒരു ലിങ്കും ശൈലികളും ബന്ധിപ്പിച്ചിരിക്കുന്നു!
ശ്രദ്ധ
ഈ ഫയലിൻ്റെ അതേ ഡയറക്‌ടറിയിലാണ് (ഫോൾഡർ) style.css എന്ന് ലിങ്ക് ടാഗുള്ള ലൈൻ അനുമാനിക്കുന്നു.
നമ്മുടെ ഫയലിൻ്റെ അതേ ഡയറക്ടറിയിൽ (ഫോൾഡറിൽ) style.css ഉണ്ടെന്ന് ലിങ്ക് ടാഗുള്ള ലൈൻ അനുമാനിക്കുന്നു (ഉദാഹരണത്തിന്, index.html). css ഫയലിൻ്റെ സ്ഥാനം മാറിയിട്ടുണ്ടെങ്കിൽ, അതിനനുസരിച്ച് href ആട്രിബ്യൂട്ട് പരിഷ്കരിക്കണം. ഉദാഹരണത്തിന്, സൃഷ്ടിക്കാൻ CSS ഉപയോഗിക്കുന്നത് പലപ്പോഴും സംഭവിക്കുന്നു പ്രത്യേക ഫോൾഡർ(അത് സൗകര്യപ്രദവും യുക്തിസഹവുമാണ്). എന്നാൽ href ആട്രിബ്യൂട്ട് വ്യത്യസ്തമായി കാണപ്പെടും:
ആന്തരിക ശൈലി ഷീറ്റുകൾ
ചിലപ്പോൾ നിങ്ങൾക്ക് മറ്റൊരു css നിർമ്മാണം കാണാൻ കഴിയും, അത് നേരിട്ട് ചേർത്തിരിക്കുന്നു html ടാഗ്
വാചകം നീല നിറം, വലിപ്പം 14 പിക്സലുകൾ
ഒരേ ഫയലിൽ നിങ്ങൾക്ക് ഉടനടി ശൈലികൾ സജ്ജമാക്കാൻ കഴിയും എന്നതാണ് നേട്ടം. നിർദ്ദിഷ്ട പ്രോപ്പർട്ടികൾ മാത്രമേ അസൈൻ ചെയ്യപ്പെടുകയുള്ളൂ എന്നതാണ് ഒരു പ്രധാന പോരായ്മ പ്രത്യേക ഘടകം, വി ഈ സാഹചര്യത്തിൽഖണ്ഡിക. അങ്ങനെ എല്ലാ ആനുകൂല്യങ്ങളും വിദൂര കണക്ഷൻസ്വത്തുക്കൾ നഷ്ടപ്പെടുന്നു.
ബിൽറ്റ്-ഇൻ സ്റ്റൈൽ ഷീറ്റുകൾ
ഒരു എളുപ്പവഴിയുണ്ട് CSS ഉൾപ്പെടുത്തലുകൾ. നിങ്ങൾക്ക് ഒരു പ്രത്യേക CSS ഫയൽ സൃഷ്ടിക്കാൻ താൽപ്പര്യമില്ലെങ്കിൽ, എന്നാൽ കുറച്ച് പ്രോപ്പർട്ടികൾ മാത്രം ഉപയോഗിക്കണമെങ്കിൽ, ഈ ഓപ്ഷൻ അനുയോജ്യമാണ്. ഒരു ഉദാഹരണം ഉപയോഗിച്ച് നമുക്ക് ഉടൻ ആരംഭിക്കാം
ആദ്യ തല തലക്കെട്ട്
രണ്ടാം ലെവൽ ഹെഡർ, നീല
മൂന്നാം ലെവൽ തലക്കെട്ട്
സമാപനത്തിന് തൊട്ടുമുമ്പ് ഞങ്ങൾ ശൈലികൾ എഴുതിയതായി ഉദാഹരണത്തിൽ നിന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയും തല ടാഗ് ഓപ്പണിംഗ്, ക്ലോസിംഗ് ടാഗുകൾക്കുള്ളിൽ ശൈലി. യഥാർത്ഥത്തിൽ ടാഗ് ചെയ്യുക ശൈലിഎന്നതിലും എഴുതാവുന്നതാണ് ശരീരം, എന്നാൽ നിങ്ങളുടെ പോസ്റ്റുകൾ ഘടനാപരമായതായി കാണപ്പെടണമെങ്കിൽ, നിങ്ങൾക്ക് ശേഷം ഈ കോഡ് കാണുന്ന വ്യക്തി തൻ്റെ തലയിൽ പിടിക്കാതിരിക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ശൈലികൾ ഒരിടത്ത് എഴുതുന്നതാണ് നല്ലത്.
ബിൽറ്റ്-ഇൻ സ്റ്റൈൽ ഷീറ്റിൻ്റെ പോരായ്മയും വ്യക്തമാണ് - അത്തരം എൻട്രികൾ ഓരോ പേജിനും പ്രത്യേകം നൽകേണ്ടതുണ്ട്.
"കണക്റ്റിംഗ് CSS" പരമ്പരയിലെ മൂന്നാമത്തെ ലേഖനം സമർപ്പിക്കുന്നു ബാഹ്യ ശൈലി ഷീറ്റുകൾ. ബാഹ്യ പട്ടികകൾ ഉപയോഗിക്കുന്നത് ഏറ്റവും വഴക്കമുള്ളതും ശക്തവും സൗകര്യപ്രദവുമാണ് ശരിയായ വഴി HTML എന്നിവയും .
CSS ഒരു പ്രത്യേക ഫയലിൽ (അല്ലെങ്കിൽ ഫയലുകൾ) സ്ഥാപിച്ചിരിക്കുന്നു എന്നതാണ് രീതിയുടെ സാരാംശം. കൂടാതെ ഏതൊക്കെ CSS ഫയലുകളാണ് അതിൽ പ്രയോഗിക്കേണ്ടതെന്ന് HTML വ്യക്തമാക്കുന്നു.
ഒരു ബാഹ്യ പട്ടിക അവതരിപ്പിക്കുന്നു
ഒരു എക്സ്റ്റേണൽ സ്റ്റൈൽ ഷീറ്റ് ഒരു css എക്സ്റ്റൻഷനുള്ള ഒരു സാധാരണ ടെക്സ്റ്റ് ഫയലാണ്. പൊതുവായി പറഞ്ഞാൽ, ഈ വിപുലീകരണം ആവശ്യമില്ല, എന്നാൽ ചില പഴയ ബ്രൗസറുകളിലെ പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ ഇത് വളരെ ശുപാർശ ചെയ്യുന്നു.
സ്റ്റൈൽ ഷീറ്റ് ഫയലിൽ നിയമങ്ങളും മാത്രം അടങ്ങിയിരിക്കണം CSS അഭിപ്രായങ്ങൾ. ഒരു ബാഹ്യ സ്റ്റൈൽ ഷീറ്റിലെ HTML മാർക്ക്അപ്പ് സാന്നിദ്ധ്യം, ഉദാഹരണത്തിന്, ചില ഭാഗങ്ങൾ അല്ലെങ്കിൽ മുഴുവൻ സ്റ്റൈൽ ഷീറ്റും അവഗണിക്കപ്പെടാൻ ഇടയാക്കും.
ബാഹ്യ ശൈലി ഷീറ്റുകൾക്കുള്ള ലിങ്ക് ടാഗ്
ബാഹ്യ CSS ഉൾപ്പെടുത്താൻ ടാഗ് ഉപയോഗിക്കുന്നു.
ലിങ്ക് ടാഗ് കാണുക:
- ബാഹ്യ രേഖകളുമായി ഒരു ബന്ധം സ്ഥാപിക്കുന്നു, മിക്കപ്പോഴും സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിച്ച്;
- വിഭാഗത്തിൽ സ്ഥിതിചെയ്യണം;
- ഒരു പ്രമാണത്തിൽ നിരവധി ലിങ്ക് ടാഗുകൾ ഉണ്ടാകാം.
CSS കണക്ഷൻ്റെ ഉദാഹരണങ്ങൾ
സാധാരണയായി, മൂന്ന് ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നു:
- - ബന്ധം സ്ഥാപിക്കുന്നതിന് ഉത്തരവാദിയാണ്, ഈ സാഹചര്യത്തിൽ "സ്റ്റൈൽഷീറ്റ്" എന്ന അർത്ഥമുണ്ട്;
- - ബന്ധിപ്പിച്ച ഒബ്ജക്റ്റിൻ്റെ MIME തരം. ഞങ്ങളെ സംബന്ധിച്ചിടത്തോളം ഇതൊരു സ്റ്റൈൽ ഷീറ്റാണ് - അതിനർത്ഥം "ടെക്സ്റ്റ്/сss" എന്നാണ്;
- - സമ്പൂർണ്ണ അല്ലെങ്കിൽ ആപേക്ഷിക പാത CSS ഫയലിലേക്ക് തന്നെ.
ഡിസ്പ്ലേ ഉപകരണത്തെ ആശ്രയിച്ച് വ്യക്തിഗത CSS കണക്റ്റുചെയ്യുന്നതും സാധ്യമാണ്. മീഡിയ ആട്രിബ്യൂട്ടാണ് ഇതിനായി ഉപയോഗിക്കുന്നത്. അതിൻ്റെ അർത്ഥങ്ങളെക്കുറിച്ചുള്ള കൂടുതൽ വിശദാംശങ്ങൾ ഇതിൽ കാണാം.
കണക്ഷൻ ഉദാഹരണം അധിക പട്ടികപ്രിൻ്റിംഗ് ഉപകരണങ്ങൾക്കുള്ള ശൈലികൾ:
ഉദാഹരണം CSS കണക്ഷനുകൾഉപയോഗിക്കുന്നത് (IE6 എന്ന് തിരിച്ചറിയപ്പെടുന്ന ഒരു ബ്രൗസർ ഉപയോഗിച്ചാണ് പേജ് കാണുന്നതെങ്കിൽ മാത്രമേ ie6.css ഉൾപ്പെടുത്തൂ):
ബാഹ്യ CSS ൻ്റെ പ്രയോജനങ്ങൾ
എല്ലാ നിയമങ്ങളും വ്യക്തമായി ഗ്രൂപ്പുചെയ്‌തിരിക്കുന്നു എന്നതിന് പുറമേ പ്രത്യേക ഫയൽഅവ കണ്ടെത്താൻ എളുപ്പമാണ്, ആവശ്യമെങ്കിൽ, എഡിറ്റ് ചെയ്യുക, ബാഹ്യ പട്ടികകൾക്ക് എന്നതുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ നിരവധി സുപ്രധാന ഗുണങ്ങളുണ്ട്. ഉദാഹരണത്തിന്:
- ഒരേ CSS ഫയലിന് നിങ്ങൾക്ക് ഇഷ്ടമുള്ളത്രയും HTML പേജുകൾ "സേവ്" ചെയ്യാൻ കഴിയും. HTML-ൻ്റെ അളവ് കുറയും, സൈറ്റിൻ്റെ എല്ലാ പേജുകൾക്കും പൊതുവായ മാറ്റങ്ങൾ വരുത്തുന്നത് വളരെ എളുപ്പമായിരിക്കും.
- നിങ്ങൾക്ക് നിയമങ്ങളെ ലോജിക്കൽ ബ്ലോക്കുകളായി (പൊതു ശൈലികൾ, സൈറ്റിൻ്റെ പ്രത്യേക വിഭാഗങ്ങൾക്കുള്ള ശൈലികൾ) വിഭജിക്കാം, അവ വിവിധ CSS ഫയലുകളിൽ ക്രമീകരിക്കാം. വ്യക്തിഗത പേജുകൾ, നിങ്ങൾക്ക് ആവശ്യമുള്ളവരെ മാത്രം ബന്ധിപ്പിക്കുക. ഇത് ഇരുതല മൂർച്ചയുള്ള വാളാണെന്ന് ഓർമ്മിക്കുക - ഒരു വശത്ത് നമുക്ക് ലഭിക്കും ചെറിയ വലിപ്പംബന്ധിപ്പിച്ച CSS ( അനാവശ്യ ഫയലുകൾശൈലികൾ ലോഡ് ചെയ്തിട്ടില്ല), നേരെമറിച്ച്, സ്റ്റൈലുകളുള്ള കൂടുതൽ ചെറിയ ഫയലുകൾ സെർവറിലേക്ക് കൂടുതൽ കോളുകൾ എന്നാണ് അർത്ഥമാക്കുന്നത്, ഇത് തീർച്ചയായും പ്രകടനത്തിൽ നല്ല സ്വാധീനം ചെലുത്തില്ല.
- പ്രത്യേക ബ്രൗസറുകൾക്കായി നിങ്ങൾക്ക് ശൈലികൾ തിരഞ്ഞെടുത്ത് അവ ഉപയോഗിച്ച് കണക്റ്റുചെയ്യാനാകും സോപാധിക അഭിപ്രായങ്ങൾ. പ്രത്യേകിച്ച് ശാഠ്യമുള്ള ബ്രൗസറുകളെ മെരുക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. ശരിയാണ്, സോപാധിക അഭിപ്രായങ്ങൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു നെസ്റ്റഡ് ടേബിളും ബന്ധിപ്പിക്കാൻ കഴിയും, എന്നാൽ അത്തരമൊരു ഡിസൈൻ ശരിക്കും ബുദ്ധിമുട്ടുള്ളതായി കാണപ്പെടും.
സംഗ്രഹം
എക്സ്റ്റേണൽ സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിക്കുന്നത് HTML, CSS എന്നിവയെ ബന്ധിപ്പിക്കുന്നതിനുള്ള ഏറ്റവും സൗകര്യപ്രദവും മികച്ചതുമായ മാർഗമാണ്. നിഗമനം വ്യക്തമാണെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു. യഥാർത്ഥ പദ്ധതികളിൽ, ബാഹ്യ ശൈലി ഷീറ്റുകൾ ഉപയോഗിക്കുക.
ഞങ്ങളുടെ കോഴ്‌സിൽ ഞങ്ങൾ CSS പാഠങ്ങൾ ഉൾക്കൊള്ളും - അതായത്. സാങ്കേതികവിദ്യയെക്കുറിച്ചുള്ള പാഠങ്ങൾ, വെബ് പേജ് ലേഔട്ടിലെ ഏറ്റവും പ്രധാനപ്പെട്ട ഒന്നാണ്.
ഈ പാഠത്തിൽ, ഞങ്ങളുടെ വെബ് പേജ് കൂടുതൽ വർണ്ണാഭമായ രീതിയിൽ രൂപപ്പെടുത്തും (ചിത്രം 1).
ചിത്രം 1
പേജ് ഡിസൈനിലേക്ക് പോകുന്നതിന് മുമ്പ്, വെബിൽ നിറം എങ്ങനെ സജ്ജീകരിച്ചിരിക്കുന്നു എന്ന് പഠിക്കാം.
1. നിറങ്ങളുടെ നിർവ്വചനം. CSS പാഠങ്ങൾ
ഒരു HTML പ്രമാണത്തിന് നിറങ്ങൾ നിർവചിക്കുമ്പോൾ, നിങ്ങൾക്ക് നിറങ്ങളുടെ പേരുകൾ അല്ലെങ്കിൽ അവയുടെ പേരുകൾ ഉപയോഗിക്കാം ഹെക്സാഡെസിമൽ കോഡുകൾ. ഹെക്സാഡെസിമൽ കോഡിംഗ് സിസ്റ്റം മൂന്ന് ഘടകങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ് - ചുവപ്പ് (ചുവപ്പ്), പച്ച (പച്ച), നീല (നീല), അതിനാൽ ഈ നിറങ്ങളുടെ പേരുകളുടെ ആദ്യ അക്ഷരങ്ങൾക്ക് ശേഷം അതിൻ്റെ പേര് RGB എന്നാണ്. ഓരോ ഘടകങ്ങളും യോജിക്കുന്നു ഹെക്സാഡെസിമൽ നമ്പർ 00 മുതൽ FF വരെ (0, 255 V ദശാംശ വ്യവസ്ഥകണക്കുകൂട്ടൽ). ഈ മൂന്ന് മൂല്യങ്ങളും പർപ്പിൾ നിറവുമായി പൊരുത്തപ്പെടുന്ന #800080 പോലെയുള്ള #-ന് മുമ്പുള്ള ഒരൊറ്റ മൂല്യത്തിലേക്ക് സംയോജിപ്പിക്കുന്നു.
ചില നിറങ്ങളുടെ പേരുകളും അവയുടെ കോഡുകളും പട്ടിക കാണിക്കുന്നു. കൂടുതൽ മുഴുവൻ പട്ടികകൾനിറങ്ങളും അവയുടെ കോഡുകളും ഫോൾഡറിൽ കാണാൻ കഴിയും നിറങ്ങൾഫോൾഡറിൽ സ്ഥിതിചെയ്യുന്നു സി.ഡി.
|
നിറം |
നിറം |
||
|
കറുപ്പ് |
വെള്ളി |
||
|
മെറൂൺ (ഇരുണ്ട ബർഗണ്ടി) |
ചുവപ്പ് |
||
|
പച്ച |
നാരങ്ങ (നാരങ്ങ) |
||
|
ഒലിവ് |
മഞ്ഞ |
||
|
നേവി (കടും നീല) |
നീല |
||
|
പർപ്പിൾ |
ഫ്യൂച്ചിയ (ഫ്യൂഷിയ) |
||
|
ടീൽ (കടും പച്ച) |
|||
|
ചാരനിറം |
വെള്ള |
മേശ സുരക്ഷിതമായ നിറങ്ങൾവെബ്സൈറ്റ് ഡിസൈൻ വികസനത്തിന്
സുരക്ഷിതമായ വർണ്ണ പാലറ്റ് വ്യത്യസ്ത മോണിറ്ററുകളിലുടനീളം ഏറ്റവും കൃത്യമായ ഡിസ്പ്ലേ ഉറപ്പാക്കുന്നു.
സുരക്ഷിത പാലറ്റിൽ 216 നിറങ്ങൾ അടങ്ങിയിരിക്കുന്നു. സുരക്ഷിതമായ നിറങ്ങൾഎല്ലായ്‌പ്പോഴും ഒരു ബ്രൗസറിൽ നിന്ന് മറ്റൊന്നിലേക്കോ ഒരു പ്ലാറ്റ്‌ഫോമിൽ നിന്ന് മറ്റൊന്നിലേക്കോ, ഒരു മോണിറ്ററിൽ നിന്ന് മറ്റൊന്നിലേക്ക് അവയുടെ വ്യത്യസ്ത വർണ്ണ ഡിസ്പ്ലേ കഴിവുകളും റെസല്യൂഷനുകളും കൊണ്ട് മാറ്റമില്ല.
മൂന്നിൽ ഏതെങ്കിലും ഉണ്ടെങ്കിൽ ഹെക്സാഡെസിമൽ മൂല്യങ്ങൾ 00, 33, 66, 99, SS അല്ലെങ്കിൽ FF എന്നിവയിൽ നിന്ന് വ്യത്യസ്തമാണ്, അപ്പോൾ നിറം സുരക്ഷിതമല്ല.
സുരക്ഷിതമായ നിറങ്ങളുടെ പട്ടിക ഫോൾഡറിൽ കാണാൻ കഴിയും സി.ഡി/ നിറങ്ങൾ.
2. CSS നിർവ്വചനം
ഞങ്ങളുടെ വെബ് പേജിന് ഇതുവരെ ഒരു ഡിസൈൻ ഇല്ല, അത് രണ്ട് തരത്തിൽ ചെയ്യാം:
- ആദ്യം - വഴി സ്റ്റൈൽ ഷീറ്റുകൾ സി.എസ്.എസ് (കൂടുതൽ പുരോഗമനപരവും ശരിയായതുമായ രീതി),
- രണ്ടാമത്തേത് - വഴി ടാഗ് ആട്രിബ്യൂട്ടുകൾ HTML .
കൂടുതൽ പുരോഗമനപരമായ രീതി ഉപയോഗിച്ച് നമുക്ക് ഉടൻ ആരംഭിക്കാം.
CSS - കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ(ശ്രേണീകൃത ശൈലി സ്പെസിഫിക്കേഷനുകൾ അല്ലെങ്കിൽ കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ) മാർക്ക്അപ്പ് ഭാഷയെ മാറ്റിസ്ഥാപിക്കുന്നില്ല, അവ HTML ടാഗിൽ പ്രയോഗിക്കുന്ന ഒരു സ്വതന്ത്ര സാങ്കേതികവിദ്യയാണ്.
ഉദ്ദേശം: സ്വയമേവ മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു HTML ശൈലിസൈറ്റിൻ്റെ എല്ലാ പേജുകളിലെയും ഘടകം. ഉദാഹരണത്തിന്, പത്ത് വെബ് പേജുകളിൽ ഞങ്ങൾ ഒരു H1 ഹെഡർ ഉപയോഗിക്കുന്നു, അത് പച്ചയായിരിക്കണം. സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിക്കുമ്പോൾ, പച്ച നിറം ഒരിക്കൽ മാത്രം വ്യക്തമാക്കിയാൽ മതി, അത് ഒരേസമയം പത്ത് പേജുകളിൽ പ്രയോഗിക്കും.
വിപരീത സാഹചര്യം: ഞങ്ങൾ ഉപയോഗിക്കുന്നു HTML ആട്രിബ്യൂട്ടുകൾപത്ത് വെബ് പേജുകളിലെ എല്ലാ H1 തലക്കെട്ടുകളും പച്ചയായി സജ്ജീകരിക്കുക, അതായത്. അതു പത്തു പ്രാവശ്യം കല്പിച്ചു. അപ്പോൾ ഞങ്ങൾ തലക്കെട്ട് നിറം ചുവപ്പാക്കി മാറ്റാൻ തീരുമാനിച്ചു, തുടർന്ന് പച്ച നിറം ചുവപ്പ് എന്ന് പത്ത് തവണ തിരുത്തണം.
സ്റ്റൈൽ ഷീറ്റ് ഉപയോഗിക്കുമ്പോൾ, സ്റ്റൈൽ ഷീറ്റിൽ തന്നെ ഹെഡർ കളർ പച്ചയിൽ നിന്ന് ചുവപ്പിലേക്ക് മാറ്റുന്നത് ഒരിക്കൽ മാത്രം ചെയ്താൽ മതി, പത്ത് വെബ് പേജുകളിലും ഇത് സ്വയമേവ മാറും.
ഒരു HTML ഘടകത്തിൻ്റെ ഘടനയിൽ നിന്ന് വ്യത്യസ്തമായ ഘടനയുള്ള CSS ഘടകങ്ങളുടെ ഒരു കൂട്ടം സ്റ്റൈൽ ഷീറ്റിൽ ഉൾപ്പെടുന്നു.
വാക്യഘടനസി.എസ്.എസ്- ഘടകം
സെലക്ടർ (പ്രോപ്പർട്ടി 1: മൂല്യം; പ്രോപ്പർട്ടി 2: മൂല്യം; ... പ്രോപ്പർട്ടി N: മൂല്യം)
സെലക്ടർ നാമം ആദ്യം എഴുതിയിരിക്കുന്നു, ഉദാഹരണത്തിന്, h1, എല്ലാ സ്റ്റൈൽ പ്രോപ്പർട്ടികളും ടാഗിൽ പ്രയോഗിക്കും എന്നാണ് ഇതിനർത്ഥം
, തുടർന്ന് സ്റ്റൈൽ പ്രോപ്പർട്ടി എഴുതിയ ചുരുണ്ട ബ്രേസുകൾ ഉണ്ട്, കോളണിന് ശേഷം അതിൻ്റെ മൂല്യം സൂചിപ്പിക്കും. മൂല്യങ്ങളുള്ള സ്റ്റൈൽ പ്രോപ്പർട്ടികൾ ഒരു അർദ്ധവിരാമം കൊണ്ട് വേർതിരിച്ചിരിക്കുന്നു; ഈ ചിഹ്നം അവസാനം ഒഴിവാക്കാവുന്നതാണ്.
നിങ്ങൾക്ക് ഇഷ്ടമുള്ളത്ര മൂല്യങ്ങളുള്ള നിരവധി ശൈലി പ്രോപ്പർട്ടികൾ ഉണ്ടാകാം; അവയുടെ ക്രമം പ്രശ്നമല്ല.
CSS കേസ് സെൻസിറ്റീവ് അല്ല, ലൈൻ ബ്രേക്കുകൾ, സ്‌പെയ്‌സുകൾ അല്ലെങ്കിൽ ടാബ് പ്രതീകങ്ങൾ, അതിനാൽ, റെക്കോർഡിംഗിൻ്റെ രൂപം ഡവലപ്പറുടെ ആഗ്രഹത്തെ ആശ്രയിച്ചിരിക്കുന്നു.
ഉദാഹരണത്തിന്:
h1 (font-family:Arial; font-size:14pt)
അല്ലെങ്കിൽ ഇത് ഇതുപോലെ എഴുതാം:
font-family:Arial;
ഫോണ്ട് വലുപ്പം:14pt
ഈ ഉദാഹരണത്തിൽ:
- h1 - സെലക്ടർ, ഈ സാഹചര്യത്തിൽ ഒരു HTML ഘടകം,
- ഫോണ്ട് ഫാമിലി, ഫോണ്ട് സൈസ് - സ്റ്റൈൽ പ്രോപ്പർട്ടികൾ,
- ഏരിയൽ - ഫോണ്ട് ഫാമിലി പ്രോപ്പർട്ടി മൂല്യം,
- 14pt എന്നത് ഫോണ്ട്-സൈസ് പ്രോപ്പർട്ടിയുടെ മൂല്യമാണ്.
ഒരു HTML ഡോക്യുമെൻ്റിൽ സ്റ്റൈൽ ഷീറ്റുകൾ ഉൾപ്പെടുത്താനുള്ള വഴികൾ
- ബാഹ്യ ശൈലി ഷീറ്റ് (ലിങ്ക് ചെയ്ത ശൈലി).
- ഉൾച്ചേർത്ത ശൈലി ഷീറ്റ് (ആഗോള ശൈലി).
- ആന്തരിക ശൈലികൾ.
3. ബാഹ്യ CSS സ്റ്റൈൽ ഷീറ്റ് (ലിങ്ക്ഡ് സ്റ്റൈൽ)
മുഴുവൻ സൈറ്റിൻ്റെയും ശൈലി നിർവചിക്കുന്നു.
ആണ് ടെക്സ്റ്റ് ഫയൽ css വിപുലീകരണത്തോടൊപ്പം.
IN ഈ ഉദാഹരണത്തിൽ style.css എന്ന ടെക്സ്റ്റ് ഫയലിലാണ് സ്റ്റൈൽ ഷീറ്റ് എഴുതിയിരിക്കുന്നത്.
പ്രാക്ടീസ് 1
1. നോട്ട്പാഡ്++ ൽ ഒരു ശൂന്യ പ്രമാണം തുറന്ന് ഒരു ഫോൾഡറിൽ സേവ് ചെയ്യുക public_htmlഎന്ന പേരിൽ ശൈലി. css. ഫീൽഡിൽ അത് ശ്രദ്ധിക്കുക ഫയൽ തരംഅതു കണ്ടെത്തി എല്ലാ തരങ്ങളും(ചിത്രം 2).
ചിത്രം 2
2. CSS ഒരു വ്യത്യസ്ത സാങ്കേതികവിദ്യയായതിനാൽ, .css ഫയലിൽ HTML ടാഗുകളൊന്നും എഴുതിയിട്ടില്ല. ഫയലിൽ "വാസ്തുവിദ്യാ പ്രോജക്റ്റുകളുടെ കാറ്റലോഗ്" എന്ന തലക്കെട്ട് ഫോർമാറ്റ് ചെയ്യാം പ്രധാനം. htmlമധ്യഭാഗത്ത് വിന്യാസം, നീല നിറം, വെർദാന ഫോണ്ട്, ഫോണ്ട് ഉയരം 20 pt. ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾ css ഫയലിൽ ചെയ്യും അടുത്ത എൻട്രി(ചിത്രം 3):
ചിത്രം 3
ഞങ്ങളുടെ CSS ട്യൂട്ടോറിയലുകളിൽ, ഈ ട്യൂട്ടോറിയലിൽ നമ്മൾ നേരത്തെ സംസാരിച്ച CSS എലമെൻ്റ് സിൻ്റാക്സ് അനുസരിച്ച് ഇവിടെ എന്താണ് എഴുതിയിരിക്കുന്നതെന്ന് നമുക്ക് മനസ്സിലാക്കാം.
- h1 ഒരു സെലക്ടറാണ്, അതായത്. html ഘടകംഏത് ശൈലിയിൽ പ്രയോഗിക്കുന്നു;
- ടെക്സ്റ്റ്-അലൈൻ:സെൻ്റർ; - ശൈലി ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടി(ടെക്സ്റ്റ് വിന്യസിക്കുന്നു) മൂല്യ കേന്ദ്രവുമായി (മധ്യത്തിൽ);
- നിറം:#0000FF; - സ്റ്റൈൽ പ്രോപ്പർട്ടി കളർ (ടെക്സ്റ്റ് കളർ) നീല കളർ മൂല്യമുള്ള #0000FF (വർണ്ണ പട്ടികയിൽ നിന്ന് എടുത്ത മൂല്യം);
- font-family:Verdana; - Verdana മൂല്യമുള്ള ഫോണ്ട് ടൈപ്പ്ഫേസ് ഫോണ്ട് ഫാമിലിയുടെ ശൈലി പ്രോപ്പർട്ടി;
- മൂല്യങ്ങളുള്ള ശൈലി പ്രോപ്പർട്ടികൾ ഒരു അർദ്ധവിരാമം കൊണ്ട് വേർതിരിച്ചിരിക്കുന്നു;
- വാക്യഘടന അനുസരിച്ച് എല്ലാം.
ഞങ്ങളുടെ വെബ് പേജ് സ്റ്റൈൽ ഷീറ്റ് "കാണുന്നതിനും" html ഘടകങ്ങളിൽ പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കുന്നതിനും, ഫയലുകൾക്കിടയിൽ ഒരു ലിങ്ക് സ്ഥാപിക്കേണ്ടത് ആവശ്യമാണ്. പ്രധാനം. htmlഒപ്പം ശൈലി. css. ഇത് ചെയ്യുന്നതിന്, main.html ഫയലും ടാഗുകൾക്കിടയിലും തുറക്കുക < തല> ഒപ്പം തല> ഡിസൈൻ തിരുകുക , എങ്ങനെചിത്രം 4-ൽ.
ചിത്രം 4
3. ഒരു ബ്രൗസറിൽ ഫലം കാണുക. ഇത് ചിത്രം 5 മായി പൊരുത്തപ്പെടണം.
ചിത്രം 5
ഈ CSS പാഠത്തിൽ സ്റ്റൈൽ പ്രോപ്പർട്ടികളുടെ പേരുകളും അവയുടെ മൂല്യങ്ങളും എവിടെ നിന്ന് ലഭിക്കുമെന്ന് നോക്കാം? ഇതിനായി പ്രത്യേക റഫറൻസ് പുസ്തകങ്ങളും സവിശേഷതകളും ഉണ്ട് (ഫോൾഡർ CSS റഫറൻസ്). ആരംഭിക്കുന്നതിന്, ഈ ചെറിയ റഫറൻസ് പുസ്തകം ഒരു റഫറൻസായി ഉപയോഗിക്കുക. Sprav_CSS.doc.
4. "നിങ്ങളുടെ ഭാവി ഭവനത്തിനുള്ള പ്രോജക്റ്റുകൾ" എന്ന h2 തലക്കെട്ടിന് ശരിയായ വിന്യാസത്തോടെ ശൈലി സജ്ജമാക്കുക, ബർഗണ്ടി നിറം, വെർദാന ഫോണ്ട്, ഫോണ്ട് ഉയരം 16 പോയിൻ്റ്. ഫയലിൽ ഇത് ചെയ്യാൻ ശൈലി. css എച്ച്2 (ചിത്രം 6).
ചിത്രം 6
5. ബ്രൗസറിൽ ഫലം പരിശോധിക്കുക, അത് ചിത്രം 7-മായി പൊരുത്തപ്പെടണം.
ചിത്രം 7
6. ഖണ്ഡികകൾ ന്യായീകരിക്കപ്പെടും, കടും നീല, ഏരിയൽ ഫോണ്ട്, ഫോണ്ട് ഉയരം 12 pt. ഫയലിൽ ഇത് ചെയ്യാൻ ശൈലി. cssസെലക്ടർക്കായി ഇനിപ്പറയുന്ന എൻട്രി നടത്താം പി(ചിത്രം 8).
ചിത്രം 8
7. മുഴുവൻ വെബ് പേജിൻ്റെയും പശ്ചാത്തലം ഞങ്ങൾ ഇളം നീലയാക്കും. സെലക്ടർക്ക് ഇത് ചെയ്യാൻ ശരീരംഒരു റെക്കോർഡ് ചേർക്കുക (ചിത്രം 9)
ചിത്രം 9
8. ഒരു ബ്രൗസറിൽ ഫലം കാണുക. ഇത് ചിത്രം 10 മായി പൊരുത്തപ്പെടണം.
ചിത്രം 10
നിന്ന് ഞാൻ കരുതുന്നു ഈ പാഠം CSS, ഒരു ബാഹ്യ ശൈലി ഷീറ്റ് ഉപയോഗിക്കുന്നതിനുള്ള തത്വം വ്യക്തമാണ്. നിങ്ങളുടെ എളുപ്പത്തിലും വർണ്ണാഭമായ രൂപകൽപന ചെയ്യുന്നതിനായി വെബ്-പേജുകൾ, നിങ്ങൾ റഫറൻസ് ബുക്കിലെ ശൈലി സവിശേഷതകളും അവയുടെ അർത്ഥങ്ങളും പഠിക്കുകയും അവ പ്രായോഗികമായി പരീക്ഷിക്കുകയും വേണം. ഒരു റഫറൻസ് പുസ്തകം പരിശോധിക്കാതെ അത്തരം ഗുണങ്ങളും അർത്ഥങ്ങളും നിങ്ങൾ എത്രത്തോളം ഓർക്കുന്നുവോ അത്രത്തോളം നിങ്ങളുടെ പ്രൊഫഷണലിസം ഉയർന്നതാണ്.
ഗവേഷണ ചുമതലകൾ
- ഡയറക്ടറി ഉപയോഗിക്കുന്നു Sprav_CSS.doc,തലക്കെട്ട് ശൈലി < എച്ച്3> main.html ഫയലിൽ. തിരഞ്ഞെടുക്കാനുള്ള സ്റ്റൈൽ പ്രോപ്പർട്ടികൾ.
- "ഹൗസ് പ്രോജക്ടുകൾ" ലിസ്റ്റിനായി, ശൈലികൾ ഉപയോഗിച്ച്, അറബി അക്കങ്ങൾ റോമൻ അക്കങ്ങളിലേക്ക് മാറ്റുക. മറ്റ് പാരാമീറ്ററുകൾ ഓപ്ഷണൽ ആണ്.
- "ഹൗസ് ഏരിയ" ലിസ്റ്റിനായി, ഒരു ചിത്രം മാർക്കറായി ഉപയോഗിക്കുക spisok_1.gifഫോൾഡറിൽ നിന്ന് html_css_2. മറ്റ് പാരാമീറ്ററുകൾ ഓപ്ഷണൽ ആണ്.
- ശൈലികൾ വഴി വെബ് പേജിൻ്റെ പശ്ചാത്തലമായി ഒരു ചിത്രം പ്രയോഗിക്കുക fon9.jpgഫോൾഡറിൽ നിന്ന് html_css_2.
- ഖണ്ഡിക ഫോണ്ടുകൾ ബോൾഡ് ആക്കാൻ ശൈലികൾ ഉപയോഗിക്കുക.
ഒരു ഉദാഹരണ ഫലം ചിത്രം 11 ൽ കാണിച്ചിരിക്കുന്നു.
ചിത്രം 11
4. ശൈലി സവിശേഷതകളിൽ ക്ലാസുകൾ
ഞങ്ങളുടെ CSS ട്യൂട്ടോറിയലിൽ, ഒരു ഘടകത്തിന് ഒന്നിലധികം ശൈലികൾ നിർവ്വചിക്കേണ്ടിവരുമ്പോൾ ഉപയോഗിക്കുന്ന സ്റ്റൈൽ സ്പെസിഫിക്കേഷനുകളിലെ ക്ലാസുകൾ ഞങ്ങൾ പരിശോധിക്കും. ഒരു ക്ലാസ് നിർവചിക്കുമ്പോൾ ആവശ്യമുള്ള ടാഗിലേക്ക്ഒരു ഡോട്ട് കൊണ്ട് വേർതിരിക്കുന്ന ഒരു ഏകപക്ഷീയമായ തനതായ ക്ലാസ് നാമം ചേർത്തു.
ഉദാഹരണത്തിന്, നമുക്ക് വാചകത്തിൽ നിരവധി തലക്കെട്ടുകൾ ഉണ്ട് എച്ച്1 അവ വ്യത്യസ്ത നിറങ്ങളായിരിക്കണം. തുടർന്ന് നിങ്ങൾ ശൈലികൾ ഇനിപ്പറയുന്ന രീതിയിൽ വേർതിരിക്കേണ്ടതുണ്ട്:
h1.golub(നിറം:നീല)
h1.krasn(നിറം:ചുവപ്പ്)
h1.പച്ച (നിറം:പച്ച)
പോയിൻ്റ് ശേഷം പേര് പോകുന്നുക്ലാസ്, അത് അദ്വിതീയമായിരിക്കണം കൂടാതെ അക്കങ്ങൾ മാത്രം ഉൾക്കൊള്ളാൻ പാടില്ല.
ഇപ്പോൾ ടാഗ് ഉപയോഗിക്കുമ്പോൾ < എച്ച്1> പ്രമാണത്തിൽ ആട്രിബ്യൂട്ട് സജ്ജീകരിച്ചിരിക്കണം ക്ലാസ്ഏത് ശൈലിയാണ് പ്രയോഗിക്കേണ്ടതെന്ന് വ്യക്തമാക്കാൻ:
< എച്ച്1 ക്ലാസ്=" ഗോലുബ്"> ഇതൊരു നീല ശീർഷകമാണ് എച്ച്1>
< എച്ച്1 ക്ലാസ്=" ക്രാസ്ൻ"> ഇതൊരു ചുവന്ന തലക്കെട്ടാണ് എച്ച്1>
< എച്ച്1 ക്ലാസ്=" പച്ച"> ഇതൊരു പച്ച തലക്കെട്ടാണ് എച്ച്1>
പ്രാക്ടീസ് 2
1. ഫയൽ തുറക്കുക ടെംപ്ലേറ്റ്. html. ഒരു പുതിയ പേരിൽ ഇത് സംരക്ഷിക്കുക സമചതുരം Samachathuram. htmlഫോൾഡറിൽ public_html.
2. ടാഗുകൾക്കിടയിൽ എഴുതുക
3. ഉള്ളടക്കത്തിലേക്ക്
ഫയലിൽ നിന്ന് ടെക്സ്റ്റ് പകർത്തുക ഹൗസ് ഏരിയകൾ.txtഫോൾഡറിൽ നിന്ന് html_ ccs_2 .4. ഞങ്ങൾ ഒരേ ഫയലിൽ ശൈലികൾ എഴുതും ശൈലി. css, മുമ്പത്തെ പാഠത്തിൽ ഞങ്ങൾ സൃഷ്ടിച്ചത്. അതിനാൽ ഫയലിൽ സമചതുരം Samachathuram. htmlടാഗുകൾക്കിടയിൽ തിരുകിക്കൊണ്ട് ഈ സ്റ്റൈൽ ഷീറ്റിലേക്ക് ലിങ്ക് ചെയ്യുക
ഒപ്പം(ചിത്രം 12)
ചിത്രം 12
5. ടാഗ് ഉള്ള തലക്കെട്ടുകൾ ഫോർമാറ്റ് ചെയ്യുക
ഓരോ തലക്കെട്ടിനും അതിൻ്റേതായ ക്ലാസ് നൽകുകയും ചെയ്യുക (ചിത്രം 13).
ചിത്രം 13
നിങ്ങളുടെ ഫയൽ സമചതുരം Samachathuram. htmlഇപ്പോൾ ഇതുപോലെയായിരിക്കണം (ചിത്രം 14).
ചിത്രം 14
6. സ്റ്റൈൽ ഷീറ്റിൽ ശൈലി. cssഇനിപ്പറയുന്ന എൻട്രി സൃഷ്ടിക്കുക (ചിത്രം 15)
ചിത്രം 15
7. നിങ്ങളുടെ ബ്രൗസറിലെ വെബ് പേജ് പരിശോധിക്കുക. ഫലം ചിത്രം 16-ലാണ്.
ചിത്രം 16
8. നിങ്ങൾ അത് ശ്രദ്ധിച്ചിരിക്കാം പുതിയ പ്രവേശനംതലക്കെട്ട് ശൈലികൾക്ക് ആവർത്തിക്കുന്ന ഡിസൈനുകൾ ഉണ്ട് font-family:Verdana; ടെക്സ്റ്റ്-അലൈൻ:ഇടത്; ഫോണ്ട് വലുപ്പം:14pt.അത്തരം നിർമ്മിതികൾ അവ പ്രയോഗിക്കുന്ന സെലക്ടർമാരെ ഗ്രൂപ്പുചെയ്ത് ഒരിക്കൽ എഴുതാം. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ കോമകളാൽ വേർതിരിച്ച സെലക്ടറുകളെ ലിസ്റ്റുചെയ്യേണ്ടതുണ്ട്, തുടർന്ന് ഇൻ ചുരുണ്ട ബ്രേസുകൾരജിസ്റ്റർ ചെയ്യുക പൊതു ഗുണങ്ങൾ. അപ്പോൾ തലക്കെട്ടുകൾക്കായുള്ള ഞങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റ് ഇതുപോലെ കാണപ്പെടും (ചിത്രം 17):
ചിത്രം 17
പ്രാക്ടീസ് 3
ഫയലിലെ ഓരോ തലക്കെട്ടിനു കീഴിലും സമചതുരം Samachathuram. htmlടെക്സ്റ്റ് ഉണ്ട്. വിവിധ ക്ലാസുകൾ ഉപയോഗിച്ച് ഖണ്ഡികകൾ ഫോർമാറ്റ് ചെയ്യുക. വ്യത്യസ്ത നിറങ്ങൾ, വിന്യാസം, ഫോണ്ട് ടൈപ്പ്ഫേസുകൾ എന്നിവ ഉപയോഗിക്കുക. ക്ലാസുകളുടെ പേരുകൾ അദ്വിതീയമായിരിക്കണം. വ്യത്യസ്ത സെലക്ടർമാർക്ക് ഒരേ പേരുകൾ ഉപയോഗിക്കുന്നത് അഭികാമ്യമല്ല. അതിലൊന്ന് സാധ്യമായ ഓപ്ഷനുകൾചിത്രം 18-ൽ:
ചിത്രം 18
5. ഒരു പ്രത്യേക ഘടകത്തിനായുള്ള ഐഡി ശൈലി
ഐഡി ശൈലികൾ എന്ന് വിളിക്കപ്പെടുന്നതിനെക്കുറിച്ച് പഠിക്കുന്നത് CSS പാഠങ്ങളിൽ ഉൾപ്പെടുന്നു.
ഏത് ഘടകത്തിനും ഒരു ഐഡൻ്റിഫയർ നൽകാം ഐഡി, തുടർന്ന് ഉപയോഗിച്ച് ഈ ഘടകത്തിന് കുറച്ച് ശൈലി നൽകുക ഐഡി.
ഉദാഹരണത്തിന്:
സ്റ്റൈൽ ഷീറ്റ് ഫയലിലെ എൻട്രി ഇനിപ്പറയുന്നതായിരിക്കും
# പരീക്ഷ { നിറം:#00 ffff}
ഇപ്പോൾ നിങ്ങൾക്ക് ഈ ശൈലി html പ്രമാണത്തിലെ ഏത് ഘടകവുമായും പൊരുത്തപ്പെടുത്താനാകും:
...
...
ഈ ഉദാഹരണത്തിൽ, ടെസ്‌റ്റ് എന്ന വാക്ക് ശൈലിയുടെ പേരാണ്. പേര് എന്തും ആകാം ലാറ്റിൻ അക്ഷരങ്ങൾ, എന്നാൽ അത് അദ്വിതീയമായിരിക്കണം, അതായത്. സ്റ്റൈൽ ഷീറ്റിലെ ഒരു ഘടകത്തിനും ഇനി ആ പേര് ഉണ്ടാകരുത്.
പ്രാക്ടീസ് 4
ഞങ്ങളുടെ വെബ്‌സൈറ്റിൻ്റെ ഭാവി മെനുവിനായി ഒരു ടെംപ്ലേറ്റ് ഉണ്ടാക്കാം.
1. ഫയൽ തുറക്കുക ടെംപ്ലേറ്റ്. htmlഒരു പുതിയ പേരിൽ അത് സേവ് ചെയ്യുക മെനു. htmlഫോൾഡറിൽ public_html.
2. ഫയൽ പേജിൻ്റെ ഉള്ളടക്കത്തിലേക്ക് മെനു. htmlഫയലിൽ നിന്ന് ടെക്സ്റ്റ് നൽകുക മെനു. ടെക്സ്റ്റ്ഫോൾഡറിൽ നിന്ന് html_ css_2 .
3. HTML ടാഗുകൾ ഉപയോഗിച്ച്, ഫയൽ ഇനിപ്പറയുന്ന രീതിയിൽ ഫോർമാറ്റ് ചെയ്യുക:
- "പ്രോജക്റ്റ് വിഭാഗങ്ങൾ", "വാസ്തുവിദ്യാ പദ്ധതികളുടെ കാറ്റലോഗ്", "ഹൗസ് ഏരിയകൾ" എന്നീ തലക്കെട്ടുകൾക്ക് ടാഗ് ഉപയോഗിക്കുക
;
- "പ്രോജക്റ്റ് വിഭാഗങ്ങൾ" ലിസ്റ്റിനായി, ഒരു അക്കമിട്ട ലിസ്റ്റ് ഉപയോഗിക്കുക
- ;
- "വാസ്തുവിദ്യാ പദ്ധതികളുടെ കാറ്റലോഗ്", "ഹൗസ് ഏരിയ" ലിസ്റ്റുകൾക്കായി ഉപയോഗിക്കുക ബുള്ളറ്റഡ് ലിസ്റ്റ്
4. വെബ് പേജിൻ്റെ മുകളിൽ, ഒരു ലോഗോ ചേർക്കുക (ഫയൽ logo_myhouse.gif). ഫലം ചിത്രം 19 മായി പൊരുത്തപ്പെടണം.
ചിത്രം 19
5. ഈ മെനുവിന് ഞങ്ങൾ പേരിൽ ഒരു പ്രത്യേക സ്റ്റൈൽ ഷീറ്റ് ഉണ്ടാക്കും ശൈലി_ മെനു. css. ഫയൽ ലിങ്ക് ചെയ്യുക മെനു. htmlസ്റ്റൈൽ ഷീറ്റും ശൈലി_ മെനു. cssഒരു എൻട്രി ചേർത്തുകൊണ്ട് ടാഗുകൾക്കിടയിൽ
ഒപ്പംഫയലിൽ മെനു. html.6. ഒരു ബ്ലാങ്ക് ഡോക്യുമെൻ്റ് ഉണ്ടാക്കി അത് പേരിൽ സേവ് ചെയ്യുക ശൈലി_ മെനു.cssനിങ്ങളുടെ ഫോൾഡറിൽ.
7. ശീർഷകവും അക്കമിട്ട ലിസ്റ്റും ഉൾപ്പെടുന്ന "പ്രോജക്റ്റ് വിഭാഗങ്ങൾ" ഗ്രൂപ്പിനും ശീർഷകവും ബുള്ളറ്റഡ് ലിസ്റ്റും ഉൾപ്പെടുന്ന "വാസ്തുവിദ്യാ പദ്ധതികളുടെ കാറ്റലോഗ്" ഗ്രൂപ്പിനും, ഞങ്ങൾ ഐഡി ശൈലിയുടെ പേര് ഉപയോഗിക്കും. നീല. ആ. കോഡ് ഇതുപോലെ കാണപ്പെടും (ചിത്രം 20):
ചിത്രം 20
8. ഫയലിൽ ശൈലി_ മെനു. cssഈ ഘടകങ്ങളുടെ ശൈലി തഹോമ ഫോണ്ടിൽ ഇരുണ്ട നീലയായിരിക്കും (ചിത്രം 21):
ചിത്രം 21
9. തലക്കെട്ടും ബുള്ളറ്റുള്ള ലിസ്റ്റും ഉൾപ്പെടുന്ന "ഹൗസ് ഏരിയകൾ" ഗ്രൂപ്പിനായി, ഞങ്ങൾ ഐഡി ശൈലിയുടെ പേര് ഉപയോഗിക്കും തവിട്ട്. ആ. കോഡ് ഇതുപോലെ കാണപ്പെടും (ചിത്രം 22):
ചിത്രം 22
10. ഫയലിൽ ശൈലി_ മെനു. cssനമുക്ക് ഈ ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യാം തവിട്ട്, ടൈംസ് ഫോണ്ടിൽ (ചിത്രം 23):
ചിത്രം 23
11. menu.html ഫയലിലേക്ക് മറ്റൊരു പശ്ചാത്തല നിറം ചേർക്കുക (ചിത്രം 24)
ചിത്രം 24
12. ഫലമായി, നമുക്ക് ഇനിപ്പറയുന്ന വെബ് പേജ് ലഭിക്കും (ചിത്രം 25)
ചിത്രം 25
ഈ CSS ട്യൂട്ടോറിയൽ പൂർത്തിയാക്കിയതിൻ്റെ ഫലമായി, നിങ്ങൾ ഇനിപ്പറയുന്ന ഫയലുകൾ സൃഷ്ടിച്ചിരിക്കണം:
- ശൈലി.
css
- ശൈലി_ മെനു. css
- സമചതുരം Samachathuram.
html
- മെനു.
html
ഒരു വെബ് പേജിലേക്ക് ശൈലികൾ ചേർക്കുന്നതിന് നിരവധി മാർഗങ്ങളുണ്ട്, അവ അവയുടെ കഴിവുകളിലും ഉദ്ദേശ്യത്തിലും വ്യത്യാസപ്പെട്ടിരിക്കുന്നു. അടുത്തതായി അവയെ കൂടുതൽ വിശദമായി നോക്കാം.
ബാഹ്യ ശൈലി ഷീറ്റ്
css വിപുലീകരണത്തോടുകൂടിയ ഒരു പ്രത്യേക ഫയലിലാണ് ശൈലികൾ സ്ഥിതി ചെയ്യുന്നത്; HTML പ്രമാണത്തെ CSS ഫയലുമായി ബന്ധിപ്പിക്കാൻ ഈ ഘടകം ഉപയോഗിക്കുന്നു . ഇത് ഉള്ളിലാണ് സ്ഥിതി ചെയ്യുന്നത്
, ഉദാഹരണം 1 ൽ കാണിച്ചിരിക്കുന്നതുപോലെ.ഉദാഹരണം 1. ബാഹ്യ ശൈലികൾ ബന്ധിപ്പിക്കുന്നു
ശൈലികൾ തലക്കെട്ട്
റെൽ ആട്രിബ്യൂട്ടിൻ്റെ മൂല്യം എപ്പോഴും ഒരു സ്റ്റൈൽഷീറ്റ് ഉണ്ടായിരിക്കും, അത് മാറ്റമില്ലാതെ തുടരും. href മൂല്യം CSS ഫയലിലേക്കുള്ള പാതയാണ്; ആപേക്ഷികമോ കേവലമോ ആയ പാത വ്യക്തമാക്കാം. ഈ രീതിയിൽ നിങ്ങൾക്ക് മറ്റൊരു സൈറ്റിൽ സ്ഥിതി ചെയ്യുന്ന ഒരു സ്റ്റൈൽ ഷീറ്റ് ബന്ധിപ്പിക്കാൻ കഴിയുമെന്നത് ശ്രദ്ധിക്കുക. മുകളിലുള്ള ഉദാഹരണത്തിൽ ഞങ്ങൾ വെബ്‌സൈറ്റിൽ നിന്ന് സിറിലിക് ഫോണ്ട് ലോബ്സ്റ്റർ ബന്ധിപ്പിക്കുന്നു ഗൂഗിൾ ഫോണ്ടുകൾ.
style.css ഫയലിൻ്റെ ഉള്ളടക്കം ഉദാഹരണം 2-ൽ കാണിച്ചിരിക്കുന്നു.
ഉദാഹരണം 2: style.css ഫയലിൻ്റെ ഉള്ളടക്കം
H1 (ഫോണ്ട് ഫാമിലി: "ലോബ്സ്റ്റർ", കഴ്‌സീവ്; നിറം: പച്ച; )
ഈ ഉദാഹരണത്തിൽ നിന്ന് നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, സ്റ്റൈൽ ഫയൽ ഒരു സാധാരണ ടെക്സ്റ്റ് ഫയലാണ്, അതിൽ CSS വാക്യഘടന മാത്രമേ അടങ്ങിയിട്ടുള്ളൂ. അതാകട്ടെ, HTML പ്രമാണത്തിൽ ശൈലിയിലുള്ള ഫയലിലേക്കുള്ള ഒരു പോയിൻ്റർ മാത്രമേ അടങ്ങിയിട്ടുള്ളൂ; ഈ രീതിയിൽ, കോഡും സൈറ്റ് രൂപകൽപ്പനയും വേർതിരിക്കുന്ന തത്വം പൂർണ്ണമായും നടപ്പിലാക്കുന്നു. അതിനാൽ, ഒരു ബാഹ്യ ശൈലി ഷീറ്റ് ഉപയോഗിക്കുന്നത് ഒരു സൈറ്റിലേക്ക് ശൈലി ചേർക്കുന്നതിനുള്ള ഏറ്റവും വൈവിധ്യമാർന്നതും സൗകര്യപ്രദവുമായ രീതിയാണ്. ഇത് സ്വതന്ത്ര എഡിറ്റിംഗ് അനുവദിക്കുന്നു HTML ഫയലുകൾകൂടാതെ സി.എസ്.എസ്.
ആന്തരിക ശൈലി ഷീറ്റ്
ഘടകത്തിനുള്ളിൽ HTML പ്രമാണത്തിൽ തന്നെ ശൈലികൾ എഴുതിയിരിക്കുന്നു.
തലക്കെട്ട്
ഈ ഉദാഹരണത്തിൽ, എലമെൻ്റ് ശൈലി സജ്ജീകരിച്ചിരിക്കുന്നു
, നൽകിയിട്ടുള്ള വെബ് പേജിലുടനീളം അത് ഉപയോഗിക്കാനാകും (ചിത്രം 1). നമുക്ക് സുരക്ഷിതമായി സംയോജിപ്പിക്കാൻ കഴിയുമെന്നത് ശ്രദ്ധിക്കുക കൂടെ
തലക്കെട്ട് 1
തലക്കെട്ട് 2
- ശൈലി.
css