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

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

പ്രയോജനങ്ങൾ:

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

ഡാറ്റാ അവതരണ നിയമങ്ങൾ കൈമാറുന്നതിലൂടെ വെബ്സൈറ്റ് പേജുകൾ ലോഡ് ചെയ്യുന്ന സമയം കുറയ്ക്കുന്നു പ്രത്യേക CSS ഫയൽ. ഈ സാഹചര്യത്തിൽ, പേജിൽ സംഭരിച്ചിരിക്കുന്ന ഡോക്യുമെൻ്റ് ഘടനയും ഡാറ്റയും മാത്രമേ ബ്രൗസർ ഡൗൺലോഡ് ചെയ്യുകയുള്ളൂ, കൂടാതെ ആ ഡാറ്റയുടെ പ്രാതിനിധ്യം ബ്രൗസർ ഒരിക്കൽ മാത്രം ഡൗൺലോഡ് ചെയ്യുകയും കാഷെ ചെയ്യപ്പെടുകയും ചെയ്യും.

പിന്നീട് ഡിസൈൻ മാറ്റാൻ എളുപ്പമാണ്. നിങ്ങൾ എല്ലാ പേജും എഡിറ്റ് ചെയ്യേണ്ടതില്ല, CSS ഫയൽ മാറ്റുക.

അധിക ഡിസൈൻ ഓപ്ഷനുകൾ. ഉദാഹരണത്തിന്, CSS ലേഔട്ട് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ടെക്‌സ്‌റ്റിൻ്റെ ഒരു ബ്ലോക്ക് ഉണ്ടാക്കാം, അത് ബാക്കിയുള്ള ടെക്‌സ്‌റ്റിന് ചുറ്റും (ഉദാഹരണത്തിന്, ഒരു മെനുവിന്) അല്ലെങ്കിൽ പേജ് സ്‌ക്രോൾ ചെയ്യുമ്പോൾ മെനു എല്ലായ്‌പ്പോഴും ദൃശ്യമാക്കും.

പോരായ്മകൾ:

ഒരേ CSS3 ഡാറ്റയെ വ്യത്യസ്തമായി വ്യാഖ്യാനിക്കുന്ന വ്യത്യസ്ത ബ്രൗസറുകളിൽ (പ്രത്യേകിച്ച് പഴയവ) വ്യത്യസ്ത ലേഔട്ട് ഡിസ്പ്ലേകൾ.

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

വ്യത്യാസങ്ങൾCSS3:

പുതിയ ശൈലികൾ

കപട-തിരഞ്ഞെടുപ്പുകാർ

ആനിമേഷൻ

ക്യാൻവാസ് പിന്തുണ

രൂപാന്തരം

ടാഗ് ഉള്ളടക്ക മാനേജ്മെൻ്റ്

...കൂടുതൽ

2.2.3 js ഭാഷയുടെയും jQuery ലൈബ്രറിയുടെയും സംക്ഷിപ്ത അവലോകനം

ജാവാസ്ക്രിപ്റ്റ്

ജാവാസ്ക്രിപ്റ്റ് ഒരു പ്രോട്ടോടൈപ്പ്-ഓറിയൻ്റഡ് സ്ക്രിപ്റ്റിംഗ് പ്രോഗ്രാമിംഗ് ഭാഷയാണ്. ഇത് ECMAScript ഭാഷയുടെ ഒരു ഭാഷാഭേദമാണ്.

ജാവാസ്ക്രിപ്റ്റ് സാധാരണയായി എംബഡഡ് ഭാഷയായി ഉപയോഗിക്കുന്നു സോഫ്റ്റ്വെയർ ആക്സസ്ആപ്ലിക്കേഷൻ ഒബ്ജക്റ്റുകളിലേക്ക്. വെബ് പേജുകളിൽ ഇൻ്ററാക്റ്റിവിറ്റി ചേർക്കുന്നതിനുള്ള ഒരു സ്ക്രിപ്റ്റിംഗ് ഭാഷയായി ബ്രൗസറുകളിൽ ഇത് ഏറ്റവും വ്യാപകമായി ഉപയോഗിക്കുന്നു.

പ്രധാന വാസ്തുവിദ്യാ സവിശേഷതകൾ: ഡൈനാമിക് ടൈപ്പിംഗ്, ദുർബലമായ ടൈപ്പിംഗ്, ഓട്ടോമാറ്റിക് മെമ്മറി മാനേജ്മെൻ്റ്, പ്രോട്ടോടൈപ്പ് പ്രോഗ്രാമിംഗ്, ഫസ്റ്റ്-ക്ലാസ് ഒബ്ജക്റ്റുകളായി പ്രവർത്തിക്കുന്നു.

ജാവാസ്ക്രിപ്റ്റ് നിരവധി ഭാഷകളാൽ സ്വാധീനിക്കപ്പെട്ടിട്ടുണ്ട്, കൂടാതെ ഭാഷയെ ജാവയ്ക്ക് സമാനമാക്കുക എന്ന ലക്ഷ്യത്തോടെ വികസിപ്പിച്ചെടുത്തതാണ്, എന്നാൽ അതേ സമയം പ്രോഗ്രാമർമാർ അല്ലാത്തവർക്ക് ഉപയോഗിക്കാൻ എളുപ്പമാണ്. ജാവാസ്ക്രിപ്റ്റ് ഏതെങ്കിലും കമ്പനിയുടെയോ ഓർഗനൈസേഷൻ്റെയോ ഉടമസ്ഥതയിലുള്ളതല്ല, ഇത് വെബ് വികസനത്തിൽ ഉപയോഗിക്കുന്ന നിരവധി പ്രോഗ്രാമിംഗ് ഭാഷകളിൽ നിന്ന് വ്യത്യസ്തമാക്കുന്നു.

"JavaScript" എന്ന പേര് ഒരു രജിസ്റ്റർ ചെയ്ത വ്യാപാരമുദ്രയാണ് ഒറാക്കിൾകോർപ്പറേഷൻ.

ഭാഷാ സവിശേഷതകൾ

