അരികിൻ്റെ വലതുവശത്തുള്ള Css മാർജിൻ. മാർജിൻ, പാഡിംഗ്, ബോർഡർ പാരാമീറ്ററുകൾ എന്നിവ ഉപയോഗിച്ച് CSS-ൽ പാഡിംഗും ബോർഡറുകളും. ഒരു ലിസ്റ്റിൻ്റെ മുകളിലും താഴെയുമുള്ള ഇൻഡൻ്റേഷൻ എങ്ങനെ നീക്കം ചെയ്യാം

തൊട്ടടുത്തുള്ള CSS സെലക്ടറുകൾ

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

അതിനാൽ അടുത്തുള്ള ഘടകങ്ങൾ എന്താണെന്ന് നിങ്ങൾക്ക് വ്യക്തമായി മനസ്സിലാകുന്നതിന്, പരിചിതമായ ഒരു ഉദാഹരണം വീണ്ടും നോക്കാം, ചെറുതായി പരിഷ്ക്കരിച്ചു.

<тег1> <тег2>... <тег3><тег4>... <тег5><тег6>...

ഈ ഉദാഹരണത്തിൽ രണ്ട് ജോഡി അടുത്തുള്ള ഘടകങ്ങൾ മാത്രമേയുള്ളൂ - ഇവയാണ്<тег2>ഒപ്പം<тег3>, കൂടാതെ<тег3>ഒപ്പം<тег5>, എല്ലാം. അതായത്<тег2>ഒപ്പം<тег5>പരസ്പരം ബന്ധമുള്ള അയൽക്കാരല്ല, കാരണം അവർക്കിടയിൽ ഉണ്ട്<тег3> .

"+" (പ്ലസ്) ചിഹ്നത്താൽ വേർതിരിക്കുന്ന രണ്ടോ അതിലധികമോ റെഗുലർ സെലക്ടറുകളിൽ നിന്നാണ് അടുത്തുള്ള സെലക്ടറുകൾ രൂപപ്പെടുന്നത്, അവിടെ കോഡിലെ ആദ്യ ഘടകം ആദ്യം സൂചിപ്പിച്ചിരിക്കുന്നു, അതിനുശേഷം വരുന്ന ഒന്ന്, രണ്ടാമത്തേതിന് തൊട്ടുപിന്നാലെ വരുന്ന ഒന്ന് , ഇത്യാദി. പതിവുപോലെ, ലിസ്റ്റിൽ അവസാനമായി സെലക്ടർ ഉള്ള ഘടകത്തിലേക്ക് ശൈലികൾ പ്രയോഗിക്കുന്നു. പൊതുവായ വാക്യഘടന.

സെലക്ടർ1 + സെലക്ടർ2 ( സ്വത്ത്: മൂല്യം; സ്വത്ത്: മൂല്യം; ...)

"+" ചിഹ്നത്തിൻ്റെ ഇരുവശത്തുമുള്ള സ്‌പെയ്‌സുകൾ ആവശ്യാനുസരണം വയ്ക്കാം അല്ലെങ്കിൽ സ്ഥാപിക്കാം.

CSS-ൽ അടുത്തുള്ള സെലക്ടറുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം

തൊട്ടടുത്തുള്ള സെലക്ടർമാർ

തലക്കെട്ട്

വാചകം. ശക്തമായ.വാചകം. എം.

വാചകം. എം.വാചകം. ശക്തമായ.

വാചകം. എം.വാചകം. ശക്തമായ.


ഫലം ബ്രൗസറിൽ

തലക്കെട്ട്

വാചകം. ശക്തമായ.

വാചകം. എം.

വാചകം. എം.

വാചകം. എം.

വാചകം. ശക്തമായ.

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

  1. Internet Explorer 6.0 ന് അടുത്തുള്ള സെലക്‌ടറുകൾ (അല്ലെങ്കിൽ ചൈൽഡ് സെലക്‌ടറുകൾ) മനസ്സിലാകുന്നില്ല. ഇത് ഓർക്കുക.
  2. ഹോം വർക്ക്.

അടുത്തുള്ള എലമെൻ്റ് സെലക്ടർ മറ്റൊരു നിർദ്ദിഷ്ട ഘടകത്തിന് തൊട്ടുപിന്നിൽ പ്രമാണ കോഡിൽ സ്ഥിതിചെയ്യുന്ന ഒരു ഘടകം തിരഞ്ഞെടുക്കുന്നു. ഉദാഹരണമായി html കോഡിൻ്റെ ഒരു ഭാഗം എടുക്കാം.

ഖണ്ഡികയും അതിൽ കൊഴുപ്പുള്ളഘടകം, ഇവിടെ അത് ചായ്വുള്ളഘടകം.

മൂന്ന് ടാഗുകൾ ഉണ്ട്:

, ഒപ്പം . ടാഗുകൾ ഒപ്പം ഒരു കണ്ടെയ്നറിൽ കൂടുകൂട്ടിയിരിക്കുന്നു

അവർ അവൻ്റെ മക്കളാണ്. എന്നാൽ പരസ്പര ബന്ധത്തിൽ അവർ അയൽക്കാരാണ്.

അടുത്തുള്ള സെലക്‌ടറിൻ്റെ വാക്യഘടനയാണ് മുമ്പത്തെ എലമെൻ്റിൻ്റെ സെലക്‌ടർ, തുടർന്ന് ഒരു "+" ചിഹ്നം, തുടർന്ന് തിരഞ്ഞെടുത്ത ഘടകത്തിൻ്റെ സെലക്ടർ. നമുക്ക് അടുത്തുള്ള സെലക്ടർ പ്രവർത്തിക്കാം:

CSS-ൽ തൊട്ടടുത്തുള്ള സെലക്ടർ.

ഖണ്ഡികയും അതിൽ കൊഴുപ്പുള്ളഘടകം, ഇവിടെ അത് ചായ്വുള്ളഘടകം.

ഇവിടെ കൊഴുപ്പുള്ളഒപ്പം ഊന്നിപ്പറഞ്ഞുഘടകങ്ങൾ, കൂടുതൽ ചായ്വുള്ള.



