NgaBwa NgaAngel (IT STORE): CSSသင္ခန္းစာ

Showing posts with label CSSသင္ခန္းစာ. Show all posts

Tuesday, July 28, 2015

CSS-LESSION-5

သင္ခန္းစာ-၃

ဒီေန႔တင္ျပသြားမွာကေတာ့ cssနဲ႔ေနာက္ခံပံုထည့္နည္းနဲ႔linkေတြေအာက္ကမ်ဥ္းေၾကာင္းေဖ်ာက္နည္းရယ္linkကိုအေရာင္အမ်ိဳးမ်ိဳးသတ္မွတ္တာရယ္ကိုတင္ျပသြားမွာျဖစ္ပါတယ္
ေနာက္ခံပုံထည့္နည္းကလြယ္ပါတယ္ 

background-image:url("image link");

ဒီလိုေရးပါတယ္ ကြင္းစကြင္းပိတ္ထဲမွာပံုနာမည္သို႔မဟုတ္လင့္ကိုထည့္ရံုပါပဲ 
ေနာက္ပီးကိုယ္ထည့္လိုက္တဲ့ပံုနဲ႔ပါတ္သက္ပီးျပင္ဆင္မႈေလးေတလုပ္ပါမယ္ သူ႔ရဲ႕ျပင္ဆင္ခ်က္ေတြကေတာ့
၁.background-repeat:norepeat;
သူကေတာ့ ဥပမာအလ်ား၁၀၀အနံ၁၀၀႐ွိတဲ့tableတစ္ခုတည္းကိုအလ်ား၁၀အနံ၁၀႐ွိတဲ့ပံုတစ္ပံုထည့္မယ္ဆို backgroundထည့္မွာျဖစ္တဲ့အတြက္tableရဲ႕၁၀၀မျပည့္မခ်င္းျဖည့္သြားမွာျဖစ္တဲ့အတြက္ပံုက၁၀ပံုျဖစ္သြားမွာပါ
norepeatကိုသံုးျခင္းျဖင့္ပံုကိုတစ္ပံုပဲေပၚေစမွာပါ
repeatထားမယ္ဆိုရင္ေတာ့ပံုအမ်ားႀကီးျဖစ္ေနမွာပါ
၂.background-attachment:fixed;
သူကေတာ့ဥပမာ tableထဲေနာက္ခံပံုထည့္လိုက္မယ္ပီးရင္စာေရးမယ္ အဲ့မွာuserကစာကိုဆြဲဖတ္တဲ့အခါမွာပံုကလည္းစာနဲ႔အတူလိုက္ပါသြားမွာပါ
အဲ့လိုပါမသြားခ်င္ပဲပံုကရပ္ေနၿပီးစာပဲသြားေစခ်င္ရင္ေတာ့fixedကိုသံုးပါတယ္စာနဲ႔အတူပံုပါပါသြားေစခ်င္ရင္ေတာ့scrollကိုသံုးပါတယ္
၃.background-position:left top;
သူကေတာ့ပံုကိုဘယ္နားမွာေပၚေစခ်င္လိုတဲ့အခါမွာသံုးပါတယ္left topဆိုပံုကဘယ္နဲ႔အေပၚေဒါင့္နားေလးမွာေပၚမွာပါ သတိျပဳရမွာကleftနဲ႔topၾကားမွာspaceတစ္ခ်က္ျခားရပါမယ္ pxနဲ႔လည္းေဖာ္ျပလို႔ရပါတယ္
background-position:15px 25px 50px 80px;
အဲ့လိုေရးလို႔ရပါတယ္ left top right bottomပါ
၄.background-color:blue;
သူကေနာက္ခံအေရာင္ထည့္တာပါ
၅.background-size:100 150px;
သူကပံုအရြယ္အစားသတ္မွတ္တာပါ
tableတစ္ခုမွာထည့္ျပပါမယ္


