HTML <style> Tag
ဥပမာ
ရိုးရှင်းသောပုံစံစာရွက်တစ်ခုကို HTML စာရွက်စာတမ်းတစ်ခုတွင်အသုံးပြုရန် <style> ဒြပ်စင်ကိုအသုံးပြုခြင်း-
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
<style>
စာရွက်စာတမ်းတစ်ခုအတွက် ပုံစံအချက်အလက် (CSS) ကို သတ်မှတ်ရန် တဂ်ကို အသုံးပြုသည် ။
ဒြပ်စင် အတွင်းတွင် <style>
သင်သည် ဘရောက်ဆာတစ်ခုတွင် HTML ဒြပ်စင်များ မည်သို့တင်ဆက်သင့်သည်ကို သင်သတ်မှတ်ပေးသည်။
အကြံပြုချက်များနှင့် မှတ်စုများ
မှတ်ချက်- ဘရောင်ဇာသည် စတိုင်စာရွက်ကို ဖတ်သောအခါ၊ ၎င်းသည် စတိုင်စာရွက်ရှိ အချက်အလက်အတိုင်း HTML စာရွက်စာတမ်းကို ဖော်မတ်ပေးလိမ့်မည်။ မတူညီသော စတိုင်စာရွက်များတွင် တူညီသောရွေးချယ်မှု (ဒြပ်စင်) အတွက် အချို့သော ဂုဏ်သတ္တိများကို သတ်မှတ်သတ်မှတ်ထားပါက၊ နောက်ဆုံးဖတ်ထားသည့် ပုံစံစာရွက်မှ တန်ဖိုးကို အသုံးပြုလိမ့်မည် (ဥပမာ အောက်တွင် ကြည့်ပါ)။
အကြံပြုချက်- ပြင်ပစတိုင်စာရွက်တစ်ခုသို့ လင့်ခ်ချိတ်ရန်၊ <link> တက်ဂ်ကို အသုံးပြုပါ ။
အကြံပြုချက်- ပုံစံစာရွက်များအကြောင်း ပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS ကျူတိုရီရယ် ကို ဖတ်ရှုပါ ။
Browser ပံ့ပိုးမှု
Element | |||||
---|---|---|---|---|---|
<style> | Yes | Yes | Yes | Yes | Yes |
ဂုဏ်တော်
Attribute | Value | Description |
---|---|---|
media | media_query | Specifies what media/device the media resource is optimized for |
type | text/css | Specifies the media type of the <style> tag |
ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ
<style>
tag သည် HTML တွင် Global Attributes ကို ပံ့ပိုး ပေးပါသည်။
ဖြစ်ရပ်ဂုဏ်တော်များ
<style>
tag သည် HTML ရှိ Event Attributes ကိုလည်း ပံ့ပိုး ပေးပါသည် ။
နောက်ထပ် ဥပမာများ
ဥပမာ
တူညီသောဒြပ်စင်များအတွက် ပုံစံများစွာ-
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
ဆက်စပ်စာမျက်နှာများ
HTML သင်ခန်းစာ- HTML CSS
CSS သင်ခန်းစာ- CSS ကျူတိုရီရယ်
HTML DOM ရည်ညွှန်းချက်- ပုံစံအရာဝတ္ထု
မူရင်း CSS ဆက်တင်များ
ဘရောက်ဆာအများစုသည် <style>
အောက်ဖော်ပြပါ ပုံသေတန်ဖိုးများဖြင့် အစိတ်အပိုင်းကို ပြသလိမ့်မည်-
style {
display: none;
}