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

ഐഡി

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

ഉദാഹരണം 1: ഐഡൻ്റിഫയറുകൾ (ഐഡികൾ) ഉപയോഗിക്കുന്നത് എങ്ങനെ ഉചിതമല്ല

തിരഞ്ഞെടുത്ത ടെക്സ്റ്റ് ബ്ലോക്ക്

തിരഞ്ഞെടുത്ത ടെക്സ്റ്റ് ബ്ലോക്ക്

ഉദാഹരണം 2: ഐഡൻ്റിഫയറുകൾ (ഐഡികൾ) എങ്ങനെ ഉപയോഗിക്കരുത്

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

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

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

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

ഈ ഖണ്ഡികയ്ക്ക് my_class എന്ന ക്ലാസും my_id ഐഡൻ്റിഫയറും നൽകിയിട്ടുണ്ട്.

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

നിങ്ങൾ ശൈലി ചേർക്കുകയാണെങ്കിൽ: ഡിസ്ക്രിപ്റ്ററിലേക്ക്, ഫലം ഇതുപോലെയായിരിക്കും:

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

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

ഐഡി എലമെൻ്റ് കൂടുതൽ പുരാതനമായ നിർമ്മാണത്തിന് പകരം ഒരു HTML ആങ്കർ ആയി ഉപയോഗിക്കാവുന്നതാണ്, അതുവഴി നിങ്ങൾക്ക് ബാക്ക് ടു ടോപ്പിൻ്റെ സഹായത്തോടെ പേജ് റീലോഡ് ചെയ്യാതെ തന്നെ ഒരു പ്രത്യേക ഭാഗത്തേക്ക് ലിങ്ക് ചെയ്യാം. പേജിൽ സമാനമായ നിരവധി ഐഡികൾ ഉണ്ടെങ്കിൽ, അവ്യക്തമായ ഒരു സാഹചര്യം ഉടലെടുക്കും.

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

ക്ലാസ്

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

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

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

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 ക്ലാസുകൾ നൽകുമ്പോൾ മാത്രമേ വലത് അലൈൻമെൻ്റ് ബാധകമാകൂ:

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

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

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

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

...
...
...
...
...

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

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

നിയന്ത്രണം രൂപംനിരവധി സെലക്ടറുകൾ ഉപയോഗിച്ച് ഒരു പേജിലെ HTML ഘടകങ്ങൾ സൃഷ്ടിക്കാൻ കഴിയും. ഐഡിയും CSS ക്ലാസും ഏറ്റവും സാധാരണമാണ്, ഇത് HTML ഡോക്യുമെൻ്റ് മാർക്ക്അപ്പ് സൃഷ്ടിക്കുന്നതിൽ മാത്രമല്ല, അവയുടെ രൂപകൽപ്പനയിലും (സ്റ്റൈലിംഗ്) സഹായിക്കുന്നു.

ഒരു CSS ഐഡി സെലക്ടർ എങ്ങനെ ഉപയോഗിക്കാം

ഒരു അദ്വിതീയ ഐഡി ആട്രിബ്യൂട്ട് മൂല്യം ഉപയോഗിച്ച് ഒരൊറ്റ HTML ഘടകം നിയോഗിക്കാൻ ഐഡി സെലക്ടർ ഉപയോഗിക്കുന്നു. ഇനിപ്പറയുന്ന ഉദാഹരണം ഐഡി ആട്രിബ്യൂട്ട് മൂല്യം ഹെഡറായ ഒരു ഘടകത്തെ പ്രതിനിധീകരിക്കുന്നു.

CSS-ൽ, ഈ div ഘടകത്തിലേക്ക് നിങ്ങൾക്ക് വ്യത്യസ്ത ശൈലികൾ പ്രയോഗിക്കാൻ കഴിയും:

#തലക്കെട്ട് (വീതി: 100%; ഉയരം: 80px; പശ്ചാത്തലം: നീല )

