တစ်ဦး CSS ကိုသားစဉ်မြေးဆက်ရွေးဆိုတာဘာလဲ

တစ်ခုက HTML document ရဲ့ဖွဲ့စည်းပုံတစ်မိသားစုသစ်ပင်နှင့်ဆင်တူသည်။ သင့်မိသားစုအတွက်, သင်သည်သင်၏မိဘများနှင့်သင်တို့ရှေ့မှလာသောအခြားသူတွေရှိသည်။ ဤရွေ့ကားသင်၏ဘိုးဘေးဖြစ်ကြသည်။ ကလေးများနှင့်သစ်ပင်ပေါ်တွင်သင်ပြီးနောက်လာသောသူတို့အားသင်၏အမျိုးအနွယ်ဖြစ်ကြ၏။ HTML ကိုအလားတူဖက်ရှင်အတွက်အလုပ်လုပ်တယ်။ အခြားဒြပ်စင်၏အတွင်းပိုင်းဖြစ်ကြောင်း element တွေကိုသူတို့ရဲ့သားစဉ်မြေးဆက်ဖြစ်ကြသည်။ နီးပါးတိုင်းက HTML element က tag များ၏အတွင်းပိုင်းဖြစ်ပါတယ်ကတည်းကဥပမာ, သူတို့က element တစ်ခုဆင်းသက်လာပါလိမ့်မယ်။ ဒီအကြားဆက်ဆံရေးကိုသင် CSS နဲ့စတင်အလုပ်လုပ်အမြင်အာရုံစတိုင်များလျှောက်ထားရန်တိကျသောဒြပ်စင်ပစ်မှတ်ထားဖို့လိုအပ်သည့်အခါနားလည်ရန်အရေးကြီးပါသည်။

CSS ကိုသားစဉ်မြေးဆက် selector

တစ်ဦးက CSS ကိုဆင်းသက်လာ selector အခြားဒြပ်စင်အတှငျးသောဒြပ်စင်များသက်ဆိုင် (သို့မဟုတ်ထို့ထက် ပို. တိကျစွာအခြားဒြပ်စင်တစ်ခုဆင်းသက်လာကြောင်း Element တစ်ခုရဲ့ဖော်ပြထား) ။ ဥပမာအနေနဲ့နံပါတ်စဉ်မပါတဲ့ list သားစဉ်မြေးဆက်အဖြစ် tags များနှင့်အတူ၎င်း tag ရှိပါတယ်။ ရဲ့ဥပမာတစ်ခုအဖြစ်အောက်ပါ HTML ကိုအသုံးပြုပါစေ:

