CSS ကိုဘယ်လိုထည့်မလဲ။
ဘရောင်ဇာသည် စတိုင်စာရွက်ကို ဖတ်သောအခါ၊ ၎င်းသည် စတိုင်စာရွက်ရှိ အချက်အလက်အတိုင်း HTML စာရွက်စာတမ်းကို ဖော်မတ်ပေးလိမ့်မည်။
CSS ကိုထည့်သွင်းရန်နည်းလမ်းသုံးမျိုး
ပုံစံစာရွက်ကို ထည့်သွင်းရန် နည်းလမ်းသုံးမျိုးရှိသည်။
- ပြင်ပ CSS
- အတွင်းပိုင်း CSS
- Inline CSS
ပြင်ပ CSS
ပြင်ပစတိုင်စာရွက်ဖြင့်၊ ဖိုင်တစ်ခုတည်းကိုပြောင်းခြင်းဖြင့် ဝဘ်ဆိုက်တစ်ခုလုံး၏အသွင်အပြင်ကို ပြောင်းလဲနိုင်သည်။
HTML စာမျက်နှာတစ်ခုစီတွင် ခေါင်းပိုင်းအပိုင်းအတွင်းရှိ <link> ဒြပ်စင်အတွင်းရှိ ပြင်ပစတိုင်စာရွက်ဖိုင်ကို ရည်ညွှန်းချက်တစ်ခု ပါဝင်ရပါမည်။
ဥပမာ
HTML စာမျက်နှာ၏ <head> ကဏ္ဍအတွင်းတွင် ပြင်ပစတိုင်များကို <link> ဒြပ်စင်အတွင်း သတ်မှတ်ထားသည်-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ပြင်ပစတိုင်စာရွက်ကို မည်သည့်စာသားတည်းဖြတ်မှုတွင်မဆို ရေးသားနိုင်ပြီး .css တိုးချဲ့မှုဖြင့် သိမ်းဆည်းရပါမည်။
ပြင်ပ .css ဖိုင်တွင် မည်သည့် HTML တဂ်များ မပါဝင်သင့်ပါ။
ဤသည်မှာ "mystyle.css" ဖိုင်၏ပုံသဏ္ဌာန်ဖြစ်သည်-
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
မှတ်ချက်
။ _
_margin-left: 20 px;
margin-left: 20px;
အတွင်းပိုင်း CSS
HTML စာမျက်နှာတစ်ခုတည်းတွင် ထူးခြားသောစတိုင်တစ်ခုရှိပါက အတွင်းပိုင်းစတိုင်စာရွက်ကို အသုံးပြုနိုင်သည်။
အတွင်းစတိုင်ကို <style> ဒြပ်စင်အတွင်း၊ ဦးခေါင်းအပိုင်းအတွင်းတွင် သတ်မှတ်ထားသည်။
ဥပမာ
HTML စာမျက်နှာတစ်ခု၏ <head> ကဏ္ဍအတွင်းတွင်၊ အတွင်းစတိုင်များကို <style> ဒြပ်စင်အတွင်းတွင် သတ်မှတ်ထားသည်-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
ဒြပ်စင်တစ်ခုအတွက် တစ်မူထူးခြားသောစတိုင်ကို အသုံးပြုရန် အတွင်းပိုင်းစတိုင်ကို အသုံးပြုနိုင်သည်။
လိုင်းစတိုင်များကို အသုံးပြုရန် သက်ဆိုင်ရာဒြပ်စင်တွင် စတိုင်အရည်အချင်းကို ထည့်ပါ။ စတိုင်ရည်ညွှန်းချက်တွင် မည်သည့် CSS ပိုင်ဆိုင်မှုများ ပါဝင်နိုင်သည်။
ဥပမာ
ဆက်စပ်ဒြပ်စင်၏ "စတိုင်" ရည်ညွှန်းချက်အတွင်း အတွင်းလိုင်းစတိုင်များကို သတ်မှတ်ထားသည်-
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
အကြံပြုချက်- inline စတိုင်တစ်ခုသည် ပုံစံစာရွက်တစ်ခု၏ အားသာချက်များစွာကို ဆုံးရှုံးသွားသည် (အကြောင်းအရာကို တင်ပြခြင်းနှင့် ပေါင်းစပ်ခြင်းဖြင့်)။ ဒီနည်းကို နဲနဲပါးပါး သုံးပါ။
စတိုင်စာရွက်များစွာ
မတူညီသော စတိုင်စာရွက်များတွင် တူညီသောရွေးချယ်မှု (ဒြပ်စင်) အတွက် အချို့သော ဂုဏ်သတ္တိများကို သတ်မှတ်သတ်မှတ်ထားပါက၊ နောက်ဆုံးဖတ်ထားသည့် ပုံစံစာရွက်မှ တန်ဖိုးကို အသုံးပြုပါမည်။
ပြင်ပစတိုင်စာရွက် တွင် <h1> ဒြပ်စင်အတွက် အောက်ပါစတိုင်လ် ရှိကြောင်း ယူဆပါ ။
h1
{
color: navy;
}
ထို့နောက်၊ အတွင်းစတိုင်စာရွက် တွင် <h1> ဒြပ်စင်အတွက် အောက်ပါစတိုင်လ်လည်း ရှိသည်ဟု ယူဆ ပါ ။
h1
{
color: orange;
}
ဥပမာ
ပြင်ပစတိုင်စာရွက်သို့ လင့်ခ် ပြီးနောက် အတွင်းစတိုင်ကို သတ်မှတ် ပါက၊ <h1> အစိတ်အပိုင်းများသည် "လိမ္မော်ရောင်" ဖြစ်လိမ့်မည်-
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
ဥပမာ
သို့ရာတွင်၊ အတွင်းစတိုင်ကို ပြင်ပစတိုင်စာရွက်သို့ လင့်ခ် ရှေ့တွင် သတ်မှတ် ပါက၊ <h1> အစိတ်အပိုင်းများသည် "ရေတပ်" ဖြစ်လိမ့်မည်-
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Cascading Order
HTML ဒြပ်စင်အတွက် သတ်မှတ်ထားသော စတိုင်တစ်ခုထက်ပိုသော စတိုင်လ်တစ်ခုရှိသောအခါ မည်သည့်စတိုင်လ်ကို အသုံးပြုမည်နည်း။
စာမျက်နှာတစ်ခုရှိ စတိုင်များအားလုံးသည် နံပါတ်တစ်တွင် ဦးစားပေးမှုအများဆုံးရှိသည့် အောက်ပါစည်းမျဉ်းများဖြင့် "virtual" ပုံစံစာရွက်အသစ်တစ်ခုအဖြစ် "cascade" ဖြစ်လာပါမည်။
- လိုင်းစတိုင် (HTML အစိတ်အပိုင်းတစ်ခုအတွင်း)
- ပြင်ပနှင့် အတွင်းပိုင်းစတိုင်စာရွက်များ (ခေါင်းပိုင်းအပိုင်း)
- ဘရောက်ဆာ မူရင်း
ထို့ကြောင့်၊ inline စတိုင်သည် အမြင့်ဆုံးဦးစားပေးဖြစ်ပြီး ပြင်ပနှင့် အတွင်းပိုင်းစတိုင်များနှင့် ဘရောက်ဆာမူရင်းများကို လွှမ်းမိုးမည်ဖြစ်သည်။
W3Schools Spaces အကြောင်း ကြားဖူး ပါသလား။ ဤနေရာတွင် သင်သည် သင်၏ကိုယ်ပိုင်ဝဘ်ဆိုက်ကို ဖန်တီးနိုင်သည်၊ သို့မဟုတ် ကုဒ်အတိုအထွာများကို နောက်ပိုင်းအသုံးပြုရန်အတွက် အခမဲ့သိမ်းဆည်းနိုင်သည်။
❯ အခမဲ့ စတင်လိုက်ပါ။* ခရက်ဒစ်ကတ်မလိုအပ်ပါ။