CSS နဲ့တစ်ဦးကို Notepad Created က်ဘ်စာမျက်နှာ Styling

10 01

အဆိုပါ CSS ကိုစတိုင်စာရွက် Create

ကျွန်တော် HTML တို့အတွက်သီးခြားစာသားဖိုင် created တူညီသောလမ်းကိုသင် CSS ကိုများအတွက်စာသားဖိုင်ဖန်တီးပါလိမ့်မယ်။ သငျသညျဤလုပ်ငန်းစဉ်များအတွက်ပုံရိပ်ယောင်များလိုအပ်ခဲ့လျှင်ပထမဦးဆုံးသင်ခန်းစာကြည့်ရှုပါ။ ဤတွင်ကို Notepad ထဲမှာသင့်ရဲ့ CSS ကိုစတိုင်စာရွက်ဖန်တီးရန်ခြေလှမ်းနေသောခေါင်းစဉ်:

1. တစ်ဦးအချည်းနှီးသောပြတင်းပေါက်ရဖို့ကို Notepad ထဲမှာ File> New ကိုရှေးခယျြပါ
2. အမျှကြော်ငြာကို Save လုပ်ရန်ဖိုင်မှတ်တမ်း <နှိပ်ခြင်းအားဖြင့် CSS ကိုအဖြစ်ဖိုင်ကိုသိမ်းဆည်းရန် ...
3. သင့် hard drive ကိုအပျေါ my_website ဖိုင်တွဲသို့သွားရန်
4. ရန် "အားလုံးဖိုင်များ": ကို "အမျိုးအစားအဖြစ် Save" ကိုပြောင်းလဲပါ
5. သင့်ရဲ့ဖိုင်ကို "ကိုနှိပ်ပြီး" အမည်ပါ (ကိုးကားပယ်စွန့်ခွာ) နှင့် Save ကိုကလစ်နှိပ်ပါ

10 02

သင့်ရဲ့ HTML ကိုဖို့ CSS ကိုစတိုင်စာရွက်လင့်ထားသည်

သင်သည်သင်၏ web site ကိုများအတွက်ကတော့ style sheet ရရှိပါသည်ပြီးတာနဲ့သင်က Web page ကိုယ်တိုင်ကကြောင့်ပေါင်းသင်းဖို့လိုအပ်ပါလိမ့်မယ်။ ဒီလိုလုပ်ဖို့သင်က link tag ကိုသုံးပါ။ သင့်ရဲ့ pets.htm document ရဲ့ tag များအတွင်းဘယ်နေရာမှာမဆိုအောက်ပါ link ကို tag ကိုချထားပါ:

10 03

အဆိုပါစာမျက်နှာမာဂျင်ကို fix

သငျသညျကွဲပြားခြားနားသော browser များအဘို့ XHTML ကရေးသားပါတယ်အခါ, သငျသညျသင်ယူပါလိမ့်မည်တဦးတည်းအရာခပ်သိမ်းသောသူတို့သည်အမှုအရာဖော်ပြရန်ဘယ်လိုများအတွက်ကွဲပြားခြားနားသောမာဂျင်များနှင့်စည်းမျဉ်းများရှိသည်ထင်ရသောကြောင့်ဖြစ်သည်။ သင့်ရဲ့ site ကိုအများဆုံး browser များအတွက်တူညီတဲ့ကြည့်သေချာဖြစ်ဖို့အကောင်းဆုံးနည်းလမ်းတစ်ခုမာဂျင်ကဲ့သို့အမှုအရာတို့ကို browser ကိုရှေးခယျြမှုမှ default ဖို့ခွင့်မပြုရန်ဖြစ်ပါသည်။

ငါစာသားပတျဝနျးကငျြအဘယ်သူမျှမပို padding ကိုသို့မဟုတ်အနားသတ်နှင့်တကွ, အထက်လက်ဝဲဘက်ထောင့်၌ငါ့စာမကျြနှာကိုစတင်ရန်ကြိုက်တတ်တဲ့။ ငါ pad ပါရန် contents တွေကိုသွားရင်တောင်ငါအတူတူပင်အလွတ် slate နှင့်အတူစတင်တာပါဒါမှကျနော်သုညဖို့အမြတ်ထားကြ၏။ ဒီလိုလုပ်ဖို့, သင်တို့၏ကိုနှိပ်ပြီးစာရွက်စာတမ်းမှအောက်ပါအချက်များကို add:

html, body {
margin: 0px;
padding ကို: 0px;
နယ်စပ်: 0px;
လက်ဝဲ: 0px;
ထိပ်တန်း: 0px;
}

10 04

ယင်းစာမျက်နှာပေါ်တွင်စာလုံးပြောင်းခြင်း

အဆိုပါ font ကိုမကြာခဏသင်တစ်ဦးက Web စာမျက်နှာပေါ်တွင်ပြောင်းလဲပစ်ချင်ပါလိမ့်မယ်သောပထမဦးဆုံးအရာဖြစ်ပါတယ်။ တစ်ဦးက Web page ပေါ်တွင်က default font ကိုသင် font ကိုသတ်မှတ်မရကြပါလျှင်ဒါသင်အမှန်တကယ်သင့်စာမျက်နှာနဲ့တူကြည့်ရှုမည်အရာကိုသိမည်မဟုတ်, အရုပ်ဆိုးဖြစ်သဖြင့်, Web browser ကိုသူ့ဟာသူတက်အမှန်တကယ်ဖြစ်ပါသည်နိုင်ပါတယ်။

ပုံမှန်အားဖြင့်, သင်သည်အပိုဒ်ပေါ်တွင်စာလုံးကိုပြောင်းလဲရန်, သို့မဟုတ်တခါတရံတွင်တစ်ခုလုံးကိုစာရွက်စာတမ်းသူ့ဟာသူပေါ်လိမ့်မယ်။ ဒီ site ငါတို့သည် header ကိုနှင့်အပိုဒ်အဆငျ့မှာဖောင့်သတ်မှတ်ရပါလိမ့်မယ်။ သင့်ရဲ့ကိုနှိပ်ပြီးစာရွက်စာတမ်းမှအောက်ပါ Add:

p, li {
ဖောင်: 1em Arial, Helvetica, sans-serif;
}
h1 {
ဖောင်: 2em Arial, Helvetica, sans-serif;
}
h2 {
ဖောင်: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
ဖောင်: 1.25em Arial, Helvetica, sans-serif;
}

ငါအပိုဒ်နှင့်စာရင်းပစ္စည်းများကိုအဘို့အကြှနျုပျ၏အခြေစိုက်စခန်းအရွယ်အစားအဖြစ် 1em နဲ့စတင်, ပြီးတော့ငါ့အခေါင်းကြီးပိုင်းတွင်အဘို့အရွယ်အစားကိုသတ်မှတ်ဖို့ကိုအသုံးပြုခဲ့သည်။ ကျွန်မပိုမိုနက်ရှိုင်း h4 ထက်ခေါင်းစဉ်သုံးစွဲဖို့မျှော်လင့်ထားပါဘူး, ဒါပေမယ့်သင်ကစီစဉ်လျှင်အဖြစ်ကောင်းစွာကြောင့် style ချင်ပါလိမ့်မယ်။

10 05

သင့်ရဲ့ Links များပိုစိတ်ဝင်စားဖို့ Making

လင့်များများအတွက် default အအရောင်များ unvisited များအတွက်အပြာနှင့်အနီမောင်းသောဖြစ်ကြပြီးအသီးသီးလင့်များသွားရောက်ခဲ့သည်။ ဒီစံနှုန်းဖြစ်ပြီးနေစဉ်, ကသင့်ရဲ့စာမကျြနှာမြား၏အရောင်အစီအစဉ် fit, ဒါရဲ့ပြောင်းလဲမသွားပါစေလိမ့်မယ်။ သင့်ရဲ့ကိုနှိပ်ပြီးဖိုင်များတွင်အောက်ပါ add:

တစ်ဦး: link ကို {
font-family: Arial, Helvetica, sans-serif;
အရောင်: # FF9900;
text-decoration: မဉျြးသား, အလေးအနကျပွော;
}
တစ်ဦး: {လည်ပတ်ခဲ့
အရောင်: # FFCC66;
}
တစ်ဦး: မောက်စ်တင် {
နောက်ခံ: #FFFFCC;
font-အလေးချိန်: ရဲရင့်;
}

