CSS സെലക്ടർ ക്ലാസും ഐഡിയും തമ്മിലുള്ള വ്യത്യാസം എന്താണ്? HTML-ലെ ഐഡിയും ക്ലാസ് ഉപയോഗവും

CSS സെലക്ടർ ക്ലാസും ഐഡിയും തമ്മിലുള്ള വ്യത്യാസം എന്താണ്? HTML-ലെ ഐഡിയും ക്ലാസ് ഉപയോഗവും

ചെൻ വെയ്‌ലിയാങ്അടുത്തിടെ നടപ്പിലാക്കിയത്എസ്.ഇ.ഒ., സൈറ്റിന്റെ ഒപ്റ്റിമൈസ് ചെയ്യാൻവേർഡ്പ്രൈസ്തീം.

ഞാൻ മുമ്പ് കുറച്ച് അടിസ്ഥാന HTML, CSS പരിജ്ഞാനം പഠിച്ചിട്ടുണ്ടെങ്കിലും, കുറച്ച് സമയത്തേക്ക് ഞാൻ അത് പ്രവർത്തിപ്പിച്ചിട്ടില്ല, പ്രത്യേകിച്ച് CSS ഭാഗം ഉപയോഗം, അത് മറക്കാൻ എളുപ്പമാണ്.

അതിനാൽ, CSS സെലക്ടർ ഐഡിയുടെയും ക്ലാസിന്റെയും വ്യത്യാസവും ഉപയോഗവും ഇവിടെ രേഖപ്പെടുത്തുകയും സംഗ്രഹിക്കുകയും ചെയ്യുക:

• ഐഡി #div-യുമായി യോജിക്കുന്നു
• ക്ലാസ് .div ന് യോജിക്കുന്നു

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

ഐഡി വിവരണം

• ഐഡി എന്നത് ഒരു നിശ്ചിത ടാഗ് ആണ്, ഇത് വെബ് പേജിലെ വലിയ ശൈലി നിർവചിക്കാൻ ഉപയോഗിക്കുന്നു, അത് #div എന്ന രൂപത്തിൽ നിർവചിച്ചിരിക്കുന്നു
• ഉദാഹരണത്തിന്: വിഭജിക്കുന്ന നിരകൾ, മുകളിൽ, ബോഡി, താഴെ മുതലായവ...
• ഒരു നിർദ്ദിഷ്‌ട ഘടകത്തെ നിർവചിക്കാൻ ഇത് ഉപയോഗിക്കുന്നു, അത് ഒരു പേജിൽ ഒരിക്കൽ മാത്രമേ ദൃശ്യമാകൂ, ആവർത്തിച്ച് വിളിക്കാൻ കഴിയില്ല.

ക്ലാസ് വിവരണം

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

div സെലക്‌ടറിന് തന്നെ പ്രോപ്പർട്ടികൾ ഒന്നുമില്ല, അതിന്റെ css നിർവചിക്കുന്നതിലൂടെ, അത് div-ന്റെ വീതി, ഉയരം, പശ്ചാത്തല നിറം, ടെക്‌സ്‌റ്റ് വലുപ്പം തുടങ്ങിയ ചില ലേഔട്ടുകൾ നിയന്ത്രിക്കുന്നു.

ജനറൽഇ-കൊമേഴ്‌സ്വെബ്സൈറ്റ്,ഒരു വെബ്സൈറ്റ് നിർമ്മിക്കുകപ്രോഗ്രാം സൃഷ്ടിച്ച html വെബ് പേജ് CSS വഴി പേജ് ലേഔട്ട് സാക്ഷാത്കരിക്കുന്നതാണ്.

എന്താണ് സെലക്ടർ?

ഓരോ CSS ശൈലിയുടെയും നിർവചനം 2 ഭാഗങ്ങൾ ഉൾക്കൊള്ളുന്നു:

选择器 {样式}

• {} ന് മുമ്പുള്ള ഭാഗം "സെലക്ടർ" ആണ്.
• "സെലക്ടർ" അത് പ്രവർത്തിക്കുന്ന {} ന്റെ "ശൈലി" സൂചിപ്പിക്കുന്നു.
• അതായത്, വെബ് പേജിന്റെ ഏത് ഘടകത്തിലാണ് ഈ "ശൈലി" പ്രവർത്തിക്കുന്നത്?

കോഡ് ഉദാഹരണം

ഒരു ക്ലാസ്="സൈഡ്‌ബാർ" എലമെന്റ് എങ്ങനെ തിരഞ്ഞെടുത്ത് സ്റ്റൈൽ ചെയ്യാമെന്നത് ഇതാ:

.sidebar
{ 
background-color:black;
}

ഐഡി="ഫൂട്ടർ" ഉപയോഗിച്ച് ഒരു ഘടകം തിരഞ്ഞെടുത്ത് സ്റ്റൈൽ ചെയ്യുന്നതെങ്ങനെയെന്ന് ഇതാ:

#footer
{ 
background-color:black;
}