CSS နဲ့ Fancy ခေါင်းစဉ် heading Make

ခေါင်းစီးသတင်းကိုအလှဆင်ဖို့ Fonts, နယ်ခြားမဲ့နှင့်ပုံများကိုသုံးပါ

ခေါင်းစီးသတင်းအများဆုံးဝဘ်စာမျက်နှာများပေါ်တွင်ဘုံဖြစ်ကြသည်။ တကယ်တော့တော်တော်များများမဆိုစာသားကိုစာရွက်စာတမ်းသင်ဖတ်နေရာ၏ခေါင်းစဉ်ကိုသိသောကြောင့်အနည်းဆုံးခေါင်းစဉ်ရှိသည်ဖို့ကြတယ်။ h1, h2, h3, h4, H5 နှင့် h6 - ဤခေါင်းကြီးပိုင်းတွင် element တွေကိုဦးတည်သည့် HTML ကို အသုံးပြု. coded နေကြသည်။

တချို့က်ဘ်ဆိုက်များတွင်, သငျသညျခေါင်းကြီးပိုင်းတွင်သည်ဤဒြပ်စင်မသုံးဘဲ coded နေကြသည်ကွောငျးတှေ့နိုငျသညျ။ အဲဒီအစား, ခေါင်းကြီးပိုင်းတွင်သီးခြားလူတန်းစားသူတို့ကိုဆက်ပြောသည် attribute တွေ, ဒါမှမဟုတ်လူတန်းစားဒြပ်စင်များနှင့်ကွဲပြားခြင်းနှင့်အတူအပိုဒ်သုံးနိုင်ပါသည်။ ကျွန်မမကြာခဏဒီမမှန်ကန်ကြောင်းအလေ့အကျင့်နှင့်ပတ်သက်ပြီးနားမထောင်အဆိုပါအကြောင်းရင်းဒီဇိုင်နာ "ခေါင်းစဉ်ကိုကြည့်လမ်းကိုကြိုက်နှစ်သက်ပါဘူး" သောကွောငျ့ဖွစျသညျ။ ပုံမှန်အားဖြင့်ခေါင်းစဉ်တစ်ခုစာမျက်နှာရဲ့စာသားရဲ့ကြွင်းသောအရာထက်အများကြီးပိုကြီးတဲ့စာလုံးအရွယ်အစားအတွက်ပြပေးသည့်အထူးသဖြင့် h1 နှင့် h2 ဒြပ်စင်ရဲရင့်တွင်ပြသကြပြီးအရွယ်အစားပိုကြီးဖြစ်ကြ၏။ ဤဒြပ်စင်သာ default အကြည့်ဖြစ်ပါတယ်စိတျထဲမှာသိမ်းဆည်းထားပါ! CSS နဲ့, သင်ချင်တယ်သို့သော်ကြည့်ဦးတည်စေနိုငျပါသညျ! သငျသညျ, အစာလုံးအရွယ်အစားကိုပြောင်းလဲအဆိုပါရဲရင့်ကိုဖယ်ရှား, ဒါကြောင့်အများကြီးပိုနိုင်ပါ။ ခေါင်းစဉ်စာမျက်နှာရဲ့ခေါင်းကြီးပိုင်းတွင် code ရန်သင့်လျော်သောနည်းလမ်းဖြစ်သည်။ ဤတွင်အချို့သောအကြောင်းပြချက်အဘယ်ကြောင့်ဖြစ်ပါသည်။

အဘယ်ကြောင့်အသုံးပြုမှုအဲဒီအစား DIVs နှင့်စတိုင်ထက် Tags: ခေါင်းစီး

Tags: ခေါင်းစီးကဲ့သို့ပင်ရှာဖွေရေးအင်ဂျင်


ဒါကခေါင်းစဉ်ကိုသုံးပါနှင့်မှန်ကန်သောနိုင်ရန်အတွက်သူတို့ကိုအသုံးချဖို့အကောင်းဆုံးအကြောင်းပြချက်ဖြစ်ပါတယ် (ဆိုလိုသည်မှာ။ h1, ထို့နောက်စသည်တို့ကို, ထို့နောက် h3, h2) ။ search engines စာသားတစ်ခု semantic တန်ဖိုးကိုစရာရှိသောကြောင့် tags များဦးတည်အတွင်း၌ထည့်သွင်းစာပို့ဖို့အမြင့်ဆုံးတွက်ဆပေးပါ။ တနည်းအားဖြင့်သင့်ရဲ့စာမျက်နှာခေါင်းစဉ် H1 labeling အသုံးပြုပုံသင်သည်ထိုစာမျက်နှာ၏ # 1 အာရုံစိုက်ကြောင်းရှာဖွေရေးအင်ဂျင်ပင့်ကူပြောပြပါ။ H2 ခေါင်းစဉ်ဒါအပေါ် # 2 အလေးပေးရှိသည်, ။