<html>
<head>
<style type="text/css"rel="stylesheet">
body{
background-color:violet;
}
table{
background-image:url("http://ngabwangaangel.site88.net/image/template1.jpg");
background-repeat:norepeat;
width:150px;
height:150px;
background-size:150 150px;
cellpadding:2px;
cellspacing:5px;
color:green;
font-size:20px;
}
</style>
</head>
<body>
<table>
<tr>
<td>ကကကကကကက</td>
<td>ခခခခခခခခခခခခ</td>
</tr>
<tr>
<td>aaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbb</td>
</tr>
</table>
</body>
</html>


ဒီတစ္ခါလင့္ေတြအေရာင္သတ္မွတ္တာကိုေျပာျပပါမယ္
၁.text-decoration:none;
သူကလင့္ေတြမွာေအာက္မွာမ်ဥ္းပါတာကိုသတိျပဳမိၾကမွာပါအဲ့မ်ဥ္းေလးကိုေဖ်ာက္ခ်င္တဲ့အခါသံုးပါတယ္
၂.a:link
သူကuserကclickမလုပ္ရေသးတဲ့လင့္ေတရဲ႕အေရာင္ကိုသတ္မွတ္တာပါ
၃.a:hover
သူကuser clickလိုက္တဲ့အခ်ိန္မွာျပမယ့္အေရာင္ပါ
၄.a:focus
သူကလင့္ေပၚကိုuserရဲ႕လက္သို႔မဟုတ္mouse pointerေရာက္ေနတဲ့အခ်ိန္မွာျပတဲ့အေရာင္ပါ
၅.a:visited
သူကuserကclickၿပီးသားလင့္ေတရဲ႕အေရာင္ကိုသတ္မွတ္တာပါ
ေအာက္မွာေရးနည္းၾကည့္ပါ


<html>
<head>
<style type="text/css"rel="stylesheet">
a{
text-decoration:none
}
a:link{
color:green;
}
a:focus{
color:orange;
}
a:hover{
color:blue;
}
a:visited{
color:red;
}
</style>
</head>
<body>
<a href="link1">link1</a><br>
<a href="link2">link2</a>
</body>
</html>


ကဲcodeေတြကိုrunၾကည့္ပါခမ်ာ

Friday, July 17, 2015

CSS-LESSION-4

သင္ခန္းစာ-၄

သင္ခန္းစာ(၃)ရဲ႕အဆက္ပါ စာလံုးေတအတြက္ပဲအဓိကထားေျပာသြားမွာပါ ေရွ႕အခန္းမွာေတာ့ fontနဲ႔ရွင္းသြားတယ္ ဒီတစ္ခါtextနဲ႔ရွင္းပါမယ္
(၁)text-indent
သူကေတာ့စာတန္းကိုဘယ္ဘက္မ်ဥ္းစကေနညာဘက္ကိုခြာေစလိုတဲ႔အခါသံုးပါတယ္ သူ႔ရဲ႕valueကေတာ့ pxပါ

p{
text-indent:100px;
}


(၂)text-align
သူကေတာ့စာတန္းကိုဘယ္ဘက္ကေနကပ္ေရးမွာလားညာဘက္ကေနကပ္ေရးမွာလားအလယ္မွာေရးမွာလား အဲ့ဒီအခါမွာသံုးပါတယ္
သူ႔valueေတြကေတာ့ left,right,center

p{
text-align:center;
}


(၃)text-decoration
သူကေတာ့စာလးံုေအာက္မွာမ်ဥ္းတားတာ စာလံုးအေပၚမွာမ်ဥး္ဆြဲတာ စာလံုးကိုျဖတ္မ်ဥ္းဆြဲတာ linkေတလိုမ်ဥ္းပါရင္မ်ဥ္းေဖ်ာက္တဲ႔ေနရာမွာသံုးပါတယ္ သူ႔ရဲ႕valueေတြကေတာ့ underline,overline,line-through,noneတို႔ပဲျဖစ္ပါတယ္

