Inline, Internal, and External CSS styles တို့ရဲ့ အကြောင်း
- Jun 24, 2021
- 2 min read
Updated: Mar 23, 2022
Web site UI design တွေကို မိမိစိတ်တိုင်းကျ ပုံဖော်ဖို့အတွက် CSS ကို အသုံးပြုပြီး mobile, tablet နဲ့ desktop view တွေမှာ user friendly ဖြစ်ပြီး သေသပ်လှပတဲ့ UI design အမျိုးမျိုးကို develop လုပ်ကြပါတယ်။
CSS ရဲ့ နာမည်အရှည်ကတော့ Cascading Style Sheets လို့ခေါ်ပါတယ်။ HTML ဆိုတာကကိုယ်ဖော်ပြချင်တဲ့အကြောင်းအရာကို Web site မှာပြသပေးတာဖြစ်ပြီး CSS ကတော့ site ကို လှပအောင် HTML tab တွေကို ကိုယ်ပြသချင်တဲ့ design အတိုင်း ပြသနိုင်အောင်ဆောင်ရွက်ပေးတာဖြစ်ပါတယ်။ CSS ကို ရေးသာနည်းပေါ်မူတည်ပြီး CSS style rule တစ်ခုက web page တစ်ခု၊ ဒါမှမဟုတ် web site တစ်ခုလုံးရဲ့ UI design ကို သက်ရောက်စေနိုင်ပါတယ်။
CSS style ရေးနည်းကတော့ ၃ မျိုးရှိပါတယ်။
Inline Style
Internal Stylesheet
External Stylesheet တို့ဖြစ်ပါတယ်။
ရေးနည်း style ၃ မျိုးလုံးစီမှာ အသုံပြုပုံပေါ်မူတည်ပြီး အားသာချက်များရှိပါတယ်။
Inline Styles
Inline Style CSS ကတော့ HTML tag တစ်ခုတည်းအတွက်နဲ့သာ သက်ဆိုင်ပြီး ကိုယ် style ထည့်ချင်တဲ့ HTML ရဲ့ tag တွင်းမှာထည့်ရေးရတာဖြစ်ပါတယ်။ မြန်မြန်ဆန်ဆန်နဲ့ permanent changes ပြုလုပ်ချင်တဲ့ နေရာတွေမှာ အသုံးဝင်ပါတယ်။ Inline Style CSS က Internal stylesheet နဲ့ External Stylesheet တွေလောက်တော့ flexible မဖြစ်ပါဘူး Site UI Design ပြောင်းတာနဲ့ tag တစ်ခုချင်းစီကို သီးသန့် သွားပြီး edit ပြုလုပ်ရတဲ့အတွက်ကြောင့်ဖြစ်ပါတယ်။
Inline Style example :
<h1 style="color:red;margin-left:20px;">Today’s Update</h1>
Internal Stylesheet
Internal Style Sheet ဆိုတာကတော့ HTML file ရဲ့ header tab အတွင်းမှာ CSS style rule တွေကို ရေးထားတာကို ဆိုလိုပါတယ်။ Internal Style Sheet CSS မှာ ရေးထားတဲ့ CSS style တွေကတော့ apply လုပ်ထားတဲ့ HTML file တစ်ခုတည်းအတွက်သာ သက်ဆိုင်ပါတယ်။ HTML element ရဲ့ Class name သို့မဟုတ် ID ကို အသုံးပြုပြီးတော့ Site UI Design ကို ကြိုက်သလို ပြုပြင်နိုင်သည်။ CSS rule တစ်ခုပြောင်းလိုက်တာနဲ့ rule ကို apply လုပ်ထားတဲ့ HTML tag element တွေအကုန် ပြောင်းမှာဖြစ်ပါတယ်။ HTML file ရဲ့ header tab အတွင်းမှာရေးသားလေ့ရှိသလို body tab အပိတ်ပြီးမှာလဲရေးသားတတ်ကြပါတယ်။ HTML file အတွင်း ဘယ်နေရာမဆို style tab ထည့်ပြီးရေးလို့ရပေမယ့် tab တွေကို တစ်နေရာတည်းစုစည်းရေးသားထားခြင်းက code ကို manage လုပ်ရတာပိုမိုလွယ်ကူစေပါတယ်။
Internal Stylesheet example :
<head> <style type="text/css"> h1 { color:#fff; margin-left: 20px; } p { font-family: Arial, Helvetica, Sans Serif; } </style> </head>
External Stylesheet
Internal Style Sheet နဲ့ ရေးသားပုံချင်းတော့တူပါတယ်။ .css file အနေနဲ့သီးသန့်ရေးထားတဲ့ file ကို ကိုယ် apply လုပ်ချင်တဲ့ web page ကို link လှမ်းချိတ်ဆက်ထားပြီး အသုံ
းပြုပါတယ်။ Internal style sheet နဲ့ မတူတာက External style sheet က ကိုယ် apply လုပ်ချင်တဲ့ page တွေအ
ကုန်ကို apply လုပ်လို့ရပါတယ်။ CSS rule တစ်ခုပြောင်းလိုက်တာနဲ့ rule ကို apply လုပ်ထားတဲ့ page တွေ အကုန်ပြောင်းမှာဖြစ်ပါတယ်။
External Stylesheet example :
<link href="style.css" rel="stylesheet" type="text/css">
ဒါတွေကတော့ CSS style ရေးနည်းကတော့ ၃ မျိုးရဲ့ လုပ်ဆောင်မှုတွေ၊ အားသာချက်၊ အားနည်းချက်တွေဘဲဖြစ်ပါတယ်။
Comments