- color
- text-align
- text-decoration
- text-transform
- text-indent
- letter-spacing
- line-height
- word-spacing
Text Color
Text color အတြက္ color porperty ကိုသံုးပါတယ္။Example of color property:
<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is paragraph</p>
<p class="ex">This is paragraph using class attribute of CSS.</p>
</body>
</html>
This is paragraph မွာ အနီေရာင္ ျဖစ္ေနရျခင္းမွာ body {color:red;} လို.ေရးထားလို.ျဖစ္ပါတယ္။ body ထဲမွာရွိေသာ text color မွန္သမ်ွ အနီေရာင္လို. Style သတ္မွတ္ေပးလိုက္ျခင္း ျဖစ္ပါတယ္။ ဒါေၾကာင့္ ေနာက္ထပ္ <p> element ကိုေတာ့ အနီေရာင္ မသံုးျခင္လို. p.ex ဆိုျပီး style တစ္ခုေရးသားျခင္းျဖစ္ပါတယ္။
အကယ္၍ p ကိုပဲ p {color:rgb(0,0,255);} လို. Style ေရးလိုက္လ်င္ <p> tag နဲ.ေရးလိုက္တိုင္း အားလံုး အျပာေရာင္ေတြျဖစ္ကုန္မွာပါ။ ဒါေၾကာင့္ ေျပာင္းခ်င္တဲ့ <p> element အတြက္ပဲ class နဲ. Style ယူသံုးလို.ရေအာင္ p.ex ျဖင့္ style ေရးသားျခင္း ျဖစ္ပါတယ္။
Text Alignment
Text alignment ကို horizontal alignment အတြက္ text-align property ျဖင့္သံုးပါတယ္။ value ေတြကေတာ့ left, right, center ႏွင့္ justify တို.ျဖစ္ပါတယ္။Example:
<!DOCTYPE html><html>
<head>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>This is Heading</h1>
<p class="date">22 July 2013</p>
<p class="main">Morbi libero orci, tristique nec luctus vitae, fermentum ac urna. Vivamus et velit neque. Duis et lectus elit. Nam ac ligula purus, ac tempus diam. In sit amet metus tellus.</p>
</body>
</html>
Text Decoration
Text ေတြကို အလွဆင္ဖို. text-decoration property ကို သံုးပါတယ္။ သူ.ရဲ့ value ေတြကေတာ့ overline, line-through, underline ႏွင့္ none တို.ျဖစ္ပါတယ္။ text-decoration:underline ဆိုတာက link ကိုေျပာတာမပာုတ္ပါဘူး user ကထင္သာျမင္တာေအာင္ underline နဲ.ျပျခင္း သတ္သတ္ပဲျဖစ္ပါတယ္။ ထို.ျပင္ link ေတြကို <a> tag နဲ.အသံုးျပဳတဲ့ အခါမွာ underline က default အေနျဖင့္ ပါလာတတ္ပါတယ္။ ၄င္း အေျခအေနမ်ိဳးမွာ text-decoration:none ကိုအသံုးျပဳျပီး underline ကိုျဖဳတ္လို.ရပါတယ္။ text decoration ကို link ေတြ မွာ underline ျဖဳတ္ဖို. အမ်ားဆံုး အသံုးျပဳပါတယ္။Example:
<!DOCTYPE html><html>
<head>
<style>
a.dec {text-decoration:none;}
</style>
</head>
<body>
<p>Link to: <a href="http://www.mywebdesignnote.blogspot.com">Web Design' note</a></p>
<p>Link to: <a class="dec" href="http://www.mywebdesignnote.blogspot.com">Web Design's note</a></p>
</body>
</html>
Text Transformation
text-transform property ကို uppercase, lowercase, capitalize တို.အတြက္ သံုးပါတယ္။ ၄င္း၏ value မ်ားမွာ uppercase, lowercase နဲ. Capitalize တို.ပဲျဖစ္ပါတယ္။
Example:
<!DOCTYPE html>
<html><head>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is uppercase.</p>
<p class="lowercase">This is lowercase.</p>
<p class="capitalize">This is capitalize.</p>
</body>
</html>
Text Indentation
text-indent property ကို text indentation လုပ္ဖို.အတြက္သံုးပါတယ္။ ၄င္း ၏ default value မွာ 0 ျဖစ္ျပီး unit ကို pixel (px) ျဖင့္ သတ္မွတ္ပါတယ္။ ထို.ျပင္ cm ႏွင့္ % တို.ျဖင့္လည္း သတ္မွတ္ႏိုင္ပါတယ္။
Example:
<!DOCTYPE html>
<html><head>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>Morbi libero orci, tristique nec luctus vitae, fermentum ac urna. Vivamus et velit neque. Duis et lectus elit. Nam ac ligula purus, ac tempus diam. In sit amet metus tellus. </p>
</body>
</html>
letter-spacing
စာလံုး တစ္လံုးႏွင့္ တစ္လံုးၾကားအကြာအေ၀ကို letter-spacing ျဖင့္ ျပဳလုပ္လို.ရပါတယ္။
Example:
<!DOCTYPE html>
<html><head>
<style>
h3 {letter-spacing:3px;}
h4 {letter-spacing:-3px;}
</style>
</head>
<body>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
</body>
</html>
line-height
<!DOCTYPE html>
<html><head>
<style>
p.small {line-height:10px;}
p.big {line-height:200%;}
</style>
</head>
<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>
http://www.w3schools.com/cssref/playit.asp?filename=playcss_line-height မွာလည္းသြားျပီး ေလ့လာႏိုင္ပါတယ္။
word-spacing
word တစ္ခုႏွင့္ တစ္ခုၾကား အကြာအေ၀း သတ္မွတ္ဖို. word-spacing property ကိုသံုးပါတယ္။
Example:
<!DOCTYPE html>
<html><head>
<style>
p{ word-spacing:20px;}
</style>
</head>
<body>
<p>This is some text. This is some text.</p>
</body>
</html>
http://www.w3schools.com/cssref/playit.asp?filename=playcss_word-spacing တြင္လည္း ေလ့လာႏိုင္ပါတယ္။
No comments:
Post a Comment