- Inline style
- Internal style sheet
- External style sheet
Inline Style
Inline Style ကို Element တစ္ခုတည္းမွာပဲ unique style ေတြ ေျပာင္းလဲဖုိ.အတြက္ အသံုးျပဳပါတယ္။ ထို.ေၾကာင့္ CSS ကို မိမိ ျပဳလုပ္လိုေသာ HTML element ၏ Start Tag အတြင္းတြင္ style attribute ျဖင့္ ထည့္သြင္းေရးသားရပါတယ္။ Style attribute တြင္ CSS ၏ properties မ်ားအားလံုးကို အသံုးျပဳေရးသား ႏိုင္ပါတယ္။Example:
<h1 style=”color:#ff0000; text-align:center;”>This is center-aligned heading</h1><p style=”color:blue; margin-left:20px;”>This is paragraph</p>
Internal Style Sheet
Internal style ကို HTML document ၏ <head> ႏွင့္ </head> section ထဲမွာ <style> tag ျဖင့္ ေရးရပါတယ္။ တနည္းေျပာရလ်င္ <body> အတြင္းမွ tag တစ္ခုစီတြင္ attribute ျဖင့္ မေရးေတာ့ပဲ <head></head> အတြင္းတြင္ <style> tag ျဖင့္ ေရးသားျခင္းျဖစ္ ျဖစ္ပါတယ္။ <body> ထဲတြင္ <h1> element ႏွစ္ခု ရွိျပီး ႏွစ္ခုလံုးကို style တူတူ ျပဳလုပ္ခ်င္ ပါက Inline CSS ေရးသားမွဳတြင္ <h1> tag ႏွစ္ခုလံုးမွာ ေရးသားရျပီး Internal Style sheet ေရးသားမွဳတြင္ေတာ့ တစ္ၾကိမ္သာ ေရးသားျခင္းျဖင့္ <body> tag ထဲမွ <h1> tag မ်ားအားလံုး၏ style မ်ား ကိုေျပာင္းလဲေပးႏိုင္ ပါတယ္။Example:
<head><style>
hr {color:blue;}
p {margin-left:20px;}
</style>
</head>
External style sheet
External style sheet မွာ html document မ်ားစြာနဲ. အေကာင္းဆံုး ခ်ိတ္ဆက္အသံုးျပဳႏိုင္ပါတယ္။ CSS file တစ္ခုတည္းကို HTML document မ်ားစြာက ရယူအသံုးျပဳႏိုင္ပါတယ္။ External style sheet ကို ၾကိဳက္ႏွစ္သက္ရာ text editor နဲ.ေရးလို.ရပါတယ္။ save လုပ္တဲ့အခါမွာ .css ျဖင့္သိမ္းေပးရပါတယ္။ ၄င္း CSS file ကို html document မွာ ယူသံုးဖို. အတြက္ <head></head> section မွာ <link> tag နဲ.ခ်ိတ္ဆက္ေပးရပါတယ္။CSS Link example:
<head><link rel=”stylesheet” type=”text/css” href=”filename.css”>
</head>
No comments:
Post a Comment