CSS – Chapter 2 – MYSTERY ZILLION Blog

Chapter 2: CSS Styling

CSS မှာ property က အများကြီးရှိပါတယ်။ အရင် chapter တုန်းကတော့ color property နဲ့ပဲ ဥပမာ ပြသွားပါတယ်။

CSS Background

Background ကို မပြောခင် background နဲ့ လုပ်ထားတဲ့ CSS လေးကို ပြပါတယ်။

Background Color

Background color က နောက်ခံ အရောင်ပါ။ အောက်က code လေးကို စမ်းကြည့်လိုက်ရအောင်။

<html>
<head>
<title>Back ground</title>
<style type="text/css">
body {background-color:#b0c4de;} 
</style>
</head>
<body>
</body>
</html>

အဲဒါလေးကို run လိုက်ရင် ခရမ်းရောင် background ကို မြင်ရမှာပါ။

Color တွေကိုတော့ အောက်ကပုံစံတွေနဲ့ သုံးလို့ရပါတယ်။
1. name :: color နာမည်နဲ့ ခေါ်ယူသုံးစွဲခြင်း။ ဥပမာ ။။ red, blue
2. RGB :: RGB value အနေနဲ့ ခေါ်ယူသုံးစွဲခြင်း။ ဥပမာ ။။ rgb(255,0,0)
3. Hex :: hex value အနေနဲ့ အသုံးပြုခြင်း။ ဥပမာ ။။ #FF0000

Color ကိုတော့ အသေးစိတ်မပြောတော့ပါဘူး။ ကျွန်တော် HTML မှာတုန်းက သေချာပြောခဲ့ပြီးပါပြီ။ အောက်က example လေးကို စမ်းကြည့်ရအောင်။

<html>
<head>
<title>Back ground</title>
<style type="text/css">
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
</style>
</head>
<body>
<h1>Header</h1></p>
<p><div>
This is DIV Layer using background-color.
<br/>
<p>This is paragraph using background-color.</p>
</div>
</body>
</html>

အဲဒါလေးကို ဒီလိုလေး မြင်ရမှာပါ။

header background

ဒီလောက်ဆိုရင်တော့ background-color ကို သဘောပေါက်လောက်ပါပြီ။

Background Image

Background Image ကတော့ ပုံတွေ မှာ background ထည့်တာပေါ့။

ဒီပုံလေးကတော့ paper.gif ပါ။

<html>
<head>
<style type="text/css">
body {background-image:url('paper.gif');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

အဲဒီ code လေးကို browser မှာ ဖွင့်လိုက်ရင် ဒီလိုမြင်ရပါလိမ့်မယ်။

helloworld

background တစ်ခုလုံး paper.gif တွေ ပြည့်သွားတာကို မြင်ရမှာပါ။ ပုံတစ်ပုံတည်းကို tile လုပ်သွားတာပါ။ တနည်းပြောရင် pattern လိုမျိုး တစ်ကွက်ပြီး တစ်ကွက် အပြည့်ဖြည့်သွားတာပေါ့။ ဒါကြောင့် wallpaper တွေကို background ထည့်လိုက်ရင် Title ဖြစ်သွားပြီး ကြည့်မကောင်းဖြစ်တတ်တယ်။

Background Image – Repeat Horizontally or Vertically

ကျွန်တော်တို့တွေ background image ကို repeat horinonal ပဲလုပ်ချင်တယ်။ ဒါမှမဟုတ် vertical ပဲလုပ်ချင်တယ်ဆိုရင်လည်း လုပ်လို့ရပါတယ်။

အဲလို gradient လုပ်ထားတဲ့ ပုံကို background image နဲ့သုံးလိုက်ရင် အောက်ကလို ဖြစ်သွားပါလိမ့်မယ်။

bgpreview

သူက horizontal fill သွးာတာ ပြဿနာ မဟုတ်ပေမယ့် vertical ဖြည့်သွားတော့ ကြည့်ရ ဆိုးသွားပါတယ်။ vertical မဖြည့်ဘူး။ horizontal ပဲ လုပ်မယ်ဆိုရင် ဒီလိုရေးရပါတယ်။

<html>
<head>
<style type="text/css">
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

အဲဒါလေးကို run လိုက်ရင် ဒီလို ရပါလိမ့်မယ်။

အဲဒါဆိုရင် ကြည့်လို့ကောင်းသွားပါပြီ။ repeat-x ဆိုတဲ့အတွက်ကြောင့် horizontal ပဲrepeat လုပ်ပါမယ်။ တကယ်လို့ repeat-y လို့သာ ရေးခဲ့မယ်ဆိုရင်တော့ vertical ပဲ repeat လုပ်မှာပါ။ repeat-y ကိုတော့ ဥပမာ နဲ့ မပြတော့ပါဘူး။ ကိုယ်တိုင်သာ စမ်းကြည့်လိုက်ပါ။

Background Image : Set Position

အရင်ဆုံး ဒီ code လေးကို run ကြည့်လိုက်ပါ။

<html>
<head>
<style type="text/css">
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>

သိပြီးသားနေမှာပါ။ image_tree.png ကိုတော့ မိမိ စက်ထဲမှာ ရှိတဲ့ ပုံထဲက အဆင်ပြေတာလေးနဲ့ သုံးလိုက်ပါ။အဲဒါက အောက်ပါအတိုင်း မြင်ရမှာပါ။

ပုံက background မှာရှိနေပါတယ်။ ဘယ်ဘက် ထောင့်မှာ ကပ်နေတာပါ။

ကျွန်တော်တို့ ညာဘက်ထောင့်ကို ပုံကပ်မယ်။ နောက်ပြီး စာကလည်း ပုံကို မဖုံးချင်ဘူး။ ပုံရဲ့ width က 200px ရှိတယ်။ ဒါဆိုရင် ဒီလိုရေးလိုက်ပါတယ်။

<style type="text/css">
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;
margin-right:200px;
}
</style>
</head>

အဲမှာ margin-right:200px ဆိုတာက ညာဘက် margin 200px ထိ ဆွဲထားလိုက်တာပါ။ margin ပိုင်း နောက်ပိုင်းမှာ ပြောပြပါမယ်။ background-position:top right; ကို ကြည့်ပါ။ top right ဖြစ်နေပါတယ်။ top ကတော့ အပေါ်ဆုံးမှာထားမယ်ပေါ့။ ကျွန်တော်တို့ ညာဘက် ကပ်ချင်တော့ right လို့ရေးလိုက်ပါတယ်။

Background – Shorthand property
ကျွန်တော်တို့ တစ်ခုခြင်းဆီ လိုက်မရေးခြင်ဘူး။ တစ်ကြောင်းတည်းနဲ့ မပြီးဘူးလား။ ကျွန်တော်တို့တွေ တစ်ကြောင်းတည်းနဲ့ background css ကို ရေးလို့ရပါတယ်။ ဥပမာ။။

body {background:#ffffff url('img_tree.png') no-repeat top right;}

လို့ရေးထားတာ အပေါ်က code နဲ့ အတူတူပါပဲ။ background ဆိုတဲ့ property မှာ အောက်က property တွေပေါင်းပြီး ရေးလို့ရပါတယ်။

background-color
background-image
background-repeat
background-attachment
background-position

Background – background attchment

ကျွန်တော် background-attchment အကြောင်း မပြောခဲ့ရသေးပါဘူး။ background attachment မလုပ်ခင် အောက်က code လေးကို စမ်းကြည့်ပါအုံး။

<html>
<head>
<style type="text/css">
body 
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
}
</style>
</head>

<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>

အဲမှာ ကျွန်တော်တို့စာကို ဆွဲချလိုက်ရင် background image လေး ပျောက်သွားပါလိမ့်မယ်။ background image မပျောက်ချင်ဘူး။ fixed ဖြစ်နေစေချင်တယ်ဆိုရင် အောက်ကလို ပြောင်းရေးလိုက်ပါ။

<style type="text/css">
body 
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>

ဒီ code လေးကိုတော့ ကိုယ်တိုင် စမ်းကြည့်လိုက်ပါ။

All CSS background properties

Property	Description	Value
background	background အားလုံးအတွက် သုံးနိုင်သည်။	background-color background-image background-repeat background-attachment background-position inherit
background-attachment	background image fix လုပ်မလား scrolls လုပ်မလား အတွက်	scroll fixed inherit
background-color	background color ထည့်သွင်းရန်	color-rgb color-hex color-name transparent inherit
background-image	image background တွင် ထည့်သွင်းရန်	url(URL) none inherit
background-position	background image position ကို ချိန်ညှိရန်	left top left center left bottom right top right center right bottom center top center center center bottom x% y% xpos ypos inherit
background-repeat	image များကို repeat ဘယ်လို လုပ်မည်အတွက်။	repeat repeat-x repeat-y no-repeat inherit