Myanmar Coder Guide: HTML Class

HTML Element တွေကို အဖွဲ့အစည်းတစ်ခုအနေနဲ့ စုစည်းလိုတဲ့အခါမှာ class Attribute ကိုသုံးရပါတယ်။

class တစ်ခုထဲကို တစ်ခုထက်ပိုတဲ့ Element တွေမှာထည့်သုံးနိုင်ပါတယ်။

class ဟာ CSS တွေ၊ JavaScript တွေနဲ့ တွဲသုံးရာမှာ မရှိမဖြစ်သုံးရမယ့် အရာတစ်ခုဖြစ်ပါတယ်။ ဒီသင်ခန်းစာမှာပါတဲ့ CSS Code တွေနဲ့ JavaScript Code တွေကို နားမလည်သေးရင်လည်း စိတ်မပူပါနဲ့။ အဓိက က class အကြာင်းကို သိသွားရင် ရပါပြီ။

class Attribute အသုံးပြုခြင်း

class Attribute ဟာ CSS တွေရေးတဲ့အခါမှာ များစွာအသုံးများတဲ့ Attribute တစ်ခုပါ။ JavaScript မှာ Element တွေများစွာကို ဝင်ရောက်ပြင်ဆင်မှုများအတွက်လည်း class ကအသုံးဝင်ပါလိမ့်မယ်။

ဒီအောက်က ဥပမာမှာဆိုရင် class="city" သတ်မှတ်ထားတဲ့ <div> Element သုံးခုရှိပါတယ်။ အဲဒီသုံးခုလုံးဟာ <head> tag ထဲက .city ထဲက Style များအတိုင်း အလုပ်လုပ်နေပါလိမ့်မယ်။ ဆိုလိုတဲ့သဘောကတော့ value တူရှိတဲ့ class တွေအားလုံးကို တစ်နေရာထဲကနေ Style ထည့်နိုင်တယ်ဆိုတာပါ။ ဒါက class သုံးရတဲ့ ရည်ရွယ်ချက်တစ်ခုဘဲ ဖြစ်ပါတယ်။

Example Code

```
<!DOCTYPE html>
```
```
<html>
```
```
    <head>
```
```
        <style>
```
```
            .city{
```

                background-color: tomato;

```
                color: white;
```

                border: 2px solid black;

```
                margin: 20px;
```
```
                padding: 20px;
```
```
              }
```
```
        </style>
```
```
    </head>
```
```
    <body>
```
```
        <div class="city">
```
```
            <h2> London </h2>
```

            <p> London is the capital of England.</p>

```
        </div>
```
```
        <div class="city">
```
```
            <h2> Paris </h2>
```

            <p> Paris is the capital of France.</p>

```
        </div>
```
```
        <div class="city">
```
```
            <h2> Takyo </h2>
```

            <p> Tokyo is the capital of Japan.</p>

```
        </div>
```
```
    </body>
```
```
</html>
```

Try it Yourself!

ဒီအောက်က ဥပမာမှာ‌တော့ class="note" သတ်မှတ်ထားတဲ့ <span> Element နှစ်ခုရှိပါတယ်။ အဲဒီ နှစ်ခုလုံးရဲ့ Style ကို <head> Tag ထဲက .note ထဲနဲ့ ထိမ်းချုပ်ပြုပြင်နိုင်တာကို တွေ့ရမှာပါ။

Example Code

```
<!DOCTYPE html>
```
```
<html>
```
```
    <head>
```
```
        <style>
```
```
            .note{
```
```
                font-size: 120%;
```
```
                color: red;
```
```
              }
```
```
        </style>
```
```
    </head>
```
```
    <body>
```

            <h1> My <span class="note"> Important</span> Heading</h1>

            <p> This is some <span class="note"> important</span> text.</p>

```
    </body>
```
```
</html>
```

Try it Yourself!

class element ကို HTML element တိုင်းမှာထည့်သုံးနိုင်ပါတယ်။

class တွေရဲ့ Value ဟာ Case Sensitive ဖြစ်ပါတယ်။

ရှေ့မှာတော့ HTML CSS အကြောင်း အနည်းငယ် လေ့လာပြီး ဖြစ်မယ်ထင်ပါတယ်။ CSS အကြောင်းပိုမိုလေ့လာချင်ရင်တာ့ CSS Tutorials မှာ သွားလေ့လာနိုင်ပါတယ်။

The Syntax for class

Style Sheet တွေကနေ class ကိုသတ်မှတ်တဲ့အခါမှာ ရှေ့က peroid character လို့ခေါ်တဲ့ (.) လေးခံပြီး သတ်မှတ်ရပါတယ်။

ပြီးတဲ့အခါမှာတော့ CSS Property တွေကို carly braces {...} အတွင်းမှာ ရေးရပါတယ်။

CSS Property တစ်ခုဆုံးတိုင်း semicolum (;) နဲ့ပိတ်ပေးရပါတယ်။ (CSS အကြောင်းမှာလဲလေ့လာပြီး ဖြစ်မှာပါ။)

