లింకులు వెబ్ పుటలలో సర్వసాధారణంగా ఉంటాయి, కాని చాలామంది వెబ్ డిజైనర్లు తమ కనెక్షన్లను సమర్థవంతంగా నిర్వహించడానికి మరియు నిర్వహించడానికి CSS తో ఉన్న శక్తిని గ్రహించరు. మీరు సందర్శించిన, హోవర్, మరియు క్రియాశీల రాష్ట్రాలతో లింక్లను నిర్వచించవచ్చు. మీ లింకులు మరింత పిజ్జాజ్ ఇవ్వడానికి లేదా వాటిని బటన్లు లేదా చిత్రాలలాగా కనిపించడానికి మీరు సరిహద్దులు మరియు నేపథ్యాలతో కూడా పని చేయవచ్చు.
చాలామంది వెబ్ డిజైనర్లు "ఒక" ట్యాగ్పై శైలిని నిర్వచించడం ద్వారా ప్రారంభమవుతుంది:
ఒక {రంగు: ఎరుపు రంగు; }ఇది శైలి యొక్క అన్ని అంశాలను (హోవర్, సందర్శించిన, మరియు చురుకుగా) మారుస్తుంది. విడిగా ప్రతి భాగాన్ని శైలి చేయడానికి, మీరు లింక్ సూడో-తరగతులను తప్పక ఉపయోగించాలి.
సూడో క్లాసులు లింక్
మీరు నిర్వచించగల లింక్ నకిలీ-తరగతుల నాలుగు ప్రాథమిక రకాలు ఉన్నాయి:
- : లింక్ - ఈ లింక్ కోసం డిఫాల్ట్ శైలి
- : సందర్శించిన - ఒక లింక్ క్లిక్ చేసిన తర్వాత
- : హోవర్ - ఒక మౌస్ ఒక లింక్పై భరోసా (ముందటి క్లిక్)
- : క్రియాశీల - లింక్ క్లిక్ చేస్తున్నట్లుగానే
ఒక లింక్ సూడో తరగతి నిర్వచించడానికి, మీ CSS సెలెక్టర్ లో ఒక ట్యాగ్ తో దాన్ని ఉపయోగించండి. కాబట్టి, మీ అన్ని లింక్ల బూడిద రంగుకి రంగు మార్చడానికి, వ్రాయండి:
ఒక: సందర్శించారు {రంగు: బూడిద; }మీరు శైలి ఒక లింక్ నకిలీ తరగతి ఉంటే, అది వాటిని అన్ని శైలి మంచి ఆలోచన. ఆ విధంగా మీరు అదనపు ఫలితాలు ఆశ్చర్యపడదు. కాబట్టి మీరు సందర్శించిన రంగును బూడిద రంగులోకి మార్చుకోవాలనుకుంటే, మీ అన్ని ఇతర నకిలీ లక్షణాలు మీ నల్లటిగా ఉంటాయి, మీరు ఇలా వ్రాస్తారు:
a: link, a: hover, a: క్రియాశీల {రంగు: నలుపు; } a: సందర్శించిన {రంగు: బూడిదరంగు; }లింక్ రంగులు మార్చండి
శైలి లింకులు అత్యంత ప్రాచుర్యం మార్గం మౌస్ దానిపై hovers ఉన్నప్పుడు రంగు మార్చడానికి ఉంది:
ఒక {రంగు: # 00f; } a: హోవర్ {color: # 0f0; }కానీ వారు దానిపై క్లిక్ చేస్తున్నప్పుడు లింక్ ఎలా కనిపిస్తుందో ప్రభావితం చేయవచ్చని మర్చిపోకండి: క్రియాశీల ఆస్తి:
ఒక {రంగు: # 00f; } a: క్రియాశీల {రంగు: # f00; }లేదా మీరు దీన్ని సందర్శించిన తర్వాత లింక్ను ఎలా చూస్తారు: సందర్శించిన ఆస్తి:
ఒక {రంగు: # 00f; } a: సందర్శించిన {రంగు: # f0f; }ఇది అన్ని కలిసి ఉంచడానికి:
ఒక {రంగు: # 00f; } a: సందర్శించిన {రంగు: # f0f; } a: హోవర్ {color: # 0f0; } a: క్రియాశీల {రంగు: # f00; }ఐకాన్స్ లేదా బుల్లెట్లను జోడించుటకు లింకుల మీద నేపథ్యాలు ఉంచండి
మీరు స్టైలిష్ బ్యాక్ గ్రౌండ్స్ కథనంలో లింక్పై నేపథ్యాన్ని ఉంచవచ్చు, కానీ నేపథ్యంతో కొద్దిగా ప్లే చేయడం ద్వారా, మీరు అనుబంధిత చిహ్నాన్ని కలిగి ఉన్న లింక్ను సృష్టించవచ్చు. మీ టెక్స్ట్ పెద్దదిగా ఉంటే తప్ప, చిన్నది 15px ద్వారా 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 పాటు వచ్చింది వరకు, మీరు మీ పేజీలను లోడ్ చేయడానికి ఎక్కువ సమయం తీసుకునే చిత్రాలను ఉపయోగించి బటన్లు సృష్టించడానికి వచ్చింది. అదృష్టవశాత్తూ, మీరు CSS తో సులభంగా ఒక బటన్ వంటి ప్రభావం సృష్టించడానికి సహాయపడే ఒక సరిహద్దు శైలి ఉంది.
ఒక {సరిహద్దు: 4px ప్రారంభం; పాడింగ్: 2px; టెక్స్ట్ అలంకరణ: none; } a: చురుకుగా {border: 4px inset; }గమనిక, మీరు ప్రారంభంలో మరియు ఇన్సెట్ శైలుల్లో రంగులు వేసినప్పుడు, మీరు ఊహించిన విధంగా బ్రౌజర్లు వాటిని అందించే అవకాశం లేదు. సో, ఇక్కడ రంగు సరిహద్దులతో ఒక ఫ్యాన్సియెర్స్ బటన్:
ఒక {సరిహద్దు శైలి: ఘన; సరిహద్దు-వెడల్పు: 1px 4px 4px 1px; టెక్స్ట్ అలంకరణ: none; పాడింగ్: 4 px; సరిహద్దు రంగు: # 69f # 00f # 00f # 69f; }మరియు మీరు నకిలీ మరియు ఒక బటన్ లింక్ యొక్క క్రియాశీల శైలులను ప్రభావితం చేయవచ్చు, కేవలం ఆ నకిలీ తరగతులు ఉపయోగించండి:
a: link {border-style: solid; సరిహద్దు-వెడల్పు: 1px 4px 4px 1px; టెక్స్ట్ అలంకరణ: none; పాడింగ్: 4 px; సరిహద్దు రంగు: # 69f # 00f # 00f # 69f; } a: హోవర్ {border-color: #ccc; }