CSS တရားဝင် အရောင်တန်ဖိုးများ
CSS အရောင်များ
CSS ရှိ အရောင်များကို အောက်ပါနည်းလမ်းများဖြင့် သတ်မှတ်နိုင်ပါသည်။
- Hexadecimal အရောင်များ
- ပွင့်လင်းမြင်သာမှုရှိသော Hexadecimal အရောင်များ
- RGB အရောင်များ
- RGBA အရောင်များ
- HSL အရောင်များ
- HSLA အရောင်များ
- ကြိုတင်သတ်မှတ်ထားသော/Cross-browser အရောင်အမည်များ
currentcolorသော့ချက်စကားလုံး နှင့်အတူ
Hexadecimal အရောင်များ
ဆဋ္ဌမကိန်းဂဏန်းအရောင်ကို RR (အနီရောင်)၊ GG (အစိမ်းရောင်) နှင့် BB (အပြာ) ဆယ်ဂဏန်းကိန်းပြည့်များက အရောင်၏အစိတ်အပိုင်းများကို သတ်မှတ်သည့် #RRGGBB ဖြင့် သတ်မှတ်ထားသည်- #RRGGBB။ တန်ဖိုးများအားလုံးသည် 00 နှင့် FF ကြားရှိရပါမည်။
ဥပမာအားဖြင့်၊ #0000ff တန်ဖိုးကို အပြာရောင်အဖြစ် ပြန်ဆိုထားသောကြောင့် အပြာရောင်အစိတ်အပိုင်းကို ၎င်း၏အမြင့်ဆုံးတန်ဖိုး (ff) နှင့် အခြားအရာများကို 00 ဟု သတ်မှတ်ထားသောကြောင့် ဖြစ်သည်။
ဥပမာ
မတူညီသော HEX အရောင်များကို သတ်မှတ်ပါ-
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
ပွင့်လင်းမြင်သာမှုရှိသော Hexadecimal အရောင်များ
hexadecimal အရောင်ကို #RRGGBB ဖြင့်သတ်မှတ်ထားသည်။ ပွင့်လင်းမြင်သာမှုထည့်ရန် 00 နှင့် FF ကြားတွင် နောက်ထပ်ဂဏန်းနှစ်လုံးကို ထည့်ပါ။
ဥပမာ
မတူညီသော HEX အရောင်များကို ပွင့်လင်းမြင်သာမှုဖြင့် သတ်မှတ်ပါ-
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
RGB အရောင်များ
အောက်ပါ syntax ပါရှိသော rgb() လုပ်ဆောင်ချက် ဖြင့် RGB အရောင်တန်ဖိုးကို သတ်မှတ်သည် -
rgb(red, green, blue)
ကန့်သတ်ဘောင်တစ်ခုစီ (အနီ၊ အစိမ်းနှင့် အပြာ) သည် အရောင်၏ပြင်းထန်မှုကို သတ်မှတ်ပြီး 0 နှင့် 255 အကြား ကိန်းပြည့်တစ်ခု သို့မဟုတ် ရာခိုင်နှုန်းတန်ဖိုး (0% မှ 100%) အထိရှိနိုင်သည်။
ဥပမာအားဖြင့်၊ rgb(0,0,255) တန်ဖိုးကို အပြာရောင်အဖြစ် ပြန်ဆိုထားသောကြောင့်၊ အပြာရောင်ဘောင်အား ၎င်း၏အမြင့်ဆုံးတန်ဖိုး (255) နှင့် အခြားအရာများကို 0 ဟု သတ်မှတ်ထားသောကြောင့် ဖြစ်သည်။
ထို့အပြင်၊ အောက်ပါတန်ဖိုးများသည် တူညီသောအရောင်ကို သတ်မှတ်သည်- rgb(0,0,255) နှင့် rgb(0%,0%,100%)။
ဥပမာ
မတူညီသော RGB အရောင်များကို သတ်မှတ်ပါ-
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
RGBA အရောင်များ
RGBA အရောင်တန်ဖိုးများသည် အရာဝတ္တု၏ ပွင့်လင်းမြင်သာမှုကို သတ်မှတ်ပေးသည့် အယ်လ်ဖာချန်နယ်တစ်ခုနှင့် RGB အရောင်တန်ဖိုးများ၏ တိုးချဲ့မှုတစ်ခုဖြစ်သည်။
RGBA အရောင်ကို အောက်ပါ syntax ပါရှိသော rgba() လုပ်ဆောင်ချက် ဖြင့် သတ်မှတ်ထားသည်-
rgba(red, green, blue, alpha)
အယ်လ်ဖာ ကန့်သတ်ဘောင်သည် 0.0 (အပြည့်အ၀ ဖောက်ထွင်းမြင်ရ) နှင့် 1.0 (လုံးဝ အလင်းမရှိ) အကြား နံပါတ်တစ်ခု ဖြစ်သည်။
ဥပမာ
ခြားနားသော RGB အရောင်များကို ပွင့်လင်းမြင်သာမှုဖြင့် သတ်မှတ်ပါ-
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
HSL အရောင်များ
HSL သည် အသွေးအရောင်၊ ပြည့်ဝမှုနှင့် ပေါ့ပါးမှုကို ကိုယ်စားပြုပြီး အရောင်များ၏ cylindrical-coordinate ကိုယ်စားပြုမှုကို ကိုယ်စားပြုသည်။
HSL အရောင်တန်ဖိုးကို အောက်ပါ syntax ပါရှိသော hsl() လုပ်ဆောင်ချက် ဖြင့် သတ်မှတ်ထားသည်-
hsl(hue, saturation, lightness)
အသွေးသည် အရောင်ဘီးပေါ်တွင် ဒီဂရီတစ်ခု (0 မှ 360) - 0 (သို့မဟုတ် 360) သည် အနီရောင်ဖြစ်ပြီး 120 သည် အစိမ်းရောင်ဖြစ်ပြီး 240 သည် အပြာဖြစ်သည်။ Saturation သည် ရာခိုင်နှုန်းတန်ဖိုးတစ်ခုဖြစ်သည်။ 0% သည် မီးခိုးရောင်အရိပ်ဖြစ်ပြီး 100% သည် အရောင်အပြည့်ဖြစ်သည်။ အလင်းရောင်သည်လည်း ရာခိုင်နှုန်းတစ်ခုဖြစ်သည်။ 0% သည် အနက်ရောင်ဖြစ်ပြီး 100% သည် အဖြူရောင်ဖြစ်သည်။
ဥပမာ
မတူညီသော HSL အရောင်များကို သတ်မှတ်ပါ-
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA အရောင်များ
HSLA အရောင်တန်ဖိုးများသည် အရာဝတ္တု၏ ပွင့်လင်းမြင်သာမှုကို သတ်မှတ်ပေးသည့် အယ်လ်ဖာချန်နယ်တစ်ခုနှင့် HSL အရောင်တန်ဖိုးများ၏ တိုးချဲ့မှုတစ်ခုဖြစ်သည်။
HSLA အရောင်တန်ဖိုးကို အောက်ပါ syntax ပါရှိသော hsla() လုပ်ဆောင်ချက် ဖြင့် သတ်မှတ်ထားသည်-
hsla(hue, saturation, lightness, alpha)
အယ်လ်ဖာ ကန့်သတ်ဘောင်သည် 0.0 (အပြည့်အ၀ ဖောက်ထွင်းမြင်ရ) နှင့် 1.0 (လုံးဝ အလင်းမရှိ) အကြား နံပါတ်တစ်ခု ဖြစ်သည်။
ဥပမာ
ကွဲပြားသော HSL အရောင်များကို ပွင့်လင်းမြင်သာမှုဖြင့် သတ်မှတ်ပါ-
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
ကြိုတင်သတ်မှတ်ထားသော/Cross-browser အရောင်အမည်များ
140 အရောင်အမည်များကို HTML နှင့် CSS အရောင်သတ်မှတ်ချက်များတွင် ကြိုတင်သတ်မှတ်ထားသည်။
ဥပမာ- blue, red, coral, brown, etc:
ဥပမာ
မတူညီသောအရောင်အမည်များကို သတ်မှတ်ပါ-
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
ကျွန်ုပ်တို့၏ အရောင်အမည်များ ရည်ညွှန်းချက် တွင် ကြိုတင်သတ်မှတ်ထားသော အမည်များစာရင်းကို တွေ့နိုင်ပါသည် ။
လက်ရှိရောင်စုံသော့ချက်စာလုံး
အဓိက currentcolorစကားလုံးသည် ဒြပ်စင်တစ်ခု၏ အရောင်ပိုင်ဆိုင်မှုတန်ဖိုးကို ရည်ညွှန်းသည်။
ဥပမာ
<div> ဒြပ်စင်၏ စာသားအရောင်သည် အပြာဖြစ်သောကြောင့် အောက်ဖော်ပြပါ <div> ဒြပ်စင်၏ ဘောင်အရောင်သည် အပြာရောင်ဖြစ်လိမ့်မည်၊
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}