p{
text-decoration:underline;
}


(၄)letter-spacing
သူကေတာ့စာလံုးအစိပ္အက်ဲအတြက္သံုးပါတယ္
valueကpxပါ

p{
letter-spacing:5px;
}


(၅)text-transform
သူကေတာ့ စာလံုးေတကိုအျကီးနဲ႔ေရးတာ အေသးနဲ႔ေရးတာ ေရွ႕စာလံုးကအျကီးေနာက္စာလံုးကအေသးနဲ႔ေရးလိုတဲ့အခါမွာသံုးပါတယ္ သူ႔ရဲ႕valueေတကေတာ့
uppercase(စာလံုးအျကီး)
lowercase(စာလံုးအေသး)
capitalize(ေရွ႕စာလံုးအၾကီးေနာက္စာလံုးအေသး)ေတြပဲျဖစ္ပါတယ္

p{
text-transform:capitalize;
}


ကဲcodeေလးေတြရဲ႕အလုပ္လုပ္ပံုကိုျကည့္ျကရေအာင္


<html>
<head>
<style type="text/css">
#idt{
text-indent:100px;
}
#alnl{
text-aling:left;
}
#alnc{
text-align:center;
}
#alnr{
text-align:right;
}
#dcru{
text-decoration:underline;
}
#dcro{
text-decoration:overline;
}
#dcrt{
text-decoration:line-through;
}
a{
text-decoration:none;
}
#spac{
letter-spacing:8px;
}
#trfu{
text-transform:uppercase;
}
#trfl{
text-transform:lowercase;
}
#trfc{
text-transform:capitalize;
}
</style>
</head>
<body>
<h2>1-text-indent</h2>
<p id="idt">This is text-indent effect</p>
<h2>2-text-align</h2>
<p id="alnl">This is text-align:left effect</p>
<p id="alnc">This is text-align:center effect </p>
<p id="alnr">This is text-align:right effecf</p>
<h2>3-text-decoration</h2>
<p id="dcru">This is text-decoration:underline effect</p>
<p id="dcro">This is text-decoration:overline effect</p>
<p id="dcrt">This is text-decoration:line-through effect</p>
<a href="link">This is text-decoration:none effect.It is hide the underline from link.</a>
<h2>text-spacing</h2>
<p id="spac">This is letter-spacing effect</p>
<h2>text-transform</h2>
<p id="trfu">this is text:transform:uppercase effect</p>
<p id="trfl">This is text-transform:lowercase effect</p>
<p id="trfc">This is text-transform:capitalize effect</p>
</body>
</html>


ကဲအေပၚကcodeကိုcopyကူးrunပီးဘာေတထူးျခားလာလဲၾကည့္လိုက္ဦးေနာ္

CSS-LESSION-3

သင္ခန္းစာ-၃

အရင္ေန႔ေတြကselectorေတြအေၾကာင္းသင္ခဲ့ပီးၿပီဆိုေတာ့ဒီေန႔ေတာ့ဒီေန႔ေတာ့cssရဲ႕propertiesနဲ႔valueေတြအေၾကာင္းတင္မယ္ဗ်ာ ဒီပထမပိုင္းမွာေတာ့ စာလံုးေတြအတြက္သီးသန္႔တင္ေပးမွာပါ ေနာက္အခန္းေတြက်မွပံုေတြလင့္ေတြေပါ့ဗ်ာ

selector{
properties:value;
}

ဒီလိုေရးရတယ္လို႔ေျပာခဲ့တယ္ေနာ္ခုpropertiesနဲ႔valueေတြအေၾကာင္းတြဲၿပီး႐ွင္းသြားမယ္ဗ်ာ 
၁။ ။ font
fontမွာသူနဲ႔တြဲတဲ့ဟာေတြကိုတင္ျပသြားပါမယ္
(က)font-family
သူကေတာ့စာလံုပံုစံေတြပါ စာလံုးလိမ္လိမ္ေကာက္ေကာက္ေတြလိုမ်ိဳးေပါ့ 
ေရးနည္းကေတာ့
p{
font-family:impact;
}
အဲ့လိုေရးပါတယ္ သူ႕ရဲ့valueေတြကေတာ့impact,time new roman,serial,အစ႐ွိသျဖင့္႐ွိပါတယ္
ေအာက္မွာစာလံုးပံုစံနဲ႔နာမည္ေတြကိုၾကည့္လိုက္ပါဦး






