Old 28-08-2008, 04:35 AM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Specify the space between characters

စာလံုးအစိပ္အက်ဲကုိ ဆက္ေလ့လာရေအာင္ ….. ဒီလိုေရးပါတယ္။

Code:
<style type=”text/css”>
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
ဒီေနရာမွာ letter-spacing ရဲ႕ တန္ဖိုးကုိ px , cm တို႕ နဲ႕ ျပတာကုိေတြ႕ ရပါမယ္။ အဲဒီတန္ဖိုးေတြ သတ္မွတ္ခ်က္ကုိ ေနာက္ပုိင္းေဆြးေႏြးမဲ့ font အပိုင္းမွာ ေဆြးေႏြးေပးပါ့မယ္။ကဲ .. နမူနာတစ္ခုေရးၾကည့္ရေအာင္ ….

Code:
<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>
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 3 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 28-08-2008, 04:37 AM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Specify the space between lines

စာလံုးအစိပ္အက်ဲၿပီးေတာ့ ဒီတစ္ခါ စာေၾကာင္းအစိပ္အက်ဲကုိ ေဆြးေႏြးပါ့မယ္ …သူ႕ကုိေရးေတာ့ ဒီလိုေလးပါ …

Code:
<style type=”text/css>
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
ဘယ္လိုသက္ေရာက္မႈ ရွိသလဲဆိုတာ ေအာက္မွာ စာပုဒ္သံုးပုဒ္နဲ႕ ရွင္းျပပါ့မယ္ …. ၾကည့္ရေအာင္ ..

Code:
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>

<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>


ေရးထားတာကို ၾကည့္ရင္ ရွင္းပါတယ္ ။ တန္ဖိုးဘယ္ေလာက္သတ္မွတ္ရင္ ဘယ္ေလာက္ ကြာျခားသလဲဆိုတာ ….
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 3 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 28-08-2008, 11:19 PM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Text Align

ဒါကေတာ့ ထပ္ခါထပ္ခါေရးၿပီးသားဆိုေတာ့ အထူးတလည္ရွင္းျပစရာေတာင္မလုိပါဘူး .. နမူနာေရးၾကည့္မယ္..

Code:
<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>
<h3>This is header 3</h3>
</body>

</html>
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 3 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 29-08-2008, 03:30 PM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Decorate the text

Decorate ဆိုတာ စာသားေတြကုိ မ်ဥ္းသားခ်င္တာမ်ိဳး .. လင့္ေတြကို ေအာက္မွာ မ်ဥ္းေၾကာင္းမထည့္ခ်င္တာမ်ိဳး.. မွိတ္တုတ္မွိတ္တုတ္ေပၚတာမ်ိဳး လုပ္ေဆာင္နိုင္ပါတယ္ …ဘယ္လိုေရးနုိင္သလဲ ဆိုတာ ၾကည့္ရေအာင္ …

Code:
<style type=”text/css”>
h1 {text-decoration: underline}
</style>
အဲလိုမ်ိဳး text-decoration နဲ႕ ေရးပါတယ္ … သူရဲ႕ တန္ဖိုးအားလံုးကေတာ့ ….

Code:
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 ပါ။ ဒီေတာ့ မ်က္စိထင္ျမင္သြားေအာင္ ေအာက္က ဥပမာေရးထားတာေလးကုိ ၾကည့္ၾကည့္လိုက္ပါ။

Code:
<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>
<h3>This is header 3</h3>
<p><a  
href="http://www.phoepyae.co.cc">ရာမညဖိုးလျပည့္ဘေလာ့မွ…</a><br><br> 
လႈိုက္လွဲစြာ ၾကိဳဆိုပါ၏ ...</p>
</body>

</html>


ရာမညဖိုးလျပည့္ဘေလာ့မွ .. ဆိုတဲ့ စာသားက မွိတ္တုတ္မွိတ္တုတ္ျဖစ္ေနမွာပါ … ဒီေနရာမွာ ဓါတ္ပံုျဖစ္လို႕ ရုပ္ေသႀကီးျဖစ္ေနတာပါ ။
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 3 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 29-08-2008, 04:49 PM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Indent Text