အောက်က ပုံစံကိုကြည့်ပါ။

CSS Class Syntax

.class-name { CSS Property 1 ; CSS Property 2; }

Multiple Classes

HTML element တစ်ခုမှာ class တစ်ခုထက်ပိုပြီး သတ်မှတ်လို့ရပါတယ်။

html element တစ်ခုမှာ တစ်ခုထက်ပိုတဲ့ class တွေသတ်မှတ်ချင်တယ်ဆိုရင် space ခြားပြီးသုံးပါတယ်။ ဥပမာ = <div class="city main">။ ဒီလိုဆိုရင် ဒီ div ဟာ city class ထဲက CSS Properties တွေအလုပ်လုပ်သလို၊ main class ထဲက CSS Properties တွေလည်း အတူတကွ အလုပ်, လုပ်ကြပါလိမ့်မယ်။

Example Code

```
<h2 class="city main"> London </h2>
```
```
<h2 class="city"> Paris </h2>
```
```
<h2 class="city"> Tokyo </h2>
```

Try it Yourself!

မတူညီတဲ့ Element များမှ အသုံးပြုခြင်း

class တစ်ခုကို မတူညီတဲ့ html element များကနေလည်း အသုံးပြုလို့ရပါတယ်။

ဒီအောက်က ဥပမာမှာဆိုရင် <h2> နှင့် <p> Tag နှစ်ခုလုံးက city ဆိုတဲ့ class မှာပါဝင်ပြီး city ထဲက CSS Properties တွေနှင့် အတူတကွ အလုပ်, လုပ်ကြပါလိမ့်မယ်။

Example Code

```
<h2 class="city"> Paris </h2>
```

<p class="city"> Paris is the capital of France </p>

Try it Yourself!

JavaScript တွင် class အသုံးဝင်ပုံ

class တွေဟာ CSS တွေအတွက်ဘဲ မဟုတ်ပါဘူး JavaScript တွေအတွက်လည်း အသုံးဝင်ပါသေးတယ်။

JavaScript မှာ class တွေကို ခေါ်ယူချင်ရင် getElementByClassName() ဆိုတဲ့ Method ကိုသုံးပါတယ်။

Example Code

```
<scritp>
```
```
     function myFunction(){
```

         var x = document.getElementByClassName("city")

```
         for (var i = 0; i < x; i++){
```

             x[i].style.display = "none" ;

```
          }
```
```
     }
```
```
</scritp>
```

Try it Yourself!

JavaScript Code တွေကို နားမလည်လို့ မစိုးရိမ်ပါနဲ့။

JavaScript အကြောင်းကို ပိုမိုသိရှိနိုင်ဖို့ ကျွန်တော်တို့ရဲ့ JavaScript Tutorials မှာ သွားရောက်လေ့လာနိုင်ပါတယ်။

Chapter Summary

Element တစ်ခုမှာ class တစ်ခုထက်ပိုပြီး အသုံးပြုနိုင်ပါတယ်။
Classes တွေကို CSS နဲ့ JavaScript တွေက သူတို့လိုချင်တဲ့ Element တွေကို ရွေးချယ် သတ်မှတ်ဖို့အတွက် အသုံးပြုပါတယ်။
class Attribute ကို html element တိုင်းမှာ အသုံးပြုနိုင်ပါတယ်။
class Name (or Value) တွေဟာ case sensitive ဖြစ်ပါတယ်။
မတူညိတဲ့ html element များလည်း class တစ်ခုထဲကို အတူတူသုံးနိုင်ကြပါတယ်။

Case Sensitve ဖြစ်ပါတယ်ဆိုတာက စာလုံး အသေးအကြီး မှားလို့မရဘူးဆိုလိုတာပါ။ အားလုံး သိပြီးလိမ့်မယ်လို့ မျှော်လင့်ပါတယ်။

မရှင်းတာ၊ နားမလည်တာ၊ လိုအပ်တာများရှိရင် Comment ရေးပေးခဲ့ပါဗျာ......

Web Design Tutorials

Web Development Tutorials

UI/UX Tutorials

How To

Knowledge Article

How To

HTML Tutorials

Documentation

Writer Links

Writer Data

JavaScript Tutorials

Saturday, December 19, 2020

HTML Class

class Attribute အသုံးပြုခြင်း

Example Code

Example Code

The Syntax for class

CSS Class Syntax

Multiple Classes

Example Code

မတူညီတဲ့ Element များမှ အသုံးပြုခြင်း

Example Code

JavaScript တွင် class အသုံးဝင်ပုံ

Example Code

Chapter Summary

No comments:

Post a Comment

All Course

HTML & CSS

JavaScript

Server Side

Programing

CSS Tutorials

Laravel Tutorials

How To

Documentation

Writer Links

Writer Data

HTML Tutorials

JavaScript Tutorial

Blog Archive

Labels