• ဒီ link တစ်ခု ဖြစ်ပါသည်

  အဆိုပါ LI tags များဟာ ul tag ကို၏သားစဉ်မြေးဆက်ဖြစ်ကြသည်။ အဆိုပါတစ်ဦးက tag ကိုပု LI (ကလေးကဆင်းသက်လာ) နှင့် ul (မြေးဆင်းသက်လာ) tags များနှစ်ဦးစလုံး၏တစ်ဦးဆင်းသက်လာသည်။ သငျသညျအကွောငျးကိုမိသားစုသစ်ပင်ဥပမာကို အသုံးပြု. ဤအကြောင်းကိုစဉ်းစားစဉ်းစားလျှင်,

  မိဘပါလိမ့်မယ်,
  • ကြောင်းဒြပ်စင်ရဲ့ကလေးကပါလိမ့်မယ်, နှင့်
  • ၏ကလေးနှင့်များ၏မြေးပါလိမ့်မယ်
    ။

    ဒါကြောင့်သင်မည်သို့သောဤဆင်းသက်လာ selector တွေကိုသုံးပြီးဝဘ်စာမျက်နှာအတွက်တိကျသောဒြပ်စင်ပစ်မှတ်ထားမလဲ ပထမဦးစွာသင်နေရာများအားဖြင့်ကွဲကွာ selector တွေကိုရိုက်ထည့်နှစ်ခု (သို့မဟုတ်ထို့ထက် ပို. ) ကို အသုံးပြု. ဆင်းသက်လာ selector တွေကို define ရန်ရှိသည်။

    li တစ် {text-decoration: none; }

    ကြောင်းဥပမာထဲမှာ, စတိုင်များတစ်ခုသာ list-item ဒြပ်စင် (

    • ) ၏ဆင်းသက်လာကြောင်း link တစ်ခုဒြပ်စင် () အားလျှောက်ထားမည်ဖြစ်သည်။ စာရင်းတစ်ခုကို item တစ်ခုဆင်းသက်လာမဟုတ်စာမျက်နှာပေါ်မှာရှိသမျှသည်အခြားလင့်များဒီစတိုင်ရလိမ့်မည်မဟုတ်ပေ။

      မှတ်မိဖို့တစ်ခုမှာအရေးကြီးဆုံးအရာကသူတို့သင်သည်သင်၏ဆင်းသက်လာ selector အတွက် အသုံးပြု. စေခြင်းငှါ၎င်း tag များအကြား၌ရှိကြ၏မည်မျှ tags များအရေးမပါဘူးဆိုတာပါပဲ။ ဒုတိယ element ကပထမဦးဆုံးဒြပ်စင်အတွင်းဘယ်နေရာမှာမဆိုပူးတွဲလျှင်ကဆင်းသက်လာအဖြစ်ရွေးချယ်လိမ့်မည်။

      သငျသညျ ul ဒြပ်စင်မှဆင်းသမျှသောကျောက်ဆူးကို select ချင်လျှင်, သင်ရေးလိုက်မယ်ဆိုတာ:

      တစ် {text-decoration ul: none; }

      အခုတော့အဲဒီစတိုင်များစာရင်းတစ်ခုကို item တစ်ခုဆင်းသက်လာကြောင်းမည်သည့်လင့်ခ်မှလျှောက်ထားပါလိမ့်မယ်။ သငျသညျလညျးဤ selector ရေးလိုက်နိုင်

      ul li တစ် {text-decoration: none; }

      ဒါကနှစ်ယောက်ထက်ပို type ကို selector တွေကိုအသုံးပြုတဲ့ဆင်းသက်လာ selector ဖြစ်ပါတယ်။ ဤကိစ္စတွင်ခုနှစ်, ဒီ list-item ကိုလည်းတစ်ခုနံပါတ်စဉ်မပါတဲ့ list ထဲမှာအဖြစ်၏အတွင်းပိုင်းဖြစ်ကြောင်းလင့်များလျှောက်ထားမည်ဖြစ်သည်။

      အတန်းအစား selector နှင့် ID ကို selector အသုံးပြုခြင်း

      သင့်ထံမှဆင်းသက်နေသော selector တွေကိုအမြဲ type ကိုသားစဉ်မြေးဆက်ဖြစ်ဖို့မလိုပါ။ ဥပမာအားဖြင့်, သင်သည် "Billboard" ၏တစ်ဦး၏ ID attribute ကိုနှင့်အတူ (ကကွဲပြားခြင်းနဲ့တူ) ကို site ၏ဧရိယာခဲ့မြင်ယောင်ကြည့်ပါ။ သငျသညျထိုအိုင်ဒီ၏ချွတ်တစ်ဆင်းသက်လာ selector ကို set up နိုင်:

      ul {background-color #billboard: #ccc; }

      ဤ "Billboard" ၏တစ်ဦး၏ ID နှင့်အတူ Element တစ်ခုရဲ့တစ်ဆင်းသက်လာသောနံပါတ်စဉ်မပါတဲ့ list style လိမ့်မယ်။ သငျသညျအတနျးတန်ဖိုးများများအတွက်တူညီလုပ်နိုင်ပါတယ်။

      ul {background-color div.billboard: #ccc; }

      ဒါကဌာနခွဲ "Billboard" ၏တစ်ဦးလူတန်းစားတန်ဖိုးကိုရှိကြောင်းယူဆတယ်။ အထက်ပါ CSS ကိုဒီလူတန်းစားတန်ဖိုးကိုရှိကြောင်းဆိုဌာနခွဲများ၏အတွင်းပိုင်း

      element က style လိမ့်မယ်။

      သငျသညျဆင်းသက်လာ selector တွေကိုနှင့်အတူတကယ်လက်-မိုးသည်းထန်စွာနှင့် verbose ရနိုင်သည်။ သင်သည်သင်၏ရေးသားဖို့ Dreamweaver ကိုသုံးပါလျှင်ဥပမာအားဖြင့် HTML code တွေဟာ , သင်သည်ထိုစာမျက်နှာပေါ်တွင်သင်၏ cursor ၏နေရာချထားအပေါ်အခြေခံပြီး selector Auto-ဖန်တီးလိမ့်မည်ဟုအသစ်က CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေကို add တဲ့အခါ setting ကိုလည်းမရှိ။ အဘယ်အရာကို Dreamweaver ဒီဖြစ်ရပ်အတွက်မယ့်လှသော verbose နှင့်ရှည်ရှည်ဆင်းသက်လာ selector ဖန်တီးဖြစ်ပါတယ်။ ဒါကအများကြီးတိကျတဲ့သင့်ရဲ့အဘို့မလိုအပ်ပါဘူး CSS ကို လုပ်ကိုင်ဖို့။ သင်သည်အဘယ်သို့ကျင့်ချင်သငျသညျအလှနျအဖြစ်ကြောင်းကို selector တွေကိုရှိသည် CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေစရာမလိုဘဲသင် (သူတွေကို styling ဘဲ, သင်တို့ကိုအကျိုးသက်ရောက်ရန်ဆန္ဒရှိကြဘူး) လိုအပျအတိအကျဒြပ်စင်မှဆင်းတူးနိုင်အောင်အလုံအလောက်တိကျတဲ့သောဆင်းသက်လာ selector အကြားချိန်ခွင်လျှာကိုရှာဖွေဖြစ်ပါသည် ကြီးမား။