ငါသုံး link ကိုစတိုင်များကို set up, အကာ: အကို default အဖြစ် link ကိုတစ်ဦး: မောက်စ်တင်: ကငါအရောင်နှင့်တစ်ဦးပြောင်းလဲသွားရောက်လည်ပတ်ခဲ့သည့်အခါအဘို့အသွားရောက်ခဲ့သည်။ အတူ: မောက်စ်တင်ကိုငါ link ကိုတစ်ဦးနောက်ခံအရောင်ရနှင့်နှိပ်လိုက်ခံရဖို့ link တစ်ခုရဲ့အလေးပေးဖို့ရဲရင့်သွားပါရှိသည်။

10 06

အဆိုပါ Navigation ပုဒ်မ Styling

ကျွန်တော်ပထမဦးဆုံး HTML မှာသွားလာမှု (အိုင်ဒီ = "nav") အပိုင်းထားကတည်းကရဲ့ပထမဦးဆုံးက style ကြကုန်အံ့။ ကျနော်တို့အဓိကကစာသားကဆန့်ကျင်အထိဝင်တိုးမည်မဟုတ်ကြောင်းဒါကြောင့်ဖြစ်နှင့်လက်ျာဘက်မှာနေတဲ့ကျယ်ပြန့်အနားသတ်ထားသငျ့သညျကိုဘယ်လိုကျယ်ပြန့်ညွှန်ပြရန်လိုအပ်သည်။ ငါသည်လည်းလှည့်ပတ်နေတဲ့နယ်စပ်ထားတော်မူ၏။

သင့်ရဲ့ကိုနှိပ်ပြီးစာရွက်စာတမ်းမှအောက်ပါ CSS ကို Add:

#nav {
width: 225px;
margin-ညာဘက်: 15px;
နယ်စပ်: အလယ်အလတ်အစိုင်အခဲ # 000000;
}
#nav li {
list-style: none;
}
.footer {
font-size: .75em;
ရှင်းရှင်းလင်းလင်း: နှစ်ဦးစလုံး;
width: 100%;
text-align: စင်တာ;
}

list-style property ကသေးငယ်နှင့်အပိုင်းအတွင်းဗဟိုပြုဖြစ်ရန်မကျည်ဆံသို့မဟုတ်နံပါတ်များ, နှင့် .footer စတိုင်များမူပိုင်ခွင့်အပိုင်းမှာရှိသည်ဖို့သွားလာမှုအပိုင်းအတွင်းရှိစာရင်းဖွင့်ထားသည်။

10 07

ပင်မပုဒ်မတည်နေရာအား

absolute positioning ကိုနှင့်သင်၏အဓိကအပိုင်းတည်နေရာအားဖြင့်သင်ကသင်၏ Web စာမျက်နှာပေါ်တွင်နေထိုင်ချင်အတိအကျရှိရာကနေပါဦးမည်သေချာစေနိုင်ပါတယ်။ ငါငါ့ဥစ္စာပိုကြီးတဲ့မော်နီတာ accomodate မှကျယ်ပြန့် 800px လုပ်, သင်မူကားသေးငယ်တဲ့မော်နီတာရှိပါက, သင်သည်ထိုကျဉ်းစေချင်ပေလိမ့်မည်။

သင့်ရဲ့ကိုနှိပ်ပြီးစာရွက်စာတမ်းထဲတွင်အောက်ပါ Place:

#main {
width: 800px;
ထိပ်တန်း: 0px;
အနေအထား: အကြွင်းမဲ့အာဏာ;
လက်ဝဲ: 250px;
}

10 08

သင့်ရဲ့အပိုဒ် Styling

ငါပြီးသားအထက်အပိုဒ် font ကိုမသတ်မှတ်ပါဘူးကတည်းကငါကပိုကောင်းထွက်မတ်တပ်ရပ်စေရန်တစ်ဦးချင်းစီအပိုဒ်ကိုအနည်းငယ်အပို "ကန်" ပေးချင်တယ်။ ငါတယောက်တည်းပဲပုံရိပ်ထက်အပိုဒ်ကိုပိုပြီးမီးမောင်းထိုးပြကြောင်းထိပ်ပေါ်မှာတစ်နယ်စပ်ချပြီးဖွငျ့ဤအမှုကိုပြု၏။

သင့်ရဲ့ကိုနှိပ်ပြီးစာရွက်စာတမ်းထဲတွင်အောက်ပါ Place:

.topline {
နယ်စပ်-top: အထူအစိုင်အခဲ # FFCC00;
}