നിങ്ങളുടെ പേരിന് മുമ്പായി # ചിഹ്നം (ഹാഷ്‌ടാഗ്) ഉപയോഗിക്കാൻ ഓർമ്മിക്കുക. ഇതിനെക്കുറിച്ച് കൂടുതൽ ഇവിടെയും ഇവിടെയും നിങ്ങൾക്ക് കണ്ടെത്താനാകും.

CSS ക്ലാസ് സെലക്ടർ എങ്ങനെ ഉപയോഗിക്കാം

ഒരേ ക്ലാസ് ആട്രിബ്യൂട്ട് മൂല്യമുള്ള ഒരു വ്യക്തിയെയോ HTML ഘടകങ്ങളുടെ ഒരു ഗ്രൂപ്പിനെയോ തിരഞ്ഞെടുക്കാൻ HTML CSS ക്ലാസ് സെലക്ടർ ഉപയോഗിക്കുന്നു.

CSS-ൽ, നിങ്ങൾക്ക് ഒന്നിലധികം ഖണ്ഡികകളിൽ വ്യത്യസ്ത ശൈലികൾ പ്രയോഗിക്കാൻ കഴിയും:

ഉള്ളടക്കം (മാർജിൻ: 20px 0; ലൈൻ-ഉയരം: 24px; ഫോണ്ട് വലുപ്പം: 15px )

ചിഹ്നം ഉപയോഗിക്കാൻ മറക്കരുത്.

(ഡോട്ട്) ഒരു CSS റൂൾ പ്രഖ്യാപിക്കുമ്പോൾ ക്ലാസ്സിൻ്റെ പേരിന് മുമ്പ്. ഇതിനെക്കുറിച്ച് കൂടുതൽ ഇവിടെയും ഇവിടെയും നിങ്ങൾക്ക് കണ്ടെത്താനാകും. അവർ എങ്ങനെ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു? CSS ക്ലാസ്

