Link Color

ဒီသင်ခန်းစာထဲမှာ CSS တွေ အဓိကပါဝင်ပါတယ်။ မိတ်ဆွေက CSS ကိုမလေ့လာရသေးဘူးဆိုရင် အနည်းငယ် ရှုပ်ထွေးနေနိုင်ပါတယ်။ ဒါပေမယ့် စိတ်မပူပါနဲ့။

ဒီသင်ခန်းစာရဲ့ ရည်ရွယ်ချက်က Link မှာ ဘယ်လိုအခြေအနေတွေ ရှိနိုင်တယ် ဆိုတာနားလည်ရင်ရပါပြီ။

CSS ကိုနားမလည်သေးရင်လည်း စိတ်မရှုပ်ပါနဲ့။ ရင်းနှီးသွားစေရုံသာထည့်ထားတာပါ။

Link တစ်ခုမှာ အခြေအနေ (၄) မျိုးပေါ်မူတည်ပြီး Style တွေထည့်လို့ရပါတယ်။ အဲဒီအခြေအနေ (၄) မျိုးကတော့ အောက်ပါအတိုင်းပါ။

• Unvisited : ဒီအခြေအနေက အဲဒီလင့်ကို တစ်ခါမှမဝင်ရသေးတဲ့ အခြေအနေဖြစ်ပါတယ်။ Link ကို တစ်ခါမှ "ကလစ်" မလုပ်ရသေးတဲ့ အခြေအနေပေါ့ဗျာ။
• Visited : ဒါကတော့ Link ကိုဝင်ကြည့်ပြီးသွားပြီ၊ "ကလစ်" နှိပ်ပြီးသွားပြီဆိုတဲ့အခြေနေပါ။
• Active : ဒါကတော့ Link ပေါ်မှာ "ကလစ်" လုပ်နေတဲ့ အခိုက်အတန့်လေးပါ။ Mouse Left Click ကို ဖိထားတဲ့အချိန်ပေါ့ဗျာ။
• Hover : ဒါကတော့ Link အပေါ်မှာ Mouse Pointer လေး တင်ထားတဲ့အခြေအနေပါ။

ဥပမာအားဖြင့် မိတ်ဆွေတို့ Google Search မှာဆိုရင် ပေါ်လာတဲ့ Link တွေမှာ ဝင်ကြည့်ပြီးသားနဲ့ ဝင်မကြည့်ရသေးတာကို Link Color လေးတွေကိုကြည့်ပြီး သိနိုင်ပါတယ်။

အဲဒီလို မတူညီတဲ့ အခြေအနေတွေမှာ မတူညီတဲ့ Style တွေပြတော့မယ်ဆိုရင်တော့ CSS ကိုအသုံးပြုရပါတော့မယ်။ အောက်က ဥပမာလေးကို ကြည့်လိုက်ပါ။

Example Code

1. <style>

2.      // This is Unvisited Link

3.      a:link {

4.          color: green ;

5.      }

6.      // This is Visited Link

7.      a:visited {

8.          color: pink ;

9.      }

10.      // This is Active Link

11.      a:active {

12.          color: pink ;

13.      }

14.      // This is Hover Link Style

15.      a:hover {

16.          color: pink ;

17.      }

18. </style>

Try it Yourself!

---

Link Button

Link တွေကို Button ပုံစံနှင့်လည်း ပြောင်းလဲ အသုံးပြုနိုင်ပါတယ်။ CSS ကိုသုံးပြီး ပြောင်းရမှာပေါ့နော..။

အောက်က ဥပမာကို ကြည့်ပါ။

Example Feed

This is a Link

Try it Yourself!

CSS အကြောင်းကို ပိုမိုလေ့လာရန် CSS Tutorial ကိုသွားကြည့်ပါ။