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 کی خاصیت جس میں دکھائی دینے والی موشک کا نوعیت کا معلوم کیا جاتا ہے۔ اس مثال میں مختلف نوعیت کی موشک (لنگک کے لئے مفید) دکھائی دی گئی ہیں。