စတုံးဆိုင်း အချက်အလက်

စတုံးဆိုင်း အချက်အလက်

var() ပုံစံ

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

传统方式

အဆိုပါ အကျိုးဖြစ်စဉ် မှ အခြား အကျိုးဖြစ်စဉ် အတူ အတူ ပြောင်းလဲတိုက်ခိုက်သည်။ အဆိုပါ အကျိုးဖြစ်စဉ် ကို ပြင်ဆင်ပါ။

အကြောင်း

အဆိုပါ အကျိုးဖြစ်စဉ် မှ အခြား အကျိုးဖြစ်စဉ် အတူ အတူ ပြောင်းလဲတိုက်ခိုက်သည်။ အဆိုပါ အကျိုးဖြစ်စဉ် ကို ပြင်ဆင်ပါ။
body { background-color: #1e90ff; }
.container {
  background-color: #ffffff;
  h2 { border-bottom: 2px solid #1e90ff; }
  padding: 15px;
}
button {
  h2 { border-bottom: 2px solid #1e90ff; }
  background-color: #ffffff;
  color: #1e90ff;
  padding: 5px;
}

亲自试一试

border: 1px solid #1e90ff;

var() ပုံစံ

var() ပုံစံ

var() ပုံစံ), valuevar(
, 描述
) name
value ဆိုင်းငြိမ်းသော အရာ

အမှတ်အမှတ် အမည် က နှစ်လက်ဖြတ် အစား ဖြင့် စတင်ခြင်းဖြင့် သုံးဆောင်ပါတယ်၊ အချိန်မှာ အသုံးပြုသည်။

var() က ဘယ်လို အပူဇော်ပေးသလဲ

ပထမပေါင်း၌ အခြေခံ အမှတ် က အခြေခံ အခြား နှင့် အခြေခံ အမှတ် က အခြေခံ အခြား အတွင်း ဖြင့် ဖြစ်ပါတယ်。

အခြေခံ အမှတ် က အခြေခံ အစိတ်အခြား တွင် ဖြင့် အသုံးပြု/အသုံးပြုလိုက်သည်၊ အခြေခံ အမှတ် က ကြေညာထားသော ကိုရိုက်ကယ်ပုံစံ အတွင်းတွင်သာ အသုံးပြုလိုက်သည်။

အခြေခံ အမှတ် ကို အသုံးပြုရာ အရေးယူသည့် ကိုရိုက်ကယ်ပုံစံ တွင် ကြေညာပါ။ :root ကိုရိုက်ကယ်ပုံစံ က အခြေခံ အစိတ်အခြား ကို တွေ့ရှိသည်။

အခြေခံ အမှတ် ကို အသုံးပြုရာ အရေးယူသည့် ကိုရိုက်ကယ်ပုံစံ တွင် ကြေညာပါ။

အဆိုပါ အကျိုးဖြစ်စဉ် နှင့် အခြား အကျိုးဖြစ်စဉ် နှင့် အတူ အတူ ပြောင်းလဲတိုက်ခိုက်သည်။ အဆိုပါ အကျိုးဖြစ်စဉ် ကို ပြင်ဆင်ပါ။

ပထမပေါင်း၌ သင့်ရာတွင် ၂ ခု အကြီးအကျယ် အမှတ် ကို ကြေညာပါ၊ (--blue နှင့် --white)၊ နောက်ပိုင်းတွင် အမှတ် ကို ပြင်ဆင်ပါ။

အကြောင်း

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

亲自试一试

var() ကို အသုံးပြုရာ ရန် အဆိုပါ အကျိုးဆက်ရှိပါတယ်:

  • အခြေခံ အစီအစဉ် ကို ကြားကြွင်း နှင့် အကျွမ်းကျွမ်းစွာ လေ့လာပါ
  • အမှတ် အရသာ ပြင်ဆင်ရေး ကို ရှင်းလင်းစွာ ကျွမ်းကျွမ်းစွာပြုပြင်တယ်

ရူပ်ရောင်များ ကို ပြည့်ပြည့်သော ရူပ်ရောင် နှင့် ရူပ်ရောင် သို့ ပြောင်းလဲတိုက်ခိုက်သင့်မည်း၊ သင့်ရာတွင် သုံးဆောင်သော အမှတ် ၂ ခု ကို ပြင်ဆင်ပါ။

အကြောင်း

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

亲自试一试

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

函数
var() 49.0 15.0 31.0 9.1 36.0

CSS var() အချက်အလက်

函数 描述
var() 插入 CSS 变量的值。