ജാവാസ്ക്രിപ്റ്റ് ഒരു ഒബ്ജക്റ്റ്-ഓറിയൻ്റഡ് ഭാഷയാണ്, എന്നാൽ ഭാഷയിൽ ഉപയോഗിക്കുന്ന പ്രോട്ടോടൈപ്പിംഗ് പരമ്പരാഗത ക്ലാസ്-ഓറിയൻ്റഡ് ഭാഷകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ വസ്തുക്കളുമായി പ്രവർത്തിക്കുന്നതിൽ വ്യത്യാസങ്ങൾ ഉണ്ടാക്കുന്നു. കൂടാതെ, ജാവാസ്ക്രിപ്റ്റിന് ഫംഗ്ഷണൽ ഭാഷകളിൽ അന്തർലീനമായ നിരവധി പ്രോപ്പർട്ടികൾ ഉണ്ട് - ഫസ്റ്റ് ക്ലാസ് ഒബ്ജക്റ്റുകളായി ഫംഗ്ഷനുകൾ, ലിസ്റ്റുകളായി ഒബ്ജക്റ്റുകൾ, അജ്ഞാത ഫംഗ്ഷനുകൾ, ക്ലോഷറുകൾ - ഇത് ഭാഷയ്ക്ക് അധിക വഴക്കം നൽകുന്നു.

വാക്യഘടന സിക്ക് സമാനമാണെങ്കിലും, സി ഭാഷയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ജാവാസ്ക്രിപ്റ്റിന് അടിസ്ഥാനപരമായ വ്യത്യാസങ്ങളുണ്ട്:

ആത്മപരിശോധനയുടെ സാധ്യതയുള്ള വസ്തുക്കൾ

ഫസ്റ്റ് ക്ലാസ് ഒബ്ജക്റ്റുകളായി പ്രവർത്തിക്കുന്നു

ഓട്ടോമാറ്റിക് തരം കാസ്റ്റിംഗ്

ഓട്ടോമാറ്റിക് മാലിന്യ ശേഖരണം

ഭാഷയ്ക്ക് അത്തരം ഉപയോഗപ്രദമായ കാര്യങ്ങൾ ഇല്ല:

മോഡുലാർ സിസ്റ്റം: ഡിപൻഡൻസികളും സ്കോപ്പ് ഐസൊലേഷനും കൈകാര്യം ചെയ്യാനുള്ള കഴിവ് JavaScript നൽകുന്നില്ല

സ്റ്റാൻഡേർഡ് ലൈബ്രറി: പ്രത്യേകിച്ചും, ഫയൽ സിസ്റ്റത്തിൽ പ്രവർത്തിക്കുന്നതിനും I/O സ്ട്രീമുകൾ കൈകാര്യം ചെയ്യുന്നതിനും അല്ലെങ്കിൽ ബൈനറി ഡാറ്റയ്ക്കുള്ള അടിസ്ഥാന തരങ്ങൾക്കും ആപ്ലിക്കേഷൻ പ്രോഗ്രാമിംഗ് ഇൻ്റർഫേസ് ഇല്ല.

വെബ് സെർവറുകളിലേക്കും ഡാറ്റാബേസുകളിലേക്കും സ്റ്റാൻഡേർഡ് ഇൻ്റർഫേസുകൾ

ഡിപൻഡൻസികൾ ട്രാക്ക് ചെയ്യുകയും അവ യാന്ത്രികമായി ഇൻസ്റ്റാൾ ചെയ്യുകയും ചെയ്യുന്ന ഒരു പാക്കേജ് മാനേജ്മെൻ്റ് സിസ്റ്റം

അർത്ഥശാസ്ത്രവും വാക്യഘടനയും:

വാക്യഘടന ജാവാസ്ക്രിപ്റ്റ് ഭാഷപല തരത്തിൽ സി, ജാവ എന്നിവയുടെ വാക്യഘടനയോട് സാമ്യമുണ്ട്, എന്നാൽ അർത്ഥപരമായി ഭാഷ സെൽഫ്, സ്മോൾടോക്ക് അല്ലെങ്കിൽ ലിസ്പ് എന്നിവയുമായി വളരെ അടുത്താണ്.

എല്ലാ ഐഡൻ്റിഫയറുകളും കേസ് സെൻസിറ്റീവ് ആണ്

വേരിയബിൾ പേരുകൾക്ക് അക്ഷരങ്ങൾ, അടിവരകൾ, ഡോളർ ചിഹ്നങ്ങൾ, അറബി അക്കങ്ങൾ എന്നിവ ഉപയോഗിക്കാം.

വേരിയബിൾ പേരുകൾ ഒരു സംഖ്യയിൽ ആരംഭിക്കാൻ കഴിയില്ല

സിംഗിൾ-ലൈൻ കമൻ്റുകൾ ഫോർമാറ്റ് ചെയ്യാൻ, // എന്നത് മൾട്ടി-ലൈൻ, ഇൻ-ലൈൻ കമൻ്റുകൾ /* ഉപയോഗിച്ച് ആരംഭിച്ച് */ എന്നതിൽ അവസാനിക്കുന്നു;

ഭാഷാ ഘടന:

ഘടനാപരമായി, പരസ്പരം വ്യക്തമായി വേർതിരിച്ചറിയാൻ കഴിയുന്ന മൂന്ന് ഭാഗങ്ങളുടെ സംയോജനമായി JavaScript പ്രതിനിധീകരിക്കാം:

കേർണൽ (ECMAScript)

ബ്രൗസർ ഒബ്‌ജക്‌റ്റ് മോഡൽ (BOM)

ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ (DOM)

ബ്രൗസർ ഇതര പരിതസ്ഥിതികളിലാണ് JavaScript കാണുന്നതെങ്കിൽ, ബ്രൗസർ ഒബ്‌ജക്റ്റ് മോഡലും ഡോക്യുമെൻ്റ് ഒബ്‌ജക്റ്റ് മോഡലും പിന്തുണയ്‌ക്കില്ല.

ഡോക്യുമെൻ്റ് ഒബ്‌ജക്റ്റ് മോഡൽ ചിലപ്പോൾ JavaScript-ൽ നിന്ന് ഒരു പ്രത്യേക എൻ്റിറ്റിയായി വീക്ഷിക്കപ്പെടുന്നു, ഇത് ഒരു ഭാഷാ-സ്വതന്ത്ര ഡോക്യുമെൻ്റ് ഇൻ്റർഫേസ് എന്ന നിലയിൽ DOM-ൻ്റെ നിർവചനവുമായി പൊരുത്തപ്പെടുന്നു. ഇതിനു വിപരീതമായി, നിരവധി രചയിതാക്കൾ BOM ഉം DOM ഉം അടുത്ത ബന്ധമുള്ളതായി കാണുന്നു.