စာပုဒ္ေရးလို႕ ရွိရင္ ပထမစာေၾကာင္းကုိ မာဂ်င္ကေန ေနရာအနည္းငယ္ခ်န္ၿပီးေရးေလ့ရွိပါတယ္ .. ဒါမ်ိဳးဆိုရင္ indent style နဲ႕ ေရးလို႕ ရပါတယ္ .. သူ႕ ရဲ႕ ေရးတဲ့ပံုစံေလးကေတာ့ ….

Code:
<style>
P {text-indent: 2cm}
</style>
သူ႕ ရဲ႕ properties ေတြက

Code:
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

ဒါကေတာ့ em ,px , % . ex တို႕ ရဲ႕ နွိုဳင္းယွဥ္ခ်က္ေတြပါ …



ပုိရွင္းေအာင္ နမူနာတစ္ခုၾကည့္လုိက္ပါ …

Code:
<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 ) နဲ႕ ေက်ာင္းၿပီးပါတယ္ ။ Electronic နဲ႕  
ပက္သက္ၿပီးလား ? ဘာမွလာမေမးပါနဲ႕ ။ ဘာမွမသိပါဘူး။
ေက်ာင္းၿပီးကတည္းက အီလက္ထရြန္းနဲ႕ အလွမ္းေ၀းေနတာပါ ။ ဟိုစပ္စပ္ သည္စပ္စပ္  
အားႀကီး လုပ္တယ္ ။ တစ္ခုမွ ေကာင္းေကာင္းကန္းကန္း မသိဘူး ။ ေမြးရာပါ  
အားနည္းခ်က္တစ္ခုကေတာ့ ရုပ္ေခ်ာ၊ သေဘာေကာင္း ပါ။
</p>
</body>

</html>

Last edited by phoelapyaee; 31-08-2008 at 04:52 PM..
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 31-08-2008, 03:48 AM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Control the letters in a text

ဒါကေတာ့ စာလံုးေတြကုိ Uppercase , Lowercase , စာလံုးအႀကီး ေျပာင္းတာေတြလုပ္ရင္ text-transform ဆိုတဲ့ style tag ကိုအသံုျပဳပါတယ္… ေရးပံုကေတာ့ ..

Code:
<style>
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
နမူနာကိုေတာ့ ေရးမျပေတာ့ပါဘူး … uppercase ဆို စာလံုးအႀကီးေပါ့ .. class selector ကရွင္းျပၿပီးသားပါ .. ဒါေၾကာင့္ p.uppercase ဆိုတာလဲ သေဘာေပါက္မယ္ထင္ပါတယ္ ....
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 31-08-2008, 03:49 AM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Set the text direction of an element

ဒါကေတာ့ စာသားေတြကုိ ဘယ္ဘက္ကေနပဲစေရးခ်င္တာမ်ိဳး၊ ဒါမွမဟုတ္ ညာဘက္ကေနပဲ စေရးခ်င္တဲ့ေနရာမ်ိဳးမွာ အသံုးျပဳပါတယ္…ေရးနည္းထံုးစံကေတာ့

Code:
<style>
div.one {direction: rtl}
div.two {direction: ltr}
</style>
အဲလိုပါ …. ဒီေနရာမွာ div class ကုိရွင္းျပစရာမလိုေတာ့ဘူးလို႕ ထင္ပါတယ္ .. မိမိကိုယ္တိုင္သာေရးၾကည့္လိုက္ပါ …
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 31-08-2008, 04:59 PM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Word-spacing Property

ဒါကေတာ့ စာလံုးတစ္လံုးေနရာျခားခ်င္ရင္ အသံုးျပဳတာပါ …. ေရးတာကေတာ့ ဒီလိုေလးပါ ..

Code:
 <html>
<head>
<style type="text/css">
p
{ 
word-spacing: 30px
}
</style>
</head>
<body>

<p>
This is some text. This is some text.
</p>

</body>
</html>
ဒါဟာဆိုရင္ စာပိုဒ္မွာရွိတဲ့ စာလံုးတစ္လံုးန႕ဲ တစ္လံုးကုိ 30px ျခားေပးမွာျဖစ္ပါတယ္ .. px ဆိုတာဘာဆိုလိုတာဆိုတာ ကြ်န္ေတာ္အေပၚမွာ ရွင္းျပၿပီးသားပါ ….
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 31-08-2008, 06:58 PM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

