CSS Links

HTML இணைப்புகளை CSS உடன் பாணியிடுதல்

CSS இணைப்பு பாணியிடல்

HTML இணைப்புகள் பல CSS பண்புகளுடன் பாணியிடப்படலாம், எடுத்துக்காட்டாக color, text-decoration, background-color, font-size, font-weight, font-family போன்றவை.

🔗 இணைப்பு பாணியிடல்:

CSS இணைப்பு பாணியிடல் அடிப்படை HTML மீயிணைப்புகளை காட்சி ரீதியாக கவர்ச்சிகரமான மற்றும் ஊடாடும் கூறுகளாக மாற்றுகிறது. சரியான இணைப்பு பாணியிடல் பயனர் அனுபவத்தை மேம்படுத்துகிறது, வழிசெலுத்துதல் தெளிவை மேம்படுத்துகிறது.

அடிப்படை இணைப்பு பாணியிடல்

எடுத்துக்காட்டு

ஒரு இணைப்பை வண்ணம், பின்புல-வண்ணம் மற்றும் தடித்த எழுத்து-எடையுடன் பாணியிடவும்:

a {
  color: hotpink;
  background-color: yellow;
  font-weight: bold;
}

CSS இணைப்புகள் - உரை அலங்காரம்

இணைப்புகளிலிருந்து அடிக்கோடுகளை அகற்ற text-decoration பண்பு பெரும்பாலும் பயன்படுத்தப்படுகிறது:

எடுத்துக்காட்டு

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

CSS இணைப்புகள் - பின்புல வண்ணம்

இணைப்புகளுக்கான பின்புல வண்ணத்தைக் குறிப்பிட background-color பண்பு பயன்படுத்தப்படலாம்:

எடுத்துக்காட்டு

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

கூடுதல் எடுத்துக்காட்டுகள்

எடுத்துக்காட்டு: பல்வேறு பாணிகள்

a.one:link {color:red;}
a.one:visited {color:blue;}
a.one:hover {color:orange;}

a.two:link {color:red;}
a.two:visited {color:blue;}
a.two:hover {font-size:150%;}

a.three:link {color:red;}
a.three:visited {color:blue;}
a.three:hover {background:lightgreen;}

a.four:link {color:red;}
a.four:visited {color:blue;}
a.four:hover {font-family:monospace;}

a.five:link {color:red;text-decoration:none;}
a.five:visited {color:blue;text-decoration:none;}
a.five:hover {text-decoration:underline;}

🎨 வண்ண உளவியல்:

இணைப்பு வண்ண தேர்வுகள் பயனர் நடத்தையில் கணிசமான தாக்கத்தை ஏற்படுத்துகின்றன. பார்வையிடப்படாத இணைப்புகள் பொதுவாக பிராண்ட் வண்ணங்கள் அல்லது உயர் முரண்பாட்டு நிறங்களைப் பயன்படுத்துகின்றன, பார்வையிட்ட இணைப்புகள் பெரும்பாலும் தணிக்கப்பட்ட நிறங்களைப் பயன்படுத்துகின்றன.

CSS இணைப்புகள் பயிற்சி

இணைப்புகள் பற்றிய உங்கள் அறிவை இந்த பயிற்சியுடன் சோதிக்கவும்.

பார்வையிடப்பட்ட ஒரு இணைப்பை பாணியிட சரியான CSS போலி-வகுப்பு எது?

a:hover
✗ தவறு! a:hover போலி-வகுப்பு பயனர் இணைப்பின் மீது சுட்டியை வைக்கும் போது பாணியிடப் பயன்படுகிறது, பார்வையிட்ட இணைப்புகளுக்கு அல்ல.
a:visited
✓ சரி! a:visited போலி-வகுப்பு பயனர் ஏற்கனவே பார்வையிட்ட இணைப்புகளை பாணியிடப் பயன்படுகிறது. இது பார்வையிடப்பட்ட இணைப்புகளைக் குறிப்பிடுவதற்கும், பயனர்களுக்கு அவர்கள் ஏற்கனவே பார்வையிட்ட பக்கங்களை அடையாளம் காண உதவுவதற்கும் பயன்படுகிறது.
a:active
✗ தவறு! a:active போலி-வகுப்பு இணைப்பு கிளிக் செய்யப்படும் தருணத்தில் பாணியிடப் பயன்படுகிறது, பார்வையிட்ட இணைப்புகளுக்கு அல்ல.
a:link
✗ தவறு! a:link போலி-வகுப்பு பார்வையிடப்படாத, சாதாரண இணைப்புகளை பாணியிடப் பயன்படுகிறது, பார்வையிட்ட இணைப்புகளுக்கு அல்ல.

சுட்டி வகைகள்

இந்த எடுத்துக்காட்டு வெவ்வேறு வகையான சுட்டிகளைக் காண்பிக்கிறது (இணைப்புகளுக்கு பயனுள்ளதாக இருக்கும்):

<span style="cursor: auto">auto</span>
<span style="cursor: crosshair">crosshair</span>
<span style="cursor: default">default</span>
<span style="cursor: e-resize">e-resize</span>
<span style="cursor: help">help</span>
<span style="cursor: move">move</span>
<span style="cursor: n-resize">n-resize</span>
<span style="cursor: ne-resize">ne-resize</span>
<span style="cursor: nw-resize">nw-resize</span>
<span style="cursor: pointer">pointer</span>
<span style="cursor: progress">progress</span>
<span style="cursor: s-resize">s-resize</span>
<span style="cursor: se-resize">se-resize</span>
<span style="cursor: sw-resize">sw-resize</span>
<span style="cursor: text">text</span>
<span style="cursor: w-resize">w-resize</span>
<span style="cursor: wait">wait</span>

👆 சுட்டி குறிப்பு:

cursor பண்பு இணைப்பு ஊடாட்டத்தைப் பற்றிய கூடுதல் காட்சி குறிப்புகளை வழங்குகிறது. "pointer" சுட்டி (கை ஐகான்) இணைப்புகளுக்கான நிலையானது, மற்ற சுட்டி வகைகள் வெவ்வேறு ஊடாட்ட நடத்தைகள் அல்லது ஏற்ற நிலைகளைக் குறிக்கலாம்.

அணுகல் கருத்துகள்

வண்ண முரண்பாடு: உரை மற்றும் பின்புலத்திற்கு இடையே போதுமான வண்ண முரண்பாட்டை உறுதிப்படுத்தவும்
விசைப்பலகை வழிச்செலுத்தல்: விசைப்பலகை வழிச்செலுத்தலுக்கு தெளிவான கவனம் காட்டிகளை வழங்கவும்
ஊடாட்ட பின்னூட்டம்: hover மற்றும் focus நிலைகளுக்கு காட்சி பின்னூட்டத்தை உள்ளடக்கவும்
திரை வாசகர்கள்: திரை வாசகர்களுக்கு சரியான ARIA பண்புக்கூறுகளைச் சேர்க்கவும்