HTML အကိုးအကား

အက္ခရာဖြင့် HTML HTML အမျိုးအစားအလိုက် HTML Browser ပံ့ပိုးမှု HTML အရည်အချင်းများ HTML ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ HTML ပွဲများ HTML အရောင်များ HTML Canvas HTML အသံ/ဗီဒီယို HTML အက္ခရာအစုံများ HTML Doctypes HTML URL ကုဒ် HTML ဘာသာစကားကုဒ်များ HTML နိုင်ငံကုဒ်များ HTTP မက်ဆေ့ခ်ျများ HTTP နည်းလမ်းများ PX မှ EM Converter ကီးဘုတ်ဖြတ်လမ်းများ


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;
}