സ്റ്റൈൽ ക്ലാസുകളും ഐഡികളും ഉപയോഗിക്കുന്നു

ക്ലാസുകളും ID കളും നിങ്ങളുടെ CSS വിപുലീകരിക്കാൻ സഹായിക്കുക

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

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

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

ക്ലാസ് സെലക്ടർമാർ

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

p {വർണ്ണം: # 0000ff; }
p.alert {color: # ff0000; }

ഈ ശൈലികൾ എല്ലാം എല്ലാ ഖണ്ഡികകളും നീല നിറമാക്കും (# 0000ff), പക്ഷേ "അലർട്ട്" എന്ന ക്ലാസ് ആട്രിബ്യൂട്ട് ഉള്ള ഏതെങ്കിലും ഖണ്ഡികയിൽ ചുവന്ന (# ff0000) രൂപത്തിൽ ആയിരിക്കും. ക്ലാസ് ആട്രിബ്യൂട്ടിന് ടാഗിൽ സെലക്റ്റർ മാത്രമേ ഉപയോഗിക്കാറുള്ള ആദ്യത്തെ സിഎസ്എസ് റൂളിനെ അപേക്ഷിച്ച് ഉയർന്ന പ്രത്യേകത ഉണ്ട്.

CSS- ൽ പ്രവർത്തിക്കുമ്പോൾ, നിർദ്ദിഷ്ടമായ ഒരു നിയമം കുറച്ച് നിർദ്ദിഷ്ട ഒരുവശം അസാധുവാക്കും. ഈ ഉദാഹരണത്തിൽ, കൂടുതൽ പൊതുവായ നിയമം എല്ലാ ഖണ്ഡികകളുടെയും നിറം നിശ്ചയിക്കുന്നു, എന്നാൽ രണ്ടാമത്തെ, കൂടുതൽ നിശ്ചിതനിയന്ത്രണം, ചില ഖണ്ഡികകളിൽ മാത്രമേ ആ ക്രമീകരണത്തെ മറികടക്കുന്നതിനേക്കാൾ.

ചില HTML മാർക്കപ്പിൽ ഇത് എങ്ങനെ ഉപയോഗിക്കാമെന്നത് ഇതാ:

ഈ ഖണ്ഡിക നീല നിറത്തിൽ പ്രദർശിപ്പിക്കും, പേജിന്റെ സ്ഥിരതയാണിത്.

ഈ ഖണ്ഡിക നീലത്തിലും ആയിരിക്കും.

ക്ലാസ് ആട്രിബ്യൂട്ട്, സെലക്റ്റർ സെലക്ടർ സ്റ്റൈലിംഗിൽ നിന്ന് സ്റ്റാൻഡേർഡ് നീല നിറം തിരുത്തിയെഴുതുന്നതിനാൽ ഈ ഖണ്ഡിക ചുവപ്പായി പ്രദർശിപ്പിക്കും.

ആ ഉദാഹരണത്തിൽ, "p.alert" എന്ന ശൈലി ആ "അലേർട്ട്" ക്ലാസ് ഉപയോഗിക്കുന്ന ഖണ്ഡിക ഘടകങ്ങൾക്ക് മാത്രമേ പ്രയോഗിക്കാറുള്ളൂ. ഒന്നിലധികം HTML ഘടകങ്ങളിൽ ഈ ക്ലാസ് ഉപയോഗിക്കാൻ നിങ്ങൾ ഉദ്ദേശിച്ചിരുന്നെങ്കിൽ, നിങ്ങൾ തുടക്കത്തിൽ നിന്ന് HTML ഘടകത്തെ നീക്കം ചെയ്യും സ്റ്റൈൽ കോൾ (കൃത്യമായി കാലാവധി (.) അവസാനിപ്പിക്കാൻ ഉറപ്പാക്കുക), ഇതുപോലെ:

.alert {background-color: # ff0000;}

ഇത് ആവശ്യമുള്ള ഏത് ഘടകത്തിലേക്കും ഇപ്പോൾ ലഭ്യമാണ്. "അലേർട്ട്" എന്ന ക്ലാസ് ആട്രിബ്യൂട്ട് മൂല്യമുള്ള നിങ്ങളുടെ HTML- ന്റെ ഏതെങ്കിലും ഭാഗം ഇപ്പോൾ ഈ ശൈലിക്ക് ലഭിക്കും. ചുവടെയുള്ള HTML ൽ, "അലേർട്ട്" ക്ലാസ് ഉപയോഗിക്കുന്ന ഒരു ഖണ്ഡികയും ഒരു തലക്കെട്ട് നിലയും രണ്ട് ഉണ്ട്. ഇവ രണ്ടും അടിസ്ഥാനമാക്കി സി.എസ്.എസ് അടിസ്ഥാനത്തിലുള്ള ചുവപ്പ് പശ്ചാത്തല നിറമായിരിക്കും.

ഈ ഖണ്ഡിക ചുവപ്പിൽ എഴുതിയതാണ്.

ഈ h2 ചുവപ്പ് ആകും.

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

ഐഡി സെലക്ടര്മാര്

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

ഈ ഡിവിഷൻ "ഇവന്റ്" യുടെ ഒരു ഐഡി ആട്രിബ്യൂട്ട് നൽകാം, തുടർന്ന് 1-പിക്സൽ വീതിയുള്ള കറുത്ത ബോർഡുള്ള ആ ഡിവിഷൻ രൂപരേഖയിലാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ നിങ്ങൾ ഇതുപോലുള്ള ഒരു ID കോഡ് എഴുതുന്നു:

#event {border: 1px ദൃഢമുള്ള # 000; }

ഐഡി സെലക്ടറുകളുള്ള വെല്ലുവിളി ഒരു HTML പ്രമാണത്തിൽ ആവർത്തിക്കാൻ കഴിയില്ല എന്നതാണ്. അവ അദ്വിതീയമായിരിക്കണം (നിങ്ങളുടെ സൈറ്റിന്റെ ഒന്നിലധികം പേജുകളിൽ ഒരേ ഐഡി ഉപയോഗിക്കാം, പക്ഷേ ഒരിക്കൽ ഓരോ HTML പ്രമാണത്തിലും ഒരിക്കൽ മാത്രം). നിങ്ങൾക്ക് ഈ പരിപാടി ആവശ്യമുള്ള 3 ഇവന്റുകൾ ഉണ്ടെങ്കിൽ, നിങ്ങൾ ഇവന്റ് ആട്രിബ്യൂട്ടുകൾ "ഇവന്റ് 1", "ഇവന്റ് 2", "ഇവന്റ് 3" എന്നിവ നൽകണം. അതുകൊണ്ട്, "ഇവന്റ്" ന്റെ ക്രെഡിറ്റ് ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാനും അവയെല്ലാം ഒറ്റയടിക്ക് ഉപയോഗിക്കാനും വളരെ എളുപ്പമായിരിക്കും.

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

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

ഈ ആട്രിബ്യൂട്ട് മൂല്യം, # ചിഹ്നത്തിനു മുമ്പായി, ലിങ്കിന്റെ href ആട്രിബ്യൂട്ടിന് നിങ്ങൾ ചേർത്താൽ മതിയാകും.

ഇതാണ് ലിങ്ക്

ക്ലിക്കുചെയ്ത് സ്പർശിക്കുമ്പോൾ, ഈ ലിങ്ക് ഈ ഐഡി ആട്രിബ്യൂട്ട് ഉള്ള പേജിന്റെ ഭാഗത്തേക്ക് പോകും. ഈ ഐഡി മൂല്യം ഉപയോഗിച്ചാണ് പേജിലെ മൂലകമൊന്നുമില്ലെങ്കിൽ, ലിങ്ക് ഒന്നും ചെയ്യാനില്ല.

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

ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 8/9/17 ന്