Span, Div HTML കോഡുകൾ എങ്ങനെയാണ് ഉപയോഗിക്കുക

വലിയ ശൈലി, ലേഔട്ട് നിയന്ത്രണങ്ങൾ എന്നിവയ്ക്കായുള്ള CSS ഉപയോഗിച്ച് span, div ഉപയോഗിയ്ക്കുക.

വെബ് ഡിസൈനും HTML / CSS- യും പുതിയവയുമായ പലരും വെബ്പേജുകൾ നിർമ്മിക്കുന്നതോടൊപ്പം ,

ഘടകങ്ങൾ പരസ്പരപൂരകങ്ങളായി ഉപയോഗിക്കും. യാഥാർത്ഥ്യത്തിൽ, ഓരോ HTML ഘടകങ്ങളുടെയും ഓരോ വ്യത്യസ്ത ഉദ്ദേശ്യങ്ങൾ പ്രവർത്തിക്കുന്നു എന്നതാണ്. ഓരോ ഉദ്ദേശ്യങ്ങൾക്കും ഉപയോഗിക്കാൻ പഠിക്കുന്നത്, കോഡ് നിയന്ത്രിക്കുന്നതിന് എളുപ്പമുള്ള ക്ലിയർ വെബ് പേജുകൾ വികസിപ്പിക്കുന്നതിന് നിങ്ങളെ സഹായിക്കും.

ഘടകം ഉപയോഗിയ്ക്കുന്നു

നിങ്ങളുടെ വെബ്പേജിലെ ഭാഗിക ഡിവിഷനുകൾ ഡിവി ഘടകം നിർവ്വചിക്കുന്നു.

അടിസ്ഥാനപരമായി ഒത്തുചേർന്ന മറ്റ് HTML ഘടകങ്ങൾ നിങ്ങൾക്ക് സ്ഥാപിക്കാൻ കഴിയുന്ന ഒരു ബോക്സ് ആണ് ഇത്. ഒരു ഡിവിഷനിലെ അതിലെ മറ്റ് ഘടകങ്ങൾ, ഖണ്ഡികകൾ, തലക്കെട്ടുകൾ, ലിസ്റ്റുകൾ, ലിങ്കുകൾ, ഇമേജുകൾ മുതലായവ അതിൽ അടങ്ങിയിരിക്കാം. ഇത് നിങ്ങളുടെ HTML പ്രമാണത്തിലേക്ക് കൂടുതൽ ഘടനയും ഓർഗനൈസേഷനും നൽകുന്നതിന് അതിനുള്ളിൽ മറ്റ് ഡിവിഷനുകൾ ഉണ്ടായിരിക്കാം.

Div ഘടകം ഉപയോഗിക്കുന്നതിന്, നിങ്ങളുടെ പേജിന്റെ വിഭജിക്കുന്നതിനു മുൻപായി ഒരു പ്രത്യേക ഡിവിഷനും അതിനുശേഷം ഒരു <

div ഉള്ളടക്കം

നിങ്ങളുടെ പേജിന്റെ പ്രദേശം പിന്നീടുണ്ടാകുമ്പോൾ CSS ഉപയോഗിച്ച് നിങ്ങൾ ഉപയോഗിക്കുന്ന കൂടുതൽ ചില വിവരങ്ങൾ ആവശ്യമാണെങ്കിൽ, നിങ്ങൾക്ക് ഒരു ഐഡി സെലക്ടർ (ഉദാ:

id = "myDiv">) അല്ലെങ്കിൽ ക്ലാസ് സെലക്ടർ (ഉദാ: class = "bigDiv">). ഈ ആട്രിബ്യൂട്ടുകൾക്ക് ഒന്നുകിൽ CSS ഉപയോഗിച്ച് മാറ്റം വരുത്താവുന്നതാണ് അല്ലെങ്കിൽ JavaScript ഉപയോഗിച്ച് പരിഷ്കരിച്ചവയാണ്. നിലവിലെ മികച്ച സമ്പ്രദായങ്ങൾ ഐഡിക്ക് പകരം ക്ലാസ്സ് സെലക്ടറുകളിലേക്ക് ഉപയോഗിക്കുന്നതാണ്, പ്രത്യേക ഐഡി സെലക്ടർമാർ എങ്ങനെയാണെന്നതിന്റെ കാരണം. സത്യത്തിൽ, എന്നിരുന്നാലും നിങ്ങൾക്ക് ഒന്നോ അതിലധികമോ ഒരു ഐഡിയും ഒരു ക്ലാസ് സെലറും നൽകാം.

Versus
എപ്പോൾ ഉപയോഗിക്കണം

വിഭജിച്ചിരിക്കുന്ന ഉള്ളടക്കം ഏതെങ്കിലും അർഥവത്തായ അർത്ഥം നൽകാത്തതിനാൽ, ഡിവിഡി ഘടകം HTML5 വിഭാഗ ഘടകത്തിൽ നിന്ന് വ്യത്യസ്തമാണ്. ഉള്ളടക്കത്തിന്റെ ബ്ലോക്ക് ഒരു ഭാഗമോ ഭാഗമോ ആയിരിക്കണമോ എന്ന് ഉറപ്പില്ലെങ്കിൽ, ഏത് ഘടകത്തിൻറെയും ഉദ്ദേശ്യവും നിങ്ങൾക്ക് ഉപയോഗിക്കണമെന്ന് തീരുമാനിക്കാൻ സഹായിക്കുന്നതിനെക്കുറിച്ച് ചിന്തിക്കുക:

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