သငျသညျဒွန် & # 39; t ကိုသင်ကသင့်ရဲ့ခေါင်းစီးသတင်း Define ရန်အသုံးပြုဘယ်အရာကို Classes ရဲ့ကိုသတိရပါရန်ရှိ

သင်တို့ရှိသမျှသည်သင်၏ Web စာမျက်နှာများ, ရဲရင့် 2em နှင့်အဝါရောင်ကြောင်းတစ်ခု H1 ရှိသည်သွားကြသည်ကိုငါတို့သိကြ၏သောအခါ, သင်သည်သင်၏ကိုနှိပ်ပြီးအတွက်တစ်ချိန်ကကြောင်းသတ်မှတ်နိုင်ပြီးအမှုကိုပြုလိမ့်မည်။ သင်သည်အခြားစာမျက်နှာထည့်သွင်းဖွင့်တဲ့အခါမှာ 6 လအကြာ, သင်ရုံသင့်စာမျက်နှာ၏ထိပ်မှတစ်ဦး H1 tag ကို add သင်အဓိကသတ်မှတ်ဖို့အသုံးပြုဘယ်အရာကိုစတိုင် ID သို့မဟုတ်လူတန်းစားထွက်ရှာတွေ့မှပြန်အခြားစာမျက်နှာများတွင်ကိုသွားစရာမလို ခေါင်းစဉ်နှင့်ခွဲအကြီးအကဲများ။

သူတို့ကတစ်ဦးခိုင်ခံ့စာမျက်နှာကောက်ကြောင်းပေး

ဖတ်ရှုဖို့စာသားကိုပိုမိုလွယ်ကူစေပါဖော်ပြထားပါတယ်။ အများဆုံးအမေရိကန်ကျောင်းများသူတို့ကစက္ကူရေးဖို့ရှေ့မှာအကြမ်းဖျင်းရေးသားဖို့ကျောင်းသားများကိုဆုံးမသွန်သင်ဒါကြောင့်ပါပဲ။ သင်တစ်ဦးအော format နဲ့ဦးတည် tags များအသုံးပြုသောအခါသင်၏စာသားအလွန်လျင်မြန်စွာသိသာဖြစ်လာမယ့်ရှင်းရှင်းလင်းလင်းဖွဲ့စည်းပုံမှာရှိပါတယ်။ Plus အားရှိမယ့်အနှစ်ချုပ်များကိုစာမျက်နှာအောပြန်လည်သုံးသပ်နိုငျသော tools များဖြစ်ကြသည်ကို၎င်း, ထိုအကြမ်းဖျင်းဖွဲ့စည်းတည်ဆောက်ပုံများအတွက် tags များဦးတည်အပေါ်အားကိုး။

သင့်ရဲ့စာမျက်နှာစတိုင်ပိတ်ထားတောင်မှအတူ Sense သည် Make မူမည်