ငါမဟုတ်ဘဲရုံကြောင်းလမ်းအတွက်အားလုံးအပိုဒ် defining ထက် "topline" ဟုခေါ်နေတဲ့လူတန်းစားအဖြစ်လုပ်ဖို့ဆုံးဖြတ်ခဲ့သည်။ ငါထိပ်တန်းအဝါရောင်လိုင်းမရှိဘဲအပိုဒ်ရှိသည်ဖို့လိုခငျြဆုံးဖြတ်မယ်ဆိုရင်ဒီနည်းလမ်း, ငါသည်ရိုးရှင်းစွာအပိုဒ် tag ထဲမှာအတန်း = "topline" ချွတ်ထားခဲ့နိုင်သည်ကထိပ်နယ်စပ်ရှိလိမ့်မည်မဟုတ်ပေ။

10 09

အဆိုပါပုံများ Styling

ပုံရိပ်တွေပုံမှန်အားဖြင့် image ကို link တစ်ခုဖြစ်တယ်, ဒါပေမဲ့ငါကိုအလိုအလျောက်နယ်စပ်ပိတ်သောငါ၏ CSS ကိုကိုနှိပ်ပြီးအတွင်းလူတန်းစားရှိသည်ဖို့ကြိုက်တယ်မဟုတ်လျှင်ဒီအစဉ်အမြဲမြင်နိုင်သည်မဟုတ်, သူတို့ကိုလှည့်ပတ်နေတဲ့နယ်စပ်ရှိသည်။ ဒီကိုနှိပ်ပြီးဘို့, ငါ "noborder" အတန်းအစား created နှင့်စာရွက်စာတမ်းများတွင်ရုပ်ပုံများကိုအများစုကဒီလူတန်းစား၏အစိတ်အပိုင်းတစ်ခုဖြစ်ပါသည်။

ဤအပုံရိပ်များ၏အခြားအထူးအစိတ်အပိုင်းစာမျက်နှာပေါ်တွင်၎င်းတို့၏တည်နေရာဖြစ်ပါတယ်။ ငါသည်ထိုသူတို့ကိုသူတို့ align ဖို့စားပွဲမသုံးဘဲတွင်ရှိခဲ့သောအပိုဒ်၏အစိတ်အပိုင်းတစ်ခုဖြစ်လိုခဲ့သည်။ ဒီလိုလုပ်ဖို့အရိုးရှင်းဆုံးနည်းလမ်းကတော့ float CSS ကို property ကိုသုံးရန်ဖြစ်ပါသည်။

သင့်ရဲ့ကိုနှိပ်ပြီးစာရွက်စာတမ်းထဲတွင်အောက်ပါ Place:

#main img {
float: left;
margin-ညာဘက်: 5px;
margin-အောက်ခြေ: 15px;
}
.noborder {
နယ်စပ်: 0px none;
}

သငျသညျမွငျနိုငျသကဲ့သို့, ပုံရိပ်တွေအပေါ်သတ်မှတ်ထားအနားသတ်ဂုဏ်သတ္တိများသေချာသူတို့အပိုဒ်အတွက်သူတို့အနားမှာသောမြောစာသားကိုစစ်ချီရိုက်ချိုးကြသည်မဟုတ်ကြောင်းစေရန်လည်းရှိပါတယ်။

10 10

အခုဆိုရင်သင့်ပြီးစီးစာမျက်နှာကိုကြည့်ပါ

သင်သည်သင်၏ CSS ကိုကယ်တင်ခြင်းသို့ရောက်ကြပါတယ်ပြီးတာနဲ့သင့်ကို Web browser ထဲမှာ pets.htm စာမျက်နှာကိုပြန်ဖွင့နိုင်ပါတယ်။ သင့်စာမျက်နှာပုံရိပ်တွေ aligned နှင့်စာမျက်နှာ၏လက်ဝဲဘက်အပေါ်မှန်မှန်ကန်ကန်နေရာချသွားလာမှုနှင့်အတူ, ဒီပုံထဲမှာပြထားတဲ့တဦးတည်းဆင်တူကြည့်ရှုသင့်ပါတယ်။

ဒီ site အဘို့သင့်ပြည်တွင်းရေးစာမျက်နှာများအားလုံးအတှကျသည်ဤတူညီတဲ့ခြေလှမ်းတွေကိုလိုက်နာပါ။ သင်သည်သင်၏အညွှန်းသည်စာမျက်နှာအဘို့တယောက်စာမျက်နှာရှိသည်ဖို့ချင်တယ်။