links က်ဘ်ဆိုက်စာမျက်နှာများပေါ်တွင်အလွန်ဘုံရှိပါတယ်, ဒါပေမယ့်အများကြီးကို web ဒီဇိုင်နာများနှင့်အတူသူတို့ရှိသည်သောတန်ခိုးကိုနားလည်သဘောပေါက်ကြဘူး CSS ကို ထိထိရောကျရောသူတို့ရဲ့လင့်များ manipulate နှင့်စီမံခန့်ခွဲရန်။ သငျသညျသွားရောက်ခဲ့ပြီး, မောက်စ်တင်နှင့်အတူလင့်များနှင့်တက်ကြွသောပြည်နယ်များသတ်မှတ်နိုင်ပါတယ်။ သင်တို့သည်လည်းသင့်ရဲ့လင့်များပိုပြီး pizzaz ပေးသို့မဟုတ်သူတို့ကိုခလုတ်သို့မဟုတ်ပင်ပုံရိပ်တွေတူအောင်လုပ်ဖို့နယ်စပ်နှင့်နောက်ခံနှင့်အတူအလုပ်လုပ်နိုင်ပါတယ်။
အများစုမှာရှိသော web designer က "a" ကို tag ကိုအပေါ်တစ်ဦးစတိုင် defining အားဖြင့်အထဲက start:
တစ် {color: red; }ဤသည်မှာလိမ့်မယ် လင့်ခ်များအားလုံးရှုထောင့် style (ပျံဝဲ, သွားရောက်ခဲ့ပြီးနှင့်တက်ကြွသော။ ) တစ်ခုချင်းစီကိုသီးခြားစီတစ်စိတ်တစ်ပိုင်း style လုပ်ဖို့, သင်က link Pseudo-အတန်းအသုံးပြုရမည်။
Link ကို Pseudo-class
သငျသညျသတ်မှတ်နိုင်ပါတယ် link ကို Pseudo-အတန်းလေးအခြေခံမျိုးရှိပါတယ်:
- : link ကို - ဒီလင့်ခ်များအတွက် default အနေနဲ့စတိုင်ဖြစ်ပါတယ်
- : သွားရောက်ခဲ့ပြီး - link တစ်ခုနှိပ်လိုက်ထားပြီးအပြီး
- : မောက်စ်တင် - မောက်အဖြစ် link တစ်ခု (Pre-click နှိပ်ပြီး) ကျော်ကြိုးစားနေပါကြောင်း
- : တက်ကြွ - link ကိုအဖြစ်ညာဘက်နှိပ်လိုက်နေပါသည်
link တစ်ခု Pseudo-class ကို define လုပ်ဖို့, သင့်အတွက်တစ်ဦး tag နဲ့အသုံးပြုနိုင် CSS ကို selector ။ ဒီတော့ရေး, gray အားလုံးကိုသင့်ရဲ့လင့်များ၏သွားရောက်ခဲ့ပြီးအရောင်ကိုပြောင်းလဲ:
တစ်ဦး: အရောင် {သွားရောက်ခဲ့ပြီး: မီးခိုးရောင်; }သင်တဦးတည်း link ကို Pseudo-class ကို style ဆိုပါကထိုသူအပေါင်းတို့ style ဖို့ကောင်းတစ်ဦးအယူအဆပါပဲ။ သငျသညျဆိုတဲ့စကားလုံးမလိုတော့ဘူးရလဒ်များကိုနေဖြင့်အံ့အားသင့်စေလိမ့်မည်မဟုတ်ကြောင်းလမ်း။ သင့်ရဲ့လင့်များအပေါငျးတို့သညျအခွား Pseudo-ဂုဏ်သတ္တိများအနက်ရောင်ဆက်လက်တည်ရှိနေစဉ်အတွင်းသင်ရုံ, gray ဖို့သွားရောက်ခဲ့ပြီးအရောင်ကိုပြောင်းလဲချင်တယ်ဆိုရင်ဒါကြောင့်, သင်ရေးလိုက်ချင်ပါတယ်:
တစ်ဦး: link ကိုတစ်ဦး: တက်ကြွ {အရောင်: တစ်ပျံဝဲအနက်ရောင်; } တဲ့: {အရောင်သွားရောက်ခဲ့ပြီး: မီးခိုးရောင်; }အဆိုပါ Link ကိုအရောင်များပြောင်းလဲပါ
လင့်များ style မှလူကြိုက်အများဆုံးလမ်း mouse ကိုကျော်ရှိတယ်လို့သိရပါတယ်အခါအရောင်ကိုပြောင်းလဲဖြစ်ပါသည်:
တစ် {color: # 00f; } တဲ့: မောက်စ်တင် {color: # 0f0; }တက်ကြွအိမ်ခြံမြေ: သင်တို့မူကားထိုသူတို့နှင့်အတူကအပေါ်ကိုကလစ်နှိပ်ကြသည်အတိုင်း link ကိုကြည့်ဘယ်လောက်အကျိုးသက်ရောက်စေနိုင်သည်ကိုမမေ့မလြော့ပါ:
တစ် {color: # 00f; } တဲ့: တက်ကြွ {color: # f00; }သွားရောက်ကြည့်ရှုအိမ်ခြံမြေ: ဒါမှမဟုတ် link ကိုသင်နှင့်အတူကသွားရောက်ကြည့်ရှုပါတယ်ပြီးနောက်မြင်တွေ့ရပုံ:
တစ် {color: # 00f; } တဲ့: {အရောင်သွားရောက်ခဲ့ပြီး: # f0f; }အားလုံးအတူတူထားရန်:
တစ် {color: # 00f; } တဲ့: {အရောင်သွားရောက်ခဲ့ပြီး: # f0f; } တဲ့: မောက်စ်တင် {color: # 0f0; } တဲ့: တက်ကြွ {color: # f00; }Icons သို့မဟုတ်ကျည်ဆန် Add ဖို့ Links များနောက်ခံထားပါ
သင်ကစတိုင်နောကျခံဆောင်းပါးထဲမှာရှိသကဲ့သို့ link တစ်ခုပေါ်မှာနောက်ခံထားနိုင်ပေမယ့်နောက်ခံမှာအနည်းငယ်နှင့်အတူကစားခြင်းအားဖြင့်, သင်ထားတဲ့ဆက်စပ်အိုင်ကွန်ရှိကြောင်း link တစ်ခုဖန်တီးနိုင်ပါတယ်။ သင်၏စာသားပိုကြီးဖြစ်ပါသည်မဟုတ်လျှင်, 15px အားဖြင့် 15px န်းကျင်, အသေးစားကြောင်း icon တစ်ခုရွေးချယ်ပါ။ လင့်ခ်များထဲမှခြမ်းမှနောက်ခံထားပါနှင့်မျှမ-ထပ်ဖို့ထပ် option ကိုခန့်ထား၏။ link ကိုအတွင်းစာသားကျော်ဝေးအလုံအလောက်လက်ဝဲသို့မဟုတ်အိုင်ကွန်ကြည့်ဖို့ညာဘက်ပြောင်းရွှေ့ကြောင်းသို့မှသာထို့နောက် link ကို padd ။
တစ် {padding ကို: 0 2px 1px 15px; နောက်ခံ: #fff url (ball.gif) left စင်တာမထပ်; အရောင်: # c00; }သင်သည်သင်၏အိုင်ကွန်ရရှိပါသည်ပြီးတာနဲ့သင်က, သင့်မောက်စ်တင်အဖြစ်တစ်ဦးကွဲပြားခြားနား image ကိုသတ်မှတ်ထားတက်ကြွလျက်, link ကိုအပြောင်းအလဲလုပ် icon တွေကိုသွားရောက်ကြည့်ရှုနိုင်သည်
တစ် {padding ကို: 0 2px 1px 15px; နောက်ခံ: #fff url (ball.gif) left စင်တာမထပ်; အရောင်: # c00; } တဲ့: မောက်စ်တင် {နောက်ခံ: #fff url (ball2.gif) left စင်တာမထပ်; } တဲ့: တက်ကြွ {နောက်ခံ: #fff url (ball3.gif) left စင်တာမထပ်; }သင့်ရဲ့ Links များခလုတ်လိုပဲကွညျ့လိုကျပါစေ
ခလုတ်ကအရမ်းလူကြိုက်များပေမယ့် CSS ကိုတစ်လျှောက်သို့မရောက်မှီတိုင်အောင်, သင်ခလုတ်ဖန်တီးခဲ့ ပုံရိပ်တွေကိုအသုံးပြုပြီး သင့်ရဲ့စာမကျြနှာကို load လုပ်ဖို့ကြာစေသည်သော။ ကံကောင်းတာက, သင် CSS နဲ့အလွယ်တကူခလုတ်တစ်ခုကဲ့သို့အကျိုးသက်ရောက်ဖန်တီးနိုင်မယ့်နယ်စပ်စတိုင်လည်းမရှိ။
တစ် {နယ်စပ်: 4px အစကတည်းက; padding ကို: 2px; text-decoration: none; } တဲ့: တက်ကြွ {နယ်စပ်: 4px inset; }မှတ်ချက်, သင်အစကတည်းကနှင့် inset စတိုင်များအပေါ်အရောင်များထားသောအခါ, browser များသငျသညျကိုမျှော်လင့်မယ်အဖြစ်ကသူတို့ကိုဆပ်ဖို့အဖြစ်ဖွယ်ရှိမဟုတ်ပါ။ ဒါကြောင့်ဒီမှာရောင်စုံနယ်နိမိတ်နှင့်အတူတစ်ဦး fancier ခလုတ်ကိုဖွင့်:
တစ် {border-style: အစိုင်အခဲ, နယ်စပ်-width: 1px 4px 4px 1px; text-decoration: none; padding ကို: 4px; နယ်စပ်-အရောင်: # 69f # 00f # 00f # 69f; }ထိုအသင်ရုံသူတို့အား Pseudo-အတန်းကိုသုံးအဖြစ်ကောင်းစွာခလုတ် link ကို၏မောက်စ်တင်များနှင့်တက်ကြွစတိုင်များကိုအကျိုးသက်ရောက်နိုင်သည်
တစ်ဦး: link ကို {border-style: အစိုင်အခဲ, နယ်စပ်-width: 1px 4px 4px 1px; text-decoration: none; padding ကို: 4px; နယ်စပ်-အရောင်: # 69f # 00f # 00f # 69f; } တဲ့: မောက်စ်တင် {border-color: #ccc; }