ျမန္မာေတြကြန္ပ်ဴတာကုိ ကေလးကစားစရာလုပ္ၾကမယ္။
html အေၾကာင္းသိခ်င္ရင္ေအာက္က url link ေလးကိုႏွိပ္ပါ။
http://sanpwintthu9.blogspot.com/2012/09/website.html
css(Cascading Style Sheets) အေၾကာင္း
css ကေတာ့ မိမိ web page ေလးလွပေအာင္ အေသးစိတ္လွပေအာင္ၿပဳၿပင္တာပါ။
css မွာ အပ္ိုင္းေလးေတြခြဲထားပါတယ္။
(1) Inline Style Sheet
(2) Internal Style Sheet
(3) External Style Sheet ဆိုၿပီးသံုးမ်ိဳးခြဲထားပါတယ္
css Syntax မွာ selector,property,value
ဒီလိုပံုစံနဲ.cssသြားတာပါ selector{property:value}
ဥပမာအေနနဲ.
body color ေၿပာင္းခ်င္ရင္ body{color:blue}
paragraph ရဲ.စာေတြအေရာင္ထည့္တာၿပင္တာတို. ကိုယ္လုပ္ခ်င္တာႏွစ္မ်ိဳးဆိုရင္ အလယ္မွာ ; ေလးခံရပါတယ္။
ဥပမာ - p{text-align:center;color:red}
Inline Style Sheet ကေတာ့
html tag ေတြထဲရဲ. body tag ထဲမွာေရးသြားတာပါ။ေအာက္မွာၿပထားပါတယ္။
<body style="background-color:#00FF00"> body ရဲ.ေနာက္ကအေနာက္ခံအေရာင္သံုးထားတာပါ။
<p style="color:magenta;margin-left:20px"> စာရဲ.အေရာင္နဲ. စာကိုဘယ္ဘက္ၿခမ္းနဲ."20"px အကြာထားထားတာကိုေၿပာတာပါ။
Hello World!
</p>
</body>
Internal Style Sheet ကေတာ့
html tag ထဲရဲ. head tag ထဲမွာေရးရပါတယ္။
့head tag မွာ css syntax ကိုေရးၿပီး body tag မွာၿပန္ေခၚသံုးရပါတယ္။
CSS selector မ်ား
(1) "#" (id)
(2) "." (class)
့html tag ကိုအရင္ေရးၿပီး notepad ထဲမွာေအာက္ပါ code ေတြေရးၿပီး ေလ့က်င့္လုိ.ရပါတယ္။
html ရဲ. head tag ထဲမွာ
<head>
<title>css
</title>
<style type="text/css">
h1{color:red;} h1.a{color:green;} "h1.a" လို.ထားၿပီးbody မွာၿပန္သံုးေတာ့ <h1 class="a"> လို.ၿပန္သံုးထားပါတယ္
h2{color:pink;} h2#b{color:gray;} "h2#b" လို.ထားၿပီးbody မွာၿပန္သံုးေတာ့ <h2 id="b">လို.ၿပန္သံုးထားပါတယ္
p{color:magenta;margin-left:20px} paragraph ရဲ.အေရာင္နဲ.အကြာအေ၀းေတြပါ။
</style>
</head>
<body>
<h1>Internal CSS</h1>
<h1 class="a">Header1</h1> class နဲ.သံုးထားတာပါ။
<h2>Hello!</h2>
<h2 id="b">Header2</h2> id နဲ.သံုးထားတာပါ။
<p>This is a paragraph</p>
</body>
</html>
list ထည့္ရင္
ul.a{list-style-type:circle;}
ul.b{list-style-type:square;}
ol.c{list-style-type:upper-roman;}
ol.d{list-style-type:lower-alpha;}
table border ၿပဳလုပ္ပါမယ္
<head>
<title>Table Border</title>
<style type="text/css">
table,th,td{border:10px solid red;} table ရဲ.ေဘာင္ကိုအေရာင္ထည့္တယ္အထူးအပါးလုပ္တာပါ။
</style>
</head>
<body>
<table>
<tr>
<th>first name</th>
<th>last name</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
Link လုပ္ၾကမယ္
Link ထည့္ရာတြင္
(i) a:link
(ii) a:visited
(iii) a:hover
(iv) a:active
တို.ကိုစိတ္ၾကိဳက္ယူသံုးလုိ.ရပါတယ္
ဥပမာ-
<head>
<title>link
</title>
<style type="text/css">
a:link,a:visited link ကိုမထိမႏွိပ္ေသးဘဲထြက္တဲ့အေရာင္ပါ။
{color:#ffffff;
background-color:#ff0080;
text-decoration:none; link စာသားကိုဘာမွမၿပဳၿပင္ဘူးလို.ေၿပာတာပါ။
padding-top:3px; ဒါကေတာ့အကြာအေ၀းေတြပါ။
padding-right:15px;
padding-bottom:3px;
padding-left:15px;}
a:hover hover က အဲဒီ Link ေလးေပၚမွာ mouse တင္လိုက္ရင္ထြက္တဲ့အေရာင္ပါ။
{color:#000000;
background-color:#ff8080;}
a:active active က အဲဒီ Link ေလးကို ႏိွပ္လိုက္တဲ့အခါမွာထြက္တဲ့အေရာင္ပါ။
{background-color:blue;}
</head>
<body>
<a href=".... .html">Home</a> "......" ဒီေနရာမွာကိုယ္ save မွတ္ထားတဲ့ file nameကိုေရးပါ။
<a href="..... .html">Use</a>
<a href="....... .html">Page</a>
<a href="........ .html">Link</a>
</body>
</style>
ကိုယ္ဘာသာကိုယ္လုပ္ၾကည့္ၾကပါေနာ္
External Style Sheet ကေတာ့
အေပၚေၿပာသြားတဲ့ Inline,Internal တို.နဲ.အတူတူပါဘဲ
သူကေတာ့ file ႏွစ္ခုခြဲၿပီး ၿပန္ေခၚသံုးတာပါ။
css file ကို .css နဲ. save ၿပီး .html မွာၿပန္ေခၚသံုးတာပါ။
css မွာ css syntax ေတြရုိက္ထည့္ၿပီး .css နဲ. save ပါ
html မွာ ၿပန္ေခၚသံုးမွာက head tag ထဲမွာ
<link rel="stylesheet" type="text/css" href="..... .css"> "......" ဒီေနရာမွာကိုယ္ save မွတ္ထားတဲ့ file nameကိုေရးပါ။
ဥပမာ တစ္ခုေလာက္လုပ္ၾကမယ္။ေအာက္က code ကို notepad မွာေရးပါ။
body{
background-color:#BA55D3;
color:#FFFF00;
}
p{
margin-left:20px;
text-align:center;
color:#7CFC00;
font-size:60px;
}
ul{
list-style-type:circle;
}
a:link,a:visited
{
color:#Bc8f8f;
background-color:#AFEEEE;
text-decoration:none;
padding-top:22px;
padding-right:50px;
padding-bottom:22px;
padding-left:50px;
margin-left:15px;
}
a:hover
{
color:#000000;
background-color:#FFD700;
}
a:active
{
background-color:#F08080;
}
အဲဒါကို .css နဲ. save ပါ။
ဒါကို .html နဲ. save ပါ။
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<p>Warmly Welcome</p>
<ul>
<li>InlineStyle Sheet</li>
<li>Internal Style Sheet</li>
<li>External Style Sheet</li>
</ul>
<br><br>
<a href="...... .html">Home</a>
<a href="...... .html">Page</a>
<a href="...... .html">Design</a>
<a href="...... .html">HTML</a>
<a href="...... .html">CSS</a>
<a href="...... .html">Javascript</a>
<a href="...... .html">Photoshop</a>
<a href="...... .html">Flash</a>
<br><br>
</body>
</html>
file ႏွစ္ခုကိုတေနရာတည္းမွာ save မွတ္ၿပီး html file ကိုဖြင့္ၾကည့္လိုက္ပါ။
ဒါကေတာ့ External Style Sheet လို.ေခၚပါတယ္။
ေက်းဇူးတင္ပါတယ္