ആത്യന്തികമായി, ദ്വിഭാഗങ്ങളും വിഭാഗങ്ങളും ഒരേപോലെ പെരുമാറുന്നു, അവയിൽ ഒന്നിൽ നിങ്ങൾക്ക് ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ നൽകാനും നിങ്ങളുടെ സൈറ്റിന്റെ രൂപരേഖ ലഭിക്കുന്നതിന് CSS ഉപയോഗിച്ച് അവ നടത്താനുമാകും. ഇവ രണ്ടും ബ്ലോക്ക് ലെവൽ ഘടകങ്ങളാണ്.

എലമെന്റ് ഉപയോഗിയ്ക്കുന്നു

Span ഘടകം സ്ഥിരമായി ഒരു ഇൻലൈൻ ഘടകമാണ്. ഇത് div, വിഭാഗ ഘടകങ്ങളിൽ നിന്നും വ്യത്യസ്തമാണ്. സ്പാൻ ഘടകങ്ങൾ സാധാരണയായി ഒരു പ്രത്യേക ഉള്ളടക്ക ഉള്ളടക്കം, സാധാരണ വാചകം, പിന്നീട് അതിനെ രൂപകൽപ്പന ചെയ്യാൻ കഴിയുന്ന ഒരു "ഹുക്ക്" കൊടുക്കാൻ ഉപയോഗിക്കുന്നു. സി.എസ്.എസ് ഉപയോഗിച്ചുകൊണ്ട്, അത് ഉൾക്കൊള്ളുന്ന വാചകത്തിന്റെ ശൈലി മാറ്റാൻ കഴിയും; എന്നിരുന്നാലും, ഏതെങ്കിലും ശൈലി ആട്രിബ്യൂട്ടുകൾ ഇല്ലാതെ, സ്പാൻ മൂലകം മാത്രം ടെക്സ്റ്റിൽ യാതൊരു സ്വാധീനവും ഇല്ല.

Span- ഉം div ഘടകങ്ങളും തമ്മിലുള്ള പ്രധാന വ്യത്യാസം ഇത് തന്നെയാണ്. മുകളിൽ സൂചിപ്പിച്ചതുപോലെ, div ഘടകത്തിൽ ഒരു ഖണ്ഡിക ബ്രേക്ക് ഉൾപ്പെടുന്നു, സ്പാൻ ഘടകം ടാഗുകൾ ഉപയോഗിച്ച് ബന്ധപ്പെടുത്തിയിരിക്കുന്ന CSS ശൈലി നയങ്ങൾ പ്രയോഗിക്കാൻ ബ്രൌസറിന് മാത്രമേ പറയുന്നുള്ളൂ:


ഹൈലൈറ്റ് ചെയ്ത വാചകം , ഹൈലൈറ്റ് ചെയ്യാത്ത വാചകം.

Class = "ഹൈലൈറ്റ്" അല്ലെങ്കിൽ മറ്റ് ക്ലാസ് സ്പാൻ ഘടകത്തിൽ (ഉദാ: class = "highlight">) ടെക്സ്റ്റുമായി ശൈലി ചേർക്കും.

Span എലമെന്റിന് ആവശ്യമുള്ള ആട്രിബ്യൂട്ടുകൾ ആവശ്യമില്ല, പക്ഷെ ഏറ്റവും ഉപകാരപ്രദമായ മൂന്ന് സംഖ്യകൾ div ഘടകം തന്നെയാണ്.

  • ശൈലി
  • ക്ലാസ്
  • id

പ്രമാണത്തിലെ ഒരു പുതിയ ബ്ലോക്ക്-ലെവൽ എലമെന്റിനെ ആ ഉള്ളടക്കം നിർവ്വചിക്കാതെ ഉള്ളടക്കത്തിന്റെ ശൈലി മാറ്റാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോഴെല്ലാം സ്പാൻ ഉപയോഗിക്കുക.

ഉദാഹരണത്തിന്, നിങ്ങൾ ഒരു h3 എന്നതിന്റെ രണ്ടാമത്തെ പദം ചുവപ്പ് ആകാം എന്നുണ്ടെങ്കിൽ, ആ പദത്തെ ഒരു span ഘടകം ഉപയോഗിച്ച് ചുറ്റാൻ കഴിയുന്നതാണ്, ആ വാക്ക് ചുവന്ന വാചകമായി ഉപയോഗിക്കാം. ഇപ്പോഴും h3 മൂലകത്തിന്റെ ഭാഗമായി ഇപ്പോഴും നിലനിൽക്കുന്നു, പക്ഷേ ഇപ്പോൾ ചുവപ്പുനിറത്തിൽ കാണിക്കുന്നു:

ഇത് എന്റെ ആകർഷണീയമായ തലക്കെട്ടാണ്

എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 2/2/17 ന്