style ဆိုတဲ့ Attribute ကို ကျွန်တော်တို့ရေးသားလိုက်တဲ့ Element တွေကို အလှဆင်ဖို့အတွက် အသုံးပြုပါတယ်။
The HTML Style Attribute
Element တစ်ခုရဲ့ style ကို style ဆိုတဲ့ Attribute ကိုအသုံးပြုပြီး မိမိစိတ်ကြိုက်ချိန်ညှိ နိုင်ပါတယ်။
HTML style Attribute ရဲ့ syntax လေးကတော့ အောက်မှာပြထားတဲ့အတိုင်း ဖြစ်ပါတယ်။
Example
<tagname style="property:value;">
Property နဲ့ Value နေရာမှာတော့ CSS ရဲ့ Property နဲ့ Value များကို ဖြည့်သွင်းပေးရမှာ ဖြစ်ပါတယ်။
CSS အကြောင်းပိုမိုသိချင်တယ် ဆိုရင်တော့ ကျွန်တော်တို့ တင်ပေးထားတဲ့ CSS သင်ခန်းစာများမှာ သွားရောက်လေ့လာနိုင်ပါတယ်။
Background Color
ကျွန်တော်တို့ HTML Elemnet တစ်ခုမှာ background-color သတ်မှတ်ပေးချင်ရင် CSSရဲ့ background-color ဆိုတဲ့ Property ကိုအသုံးပြုနိုင်ပါတယ်။ Value မှာတော့ color names,RGB, HEX, HSL, RGBA, or HSLA values တွေထဲက ကိုယ်ကြိုက်နှစ်သက်ရာနဲ့ ပေးနိုင်ပါတယ်။
ဒီနေရာမှာတော့ အပေါ်ကပြောခဲ့တဲ့ Values တွေအကြောင်းကိုတော့ အသေးစိတ်ရှင်းမပြတော့ဖူး။ အသေးစိတ်ကို သိချင်ရင်တော့ CSS သင်ခန်းစာတွေမှာ ဆက်လက်လေ့လာနိုင်ပါတယ်။
Example
ကျွန်တော်တို့ရဲ့ Background တစ်ခုလုံးကို အနီရောင် ထားကြည့်မယ်။
<body style="background-color:red;"><h1>This is a heading</h1><p>This is a paragraph.</p></body>
တခြားElement တွေကိုလည်းစမ်းကြည့်ပါ။
Text Color
CSS ရဲ့ color ဆိုတဲ့ property ကို text တွေကို အရောင်သတ်မှတ်ဖို့ အတွက်အသုံးပြုပါတယ်။
Example
<h1 style="background-color:red;">This is a heading</h1><p style="background-color:green;">This is a paragraph</p>
Fonts
CSS ရဲ့ font-family ဆိုတဲ့ property ကို html element တွေမှာ အသုံးပြုမယ့် font အမျိုးအစားကို သတ်မှတ်ရာမှာ အသုံးပြုပါတယ်။
Example
<h1 style="font-family:verdana;">This is a heading</h1><p style="font-family:courier;">This is a paragraph</p>
Text Size
CSS ရဲ့ font-size ဆိုတဲ့ property ကို text တွေရဲ့ အရွယ်အစားကို သတ်မှတ်ဖို့ အတွက်အသုံးပြုပါတယ်။
ဒီနေရာမှာတော့ px(Pixels) နဲ့ သုံးပြထားပါတယ်။
Example
<h1 style="font-size:100px;">This is a heading</h1><p style="font-size:50px;">This is a paragraph</p>
Text Alignment
CSS ရဲ့ text-align ဆိုတဲ့ property ကို text တွေရဲ့ ့horizontal alignment ကိုသတ်မှတ်ဖို့အတွက်အသုံးပြုပါတယ်။
Example
<h1 style="text-align:center;">Heading 1</h1><h2 style="text-align:right;">Heading 2</h2><h3 style="text-align:left;">Heading 3</h3>
text-align မှာ justify ဆိုတဲ့ value တစ်ခုလည်းရှိပါသေးတယ်။အဲ့တာကိုတော့ မိမိဘာသာ paragraph လေးတစ်ခုလောက်ရေးပြီး စမ်းသပ်ကြည့်ပါ။
Chapter Summary
styleဆိုတဲ့ Attribute ကို HTML Element တွေရဲ့ style ကိုသတ်မှတ်ရာမှာအသုံးပြုတယ်။background-colorကို HTML Element ရဲ့ background အရောင်ကို သတ်မှတ်ရာမှာ အသုံးပြုတယ်။colorကို text တွေရဲ့ အရောင်ကို သတ်မှတ်ရာမှာ အသုံးပြုတယ်။font-familyကို text တွေရဲ့ font ကိုသတ်မှတ်ရာမှာ အသုံးပြုတယ်။font-sizeကို text တွေရဲ့ အရွယ်အစားကို သတ်မှတ်ရာမှာ အသုံးပြုတယ်။text-alignကို text တွေရဲ့ align ကိုသတ်မှတ်ရာမှာ အသုံးပြုတယ်။
No comments:
Post a Comment