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;
}
விளைவு: இணைப்பு எடுத்துக்காட்டு
நிலையைப் பொறுத்து இணைப்புகளை பாணியிடுதல்
கூடுதலாக, இணைப்புகள் எந்த நிலையில் உள்ளன என்பதைப் பொறுத்து வித்தியாசமாக பாணியிடப்படலாம்.
நான்கு இணைப்பு நிலைகள்:
வரிசை விதிகள்:
இணைப்பு நிலைகளுக்கான பாணியை அமைக்கும்போது, சில வரிசை விதிகள் உள்ளன:
1. :hover என்பது :link மற்றும் :visited க்குப் பிறகு வர வேண்டும்
2. :active என்பது :hover க்குப் பிறகு வர வேண்டும்
எடுத்துக்காட்டு
/* பார்வையிடப்படாத இணைப்பு */
a:link {
color: red;
}
/* பார்வையிட்ட இணைப்பு */
a:visited {
color: green;
}
/* சுட்டியை வைக்கும் போது இணைப்பு */
a:hover {
color: hotpink;
}
/* தேர்ந்தெடுக்கப்பட்ட இணைப்பு */
a:active {
color: blue;
}
CSS இணைப்புகள் - உரை அலங்காரம்
இணைப்புகளிலிருந்து அடிக்கோடுகளை அகற்ற text-decoration பண்பு பெரும்பாலும் பயன்படுத்தப்படுகிறது:
எடுத்துக்காட்டு
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
விளைவு: சாதாரண இணைப்பு hover நிலை
CSS இணைப்புகள் - பின்புல வண்ணம்
இணைப்புகளுக்கான பின்புல வண்ணத்தைக் குறிப்பிட background-color பண்பு பயன்படுத்தப்படலாம்:
எடுத்துக்காட்டு
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
CSS இணைப்பு பொத்தான்கள்
HTML இணைப்பு பொத்தான்களை உருவாக்க CSS பயன்படுத்தப்படலாம்:
எடுத்துக்காட்டு 1
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;
}
விளைவு: பொத்தான் இணைப்பு 1
எடுத்துக்காட்டு 2
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
விளைவு: பொத்தான் இணைப்பு 2
கூடுதல் எடுத்துக்காட்டுகள்
எடுத்துக்காட்டு: பல்வேறு பாணிகள்
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 போலி-வகுப்பு எது?
சுட்டி வகைகள்
இந்த எடுத்துக்காட்டு வெவ்வேறு வகையான சுட்டிகளைக் காண்பிக்கிறது (இணைப்புகளுக்கு பயனுள்ளதாக இருக்கும்):
<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" சுட்டி (கை ஐகான்) இணைப்புகளுக்கான நிலையானது, மற்ற சுட்டி வகைகள் வெவ்வேறு ஊடாட்ட நடத்தைகள் அல்லது ஏற்ற நிலைகளைக் குறிக்கலாம்.