ഐഡിയും ക്ലാസും തമ്മിലുള്ള വ്യത്യാസം എന്താണ്. CSS - അതെന്താണ്

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

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

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

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

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

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

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

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

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

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

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

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

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

നിഗമനങ്ങളുടെ വെബ്സൈറ്റ്

ഒരു വെബ് പേജ് സൃഷ്ടിക്കുന്ന ഭാഷയാണ് HTML. ഈ വെബ് പേജിൻ്റെ രൂപകൽപ്പന നിയന്ത്രിക്കുന്ന സാങ്കേതികവിദ്യയാണ് CSS.
ഒരു പേജ് ഡിസൈൻ വീക്ഷണകോണിൽ നിന്ന്, HTML-ൽ ഡിസൈൻ എഴുതുന്നതിനേക്കാൾ CSS കൂടുതൽ സൗകര്യപ്രദമാണ്, കാരണം കോഡിൻ്റെ വലുപ്പം ഗണ്യമായി കുറയ്ക്കാനും ഒരേസമയം നിരവധി പേജുകൾക്കായി ഡിസൈൻ സജ്ജമാക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു.

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

അങ്ങനെ, TheDifference.ru HTML, CSS എന്നിവയ്ക്കിടയിൽ ഇനിപ്പറയുന്ന വ്യത്യാസങ്ങൾ കണ്ടെത്തി:

ഒരു വെബ് പേജ് സൃഷ്ടിക്കുന്ന ഭാഷയാണ് HTML. ഈ വെബ് പേജിൻ്റെ രൂപകൽപ്പന നിയന്ത്രിക്കുന്ന സാങ്കേതികവിദ്യയാണ് CSS.
ഒരു പേജ് ഡിസൈൻ വീക്ഷണകോണിൽ നിന്ന്, HTML-ൽ ഡിസൈൻ എഴുതുന്നതിനേക്കാൾ CSS കൂടുതൽ സൗകര്യപ്രദമാണ്, കാരണം കോഡിൻ്റെ വലുപ്പം ഗണ്യമായി കുറയ്ക്കാനും ഒരേസമയം നിരവധി പേജുകൾക്കായി ഡിസൈൻ സജ്ജമാക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു.

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

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

സാരാംശം

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

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

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

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

...

ആങ്കർ ലിങ്കുകൾ പേജിലെ ചില ഘടകങ്ങളിലേക്ക് നിങ്ങൾക്ക് ഒരു ലിങ്ക് നൽകണമെങ്കിൽ, നിങ്ങൾ അതിന് ഒരു ഐഡി നൽകിയാൽ മതി ( ) കൂടാതെ ഒരു ആങ്കർ ഉപയോഗിച്ച് അതിലേക്ക് ലിങ്ക് ചെയ്യുക (http://site/path/#about). വഴിയിൽ, ഇത് പഴയ രീതിക്ക് പകരം തിരഞ്ഞെടുക്കപ്പെട്ട രീതിയാണ്

. ഒന്നിലധികം അടയാളങ്ങൾ

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

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

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

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

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

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

...

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

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

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

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

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

ഒരു സ്ക്രിപ്റ്റിൽ തിരയുന്നു "id" ഉള്ള ഒരു ഘടകം ഡോക്യുമെൻ്റ്.getElementById() ഫംഗ്ഷൻ ഉപയോഗിച്ച് ഒരു സ്ക്രിപ്റ്റിൽ എളുപ്പത്തിൽ കണ്ടെത്താനാകും. ക്ലാസുകൾക്ക് അത്തരം പ്രവർത്തനങ്ങളൊന്നുമില്ല. ഈ ലേഖനം "പാഠപുസ്തകം" എന്ന തലക്കെട്ടിൽ പുരോഗമിക്കുന്ന ഒരു പരമ്പരയുടെ ഭാഗമാണ്. "പാഠപുസ്തകം" വിഭാഗത്തിൽ കാണാവുന്ന മറ്റ് ലേഖനങ്ങൾ വായിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു, അവ ഇപ്പോൾ വിപരീത കാലക്രമത്തിൽ ശേഖരിക്കുന്നു., എന്താണ് 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 ഉം അടിസ്ഥാനപരമായി വ്യത്യസ്തമായ കാര്യങ്ങളാണ്, എന്നാൽ അവ ബന്ധപ്പെട്ടിരിക്കുന്നു. ഒരു പേജിൽ കോഡുകൾ മിശ്രണം ചെയ്യാതിരിക്കാൻ അവ പരസ്പരം വേർപെടുത്തുക എന്നതാണ് നല്ല രൂപത്തിൻ്റെ നിയമം.