ECMAScript ഒരു ബ്രൗസർ ഭാഷയല്ല, ഇൻപുട്ട് അല്ലെങ്കിൽ ഔട്ട്പുട്ട് രീതികൾ നിർവചിക്കുന്നില്ല. മറിച്ച്, അത് സ്ക്രിപ്റ്റിംഗ് ഭാഷകൾ നിർമ്മിക്കുന്നതിനുള്ള അടിസ്ഥാനമാണ്. ECMAScript സ്പെസിഫിക്കേഷൻ ഡാറ്റ തരങ്ങൾ, നിർദ്ദേശങ്ങൾ, കീവേഡുകൾ, റിസർവ് ചെയ്ത വാക്കുകൾ, ഓപ്പറേറ്റർമാർ, വസ്തുക്കൾ, പതിവ് ഭാവങ്ങൾ, ഉരുത്തിരിഞ്ഞ ഭാഷകളുടെ രചയിതാക്കളെ പരിമിതപ്പെടുത്താതെ അവയെ പുതിയ ഘടകങ്ങൾ ഉപയോഗിച്ച് വികസിപ്പിക്കുക.

ബ്രൗസർ ഒബ്ജക്റ്റ് മോഡൽ

ബ്രൗസർ ഒബ്‌ജക്റ്റ് മോഡൽ എന്നത് ഭാഷയുടെ ഒരു ബ്രൗസർ-നിർദ്ദിഷ്ട ഭാഗമാണ്, അത് കേർണലിനും ഡോക്യുമെൻ്റ് ഒബ്‌ജക്റ്റ് മോഡലിനും ഇടയിലുള്ള ഒരു പാളിയാണ്. പ്രധാന ഉദ്ദേശം ഒബ്ജക്റ്റ് മോഡൽബ്രൗസർ - ബ്രൗസർ വിൻഡോകൾ നിയന്ത്രിക്കുകയും അവയുടെ ഇടപെടൽ ഉറപ്പാക്കുകയും ചെയ്യുന്നു. ഓരോ ബ്രൗസർ വിൻഡോയും ഒരു വിൻഡോ ഒബ്‌ജക്‌റ്റ്, സെൻട്രൽ DOM ഒബ്‌ജക്‌റ്റ് പ്രതിനിധീകരിക്കുന്നു. ബ്രൗസർ ഒബ്ജക്റ്റ് മോഡൽ ആ നിമിഷത്തിൽസ്റ്റാൻഡേർഡ് അല്ല, എന്നാൽ സ്പെസിഫിക്കേഷൻ WHATWG, W3C എന്നിവ വികസിപ്പിച്ചുകൊണ്ടിരിക്കുന്നു

വിൻഡോ മാനേജ്‌മെൻ്റിന് പുറമേ, ബ്രൗസർ ഒബ്‌ജക്റ്റ് മോഡലിൻ്റെ ഭാഗമായി ബ്രൗസറുകൾ സാധാരണയായി ഇനിപ്പറയുന്ന എൻ്റിറ്റികൾക്ക് പിന്തുണ നൽകുന്നു:

ഫ്രെയിം മാനേജ്മെൻ്റ്

വൈകിയ കോഡ് നിർവ്വഹണത്തിനും കാലതാമസം നേരിട്ട ലൂപ്പിംഗിനും പിന്തുണ

സിസ്റ്റം ഡയലോഗുകൾ

തുറന്ന പേജിൻ്റെ വിലാസം കൈകാര്യം ചെയ്യുന്നു

ബ്രൗസർ വിവരങ്ങൾ കൈകാര്യം ചെയ്യുന്നു

മോണിറ്റർ ക്രമീകരണ വിവരങ്ങൾ കൈകാര്യം ചെയ്യുന്നു

പരിമിതമായ ബ്രൗസിംഗ് ചരിത്ര മാനേജ്മെൻ്റ്

HTTP കുക്കി പിന്തുണ

ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ

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

നോഡുകൾ സൃഷ്ടിക്കുകയും കൂട്ടിച്ചേർക്കുകയും ചെയ്യുന്നു

നോഡുകൾ ലഭിക്കുന്നു

നോഡുകൾ മാറ്റുന്നു

നോഡുകൾ തമ്മിലുള്ള കണക്ഷനുകൾ മാറ്റുന്നു

നോഡുകൾ നീക്കംചെയ്യുന്നു.

jQuery - ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറി, ഇത് JavaScript, HTML എന്നിവയുടെ ഇടപെടലിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. jQuery ലൈബ്രറി നിങ്ങളെ ഏത് DOM എലമെൻ്റും ആക്‌സസ് ആട്രിബ്യൂട്ടുകളും ഉള്ളടക്കവും എളുപ്പത്തിൽ ആക്‌സസ് ചെയ്യാൻ സഹായിക്കുന്നു DOM ഘടകങ്ങൾ, അവ കൈകാര്യം ചെയ്യുക. AJAX-നൊപ്പം പ്രവർത്തിക്കാൻ jQuery ലൈബ്രറി സൗകര്യപ്രദമായ API നൽകുന്നു.

സാധ്യതകൾ

ക്രോസ്-ബ്രൗസർ CSS സെലക്ടർ എഞ്ചിൻ Sizzle, ഒരു പ്രത്യേക പ്രോജക്റ്റിലേക്ക് മാറ്റി

ഒരു പ്ലഗിൻ ആയി XPath-നുള്ള പിന്തുണ ഉൾപ്പെടെ DOM ട്രീയിലൂടെ സഞ്ചരിക്കുന്നു

ഇവൻ്റുകൾ

വിഷ്വൽ ഇഫക്റ്റുകൾ

AJAX ആഡ്-ഓണുകൾ

JavaScript പ്ലഗിനുകൾ

jQuery-യിൽ പ്രവർത്തിക്കുന്നത് 2 തരങ്ങളായി തിരിക്കാം:

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

$ ഒബ്ജക്റ്റിൽ ആഗോള രീതികൾ വിളിക്കുന്നു, ഉദാഹരണത്തിന്, സൗകര്യപ്രദമായ അറേ ഇറ്ററേറ്ററുകൾ.

