CSS ဆိုတာဘာလဲ။
CSS သည် C ascading S tyle S heets ကို ကိုယ်စားပြုသည်။
CSS သည် HTML အစိတ်အပိုင်းများကို မည်သို့ ပြသ ရမည်ကို ဖော်ပြသည်။
CSS နမူနာ
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
၎င်းသည်မည်သို့အလုပ်လုပ်သည်ကိုကြည့်ရန် "သင်ကိုယ်တိုင်ကြိုးစားပါ" ခလုတ်ကိုနှိပ်ပါ။
CSS Syntax
CSS စည်းမျဉ်းတစ်ခုတွင် ရွေးချယ်ကိရိယာ တစ်ခုနှင့် ကြေငြာ ပိတ်ဆို့ခြင်းတစ်ခု ပါဝင်သည်-
ရွေးချယ်သူသည် HTML ဒြပ်စင်အား ပုံစံ (h1) သို့ညွှန်ပြသည်။
ကြေငြာပိတ်ဆို့ခြင်း (အကောက်ကောက်များအတွင်း) တွင် ဆီမီးကော်လံများဖြင့် ပိုင်းခြားထားသော ကြေငြာချက်တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော ကြေငြာချက်များပါရှိသည်။
ကြေငြာချက်တစ်ခုစီတွင် ကော်လံတစ်ခုခြားထားသော CSS ပိုင်ဆိုင်မှုအမည်နှင့် တန်ဖိုးတစ်ခုပါဝင်သည်။
အောက်ဖော်ပြပါ ဥပမာတွင် <p> ဒြပ်စင်များအားလုံးသည် အလယ်တည့်တည့်၊ အနီရောင်ဖြစ်ကာ ဖောင့်အရွယ်အစား 32 pixels ရှိပါမည်။
ဥပမာ
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
အလားတူ ဥပမာကိုလည်း ဤကဲ့သို့ ရေးသားနိုင်သည်။
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
ပြင်ပပုံစံစာရွက်
CSS စတိုင်စာရွက်ကို ပြင်ပ ဖိုင် တွင် သိမ်းဆည်းထားနိုင်သည် -
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
ပြင်ပစတိုင်စာရွက်များကို <link> တဂ်များဖြင့် HTML စာမျက်နှာများသို့ ချိတ်ဆက်ထားသည်။
ဥပမာ
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Inline ပုံစံ
ဥပမာ
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Cascading Order
HTML ဒြပ်စင်များအတွက် မတူညီသောစတိုင်များကို သတ်မှတ်ထားပါက၊ စတိုင်များသည် အောက်ပါဦးစားပေးဖြင့် ပုံစံအသစ်များအဖြစ်သို့ ပြောင်းလဲ သွား လိမ့်မည်-
- ဦးစားပေး 1- အတွင်းလိုင်းစတိုင်များ
- ဦးစားပေး 2- ပြင်ပနှင့် အတွင်းပိုင်းစတိုင်စာရွက်များ
- ဦးစားပေး ၃- ဘရောက်ဆာ မူရင်း
- မတူညီသောပုံစံများကို တူညီသောဦးစားပေးအဆင့်တွင် သတ်မှတ်ပါက၊ နောက်ဆုံးတစ်ခုသည် အမြင့်ဆုံးဦးစားပေးဖြစ်သည်။
ဥပမာ
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS သရုပ်ပြ - HTML စာမျက်နှာတစ်ခု - ပုံစံမျိုးစုံ။
ဤနေရာတွင် မတူညီသော ပုံစံစာရွက် 4 ခုဖြင့် ပြသထားသော HTML စာမျက်နှာတစ်ခုကို ပြသပါမည်။
Stylesheet ခလုတ်များ (1-4) ကို နှိပ်ပြီး မတူညီသော စတိုင်များဖြင့် ပြသထားသော စာမျက်နှာကိုလည်း ကြည့်ရှုပါ။
CSS Tutorial အပြည့်အစုံ
ဤသည်မှာ CSS ၏ အတိုကောက်ဖော်ပြချက်ဖြစ်ပါသည်။
CSS သင်ခန်းစာအပြည့်အစုံအတွက် W3Schools CSS Tutorial သို့သွားပါ ။
CSS ရည်ညွှန်းချက်အပြည့်အစုံအတွက် W3Schools CSS Reference သို့သွားပါ ။