വെബ് പേജുകളിൽ ലിങ്കുകൾ വളരെ സാധാരണമാണ്, എന്നാൽ പല വെബ് ഡിസൈനർമാരും അവയുടെ ലിങ്കുകൾ ഫലപ്രദമായി കൈകാര്യം ചെയ്യാനും അവ കൈകാര്യം ചെയ്യാനും ഉള്ള CSS ഉള്ളതിനാൽ അവർക്ക് മനസ്സിലാകുന്നില്ല. സന്ദർശിച്ച, ഹോവർ, സജീവ സംസ്ഥാനങ്ങളുമായി ലിങ്കുകൾ നിങ്ങൾക്ക് നിർവ്വചിക്കാവുന്നതാണ്. നിങ്ങളുടെ ലിങ്കുകൾ കൂടുതൽ pizzaz നൽകുന്നതിന് അല്ലെങ്കിൽ നിങ്ങൾക്ക് ബട്ടണുകൾ അല്ലെങ്കിൽ ഇമേജുകൾ പോലെ തോന്നിപ്പിക്കുന്നതിനായി അതിരുകളും പശ്ചാത്തലങ്ങളും ഉപയോഗിച്ച് നിങ്ങൾക്ക് പ്രവർത്തിക്കാനാകും.
"ഒരു" ടാഗിൽ ഒരു ശൈലി നിർവ്വചിച്ചുകൊണ്ട് മിക്ക വെബ് ഡിസൈനർമാർക്കും ആരംഭിക്കാം:
ഒരു {നിറം: ചുവപ്പ്; }ഇത് ലിങ്കിന്റെ എല്ലാ വശങ്ങളും (ഹോവർ, സന്ദർശിച്ചു, സജീവമായ) രീതിയിൽ പ്രവർത്തിക്കും. ഓരോ ഭാഗങ്ങളും വെവ്വേറെ പാസ്റ്റുചെയ്യുന്നതിന്, നിങ്ങൾ ലിങ്ക് സ്യൂഡോ ക്ലാസുകൾ ഉപയോഗിക്കേണ്ടതാണ്.
സ്യൂഡോ ക്ലാസുകൾ ലിങ്ക് ചെയ്യുക
നിങ്ങൾക്ക് നിർവചിക്കാവുന്ന നാലു അടിസ്ഥാന തരങ്ങളായ വ്യാജ കപട-ക്ലാസുകളുണ്ട്:
- : ലിങ്ക് - ഈ ലിങ്ക് സ്ഥിരസ്ഥിതി രീതിയാണ്
- : സന്ദർശിക്കുക - ഒരു ലിങ്ക് ക്ലിക്കുചെയ്തതിന് ശേഷം
- : ഹോവർ - ഒരു മൗസ് ഒരു ലിങ്ക് വഴി മുന്നിലായിരിക്കുന്നതുപോലെ (പ്രീ-ക്ലിക്കിൽ)
- : സജീവം - ലിങ്ക് ക്ലിക്ക് ചെയ്യുമ്പോൾ വലതുഭാഗത്ത്
ഒരു ലിങ്ക് സ്യൂഡോ ക്ലാസ് നിർവ്വചിക്കുന്നതിന്, നിങ്ങളുടെ CSS സെലക്ടറിൽ ഒരു ടാഗ് ഉപയോഗിച്ച് അത് ഉപയോഗിക്കുക. അതിനാൽ, നിങ്ങളുടെ എല്ലാ ലിങ്കുകളുടെ സന്ദർശന വർണ്ണവും ചാരനിറത്തിലേക്ക് മാറ്റുക, എഴുതുക:
a: സന്ദർശിച്ചു {വർണം: ചാര; }നിങ്ങൾ ഒരു ലിങ്ക് സ്യൂഡോ ക്ലാസ് ശൈലി ആണെങ്കിൽ, അവരെ എല്ലാവരെയും ശൈലിയിൽ മികവുറ്റ ഒരു നല്ല ആശയമാണ്. അദ്ഭുതകരമായ ഫലം കൊണ്ട് നിങ്ങൾ ആശ്ചര്യപ്പെടുന്നില്ല. നിങ്ങൾ സന്ദർശിക്കുന്ന വർണ്ണം ചാരനിറത്തിലേക്ക് മാറ്റാൻ താൽപ്പര്യപ്പെടുന്നെങ്കിൽ, നിങ്ങളുടെ ലിങ്കുകളുടെ മറ്റ് എല്ലാ കപട സ്വഭാവങ്ങളും കറുത്തതായിരിക്കും, നിങ്ങൾ എഴുതാനാഗ്രഹിക്കുന്നു:
a: link, a: hover, a: active {color: black; } a: സന്ദർശിച്ചു {വർണം: ചാര; }ലിങ്ക് നിറങ്ങൾ മാറ്റുക
ശൈലിയിലുള്ള കണ്ണികൾക്ക് ഏറ്റവും ജനപ്രിയം, മൌസ് എപ്പോഴൊക്കെ നിറം മാറുന്നു എന്നതാണ്:
ഒരു {നിറം: # 00f; } a: ഹോവർ {വർഗ്ഗം: # 0f0; }പക്ഷെ, അതിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ അവ കാണുന്നത് എങ്ങനെയെന്ന് നിങ്ങൾക്ക് ബാധകമാകുമെന്നത് മറക്കരുത്: സജീവ വസ്തു:
ഒരു {നിറം: # 00f; } a: സജീവ {നിറം: # f00; }അല്ലെങ്കിൽ നിങ്ങൾ സന്ദർശിച്ച് ലിങ്ക് സന്ദർശിച്ച ശേഷം: സന്ദർശിക്കപ്പെട്ട പ്രോപ്പർട്ടി:
ഒരു {നിറം: # 00f; } a: സന്ദർശിച്ചു {നിറം: # f0f; }എല്ലാം ഒന്നിച്ച് ചേർക്കുന്നതിന്:
ഒരു {നിറം: # 00f; } a: സന്ദർശിച്ചു {നിറം: # f0f; } a: ഹോവർ {വർഗ്ഗം: # 0f0; } a: സജീവ {നിറം: # f00; }ഐക്കണുകൾ അല്ലെങ്കിൽ ബുള്ളറ്റുകൾ ചേർക്കാൻ ലിങ്കുകളിൽ പശ്ചാത്തലങ്ങൾ ഇടുക
നിങ്ങൾക്ക് സ്റ്റൈലിഷ് പശ്ചാത്തല ആർട്ടിക്കിളിലെ ഒരു പശ്ചാത്തലത്തിൽ ഒരു പശ്ചാത്തലം സ്ഥാപിക്കാൻ കഴിയും, പക്ഷേ പശ്ചാത്തലത്തിൽ കുറച്ച് അൽപ്പം സംസാരിക്കുന്നതിലൂടെ, അനുബന്ധ ഐക്കൺ ഉള്ള ഒരു ലിങ്ക് സൃഷ്ടിക്കാൻ കഴിയും. നിങ്ങളുടെ വാചകം വലുപ്പിക്കാതെ, ചെറിയ ഒരു ഐക്കൺ തിരഞ്ഞെടുക്കുക, 15px by 15px. പശ്ചാത്തലത്തിന്റെ ഒരു വശത്തേക്ക് പശ്ചാത്തലം മാറ്റി ആവർത്തിക്കുന്നതിനുള്ള ഓപ്ഷൻ ആവർത്തിക്കില്ല. പിന്നെ, ലിങ്ക് പാഡ് ചെയ്യുക, അങ്ങനെ ഐക്കണിൽ കാണുന്നതിന് വലത്തോട്ട് ഇടത്തേക്കോ വലത്തേക്കോ വലത്തോട്ട് നീങ്ങുന്നു.
ഒരു {പാഡിംഗ്: 0 2px 1px 15px; പശ്ചാത്തലത്തിൽ: # ff url (ball.gif) ഇടത് കേന്ദ്രം വീണ്ടും ആവർത്തിക്കരുത്; നിറം: # c00; }നിങ്ങളുടെ ഐക്കൺ ലഭിച്ചുകഴിഞ്ഞാൽ, ലിങ്ക് മാറുന്നതിന് നിങ്ങളുടെ ഹോവർ, സജീവമായ, സന്ദർശിത ഐക്കണുകൾ എന്നിവ പോലുള്ള വ്യത്യസ്തമായ ചിത്രം സജ്ജമാക്കാൻ കഴിയും:
ഒരു {പാഡിംഗ്: 0 2px 1px 15px; പശ്ചാത്തലത്തിൽ: # ff url (ball.gif) ഇടത് കേന്ദ്രം വീണ്ടും ആവർത്തിക്കരുത്; നിറം: # c00; } a: ഹോവർ {background: # ff url (ball2.gif) ഇടത് കേന്ദ്രം വേണ്ടെന്ന് വയ്ക്കുക; } a: സജീവമായ {background: # ff url (ball3.gif) ഇടത് കേന്ദ്രം വേണ്ടത്ര തിരിച്ചടിക്കുന്നില്ല; }ബട്ടണുകൾ പോലെ നിങ്ങളുടെ ലിങ്കുകൾ കാണുക
ബട്ടണുകൾ വളരെ ജനപ്രിയമാണ്, പക്ഷേ സിഎസ്സെൻ വരുന്നതുവരെ, ഇമേജുകൾ ഉപയോഗിച്ച് ബട്ടണുകൾ സൃഷ്ടിക്കേണ്ടതുണ്ട്, നിങ്ങളുടെ പേജുകൾ ലോഡ് ചെയ്യാൻ കൂടുതൽ സമയം എടുക്കുന്നു. ഭാഗ്യവശാൽ, നിങ്ങൾക്ക് CSS ഉപയോഗിച്ച് എളുപ്പത്തിൽ ഒരു ബട്ടൺ പോലുള്ള ഫലം സൃഷ്ടിക്കാൻ സഹായിക്കുന്ന ഒരു ബോർഡർ ശൈലി ഉണ്ട്.
ഒരു {border: 4px start; പാഡിംഗ്: 2px; വാചകം-അലങ്കരിക്കൽ: ഒന്നുമില്ല; } a: സജീവ {border: 4px ഇൻസെറ്റ്; }ശ്രദ്ധിക്കുക, നിങ്ങൾ തുടക്കത്തിൽ നിറങ്ങൾ ചേർക്കുകയും ഇൻസെറ്റ് ശൈലികൾ വരുത്തുമ്പോൾ ബ്രൗസറുകൾ നിങ്ങൾ പ്രതീക്ഷിച്ചേക്കാവുന്നതുപോലെ തന്നെ അവ വിതരണം ചെയ്യാനാകില്ല. ഇവിടെ, നിറമുള്ള അതിർത്തികളുള്ള ഒരു ആരാധകനാണ്:
a {border-style: solid; ബോർഡർ-വീതി: 1px 4px 4px 1px; വാചകം-അലങ്കരിക്കൽ: ഒന്നുമില്ല; പാഡിംഗ്: 4px; ബോർഡർ-വർണം: # 69f # 00f # 00f # 69f; }നിങ്ങൾ ഒരു ബട്ടൺ ലിസ്റ്റിന്റെ ഹോവർ കൂടാതെ സജീവ ശൈലികളെയെല്ലാം ബാധിക്കാം, ആ കപട ക്ലാസ്സുകൾ ഉപയോഗിക്കുക:
a: link {border-style: solid; ബോർഡർ-വീതി: 1px 4px 4px 1px; വാചകം-അലങ്കരിക്കൽ: ഒന്നുമില്ല; പാഡിംഗ്: 4px; ബോർഡർ-വർണം: # 69f # 00f # 00f # 69f; } a: ഹോവർ {border-color: #ccc; }