Myanmar Kyat Converter
CSS ကိုအသံုးျပဳျပီး HTML Document ထဲရွိ Tags ေတြနဲ႔ Elements ေတြကိုလဲ အေရာင္ေတြေျပာင္းႏိုင္ပါေသးတယ္၊ အေရာင္ေျပာင္းဖို႔အတြက္ေတာ့ CSS
ရဲ့ Color Property ျဖစ္တဲ့ color ကိုပဲသံုးရပါတယ္၊ တကယ္လို႔ HTML Document မွာရွိတဲ့ <h1> Tags အသံုးျပဳထားတဲ့ စာသားအားလံုးကို
အနီေရာင္ေျပာင္းခ်င္ရင္
H1 { color : red }
အထက္က ပံုစံမွာေတာ့ အရင္ဆံုး h1 ဆိုတာကေတာ့ CSS Selector ပါ၊ သူက HTML Document ထဲက <h1> Tags သံုးထားတဲ့ Element အားလံုးကို
CSS နဲ႔ ျပဳျပင္မယ္ဆိုျပီး သတ္မွတ္လိုက္တာပါ၊ color : red ဆိုတာမွာေတာ့ color ဆိုတဲ့ အေရာင္ (property) ကို value အျဖစ္ လို႔ red ထည့္မယ္၊ ဒီေတာ့
HTML Document ထဲက <h1> Element နဲ႔ ပတ္သတ္တဲ့ စာသားအားလံုး ရဲ့ အေရာင္ကို အနီေရာင္အျဖစ္ေျပာင္းမယ္လို႔ေျပာတာပါ၊ ေအာက္မွာ
လက္ေတြပဥပမာ ၾကည့္ပါ၊
HTML Document
<html>
<head>
<link href= "coder.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> what is going on with you guys? </h1>
</body>
</html>
CSS File
h1 { color : red ;}
အထက္က လို HTML Document နဲ႔ CSS ဖိုင္တို႔ကို ေရးျပီး HTML Document ကို Run ၾကည့္လိုက္ရင္ ေအာက္က ပံုစံရွိတဲ့ သင့္ရဲ့ ၀က္ဆိုက္ကိုေတြ႔ရမွာပါ၊
ေသခ်ာမွတ္ပါ၊ Color Property က color ျဖစ္ျပီး value က red အေရာင္နာမည္ပါ၊ အေရာင္တန္ဖိုး value ကိုေတာ့ HEX (hexadicimal value) ျဖစ္ေစ၊
RGB (red green blue) တန္ဖိုးျဖစ္ ေစ ၾကိဳက္ရာ တန္ဖိုးကိုသံုးႏိုင္ပါတယ္၊ ေအာက္မွာ ဥပမာ ၾကည့္ပါ၊
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
အေရာင္နာမည္ေတြကို စံုစံု လင္လင္ သိခ်င္ရင္ေတာ့ ဒီေနရာမွာေလ့လာႏိုင္ပါတယ္၊
စာပိုက္တစ္ခုက စာသားေတြကိုျဖစ္ေစ၊ စာေၾကာင္းတစ္ေၾကာင္းက စာသားေတြကိုျဖစ္ေစ ဘယ္ဘက္ကိုယူျပီး စီမွာလား ညာဘက္ကိုယူျပီးစီမွာလား
အလယ္ကိုယူျပီး စီမွာလား စသျဖင့္ သင့္စိတ္ၾကိဳက္ေနရာခ်ထားလို႔ရပါတယ္၊ ဒီအတြက္ေတာ့ CSS မွာ Text Align Property ကိုသံုးတယ္၊ အထက္က
ဥပမာကိုပဲ စာသားေတြကို အလယ္မွာထားခ်င္တယ္ဆိုရင္ျဖင့္ text-align :center လို႔ထည့္ေပးလိုက္ပါ၊ text-align က စာသားေနရာခ်ိန္ဖို႔အတြက္
Property ျဖစ္ျပီး center ကေတာ့ Value ပါ၊ အမ်ားဆံုး သံုးတဲ့ values ေတြကေတာ့ left, right နဲ႔ center တို႔ပါ၊ ေအာက္မွာဥပမာ ၾကည့္
HTML Document
<html>
<head>
<link href= "coder.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> what is going on with you guys? </h1>
</body>
</html>
CSS File
h1 { color : red ;
text-align : center;}
အထက္က HTML Document နဲ႔ CSS ဖိုင္တို႔ကို သိမ္းျပိးသြားရင္ Run လိုက္ပါ၊ ဒါဆိုရင္ေတာ့ CSS မွာ h1 အတြက္ text-align :center
လို႔ထည့္ထားတဲ့အတြက္ ေအာက္က ပံုအတိုင္း သင့္၀က္ဆိုက္စာမ်က္ႏွာကိုေတြ႔ရမွာပါ၊
Text Align
အထက္ကပံုစံမ်ိဳး Text-align ကို right , left တို႔ထားျပီး စမ္းသပ္ၾကည့္ပါ၊ ထူးျခားတဲ့ text align value တစ္ခုကေတာ့ သင္ေရးထားတဲ့ စာပိုဒ္က
စာသားေတြအားလံုးကို တစ္ေၾကာင္းနဲ႔ တစ္ေၾကာင္းညီေအာင္ ဆြဲဆန္႔ေပး တဲ့ ခ်ိန္ညိွေပးတဲ့ Justify ဆိုတဲ့ value ပါ၊ သင္တစ္ကယ္
အလုပ္လုပ္လာပီဆိုရင္ျဖင့္ အမ်ားဆံုး အသံုးျပဳမယ့္ Text formatting တစ္ခုပါ၊ သံုးတဲ့ပံုကေတာ့
H1 {text-align :justify;}
ဆိုျပီးသံုးပါတယ္၊ လက္ေတြ႔ စာပိုဒ္တစ္ခုေရးျပီး အဲ့ဒီ့စာပိုဒ္ကို Justify လုပ္ၾကည့္ပါ၊
Text decoration
ေနာက္ထပ္ သိထားရမယ့္ Text Formatting တစ္ခုကေတာ့ text-decoration ပါ၊ သူကို ေခၚသံုးတဲ့ property ကေတာ့ text-decoration ျဖစ္ပါတယ္၊
Value ကေတာ့ ငါးမ်ိဳးရွိတယ္၊ ေအာက္မွာ ၾကည့္၊
{ text-decoration : none;} ဘာအလွမွ မဆင္ဖို႔အတြက္ none ဆိုတဲ့ value ကိုသံုးထားတာ၊
{ text-decoration : underline ; } စာေၾကာင္းရဲ့ေအာက္မွာ မ်ဥ္းေၾကာင္းတားလိုတဲ့အတြက္ underline ဆိုတဲ့ Value ကိုထည့္ထားတာ၊
{text-decoration : overline; } စာေၾကာင္းရဲ့ အေပၚမွာ မ်ဥ္းေၾကာင္းတားလိုတဲ့အတြက္ overline ဆိုတဲ့ value ကိုထည့္ထားတာ၊
{text-decoration : line-through;} စာေၾကာင္းကို အလယ္ကေနျဖတ္ျပီး မ်ဥ္းေၾကာင္းတားလိုတဲ့အတြက္ line-through ဆိုတဲ့ value ကိုထည့္ထားတာ၊
{text-decoration:blink;} စာေၾကာင္းကို ပိတ္လိုက္ေပၚလိုက္ျဖစ္ေစခ်င္လို႔ blink ဆိုတဲ့ vlaue ကိုထည့္ထားတာ၊
အထက္က Property နဲ႔ Values ေတြကို လက္ေတြ သံုးၾကည့္မယ္၊ ေအာက္မွာ
HTML Document
<html>
<head>
<link href= "coder.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> what is going on with you guys? </h1>
<p> hey now brown cow in down town </p>
<h2>Daddy has gone to work, mummy is not at home </h2>
<b> what's going on with you guys? </b><br/>
<dive id="bla">Got a pocket full of cheese and garden full of trees</div>
</body>
</html>
CSS File
h1 { text-decoration : none;}
p { text-decoration : underline ; }
h2 {text-decoration : overline; }
b {text-decoration : line-through;}
#bla{text-decoration:blink;}
အထက္က HTML Document နဲ႔ CSS ဖိုင္တို႔ကို သိမ္းျပိးသြားရင္ Run လိုက္ပါ ဒါဆိုရင္ေတာ့ ေအာက္က ပံုစံမ်ိဳးရွိတဲ့ ၀က္ဆိုက္စာမ်က္ႏွာကိုရမယ္၊
ေအာက္ဆံုးစာေၾကာင့္က ဖြင့္လိုက္ပိတ္လိုက္ျဖစ္ေနမွာပါ၊ Google Chrome မွာ အဆင္မေျပရင္ Firefox နဲ႔ စမ္းၾကည့္ပါ၊
Text transform
စာေၾကာင္းတစ္ေၾကာင္းက ျဖစ္ေစ စာပိုဒ္တစ္ပိုက္ထဲက စာသားေတြကို ျဖစ္ေစ စာလံုး အေသး အၾကီး ေျပာင္းလို႔ရပါတယ္၊ ဒီအတြက္ေတာ့ text-transform
ဆိုတဲ့ Property ကိုသံုးတယ္၊ Value ကေတာ့ ၊ uppercase, lowercase, capitalize ဆိုျပီးသံုးမ်ိဳးရွိပါတယ္၊ ေအာက္မွာ လက္ေတြ႔သံုးပံုကိုၾကည့္ပါ၊
p { text-transform : uppercase; } စာသားေတြအားလံုးကို စာလံုး အၾကီးေျပာင္းဖို႔ အတြက္ value မွာ uppercase ဆိုျပီးထည့္ထားတာ၊
h2 {text-transform : lowercase; } စာသားေတြအားလံုးကို စာလံုး အေသးေျပာင္းဖို႔ အတြက္ value မွာ lowercase ဆိုျပီးထည့္ထားတာ၊
b {text-transform : lowercase;} စာသားေတြအားလံုးကို စာလံုး အေသးေျပာင္းဖို႔ အတြက္ value မွာ lowercase ဆိုျပီးထည့္ထားတာ၊
#bla{text-transform:capitalize;} စာသားေတြအားလံုးကို ပံုႏွိပ္စာလံုးေျပာင္းဖို႔ အတြက္ value မွာ capitalize ဆိုျပီးထည့္ထားတာ၊
ေအာက္မွာလက္ေတြ႔ အသံုးျပဳပံုကိုေလ့လာပါ၊
HTML Doucment
<html>
<head>
<link href= "coder.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> what is going on with you guys? </h1>
<p> hey now brown cow in down town </p>
<h2>Daddy has gone to work, mummy is not at home </h2>
<b> what's going on with you guys? </b><br/>
<dive id="bla">Got a pocket full of cheese and garden full of trees</div>
</body>
</html>
CSS File
h1 { text-decoration : none;}
p { text-transform : uppercase; }
h2 {text-transform : lowercase; }
b {text-transform : lowercase;}
#bla{text-transform:capitalize;}
အထက္က ဖိုင္ႏွစ္ခုလံုးကို သိမ္းျပီး Run ၾကည့္ရင္ေတာ့ ေအာက္က လို ၀က္ဆိုက္စာမ်က္ႏွာကို ေတြ႔ရမယ္၊
HTML Document မွာေရးတံုးက စာသားေတြနဲ႔ မတူတဲ့ အေျဖထြက္တာကို ေသခ်ာ မွတ္သားေလ့လာပါ၊
Text Indentation
ေနာက္အသံုး၀င္တဲ့ Text formatting တစ္ခုကေတာ့ ပထမဆံုးစာေၾကာင္းကို ေဘးမ်ဥ္းဘယ္ေလာက္ျခားမလဲလို႔သတ္မွတ္တဲ့ text-indentation ဆိုတဲ့
Property ပါ၊ Propety ကိုေရးရင္ေတာ့ text-indent လို႔ပဲေရးပါတယ္၊ ဥပမာ {text-indent : 50px;} လို႔ေရးလုိက္ရင္
ပထမဆံုးစာေၾကာင္းက ေဘးမ်ဥ္းကေန 50 pixels ကြားသြားမယ္၊ ေအာက္က ဥပမာ ကိုၾကည့္ပါ၊
p { text-indent: 50px; }
အထက္မွာ HTML Doucment ထဲမွာရွိတဲ့ paragraphs ေတြအားလံုးရဲ့ ပထမစာေၾကာင္းကို ေလးမ်ဥ္းကေန 50 pxiels ကြာလို႔ အမိန္႔ေပးထားတယ္၊
အထက္က စာသားကို အေပၚက ဥပမာ မွာထည့္ျပီး Run ၾကည့္ပါ၊ ဒါဆိုရင္ေတာ့ ေအာက္က ပံုစံရွိတဲ့ ၀က္ဆိုက္စာမ်က္ႏွာကိုရမယ္၊
အထက္က ၀က္ဆိုက္စာမ်က္ႏွာမွာ ဒုတိယ စာေၾကာင္းက paragraph ပါ၊ သူ႔ကို CSS နဲ႔ ေဘးမ်ဥ္းကေန 50px ကြားလို႔ အမိန္႔ေပးထားလို႔ ေဘးမ်ဥ္းကေန
50 pxiels ကြာေနပါတယ္၊
Text direction
ပံုမွန္အားျဖင့္ သင္ေရးလိုက္တဲ့ စာေၾကာင္းက ဘယ္က ေနညာဘက္ကိုသြားေနမွာပါ၊ သူ႔ကိုေတာ့ ေရးစရာမလိုပါဘူး၊ သူက Default ပါ၊ ဒါေပသည့္
လိုအပ္လို႔ေရးရမယ္ဆိုရင္ျဖင့္ text-deirction ဆိုတဲ့ Property ကိုသံုးျပီးေရးႏိုင္ပါတယ္၊ Value မွာေတာ့ rtl နဲ႔ ltr ဆိုျပီးရွိပါတယ္၊ rtl က right to left
ညာဘက္ကေန ဘယ္ဘက္ကို စာေၾကာင္းကိုေရးသြားမယ္လို႔ေျပာျပီး၊ ltr ကေနာ့ left to right ဘယ္ဘက္က ေနညာဘက္ကို ေရးမယ္လို႔ေျပာတယ္၊ ltr
ကေတာ့ Default value ပါ၊ ေအာက္မွာနားလည္သြားေအာငၾကည့္ပါ၊
h2 {dierction: ltr; }
b {direction : rtl;}
ကို႔ပါသာ ေလ့လာၾကည့္ပါ၊ အသံုး မတြင္က်ယ္လို႔လက္ေတြ႔ မသင္ေတာ့ဘူး၊
Letter Spacing
CSS ကိုအသံုးျပီး စာလံုးေတြတစ္လံုးနဲ႔ တစ္လံုးေတြ တစ္လံုးနဲ႔ တစ္လံုးအၾကာားအကြားအေ၀းကိုခ်ိန္ညိွႏိုင္ပါတယ္၊ စာလံုးတစ္လံုးနဲ႔ တစ္လံုး အၾကား
အကြာအေ၀းကိုခ်ိန္ညွိဖို႔အတြက္ letter-spacing ဆိုတဲ့ Property ကိုအသံုးျပဳပါတယ္၊ ေအာက္က ဥပမာ ကိုၾကည့္ပါ၊
့
HTML Document
<html>
<head>
<title>what's up</title>
<link href= "baby.css"
rel= "stylesheet" type= "text/css">
</head>
<body>
<body>
<h1>This is heading 1</h1><h2>This is heading 2</h2>
</body>
</html>
CSS File
h1 {letter-spacing:5px;}
h2 {letter-spacing:-3px;}
အထက္က ဖိုင္ႏွစ္ခုလံုးကိုသိမ္းျပီး Run ၾကည့္လိုက္ရင္ေအာက္ကအတိုင္း သင့္၀က္ဆိုက္စာသမ်က္ႏွာမွာအေျဖရမယ္၊
အထက္ကဥပမာမွာ <h1> နဲ႔ေရးထားတဲ့စာလံုးေတြက စာလံုးတစ္လံုးနဲ႔ တစ္လံုး အၾကား 5px ကြားေနတာကိုေတြ႔ရမယ္၊ <h2> နဲ႔ ေရးထားတဲ့စာလံုးေတြက
တစ္ခုနဲ႔ အတင္းၾကီးကပ္ေနတာကိုေတြ႔ရမယ္၊ ဒါကေတာ့ Letter-spacing ကို -3px လို႔ထားလို႔ပါ၊ သင္ၾကိဳက္တဲ့ Spacing ကိုထားျပီးစမ္းသပ္ၾကည့္ပါ၊
စာေၾကာင္းတစ္ေၾကာင္းနဲ႔ တစ္ေၾကာင္း အကြားအေ၀းကိုလည္း CSS ရဲ့ line-height property ကိုအသံုးျပဳျပီးခ်ိန္ညွိႏိုင္ပါတယ္၊ ေအာက္မွာဥပမာ ၾကည့္ပါ၊
ံႊHTML Document
<html>
<head>
<title>what's up</title>
<link href= "baby.css" rel= "stylesheet" type= "text/css">
</head>
<body>
<body>
<p>
This is a paragraph with a standard line-height.<br />
This is a paragraph with a standard line-height.<br />
The default line height in most browsers is about 110% to 120%.<br />
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br />
This is a paragraph with a bigger line-height.<br />
This is a paragraph with a bigger line-height.<br />
This is a paragraph with a bigger line-height.<br />
</p>
</body>
</html>
CSS File
p.small {line-height:70%;}
p.big {line-height:200%;}
အထက္က ဖိုင္ႏွစ္ခုကို သိမ္းျပီး Run ၾကည့္လိုက္ရင္ေအာက္က ပံုစံရွိတဲ့ ၀က္ဆိုက္ကိုရရွိမွာပါ။
အထက္မွာျပထားတဲ့ဥပမာမွာ စာပိုဒ္သံုးပိုဒ္ပါပါတယ္၊ ဒုတိယနဲ႔ တတိယ စာပိုဒ္မွာ စာေၾကာင္း အကြာအေ၀း ႏွစ္မ်ိဳးကို
ခ်ိန္ညွိျပထားပါတယ္၊ ဒုတိယ စာပိုဒ္ကို line height 70% ထားလိုက္ပါတယ္၊ တတိယ စာပိုဒ္မွာေတာ့ Line height ကို 200% ထားလိုက္ပါတယ္၊ ဒါေၾကာင့္ ဒုတိယ စာပိုဒ္မွာ
စာေၾကာင္းေတြက တစ္ခုနဲ႔ တစ္ခု ကပ္ေနမွာပါ၊ တတိယ စာပိုး္ကေတာ့ Line height ကို 200% ထားလိုက္တဲ့အတြက္ စာေၾကာင္းတစ္ေၾကာင္းနဲ႔
တစ္ေၾကာင္း အေတာ္ေလးျခားေနမွာပါ၊ Line height ကိုမခ်ိန္ညွိပဲ ဒီအတိုင္းထားလဲရပါတယ္၊ ဒါဆိုရင္ေတာ့ Browser Default ျဖစ္တဲ့ 110% က ေန
120% အၾကားရွိတဲ့ စာေၾကာင္းေတြျဖစ္သြားမွာပါ၊ ပထမစာပိုဒ္က line-height မထည့္ထားတဲ့အတြက္ Browser default ရဲ့ Line height ျဖစ္ေနမွာပါ၊
ဆက္ေရးရန္က်န္ေသး၊
0 comments:
Post a Comment