ഏറ്റവും കൂടുതൽ ഒന്ന് പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾപുതിയ മാനദണ്ഡങ്ങൾ അറിയുന്ന പ്രക്രിയയിൽ - HTML ഘടകങ്ങളുടെ "ഐഡി", "ക്ലാസ്" ആട്രിബ്യൂട്ടുകൾ തമ്മിലുള്ള വ്യത്യാസം എന്താണ്. എല്ലാത്തിനുമുപരി, പ്രഭാവം ഒന്നുതന്നെയാണെന്ന് തോന്നുന്നു.

അവയ്ക്ക് മിക്കവാറും ഒരേ ഫലം മാത്രമേ ഉണ്ടാകൂ ലളിതമായ കേസുകൾ CSS-ൽ ഉപയോഗിക്കുക. വാസ്തവത്തിൽ, ഒരുപാട് വ്യത്യാസങ്ങളുണ്ട്.

സാരാംശം

id എന്നത് പേജിലെ ഒരു ഘടകത്തിൻ്റെ തനതായ ശരിയായ നാമമാണ്, അതായത്, ഒരേ ഐഡിയുള്ള പേജിൽ നിരവധി ഘടകങ്ങൾ ഉണ്ടാകരുത്. ഉദാഹരണത്തിന്, സൈറ്റ് ഹെഡറുള്ള ബ്ലോക്കിന് id="title" നൽകാം.

ക്ലാസ് എന്നത് ഒരു സ്വതന്ത്ര ആട്രിബ്യൂട്ടാണ്, അത് സാധാരണയായി പല ഘടകങ്ങളെ മറ്റുള്ളവരിൽ നിന്ന് വേർതിരിച്ചറിയാൻ നൽകുന്നു. ഉദാഹരണത്തിന്, ടെക്‌സ്‌റ്റിനോടൊപ്പമുള്ള ചിത്രങ്ങൾക്ക് class="decor" നൽകാം, കൂടാതെ ടെക്‌സ്‌റ്റ് മനസ്സിലാക്കുന്നതിന് പ്രധാനമായ ചിത്രങ്ങൾക്ക് class="content" നൽകാം.

അനന്തരഫലങ്ങൾ

ഈ സത്തയിൽ നിന്ന് നേരിട്ടോ അല്ലാതെയോ HTML, CSS, സ്ക്രിപ്റ്റുകൾ എന്നിവയിൽ ദൃശ്യമാകുന്ന മറ്റ് വ്യത്യാസങ്ങൾ പിന്തുടരുക.

...

