CSS లింక్

CSS ద్వారా లింకుల స్టైల్స్ వివిధ రీతులుగా అమర్చవచ్చు.

టెక్స్ట్ లింకు టెక్స్ట్ లింకు లింకు బటన్ లింకు బటన్

లింకు స్టైల్స్ అమర్చండి

లింకులు ఏ సిఎస్ఎస్ అంశాన్ని ఉపయోగించవచ్చు (ఉదాహరణకు color,font-family,background మరియు ఇలాంటి అంశాలను ఉపయోగించి స్టైల్స్ అమర్చండి.

ఉదాహరణ

a {
  color: hotpink;
}

亲自试一试

ఇంకా, లింకు ఏ స్థితిలో ఉందో అనుసరించి వివిధ స్టైల్స్ అమర్చవచ్చు.

నాలుగు లింకు స్థితులు ఉన్నాయి:

  • a:link - సాధారణ, సందర్శించని లింకు
  • a:visited - వినియోగదారు అనేక సందర్శించిన లింకు
  • a:hover - వినియోగదారు మౌస్ ను లింకుపైనికి పెట్టినప్పుడు
  • a:active - లింకు సిక్కించినప్పుడు

ఉదాహరణ

/* సందర్శించని లింకు */
a:link {
  color: red;
}
/* పూర్వంగా సందర్శించిన లింకు */
a:visited {
  color: green;
}
/* మౌస్ ను లింకుపైనికి పెట్టినప్పుడు */
a:hover {
  color: hotpink;
}
/* ఎంపికచేసిన లింకు */
a:active {
  color: blue;
}

亲自试一试

పలు లింకు స్థితులకు స్టైల్స్ అమర్చడానికి ఈ క్రమంలో పాటించండి:

  • a:hover అనేది a:link మరియు a:visited తర్వాత ఉండాలి
  • a:active అనేది a:hover తర్వాత ఉండాలి

టెక్స్ట్ డికోరేషన్

text-decoration లింకుల క్రిందికి లైన్స్ తొలగించడానికి ఈ అంశాలను ఉపయోగించబడుతుంది:

ఉదాహరణ

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

亲自试一试

బ్యాక్గ్రౌండ్ కలరు

background-color లింకుని బ్యాక్గ్రౌండ్ కలరును నిర్దేశించడానికి ఈ అంశాలను ఉపయోగించవచ్చు:

ఉదాహరణ

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

亲自试一试

లింకు బటన్

ఈ ఉదాహరణలో మేము అనేక సిఎస్ఎస్ అంశాలను కలపడం ద్వారా అధిక స్థాయి ఉదాహరణను ప్రదర్శిస్తున్నాము, దీనిలో లింకులను బాక్స్/బటన్ గా ప్రదర్శించడానికి ఉపయోగిస్తున్నాము:

ఉదాహరణ

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

亲自试一试

更多实例

为超链接添加不同的样式
本例演示如何向超链接添加其他样式。
高级 - 创建带边框的链接按钮
లింక్ బాక్స్/బటన్‌ను సృష్టించడానికి మరొక ఉదాహరణ
కార్సర్ మార్చండి
cursor అట్రిబ్యూట్ అనేది ప్రదర్శించవలసిన కార్సర్ టైప్‌ను నిర్దేశిస్తుంది. ఈ ఉదాహరణ వివిధ కార్సర్ టైప్‌లను ప్రదర్శిస్తుంది (లింకులకు ఉపయోగపడుతుంది).