Three Ways to Insert CSS
ကျွန်တော်တို့မှာ CSS ကိုရေးသားဖို့ နည်းသုံးနည်းရှိပါတယ်။အဲ့နည်းသုံးနည်းကတော့
- External CSS
- Internal CSS
- Inline CSS
External CSS
External CSS ကတော့ အလွယ်ကူဆုံးပြောရရင် File သပ်သပ်ခွဲပြီး ရေးလိုက်တာပါ။ခွဲရေးလိုက်တဲ့ CSS File ကို head section ထဲမှာ link ဆိုတဲ့ element ကိုသုံးပြီး ချိတ်ပေးရပါမယ်။ခွဲရေးလိုက်တဲ့ File ရဲ့ extension ဟာ css ဖြစ်တဲ့အတွက် .cssနဲ့အဆုံးသတ်ရပါမယ်။နောက်ပြီး Internal Style လို style ဆိုတဲ့ tag ထည့်စရာမလို့တော့ပါဖူး။
Example
<!DOCTYPE HTML><html><head><link rel="stylesheet" href="style.css"></head><body><h1>Hello World</h1><p>This is a paragraph.</p></body></html>
style.css
body {background-color : black;}h1 {color : red;}p {color : green;}
Internal CSS
Internal CSS ဆိုတာကတော့ HTML Document ရဲ့ Head Section ထဲမှာပဲ <style> ကိုသုံးပြီး ရေးတာကိုပြောတာပါ။
Example
<!DOCTYPE HTML><html><head><style>body {background-color : grey;}h1 {color : green;}</style></head><body><h1>Hello World</h1><p>This is a paragraph.</p></body></html>
Inline CSS
Inline Style ကတော့ HTML Element မှာ style ဆိုတဲ့ attribute ကိုရေးပြီး အဲ့ထဲမှာ css code တွေကို ရေးရတာဖြစ်ပါတယ်။
Example
<!DOCTYPE HTML><html><head></head><body><h1 style="color:red;">Hello World</h1><p style="color:green;">This is a paragraph.</p></body></html>
Multiple Style Sheets
အကယ်၍ ကျွန်တော်တို့က style သုံးခုလုံးပေးထားတယ်ဆိုရင် အဓိကဖော်ပြပေးမှာကတော့ Inline Style ဖြစ်ပါတယ်။
Internal Style ရဲ့အောက်မှာ External Style ကိုသုံးထားမယ်ဆိုရင်တော့ External Style ထဲကဟာကို အတည်ယူပြီးဖော်ပြပေးမှာ ဖြစ်ပါတယ်။
External Style ရဲ့အောက်မှာ Internal Style ကိုသုံးထားမယ်ဆိုရင်တော့ Internal Style ထဲကဟာကို အတည်ယူပြီးဖော်ပြပေးမှာ ဖြစ်ပါတယ်။
အပေါ်မှာ ပြောထားတဲ့ဟာတွေက Inline Style ရေးမထားတဲ့အချိန်မှာ အလုပ်လုပ်ပေးမယ့်ပုံကို ပြောထားတာပါ။ Inline Style သာသတ်မှတ်ပေးထားရင် Inline Style ထဲကဟာကိုပဲ အတည်ယူပြီးတော့ ဖော်ပြပေးမှာပါ။
No comments:
Post a Comment