ആങ്കർ ലിങ്കുകൾ പേജിലെ ചില ഘടകങ്ങളിലേക്ക് നിങ്ങൾക്ക് ഒരു ലിങ്ക് നൽകണമെങ്കിൽ, നിങ്ങൾ അതിന് ഒരു ഐഡി നൽകിയാൽ മതി ( .

ഒന്നിലധികം അടയാളങ്ങൾ ഒരു ഘടകത്തിന് സ്‌പെയ്‌സുകളാൽ വേർതിരിച്ച നിരവധി ക്ലാസുകൾ നൽകാം:

. കൂടാതെ, അവ പ്രത്യേകം ഉപയോഗിക്കാം:

/* എല്ലാ പ്രധാന ഘടകങ്ങളും */ .പ്രധാനം (നിറം: ചുവപ്പ്;)

ഒപ്പം സംയുക്തമായും:

/* ഒരേ സമയം പ്രധാനപ്പെട്ടതും കേന്ദ്രീകൃതവുമായ ഘടകങ്ങൾ */ .important.centered (ബോർഡർ: സോളിഡ് ബ്ലാക്ക് 1px;)

CSS റൂളിൽ ക്ലാസുകൾക്കിടയിൽ ഇടമില്ലെന്ന് ശ്രദ്ധിക്കുക.

CSS-ൽ വ്യത്യസ്ത ഭാരങ്ങൾ

...

CSS-ലെ ഓരോ നിയമത്തിനും ഒരു "ഭാരം" ഉണ്ട്, അത് അവ പ്രയോഗിക്കുന്ന ക്രമം നിർണ്ണയിക്കുന്നു. ഐഡിക്ക് കൂടുതൽ ഭാരം ഉണ്ട്. അതിനാൽ, ഒരു ഘടകത്തിന് ഒരു ഐഡിയും ക്ലാസും ഉണ്ടെങ്കിൽ:

രണ്ടിലേതെങ്കിലും നിയമങ്ങൾ

#കുറിച്ച് (നിറം:പച്ച;).പ്രധാനം (നിറം:ചുവപ്പ്;)

ആദ്യത്തേത് വിജയിക്കും, ശീർഷകത്തിൻ്റെ നിറം പച്ചയായിരിക്കും. (നിയമങ്ങളുടെ തൂക്കങ്ങൾ ഒരു പ്രത്യേക കഥയാണ്; തക്കസമയത്ത് അതിനെക്കുറിച്ച് ഒരു ലേഖനം ഉണ്ടാകും.)

ഒരു സ്ക്രിപ്റ്റിൽ തിരയുന്നു "id" ഉള്ള ഒരു ഘടകം ഡോക്യുമെൻ്റ്.getElementById() ഫംഗ്ഷൻ ഉപയോഗിച്ച് ഒരു സ്ക്രിപ്റ്റിൽ എളുപ്പത്തിൽ കണ്ടെത്താനാകും. ക്ലാസുകൾക്ക് അത്തരം പ്രവർത്തനങ്ങളൊന്നുമില്ല.

ഈ ലേഖനം "പാഠപുസ്തകം" എന്ന തലക്കെട്ടിൽ പുരോഗമിക്കുന്ന ഒരു പരമ്പരയുടെ ഭാഗമാണ്. "പാഠപുസ്തകം" വിഭാഗത്തിൽ കാണാവുന്ന മറ്റ് ലേഖനങ്ങൾ വായിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു, അവ ഇപ്പോൾ വിപരീത കാലക്രമത്തിൽ ശേഖരിക്കുന്നു. ഒറ്റനോട്ടത്തിൽ, എന്ത് ഉപയോഗിക്കണമെന്ന് വ്യത്യാസമില്ല:ഐഡി അല്ലെങ്കിൽ ക്ലാസ് . എല്ലാത്തിനുമുപരി, അതേ ചുമതലപ്പെടുത്തി CSS ഓപ്ഷനുകൾ ഐഡിക്കും ക്ലാസിനുമുള്ള ശൈലികൾ - ഫലം സമാനമായിരിക്കും. വാസ്തവത്തിൽ, CSS-ൽ ഐഡിയും ക്ലാസും തമ്മിൽ അവയുടെ പ്രോസസ്സിംഗിൻ്റെ മുൻഗണന ഒഴികെ പ്രായോഗികമായി വ്യത്യാസങ്ങളൊന്നുമില്ല. എന്നാൽ വെബ് വികസനത്തിൽ പലപ്പോഴും ഉപയോഗിക്കുന്ന മറ്റ് ചില സന്ദർഭങ്ങളിൽ, വ്യത്യാസം വളരെ ശ്രദ്ധേയമാണ്. ഈ ലേഖനം എല്ലാം എടുത്തുകാണിക്കുന്നു.

ക്ലാസും ഐഡിയും തമ്മിലുള്ള വ്യത്യാസം

ഐഡിഐഡി

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

<ഉദാഹരണം 1: ഐഡൻ്റിഫയറുകൾ (ഐഡികൾ) ഉപയോഗിക്കുന്നത് എങ്ങനെ ഉചിതമല്ല p id = "my_id_r7t" ><തിരഞ്ഞെടുത്ത ടെക്സ്റ്റ് ബ്ലോക്ക്

<ഉദാഹരണം 1: ഐഡൻ്റിഫയറുകൾ (ഐഡികൾ) ഉപയോഗിക്കുന്നത് എങ്ങനെ ഉചിതമല്ല p id = "my_id_r7t" ><തിരഞ്ഞെടുത്ത ടെക്സ്റ്റ് ബ്ലോക്ക്

/p>

<ഉദാഹരണം 2: ഐഡൻ്റിഫയറുകൾ (ഐഡികൾ) എങ്ങനെ ഉപയോഗിക്കരുത് p id = "my_id_r7t" id = "my_id_r9t" ><തിരഞ്ഞെടുത്ത ടെക്സ്റ്റ് ബ്ലോക്ക്

ആദ്യ ഘടകത്തിലേക്ക് രണ്ടോ അതിലധികമോ ഐഡികൾ നൽകുന്നത് അനുവദനീയമല്ല

ഒരു ഘടകത്തിലേക്ക് ഐഡിയും ക്ലാസും ഒരേസമയം പ്രയോഗിക്കുന്ന സാഹചര്യത്തിൽ, ഐഡിയുടെ മുൻഗണന ക്ലാസിനേക്കാൾ കൂടുതലായിരിക്കും:

CSS ശൈലികൾ നിർവചിക്കുന്നു

#my_id_r7t (നിറം: പച്ച; ഫോണ്ട്-വെയ്റ്റ്: ബോൾഡ്;)

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഐഡൻ്റിഫയറിൽ രേഖപ്പെടുത്തിയിരിക്കുന്ന മൂല്യങ്ങൾ നിറം സ്വന്തമാക്കി. എന്നാൽ നിങ്ങൾ സൂക്ഷ്മമായി നോക്കുകയാണെങ്കിൽ, ഐഡിക്കും ക്ലാസിനും പരസ്പരം പൂരകമാക്കാൻ കഴിയും: ബോൾഡ് തരം, ഐഡൻ്റിഫയറിൽ വ്യക്തമാക്കിയത്, ക്ലാസിൽ എഴുതിയിരിക്കുന്ന ഇറ്റാലിക് ശൈലിയുമായി സംയോജിപ്പിച്ചിരിക്കുന്നു.

ഞങ്ങൾ ഡിസ്ക്രിപ്റ്ററിലേക്ക് ചേർക്കുകയാണെങ്കിൽ <p>ശൈലിയും: <p ക്ലാസ് = "my_class_r7t" ശൈലി = "നിറം: ഗ്രേ" ഐഡി = "my_id_r7t" >, അപ്പോൾ ഫലം ഇതുപോലെയായിരിക്കും:

ഏറ്റവും ഉയർന്ന മുൻഗണന style="..." ഉപയോഗിച്ച് ഡിസ്ക്രിപ്റ്ററിന് നൽകിയിട്ടുള്ള ശൈലി ഉണ്ട്.

മുൻഗണനകളുടെ ഒരു നല്ല ഉദാഹരണം ഔദ്യോഗിക CSS ഡോക്യുമെൻ്റേഷനിൽ (eng) നൽകിയിരിക്കുന്നു. ചുരുക്കത്തിൽ, അവരോഹണ ക്രമത്തിലെ മുൻഗണനകൾ ഇവയാണ്: ശൈലി, ഐഡി, ക്ലാസ്, ടാഗ് ശൈലി.

ഐഡി ഘടകം കൂടുതൽ പുരാതനമായ നിർമ്മിതിക്ക് പകരം ഒരു HTML ആങ്കറായി ഉപയോഗിക്കാം <ഒരു പേര് = "name_jakorya" > , അതുവഴി പേജ് റീലോഡ് ചെയ്യാതെ തന്നെ പേജിൻ്റെ ഒരു പ്രത്യേക ഭാഗത്തേക്ക് ലിങ്ക് ചെയ്യാം <a href = "#imya_jakorya" >മുകളിൽ</a>. പേജിൽ സമാനമായ നിരവധി ഐഡികൾ ഉണ്ടെങ്കിൽ, അവ്യക്തമായ ഒരു സാഹചര്യം ഉടലെടുക്കും.

JS ഉപയോഗിച്ച് പേജുകൾ പ്രോഗ്രാമിംഗ് ചെയ്യുമ്പോൾ, getElementById ഫംഗ്ഷൻ പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട് () , ഐഡൻ്റിഫയർ അദ്വിതീയമായിരിക്കണം എന്ന് "പ്രതീക്ഷിക്കുന്നു". അല്ലെങ്കിൽ, കോഡിൽ പിശകുകൾ സംഭവിക്കാം.

ക്ലാസ്

ഉപയോഗിക്കുമ്പോൾ ക്ലാസ്, ഒരു HTML ഡിസ്ക്രിപ്റ്ററിന് ഒരേ സമയം നിരവധി ക്ലാസുകളിൽ നിന്ന് ശൈലികൾ നൽകാം:

My_class_r7t (നിറം: നീല; ഫോണ്ട് ശൈലി: ഇറ്റാലിക്;)
.my_class_ffR5 (നിറം: കറുപ്പ്; പശ്ചാത്തല നിറം: #fafafa; പാഡിംഗ്: 3px; ബോർഡർ: 1px സോളിഡ് #757575; മാർജിൻ-ഇടത്: 30px; )

വിവിധ ക്ലാസുകളുടെ പേരുകൾ ഇടങ്ങളാൽ വേർതിരിച്ചിരിക്കുന്നു:

<p ക്ലാസ് = "my_class_ffR5 my_class_r7t" > 1 HTML ടാഗിനായി 2 വ്യത്യസ്ത ക്ലാസുകൾ ഉപയോഗിക്കുന്നതിൻ്റെ ഉദാഹരണം.<തിരഞ്ഞെടുത്ത ടെക്സ്റ്റ് ബ്ലോക്ക്

1st HTML ഡിസ്ക്രിപ്റ്ററിലേക്ക് രണ്ട് വ്യത്യസ്ത ക്ലാസുകൾ പ്രയോഗിക്കുന്നതിൻ്റെ ഫലം.

my_class_r7t, my_class_ffR5 എന്നീ ക്ലാസുകൾ ഒരു HTML ടാഗിൻ്റെ ഉള്ളടക്കത്തിന് വ്യത്യസ്ത നിറങ്ങൾ സജ്ജമാക്കി. സ്റ്റൈൽ ഫയലിൽ പിന്നീട് നിർവചിച്ചിരിക്കുന്ന നിറം ഉപയോഗിക്കും (ഇൻ ഈ സാഹചര്യത്തിൽക്ലാസ് my_class_ffR5 എന്നത് my_class_r7t എന്നതിന് ശേഷം എഴുതിയിരിക്കുന്നു). HTML ഡിസ്ക്രിപ്റ്ററിൽ തന്നെ ക്ലാസുകൾ പ്രയോഗിക്കുന്ന ക്രമം പ്രശ്നമല്ല.

സംയോജിത ക്ലാസുകൾക്ക് ഒരു അദ്വിതീയ മൂല്യം നൽകുന്നതിന് സ്റ്റൈലിംഗ്, അവ പ്രശ്നങ്ങളില്ലാതെ ഒരുമിച്ച് എഴുതിയിരിക്കുന്നു:

My_class_bbbb755 (ഫോണ്ട്-വെയ്റ്റ്: ബോൾഡ്;)
.my_class_ffR5 .my_class_bbbb755 (text-align: right; )

ഒരു HTML ഡിസ്ക്രിപ്റ്ററിന് ഒരേസമയം 2 ക്ലാസുകൾ നൽകുമ്പോൾ മാത്രമേ വലത് അലൈൻമെൻ്റ് ബാധകമാകൂ:

"my_class_ffR5 my_class_bbbb755"> സംയോജിത ക്ലാസുകളിലേക്ക് ശൈലികൾ പ്രയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം

അത് എങ്ങനെയായിരിക്കുമെന്ന് ചുവടെ കാണുക:

സംയോജിത ക്ലാസുകളിലേക്ക് ശൈലികൾ പ്രയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം

ഒരേ ക്ലാസ്, ഐഡിയിൽ നിന്ന് വ്യത്യസ്തമായി, പരിധിയില്ലാത്ത വ്യത്യസ്ത ഘടകങ്ങളിലേക്ക് എളുപ്പത്തിൽ അസൈൻ ചെയ്യാൻ കഴിയും:

<div ക്ലാസ് = "my_class_ffR5" >...</div>
<p ക്ലാസ് = "my_class_ffR5" >...<തിരഞ്ഞെടുത്ത ടെക്സ്റ്റ് ബ്ലോക്ക്
<h5 ക്ലാസ് = "my_class_ffR5" >...</h5>
<div ക്ലാസ് = "my_class_ffR5" >...</div>
<p ക്ലാസ് = "my_class_ffR5" >...<തിരഞ്ഞെടുത്ത ടെക്സ്റ്റ് ബ്ലോക്ക്

ക്ലാസ് അല്ലെങ്കിൽ ഐഡി - എന്താണ് ഉപയോഗിക്കേണ്ടത്?

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

ലക്ഷ്യം CSS സൃഷ്ടിക്കൽ

നിരവധി സൈറ്റുകൾ കൊണ്ടുവരിക

CSS ഉപയോഗിച്ചുള്ള ലേഔട്ട്.

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

നിങ്ങളുടെ ബ്രൗസറുകളിൽ സൈറ്റുകളുടെ അത്തരം വർണ്ണാഭമായ പ്രദർശനം നേടാൻ നിങ്ങളെ അനുവദിക്കുന്ന സാങ്കേതികവിദ്യയെ CSS എന്ന് വിളിക്കുന്നു.

CSS എന്നത് കാസ്‌കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകളുടെ ചുരുക്കമാണ് - കാസ്‌കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ എന്ന് വിവർത്തനം ചെയ്യപ്പെടുന്നു. ഒരു മാർക്ക്അപ്പ് ഭാഷ ഉപയോഗിച്ച് എഴുതിയ ഒരു പ്രമാണത്തിൻ്റെ രൂപം വിവരിക്കുന്നതിനുള്ള ഒരു ഔപചാരിക ഭാഷ.

ഭാഷകൾ ഉപയോഗിച്ച് എഴുതിയ വെബ് പേജുകളുടെ രൂപം വിവരിക്കുന്നതിനും രൂപകൽപ്പന ചെയ്യുന്നതിനുമുള്ള ഒരു ഉപാധിയായാണ് പ്രധാനമായും ഉപയോഗിക്കുന്നത് HTML മാർക്ക്അപ്പ്കൂടാതെ XHTML.

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

ഒരു പ്രത്യേക പരിതസ്ഥിതിയിൽ ഒരു വസ്തുവിൻ്റെ ബാഹ്യ പ്രാതിനിധ്യം നിർവചിക്കുന്ന പാരാമീറ്ററുകളുടെ ഒരു കൂട്ടമാണ് ശൈലി.

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

പ്രമാണത്തിൻ്റെ ഉള്ളടക്കങ്ങൾ അടയാളപ്പെടുത്തുന്നതിന് മാത്രമായിരുന്നു തുടക്കത്തിൽ html ഉപയോഗിച്ചിരുന്നത് എന്നതാണ് വസ്തുത. ആ. അതിൻ്റെ സഹായത്തോടെ ഇതൊരു ഖണ്ഡികയാണെന്നും ഇത് ഒരു പട്ടികയാണെന്നും ഇതൊരു ചിത്രമാണെന്നും സൂചിപ്പിച്ചു.

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

വലിപ്പം, നിറം, ടൈപ്പ്ഫേസ് തുടങ്ങിയ ഫോണ്ട് സവിശേഷതകൾ മാറ്റുന്നതിനുള്ള ഒരു കണ്ടെയ്നറാണ്. ഈ ടാഗ് ഇപ്പോഴും എല്ലാ ബ്രൗസറുകളും പിന്തുണയ്‌ക്കുന്നുണ്ടെങ്കിലും, ഇത് കാലഹരണപ്പെട്ടതായി കണക്കാക്കുകയും അതിൻ്റെ ഉപയോഗം സ്റ്റൈലുകൾക്ക് അനുകൂലമായി ഉപേക്ഷിക്കാൻ ശുപാർശ ചെയ്യുകയും ചെയ്യുന്നു.

CSS നെക്കുറിച്ചുള്ള ഒരു ആമുഖ ലേഖനം, അതിൽ നിന്ന് നിങ്ങൾക്ക് പരിചിതമാകും പൊതു ആശയങ്ങൾ, എന്താണ് CSS, അത് എന്തിനുവേണ്ടിയാണ്. അതിൻ്റെ വാക്യഘടനയും കഴിവുകളും നമുക്ക് ഹ്രസ്വമായി പരിശോധിക്കാം. നമുക്ക് നിർവചനത്തിൽ നിന്ന് ആരംഭിക്കാം

1. CSS ൻ്റെ നിർവ്വചനം

സി.എസ്.എസ്(ഇംഗ്ലീഷിൽ നിന്ന് "കാസ്‌കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ", കാസ്‌കേഡിംഗ് സ്‌റ്റൈൽ ഷീറ്റുകൾ) - html-ലെ ഒരു വെബ്‌സൈറ്റിനായുള്ള ശൈലികളുടെ ഒരു ലിസ്റ്റ്

എന്താണ് ശൈലി? ഏകദേശം പറഞ്ഞാൽ, സൈറ്റിൽ ഒരു ഘടകം എങ്ങനെ കാണപ്പെടുന്നു എന്നതാണ് ശൈലി. ഉദാഹരണത്തിന്, ഏത് വാചകവും 10 പിക്സൽ അല്ലെങ്കിൽ 14 പിക്സൽ വലുപ്പത്തിൽ എഴുതാം. നിങ്ങൾക്ക് കറുപ്പിലോ നീലയിലോ എഴുതാം. നിങ്ങൾക്ക് അടിവരയിടാം/ടിൽറ്റ് ചെയ്യാം/സ്ട്രൈക്ക് ചെയ്യാം. ടെക്സ്റ്റ് ഫോർമാറ്റിംഗുമായി ബന്ധപ്പെട്ട എല്ലാം CSS വഴിയാണ് ചെയ്യുന്നത്.

എന്നാൽ ഇത് സാധ്യതകളുടെ ഒരു ചെറിയ ഭാഗം മാത്രമാണ്. എല്ലാ html ടാഗുകളുടെയും എല്ലാ ദൃശ്യവൽക്കരണത്തിനും CSS ഉത്തരവാദിയാണ്. വേണ്ടി പോലും ചലനാത്മകമായ മാറ്റങ്ങൾ: ഡ്രോപ്പ്-ഡൗൺ മെനുകൾ, ഹോവറിൽ ലിങ്കുകൾ ഹൈലൈറ്റ് ചെയ്യുന്നു.

എല്ലാ ശൈലികളുടെയും ഒരു ലിസ്റ്റിനെ വെബ്‌മാസ്റ്ററുടെ ഭാഷയിൽ "CSS സ്റ്റൈൽ ഷീറ്റ്" എന്ന് വിളിക്കാറുണ്ട്.

2. CSS-ൻ്റെ ലക്ഷ്യങ്ങളും ലക്ഷ്യങ്ങളും

• സൈറ്റിനെ കൂടുതൽ മനോഹരമാക്കുക (രൂപകൽപ്പനയുടെ കാര്യത്തിൽ), ഒരു ഫ്രണ്ട്ലി ഇൻ്റർഫേസ് ഉണ്ടാക്കുക, അങ്ങനെ സൈറ്റുകൾ പരസ്പരം എങ്ങനെയെങ്കിലും വ്യത്യസ്തമായിരിക്കും
• വേർതിരിക്കുക html കോഡ്ശൈലിയിൽ നിന്നും ഡിസൈൻ വിവരണ കോഡിൽ നിന്നും

3. CSS വാക്യഘടന (സെലക്ടറുകൾ)

ഓരോ വസ്തുവും ശൈലിയും "സെലക്ടർമാർ" വഴി വിവരിച്ചിരിക്കുന്നു. അതിൻ്റെ വാക്യഘടന ഇപ്രകാരമാണ്

സെലക്ടർ (ആട്രിബ്യൂട്ട്: മൂല്യം;)

സെലക്ടർ- ഇത് ഒരു ശൈലിയുടെയോ ടാഗിൻ്റെയോ പേരായിരിക്കാം. IN ചുരുണ്ട ബ്രേസുകൾനിർദ്ദിഷ്ട നിയമങ്ങൾ വിവരിച്ചിരിക്കുന്നു. വിവരണം എല്ലായ്പ്പോഴും ഒരേ മാനദണ്ഡം പിന്തുടരുന്നു: "ആട്രിബ്യൂട്ട് നാമം: മൂല്യം". എല്ലാ നിയമങ്ങളും ഒരു അർദ്ധവിരാമത്തിൽ അവസാനിക്കണം.

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

.style_name (attribute1 : values1; attribute2 : values2; ... );

CSS ശൈലികൾ വ്യക്തമാക്കുന്നതിന് നിരവധി ഓപ്ഷനുകൾ ഉണ്ട്. ഉദാഹരണങ്ങൾക്കൊപ്പം ഏറ്റവും ജനപ്രിയമായവ നോക്കാം.

/*ഒരു പൊതു ശൈലി ക്രമീകരിക്കുന്നു*/ .global_style (ഫോണ്ട് വലുപ്പം: 12px; നിറം: ചുവപ്പ്;) /**/ font.style1 (അക്ഷര വലുപ്പം: 10px; നിറം: നീല;) /* ഇതിനായി മാത്രം ഒരു പൊതു ശൈലി സജ്ജീകരിക്കുന്നു ഫോണ്ട് ടാഗ് */ #global_style2 (font-size: 14px; color: red; ) h1 (font-size: 19px;)

ഗ്ലോബൽ_സ്റ്റൈൽ ശൈലി എല്ലാ ടാഗുകൾക്കും ഒരു ക്ലാസായി ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്,

.

style1 ഒരു ടാഗിൽ മാത്രമേ ഉപയോഗിക്കാൻ കഴിയൂ കാരണം നിർവചനത്തിൽ font.style1 വ്യക്തമാക്കിയിട്ടുണ്ട്.

ടാസ്ക്കിനുള്ള മൂന്നാമത്തെ ഓപ്ഷൻ ഗ്രിഡിലൂടെയാണ് (#). ആദ്യ സംഭവത്തിലെന്നപോലെ, ഇത് എല്ലാ ഘടകങ്ങൾക്കും നിർവചിച്ചിരിക്കുന്നു, പക്ഷേ ഇത് ക്ലാസിലൂടെയല്ല, ഐഡി ആട്രിബ്യൂട്ട് വഴിയാണ് വ്യക്തമാക്കേണ്ടത്:

അവസാന ഓപ്‌ഷനിൽ ഞങ്ങൾ ടാഗ് നാമം വ്യക്തമാക്കിയിട്ടുണ്ട്

അവനുവേണ്ടി ഒരു ശൈലി നിർദേശിക്കുകയും ചെയ്തു. ഇതിനർത്ഥം ഇപ്പോൾ എല്ലാ ടാഗുകളും എന്നാണ്

ഈ ശൈലിയുടെ മൂല്യം അവകാശമാക്കും.

4. എങ്ങനെ, എവിടെ CSS ശൈലികൾ സജ്ജീകരിക്കണം

5. CSS ഉപയോഗിക്കുന്നതിൻ്റെ ഗുണങ്ങൾ എന്തൊക്കെയാണ്

• ഡിസൈൻ മാറ്റാൻ എളുപ്പമാണ്. ഒരിടത്ത് മാത്രം ശൈലി മാറ്റിയാൽ മതി, സൈറ്റിൻ്റെ എല്ലാ പേജിലും അത് മാറും
• ഇത് ഒരേയൊരു വഴിസൈറ്റിലെ ഡിസൈൻ മാറ്റുക
• ലളിതമായ ഭാഷാ വാക്യഘടന

6. ബ്രൗസറുകളിലെ CSS പ്രശ്നങ്ങൾ

എല്ലാ പഴയ ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നില്ല CSS സവിശേഷതകൾ. ഇത് ഡിസ്പ്ലേ പ്രശ്നങ്ങൾക്ക് കാരണമാകുന്നു. ഉദാഹരണത്തിന്, ഉള്ളടക്കത്തെക്കുറിച്ചുള്ള ധാരണ മെച്ചപ്പെടുത്താൻ ഉദ്ദേശിച്ചുള്ള ഒരു പ്രഭാവം വിപരീത ഫലത്തിലേക്ക് നയിച്ചേക്കാം. ചില പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുന്നില്ലെങ്കിൽ, ബ്ലോക്കുകൾ, ടെക്സ്റ്റുകൾ പരസ്പരം ഓവർലാപ്പ് ചെയ്യാനുള്ള സാധ്യതയുണ്ട്.

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

• -moz- വേണ്ടി ഫയർഫോക്സ് ബ്രൗസർ
• -വെബ്കിറ്റ്- വേണ്ടി Chrome ബ്രൗസറുകൾസഫാരിയും (രണ്ട് ബ്രൗസറുകളും ഒരേ റെൻഡറിംഗ് എഞ്ചിൻ ഉപയോഗിക്കുന്നു)
• ബ്രൗസറിനായി -ms- ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ
• ഓപ്പറ ബ്രൗസറിനായി -o-

7. പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾക്കുള്ള ഉത്തരങ്ങൾ

7.1 എന്താണ് CSS3

IN ഈയിടെയായിനിങ്ങൾക്ക് പലപ്പോഴും CSS3 എന്ന ആശയം കാണാൻ കഴിയും. അടിസ്ഥാനപരമായി ഇത് ഒരേ CSS ആണ്, എന്നാൽ നൽകുന്ന ഒരു കൂട്ടം പുതിയ ആർഗ്യുമെൻ്റുകൾ അധിക സവിശേഷതകൾവിവിധ ഇഫക്റ്റുകളുടെ കാര്യത്തിൽ. ഉദാഹരണത്തിന്, തിളങ്ങുന്ന വാചകം. പല ബ്രൗസറുകളും അത്തരം ഗുണങ്ങളെ പിന്തുണയ്ക്കുന്നില്ല, അതിനാൽ അത്തരം ഇഫക്റ്റുകൾ കുറഞ്ഞ അളവിൽ ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നു.

7.2 CSS ഉം HTML ഉം തമ്മിലുള്ള വ്യത്യാസം എന്താണ്?

HTML എന്നത് നിങ്ങളുടെ പേജിൻ്റെ ചട്ടക്കൂടാണ് (ഇവ ലിങ്കുകൾ, ചിത്രങ്ങൾ, ഉള്ളടക്കം എന്നിവയാണ്). കൂടാതെ, ഇതെല്ലാം ഉപയോക്താവിന് എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്ന് CSS നിർണ്ണയിക്കുന്നു. അതിനാൽ HTML ഉം CSS ഉം അടിസ്ഥാനപരമായി വ്യത്യസ്തമായ കാര്യങ്ങളാണ്, എന്നാൽ അവ ബന്ധപ്പെട്ടിരിക്കുന്നു. ഒരു പേജിൽ കോഡുകൾ മിശ്രണം ചെയ്യാതിരിക്കാൻ അവ പരസ്പരം വേർപെടുത്തുക എന്നതാണ് നല്ല രൂപത്തിൻ്റെ നിയമം.