(ခ)font-style

သူကေတာ့စာလံုးအေစာင္းေတြစာလံုးထူထူေတေရးရာမွာသံုးပါတယ္ သူ႔ရဲ႕valueေတြကေတာ့

bold (စာလံုထူထူပါ)

italic(စာလံုးေစာင္းေစာင္းပါ)

p{font-style:bold;}



(ဂ)font-weight

သူကေတာ့စာလံုးကိုboldတင္တာပါစာလံုးထူထူေပါ့ ေရးနည္းက
p{font-weight:bold;}


(ဃ)font-variant

သူကစာလံုးပံုမွန္အရြယ္အစားလားနည္းနည္းႀကီးႀကီးလားေရးခ်င္ရင္သံုးပါတယ္ သူ႔ရဲ႕valueေတြကေတာ့ small,normal,စတာေတြပဲျဖစ္ပါတယ္
p{font-variant:normal;}


(င)text-indent

သူကေတာ့စာကိုဘယ္ဘက္ေဘးမ်ဥ္းကေနညာဘက္ကိုတြန္းထုတ္ခ်င္ရင္သံုးပါတယ္သူ႔valueကိုpixels(px)နဲ႔တြက္ပါတယ္


p{font-indent:40px;}


(စ)font-size

သူကစာလံုးအရြယ္အစားကိုသတ္မွတ္တာပါသူ႔ကိုလည္းpxနဲ႔ရာခိုင္းႏႈန္းနဲ႔တြက္ခ်က္ပါတယ္

p{font-size:30px;}

ေအာက္မွာpxတြက္ခ်က္ပံုေတြကိုပံုနဲ႔တကြျပထားပါတယ္ခမ်ာ





၂။ ။color

သူက႐ွင္းပါတယ္စာလံုးအေရာင္သတ္မွတ္တာပါ

p{color:green;}

ကဲအေပၚကcodeေတြအလုပ္လုပ္ပံုကိုid selectorသံုးၿပီးစမ္းၾကည့္ၾကရေအာင္



<html>
<head>
<style type="text/css">
#one{
font-family:impact;
}
#two{
font-style:italic;
}
#three{
font-weight:bold;
}
#four{
font-variant:small;
}
#five{
text-indent:100px;
}
#six{
font-size:100px;
}
#seven{
color:green;
}
</style>
</head>
<body>
<p id="one">This is a font-family effect</p>
<p id="two">This is a font-style effect</p>
<p id="three">This is a font-weight effect</p>
<p id="four">This is a font-variant effect</p>
<p id="five">This is a font-indent effect</p>
<p id="six">This is a font-size effect</p>
<p id="seven">This is a color effect</p>
</body>
</html>



ကဲအေပၚကcodeကိုrunၾကည့္လိုက္ပါဦး

Saturday, July 4, 2015

CSS-LESSION-2

သင္ခန္းစာ-၂



