CSS လင့်ခ်များ
CSS ဖြင့် လင့်ခ်များကို ပုံစံအမျိုးမျိုးဖြင့် ပုံစံချနိုင်သည်။
စာသားလင့်ခ် စာသားလင့်ခ် လင့်ခ်ခလုတ် လင့်ခ်ခလုတ်
စတိုင်လ်လင့်ခ်များ
လင့်ခ်များကို မည်သည့် CSS ပိုင်ဆိုင်မှု (ဥပမာ color, font-family,
background, စသည်ဖြင့်) ဖြင့် ပုံစံချနိုင်သည်။
ဥပမာ
a {
color: hotpink;
}
ထို့အပြင်၊ လင့်ခ်များကို ၎င်းတို့နေထိုင် သည့် အခြေအနေ ပေါ်မူတည်၍ ပုံစံကွဲပြားနိုင်သည်။
လင့်ခ်လေးခုမှာ အောက်ပါအတိုင်းဖြစ်သည်။
a:link- ပုံမှန်မဟုတ်သော လင့်ခ်တစ်ခုa:visited- အသုံးပြုသူသွားရောက်ကြည့်ရှုထားသော လင့်ခ်တစ်ခုa:hover- သုံးစွဲသူက ၎င်းကို မောက်စ်တင်သောအခါ လင့်ခ်တစ်ခုa:active- နှိပ်လိုက်သည့်အခိုက်တွင် လင့်ခ်တစ်ခု
ဥပမာ
/* unvisited link */
a:link {
color: red;
}
/* visited
link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
လင့်ခ်အများအပြားအတွက် စတိုင်လ်ကို သတ်မှတ်သည့်အခါ၊ မှာယူမှုစည်းမျဉ်းအချို့ ရှိသည်-
- a:hover a:link နှင့် a:visited ပြီးနောက် လာရပါမည်။
- a:active သည် a:hover ပြီးနောက် လာရပါမည်။
စာသားအလှဆင်
text-decorationလင့်ခ်များမှ မျဉ်းကြောင်းများကို ဖယ်ရှားရန် ပိုင်ဆိုင်မှုကို အများအားဖြင့် အသုံးပြုသည် -
ဥပမာ
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
နောက်ခံအရောင်
လင့် ခ် background-colorများအတွက် နောက်ခံအရောင်ကို သတ်မှတ်ရန် ပိုင်ဆိုင်မှုကို သုံးနိုင်သည်-
ဥပမာ
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
လင့်ခ်ခလုတ်များ
ဤဥပမာသည် လင့်ခ်များကို အကွက်များ/ခလုတ်များအဖြစ်ပြသရန် CSS ဂုဏ်သတ္တိများစွာကို ပေါင်းစပ်ထားသည့် ပိုမိုအဆင့်မြင့်သော ဥပမာကို သရုပ်ပြသည်-
ဥပမာ
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;
}
နောက်ထပ် ဥပမာများ
ဥပမာ
ဤဥပမာသည် ဟိုက်ပါလင့်ခ်များသို့ အခြားစတိုင်များကို ထည့်သွင်းနည်းကို သရုပ်ပြသည်-
a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover
{color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color:
#0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color:
#ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background:
#66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color:
#0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color:
#ff0000; text-decoration: none;}
a.five:visited {color: #0000ff;
text-decoration: none;}
a.five:hover {text-decoration: underline;}
ဥပမာ
လင့်ခ်အကွက်များ/ခလုတ်များ ဖန်တီးနည်းနောက်ထပ် ဥပမာ-
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;
}
ဥပမာ
ဤဥပမာသည် ကာဆာအမျိုးအစားအမျိုးမျိုးကို သရုပ်ပြသည် (လင့်ခ်များအတွက် အသုံးဝင်နိုင်သည်)။
<span style="cursor: auto">auto</span><br>
<span style="cursor:
crosshair">crosshair</span><br>
<span style="cursor:
default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor:
move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor:
nw-resize">nw-resize</span><br>
<span style="cursor:
pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor:
se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor:
w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>