<< Previous Next >>

CSS Links

HTML లో ట్యాగ్ "<a href=" గురించి చదివి ఉన్నారు. ఈ ట్యాగ్ CSS style ఎలా ఉపయోగపడుతుందో ఇప్పుడు తెలుసుకుందాం.
ఉదాహరణకు Google Search లో ఏదైనా టైప్ చేసినప్పుడు దానికి సంబంధించి వందల రకాల links (లింక్స్) క్రింద డిస్ప్లే అవుతాయి. అందులో ఏ link ని open చేసినా ఆ link కలర్ మారుతుంది అనగా మనం ఇదివరకే ఆ link ని visit (open) చేసినట్టు సులువుగా అర్థం అవడానికి ఇలా జరుగుతుంది. ఈ విధంగా ఏదైనా link పై mouse hover చేసినప్పుడుదాని కలర్ మారితే అది active లో ఉంది అనుకుంటారు. అదే కలర్ మారకపోతే ఆ link పని చెయ్యడంలేదు అనుకునే అవకాశం కుడా ఎక్కువగా ఉంది ఇది మనిషి సహజగుణం. ఇదే విధంగా link ని visit చేసిన తరువాత అప్పుడు ఆ link కలర్ మరోలా ఉంటే మనం ఇదివరకే ఈ link ని visit చేసాము అని కుడా సులువుగా అర్థం చేసుకోవచ్చు. ఈ విధంగా ఒక link యొక్క కలర్ ని మార్చడం ద్వారా దాని status (స్థితి) ని తెలిపే ఉద్దేశ్యంగా link property ని develop చెయ్యడం జరిగింది. ఈ property నాలుగు (4) values ని కలిగి ఉంటుంది.

  • a:link - సాధారణ link కలర్
  • a:hover - link పై mouse ని పెట్టినప్పుడు ఆ link యొక్క కలర్
  • a:active - link ని click చేసేటప్పుడు ఆ link యొక్క కలర్
  • a:visited - చివరిగా link ని open చేసినతరువాత link యొక్క కలర్
క్రింది ఉదాహరణలో మీకు సులువుగా అర్థం కావడానికి మాత్రమే కలర్స్ కి పేర్లు వాడడం జరిగింది.

Sample webpage
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a:link {color: red;}
a:visited {color: blue;}
a:hover{color:green;}
a:active{color: orange;}
</style>
</head>
<body>
<a href="">link యొక్క కలర్ మొదట red , తరువాత mouse hover చేసినప్పుడు green గా మారి link ను click చేసేటప్పుడు orange అయి click చేసి వదిలేసినా తరువాత blue గా మారుతుంది.</a>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

గమనిక : css లో links ని పైన చెప్పిన విధంగా సెట్ చేసేటప్పుడు వాటి క్రమాన్ని తప్పక పాటించాలి. అనగా "a:hover" అనేది "a:link", "a:visited" ల తరువాతనే వ్రాయాలి మరియు "a:active" అనేది "a:hover" తరువాతనే ఉండాలి.

తదుపరి CSS Lists గురించి...

<< Previous Next >>
Back to Top