ဒီေန႕class selectorနဲ႔id selectorကို႐ွင္းျပပါမယ္ႏွစ္ခုလံုးကေတာ့ 
ကိုstyleထည့္ခ်င္တဲ့စာပိုဒ္သို႔မဟုတ္အေၾကာင္းအရာကိုနာမည္ေပးၿပီးအဲ့ဒီနာမည္
ကိုselectorကိုအသံုးျပဳကာအေရာင္ေတြstyleေတြထည့္တာပါပဲ 
၁။  ။class selector
ပထမဆံုးclass selectorကိုစ႐ွင္းပါမယ္
ဥပမာမိမိရဲ႕html documentထဲမွာ<p>ဆိုတဲ့စာပိုဒ္တစ္ခု႐ွိတယ္ဆိုပါဆို႔
အဲ့ဒီစာပိုဒ္ကိုclassဆိုတဲ့html altributeကိုသံုးၿပီးနာမည္တစ္ခုသတ္မွတ္ပါမယ္
<p class="name"> text </p>
ဒီလိုေရးပါတယ္ classကိုသံုးၿပီး nameလို႔အမည္ေပးလိုက္တယ္ အဲ့ဒီနာမည္
ကိုcssမွာselectorအျဖစ္အသံုးျပဳမယ္ဆိုရင္
ပထမဆံုး <p> tagကေန
pဆိုတဲ့စာလံုးကိုယူမယ္ ပီးသူ႔ေနာက္က(.)dotဆိုတဲ့အစက္ခ်မယ္ ပီးရင္နာမည္ေရးရံုပါပဲ


p.name{
font-size:10px;
}
ဒီလိုပါ ကဲhtmlအျပည့္အစံုနဲ႔ေရးျပမယ္ေနာ္

<html>
<head>
<style type="text/css">
p.naing{
font-size:20px;
color:green;
}
</style>
</head>
<body>
<p class="naing">မဂၤလာပါ
</p>
</body>
</html>
Code ကိုrunၾကည့္ပါခမ်ာ မွတ္ထားရမွာတစ္ခုက classကိုအမည္ေပးရမွာ နံပါဂဏန္းေတြမေပးပါနဲ႔ htmlရဲ႕altributeနာမည္ေတြမေပးပါနဲ႔
ဥပမာ
class="12345"(အမွား)
class="body"(အမွား)
class="hacker"(အမွန္)

၂။  ။id selector
သူလည္းclass selectorလိုပါပဲ
<p id="name">text</p>
ဒါေပမယ့္သူ႔မွာကြဲျပားတာက class selectorလို(.)dotကိုမသံုး
ပဲ (#)ကိုသံုးပါတယ္
#name{
font-size:20px;
color:green;
}ဒီလိုေရးပါတယ္
ေအာက္မွာဥပမာၾကည့္ပါခမ်ာ


<html>
<head>
<style type="text/css">
#hacker{
font-size:20px;
color:green;
}
</style>
</head>
<body>
<p id="hacker">
မဂၤလာပါ
</p>
</body>
</html>

Runၾကည့္ပါဦး

CSS-LESSION-1

သင္ခန္းစာ-၁


က်ေနာ္လည္းေဘမ႐ွိတာနဲ႔ မတင္ျဖစ္တာၾကာၿပီဗ်ာ 
လာမယ့္၄ရက္ေန႔ကစၿပီးေတာ့ skillက်လာဖို႔ templateေတြစဆြဲၾကမယ္ဗ်ာ မ်ားမ်ားလုပ္မွမ်ားမ်ားကြၽမ္းက်င္လာမွာေလ
အဲ့ဒီေနက် က်ေနာ္တင္ေပးတာေတြစဆြဲႏိုင္ဖို႔ ခုcssသင္ခန္းစာေလးတင္မယ္ဗ်ာ ေသခ်ာေလးလိုက္လုပ္ပါခမွ် ဒါမွ ၄ရက္ေန႔မွာတင္မယ့္သင္ခန္းစာကိုလိုက္လုပ္ႏိုင္မွာျဖစ္ပါတယ္

CSSမွာselectorဆိုၿပီး႐ွိပါတယ္ဗ်
Selector{
Properties:value;
}
ဒီလိုေရးပါတယ္ selectorဆိုတာကေတာ့ေရြးခ်ယ္တာေပါ့
ကို styleထည့္ခ်င္တဲ့ေနရာကိုေရြးခ်ယ္လိုက္တာေပါ့
Properties ကေတာ့သတ္မွတ္ခ်က္ ေပါ့ ဥပမာစာအေရာင္သတ္မွတ္မယ္ဆိုcolor ေပါ့ ဒါကpropertiesပါ
valueကတန္ဖိုးပါ စာကိုgreenဆိုတဲ့အစိမ္းေရာင္သတ္မွတ္တယ္ဆိူgreenကvalueပါ
၁။  ။html tag selector
ပထမတစ္ခုအေနနဲ႔html tagကိုselectorအျဖစ္အသံုးျပဳႏိုင္ပါတယ္ခမွ်
body{
background-color:blue;
}
အဲ့မွာဆိုbodyကselectorေပါ့ html tagကိုselectorအျဖစ္အသံုးျပဳလိုက္တာပါ html tag selectorမွာtagေတြအားလံုးကိုတန္းစီေရးလို႔ရပါတယ္ အဲ့လိုတန္းစီေရးဖို႔ၾကားမွာေကာ္မာခံေပးရပါတယ္
body,h1,p,div{
font-size:20px;
color:green;
} 
ဒီလိုေရးပါတယ္ ဒါကhtml tag selectorပါ
Css ႏွစ္မ်ိဳး႐ွိပါတယ္ internal cssနဲ႔ external cssဆိုၿပီး႐ွိပါတယ္ internal cssက html document ရဲ႕<head> </head>ၾကားမွာေရးရၿပီး externalကေတာ့ သီးသန္႔ဖိုင္အျဖစ္ေရးၿပီးလင့္နဲ႔ေခၚယူသံူးစြဲတာမ်ိဳးပါ
Css codeေတြကို<style> </style>ဆိုတဲ့tag ၾကားမွာေရးပါတယ္
<html>
<head>
<style type="text/css"rel="stylesheet">
body,p{
background-color:violet;
font-size:20px;
color:green;
}
</style>
</head>
<body>
<p> 
type="text/css"ဆိုတာကဒီ
ဒီဖိုင္ေလးကို name.cssလို႔နာမည္ေပးၿပီးဖိုင္တစ္ခုအျဖစ္ save
လိုက္ပါ ပီးရင္ ကိုယ့္ရဲ႕htmlဖိုင္ထဲကိုေခၚယူရမယ့္ပံုစံက

<html>
<head>
<link rel="stylesheet"type="text/css"href="name.css"/>
</head>
<body>
<p>
လြယ္ပါတယ္ <link>ဆိုတဲ့tagကိုအသံုးျပဳၿပီး href=ရဲ႕ေနာက္မွာ css fileရဲ႕နာမည္ကိုထည့္လို္က္တာပါပဲ
hostingမွာဆိုရင္ေတာ့ linkအျပည့္အစံုထည့္ရမွာေပါ့ေနာ္
ဒါကေရးနည္းပါ ေနာက္ထပ္selectorႏွစ္ခုက်န္ပါေသးတယ္
Id selectorနဲ႔ class selectorပါ အဲ့ႏွစ္ခုကိုေနာက္ေန႔တင္ေပးပါမယ္ ပီးရင္ propertiesေတ လာပါမယ္ ပီးရင္ valueေတလာပါမယ္ ေက်းဇူးတင္ပါတယ္
</p>
</body>
</html>


အေပၚကcodeကိုrunၾကည့္လိုက္ပါဦး

Tuesday, July 28, 2015

CSS-LESSION-5

သင္​ခန္​းစာ-၃

Friday, July 17, 2015

CSS-LESSION-4

သင္​ခန္​းစာ-၄

CSS-LESSION-3

သင္​ခန္​းစာ-၃

Saturday, July 4, 2015

CSS-LESSION-2

သင္​ခန္​းစာ-၂

CSS-LESSION-1

သင္​ခန္​းစာ-၁

သင္ခန္းစာ-၃

သင္ခန္းစာ-၄

သင္ခန္းစာ-၃

သင္ခန္းစာ-၂

သင္ခန္းစာ-၁