နမူနာပုံစံစာရွက်နှင့်အတူကက်စကိတ်ပုံစံစာရွက်များခြုံငုံသုံးသပ်ချက်
သငျသညျခြစ်ရာကနေ website တစ်ခုတည်ဆောက်သောအခါ, သတ်မှတ်ထားသောအခြေခံစတိုင်များနှင့်အတူစတင်နိုင်ရန်စမတ်ပါပဲ။ ဒါဟာသန့်ရှင်းတဲ့ပတ္တူများနှင့်လတ်ဆတ်တဲ့စုတ်တံနဲ့စတင်ပြီးနဲ့တူရဲ့။ ဝဘ်ဒီဇိုင်နာများရင်ဆိုင်ရသောပထမဦးဆုံးပြဿနာများ၏တဦးတည်းသောကွောငျ့ဖွစျသညျ ကို web browser များ အားလုံးကွဲပြားခြားနားပါသည်။ အဆိုပါက default font ကိုအရွယ်အစားပလက်ဖောင်းမှပလက်ဖောင်းကနေမတူညီတဲ့ဖြစ်ပါသည်, ကို default font ကိုမိသားစုအချို့ browser များသို့မှသာအပေါ်အခြားသူတွေကိုမကျင့်နေစဉ်ခန္ဓာကိုယ် tag ကိုအပေါ်အမြတ်နှင့် padding ကိုသတ်မှတ်နှင့်ကွဲပြားခြားနားသည်။ သင်၏ဝဘ်စာမျက်နှာများကိုများအတွက် default အစတိုင်များ defining ဤရှေ့နောက်မညီန်းကျင်ကိုရယူပါ။
CSS ကိုနှင့် Character Set
ပထမဦးဆုံးအမှုအရာတို့ကိုပထမဦးဆုံး UTF-8 ရန်သင့် CSS ကိုစာရွက်စာတမ်းများ၏တဲ့ character set ထားကြ၏။ သင်ဒီဇိုင်းစာမျက်နှာများအများစုကိုအင်္ဂလိပ်ဘာသာ၌ရေးထားလျက်ရှိ၏ကြောင်းဖွယ်ရှိသည်စဉ်တွင်အချို့သောဒေသခံစံနှုန်းသတ်မှတ်ထားသော-အဆင်ပြေအောင်စေခြင်းငှါခြားနားသောဘာသာစကားနှင့်ယဉ်ကျေးမှုအခြေအနေတွင်သည်။ သူတို့ဖြစ်ကြသည်အခါ, UTF-8 ဖြစ်စဉ်ရိုးရှင်းစွာ။ ထဲမှာ set ဇာတ်ကောင်ချိန်ညှိခြင်း external style sheet တစ်ခုထက် ကျော်လွန်. မယူပါလိမ့်မယ် HTTP ခေါင်းစီး , ဒါပေမယ့်အားလုံးသည်အခြားအခြေအနေများတွင်ပြုလုပ်မည်။
ဒါဟာတဲ့ character set တင်ထားရန်လွယ်ကူသည်။ အဆိုပါ CSS ကိုစာရွက်စာတမ်းရေး၏ပထမဦးဆုံးလိုင်းများအတွက်:
@charset "UTF-8";သငျသညျအကြောင်းအရာပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုအတွက်သို့မဟုတ်လူတန်းစားများနှင့်် ID အမည်များအဖြစ်အပြည်ပြည်ဆိုင်ရာဇာတ်ကောင်ကိုအသုံးပြုဖို့ပါလျှင်ဤနည်း, စတိုင်စာရွက် နေဆဲမှန်ကန်စွာအလုပ်လုပ်ပါလိမ့်မယ်။
အဆိုပါစာမျက်နှာခန္ဓာကိုယ် Styling
နောက်တစ်နေ့အရာတစ်ဦးက default style sheet လိုအပ်ချက်များကိုမာဂျင်, padding ကိုနှင့်နယ်နိမိတ်ထွက်ကိုသုညမှစတိုင်များဖြစ်ကြသည်။ ဒါကအားလုံး browser များတူညီရာဌာန၌အကြောင်းအရာနေရာနှင့် browser နဲ့အကြောင်းအရာအကြားမည်သည့်အရာ၌ဝှက်ထားသောနေရာများရှိမစပ်ဆိုင်ကြောင်းကိုသေချာစေသည်။ အများဆုံးက web စာမျက်နှာများတွင်ဤစာသားအစွန်းမှနီးကပ်လွန်းဖြစ်ပါသည်, သို့သော်နောက်ခံပုံရိပ်တွေနဲ့ layout ကိုကွဲပြားခြင်းမှန်ကန်စွာတက်စီတန်းနေကြသည်ဒါကြောင့်အဲဒီမှာ start ဖို့အရေးကြီးတယ်။
html, body {margin: 0px; padding ကို: 0px; နယ်စပ်: 0px; }အနက်ရောင်နှင့်အဖြူရောင်ဖို့ default အနောက်ခံအရောင်ကို default foreground သို့မဟုတ် font ကိုအရောင်သတ်မှတ်မည်။ နေစဉ်ခန္ဓာကိုယ်နဲ့အပေါ်သတ်မှတ်ထားသောဤစံအရောင်များရှိခြင်းအများဆုံးဝက်ဘ်စာမျက်နှာဒီဇိုင်းများအဘို့ဤလိမ့်မည်အများဆုံးဖွယ်ရှိပြောင်းလဲမှု, HTML ကို tag ကို ပထမဦးဆုံးမှာဖတ်ပါနှင့်အတူအလုပ်လုပ်ရန်စာမျက်နှာပိုမိုလွယ်ကူစေသည်။
html, body {color: # 000; နောက်ခံ: #fff; }default ဖောင် Styles
အဆိုပါစာလုံးအရွယ်အစားနှင့်ဖောင့်မိသားစုပုံစံဒီဇိုင်းကိုကိုင်ထားပေမယ့် 1 တစ်ဦးက default font ကိုအရွယ်အစားနှင့်အတူစတင်ကြာတခါမလွှဲမရှောင်ကိုပြောင်းလဲလိမ့်မည်ဟုတစ်စုံတစ်ခုများမှာ em နှင့်တစ်ဦးက default font ကို Arial ၏မိသားစု, ဂျီနီဗာ, ဒါမှမဟုတ်တခြား sans-serif font ကို။ EMS ၏အသုံးပြုမှုကိုတတ်နိုင်သမျှလက်လှမ်းစာမျက်နှာကိုစောင့်လျက်, တစ်ဦး sans-serif font ကိုဖန်သားပြင်ပေါ်တွင်ပိုမိုရှင်းလင်းပြသားသောဖြစ်ပါတယ်။
html, ခန္ဓာကိုယ်, p ကြိမ်မြောက်, td, li, dd, ၎င်းကို {font ကို: 1em Arial, Helvetica, sans-serif; }သင်သည်ထိုစာသားကိုတွေ့ပါလိမ့်မယ်ဘယ်မှာအခြားနေရာများတွင်ဖြစ်ပေမယ် p, ကြိမ်မြောက်, td, li, dd နှင့်၎င်းကိုခြေရင်း font ကို defining အဘို့အကောင်းတစ်ဦးက start များမှာပေမည်။ ကိုယ့်အမှုအတွက် HTML နဲ့ခန္ဓာကိုယ် Include, သင်မူကားသာက HTML သို့မဟုတ်ကိုယ်ခန္ဓာအဘို့သင့်ဖောင့်သတ်မှတ်မယ်ဆိုရင်အများကြီး browser များအတွက်ဖောင့်ရွေးချယ်မှု override ။
ခေါင်းစီးသတင်း
HTML ကိုခေါင်းစဉ်သင့်ရဲ့ site ကိုအောကကူညီခြင်းနှင့်ရှာဖွေရေးအင်ဂျင်သင့်ရဲ့ site ကိုသို့ပိုမိုနက်ရှိုင်းရစေသုံးစွဲဖို့အရေးကြီးလှသည်။ စတိုင်များမရှိရင်သူတို့အပေါငျးတို့သပေါ်မှာရှိသမျှမျှမျှတတရုပ်ဆိုး, ဒါ set ကို default စတိုင်များဖြစ်ကြပြီးတစ်ဦးချင်းစီအတှကျ font ကိုမိသားစုနှင့်ဖောင့်အရွယ်အစားသတ်မှတ်။
h1, h2, h3, h4, H5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } H5 {font-size: 0.9em; } h6 {font-size: 0.8em; }ဒွန် & # 39; t ကိုပု Links များမေ့
link ကိုအရောင်များ Styling နီးပါးအမြဲတမ်းဒီဇိုင်းကိုတစ်ဦးဝေဖန်အစိတ်အပိုင်းတစ်ခုဖြစ်တယ်, ဒါပေမဲ့သင်က default စတိုင်များ၌သူတို့ကိုသတ်မှတ်ကြဘူးလျှင်, အခွင့်အလမ်းတွေကိုသင် Pseudo-အတန်းအနည်းဆုံးတဦးတည်းကိုမေ့လျော့လိမ့်မယ်ဖြစ်ကြသည်။ အပြာရောင်အပေါ်အချို့သောအသေးစားအပြောင်းအလဲသူတို့နှင့်အတူသတ်မှတ်ပြီးနောက်သင်သတ်မှတ်ဆိုက်များအတွက်အရောင် palette ရှိတခါသူတို့ကိုပြောင်းပေးပါ။
အဆိုပါတင်ထားရန် လင့်များ ပြာအရိပ်ထဲမှာ set:
- အပြာအဖြစ်လင့်များ
- နက်ပြာရောင်အဖြစ်လင့်များလည်ပတ်ခဲ့
- အလင်းအပြာအဖြစ်လင့်များပျံဝဲ
- ပင်အပြာ paler အဖြစ်တက်ကြွစွာလင့်များ
ဒီဥပမာမှာပြထားတဲ့အတိုင်း:
တစ်ဦး: link ကို {color: # 00f; } တဲ့: {အရောင်သွားရောက်ခဲ့ပြီး: # 009; } တဲ့: မောက်စ်တင် {color: # 06f; } တဲ့: တက်ကြွ {color: # 0cf; } ကငါအတန်းမဆိုမေ့လျော့မည်မဟုတ်ကြောင်းသေချာနှင့်လည်း, အပြာအနီနှင့်ခရမ်းရောင်ကို default ထက်သူတို့ကိုအနည်းငယ်လျော့နည်းအသံကျယ်စေသည်တစ်ဦးမျှမျှတတဗလာအရောင်အစီအစဉ်နှင့်အတူလင့်များ styling အားဖွငျ့ဖွစျသညျ။အပြည့်အဝစတိုင်စာရွက်
ဤတွင်အပြည့်အဝစတိုင်စာရွက်ဖြစ်ပါသည်:
@charset "UTF-8"; html, body {margin: 0px; padding ကို: 0px; နယ်စပ်: 0px; အရောင်: # 000; နောက်ခံ: #fff; } html, ခန္ဓာကိုယ်, p ကြိမ်မြောက်, td, li, dd, ၎င်းကို {font ကို: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, H5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } H5 {font-size: 0.9em; } h6 {font-size: 0.8em; } တဲ့: link ကို {color: # 00f; } တဲ့: {အရောင်သွားရောက်ခဲ့ပြီး: # 009; } တဲ့: မောက်စ်တင် {color: # 06f; } တဲ့: တက်ကြွ {color: # 0cf; }