www.phoelapyae.com 1
1 ရာမညဖိုးလျပည့္
CSS အေၾကာင္း တေစ့တ့တ့တေစာင္း္း္း
CSS ဆိုတာ Cascading Style Sheets ရဲ႕ အတိုေကာက္ပါ။
CSS အေၾကာင္းကို ေဆြးေႏြးမယ္ဆိုေတာ့ HTML ကုိနည္းနည္းပါးပါး နားလည္မွ ရပါမယ္။ HTML Tag ေတြကုိ
အနည္းအက်ဥ္း ေလ့လာေစလိုပါတယ္။ ဥပမာ <p>This is a paragraph</p> မွာ p ဆိုတာ paragraph ျဖစ္ပါတယ္။
အဲလိုမ်ိဳးေပါ့ ။ အနည္းအက်ဥ္းသိရင္ ပိုေကာင္းပါတယ္။
HTML ဆို <html> စၿပီး</html>နဲ႕ ဆံုးသလို CSS မွာလဲ <style>CSS</style>ဆိုၿပီးေရးပါတယ္။ ေနာက္တစ္ခု
မွတ္ထားရမွာကေတာ ႔ CSS Style code ဟာ head tag အတငြ ္းမွာပ ဲ ရိွရပါမယ။္ CSS စေရးမယ္ဆိုၿပီး
ဒီလိုေၾကာ္ျငာရပါတယ္။ </title> ၿပီးေတာ႔ </head> မဆံုးမီ ၾကားမွာေရးရမယ္။ဆိုလုိတာက </title> နဲ႕ </head>
ၾကားမွာ CSS style code ကိုေၾကာ္ျငာေပးရမွာပါ။ ဒီလိုေလးပါ ။
<head><title>My Test</title>
<style type=text/css>
<style>
</head>
CSS ကုိေရးမယ္ဆိုရင္ သူ႕ ရဲ႕ ေရးထံုးစည္းမ်ဥ္းကေတာ့
selector {property: value} ပါ။ အဲဒါကုိ ေရးမယ္ဆိုရင္
body {background-color: black}
ဒီေနရာမွာ
body -- > selector
property-- > backgroun-color
value -- > black
www.phoelapyae.com 2
2 ရာမညဖိုးလျပည့္
ျဖစ္ပါတယ္။ ေနာက္ပိုင္း အေခၚအေ၀ၚေတြ သံုးရင္ selector ၊ property ၊ value ေတြနဲ႕ သံုးမွာမို႕လို႕
ဘာကုိဆိုလိုတယ္သိေအာင္ မွတ္ထားဖို႕ လိုပါတယ္။
body {backgroun-color: black} အလုပ္လုပ္ပံုကေတာ့ body လို႕ ေရးထားတဲ့အတြက္ web pages တိုင္းရဲ႕ body
တိုင္းကို ေနာက္ခံအေရာင္ အမဲေရာင္အေနနဲ႕ သက္ေရာက္မွာ ျဖစ္ပါတယ္။
အစိမ္းေရာင္ထည့္ခ်င္တယ္ဆိုရင္ body {backgroun-color: green} ေပါ့။
တကယ္လို႕ value တန္ဖိုးဟာ စာလံုးတစ္လံုးထက္ပိုေနရင္ Double Quote အတြင္းထည့္ေရးပါတယ္။
P {font-family: “sans serif”}
ထို႕ နည္းအတူပဲ property မွာလဲ တစ္ခုထက္ပိုၿပီးထည့္ခ်င္ရင္ ( ; ) ေလး ထည့္ေရးရပါတယ္။
P {text-align:center; color: red}
ဒီေနရာမွာ p ဆုိတာက HTML Browser နားလည္တဲ ့pre defined fomatter tag လို႕ေခၚပါတယ္။ ဒါေၾကာင့္ p ဆိုရင္
paragraph ျဖစ္ၿပီး ၊ h1 ဆိုရင္ Header ျဖစ္ပါတယ္။ ဒီ့အတြက္ HTML Tag အခ်ိဳ႕ နားလည္ဖို႕ လိုပါတယ္။ ေစာေစာက
style ေတြ ရွင္းလင္းေအာင္ စုလုိက္မယ္ဆိုရင္
<style>
P
{
text-align: center;
color: red;
font-family: “sans serif”
}
</style>
www.phoelapyae.com 3
3 ရာမညဖိုးလျပည့္
Grouping
CSS မွာ selector ေတြကုိ style တူရာ အုပ္စုေလးေတြဖြဲ႕ နိုင္ပါတယ္။
h1,h2,h3,h4,h5,h6
{
color: red
}
h ဆိုတာ header ျဖစ္ၿပီး ဒီလိုေရးလုိက္ျခင္းအားျဖင့္ header အားလံုး အနီေရာင္
ေျပာင္းသြားမွာပါ။ကုတ္အမ်ားႀကီးေရးစရာ မလိုေတာ့ပဲ တူရာကိုစုစည္းလုိက္ျခင္းျဖင့္ တစ္ခါတည္းျဖင့္
အလုပ္ၿပီးေျမာက္ပါတယ္။
အခုသိၿပီးသား ကုတ္အနည္းငယ္နဲ႕ web page တစ္ခုဖန္တီးရေအာင္
<html>
<head><title>Example 1</title>
<style type="text/css">
body {background-color: yellow}
h1 {color: blue}
h2 {color: black}
h3 {color: red}
h4 {color: green}
P
{
text-align: center;
color: red;
www.phoelapyae.com 4
4 ရာမညဖိုးလျပည့္
font-family: Zawgyi-one
}
</style>
</head>
<body>
<h1>This header is 36 pt and color is blue</h1>
<h2>This header is black</h2>
<h3>This header is red</h3>
<h4>This header is green</h4>
<p>This paragraph is center of webpage and color is red and also font is
zaw gyi</p>
</body>
</html>
အထက္ပါကုတ္ကုိ notepad တြင္ save ၿပီး Save as type ကုိ All file ကိုေရြးၿပီး File name ကုိ example.html နဲ႕
ေပးလုိက္ပါ။ HTML ေရးထားေသာ page မ်ားကုိ .html နွင့္ .htm လို႕ ေပးမွသာ brower တြင္ ေပၚပါလိမ့္မည္။ ဒီလိုေလး
ရပါလိမ့္မယ္ ။
www.phoelapyae.com 5
5 ရာမညဖိုးလျပည့္
class Selector
class selector ကုိ web page တစ္ခုထဲမွာ style အမ်ိဳးမ်ိဳးသံုးခ်င္ရင္ ေရးပါတယ္။ ဥပမာ စာပိုဒ္ ၂ ပုဒ္ရွိရင္ ၁ ပုဒ္ကုိ
ဘယ္ဘက္ ၊ က်န္ ၁ ပုဒ္ကို အလယ္ထားခ်င္တာမ်ိဳးေပါ့။
p.right {text-align: right}
p.center {text-align: center}
ဒါဆိုရင္ style ကုိေၾကာ္ျငာယံုပဲရွိေသးတယ္။ ဘယ္စာပုဒ္ကုိ ဘယ္လက္၊ ဘယ္စာပုဒ္ကို အလယ္ဆိုတာ ေရးေပးရပါမယ္။
ဒါကို body မွာ ဒီလိုေခၚသံုးရပါတယ္။
<p class=”right”>
This paragraph will be right-aligned.
</p>
<p class=”center”>
This paragraph will be center-aligned.
</p>
ဒီေနရာမွာ ေျပာလုိတာက p.right {text-align: right} ဆိုတဲ့ေနရာမွာ p.right အစား p.yamanya {text-align: right}
ဆိုၿပီးေရးလုိ႕ ရပါတယ္ ။ ဒါဆိုေခၚသံုးရင္ေတာ့ ဒီလိုေလးမွရမွာေပါ့။
www.phoelapyae.com 6
6 ရာမညဖိုးလျပည့္
<p class=”yamanya”>
This paragraph will be right-aligned.
</p>
ဆိုလုိတာက class ကို ႀကိဳက္တဲ့နာမည္နဲ႕ assign လုပ္လို႕ ရတာကိုပါ။ ဒါေပမ ့ဲ Class name ရ့ဲအစကို
ကိန္းဂဏန္းေပးထားလို႔မရဘူး.. ေပးထားရင္ Mozila Firefox မွာ အလုပ္မလုပ္ပါဘူး။ဆက္ရေအာင္ ..
ဒီေနရာမွာ class selector ကုိ ထပ္တိုးေရးခ်င္ေသးတယ္ဆိုရင္ ေရးလို႕ ရပါေသးတယ္။
<p class=”center bold”>
This is a paragraph.
</p>
ေရးခဲ့တဲ့ class selector ထဲက selector ကိုခ်န္ၿပီး class သီးသန္႕ ပဲေရးၾကည့္ရေအာင္။ဒီလိုဆိုလိုတာပါ။
.center {text-align: center}
ဒါဆုိဘာထူးျခားသြားလဲ ?
Style မွာ အဲလို ေၾကာ္ျငာၿပီးသြားရင္ class=”center” ကုိေခၚသံုးတဲ့ အရာတိုင္း center ျဖစ္သြားေရာ။ေစာေစာကလို h1 ၊
h2 ၊ p စသည္တို႕ ကို center ထားခ်င္ရင္ တစ္ေၾကာင္းခ်င္းလိုက္ေရးရလိမ့္မယ္ ။ ဒါဆိုရင္ တစ္ေၾကာင္းတဲ့နဲ႕ ေရးခ်င္တဲ့
selector ကုိေခၚသံုးယံုပါပဲ။ ဒီလိုေလးပါ။
<h1 class=”center”>This heading will be center-align</h1>
<p class=”center”>This paragraph will also be center-aligned.</p>
www.phoelapyae.com 7
7 ရာမညဖိုးလျပည့္
Class selector နဲ႕ ပက္သက္ၿပီး web page တစ္ခုေရးၾကည့္ရေအာင္။
<html>
<head><title>Football</title>
<style type="text/css">
body {background-color: yellow}
p.left
{
text-align: left;
color: blue
}
p.yamanya
{
text-align: right;
color: red
}
.center
{
text-align: center;
color: green
www.phoelapyae.com 8
8 ရာမညဖိုးလျပည့္
}
</style>
</head>
<body>
<h1 class="center">Football Teams</h1>
<p class="center">Arsenal</p>
<p class="left">ManU</p>
<p class="yamanya">Chelsea</p>
</body>
</html>
အဲဒါကို result ထုတ္လုိုက္ရင္ ဒီလိုေလးပါ။
www.phoelapyae.com 9
9 ရာမညဖိုးလျပည့္
ဒီေနရာမွာ center ၂ ခုျဖစ္တဲ့ Football Teams နဲ႕ Arsenal တို႕ ကို .center {text-align: center}
တစ္ေၾကာင္းတည္းနဲ႕ ေၾကာ္ျငာနိုင္တာရယ္၊ class selector မွာ မိမိစိတ္ႀကိဳက္နာမည္ p.yamanya နဲ႕ ေရးထားတာကုိ
ျမင္ေစလိုပါတယ္။
id selector
ေစာေစာက သံုးခဲ့တဲ့ class selector ဆိုတာ HTML Tag ေတြကုိသာ apply လုပ္ပါတယ္။ ဒါေၾကာင့္လဲ selector ေရးရင္
(p, td, tr, h1, h2, …..) နဲ႕ ေရးရပါတယ္။ တကယ္လို႕ မိမိက မိမိစိတ္ႀကိဳက္နာမည္နဲ႕ assign လုပ္ခ်င္ရင္ id selector
ကုိသံုးပါတယ္။ id selecotr ကုိ define လုပ္ဖို႕ အတြက္ # ကုိထည့္ရပါတယ္။
#para
{
text-align: center;
color: blue
}
www.phoelapyae.com 10
10 ရာမညဖိုးလျပည့္
Tag အမည္ေတြျဖစ္တဲ့ (p, td, tr, h1, h2,…) စတာေတြကုိ အမည္မသံုးခ်င္လို႕ မိမိစိတ္ႀကိဳက္အမည္ကို id selector
သံုးၿပီးေရးထားတာပါ။ အဲလိုေၾကာ္ျငာၿပီးရင္ ေခၚသံုးရပါမယ္။
<p id=para>
This is paragraph.It will be centerd align and red color.
</p>
class selector လိုပဲ id selector လဲ အမည္နာမေတြကုိ ကိန္းဂဏန္းနဲ႕ စေပးလို႕ မရပါဘူး။
Comment
Comment ဆိုတာ မိမိေရးခဲ့တဲ့ကုတ္ဟာ ဘာအတြက္ေရးခဲ့တယ္ဆိုတာ မွတ္သားထားတာပါ။ေနာက္တစ္ခ်ိန္က်ရင္ မိမိက
ကုတ္ေတြျပန္ျပင္ရင္ မိမိေရးခဲ့တဲ့ comment ကိုၾကည့္ၿပီး ဒီကုတ္ဟာ ဘာအတြက္ေရးထားတယ္ဆိုတာ သိနုိင္ပါတယ္။
အဲလိုေရးထားတဲ့ comment က browser ေပၚမွာ ေပၚေနမွာမဟုတ္ပါဘူး။ ေရးၾကည့္ရေအာင္ ….
/* This is comment */
မိမိေရးခ်င္တဲ့စာသားကုိ /* နဲ႕ */ ၾကားမွာေရးရမွာပါ။
နမူနာၾကည့္ရေအာင္ ….
<html>
<head>
<title>My Love</title>
/* Styles are starting here */
<style>
/* This is codes for paragraph */
p
{
text-align: center;
color: white
www.phoelapyae.com 11
11 ရာမညဖိုးလျပည့္
}
</style>
</head>
<body bgcolor=black>
<p>I always remember u</p>
</body>
</html>
Browser မွာ comment ေရးထားတာ မေပၚတာကို ေတြ႕ ရပါမယ္။
Applying CSS
CSS style sheet နဲ႕ web pages ေတြကုိ format ခ်တဲ့ေနရာမွာ အၾကမ္းဖ်င္းအားျဖင့္ (၃)မ်ိဳး format ခ်လို႕ ရပါတယ္။
Inline , Internal , External ဆိုၿပီးေပ့ါ ။ Inline ဆိုတဲ့အတိုင္း HTML Tag တိုင္းမွာ CSS ကုိထည့္မွာ ၊ Internal ကေတာ့
ကြ်န္ေတာ္အေပၚမွာ ေရးခဲ့တဲ့ ကုတ္ေတြလို </title> နဲ႕ </head> ၾကားမွာေရးတာပါ၊ External ကေတာ့ style sheet
ေရးၿပီး web page တစ္ခုစီမွာ Link tag ေတြ ခ်ိတ္ၿပီး အဲဒီ style sheet ကုိေခၚသံုးမွာပါ။ဥပမာ wordpress
မွာသံုးထားတာလိုမ်ိဳးေပါ့။ style.css ကုိ ျပင္လိုက္တာနဲ႕ website တစ္ခုလံုးေျပာင္းလဲသြားနုိင္ပါတယ္ ။
အေသးစိတ္တစ္ခုခ်င္းေလ့လာရေအာင္ …..
In Line
In Line နဲ႕ ေရးမယ္ဆိုရင္ သက္ဆုိင္ရာ tag တစ္ခုထဲမွာပဲေရးပါတယ္။ဒီလိုပါ။
<p style=”color=blue; text-align: ceneter”>This is a paragraph</p>
ဒါဆိုရင္ သူ specify လုပ္ထားတဲ့ ဒီ tag တစ္ေၾကာင္းတည္းကိုသာ သက္ေရာက္မွာပါ။
အမ်ားအားျဖင့္ေတာ့ CSS ေရးေနမွေတာ့ ဒီလို inline ျဖစ္တဲ့ tag တစ္ေၾကာင္းအတြက္နဲ႕ သံုးက်တာ နည္းပါတယ္။
www.phoelapyae.com 12
12 ရာမညဖိုးလျပည့္
Internal
Embedded or Internal style ကေတာ့ စာမ်က္နွာတစ္ခုလံုးအတြက္ သံုးတာပါ ။ ဥပမာ blog လိုမ်ိဳးေပါ့။ အေပၚမွာ
ကြ်န္ေတာ္ေရးခဲ့တဲ့ example web page ေတြဟာ internal style နဲ႕ apply ေပးထားတာပါ။ Internal နဲ႕ ေရးၿပီးဆိုရင္
style sheet code ေတြက </title> နဲ႕ </head> ၾကားမွာ ေရးပါတယ္။ဒီလိုပါ။
<head><title>CSS Example</title>
<style type=”text/css”>
p {color: red; font-family: Zawgyi-one, Arial}
body {background-color: black}
</style>
</head>
External
External ကေတာ့ အေကာင္းဆံုးနည္းလမ္းပါ။ သူက ေရးၿပီးသား style sheet ကို link tag သံုးလွမ္းခ်ိတ္ၿပီး
ယူသံုးတဲ့နည္းပါ။ လွမ္းခ်ိတ္ဖို႕ အတြက္ အဲဒီ CSS file ကုိ <head> နဲ႕ </head> ၾကားမွာ Link tag
ကုိေၾကာ္ျငာေပးရမွာပါ ။ ဒီလိုေလးပါ ..
<head>
<link rel=”stylesheet” type=”text/css” href=”urfilename.css”/>
</head>
www.phoelapyae.com 13
13 ရာမညဖိုးလျပည့္
ေၾကာ္ျငာၿပီးရင္ ေခၚသံုးဖို႕ အတြက္ css ဖိုင္ကို ေရးပါမယ္။ ဥပမာ..
P
{
text-align: center;
color: white
}
A {color: blue}
အဲဒါကုိ notepad မွာ urfilename.css ဆိုတဲ့ *.css extension နဲ႕ save ရပါတယ္။ ဒါဆို urfilename.css ဆိုတဲ့ CSS
file တစ္ခုရပါမယ္။
ဒါဆိုရင္ browser က urfilename.css က ို သြားဖတ္ပါတယ္ ။ အဒဲ ီ urfilename.css ထဲကေရးထားတ့ဲအတိုင္း webpage
ေတြကုိ format ခ်ပါတယ္။ ပုိရွင္းသြားေအာင္ နမူနာ လုပ္ၾကည့္ရေအာင္ …
<html>
<head><title>Testion External Style</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
<body>
<h1>This is a header</h1>
<h2>This is also header with blue color</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
အဲဒါကို notedpad တြင္ example.html နဲ႕ save ပါ။
ဒါက styel sheet file(CSS) file ပါ။
www.phoelapyae.com 14
14 ရာမညဖိုးလျပည့္
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
ဒါကုိ mystyle.css ဆိုတဲ့ နာမည္နဲ႕ save ပါ။ ၿပီးရင္ example.html ဖိုင္နဲ႕ mystyle.css ဖိုင္တို႕ ကုိ ဖိုဒါတစ္ခုထဲ
ထည့္ၿပီး example.html ဖိုင္ကုိ ဖြင့္ၾကည့္ပါက ဒီလိုိေလးေတြ႕ ရပါမယ္။
ဒါဟာဆိုရင္ example.html ဖိုင္ကုိ mystyle.css ဖိုင္က format ခ်လိုက္တာပါ။ မိမိကိုယ္တိုင္ေရးၾကည့္ၿပီး လုပ္ၾကည့္ပါ ။
သိလာပါလိမ့္မယ္။
ေနာက္ထပ္ နမူနာတစ္ခုေလာက္ ေလ့က်င့္ရေအာင္..
www.phoelapyae.com 15
15 ရာမညဖိုးလျပည့္
<html>
<head><title>Example</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>This is header<h1>
<p>This is a paragraph and this is a <a href="http://phoepyae.co.cc"
target="_blank">Phoe La Pyae Website</a></p>
<body>
<html>
ဒါကုိ example.html ဖိုင္နာမည္နဲ႕ save လိုက္ပါ။
body
{
background-color: black;
color: white;
}
p
{
font-size: 11pt;
font-family: Zawgyi-one, Arial;
www.phoelapyae.com 16
16 ရာမညဖိုးလျပည့္
}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:green}
a:active {color:blue}
ဒါကုိ test.css ဖိုင္နာမည္နဲ႕ save လုိက္ပါ။ ၿပီးရင္ example.html ဖိုင္ကိုေခၚၾကည့္ပါ။ ဒီလိုေလးပါ။
ဒီေနရာမွာ a tag တစ္ခုပါလာပါတယ္။ မိမိရဲ႕ webpage မွာ link ထည့္မယ္ဆိုရင္ <a></a>tag ကို anchor
အျဖစ္တစ္ခုႏွင့္တစ္ခု ခ်ိတ္ဆက္အသုံးျပဳရန္အတြက္ အသုံးျပဳပါတယ္။လင့္ခ်ိတ္ခ်င္ရင္ <a href=” website
address”>Name</a> ဆိုတဲ့ ပံုစံနဲ႕ ေရးရတာပါ။ website address ဆိုတာ မိမိခ်ိတ္ခ်င္တဲ့ ဆုိက္ address ေပါ့။
ဒီေနရာမွာ <a href=”http://phoepyae.co.cc” target=”_blank”>Phoe La Pyae</a> ဆိုတဲ့ ေနရာမွာ
target=”_blank” ဆိုတာ new tag window အေနနဲ႕ အဲဒီဆိုက္ကုိ ေပၚေစမွာ ျဖစ္ပါတယ္။ test.css မွာေရးထာတဲ့ a
tag ကုိလဲ မႏွိပ္ခင္ ဘာအေရာင္၊ ႏွိပ္ရင္ ဘာအေရာင္ စသျဖင့္ ေလ့လာၾကည့ပါ။
CSS Division
www.phoelapyae.com 17
17 ရာမညဖိုးလျပည့္
အခု ကြ်န္ေတာ္တို႕ class and id selector ေတြအေၾကာင္း ေတာ္ေတာ္မ်ားမ်ား သိၿပီးျဖစ္ပါတယ္။ အခုဆက္လက္ၿပီး
အဲလို secelctor မ်ိဳးျဖစ္တဲ့ div and span ေတြကို နည္းနည္းေလ့လာၾကည့္ရေအာင္ …
Divisions
Division ကအမ်ားအားျဖင့္ html file ေတြကုိ define လုပ္ေလ့ရွိတယ္။ သူသည္လဲ class and id selector လိုပါပဲ ။
သံုးနည္းကုိၾကည့္လိုက္ရင္ ပုိရွင္းသြားမွာပါ။
<div id=”container”>
Site contents go here
</div>
အဲဒါကုိ CSS မွာက်ရင္ ဒီလိုေရးပါတယ္။
#container
{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #600;
background: #ffffff;
}
အဲလိုေလးပါ။ id selector လိုမ်ိဳးေပါ့ ။ အဲဒီထဲမွာ ပါတဲ့ ကုတ္အခ်ိဳ႕ ေတြကုိ သက္ဆိုင္ရာ ေခါင္းစဥ္ေရာက္မွ အေသးစိတ္
ရွင္းပါ့မယ္။
Span
www.phoelapyae.com 18
18 ရာမညဖိုးလျပည့္
Spans ဟာ division tag လုိပါပဲ ။ ဒါေပမဲ့ span က Inline နဲ႕ apply လုပ္တဲ့ေနရာမွာပဲ အသံုးမ်ားပါတယ္။
တစ္ေၾကာင္းတည္းဆိုရင္ အသံုးမ်ားတာေပါ့ ။
<span class=”italic”>This text is italic</span>
အဲဒါကုိ CSS မွာ ဒီလိုေရးရပါတယ္။
.italic {font-style: italic;}
CSS Background
Web page တစ္ခုရဲ႕ background ကုိ အေရာင္ သို႕ မဟုတ္ ပံုနဲ႕ ထည့္သြင္းျခင္းကုိ ဒီေနရာမွာေလ့က်င့္မွာပါ။
Web page ရဲ႕ background color ကုိ မထည့္ခင္ color ရဲ႕ ေရးတတ္ပံုေတြကုိ ေဆြးေႏြးပါ့မယ္။ color ကုိအေရာင္နဲ႕
ေဖာ္ျပျခင္း color: green; အေရာင္ကုတ္နဲ႕ ေဖာ္ျပျခင္း color: #ffffff; နဲ႕ အေျခခံအေရာင္ သံုးေရာင္စပ္ထားျခင္းျဖင္း
color: rgb(106,251,146); ဆိုၿပီးရွိပါတယ္။
ဒီေနရာမွာ color: rgb(106,251,146); မွာ rgb ဆိုတာက red, green, blue ကို ဆိုလိုျခင္းျဖစ္ပါတယ္။ (106,251,146)
ဆိုတာက အေရာင္သုံးေရာင္ေပါင္းစပ္ထားျခင္းပါ။ သူ႔ အေရာင္တစ္ခုျခင္းစီအတြက္ limit ကေတာ့ 0-255 ျဖစ္ပါတယ္။ 0
ကေတာ့ ၄င္းအေရာင္ရဲ႕ light အျဖစ္ဆုံးအဆင့္ပါ။ 255 ကေတာ့ dark အျဖစ္ဆုံးပါ။ ဥပမာ
အျပာေရာင္တစ္ေရာင္ပဲလိုခ်င္တယ္ဆိုရင္ color: rgb(0,0,255); လို႔ေရးလို႔ရပါတယ္။ ေနာက္တစ္ခုက အေရာင္ကုတ္ဖြဲ႕
စည္းမႈ ။ ာ။ အေရာင္ကုဒ္ေတြမွာဆိုရင္ # ေနာက္မွာ ဂဏန္း၆လုံးကို ေတြ႔ရပါလိမ့္မယ္။ အဲဒီဂဏန္း ၆ လုံးက
hexadeicmal code ေတြျဖစ္ျပီးေတာ့ ၂ လုံးတစ္တြဲယူရပါတယ္။ ဂဏန္း၂ လုံးက အေျခခံအေရာင္ ၁ ေရာင္ကို
ကိုယ္စားျပဳပါတယ္။ red, green, blue ျဖစ္တဲ့အတြက္ အေရာင္ကိုေဖာ္ျပတဲ့ ဂဏန္း ၆လုံးရွိျခင္းျဖစ္ပါတယ္။ သူ႔ format
ကေတာ့ # rrggbb ေပါ့ဗ်ာ။ အဲဒီမွာ သုံးတဲ့ အေရာင္ကုဒ္ရဲ႕ ရည္ညြန္းမႈကေတာ့ ...
FF သည္ full brightness
CC သည္ 80 % brightness
99 သည္ 60 % brightness
66 သည္ 40 % brightness
33 သည္ 20 % brightness
www.phoelapyae.com 19
19 ရာမညဖိုးလျပည့္
00 ကေတာ့ သူနဲ႔ဆိုင္တဲ့ အေရာင္မပါ၀င္ေႀကာင္းကို ေဖာ္ျပျခင္းျဖစ္ပါတယ္။
ဥပမာ..bright red သည္ #FF0000 ၊ dark blue သည္ #000033၊ medium-gray ကေတာ့ #999999 ျဖစ္ပါတယ္။
ဒါကေတာ့ သိရံုသက္သက္ပါပဲ ။ ထပ္ေျပာရင္ ရႈပ္သြားပါလိမ့္မယ္။ ဒီေတာ့ ကြ်န္ေတာ္တို႕ နမူနာ web page
တစ္ခုေရးၾကည့္လုိက္လုိက္ရင္ ပိုရွင္းမယ္ထင္ပါတယ္။ ေရးရေအာင္ ….
<html>
<head>
<title>this is the title of the web page</title>
<style type="text/css">
body {background-color: yellow;}
h1 {background-color: #00ff00;}
h2 {background-color: red;}
p {background-color: rgb(250,0,255);}
</style>
</head>
<body>
<h1>
This is a level 1 header
</h1>
<h2>
This is a level 2 header
</h2>
www.phoelapyae.com 20
20 ရာမညဖိုးလျပည့္
<p>
This is a paragraph
</p>
</body>
</html>
How to set an image as the background
ဒီတစ္ခါ မိမိရဲ႕ web page မွာ ေနာက္ခံအေရာင္ကုိအသံုးမျပဳပဲ ဓါတ္ပံုတစ္ခုခုကို အသံုးျပဳမဲ့နည္းလမ္းပါ ။
အဲလိုထည့္ခ်င္ရင္ ဒီလိုေလးေရး၇ပါတယ္။
body {background-image: url(‘image address’)}
image address ေနရာမွာ မိမိထည့္မဲ့ image ရဲ႕ link ကုိယူရပါမယ္။ နမူနာတစ္ခုေရးရေအာင္ …
မေရးခင္ ဒီပံုေလးကို အရင္ save ထားလိုက္ပါ။ ရွင္းျပတာ တသမတ္တည္းျဖစ္ေအာင္လို႕ ပါ။
DOWNLOAD PHOTO
http://yamanya.mlm.googlepages.com/yamanya.jpg
www.phoelapyae.com 21
21 ရာမညဖိုးလျပည့္
yamanya.jpg နဲ႕ save ထားလိုက္ပါ။ ကဲ .. စေရးၿပီး ..
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg')
}
</style>
</head>
<body>
</body>
</html>
အဲဒီကုတ္ကုိ html file အေနနဲ႕ save ၿပီး ေစာေစာက ပံု yamanya.jpg ပံုနဲ႕ ဖိုဒါတစ္ခုအတြင္းထားၿပီး html tile
ကုိဖြင့္လိုက္ပါ။ဒီလိုေလးပါ…
www.phoelapyae.com 22
22 ရာမညဖိုးလျပည့္
ဒီေနရာမွာ ဘာကုိသတိထားမိက်သလဲ ။ ရာမညဖိုးလျပည့္ဆိုတဲ့ ပံု ထပ္ခါထပ္ခါ repeat ျဖစ္ေနတာ ေတြ႕ ရပါမယ္။
ဒီေတာ့ body {background-image: url(‘yamanya.jpg’)} နဲ႕ body {background-image: url(‘yamanya.jpg’);
background-repeat: repeat} နဲ႕ တူပါတယ္။ ဒိေနရာမွာ repeat ပါလာပါၿပီး။တယ္။background-repeat:repeat
ဆိုတာကေတာ့
မိမိေနာက္ခံဓါတ္ပုံကိုဘယ္လိုပုံစံေဖာ္ျပမလဲဆိုတာကို သတ္မွတ္ျခင္းျဖစ္ပါတယ္။အဒဲ ီလိုေဖာ္ျပဖို႔အတြက္ backgroundrepeat:
attribute မွာသတ္မွတ္ခ်က္style ေလးခုရွိပါတယ္။ repeat, repeat-x,repeat-y , no-repeat တုိ႔ျဖစ္ပါတယ္။
repeat ကေတာ့ မိမိဓါတ္ပုံကို webpage မွာ tile ပုံစံျဖင့္အျပည့္ေဖာ္ျပေစရန္အတြက္ျဖစ္ပါတယ္။tile ပုံစံ ဆိုတာကေတာ့
မိမိရဲ႕ webpage တစ္ခုလုံးမွာ ေနာက္ခံဓါတ္ပုံကိုနဂုိမူလအတိုင္းတစ္ခုႏွင့္တစ္ခုဆက္စပ္ျပီး
အျပည့္ေပၚေစျခင္းျဖစ္ပါတယ္။ ဥပမာအေနနဲ႔ျပရရင္ computer desktop ရဲ႕ ေနာက္ခံပုံတင္တဲ့အခါမွာ user
ကိုေရြးခ်ယ္ခြင့္ သုံးမ်ိဳးေပးထားပါတယ္။tile, center, stretch ဆိုျပီးသုံးမ်ိဳးရွိတဲ့အနက္ tile
ကမိမိဓါတ္ပုံအရြယ္အစားေသးေနတဲ့အခါ တစ္ပုံနဲ႔တစ္ပုံဆက္စပ္ျပီး အျပည့္ေဖာ္ျပတာပါ။center ဆိုတာကေတာ့
မိမိဓါတ္ပုံကို အလယ္မွာနဂိုအရြယ္အစားအတိုင္း တစ္ပုံတည္းေဖာ္ျပတာျဖစ္ပါတယ္။stretch ကေတာ့ ဓါတ္ပုံရဲ႕
resolution ကို screen တစ္ျပင္လုံးအျပည့္ခ်ဲ႔ျပီးေဖာ္ျပတာပါ။ဒီေနရာမွာေတာ့ tile
ပုံစံေဖာ္ျပျခင္းပဲအသုံးျပဳမွာျဖစ္ပါတယ္။repeat-x ကေတာ့ ေနာက္ခံပုံကို
အလ်ားလိုက္တစ္၀က္ပဲေဖာ္ျပျခင္းျဖစ္ပါတယ္။အေပၚတစ္ျခမ္းပဲပါျပီး ေအာက္တစ္ျခမ္းကေတာ့
ပုံပါမွာမဟုတ္ပါဘူး။repeat-y ဆိုတာကေတာ့ ေနာက္ခံပုံက ဘယ္၊ညာ တစ္ျခမ္းပဲပါမွာျဖစ္ပါတယ္။ဒီေနရာမွာ x နဲ႔ y
www.phoelapyae.com 23
23 ရာမညဖိုးလျပည့္
ဆိုတာက computer screen ကို coordinate system အရ x ၀င္ရုိး y ၀င္ရုိး ခြဲျခားျပီး horizontal / vertical
ပုံစံနဲ႔ေဖာ္ျပတာျဖစ္ပါတယ္။
no-repeat ကို အသုံးျပဳရင္ေတာ့ မိမိရဲ႕ပုံဟာ ေနာက္ခံအေနနဲ႔ေပၚမွာမဟုတ္ပဲ webpage ရဲ႕ဘယ္ဘက္အေပၚေထာင့္မွာ
တစ္ပုံတည္း တစ္ႀကိမ္သာေပၚမွာျဖစ္ပါတယ္။
ကဲ .. နမူနာေရးၾကည့္တာက ပုိ၇ွင္းပါတယ္ .. ၾကည့္ရေအာင္ ။
How to repeat a background image
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
background-repeat: repeat
}
</style>
</head>
<body>
</body>
</html>
www.phoelapyae.com 24
24 ရာမညဖိုးလျပည့္
ဒါကေတာ့ အေပၚမွာ ေဆြးေႏြးၿပီးျဖစ္တဲ့အတိုင္း repeat က မိမိဓါတ္ပုံကို webpage မွာ tile
ပုံစံျဖင့္အျပည့္ေဖာ္ျပေစရန္အတြက္ျဖစ္ပါတယ္။
How to repeat a background image only horizontally
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
background-repeat: repeat-x
www.phoelapyae.com 25
25 ရာမညဖိုးလျပည့္
}
</style>
</head>
<body>
</body>
</html>
repeat-x ကေတာ့ ေနာက္ခံပုံကို အလ်ားလိုက္တစ္၀က္ပဲေဖာ္ျပျခင္းျဖစ္ပါတယ္။အေပၚတစ္ျခမ္းပဲပါျပီး
ေအာက္တစ္ျခမ္းကေတာ့ ပုံပါမွာမဟုတ္ပါဘူး။
www.phoelapyae.com 26
26 ရာမညဖိုးလျပည့္
How to repeat a background image only vertically
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
www.phoelapyae.com 27
27 ရာမညဖိုးလျပည့္
repeat-y ဆိုတာကေတာ့ ေနာက္ခံပုံက ဘယ္၊ညာ တစ္ျခမ္းပဲပါမွာျဖစ္ပါတယ္။ဒီေနရာမွာ x နဲ႔ y ဆိုတာက computer
screen ကို coordinate system အရ x ၀င္ရုိး y ၀င္ရုိး ခြဲျခားျပီး horizontal / vertical ပုံစံနဲ႔ေဖာ္ျပတာျဖစ္ပါတယ္။
How to display a background image only one time
<html>
<head>
<style type="text/css">
body
{
background-image: url('yamanya.jpg');
www.phoelapyae.com 28
28 ရာမညဖိုးလျပည့္
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>
www.phoelapyae.com 29
29 ရာမညဖိုးလျပည့္
no-repeat ကို အသုံးျပဳရင္ေတာ့ မိမိရဲ႕ပုံဟာ ေနာက္ခံအေနနဲ႔ေပၚမွာမဟုတ္ပဲ webpage ရဲ႕ဘယ္ဘက္အေပၚေထာင့္မွာ
တစ္ပုံတည္း တစ္ႀကိမ္သာေပၚမွာျဖစ္ပါတယ္။
အခုဆုိရင္ background နဲ႕ ပက္သက္ၿပီး background-color, background-image, background-repeat တို႕
ကုိေကာင္းေကာင္းသေဘာေပါက္ေလာက္ၿပီးထင္ပါတယ္။ ေနာက္ထပ္ background အေနနဲ႕ က်န္တာက backgroundattachement
နဲ႕ background-position တို႕ ပဲ ျဖစ္ပါတယ္။
How to position a background image
ေနာက္ခံဓါတ္ပံုကို ေနရာခ်ရမွာ ေအာက္ပါအတိုင္းေရးေလ့ရွိပါတယ္။
body
{
background-position: top left;
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;
x% y%
xpos ypos;
background-attachement: scroll;
fixed;
}
ဒီေနရာမွာ backgroun-position နဲ႕ ပက္သက္ၿပီး နမူနာ ကိုယ့္ဘာသာကိုယ္ေရးၾကည့္ပါ ။ ေရးျပေနရင္ စာမ်က္နွာ
ေဖာင္းပြသြားမွာပါ။ top left ဆို အေပၚဆံုးရဲ႕ ဘယ္ဘက္အစြန္ဆံုးေပါ့ ။ တစ္ခုပဲ ရွိတယ္ % နဲ႕ px ။ သူတို႕ကုိ
ဒီလိုေရးပါတယ္ ။
www.phoelapyae.com 30
30 ရာမညဖိုးလျပည့္
background-position: 30% 20%;
50px 100px;
အဲလိုေရးေလ့ရွိပါတယ္။ ဒီေနရာမွာ အတိုင္းအတာေတြကို center ကေနစယူတာၿပိးအရင္ အရင္ဆံုးက x ၀င္ရုိးျဖစ္ၿပီး
ေနာက္ဆံုးက y ၀င္ရုိးကိုျဖစ္ပါတယ္။ မိမိဘာသာနမူနာေရးၾကည့္ရင္ သေဘာေပါက္သြားပါလိမ့္မယ္။
CSS Text
အခုဆက္လက္ၿပီး Text အပိုင္းဆက္လက္ေလ့လာက်မယ္ …text အပိုင္းမွာ အေရာင္တို႕ ၊ စာလံုးတစ္လံုးနဲ႕ တစ္လံုး
အကြာအေ၀း စသျဖင့္ text နဲ႕ ဆိုင္တာေတြ အားလံုးကိုေဆြးေႏြးပါ့မယ္။ ရွင္းလင္းေအာင္ နမူေလးေတြနဲ႕ ျပမွ
မ်က္စိထဲျမင္မွာျဖစ္ပါတယ္။ တစ္ခုခ်င္းအေသးစိတ္ေလ့လာရေအာင္ …..
How to set the color of text
Web page ေတြမွာ စာသားေတြကုိ မိမိထည့္ခ်င္တဲ့ အေရာင္ထည့္ရေအာင္ …နမူနာၾကည့္တာ ပုိရွင္းပါတယ္..
<html>
<head><title>this is the title of the web page</title>
<style type="text/css">
h1 {color: #00ff00;}
h3 {color: #dda0dd;}
p {color: rgb(0,0,255);}
</style>
</head>
<body>
<h1>
This is a level 1 header
</h1>
www.phoelapyae.com 31
31 ရာမညဖိုးလျပည့္
<h3>
This is a level 3 header
</h3>
<p>
This is a paragraph
</p>
</body>
</html>
ဒီေနရာမွာ color တန္ဖိုးေတြျဖစ္တဲ့
color: green;
color: #ffffff;
color: rgb(0,0,255);
တို႕ ကုိ ကြ်န္ေတာ္ရွင္းျပၿပီးသားပါ ။ decimal ျဖစ္တဲ့ color: #ffffff မ်ိဳးကို ေအာက္ပါဆိုက္မွာ ကုတ္ေတြကုိ
ရွာနိုင္ပါတယ္။
Text Background Color
Webpage ေတြရဲ႕ စာသားအခ်ိဳ႕ ကုိ ကြ်န္ေတာ္တို႕ High Light အေနနဲ႕ လုပ္ခ်င္ရင္ ဒီလိုလုပ္လို႕ ရပါတယ္…
www.phoelapyae.com 32
32 ရာမညဖိုးလျပည့္
နမူနာၾကည့္လုိက္ပါ။
<html>
<head>
<style type="text/css">
body {background-color: black; color: red;}
p {text-align: center}
span.highlight
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span class="highlight">I Will Love You Forever</span><br><br>
I love you so deeply,<br>
I love you so much,<br>
I love the sound of your voice<br>
And the way that we touch.<br>
I love your warm smile<br>
And your kind, thoughtful way,<br>
www.phoelapyae.com 33
33 ရာမညဖိုးလျပည့္
The joy that you bring<br>
To my life every day.<br>
I love you today<br>
As I have from the start,<br>
<span class="highlight">And I'll love you forever<br>
With all of my heart.</span>
</p>
</body>
</html>
ဒီေနရာမွာ span.highlight ဆိုတဲ့ span class ကုိသံုးထားတာေတြ႕ ရပါမယ္။ အဲဒီ span ကုိလဲ အရင္ပို႕ စ္ေတြမွာ
ရွင္းျပၿပီးသားျဖစ္လို႕ ထပ္မရွင္းေတာ့ပါဘူး။ နားလည္မယ္လို႕ ထင္ပါတယ္။
www.phoelapyae.com 34
34 ရာမညဖိုးလျပည့္
Specify the space between characters
စာလံုးအစိပ္အက်ဲကုိ ဆက္ေလ့လာရေအာင္ ….. ဒီလိုေရးပါတယ္။
<style type=”text/css”>
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
ဒီေနရာမွာ letter-spacing ရဲ႕ တန္ဖိုးကုိ px , cm တို႕ နဲ႕ ျပတာကုိေတြ႕ ရပါမယ္။ အဲဒီတန္ဖိုးေတြ သတ္မွတ္ခ်က္ကုိ
ေနာက္ပုိင္းေဆြးေႏြးမဲ့ font အပိုင္းမွာ ေဆြးေႏြးေပးပါ့မယ္။ကဲ .. နမူနာတစ္ခုေရးၾကည့္ရေအာင္ ….
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>
</html>
www.phoelapyae.com 35
35 ရာမညဖိုးလျပည့္
Specify the space between lines
စာလံုးအစိပ္အက်ဲၿပီးေတာ့ ဒီတစ္ခါ စာေၾကာင္းအစိပ္အက်ဲကုိ ေဆြးေႏြးပါ့မယ္ …သူ႕ကုိေရးေတာ့ ဒီလိုေလးပါ …
<style type=”text/css>
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
ဘယ္လိုသက္ေရာက္မႈ ရွိသလဲဆိုတာ ေအာက္မွာ စာပုဒ္သံုးပုဒ္နဲ႕ ရွင္းျပပါ့မယ္ …. ၾကည့္ရေအာင္ ..
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
www.phoelapyae.com 36
36 ရာမညဖိုးလျပည့္
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
www.phoelapyae.com 37
37 ရာမညဖိုးလျပည့္
ေရးထားတာကို ၾကည့္ရင္ ရွင္းပါတယ္ ။ တန္ဖိုးဘယ္ေလာက္သတ္မွတ္ရင္ ဘယ္ေလာက္ ကြာျခားသလဲဆိုတာ ….
Text Align
ဒါကေတာ့ ထပ္ခါထပ္ခါေရးၿပီးသားဆိုေတာ့ အထူးတလည္ရွင္းျပစရာေတာင္မလုိပါဘူး .. နမူနာေရးၾကည့္မယ္..
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
www.phoelapyae.com 38
38 ရာမညဖိုးလျပည့္
<h3>This is header 3</h3>
</body>
</html>
Decorate the text
Decorate ဆိုတာ စာသားေတြကုိ မ်ဥ္းသားခ်င္တာမ်ိဳး .. လင့္ေတြကို ေအာက္မွာ မ်ဥ္းေၾကာင္းမထည့္ခ်င္တာမ်ိဳး..
မွိတ္တုတ္မွိတ္တုတ္ေပၚတာမ်ိဳး လုပ္ေဆာင္နိုင္ပါတယ္ …ဘယ္လိုေရးနုိင္သလဲ ဆိုတာ ၾကည့္ရေအာင္ …
<style type=”text/css”>
h1 {text-decoration: underline}
</style>
အဲလိုမ်ိဳး text-decoration နဲ႕ ေရးပါတယ္ … သူရဲ႕ တန္ဖိုးအားလံုးကေတာ့ ….
www.phoelapyae.com 39
39 ရာမညဖိုးလျပည့္
text-decoration: overline;
text-decoration: underline;
text-decoration: line-through;
text-decoration: blink;
text-decoration: none;
ဒါဟာ text-decoration နဲ႕ ေရးလုိ႕ ရတဲ့တန္ဖိုး အကုန္ပါပဲ ။ ဒီေနရာမွာ overline ဟာ စာသားေပၚမွာ
မ်ဥ္းသားတာျဖစ္ၿပီး underline က်ေတာ့ စာသားေအာက္က မ်ဥ္းသားတာပါ။ line-through ကေတာ့ စာသားကုိ မ်ဥ္းနဲ႕
ျဖတ္ထားတာပါ။ blink ကေတာ့ စာသားကုိ မွိတ္တုတ္မွိတ္တုတ္ေဖာ္ျပေပးပါတယ္ … none ကေတာ့ ဘာ effect မွမပါ
စာသားသက္သက္ပါ … သာမာန္ text ရဲ႕ default ကေတာ့ none ပါ။ ဒီေတာ့ မ်က္စိထင္ျမင္သြားေအာင္ ေအာက္က
ဥပမာေရးထားတာေလးကုိ ၾကည့္ၾကည့္လိုက္ပါ။
<html>
<head>
<style type="text/css">
h1 {text-decoration: underline}
h2 {text-decoration: overline}
h3 {text-decoration: line-through}
a {text-decoration: blink}
p {text-decoration: none; font-family: Zawgyi-one}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
www.phoelapyae.com 40
40 ရာမညဖိုးလျပည့္
<h3>This is header 3</h3>
<p><a
href="http://www.phoepyae.co.cc">ရာမညဖိုးလျပည့္ဘေလာ့မွ…</a><br><br>
လႈိုက္လွဲစြာ ၾကိဳဆိုပါ၏ ...</p>
</body>
</html>
ရာမညဖိုးလျပည့္ဘေလာ့မွ .. ဆိုတဲ့ စာသားက မွိတ္တုတ္မွိတ္တုတ္ျဖစ္ေနမွာပါ … ဒီေနရာမွာ ဓါတ္ပံုျဖစ္လို႕
ရုပ္ေသႀကီးျဖစ္ေနတာပါ ။
www.phoelapyae.com 41
41 ရာမညဖိုးလျပည့္
Indent Text
စာပုဒ္ေရးလို႕ ရွိရင္ ပထမစာေၾကာင္းကုိ မာဂ်င္ကေန ေနရာအနည္းငယ္ခ်န္ၿပီးေရးေလ့ရွိပါတယ္ .. ဒါမ်ိဳးဆိုရင္ indent
style နဲ႕ ေရးလို႕ ရပါတယ္ .. သူ႕ ရဲ႕ ေရးတဲ့ပံုစံေလးကေတာ့ ….
<style>
P {text-indent: 2cm}
</style>
သူ႕ ရဲ႕ properties ေတြက
text-indent: length;
%;
တို႕နဲ႕ ေဖာ္ျပေလ့ရွိပါတယ္ …..ဒီေနရာမွာ px , em , % တို႕ နဲ႕ ေဖာ္ျပနိုင္ပါတယ္ ….. သူတို႕ ရဲ႕ အတိုင္းအတာေတြကုိ 1
px မွာ em ဘယ္ေလာက္၊ % ဘယ္ေလာက္ ဆိုတာခန္႕ မွန္းလို႕ ရေအာင္ ေအာက္မွာ ေဖာ္ျပလုိက္ပါတယ္ .. ဒီေနရာမွာ
em -- > the ‘font-size’ of the relevant font
ex -- >the ‘x-height’ of the relevant font
px -- >pixels, relative to the viewing device
ျဖစ္ပါတယ္….. သူတို႕ ရဲ႕ အဓိပၸါယ္ဖြင့္ဆိုခ်က္ေတြကုိ ေအာက္ကလင့္မွာ အေသးစိတ္ေလ့လာနုိင္ပါတယ္ …
http://www.bigbaer.com/css_tutorials/css_font_size.htm
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
http://www.explainth.at/en/css/units.shtml
www.phoelapyae.com 42
42 ရာမညဖိုးလျပည့္
ဒါကေတာ့ em ,px , % . ex တို႕ ရဲ႕ နွိုဳင္းယွဥ္ခ်က္ေတြပါ …
www.phoelapyae.com 43
43 ရာမညဖိုးလျပည့္
ပုိရွင္းေအာင္ နမူနာတစ္ခုၾကည့္လုိက္ပါ …
<html>
<head>
<style type="text/css">
body {background-color: black; color: white;}
p {text-indent: 1cm; font-family: Zawgyi-one;}
</style>
</head>
<body>
<p>
ကြ်န္ေတာ္ကေတာ့ ရာမညဖိုးလျပည့္ပါ ။ ရာမညဆိုေတာ့ မြန္ကလား ? ဟုတ္ပါတယ္ ။ ကြ်န္ေတာ္ ေမာ္လၿမိဳင္ဇာတိပါ
။ကြ်န္ေတာ္ကေတာ့ 2005 မွာ BE ( Electronic ) နဲ႕ ေက်ာင္းၿပီးပါတယ္ ။ ေက်ာင္းၿပီးကတည္းက အီလက္ထရြန္းနဲ႕
အလွမ္းေ၀းေနတာပါ ။ ဟိုစပ္စပ္ သည္စပ္စပ္ အားႀကီး လုပ္တယ္ ။ တစ္ခုမွ ေကာင္းေကာင္းကန္းကန္း မသိဘူး ။
ေမြးရာပါ အားနည္းခ်က္တစ္ခုကေတာ့ ရုပ္ေခ်ာ၊ သေဘာေကာင္း ပါ။
</p>
</body>
</html>
www.phoelapyae.com 44
44 ရာမညဖိုးလျပည့္
Control the letters in a text
ဒါကေတာ့ စာလံုးေတြကုိ Uppercase , Lowercase , စာလံုးအႀကီး ေျပာင္းတာေတြလုပ္ရင္ text-transform ဆိုတဲ့ style
tag ကိုအသံုျပဳပါတယ္… ေရးပံုကေတာ့ ..
<style>
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
နမူနာကိုေတာ့ ေရးမျပေတာ့ပါဘူး … uppercase ဆို စာလံုးအႀကီးေပါ့ .. class selector ကရွင္းျပၿပီးသားပါ .. ဒါေၾကာင့္
p.uppercase ဆိုတာလဲ သေဘာေပါက္မယ္ထင္ပါတယ္ ....
www.phoelapyae.com 45
45 ရာမညဖိုးလျပည့္
Set the text direction of an element
ဒါကေတာ့ စာသားေတြကုိ ဘယ္ဘက္ကေနပဲစေရးခ်င္တာမ်ိဳး၊ ဒါမွမဟုတ္ ညာဘက္ကေနပဲ စေရးခ်င္တဲ့ေနရာမ်ိဳးမွာ
အသံုးျပဳပါတယ္…ေရးနည္းထံုးစံကေတာ့
<style>
div.one {direction: rtl}
div.two {direction: ltr}
</style>
အဲလိုပါ …. ဒီေနရာမွာ div class ကုိရွင္းျပစရာမလိုေတာ့ဘူးလို႕ ထင္ပါတယ္ .. မိမိကိုယ္တိုင္သာေရးၾကည့္လိုက္ပါ …
Word-spacing Property
ဒါကေတာ့ စာလံုးတစ္လံုးေနရာျခားခ်င္ရင္ အသံုးျပဳတာပါ …. ေရးတာကေတာ့ ဒီလိုေလးပါ ..
<html>
<head>
<style type="text/css">
p
{
word-spacing: 30px
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
www.phoelapyae.com 46
46 ရာမညဖိုးလျပည့္
</p>
</body>
</html>
ဒါဟာဆိုရင္ စာပိုဒ္မွာရွိတဲ့ စာလံုးတစ္လံုးန႕ဲ တစ္လံုးကုိ 30px ျခားေပးမွာျဖစ္ပါတယ္ .. px ဆိုတာဘာဆိုလိုတာဆိုတာ
ကြ်န္ေတာ္အေပၚမွာ ရွင္းျပၿပီးသားပါ ….
White-space Property in Text
နမူနာတစ္ခု ၾကည့္လုိက္ပါ .. ျပန္ေျပာျပဖို႕ ေတာ္ေတာ္ခက္လိမ့္မယ္ ျဖစ္ေနလို႕ ပါ …
<html>
<head><title>white-space Demonstration</title>
<style type="text/css">
p.normal
{
white-space:normal;
}
p.pre
{
white-space:pre;
}
p.nowrap
{
www.phoelapyae.com 47
47 ရာမညဖိုးလျပည့္
white-space:nowrap;
}
</style>
</head>
<body>
<h1><p>white-space demonstration</p></h1>
<p class="normal">This is the normal value for the white-space property. This is
the normal value for the white-space property. This is the normal value for the
white-space property. This is the normal value for the white-space
property.</p><br/>
<p class="pre">This is the pre value for the white-space
property.</p><br/>
<p class="nowrap">This is the nowrap value for the white-space property. This
is the nowrap value for the white-space property. This is the nowrap value for
the white-space property. This is the nowrap value for the white-space
property.</p>
www.phoelapyae.com 48
48 ရာမညဖိုးလျပည့္
</body>
</html>
ဒီေနရာမွာ
p.normal {white-space: normal} ဆိုတာက စာသားေတြကုိ အဆံုးထိေရာက္ရင္ ေအာက္တစ္ေၾကာင္းကူးသြားတာပါ ။
wrap ဆိုတဲ့ အတုိင္း စာသားေတြကို ေဘာင္အတြင္းမွာထည့္သြင္းေဖာ္ျပတာပါ ..… သူကေတာ့ white-space တန္ဖိုးရဲ႕
default တန္ဖိုးပါပဲ … notepad မွာပါတဲ့ Word Wrap လိုေပါ့ …
p.nowrap {white-space: nowrap} ကေတာ့ nowrap ဆိုတဲ့အတုိင္း ေနာက္တစ္ေၾကာင္းမဆင္းမခ်င္း စာသားေတြက
ေဘာင္ေက်ာ္ၿပီးဆက္သြားေနမွာပဲ …. ေနာက္တစ္ေၾကာင္းဆင္းမွ <br> tag သံုးမွသာ ဆင္းမွာပါ …
p.pre {white-space: pre} ကေတာ့ HTML tag မွာပါတဲ့ <pre> နဲ႕ တူပါတယ္ .. သူက စာတစ္ေၾကာင္းနဲ႕
တစ္ေၾကာင္းကုိ ျခားေပးတာပါ …
CSS Font
အခုဆိုရင္ ကြ်န္ေတာ္ေဆြးေႏြးခဲ့တာဟာ
CSS ေရးထံုးေရးနည္း ၊
www.phoelapyae.com 49
49 ရာမညဖိုးလျပည့္
CSS ကုိ webpage မွာ apply လုပ္နည္း၊
ေနာက္ခံ အေရာင္၊ ပံုထည့္ျခင္း၊
စာသားေရးျခင္း အမ်ိဳးမ်ိဳး တို႕ ကို ေဆြးေႏြးၿပီး ျဖစ္ပါတယ္ …
အခုဆက္လက္ၿပီး Font အပိုင္းကို ဆက္လက္ေဆြးေႏြးပ့ါမယ္ ….
CSS Font မွာ စာလံုးဆိုက္ ၊ အေရာင္ ၊ စတိုင္ စသျဖင့္ မ်ားစြာေျပာင္းလဲနိုင္ပါတယ္ … သူ႕ ရဲ႕ property ေတြကေတာ့
font-style
font-family
font-size
font-size-adjust
font-stretch
font-variant
font-weight တို႕ ျဖစ္က်ပါတယ္ …
Font Color
ပထမဦးဆံုး ဖြန္႕ ကာလာကုိ အရင္ဆံုးလုပ္ၾကည့္ရေအာင္ ..
h4 {color: red}
h5 {color: #9000A1}
h6 {color: rgb(0,220,98)}
www.phoelapyae.com 50
50 ရာမညဖိုးလျပည့္
ဒါကေတာ့ အေထြအထူး ရွင္းျပစရာမလုိဘူးထင္ပါတယ္ …. အေရာင္ထည့္တာက ရွင္းျပၿပီးသားပါ ..
CSS font family
Web page ေတြကုိ မိမိစိတ္ႀကိဳက္ font ေတြနဲ႕ သတ္မွတ္ခ်င္ရင္ သံုးနုိင္ပါတယ္ …ေရးသားပံုကေတာ့ ..
font-family: Arial;
တကယ္လို႕ ဖြန္႕ တစ္မ်ိဳးထက္ပိုလာရင္ ေကာ္မာ ခံေရးပါတယ္ ..
font-family: Zawgyi-one, Arial, Pussycat;
ေနာက္တစ္ခုက ဖြန္႕ နာမည္က စာလံုး တစ္လံုးထက္ပုိရင္ရင္ အဖြင့္အပိတ္ နဲ႕ ေရးပါတယ္..
font-family: Zawgyi-one, Arial, “ludida console”,sans-serif;
ps: font-family တြင္ အရင္ဆံုးလာေသာဖြန္႕ မွစ၍ ဖြန္႕ အားလံုးကုိ format ခ်ပါသည္ …
အေပၚကေရးထားေသာ style တြင္ Zawgyi-one ကိုအရင္ဆံုး format ခ်ပါတယ္ .. မရွိမွ ေနာက္ဒုတိယျဖစ္တဲ့ Arial ကုိ
format ခ်ပါတယ္…
<style>
p
{
font-family: Zawgyi-one, Arial;
color: red;
}
</style>
ဒါဟာဆိုရင္ စာပုဒ္တစ္ခုလံုးက ဖြန္႕ ေဇာ္ဂ်ီျဖစ္ၿပီး စာသားအေရာင္က အနီေရာင္ အျဖစ္ format ခ်ေပးမွာ ျဖစ္ပါတယ္ ….
Font-size
စာလံုးဆိုက္သတ္မွတ္ခ်င္ရင္သံုးတာပါ ….. property ေတြကေတာ့ေအာက္ပါအတိုင္းပါ ..
www.phoelapyae.com 51
51 ရာမညဖိုးလျပည့္
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
ေရးသားပံုကေတာ့ …
<style>
font-size: xx-small;
</style>
စသျဖင့္ အဲလုိမ်ိဳး ေရးသားပါတယ္ … သူရဲ႕ ဖြန္႕ တန္ဖိုးသတ္မွတ္ခ်က္ေတြကေတာ့ ေအာက္ကလင့္မွာ
ဖတ္ၾကည့္စမ္းသပ္နုိင္ပါတယ္ …
http://htmlhelp.com/reference/css/font/font-size.html
http://www.fonttester.com/
xx-small ဆိုရင္ ဘယ္လိုဆိုက္၊ medium ဆိုရင္ ဘယ္လိုဆိုက္ စသျဖင့္ ေလ့လာၾကည္ပါ ….
http://www.w3.org/TR/REC-CSS2/fonts.html#propdef-font-size ဒါကေတာ့ ဖြန္႕ ဆိုက္သတ္မွတ္ခ်က္ပါ …
Font Size Adjust
တကယ္လို႕ မိမိစိတ္ႀကိဳက ္ ဖြန္႕ ဆိုက္ကို ထည့္ခ်င္တယ္ဆိုရင ္ number ေတြန႕ဲ ေရးလို႕ ရပါတယ ္ …
<style>
www.phoelapyae.com 52
52 ရာမညဖိုးလျပည့္
font-size-adjust: 0.50;
</style>
မိမိစိတ္ႀကိဳက္ ဖြန္႕ Length သတ္မွတ္ခ်င္းကုိလဲ ရွင္းျပၿပီးသားပါ … em, ex, px တို႕ နဲ႕ ေရးနုိင္ပါတယ္ ..
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
ျပန္ေလ့လာၾကည့္ပါ …
Font style
Font style ကေတာ့ သံုးမ်ိဳးရွိပါတယ္ ….. normal , italic , oblique ဆိုၿပီး .. ေရးသားပံုကေတာ့ ..
<style type="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
Output ကုိထုတ္ၾကည့္ပါက ဘယ္လို result ထြက္လဲဆိုတာ ၾကည့္ၿပီး သိနုိင္ပါတယ္ ... က်န္တာကိုေတာ့
ထပ္အေသးစိတ္မေဆြးေႏြးေတာ့ပါဘူး ... Font အပုိင္းကို ဒီေလာက္ပဲေဆြးေႏြးပါ့မယ္ .. လြယ္ပါတယ္ ...