White-space Property in Text

နမူနာတစ္ခု ၾကည့္လုိက္ပါ .. ျပန္ေျပာျပဖို႕ ေတာ္ေတာ္ခက္လိမ့္မယ္ ျဖစ္ေနလို႕ ပါ …

Code:
<html>
<head><title>white-space Demonstration</title>

<style type="text/css">

p.normal
{
 white-space:normal;
}
p.pre
{
 white-space:pre;
}
p.nowrap
{
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>

</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> နဲ႕ တူပါတယ္ .. သူက စာတစ္ေၾကာင္းနဲ႕ တစ္ေၾကာင္းကုိ ျခားေပးတာပါ …
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 31-08-2008, 08:04 PM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

CSS Font

အခုဆိုရင္ ကြ်န္ေတာ္ေဆြးေႏြးခဲ့တာဟာ
CSS ေရးထံုးေရးနည္း ၊
CSS ကုိ webpage မွာ apply လုပ္နည္း၊
ေနာက္ခံ အေရာင္၊ ပံုထည့္ျခင္း၊
စာသားေရးျခင္း အမ်ိဳးမ်ိဳး တို႕ ကို ေဆြးေႏြးၿပီး ျဖစ္ပါတယ္ …
အခုဆက္လက္ၿပီး Font အပိုင္းကို ဆက္လက္ေဆြးေႏြးပ့ါမယ္ ….
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 06-09-2008, 01:52 PM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

CSS Font မွာ စာလံုးဆိုက္ ၊ အေရာင္ ၊ စတိုင္ စသျဖင့္ မ်ားစြာေျပာင္းလဲနိုင္ပါတယ္ … သူ႕ ရဲ႕ property ေတြကေတာ့

font-style
font-family
font-size
font-size-adjust
font-stretch
font-variant
font-weight တို႕ ျဖစ္က်ပါတယ္ …

ပထမဦးဆံုး ဖြန္႕ ကာလာကုိ အရင္ဆံုးလုပ္ၾကည့္ရေအာင္ ..

Code:
h4 {color: red}
h5 {color: #9000A1}
h6 {color: rgb(0,220,98)}


ဒါကေတာ့ အေထြအထူး ရွင္းျပစရာမလုိဘူးထင္ပါတယ္ …. အေရာင္ထည့္တာက ရွင္းျပၿပီးသားပါ ..

Last edited by phoelapyaee; 06-09-2008 at 01:55 PM..
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 08-09-2008, 06:26 PM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

CSS font family

Web page ေတြကုိ မိမိစိတ္ႀကိဳက္ font ေတြနဲ႕ သတ္မွတ္ခ်င္ရင္ သံုးနုိင္ပါတယ္ …ေရးသားပံုကေတာ့ ..

Code:
font-family: Arial;
တကယ္လို႕ ဖြန္႕ တစ္မ်ိဳးထက္ပိုလာရင္ ေကာ္မာ ခံေရးပါတယ္ ..

Code:
font-family: Zawgyi-one, Arial, Pussycat;
ေနာက္တစ္ခုက ဖြန္႕ နာမည္က စာလံုး တစ္လံုးထက္ပုိရင္ရင္ အဖြင့္အပိတ္ နဲ႕ ေရးပါတယ္..

Code:
font-family: Zawgyi-one, Arial, “ludida console”,sans-serif;
ps: font-family တြင္ အရင္ဆံုးလာေသာဖြန္႕ မွစ၍ ဖြန္႕ အားလံုးကုိ format ခ်ပါသည္ …
အေပၚကေရးထားေသာ style တြင္ Zawgyi-one ကိုအရင္ဆံုး format ခ်ပါတယ္ .. မရွိမွ ေနာက္ဒုတိယျဖစ္တဲ့ Arial ကုိ format ခ်ပါတယ္…

Code:
<style>
p
 {
font-family: Zawgyi-one, Arial;
color: red;
}
</style>
ဒါဟာဆိုရင္ စာပုဒ္တစ္ခုလံုးက ဖြန္႕ ေဇာ္ဂ်ီျဖစ္ၿပီး စာသားအေရာင္က အနီေရာင္ အျဖစ္ format ခ်ေပးမွာ ျဖစ္ပါတယ္ ….
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 21-09-2008, 02:04 PM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Mystery Zillion ဖိုရမ္ကုိ ၀င္ေမႊရင္းနဲ႕ CMS Section မွာ ကုိ Zack ေရးထားတဲ့ firefox plugin တစ္ခုကို ေတြ႕ လို႕ ျပန္လည္ေ၀မွ်လိုက္ပါတယ္ ...
အဓိက အသံုး၀င္တာကေတာ့ web developer မ်ားအေနနဲ႕ ျဖစ္ပါတယ္ ..
ဘာေတြေကာင္းသလဲဆိုရင္ မိမိရဲ႕ webpage ကုိ Mouse နဲ႕ ေထာက္လိုက္တာနဲ႕ ေထာက္လိုက္တဲ့ အပိုင္းရဲ႕ CSS ေတြကုိ ေဖာ္ျပေပးပါတယ္ ....
အဲဒီအတြက္ CSS ျပင္ခ်င္သူမ်ားအတြက္ ျပင္ခ်င္တဲ့ အပိုင္းက ဘယ္ကုတ္လဲဆိုတာ သိၿပီး အလြယ္တကူျပင္လို႕ ရပါတယ္ ..
Firebug မွာ ေနာက္တခုေကာင္းတာက Firebug ထဲ မွာ css ေတြ change ျပးီ ကိုယ့္ရဲ႕ Page Changes ကိုခ်က္ခ်င္း ျမင္ႏိုင္တယ္ဗ်ာ။ လုပ္ၾကည့္ ရင္း မၾကိဳက္ေတာ့ဘူးဆိုရင္ေတာ့ Browser ကို Refresh ျပန္လုပ္ လိုက္ပါ။
original css ကိုျပန္ျမင္ရမွာ ျဖစ္ပါတယ္။
အသံုးတည့္တဲ့ plugin တစ္ခုပါပဲ .. Firefox version 3.1 နဲ႕ ပါ compatable ျဖစ္ပါတယ္ ...လိုခ်င္ရင္ေအာက္မွာ ေဒါင္းလုိက္ပါ ..
Install လုပ္ျပီး ရင္ေတာ့ Tools>Firebug>Open Firebug ဆိုျပီး On လိုက္ပါ။
ျပီးရင္ Inspect ဆိုတာရွိတယ္ firebug ရဲ႕ ဘယ္ဘက္အေပၚ ေလးမွာ ရွိပါတယ္ ..
Inspect ကို Click လိုက္ပါ။ ေနာက္ျပီး ကိုယ္႔ ရဲ႕ page ကိုျပန္ mouse move လိုက္တိုင္း ေနာက္ကေန အလုပ္လုပ္ေနတဲ့ css code ေတြ ျမင္ေနရပါတယ္ ..

DOWNLOAD

Last edited by phoelapyaee; 24-09-2008 at 03:36 AM..
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 23-09-2008, 03:18 AM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Font-size

စာလံုးဆိုက္သတ္မွတ္ခ်င္ရင္သံုးတာပါ ….. property ေတြကေတာ့ေအာက္ပါအတိုင္းပါ ..

Code:
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
ေရးသားပံုကေတာ့ …

Code:
<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....pdef-font-size ဒါကေတာ့ ဖြန္႕ ဆိုက္သတ္မွတ္ခ်က္ပါ …
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 6 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 24-09-2008, 03:37 AM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Font Size Adjust

တကယ္လို႕ မိမိစိတ္ႀကိဳက္ ဖြန္႕ ဆိုက္ကုိ ထည့္ခ်င္တယ္ဆိုရင္ number ေတြနဲ႕ ေရးလို႕ ရပါတယ္ …

Code:
<style>
font-size-adjust: 0.50;
</style>
မိမိစိတ္ႀကိဳက္ ဖြန္႕ Length သတ္မွတ္ခ်င္းကုိလဲ ရွင္းျပၿပီးသားပါ … em, ex, px တို႕ နဲ႕ ေရးနုိင္ပါတယ္ ..
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
ျပန္ေလ့လာၾကည့္ပါ …
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 2 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 07-10-2008, 05:25 AM
phoelapyaee
အထူးအသင္း၀င္
 
phoelapyaee's Avatar
 
အသင္း၀င္ေန႔စြဲ: Jan 2008
တည္ေနရာ: ေမာ္လျမိဳင္
ေရးသားခ်က္မ်ား: 558
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 583
ပို႔စ္ 331 ခုအတြက္ 1,639 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
phoelapyaee is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

Font style

Font style ကေတာ့ သံုးမ်ိဳးရွိပါတယ္ ….. normal , italic , oblique ဆိုၿပီး .. ေရးသားပံုကေတာ့ ..

Code:
<style type="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
Output ကုိထုတ္ၾကည့္ပါက ဘယ္လို result ထြက္လဲဆိုတာ ၾကည့္ၿပီး သိနုိင္ပါတယ္ ... က်န္တာကိုေတာ့ ထပ္အေသးစိတ္မေဆြးေႏြးေတာ့ပါဘူး ... Font အပုိင္းကို ဒီေလာက္ပဲေဆြးေႏြးပါ့မယ္ ..
phoelapyaee is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 5 ဦးတို႔မွ phoelapyaee အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 17-03-2009, 08:04 PM
royalheartgate
ကိုယ္ပိုင္အစြမ္းရွိၿပီးသူ
 
royalheartgate's Avatar
 
အသင္း၀င္ေန႔စြဲ: Nov 2008
တည္ေနရာ: On the Earth
ေရးသားခ်က္မ်ား: 269
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 968
ပို႔စ္ 180 ခုအတြက္ 544 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
royalheartgate is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

ေဆာရီး....ေနရာမွားၿပီး စာအုပ္မေတြ႔ဘူးေျပာေနတာကိုး....ေဆာရီးေနာ္ လုပ္လိုက္ရင္ အဲဒီအတုိင္းခ်ည္းပဲ... နဲနဲမွ မလြဲရင္ ဘာမွမလုပ္တတ္သလိုပဲ

Last edited by royalheartgate; 17-03-2009 at 08:07 PM..
royalheartgate is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 2 ဦးတို႔မွ royalheartgate အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 21-03-2009, 12:06 PM
ယုဇနေမာင္
ႀကီးေကာင္၀င္စ
 
အသင္း၀င္ေန႔စြဲ: Aug 2008
ေရးသားခ်က္မ်ား: 100
ေက်းဇူးတင္စကား: 39
ပို႔စ္ 44 ခုအတြက္ 117 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
ပံုမ်ား: 1
ယုဇနေမာင္ is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

ယုလဲ သိတာေလး နဲနဲ၀င္ေရးေပးမယ္ေနာ္.။

ScrollBar နဲ႕ပတ္သတ္ျပီးေရးလို႕ရတဲ႕ CSS ေလးပါ။

body {
scrollbar-arrow-color:red;
scrollbar-base-color:pink;
scrollbar-dark-shadow-color:yellow;
scrollbar-track-color:azure;
scrollbar-face-color:green;
scrollbar-shadow-color:blue;
scrollbar-highlight-color:skyblue;
scrollbar-3d-light-color:orange;
}
(ကိုယ္ၾကိဳက္တဲ႕ အေရာင္ေလးေတြထည္႕ျပီးစမ္းၾကည္႕လိုက္ပါ။)

[COLOR="Red"][B][U]လူ႕ေလာကၾကီးဟာ ကိုယ္တစ္ေယာက္ထဲအတြက္ စိတ္တိုင္းက် ဖန္တီးထားတာမဟုတ္ဘူး။[/U][/B][/COLOR]
ယုဇနေမာင္ is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ ယုဇနေမာင္ အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 07-06-2009, 09:42 AM
Trio
လမ္းေလွ်ာက္တတ္စ
 
အသင္း၀င္ေန႔စြဲ: May 2007
ေရးသားခ်က္မ်ား: 11
ေက်းဇူးတင္စကား: 6
ပို႔စ္ 8 ခုအတြက္ 16 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
Trio is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

သိတာေလတစ္ခုေလာက္ပါ....
css မွာ link ခ်ိတ္တဲ့အခါ အေရာင္ေျပာင္းလဲမႈေလးပါ

a:link{color:green; text-decoration:none}
a:visited{color:red; text-decoration:none}
a:hover{color:yellow; text-decoration:none}
a:active{color:pink;}
Trio is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ Trio အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 22-11-2009, 01:18 PM
moeswe
ေမြးကင္းစကေလး
 
အသင္း၀င္ေန႔စြဲ: Oct 2009
ေရးသားခ်က္မ်ား: 3
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 0
ပို႔စ္ 2 ခုအတြက္ 5 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
moeswe is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

အခုလို ဒုကၡ ခံျပီး သိေစ တတ္ေစခ်င္တဲ့ ေစတနာ နဲ႔ အပင္ပန္းခံျပီး တင္ေပးတာ ေက်းဇူးတင္ပါတယ္ ျဖစ္ႏိုင္ရင္ ဆက္ျပီးေတာ့ ေရးေပးေစခ်င္ပါတယ္ ေလးစြားစားျဖင့္
moeswe is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 4 ဦးတို႔မွ moeswe အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 18-05-2011, 03:00 AM
ေမာင္ကို
လမ္းေလွ်ာက္တတ္စ
 
အသင္း၀င္ေန႔စြဲ: Jan 2011
ေရးသားခ်က္မ်ား: 14
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 236
ပို႔စ္ 13 ခုအတြက္ 48 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
ေမာင္ကို is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

ကိုရာမညဖိုးလျပည့္ ကို ေက်းဇူးတင္ပါတယ္။ သူငယ္ခ်င္းတို႕ေလ့လာျခင္တယ္ဆိုင္ရင္ ျမန္မာလို႕ အေထာက္ကူျပဳမဲဲ့ ဆိုက္ေလးတစ္ခုေလာက္ညြန္းေပးခ်င္ပါတယ္ ၊ ကၽြန္ေတာ္ သူငယ္ခ်င္းတစ္ေယာက္ေရးထားတာ ျဖစ္ပါတယ္။ ဆိုက္ေၾကညာတာေတာ့မဟုတ္ပါဘူး ေလ့လာျခင္တဲ့ သူငယ္ခ်င္းေတြအတြက္ အေထာက္ကူျဖစ္မယ္ထင္လို႕ ေျပာလိုက္တာပါ။ မွားတာရိွရင္ ေတာင္းပန္ပါတယ္။
http://itloading.com
ေမာင္ကို is offline   Reply With Quote
ေအာက္ပါအသင္း၀င္ 3 ဦးတို႔မွ ေမာင္ကို အား ေက်းဇူးတင္စကား ေျပာၾကားသြားပါသည္။
Old 10-08-2013, 05:07 PM
ကိုဂ်ိန္း
ေမြးကင္းစကေလး
 
အသင္း၀င္ေန႔စြဲ: Dec 2011
ေရးသားခ်က္မ်ား: 4
ႏိုင္ငံအလံ: Users Flag!
ေက်းဇူးတင္စကား: 208
ပို႔စ္ 2 ခုအတြက္ 6 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
ကိုဂ်ိန္း is on a distinguished road
ျပန္စာ - Css အေၾကာင္း ေဆြးေႏြးရေအာင္

CSS အေၾကာင္းကို ရွင္းျပသြားတဲ့ ကိုဖိုးလျပည့္နဲ႔ ညီအစ္ကို ေမာင္ႏွမမ်ားကို ေက်းဇူးပါ။ ဒီေနရာမွာ Div နဲ႔ Span ေတြအေၾကာင္းကို လူၿပိန္းနားလည္ေအာင္ ရွင္းျပေပးပါလားခင္ဗ်ာ။ သူတို႔ရဲ႕ property နဲ႔ Value ေတြကိုပါ အျပည့္အစုံ သိခ်င္ပါတယ္။
ကိုဂ်ိန္း is offline   Reply With Quote
Reply

တန္ဆာပလာမ်ား
ေဖာ္ျပမႈပံုစံ

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

ဖိုရမ္ေတြ ေက်ာ္ေရာက္ခ်င္ရင္ !


ဖိုရမ္၏ ပင္မအခ်ိန္သည္ ဂရင္းနစ္စံေတာ္ခ်ိန္ +6.5 ျဖစ္သည္။ေဒသစံေတာ္ခ်ိန္ 04:26 PM
Inactive Reminders By Icora Web Design