ആദ്യ ഖണ്ഡികയിൽ അടുത്തുള്ള എലമെൻ്റ് സെലക്ടർ പ്രവർത്തനക്ഷമമാക്കിയതായി ഉദാഹരണത്തിൽ നിങ്ങൾക്ക് കാണാൻ കഴിയും. ടാഗുകൾ ഇതാ ഒപ്പം ഒന്നിനുപുറകെ ഒന്നായി പോകുക. രണ്ടാമത്തെ ഖണ്ഡികയിൽ, അവയ്ക്കിടയിൽ ടാഗ് ഉപയോഗിക്കുന്നു , ഇപ്പോൾ മറ്റ് രണ്ട് ജോഡി ടാഗുകൾ ഉണ്ട്: + ഒപ്പം + .

ഈ കേസിൽ ഒരു പിശക് ടാഗ് ആയിരിക്കും ടാഗിനോട് ചേർന്ന്

ഇവിടെ ടാഗ് ചെയ്യുക ടാഗിൻ്റെ കുട്ടിയാണ്

അവൻ, അതാകട്ടെ, ഒരു രക്ഷിതാവാണ് .

ചുവടെയുള്ള ഉദാഹരണം പ്രവർത്തിക്കില്ല:

CSS-ൽ തൊട്ടടുത്തുള്ള സെലക്ടർ.

ഖണ്ഡികയും അതിൽ കൊഴുപ്പുള്ളഘടകം, ഇവിടെ അത് ചായ്വുള്ളഘടകം.

ഇവിടെ കൊഴുപ്പുള്ളഒപ്പം ഊന്നിപ്പറഞ്ഞുഘടകങ്ങൾ, കൂടുതൽ ചായ്വുള്ള.



കൂടുതൽ യഥാർത്ഥ ഉദാഹരണം

കൂടുതൽ റിയലിസ്റ്റിക് ഉദാഹരണം ഉപയോഗിച്ച് അടുത്തുള്ള സെലക്ടർ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നോക്കാം. ടാഗുകൾ കൊണ്ട് അടയാളപ്പെടുത്തിയ നിരവധി വിഭാഗങ്ങൾ അടങ്ങുന്ന വലിയ ലേഖനങ്ങളിൽ

, മുകളിലെ മാർജിൻ (മാർജിൻ-ടോപ്പ് പ്രോപ്പർട്ടി) വർദ്ധിപ്പിക്കുന്നതാണ് ഉചിതം. 30px ൻ്റെ ഇൻഡൻ്റേഷൻ ടെക്‌സ്‌റ്റ് റീഡബിൾ ആക്കും. എന്നാൽ ടാഗ് ആണെങ്കിൽ

തൊട്ടുപിന്നാലെ വരുന്നു

, ഇത് ലേഖനത്തിൻ്റെ തുടക്കത്തിൽ ആയിരിക്കാം, ടാഗിന് മുകളിലുള്ള മുകളിലെ ഇൻഡൻ്റ്

അനാവശ്യമായിരിക്കും. അടുത്തുള്ള എലമെൻ്റ് സെലക്ടർ ഉപയോഗിച്ച് ഈ പ്രശ്നം പരിഹരിക്കാവുന്നതാണ്.

അടുത്തുള്ള എലമെൻ്റ് സെലക്ടർ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിൻ്റെ ഉദാഹരണത്തോടുകൂടിയ html കോഡ് ഇതാ.

CSS-ൽ തൊട്ടടുത്തുള്ള സെലക്ടർ

ഹലോ!

തലക്കെട്ട് h2

തലക്കെട്ട് h2

ഖണ്ഡികയിലെ വാചകം അവിശ്വസനീയമായ സാഹസികതയെക്കുറിച്ചാണ്.

തലക്കെട്ട് h2

ഖണ്ഡികയിലെ വാചകം അവിശ്വസനീയമായ സാഹസികതയെക്കുറിച്ചാണ്.

തലക്കെട്ട് h2

ഖണ്ഡികയിലെ വാചകം അവിശ്വസനീയമായ സാഹസികതയെക്കുറിച്ചാണ്.



കൂടാതെ, അടുത്തുള്ള സെലക്ടർ ടൂൾ ഉപയോഗിച്ച്, തലക്കെട്ടിനും വിഭാഗത്തിൻ്റെ ആദ്യ ഖണ്ഡികയ്ക്കും ഇടയിലുള്ള ഇൻഡൻ്റേഷൻ ക്രമീകരിക്കുന്നത് സൗകര്യപ്രദമാണ്, ഞങ്ങളുടെ ഉദാഹരണത്തിൽ ഇവ ടാഗുകളാണ്

ഒപ്പം

ഇൻഡൻ്റേഷൻ കുറയ്ക്കുന്നതിന് നെഗറ്റീവ് മൂല്യങ്ങൾ ഉപയോഗിക്കുന്നത് സൗകര്യപ്രദമാണെന്നതും ശ്രദ്ധിക്കേണ്ടതാണ്.

CSS-ൽ തൊട്ടടുത്തുള്ള സെലക്ടർ

ഹലോ!

തലക്കെട്ട് h2

ഖണ്ഡികയിലെ വാചകം അവിശ്വസനീയമായ സാഹസികതയെക്കുറിച്ചാണ്.

തലക്കെട്ട് h2

ഖണ്ഡികയിലെ വാചകം അവിശ്വസനീയമായ സാഹസികതയെക്കുറിച്ചാണ്.

തലക്കെട്ട് h2

ഖണ്ഡികയിലെ വാചകം അവിശ്വസനീയമായ സാഹസികതയെക്കുറിച്ചാണ്.

തലക്കെട്ട് h2

ഖണ്ഡികയിലെ വാചകം അവിശ്വസനീയമായ സാഹസികതയെക്കുറിച്ചാണ്.



ലിസ്റ്റിലെ ആദ്യത്തേത് ഒഴികെയുള്ള എല്ലാ ഘടകങ്ങളും തിരഞ്ഞെടുക്കുന്നതിന് അടുത്തുള്ള സെലക്ടർ എങ്ങനെ ഉപയോഗിക്കാമെന്നതിൻ്റെ ഒരു ഉദാഹരണം.