လူတိုင်းမရှုမြင်သို့မဟုတ်အသုံးပြုနိုင်သည်စတိုင်စာရွက်များ (နှင့်ဒီနောက်ကျော # 1 မှကြွလာ - ရှာဖွေရေးအင်ဂျင်သင့်ရဲ့စာမျက်နှာများ၏ content (စာသားမ), မစတိုင်စာရွက်များရှုမြင်) နိုင်ပါတယ်။ သငျသညျဦးတည် tag တွေကိုသုံးကြပါတယ်လျှင်ခေါင်းကြီးပိုင်းတွင်တစ်ဦး div tag ကိုအလိုမရှိကြောင်းသတင်းအချက်အလက်များကိုအဘယ်ကြောင့်ဆိုသော်သင်သည်သင်၏စာမကျြနှာကိုပိုမိုသုံးစွဲနိုင်အောင်ပါတယ်။

ဒါဟာမျက်နှာပြင်စာရှုသူများနှင့်ဝက်ဘ်ဆိုက် Accessibility တွေအတွက်အကူအညီ Is

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

သင့်ရဲ့ခေါင်းစီးသတင်း၏စာသားနဲ့စာလုံး Style

ပယ်ရွှေ့ဖို့အလွယ်ကူဆုံးနည်းလမ်း tags များတည်၏ ", ကြီးတွေရဲရင့်ခြင်း, ရုပ်ဆိုး" ပြဿနာစာသားသူတို့ကိုသင်ကြည့်ရှုချင်သောလမ်း style ရန်ဖြစ်ပါသည်။ ကျွန်မအသစ်တစ်ခု website တွင်အလုပ်လုပ်ကိုင်တာတဲ့အခါမှာတကယ်တော့ကျွန်မပုံမှန်အားဖြင့်အဆိုပါအပိုဒ်, h1, h2 နှင့် h3 စတိုင်များပထမဦးဆုံးအရာရေးပါ။ ငါများသောအားဖြင့်ကိုယ့် font ကိုမိသားစုနှင့်အရွယ်အစား / အလေးချိန်နှင့်အတူကပ်။ ဥပမာ, ဒီအသစ်တစ်ခု site ကို (ဤအသုံးပြုနိုင်မယ့်တချို့ဥပမာစတိုင်များဖြစ်ကြသည်) အတွက်ပဏာမစတိုင်စာရွက်ဖြစ်လိမ့်မယ်:

ခန္ဓာကိုယ်, html {margin: 0; padding ကို: 0; } p {font ကို: 1em Arial, ဂျီနီဗာ, Helvetica, sans-serif; } h1 {font ကို: ရဲရင့် 2em "Times New Roman", Times, serif; } h2 {font ကို: ရဲရင့် 1.5em "Times New Roman", Times, serif; } h3 {font ကို: ရဲရင့် 1.2em Arial, ဂျီနီဗာ, Helvetica, sans-serif; }

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

h1 {font ကို: ရဲရင့်စာလုံးစောင်း 2em / 1em "Times New Roman", "က MS Serif", "New York က" serif; margin: 0; padding ကို: 0; အရောင်: # e7ce00; }

နယ်ခြားမဲ့ခေါင်းစီးသတင်း Up ကိုဝတ်စားဆင်ယင်နိုင်သလား

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

h1 {font ကို: ရဲရင့်စာလုံးစောင်း 2em / 1em "Times New Roman", "က MS Serif", "New York က" serif; margin: 0; padding ကို: 0; အရောင်: # e7ce00; နယ်စပ်-top: အစိုင်အခဲ # e7ce00 အလတ်စား; နယ်စပ်-အောက်ခြေ: တွေက dotted # e7ce00 ပါးလွှာ; width: 600px; }

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

တောင်မှပိုပြီး Pizazz များအတွက်သင့်ခေါင်းစီးသတင်းမှနောက်ခံပုံများ Add

ပုံမှန်အားဖြင့် site ကိုခေါင်းစဉ်နှင့်ဂရပ်ဖစ် - အတော်များများကက်ဘ်ဆိုဒ်များကိုတစ်ဦးခေါင်းစဉ်တို့ပါဝင်သည်သောစာမျက်နှာ၏ထိပ်မှာ header ကိုအပိုင်းရှိသည်။ အများစုမှာဒီဇိုင်နာများနှစ်ခုသီးခြားဒြပ်စင်အဖြစ်ဤစဉ်းစားပေမယ့်သင်ကရန်မလိုပါ။ အဆိုပါဂရပ်ဖစ်ရုံခေါင်းစဉ်အဲဒီမှာကိုအလှဆင်ဖို့ဖြစ်ပါတယ်လျှင်, အဘယ်ကြောင့်ခေါငျးစဉျအောကျစတိုင်များကြောင့် add မဟုတ်လော

h1 {font ကို: ရဲရင့်စာလုံးစောင်း 3em / 1em "Times New Roman", "က MS Serif", "New York က" serif; နောက်ခံ: #fff url ( "fancyheadline.jpg") ပြန်လုပ်-x ကိုအောက်ခြေမှာ; padding ကို: 0.5em 0 90px 0; text-align: စင်တာ; margin: 0; နယ်စပ်-အောက်ခြေ: အစိုင်အခဲ # e7ce00 0.25em; အရောင်: # e7ce00; }

ဒီခေါင်းစဉ်ရန်လှည့်ကွက်ငါသည်ငါ့ပုံရိပ်ကို 90 pixels ကိုအရပ်ရှည်ရှည်သိသောကြောင့်ဖြစ်သည်။ (0.5 0 90px 0p padding ကို;) ဒါနဲ့ 90px ၏ခေါင်းစဉ်၏အောက်ဆုံးမှ padding ကိုကဆက်ပြောသည်။ သင်ကခငျြအတိအကျဘယ်မှာဖော်ပြရန်ဖို့ခေါင်းစဉ်၏စာသားကိုရရန်မာဂျင်လိုင်း-အမြင့်နှင့် padding ကိုအတူဆော့ကစားနိုင်ပါတယ်။

ပုံရိပ်တွေတွေကိုအသုံးပြုတဲ့အခါမှတ်မိဖို့အရာတစ်ခုမှာသင်တစ်ဦးရှိပါကကြောင့် တုံ့ပြန်မှုက်ဘ်ဆိုက် အပြောင်းအလဲများကိုမျက်နှာပြင်အရွယ်အစားနှင့်ကိရိယာများပေါ်တွင်အခြေပြုတဲ့အဆင်အပြင်နှင့်အတူ (အရာကိုသင်သင့်ပါတယ်), သငျသညျခေါင်းစဉ်အမြဲတမ်းတူညီ size ကိုဖြစ်လိမ့်မည်မဟုတ်ပေ။ သင်သည်သင်၏ခေါင်းစဉ်တစ်ခုအတိအကျအရွယ်အစားရောက်ထားရန်လိုအပ်ပါတယ်လျှင်ဤပြဿနာကိုဖြစ်ပေါ်စေနိုင်ပါတယ်။ ဒါဟာငါယေဘုယျအားဖြင့်သူတို့ကတခါတရံတွင်ကြည့်ရှုနိုင်ပါတယ်သကဲ့သို့အေးမြတစ်ဦးခေါင်းစဉ်အတွက်နောက်ခံပုံရိပ်တွေကိုရှောင်ကြဉ်ရတဲ့အကြောင်းရင်းတစ်ခုဖြစ်ပါသည်။

ခေါင်းစီးသတင်းအတွက် Image ကိုအစားထိုး

ကသော graphical ခေါင်းစဉ်ဖန်တီးကြောင့်ပုံရိပ်နှင့်အတူဦးတည် tag ကို၏စာသားကိုအစားထိုးဖို့ရန်သင့်အားခွင့်ပြုဘာဖြစ်လို့လဲဆိုတော့ဒါကက်ဘ်ဒီဇိုင်နာများအတွက်အခြားလူကြိုက်များ technique ကိုဖြစ်ပါတယ်။ ဒီအမှနျကို web ဒီဇိုင်နာများအနေဖြင့်တစ်ဦးရှေးဟောင်းအလေ့အကျင့်အလွန်အနည်းငယ်ဖောင့်မှဝင်ရောက်ခွင့်ရှိခဲ့နှင့်၎င်းတို့၏အလုပ်များတွင်ပိုမိုထူးခြားဆန်းပြားဖောင့်ကိုသုံးပါချင်ခဲ့သည်။ ၏မြင့်တက် ကို web ဖောင့် ကိုတကယ်ဒီဇိုင်နာများက်ဘ်ဆိုက်များသို့ချဉ်းကပ်ပုံကိုပြောင်းလဲခဲ့ပါသည်။ ခေါင်းစီးသတင်းယခုမရှိတော့လိုအပ်နေပါသည် embedded သူတို့အားဖောင့်တွေနဲ့ဖောင့်နဲ့ပုံရိပ်တွေ၏ကျယ်ပြန့်မျိုးစုံအတွက်သတ်မှတ်နိုင်ပါသည်။ ကဲ့သို့သော, သင်သာသေးပိုမိုခေတ်မီအလေ့အကျင့်မှ updated ရကြပြီမဟုတ်ကြောင်းအဟောင်းတွေက်ဘ်ဆိုက်များပေါ်တွင်ခေါင်းကြီးပိုင်းတွင်အဘို့အ CSS ကိုရုပ်ပုံများကိုအစားထိုးရှာတွေ့ပါလိမ့်မယ်။

ဂျနီဖာ Krynin ခြင်းဖြင့်မူရင်းဆောင်းပါး။ 9/6/17 အပေါ်ဂျယ်ရမီ Girard တည်းဖြတ်