ഐഡിയും വ്യക്തിഗത പേജ് ഘടകങ്ങൾക്ക് (#ഹെഡർ) ഐഡി സെലക്ടർ ഉപയോഗിക്കുന്നു, അതേസമയം ക്ലാസ് സെലക്ടർ (.ഉള്ളടക്കം) പലതിനും ഉപയോഗിക്കുന്നു. ഒരു HTML ഘടകത്തിന് മാത്രമേ ഐഡി മൂല്യം നൽകിയിട്ടുള്ളൂ. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ഒന്നിലധികം ഘടകങ്ങൾ ഉണ്ടാകില്ലഒരേ മൂല്യം ഒന്നിനുള്ളിൽ ഐഡിപ്രത്യേക പേജ്

. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് id #header ഉള്ള ഒരു ഘടകം മാത്രമേ ഉണ്ടാകൂ, അല്ലെങ്കിൽ id #footer ഉള്ള ഒരു ഘടകം.

ഒന്നോ അതിലധികമോ HTML ഘടകങ്ങൾക്ക് ഒരേ ക്ലാസ് മൂല്യം നൽകാം. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് .content ക്ലാസിനൊപ്പം നിരവധി ഖണ്ഡികകൾ അല്ലെങ്കിൽ .external ക്ലാസുമായി നിരവധി ലിങ്കുകൾ ഉണ്ടായിരിക്കാം.

CSS ക്ലാസും ഐഡിയും തമ്മിലുള്ള വ്യത്യാസങ്ങളും അത് എങ്ങനെ ശരിയായി ഉപയോഗിക്കാമെന്നും നന്നായി മനസ്സിലാക്കാൻ ഇനിപ്പറയുന്ന ഉദാഹരണം നിങ്ങളെ സഹായിക്കും: ലിങ്ക് 1 ലിങ്ക് 2 ലിങ്ക് 3

ലിങ്ക് 4

ഇത് ഞങ്ങളുടെ ആദ്യ ഖണ്ഡികയാണ്.

ഇത് ഞങ്ങളുടെ രണ്ടാമത്തെ ഖണ്ഡികയാണ്.

ഇത് ഞങ്ങളുടെ മൂന്നാമത്തെ ഖണ്ഡികയാണ്. ഒരു കണ്ടെയ്‌നർ ഡിവി എലമെൻ്റ് ഉപയോഗിച്ച് ഞങ്ങൾ മുകളിൽ HTML മാർക്ക്അപ്പ് ആരംഭിച്ചു. ഞങ്ങളുടെ പേജിൽ ഒരു കണ്ടെയ്‌നർ മാത്രമേ ഉണ്ടാകൂ എന്നതിനാൽ ഞങ്ങൾ അതിന് ഒരു ഐഡി (#കണ്ടെയ്‌നർ) നൽകി. അതിനുള്ളിൽ ഞങ്ങൾ മെനു (#മെനു), ഉള്ളടക്കം (#ഉള്ളടക്കം) വിഭാഗങ്ങൾ സ്ഥാപിക്കുന്നു. കണ്ടെയ്‌നർ പോലെ, ഞങ്ങൾക്ക് ഒരു മെനുവും ഒരു ഉള്ളടക്ക വിഭാഗവും മാത്രമേ ഉണ്ടാകൂ. മെനുവിൽ നാല് ലിങ്കുകളുണ്ട്

, എന്നാൽ ഓരോന്നിനും ഞങ്ങൾ ഒരു CSS ക്ലാസ് (.link) പ്രയോഗിച്ചു. അതുപോലെ, ഉള്ളടക്ക ഡിവി എലമെൻ്റിലെ ഓരോ ഖണ്ഡികയിലും ഞങ്ങൾ (.ടെക്സ്റ്റ്) ക്ലാസ് പ്രയോഗിച്ചു.

നിങ്ങൾക്ക് ഈ ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യണമെങ്കിൽ, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന ഉദാഹരണം ഉപയോഗിക്കാം:

ക്ലാസ് എപ്പോഴാണ് ഉപയോഗിക്കുന്നത്, എപ്പോഴാണ് ഐഡി ഉപയോഗിക്കുന്നത്?

പേജിൽ ഒരിക്കൽ മാത്രം ദൃശ്യമാകുന്ന വ്യക്തിഗത ഘടകങ്ങൾക്ക് ഐഡി ഉപയോഗിക്കുന്നു. ഉദാഹരണത്തിന്, തലക്കെട്ട്, അടിക്കുറിപ്പ്, മെനു മുതലായവ. ഒരു പേജിൽ ഒന്നിലധികം തവണ ദൃശ്യമാകുന്ന ഒന്നോ അതിലധികമോ ഘടകങ്ങൾക്ക് ക്ലാസ് സെലക്ടർ ഉപയോഗിക്കുന്നു. ഉദാഹരണത്തിന്, ഖണ്ഡികകൾ, ലിങ്കുകൾ, ബട്ടണുകൾ, ഇൻപുട്ട് ഘടകങ്ങൾ. നിങ്ങൾക്ക് ക്ലാസ് ഉപയോഗിക്കാമെങ്കിലും വ്യക്തിഗത ഘടകം, എന്നാൽ ഈ സെലക്ടർമാരെ അവരുടെ ഉദ്ദേശിച്ച ആവശ്യത്തിനായി ഉപയോഗിക്കുന്നതാണ് നല്ലത്.

ഒരു HTML ഘടകത്തിന് ഒരു ഐഡിയും ക്ലാസും ഉണ്ടായിരിക്കാമെന്നതും നിങ്ങൾ കണക്കിലെടുക്കണം. പേജിൽ ഒരേ വലുപ്പവും സ്റ്റൈലിംഗും ഉള്ള രണ്ട് ബ്ലോക്കുകൾ ഉണ്ടെന്ന് നമുക്ക് അനുമാനിക്കാം, എന്നാൽ വ്യത്യസ്ത സ്ഥാനങ്ങൾ. ഈ സാഹചര്യത്തിൽ, വലുപ്പം മാറ്റുന്നതിനും സ്‌റ്റൈലിങ്ങിനുമായി ഈ ബ്ലോക്കുകളിൽ നിങ്ങൾക്ക് ഒരേ ക്ലാസ് പ്രയോഗിക്കാവുന്നതാണ്, തുടർന്ന് അവയ്ക്ക് വ്യത്യസ്ത സ്ഥാനനിർണ്ണയം നൽകുന്നതിന് ഓരോ ബ്ലോക്കിലും ഒരു പ്രത്യേക ഐഡി സെലക്ടർ ഉപയോഗിക്കുക.

ഘടകങ്ങൾ ഒരേ സമയം ഒന്നിലധികം ക്ലാസുകളിലേക്ക് ബന്ധിപ്പിക്കാനും കഴിയും. നിങ്ങൾ സ്റ്റൈലിംഗ് പ്രയോഗിക്കേണ്ടിവരുമ്പോൾ ഇത് വളരെ ഉപയോഗപ്രദമാണ് പ്രത്യേക ഗ്രൂപ്പ്ഘടകങ്ങൾ ചില തരം. ഉദാഹരണത്തിന്, എല്ലാ ഖണ്ഡികകളിലും പ്രയോഗിക്കുന്ന ഒരു ക്ലാസ് .content ഉണ്ട്. നിങ്ങൾക്ക് പലതിലേക്ക് ഒരു ബോർഡറോ മറ്റേതെങ്കിലും സ്റ്റൈലൈസേഷനോ ചേർക്കണമെങ്കിൽ പ്രത്യേക ഖണ്ഡികകൾഅധിക CSS p ക്ലാസ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് ചെയ്യാൻ കഴിയും .ബോർഡർ:

ഈ പോയിൻ്റിന് അതിരുകളില്ല.

ഈ പോയിൻ്റിന് പരിധികളുണ്ട്.

രണ്ട് ക്ലാസ് പേരുകൾക്കിടയിലുള്ള വൈറ്റ് സ്പേസ് ശ്രദ്ധിക്കുക ക്ലാസ് ആട്രിബ്യൂട്ട്രണ്ടാം ഖണ്ഡിക. CSS കോഡിൻ്റെ ഒരു ഉദാഹരണം ചുവടെ:

ഉള്ളടക്കം (മാർജിൻ: 10px; ഫോണ്ട് വലുപ്പം: 15px; നിറം: നീല).ബോർഡർഡ് (ബോർഡർ: 2px സോളിഡ് #222)

ഐഡിയും CSS ക്ലാസും ശരിയായി ഉപയോഗിക്കേണ്ടത് പ്രധാനമാണ് ദുരുപയോഗം HTML കോഡ് പ്രദർശിപ്പിക്കുന്നതിൽ പിശകുകളിലേക്ക് നയിച്ചേക്കാം.

“CSS Class vs ID: Which One to Use” എന്ന ലേഖനത്തിൻ്റെ പരിഭാഷ തയ്യാറാക്കിയത് സൗഹൃദ പ്രോജക്ട് ടീമാണ്.

നല്ല ചീത്ത

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

ഈ ടാഗിന് നന്ദി, പ്രമാണത്തിൻ്റെ മുഴുവൻ HTML കോഡിനും ദൃശ്യപരവും യുക്തിപരമായി മനസ്സിലാക്കാവുന്നതുമായ ഘടനയുണ്ട്. ലേഔട്ട് ഡിസൈനർക്ക് മാത്രമല്ല, ഒരു പ്രോജക്റ്റിൽ ഒരുമിച്ച് പ്രവർത്തിക്കുന്ന മറ്റ് സ്പെഷ്യലിസ്റ്റുകൾക്കും ഇത് മനസ്സിലാക്കാൻ എളുപ്പമാണ്. എന്നിരുന്നാലും, "ഉപഗ്രഹങ്ങൾ" ഇല്ലാത്ത ഒരു ടാഗ് - ഐഡിയും ക്ലാസ് സെലക്ടറുകളും - വിലപ്പോവില്ല.

ക്ലാസുകളും ഐഡികളും

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

ഇനിപ്പറയുന്ന HTML മാർക്ക്അപ്പ് കോഡ് ഉദാഹരണമായി പരിഗണിക്കുക: