HTML ပုံစံများ - CSS

CSS သည် Cascading Style Sheets ကို ကိုယ်စားပြုသည်။

CSS သည် အလုပ်များစွာကို သက်သာစေသည်။ ၎င်းသည် ဝဘ်စာမျက်နှာများစွာ၏ အပြင်အဆင်ကို တစ်ပြိုင်နက် ထိန်းချုပ်နိုင်သည်။

CSS = ပုံစံများနှင့် အရောင်များ

စာသားကို ကိုင်တွယ်ပါ။

အရောင်များ၊ သေတ္တာများ

CSS ဆိုတာဘာလဲ။

Cascading Style Sheets (CSS) ကို ဝဘ်စာမျက်နှာတစ်ခု၏ အပြင်အဆင်ကိုဖော်မတ်ရန်အတွက် အသုံးပြုသည်။

CSS ဖြင့် သင်သည် အရောင်၊ ဖောင့်၊ စာသားအရွယ်အစား၊ ဒြပ်စင်များကြားအကွာအဝေး၊ ဒြပ်စင်များ နေရာချထားပုံနှင့် ချထားပုံ၊ မည်သည့်နောက်ခံပုံများ သို့မဟုတ် နောက်ခံအရောင်များကို အသုံးပြုရမည်၊ မတူညီသော စက်များနှင့် မျက်နှာပြင်အရွယ်အစားများအတွက် မတူညီသောပြသမှုများကို ထိန်းချုပ်နိုင်ပြီး၊ အများကြီးပို!

အကြံပြုချက်- cascading ဟူသော စကားလုံး သည် ပင်မဒြပ်စင်တစ်ခုသို့ အသုံးပြုသည့်စတိုင်သည် မိဘအတွင်းရှိ ကလေးဒြပ်စင်အားလုံးနှင့်လည်း သက်ဆိုင်မည်ဖြစ်သည်။ ထို့ကြောင့်၊ သင်သည် စာကိုယ်စာသား၏အရောင်ကို "အပြာ" ဟု သတ်မှတ်ပါက စာကိုယ်အတွင်းရှိ ခေါင်းစီးများ၊ စာပိုဒ်များနှင့် အခြားစာသားအစိတ်အပိုင်းများအားလုံးသည် တူညီသောအရောင် (အခြားအရာတစ်ခုခုကို မသတ်မှတ်ထားလျှင်) ဖြစ်သည်!

CSS ကိုအသုံးပြုခြင်း။

CSS ကို HTML စာရွက်စာတမ်းများတွင် နည်းလမ်း ၃ မျိုးဖြင့် ထည့်နိုင်သည်။

Inlinestyle - HTML ဒြပ်စင်များအတွင်းရှိ attribute ကိုအသုံးပြုခြင်းဖြင့်
အတွင်းပိုင်း - ကဏ္ဍ <style>ရှိ ဒြပ်စင် တစ်ခုကို အသုံးပြုခြင်းဖြင့်<head>
ပြင်ပ<link> - ပြင်ပ CSS ဖိုင်တစ်ခုသို့ လင့်ခ်ချိတ်ရန် အစိတ်အပိုင်း တစ်ခုကို အသုံးပြုခြင်းဖြင့်

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

Inline CSS

inline CSS ကို HTML ဒြပ်စင်တစ်ခုတည်းတွင် တစ်မူထူးခြားသောစတိုင်ကို အသုံးပြုရန် အသုံးပြုသည်။

inline CSS သည် styleHTML ဒြပ်စင်တစ်ခု၏ အရည်အချင်းကို အသုံးပြုသည်။

အောက်ဖော်ပြပါ ဥပမာသည် ဒြပ်စင်၏ စာသားအရောင် <h1>ကို အပြာရောင်အဖြစ် သတ်မှတ်ပေးပြီး ဒြပ်စင်၏ စာသားအရောင် <p>ကို အနီရောင်အဖြစ် သတ်မှတ်သည်-

ဥပမာ

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

အတွင်းပိုင်း CSS

HTML စာမျက်နှာတစ်ခုအတွက် စတိုင်တစ်ခုကို သတ်မှတ်ရန် အတွင်း CSS ကို အသုံးပြုသည်။

အတွင်း CSS ကို အစိတ်အပိုင်း <head>တစ်ခုအတွင်း၊ HTML စာမျက်နှာ၏ ကဏ္ဍတွင် သတ်မှတ်ထားသည် <style>။

အောက်ဖော်ပြပါ ဥပမာသည် <h1>အစိတ်အပိုင်းအားလုံး (ထိုစာမျက်နှာပေါ်ရှိ) စာသားအရောင်ကို အပြာရောင်အဖြစ် သတ်မှတ်ပေးပြီး <p>အစိတ်အပိုင်းအားလုံး၏ စာသားအရောင်ကို အနီရောင်အဖြစ် သတ်မှတ်သည်။ ထို့အပြင်၊ စာမျက်နှာကို "powderblue" နောက်ခံအရောင်ဖြင့်ပြသလိမ့်မည်-

ဥပမာ

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

ပြင်ပ CSS

HTML စာမျက်နှာများစွာအတွက် စတိုင်လ်ကို သတ်မှတ်ရန် ပြင်ပစတိုင်စာရွက်ကို အသုံးပြုသည်။

ပြင်ပစတိုင်စာရွက်ကို အသုံးပြုရန်၊ <head>HTML စာမျက်နှာတစ်ခုစီ၏ ကဏ္ဍတွင် ၎င်းထံသို့ လင့်ခ်တစ်ခုကို ထည့်ပါ-

ဥပမာ

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

ပြင်ပစတိုင်စာရွက်ကို မည်သည့်စာသားတည်းဖြတ်မှုတွင်မဆို ရေးသားနိုင်သည်။ ဖိုင်တွင် မည်သည့် HTML ကုဒ်မျှ မပါဝင်ရမည်ဖြစ်ပြီး .css တိုးချဲ့မှုဖြင့် သိမ်းဆည်းရပါမည်။

ဤသည်မှာ "styles.css" ဖိုင်နှင့် ပုံစံတူဖြစ်သည်-

"styles.css"-

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

အကြံပြုချက်- ပြင်ပစတိုင်စာရွက်ဖြင့်၊ ဖိုင်တစ်ခုပြောင်းခြင်းဖြင့် ဝဘ်ဆိုက်တစ်ခုလုံး၏အသွင်အပြင်ကို ပြောင်းလဲနိုင်သည်။

CSS အရောင်များ၊ ဖောင့်များနှင့် အရွယ်အစားများ

ဤတွင်၊ ကျွန်ုပ်တို့သည် အသုံးများသော CSS ဂုဏ်သတ္တိအချို့ကို သရုပ်ပြပါမည်။ ၎င်းတို့အကြောင်းကို နောက်ပိုင်းတွင် သင်ပိုမိုသိရှိလာပါမည်။

CSS colorသည် အသုံးပြုမည့် စာသားအရောင်ကို သတ်မှတ်သည်။

CSS font-familyသည် အသုံးပြုမည့် ဖောင့်ကို သတ်မှတ်သည်။

CSS font-sizeပိုင်ဆိုင်မှုသည် အသုံးပြုမည့် စာသားအရွယ်အစားကို သတ်မှတ်သည်။

ဥပမာ

CSS အရောင်၊ ဖောင့်-မိသားစုနှင့် ဖောင့်အရွယ်အစား ဂုဏ်သတ္တိများကို အသုံးပြုခြင်း-

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Border

CSS borderပိုင်ဆိုင်မှုသည် HTML ဒြပ်စင်တစ်ဝိုက်တွင် ဘောင်တစ်ခုကို သတ်မှတ်သည်။

အကြံပြုချက်- HTML ဒြပ်စင်အားလုံးနီးပါးအတွက် ဘောင်တစ်ခုကို သင်သတ်မှတ်နိုင်သည်။

ဥပမာ

CSS နယ်နိမိတ်ပိုင်ဆိုင်မှုကို အသုံးပြုခြင်း-

p {
border: 2px solid powderblue;
}

CSS Padding

CSS paddingပိုင်ဆိုင်မှုသည် စာသားနှင့် ဘောင်ကြားရှိ padding (space) ကို သတ်မှတ်သည်။

ဥပမာ

CSS ဘောင်နှင့် padding ဂုဏ်သတ္တိများကို အသုံးပြုခြင်း-

p {
border: 2px solid powderblue;
padding: 30px;
}

CSS Margin

CSS marginပိုင်ဆိုင်မှုသည် နယ်နိမိတ်ပြင်ပရှိ အနားသတ် (space) ကို သတ်မှတ်သည်။

ဥပမာ

CSS ဘောင်နှင့် အနားသတ် ဂုဏ်သတ္တိများကို အသုံးပြုခြင်း-

p {
border: 2px solid powderblue;
margin: 50px;
}

ပြင်ပ CSS သို့ လင့်ခ်ချိတ်ပါ။

ပြင်ပစတိုင်စာရွက်များကို URL အပြည့်အစုံဖြင့် သို့မဟုတ် လက်ရှိဝဘ်စာမျက်နှာနှင့် ပတ်သက်သည့် လမ်းကြောင်းတစ်ခုဖြင့် ကိုးကားနိုင်သည်။

ဥပမာ

ဤဥပမာသည် ပုံစံစာရွက်တစ်ခုသို့ လင့်ခ်ချိတ်ရန် URL အပြည့်အစုံကို အသုံးပြုသည်-

ဥပမာ

ဤဥပမာသည် လက်ရှိဝဘ်ဆိုက်ရှိ html ဖိုင်တွဲတွင်ရှိသော ပုံစံစာရွက်တစ်ခုသို့ လင့်ခ်ချိတ်သည်-

ဥပမာ

ဤဥပမာသည် လက်ရှိစာမျက်နှာနှင့် တူညီသောဖိုင်တွဲတွင်ရှိသော ပုံစံစာရွက်တစ်ခုသို့ လင့်ခ်ချိတ်သည်-

HTML File Paths အခန်းတွင် ဖိုင်လမ်းကြောင်းများအကြောင်း ပိုမိုဖတ်ရှုနိုင်ပါသည် ။

အခန်းအကျဉ်းချုပ်

inline ပုံစံပြုလုပ်ရန်အတွက် HTML styleအရည်အချင်းကို အသုံးပြုပါ။
<style>အတွင်း CSS ကို သတ်မှတ်ရန် HTML အစိတ်အပိုင်းကို အသုံးပြုပါ။
<link>ပြင်ပ CSS ဖိုင်ကို ရည်ညွှန်းရန် HTML အစိတ်အပိုင်းကို အသုံးပြုပါ။
<head><style> နှင့် <link> ဒြပ်စင်များကိုသိမ်းဆည်းရန် HTML element ကိုသုံး ပါ။
colorစာသားအရောင်များအတွက် CSS ပိုင်ဆိုင်မှုကိုသုံးပါ။
font-familyစာသားဖောင့်များအတွက် CSS ပိုင်ဆိုင်မှုကို အသုံးပြုပါ။
font-sizeစာသားအရွယ်အစားအတွက် CSS ပိုင်ဆိုင်မှုကို အသုံးပြုပါ။
နယ်နိမိတ်များအတွက် CSS borderပိုင်ဆိုင်မှု ကိုသုံးပါ။
paddingနယ်နိမိတ်အတွင်း နေရာလွတ်အတွက် CSS ကို အသုံးပြု ပါ။
marginနယ်ခြားပြင်ပနေရာအတွက် CSS ပိုင်ဆိုင်မှုကို အသုံးပြုပါ။

အကြံပြုချက်- ကျွန်ုပ်တို့၏ CSS Tutorial တွင် CSS အကြောင်း ပိုမိုလေ့လာနိုင်ပါသည် ။

HTML လေ့ကျင့်ခန်းများ

HTML ပုံစံ တဂ်များ

Tag	Description
<style>	Defines style information for an HTML document
<link>	Defines a link between a document and an external resource

ရရှိနိုင်သော HTML တဂ်များအားလုံး၏စာရင်းအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ HTML Tag အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။

❮ ယခင် နောက်တစ်ခု ❯

HTML ကျူတိုရီရယ်