CSS တိကျမှု
Specification ဆိုတာဘာလဲ။
တူညီသောဒြပ်စင်ကိုညွှန်ပြသော CSS စည်းမျဉ်းနှစ်ခု သို့မဟုတ် ထို့ထက်ပိုသော စည်းမျဉ်းများရှိပါက၊ အမြင့်ဆုံးတိကျမှုတန်ဖိုးရှိသော ရွေးချယ်သူသည် "အနိုင်ရမည်" ဖြစ်ကာ ၎င်း၏စတိုင်ကြေငြာချက်ကို ထို HTML ဒြပ်စင်သို့ အသုံးပြုမည်ဖြစ်သည်။
မည်သည့်စတိုင် ကြေငြာချက်ကို နောက်ဆုံးတွင် ဒြပ်စင်တစ်ခုထံ အသုံးချမည်ကို ဆုံးဖြတ်သည့် ရမှတ်/အဆင့်အဖြစ် အတိအကျစဉ်းစားပါ။
အောက်ပါဥပမာများကိုကြည့်ပါ-
ဥပမာ ၁
ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် "p" ဒြပ်စင်ကို ရွေးခြယ်မှုအဖြစ် အသုံးပြုခဲ့ပြီး ဤဒြပ်စင်အတွက် အနီရောင်ကို သတ်မှတ်ခဲ့သည်။ စာသားသည် အနီရောင်ဖြစ်လိမ့်မည်-
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
ယခု ဥပမာ 2 ကိုကြည့်ပါ ။
ဥပမာ ၂
ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် အတန်းရွေးချယ်မှုစနစ် ("စမ်းသပ်မှု" ဟုအမည်ပေးထားသည့်) ကိုထည့်သွင်းပြီး ဤအတန်းအတွက် အစိမ်းရောင်အရောင်ကို သတ်မှတ်ပေးထားပါသည်။ စာသားသည် ယခု အစိမ်းရောင်ဖြစ်နေပေလိမ့်မည် (ဒြပ်စင်ရွေးချယ်မှု "p" အတွက် အနီရောင်ကို ကျွန်ုပ်တို့သတ်မှတ်ထားသော်လည်း၊ ၎င်းမှာ အတန်းရွေးချယ်မှုအား ပိုမိုဦးစားပေးထားသောကြောင့် ဖြစ်ပါသည်။
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
ယခု ဥပမာ 3 ကိုကြည့်ပါ ။
ဥပမာ ၃
ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် id ရွေးချယ်မှု ("သရုပ်ပြ" အမည်ရှိ) ကို ထည့်ထားသည်။ id ရွေးပေးသူကို ပိုဦးစားပေးထားသောကြောင့် စာသားသည် ယခုအခါ အပြာရောင်ဖြစ်နေပါမည်-
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
ယခု ဥပမာ 4 ကိုကြည့်ပါ ။
ဥပမာ ၄
ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် "p" ဒြပ်စင်အတွက် inline ပုံစံတစ်ခုကို ထည့်ထားသည်။ လိုင်းစတိုင်ကို အမြင့်ဆုံးဦးစားပေးထားသောကြောင့် စာသားသည် ပန်းရောင်ဖြစ်နေပါမည်။
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
တိကျမှု အဆင့်ဆင့်
CSS ရွေးချယ်မှုတိုင်းတွင် တိကျသော အထက်တန်းအဆင့်တွင် ၎င်း၏နေရာရှိသည်။
ရွေးချယ်သူ၏ သီးသန့်အဆင့်ကို သတ်မှတ်ပေးသော အမျိုးအစား လေးမျိုး ရှိပါသည်။
- အတွင်းလိုင်းစတိုင်များ - ဥပမာ- <h1 style="color: pink;">
- ID များ - ဥပမာ- #navbar
- အတန်းများ၊ pseudo-classes၊ attribute selectors - ဥပမာ- .test၊ :hover၊ [href]
- ဒြပ်စင်များနှင့် pseudo-ဒြပ်စင်များ - ဥပမာ- h1၊ :before
Specification ကို ဘယ်လိုတွက်ရမလဲ။
အတိအကျတွက်ချက်နည်းကို အလွတ်ကျက်ပါ။
0 တွင်စတင်ပါ၊ ID တန်ဖိုးတစ်ခုစီအတွက် 100 ကိုထည့်ပါ၊ အတန်းတန်ဖိုးတစ်ခုစီအတွက် (သို့မဟုတ် pseudo-class သို့မဟုတ် attribute ရွေးချယ်သူ)၊ ဒြပ်စင်ရွေးချယ်သူ သို့မဟုတ် pseudo-ဒြပ်စင်တစ်ခုစီအတွက် 1 ကိုထည့်ပါ။
မှတ်ချက်- Inline စတိုင်သည် တိကျသောတန်ဖိုး 1000 ရရှိပြီး အမြင့်ဆုံးဦးစားပေးကို အမြဲပေးပါသည်။
မှတ်ချက် 2- ဤစည်းမျဉ်းအတွက် ခြွင်းချက်တစ်ခု ရှိသည်- စည်းမျဉ်းကို သင်အသုံးပြုပါက !important
၊ ၎င်းသည် inline ပုံစံများကိုပင် လွှမ်းမိုးနေလိမ့်မည်။
အောက်ဖော်ပြပါဇယားတွင် တိကျသောတန်ဖိုးများကို တွက်ချက်နည်း ဥပမာအချို့ကို ပြသသည်-
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
အမြင့်ဆုံးတိကျမှုတန်ဖိုးရှိသော ရွေးချယ်သူသည် အနိုင်ရပြီး အကျိုးသက်ရောက်မည်ဖြစ်သည်။
ဤကုဒ်အပိုင်းအစသုံးခုကို သုံးသပ်ကြည့်ပါ-
ဥပမာ
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
A ၏ တိကျမှုမှာ 1 (ဒြပ်စင်ရွေးချယ်မှုတစ်ခု)
B ၏ တိကျမှုမှာ 101 ( ID ကိုးကားချက်တစ်ခု + ဒြပ်စင်ရွေးချယ်မှုတစ်ခု)
C ၏ တိကျမှုမှာ 1000 (အတွင်းလိုင်းပုံစံ) ဖြစ်သည်
တတိယစည်းမျဉ်း (C) တွင် အမြင့်ဆုံးတိကျမှုတန်ဖိုး (1000) ဖြစ်သောကြောင့်၊ ဤပုံစံကြေငြာချက်ကို အသုံးပြုပါမည်။
ပိုမိုတိကျသော စည်းမျဉ်းများ ဥပမာများ
တူညီသောတိကျမှု- နောက်ဆုံးစည်းမျဉ်းသည် အနိုင်ရသည် - တူညီသောစည်းမျဉ်းကို ပြင်ပစတိုင်စာရွက်တွင် နှစ်ကြိမ်ရေးပါက၊ နောက်ဆုံးစည်းမျဉ်းသည် အနိုင်ရသည်-
ဥပမာ
h1 {background-color: yellow;}
h1 {background-color: red;}
ID ရွေးချယ်သူများသည် attribute ရွေးပေးသူများထက် ပိုမိုတိကျသော တိကျမှု ရှိသည် - အောက်ပါ ကုဒ်လိုင်းသုံးကြောင်းကို ကြည့်ပါ-
ဥပမာ
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
ပထမစည်းမျဉ်းသည် အခြားနှစ်ခုထက် ပိုမိုတိကျသောကြောင့် ကျင့်သုံးမည်ဖြစ်သည်။
အကြောင်းအရာရွေးချယ်မှုစနစ်များသည် ဒြပ်စင်ရွေးချယ်သည့်ကိရိယာတစ်ခုတည်းထက် ပိုမိုတိကျသည် - ထည့်သွင်းထားသောပုံစံစာရွက်သည် ပုံစံချရမည့်ဒြပ်စင်နှင့် ပိုမိုနီးစပ်ပါသည်။ ဒါကြောင့် အောက်ပါအခြေအနေမှာ
ဥပမာ
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
နောက်ဆုံးစည်းမျဉ်းကို ကျင့်သုံးပါမည်။
အတန်းရွေးချယ်ပေးသည့်စနစ်သည် မည်သည့်ဒြပ်စင်ရွေးချယ်သည့်အရေအတွက်ကိုမဆို ကျော်လွှားသည် - .intro beats h1၊ p၊ div စသည်တို့ကဲ့သို့သော အတန်းရွေးချယ်ကိရိယာ
ဥပမာ
.intro {background-color: yellow;}
h1 {background-color:
red;}
universal selector (*) နှင့် အမွေဆက်ခံထားသော တန်ဖိုးများသည် 0 ၏ တိကျမှုရှိသည် - universal selector (*) နှင့် အမွေဆက်ခံတန်ဖိုးများကို လျစ်လျူရှုထားသည်။