CSS-ൽ തൊട്ടടുത്തുള്ള സെലക്ടർ

  • ലിസ്റ്റ് ഇനം #1.
  • ലിസ്റ്റ് ഇനം #2.
  • ലിസ്റ്റ് ഇനം #3.
  • ലിസ്റ്റ് ഇനം #4.


ഈ ഉദാഹരണത്തിൻ്റെ ഫലമായി സംഭവിക്കുന്നത് ഇതാണ്:

ചിത്രം 1. ജോലിസ്ഥലത്ത് ഉദാഹരണം നമ്പർ 5.

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

നിങ്ങൾ പ്രസിദ്ധീകരണങ്ങൾ ഓർമ്മിക്കുകയും ശ്രദ്ധാപൂർവം പിന്തുടരുകയും ചെയ്യുകയാണെങ്കിൽ, പല തരത്തിലുള്ള സെലക്ടർമാരെ ഇതിനകം പരിഗണിച്ചിട്ടുണ്ട്; ; . CSS-ൻ്റെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കുന്നത് അവഗണിക്കരുതെന്ന് ഒരിക്കൽ കൂടി ഞാൻ നിങ്ങളോട് അഭ്യർത്ഥിക്കുന്നു, ഇത് ഭാവിയിൽ നിങ്ങൾക്ക് ധാരാളം നേട്ടങ്ങൾ നൽകും.

യൂണിവേഴ്സൽ സെലക്ടർ

ഇനി നമുക്ക് ഇന്നത്തെ പ്രസിദ്ധീകരണത്തിൻ്റെ സാരാംശത്തിലേക്ക് നേരിട്ട് പോകാം. സാർവത്രിക സെലക്ടറെ സംബന്ധിച്ചിടത്തോളം, ഇത് വളരെ ലളിതമാണ്, അതിനാൽ ഞാൻ അതിൽ വളരെക്കാലം താമസിക്കില്ല. ഒരു സാർവത്രിക സെലക്ടർ ഉപയോഗിക്കുന്ന ഒരു CSS റൂൾ എഴുതുന്നതിനുള്ള വാക്യഘടന ഇപ്രകാരമാണ്:


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

