සබැඳි වෙබ් අඩවිවල බොහෝ විට පොදු වේ. නමුත් බොහෝ වෙබ් නිර්මාණකරුවන් CSS සමග ඇති බලය තේරුම් නොගනිති. ඔවුන්ගේ සබැඳි ක්රියාකාරීත්වය කළමනාකරණය කිරීම හා කළමනාකරණය කිරීම වටී. ඔබ නැරඹූ, නැව් සහ ක්රියාකාරී ප්රාන්ත සමඟ සම්බන්ධතා නිර්ණය කළ හැකිය. ඔබට ඔබේ සම්බන්ධතා වැඩි pizzaz ලබා දීමට හෝ දේශන හා පසුබිම් සමඟ වැඩ කිරීමටත් හැකි අතර ඒවා බොත්තම් හෝ ඡායාරූප පවා ලෙස පෙනෙන්නට හැකිය.
බොහෝ වෙබ් නිර්මාණකරුවන් විසින් "a" ටැගය මත ශෛලියක් නිර්ණය කිරීමෙන් ආරම්භ වේ:
{වර්ණය: රතු; }}මෙම සබැඳිය සම්බන්ධ සියලු පැති (මෙපමණකි, සංචාරය සහ ක්රියාකාරී) ශෛලිය වනු ඇත. සෑම කොටසකටම වෙන් වෙන් වශයෙන්, ඔබට සබැඳි ව්යාජ පංති භාවිතා කළ යුතුය.
ව්යාජ-පන්ති සම්බන්ධ කරන්න
ඔබට අර්ථ දැක්විය හැකි සබැඳි ව්යාජ පංති වර්ග හතරක් තිබේ:
- : සබැඳිය - මෙම සබැඳිය සඳහා පෙරනිමි විලාසය
- : සංචාරය කර ඇත - සබැඳියක් ක්ලික් කර පසුව
- : මූසිකය - මූසිකය සම්බන්ධ කිරීමක් (පෙර-ක්ලික් කිරීම)
- : සක්රියය - සබැඳිය ක්ලික් කළ විට හරි
සබැඳි ව්යාජ පන්තියක් අර්ථදක්වන්න, ඔබේ CSS තේරීම්කාරකය සමඟ එය භාවිතා කරන්න. ඒ නිසා, ඔබේ සියලු සබැඳි අළු පාටට වර්ණ වෙනස් කිරීමට, ලිවීමට:
a: සංචාරය {වර්ණය: අළු; }}ඔබ එක් සම්බන්ධයක් ව්යාජ පන්තියේ විලාසිතාවක් නම්, ඒවා සියල්ලම සාදා ගැනීම හොඳ අදහසකි. එතකොට ඔබ බාහිර ප්රතිඵලවලින් පුදුම වෙන්නේ නැහැ. ඒ නිසා ඔබ පිවිසුමට වර්ණය අළු පාට කිරීමට අවශ්ය නම්, ඔබගේ සබැඳි අනෙකුත් අනෙකුත් ව්යාජ-ගුණාංග කළු බවට පත් වේ, ඔබ මෙසේ ලියනු ඇත:
a: link, a: hover, a: ක්රියාකාරී {වර්ණය: කළු; } a: සංචාරය {වර්ණය: අළු; }}Link වර්ණ වෙනස් කරන්න
සබැඳි විලාසිතා වලට වඩාත් ජනප්රිය ක්රමයක් වන්නේ එය මූසිකය පැටලෙන විට වර්ණය වෙනස් කිරීමයි:
{{වර්ණ: # 00f; } a: hover {වර්ණය: # 0f0; }}එහෙත්, සබැඳිය, එය මත එය මත ක්ලික් කිරීමෙන් ඔබට සබැඳිය බලපාන්නේ කෙසේදැයි අමතක නොකරන්න: සක්රීය දේපල:
{{වර්ණ: # 00f; } a: ක්රියාකාරී {වර්ණ: # f00; }}නැතහොත් සංචාරය කරන ලද දේපල සමඟ ඔබ එය බැලූ විට සබැඳිය සලකන්නේ කෙසේද:
{{වර්ණ: # 00f; } a: visited {color: # f0f; }}සියල්ල එකට දැමීම:
{{වර්ණ: # 00f; } a: visited {color: # f0f; } a: hover {වර්ණය: # 0f0; } a: ක්රියාකාරී {වර්ණ: # f00; }}අයිකන හෝ බුලට් එකතු කිරීමට සබැඳි මත ඇති පසුබිම් තැබීම
Stylish Backgrounds ලිපියක් ලෙස ඔබට සබැඳියක් පසුබිම් තැබිය හැකිය, නමුත් පසුබිම සමඟ සෙල්ලම් කිරීමෙන්, ඔබට සම්බන්ධිත නිරූපකය ඇති සබැඳියක් නිර්මාණය කළ හැකිය. ඔබගේ පෙළ වඩා විශාල නොවේ නම්, කුඩා ප්රමාණයේ අයිකනයක් තෝරන්න, 15px පමණ 15px. සබැඳියේ එක් පැත්තකට පසුබිම් තැබීම හා නැවත පුනරාවර්ත විකල්පය නැවත සැකසිය නොහැක. ඉන්පසුව, සබැඳිය තුළ ඇති පෙළ ඉටුවේ දකින දකුණේ හෝ දකුණට බොහෝ දුරට ඈඳිය හැකිය.
{padding: 0 2px 1px 15px; පසුබිම: #fff url (ball.gif) left center no-repeat; වර්ණය: # c00; }}ඔබට ඔබගේ අයිකනය ලැබුණු පසු, ඔබගේ සබැඳිය වෙනස් කිරීම සඳහා ඔබගේ හචර්, ක්රියාකාරී සහ සංචාරය කළ අයිකන ලෙස වෙනත් රූපයක් සැකසිය හැක:
{padding: 0 2px 1px 15px; පසුබිම: #fff url (ball.gif) left center no-repeat; වර්ණය: # c00; } a: hover {පසුබිම: #fff url (ball2.gif) left center no-repeat; } a: ක්රියාකාරී {පසුබිම: #fff url (ball3.gif) වම මධ්යස්ථානය නො-නැවතත්; }}ඔබගේ සබැඳි බොත්තම් පෙනුමයි කරන්න
බොත්තම් ඉතා ජනප්රියයි. නමුත් CSS එකට පැමිණෙන තුරු ඔබ රූප භාවිතයෙන් බොත්තම් සෑදීමට සිදුවේ. ඔබගේ පිටු දිගු කිරීමට වැඩි කාලයක් ගත වනු ඇත. වාසනාවකට මෙන්, CSS සමඟ බොත්තම්-වැනි බලපෑමක් ඇති කිරීමට උපකාර වන මායිම් ආකාරයකි.
{දේශසීමා: 4px ආරම්භය; පැඩිං: 2px; පාඨමය අලංකාරය: කිසිවක් නැත; } a: සක්රිය {මාදිලිය: 4px ඉස්මතු; }}සටහන ආරම්භයේ සහ වර්ණ මෝස්තරවල වර්ණ යොදන විට, ඔබ අපේක්ෂා කළ හැකි පරිදි බ්රවුසරයන් ඒවාට විසඳුම් නොදෙනු ඇත. ඉතින්, මෙන්න මේ පැහැයෙන් යුත් පාට,
{දේශසීමා විලාසය: ඝන; border-width: 1px 4px 4px 1px; පාඨමය අලංකාරය: කිසිවක් නැත; පෑඩිං: 4px; මායිම් වර්ණ: # 69f # 00f # 00f # 69f; }}තවද ඔබට බොත්තමක් සබැඳියක් ඇණවුම සහ ක්රියාකාරී විලාසයන් කෙරෙහි බලපෑම් කළ හැකිය, එම ව්යාජ පංති භාවිතා කරන්න:
a: සබැඳි {දේශසීමා-විලාසය: ඝන; border-width: 1px 4px 4px 1px; පාඨමය අලංකාරය: කිසිවක් නැත; පෑඩිං: 4px; මායිම් වර්ණ: # 69f # 00f # 00f # 69f; } a: hover {පාට පාට: #ccc; }}