* ( font-family: Tahoma, Arial, Helvetica, sans-serif; /* ടെക്‌സ്‌റ്റ് ഫോണ്ട് */ നിറം: #646464; /* ടെക്‌സ്‌റ്റ് വർണ്ണം */ ഫോണ്ട് വലുപ്പം: 75%; /* ടെക്‌സ്‌റ്റ് സൈസ് */ ടെക്‌സ്‌റ്റ് അലൈൻ : ഇടത്; /* ടെക്സ്റ്റ് ലൊക്കേഷൻ */ )

ഈ രീതിയിൽ പേജിൽ സ്ഥിതി ചെയ്യുന്ന എല്ലാ ഘടകങ്ങളുടെയും ടെക്സ്റ്റ് ഡിസൈൻ നിങ്ങൾക്ക് നിർവചിക്കാം. ഒരു സാർവത്രിക സെലക്ടറിനുപകരം, എല്ലാ ഘടകങ്ങളുടെയും ടാഗുകൾ ഉൾപ്പെടുന്ന ബോഡി ടാഗിൻ്റെ പേര് നിങ്ങൾ ഉപയോഗിക്കുകയാണെങ്കിൽ, ഈ സാഹചര്യത്തിൽ ഫലം സമാനമാകുമെന്ന് ഞാൻ ശ്രദ്ധിക്കട്ടെ.

തൊട്ടടുത്തുള്ള CSS സെലക്ടറുകൾ

ശരി, ഇപ്പോൾ നമുക്ക് അയൽക്കാരായ സെലക്ടർമാർക്ക് കുറച്ചുകൂടി സമയം ചെലവഴിക്കാം. ഒരു വെബ് പേജിലെ ഘടകങ്ങൾ ഡോക്യുമെൻ്റ് കോഡിൽ പരസ്പരം നേരിട്ട് ദൃശ്യമാകുമ്പോൾ അവയെ അടുത്തുള്ളതായി നിർവചിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, CSS ശൈലികളുടെ വാക്യഘടന ഇതുപോലെ കാണപ്പെടുന്നു:

ഇപ്പോൾ p ടാഗ് നിർവചിച്ചിരിക്കുന്ന ടെക്‌സ്‌റ്റിൻ്റെ ഒരു ഖണ്ഡിക എടുക്കുക, അതിൽ b, i, വലിയ ടാഗുകൾ ചൈൽഡ് എലമെൻ്റുകളായി ഉൾപ്പെടും, യഥാക്രമം ബോൾഡ്, ഇറ്റാലിക്, വലുതാക്കിയ ഫോണ്ട് എന്നിവ ടെക്‌സ്‌റ്റിൻ്റെ ഫോർമാറ്റിംഗ് നിർവ്വചിക്കുന്നു:

ഈ ഖണ്ഡിക ഉപയോഗിക്കുന്നു ടാഗ് ബി, ടാഗ് i, വലിയ ടാഗ്.

എല്ലാ ജനപ്രിയ ബ്രൗസറുകളുടെയും (,) ഏറ്റവും പുതിയ പതിപ്പുകളിൽ നിർമ്മിച്ചിരിക്കുന്നതും പ്രശസ്തമായ Firefox ബ്രൗസർ പ്ലഗിൻ്റെ അനലോഗ് ആയതുമായ CSS, HTML എഡിറ്റിംഗ് ടൂൾ ഉപയോഗിച്ച്, ഞങ്ങൾ ഈ ഖണ്ഡിക ഏത് വെബ് പേജിലും (I മുമ്പത്തെ ലേഖനത്തിൻ്റെ പേജിൽ, ആദ്യ ഖണ്ഡികയിൽ അത് ശരിയായി ചെയ്തു). ഉദാഹരണത്തിന്, ക്രോമിൽ ഈ ടൂളിനെ വിളിക്കുന്നത് F12 കീ അമർത്തുന്നതിലൂടെയാണ്. "HTML അടിസ്ഥാനങ്ങൾ", "CSS ട്യൂട്ടോറിയൽ" വിഭാഗങ്ങളിലെ മെറ്റീരിയലിൻ്റെ പ്രായോഗിക ബലപ്പെടുത്തലിനായി ഇത് ഉപയോഗിക്കാം. അതിനാൽ, ആദ്യ ഖണ്ഡികയായി ഞാൻ ഒരു വാചകം തിരുകുന്നു:


ഈ ഖണ്ഡിക പരീക്ഷണാത്മകമായിരിക്കും, അതിൻ്റെ ഉദാഹരണം ഉപയോഗിച്ച് ഞങ്ങൾ ആപ്ലിക്കേഷൻ പരിഗണിക്കും അടുത്തുള്ള സെലക്ടർമാർ. ഞാൻ പറഞ്ഞതുപോലെ, ബി, ഐ, ബിഗ് ടാഗുകൾ പി പാരഗ്രാഫ് ടാഗിൻ്റെ കുട്ടികളാണ്, കാരണം അവയെല്ലാം നേരിട്ട് പി കണ്ടെയ്‌നറിനുള്ളിലാണ്. ഇവിടെ അടുത്തുള്ള ടാഗുകൾ b, i എന്നിവയും അതുപോലെ i, big എന്നിവയുമാണ്. ഇപ്പോൾ നമുക്ക് അടുത്തുള്ള സെലക്ടർമാർക്ക് CSS നിയമം പ്രയോഗിക്കാം:

B+i (നിറം: ചുവപ്പ്;) i+ വലുത് (നിറം: പച്ച;)

ഈ ശൈലികൾ പ്രയോഗിച്ചതിന് ശേഷം, ഖണ്ഡിക ഇതുപോലെ കാണപ്പെടും:


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

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

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

H3 ( ഫോണ്ട് വലുപ്പം: 1.7em; /* ഫോണ്ട് വലുപ്പം */ ടെക്‌സ്‌റ്റ്-അലൈൻ: മധ്യഭാഗം; /* ടെക്‌സ്‌റ്റ് പ്ലേസ്‌മെൻ്റ് */ ഫോണ്ട്-വെയ്റ്റ്: സാധാരണ; /* സാധാരണ ടെക്‌സ്‌റ്റ് വെയ്റ്റ് */ ഫോണ്ട് ഫാമിലി: തഹോമ, ഏരിയൽ, ഹെൽവെറ്റിക്ക, sans-serif; /* ഫോണ്ട് ശൈലി */ നിറം: #646464

ഒരു കുറിപ്പിൻ്റെയോ അടിക്കുറിപ്പിൻ്റെയോ തലക്കെട്ട് ഹൈലൈറ്റ് ചെയ്യുന്നതിന്, നമുക്ക് ഒരു പ്രത്യേക ക്ലാസ് നിർവചിക്കാം, പറയുക, ഇടുക:

H3.put (നിറം: ചുവപ്പ്; /* വാചക നിറം */ മാർജിൻ-ഇടത്: 5px; /* ഇടത് പാഡിംഗ് */ മാർജിൻ-ടോപ്പ്: 0.5em; /* ടോപ്പ് പാഡിംഗ് */ പാഡിംഗ്: 10px; /* വാചകത്തിന് ചുറ്റുമുള്ള അരികുകൾ */ ടെക്സ്റ്റ് അലൈൻ: ഇടത്; /* ടെക്സ്റ്റ് ലൊക്കേഷൻ */ )

അടിക്കുറിപ്പ് ഖണ്ഡികയ്‌ക്കായി ഒരു പ്രത്യേക ശൈലി സൃഷ്‌ടിക്കാൻ ഇപ്പോൾ നമുക്ക് അടുത്തുള്ള സെലക്‌ടറുകൾ ഉപയോഗിക്കാം, ഈ ഖണ്ഡിക "h3.put" എന്ന ശൈലിയിൽ തലക്കെട്ടിന് താഴെയായി സ്ഥാപിക്കും:

H3.put+p (പശ്ചാത്തലം: #ffefd5; /* പശ്ചാത്തല നിറം */ മാർജിൻ-ഇടത്: 15px; /* ഇടത് പാഡിംഗ് */ മാർജിൻ-വലത്: 120px; /* വലത് പാഡിംഗ് */ മാർജിൻ-ടോപ്പ്: 0.5em; /* ടോപ്പ് പാഡിംഗ് */ പാഡിംഗ്: 5px;

ഗൂഗിൾ ക്രോം എഡിറ്റിംഗ് ടൂൾ ഉപയോഗിച്ച്, ഞാൻ നിങ്ങളെ അലട്ടിക്കൊണ്ടിരുന്നു (എന്നാൽ ഇത് വിലമതിക്കുന്നു), അടിക്കുറിപ്പിനായി ഞങ്ങൾ തലക്കെട്ട് നൽകുന്നു, അതിനായി പുട്ട് ക്ലാസ് ഇടാൻ മറക്കരുത്:

ശ്രദ്ധ!

തുടർന്ന് ഞങ്ങൾ അടിക്കുറിപ്പിൻ്റെ വാചകം എഴുതുന്നു:

CSS (കാസ്‌കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ) അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കുന്നതിൽ ഈ പ്രസിദ്ധീകരണത്തിൽ അവതരിപ്പിച്ചിരിക്കുന്ന മെറ്റീരിയലുകൾ വളരെ പ്രധാനമാണ്.

.

ഈ ചലനങ്ങൾക്കെല്ലാം ശേഷം, വെബ്‌പേജിൽ ഞങ്ങൾക്ക് ഇനിപ്പറയുന്ന അടിക്കുറിപ്പ് ഖണ്ഡിക ലഭിക്കുന്നു (കുട്ടികളെയും സന്ദർഭ സെലക്‌ടറുകളെയും കുറിച്ചുള്ള എൻ്റെ മുൻ ലേഖനത്തിൻ്റെ അവസാനം ഞാൻ ഈ ഖണ്ഡിക ചേർത്തതായി ഞാൻ നിങ്ങളെ ഓർമ്മിപ്പിക്കുന്നു):


ഇപ്പോൾ ഒരു ബ്ലോഗിലോ വെബ്‌സൈറ്റിലോ, നിങ്ങൾ "പുട്ട്" ക്ലാസ് ഏതെങ്കിലും h3 ടാഗിലേക്ക് ബന്ധിപ്പിക്കുമ്പോൾ, അത്തരം ഒരു അടിക്കുറിപ്പ് വെബ് പേജിൽ ദൃശ്യമാകും. മാത്രമല്ല, "class="put"" ഉള്ള h3 ടാഗിന് ശേഷമുള്ള ആദ്യ ഖണ്ഡിക മാത്രം പ്രത്യേക രീതിയിൽ ഫോർമാറ്റ് ചെയ്യപ്പെടും. എന്നാൽ ഞങ്ങൾ ആഗ്രഹിച്ചത് അതാണ്, അല്ലേ?

ഇതോടെ, ഇന്നത്തെ മാനുവൽ പൂർത്തിയാക്കാം, അതിൽ അടുത്തുള്ളതും സാർവത്രികവുമായ സെലക്ടറുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു അൽഗോരിതം നൽകിയിട്ടുണ്ട്. പ്രിയ വായനക്കാരേ, വരിക്കാരാകാൻ ഈ ലേഖനം നിങ്ങളെ പ്രോത്സാഹിപ്പിക്കുമെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു

പ്രിയ വായനക്കാരേ, ആശംസകൾ. മുമ്പത്തെ ലേഖനങ്ങളിൽ, ഞങ്ങൾ പ്രധാനമായും CSS ശൈലി ആട്രിബ്യൂട്ടുകൾ പഠിച്ചു. അവയിൽ ധാരാളം ഉണ്ട്. ചിലർ ഫോണ്ട് പാരാമീറ്ററുകൾ, മറ്റുള്ളവർ പശ്ചാത്തല പാരാമീറ്ററുകൾ, മറ്റുചിലർ ഇൻഡൻ്റുകളുടെയും ഫ്രെയിമുകളുടെയും പാരാമീറ്ററുകൾ സജ്ജമാക്കുന്നു.

ഈ ലേഖനത്തിൽ നമ്മൾ സ്റ്റൈൽ സെലക്ടർമാരെക്കുറിച്ച് സംസാരിക്കും. ഞങ്ങൾ ഇതിനകം സ്പർശിച്ച ലേഖനങ്ങളിലൊന്നിൽ. ഒരു വെബ് പേജ് ഘടകവുമായി ഒരു സ്റ്റൈൽ റൂൾ വ്യക്തമായി ബന്ധിപ്പിക്കാത്ത നിരവധി തരം സെലക്ടർമാരെ ഇന്ന് നമ്മൾ പരിശോധിക്കും. ഇവ പ്രത്യേക സെലക്ടറുകൾ എന്ന് വിളിക്കപ്പെടുന്നവയാണ്. അവയിൽ നിരവധി തരം ഉണ്ട്.

CSS-ലെ കോമ്പിനേറ്ററുകൾ (അടുത്തുള്ള, ചൈൽഡ്, സന്ദർഭ സെലക്ടറുകൾ)

കോമ്പിനേറ്റർമാർമറ്റ് ഘടകങ്ങളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ അതിൻ്റെ സ്ഥാനത്തെ അടിസ്ഥാനമാക്കി ഒരു വെബ് പേജ് ഘടകത്തിലേക്ക് ഒരു സ്റ്റൈൽ റൂൾ ബന്ധിപ്പിക്കുന്ന ഒരു തരം CSS സെലക്ടറുകളാണ്.

ആദ്യ കോമ്പിനേറ്റർ ചിഹ്നം പ്ലസ്(+) അല്ലെങ്കിൽ അടുത്തുള്ള സെലക്ടർ. പ്ലസ് എന്നത് രണ്ട് സെലക്ടർമാർക്കിടയിൽ സജ്ജീകരിച്ചിരിക്കുന്നു:

<селектор 1> + <селектор 2> { <стиль> }

ഈ കേസിൽ ശൈലി പ്രയോഗിക്കുന്നു സെലക്ടർ 2, എന്നാൽ അത് തൊട്ടടുത്താണെങ്കിൽ മാത്രം സെലക്ടർ 1അതിനു തൊട്ടുപിന്നാലെ വരുന്നു. നമുക്ക് ഒരു ഉദാഹരണം നോക്കാം:

ശക്തമായ + ഞാൻ (

}
...

ഇത് സാധാരണ വാചകമാണ്. ഇത് ബോൾഡ് ടെക്‌സ്‌റ്റാണ്, പ്ലെയിൻ ടെക്സ്റ്റ്, ചുവന്ന വാചകം


ഇത് സാധാരണ വാചകമാണ്. ഇത് ബോൾഡ് ടെക്‌സ്‌റ്റാണ്, പ്ലെയിൻ ടെക്സ്റ്റ്, ഇത് സാധാരണ വാചകമാണ്.

ഫലം:

ഉദാഹരണത്തിൽ വിവരിച്ചിരിക്കുന്ന ശൈലി ടാഗിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്ന ആദ്യ ടെക്സ്റ്റിൽ മാത്രമേ പ്രയോഗിക്കൂ , കാരണം അത് ടാഗിന് ശേഷം ഉടൻ വരുന്നു .

കോമ്പിനേറ്റർ ടിൽഡ്(~) അടുത്തുള്ള സെലക്ടർമാർക്കും ബാധകമാണ്, എന്നാൽ ഇത്തവണ അവയ്ക്കിടയിൽ മറ്റ് ഘടകങ്ങൾ ഉണ്ടായേക്കാം. ഈ സാഹചര്യത്തിൽ, രണ്ട് സെലക്ടർമാരും ഒരേ പാരൻ്റ് ടാഗിൽ നെസ്റ്റ് ചെയ്യണം:

<селектор 1> ~ <селектор 2> { <стиль> }

ശൈലി പ്രയോഗിക്കും സെലക്ടർ 2പിന്തുടരേണ്ടത് സെലക്ടർ 1. ഒരു ഉദാഹരണം പരിഗണിക്കുക:

strong~i(
നിറം:ചുവപ്പ്; /* ചുവപ്പ് വാചക നിറം */
}
...

ഇത് സാധാരണ വാചകമാണ്. ഇത് ബോൾഡ് ടെക്‌സ്‌റ്റാണ്, പ്ലെയിൻ ടെക്സ്റ്റ്, ചുവന്ന വാചകംഅതിനടുത്തുള്ള സെലക്ടർ റൂൾ ബാധകമാണ്.


ഇത് സാധാരണ വാചകമാണ്. ഇത് ബോൾഡ് ടെക്‌സ്‌റ്റാണ്, പ്ലെയിൻ ടെക്സ്റ്റ്, ഇത് ചുവന്ന വാചകമാണ്.

ഫലം:

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ടാഗിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്ന രണ്ട് ടെക്‌സ്‌റ്റുകൾക്കും സ്‌റ്റൈൽ റൂൾ ഇത്തവണ പ്രവർത്തിച്ചു , ടാഗ് തമ്മിലുള്ള രണ്ടാമത്തെ കേസിൽ വസ്തുത ഉണ്ടായിരുന്നിട്ടും ഒപ്പം ടാഗ് വിലമതിക്കുന്നു .

കോമ്പിനേറ്റർ > സൂചിപ്പിക്കുന്നു ചൈൽഡ് സെലക്ടർമാർ. മറ്റൊരു ഘടകത്തിനുള്ളിൽ നേരിട്ട് നെസ്റ്റ് ചെയ്തിരിക്കുന്ന ഒരു വെബ് പേജ് ഘടകത്തിലേക്ക് CSS ശൈലി ബന്ധിപ്പിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു:

<селектор 1> > <селектор 2> { <стиль> }

ശൈലികെട്ടും സെലക്ടർ 2, ഇത് നേരിട്ട് കൂടുകൂട്ടിയിരിക്കുന്നു സെലക്ടർ 1.

div > ശക്തമായ (

}
...

ഇത് സാധാരണ വാചകമാണ്. ഇത് ബോൾഡ് ഇറ്റാലിക് ടെക്‌സ്‌റ്റാണ്.

ഇത് സാധാരണ വാചകമാണ്. ഇത് സാധാരണ ബോൾഡ് ടെക്‌സ്‌റ്റാണ്.


ഒപ്പം ഫലവും:

ചിത്രത്തിൽ കാണുന്നത് പോലെ, സ്റ്റൈൽ റൂൾ ആദ്യ ടാഗിനെ മാത്രമേ ബാധിച്ചിട്ടുള്ളൂ , ഇത് ടാഗിനുള്ളിൽ നേരിട്ട് കൂടുകൂട്ടിയിരിക്കുന്നു

. രണ്ടാമത്തെ ടാഗിൻ്റെ ഉടനടി രക്ഷിതാവ് ടാഗ് ആണ്

, അതിനാൽ നിയമം അദ്ദേഹത്തിന് ബാധകമല്ല.

അടുത്തതായി നമുക്ക് നോക്കാം സന്ദർഭ സെലക്ടർ<пробел> . മറ്റൊരു എലമെൻ്റിനുള്ളിലെ ഒരു ഘടകത്തിലേക്ക് ഒരു CSS ശൈലി ബന്ധിപ്പിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു, കൂടാതെ ഏത് തലത്തിലുള്ള നെസ്റ്റിംഗും ഉണ്ടാകാം:

<селектор 1> <селектор 2> { <стиль> }

ശൈലി പ്രയോഗിക്കും സെലക്ടർ 2, അത് എങ്ങനെയെങ്കിലും കൂടുകൂട്ടിയാൽ സെലക്ടർ 1.

മുമ്പത്തെ ഉദാഹരണം നോക്കാം, ഒരു CSS റൂൾ വിവരിക്കുമ്പോൾ മാത്രം ഞങ്ങൾ സന്ദർഭ സെലക്ടർ ഉപയോഗിക്കുന്നു:

ഡിവി ശക്തമായ (
ഫോണ്ട് ശൈലി: ഇറ്റാലിക് /* ഇറ്റാലിക് */
}
...

ഇത് സാധാരണ വാചകമാണ്. ഇത് ബോൾഡ് ഇറ്റാലിക് ടെക്‌സ്‌റ്റാണ്.

ഇത് സാധാരണ വാചകമാണ്. ഇതും ഇറ്റാലിക് ബോൾഡ് ടെക്‌സ്‌റ്റാണ്.



പ്ലെയിൻ ടെക്സ്റ്റ് ഒപ്പം വെറും ബോൾഡ് ടെക്സ്റ്റ്

ഫലം:

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഇത്തവണ നിയമം രണ്ട് ടാഗുകളേയും ബാധിച്ചു , കണ്ടെയ്നറിൽ കൂടുകൂട്ടിയത് പോലും

ഒരു ഖണ്ഡികയിലും

. ടാഗ് ചെയ്യാൻ , ഒരു ഖണ്ഡികയ്ക്കുള്ളിൽ ലളിതമായി നെസ്റ്റഡ് ചെയ്തിരിക്കുന്നു

css റൂൾ ഒട്ടും പ്രവർത്തിക്കുന്നില്ല.

ടാഗ് ആട്രിബ്യൂട്ടുകൾ പ്രകാരം തിരഞ്ഞെടുക്കുന്നവർ

ആട്രിബ്യൂട്ട് സെലക്ടറുകൾ എന്നത് ഒരു പ്രത്യേക ആട്രിബ്യൂട്ട് അടങ്ങിയിട്ടുണ്ടോ അല്ലെങ്കിൽ ഒരു നിശ്ചിത മൂല്യമുണ്ടോ എന്നതിനെ അടിസ്ഥാനമാക്കി ഒരു ഘടകത്തിലേക്ക് ഒരു ശൈലി ബന്ധിപ്പിക്കുന്ന പ്രത്യേക സെലക്ടറുകളാണ്. അത്തരം സെലക്ടറുകൾ ഉപയോഗിക്കുന്നതിന് നിരവധി ഓപ്ഷനുകൾ ഉണ്ട്.

1. ലളിതമായ ആട്രിബ്യൂട്ട് സെലക്ടർ

ഇതുപോലെ തോന്നുന്നു:

<селектор>[<имя атрибута тега>] { <стиль> }

കൂടാതെ നിർദ്ദിഷ്ട ആട്രിബ്യൂട്ട് ചേർത്തിരിക്കുന്ന ഘടകങ്ങളുമായി ശൈലി ബന്ധിപ്പിക്കുന്നു. ഉദാഹരണത്തിന്:

ശക്തമായ (
നിറം:ചുവപ്പ്;
}
...

ഓട്ടോമൊബൈൽഇതൊരു മെക്കാനിക്കൽ മോട്ടോർ ട്രാക്ക്ലെസ് ആണ് റോഡ് വാഹനംകുറഞ്ഞത് 4 ചക്രങ്ങളോടെ.

ഫലം:

ചിത്രത്തിൽ css റൂൾ (റെഡ് ടെക്സ്റ്റ് കളർ) മൂലകത്തിൽ പ്രയോഗിക്കുന്നത് കാണാം ശക്തമായ, ഇതിലേക്ക് ആട്രിബ്യൂട്ട് ചേർത്തിരിക്കുന്നു തലക്കെട്ട്.

2. മൂല്യമുള്ള ആട്രിബ്യൂട്ട് സെലക്ടർ

ഈ സെലക്ടറിൻ്റെ വാക്യഘടന ഇപ്രകാരമാണ്:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

ബന്ധിക്കുന്നു ശൈലിടാഗുകൾക്ക് നിർദ്ദിഷ്‌ടമായ ആട്രിബ്യൂട്ട് ഉള്ള ഘടകങ്ങളിലേക്ക് പേര്ഒപ്പം അർത്ഥം. ഉദാഹരണം:

a(
നിറം:ചുവപ്പ്;
ഫോണ്ട് വലുപ്പം:150%;
}
...
.ru" target="_blank">പുതിയ വിൻഡോയിലെ ലിങ്ക്

ഫലം:

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഹൈപ്പർലിങ്ക് തരത്തിൻ്റെ രണ്ട് ഘടകങ്ങൾക്കും ആട്രിബ്യൂട്ട് ഉണ്ട് ലക്ഷ്യം, എന്നാൽ ലിങ്ക് ടെക്‌സ്‌റ്റിനെ ഒന്നര മടങ്ങ് വലുതാക്കി അതിൻ്റെ നിറം ചുവപ്പിലേക്ക് മാറ്റുന്ന css റൂൾ ടാഗിൽ പ്രയോഗിക്കുന്നു ആരുടെ ആട്രിബ്യൂട്ട് ലക്ഷ്യംവിഷയങ്ങൾ "_ശൂന്യം".

3. നിരവധി ആട്രിബ്യൂട്ട് മൂല്യങ്ങളിൽ ഒന്ന്

ചില ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ ക്ലാസ് നാമങ്ങൾ പോലെയുള്ള സ്‌പെയ്‌സുകളാൽ വേർതിരിക്കപ്പെട്ടേക്കാം. ആട്രിബ്യൂട്ട് മൂല്യങ്ങളുടെ പട്ടികയിൽ ആവശ്യമായ മൂല്യം ഉള്ളപ്പോൾ ഒരു സ്റ്റൈൽ റൂൾ സജ്ജീകരിക്കാൻ, ഇനിപ്പറയുന്ന സെലക്ടർ ഉപയോഗിക്കുക:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

ആട്രിബ്യൂട്ടിന് ആവശ്യമായ മൂല്യമുണ്ടെങ്കിൽ അല്ലെങ്കിൽ സ്‌പെയ്‌സ് വേർതിരിച്ച മൂല്യങ്ങളുടെ ലിസ്റ്റിൻ്റെ ഭാഗമാണെങ്കിൽ ശൈലി പ്രയോഗിക്കും. ഉദാഹരണത്തിന്:

{
നിറം:ചുവപ്പ്;
ഫോണ്ട് വലുപ്പം:150%;
}
...

ഞങ്ങളുടെ ഫോൺ: 777-77-77


ഞങ്ങളുടെ വിലാസം: മോസ്കോ സെൻ്റ്. സോവെറ്റ്സ്കായ 5

നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന ഫലം ലഭിക്കും:

ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ ഉൾപ്പെടുന്ന ഒരു ഘടകത്തിന് നിയമം ബാധകമാണ്: ക്ലാസ്ഒരു അർത്ഥമുണ്ട് ടെൽ.

4. ആട്രിബ്യൂട്ട് മൂല്യത്തിൽ ഹൈഫൻ

ഐഡൻ്റിഫയറിലും ക്ലാസ് മൂല്യങ്ങളിലും ഒരു ഹൈഫൻ അനുവദനീയമാണ്. ആട്രിബ്യൂട്ട് മൂല്യങ്ങളിൽ ഒരു ഹൈഫൻ അടങ്ങിയിരിക്കാവുന്ന ഘടകങ്ങളുമായി ഒരു ശൈലി ബന്ധിപ്പിക്കുന്നതിന്, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന നിർമ്മാണം ഉപയോഗിക്കാം:

[ആട്രിബ്യൂട്ട്|="മൂല്യം"] (ശൈലി )
സെലക്ടർ[ആട്രിബ്യൂട്ട്|="മൂല്യം"] (ശൈലി )

ആട്രിബ്യൂട്ട് മൂല്യം ഒരു ഹൈഫൻ പിന്തുടരുന്ന നിർദ്ദിഷ്‌ട മൂല്യത്തിൽ ആരംഭിക്കുന്ന ഘടകങ്ങളിലേക്ക് ശൈലി പ്രയോഗിക്കുന്നു. ഉദാഹരണത്തിന്:

{
നിറം:ചുവപ്പ്;
ഫോണ്ട് വലുപ്പം:150%;
}
...



  • പോയിൻ്റ് 2



ഫലം:

ഉദാഹരണത്തിൽ, ക്ലാസ് നാമം മൂല്യത്തിൽ ആരംഭിക്കുന്ന ലിസ്റ്റ് ഘടകങ്ങൾക്ക് മാത്രമേ സ്റ്റൈൽ റൂൾ ബാധകമാകൂ "മെനു-".

5. ആട്രിബ്യൂട്ട് മൂല്യം നിർദ്ദിഷ്ട വാചകത്തിൽ ആരംഭിക്കുന്നു

ടാഗ് ആട്രിബ്യൂട്ട് മൂല്യം ഒരു നിർദ്ദിഷ്‌ട മൂല്യത്തിൽ ആരംഭിക്കുകയാണെങ്കിൽ ഈ സെലക്ടർ ഒരു ഘടകത്തിനായുള്ള ശൈലി സജ്ജമാക്കുന്നു. രണ്ട് ഓപ്ഷനുകൾ ഉണ്ടാകാം:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

a(
നിറം:പച്ച;
ഫോണ്ട്-വെയ്റ്റ്:ബോൾഡ്;
}
...

ഫലം:

ബാഹ്യ ലിങ്കുകളും ആന്തരിക ലിങ്കുകളും വ്യത്യസ്തമായി എങ്ങനെ പ്രദർശിപ്പിക്കാമെന്ന് ഉദാഹരണം കാണിക്കുന്നു. ബാഹ്യ ലിങ്കുകൾ എല്ലായ്പ്പോഴും "http://" എന്ന സ്ട്രിംഗിൽ ആരംഭിക്കുന്നു. അതിനാൽ, ആട്രിബ്യൂട്ട് ഉള്ള ലിങ്കുകളിൽ മാത്രമേ ശൈലി പ്രയോഗിക്കൂ എന്ന് സെലക്ടറിൽ ഞങ്ങൾ സൂചിപ്പിക്കുന്നു hrefഅർത്ഥത്തിൽ ആരംഭിക്കുന്നു http://.

6. ആട്രിബ്യൂട്ട് മൂല്യം നിശ്ചിത വാചകത്തിൽ അവസാനിക്കുന്നു

നിർദ്ദിഷ്ട വാചകത്തിൽ അവസാനിക്കുന്ന ആട്രിബ്യൂട്ട് മൂല്യമുള്ള ഘടകങ്ങളിലേക്ക് ഒരു ശൈലി ബന്ധിപ്പിക്കുന്നു. ഇനിപ്പറയുന്ന വാക്യഘടനയുണ്ട്:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

IMG (
ബോർഡർ: 5px ഖര ചുവപ്പ്;
}
...

GIF ചിത്രം



ചിത്ര ഫോർമാറ്റ് png


ഫലം:

ഉദാഹരണത്തിൽ, gif വിപുലീകരണമുള്ള എല്ലാ ചിത്രങ്ങളും അഞ്ച് പിക്സൽ കട്ടിയുള്ള ചുവന്ന ബോർഡറോടെ പ്രദർശിപ്പിക്കും.

7. ആട്രിബ്യൂട്ട് മൂല്യത്തിൽ നിർദ്ദിഷ്ട സ്ട്രിംഗ് അടങ്ങിയിരിക്കുന്നു

ആട്രിബ്യൂട്ട് മൂല്യത്തിൽ നിർദ്ദിഷ്ട വാചകം അടങ്ങിയിരിക്കുന്ന ടാഗുകളിലേക്ക് ഈ സെലക്ടർ ഒരു ശൈലി ബന്ധിപ്പിക്കുന്നു. വാക്യഘടന:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

ശൈലിഉള്ള ഘടകങ്ങളുമായി ബന്ധിപ്പിക്കുന്നു ആട്രിബ്യൂട്ട്നിർദ്ദിഷ്‌ട പേരിനൊപ്പം അതിൻ്റെ മൂല്യത്തിൽ വ്യക്തമാക്കിയത് അടങ്ങിയിരിക്കുന്നു സബ്സ്ട്രിംഗ്. ഉദാഹരണത്തിന്:

IMG (
ബോർഡർ: 5px ഖര ചുവപ്പ്;
}
...

ഗാലറി ഫോൾഡറിൽ നിന്നുള്ള ചിത്രം



മറ്റൊരു ഫോൾഡറിൽ നിന്നുള്ള ചിത്രം


ഫലം:

ഉദാഹരണത്തിൽ, ഫോൾഡറിൽ നിന്ന് ലോഡ് ചെയ്ത ചിത്രങ്ങളിൽ ശൈലി പ്രയോഗിക്കുന്നു "ഗാലറി".

ആട്രിബ്യൂട്ട് സെലക്ടർമാരെക്കുറിച്ച് അത്രമാത്രം. മുകളിലുള്ള എല്ലാ രീതികളും പരസ്പരം സംയോജിപ്പിക്കാം:

സെലക്ടർ[ആട്രിബ്യൂട്ട്1="മൂല്യം1"][ആട്രിബ്യൂട്ട്2="മൂല്യം2"] (സ്റ്റൈൽ )

കൂടാതെ, പ്രത്യേക CSS സെലക്‌ടറുകളെക്കുറിച്ച് ഞാൻ നിങ്ങളെ ഓർമ്മിപ്പിക്കട്ടെ:

  • "+", "~" എന്നീ ചിഹ്നങ്ങൾ ഉപയോഗിച്ചാണ് രൂപപ്പെടുന്നത്;
  • ">" ചിഹ്നം css ശൈലികളെ ബന്ധിപ്പിക്കുന്നു അനുബന്ധ സ്ഥാപനങ്ങൾടാഗുകൾ;
  • ചിഹ്നം<пробел>സന്ദർഭ സെലക്ടറുകൾ സൃഷ്ടിക്കുന്നു.

ഭാവിയിലെ ലേഖനങ്ങളിൽ, ശക്തമായ സ്റ്റൈൽ മാനേജ്മെൻ്റ് ടൂളുകൾ നൽകുന്ന കപട ഘടകങ്ങളും വ്യാജ ക്ലാസുകളും ഞങ്ങൾ പരിശോധിക്കും.

അത്രയേയുള്ളൂ, വീണ്ടും കാണാം.