CSS ကို: စားပွဲပေါ်မှာဒီဇိုင်း။ မှတ်ပုံတင်ဥပမာ

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

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

စားပွဲပေါ်မှာနယ်စပ်

CSS ကိုစားပွဲပေါ်မှာစတိုင်ဒီဇိုင်းကိုအမြဲတမ်းနယ်စပ် (ဘောင်) နဲ့ဂိမ်းတစ်ခုပါဝင်သည်။ အားလုံးက default စားပွဲကောက်ကြောင်းဘောင်မရှိကြပေ။ ဆိုလိုသည်ကားက 0 င် pixels ကိုညီမျှသည်။ ဤအရာကားပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုနယ်စပ်ခြင်းဖြင့်တညျ့နိုငျသညျ။

သငျသညျတစျခုလုံးကိုစားပွဲပေါ်မှာအဘို့ပြင် frame ကိုသတ်မှတ်နိုင်သည်

စားပွဲ {နယ်စပ်: 3px အစိုင်အခဲအနက်ရောင်; }

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

ကြိမ်မြောက်, td {နယ်စပ်: 3px အစိုင်အခဲအနက်ရောင်;}

အဆိုပါအထူနှင့်အရောင်, သင်သည်မည်သည့်သတ်မှတ်နိုင်ပါတယ်။ ဆဲလ် splicing အခါနယ်နိမိတ်နှစ်ဆကြသည်မဟုတ်ကြောင်းစိတ်ကိုထားပါ။

အဆိုပါစကားလုံးတစ်ဦးအစိုင်အခဲစဉ်ဆက်မပြတ်မှတ်ပုံတင်ရေးဆိုလိုသညျ။ သင်သည်အခြားတန်ဖိုးများကိုသတ်မှတ်နိုင်ပါတယ်။

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

နယ်စပ်ပိုင်ဆိုင်မှုဘုတ်အဖွဲ့အပေါ်လည်းသတ်မှတ်ထားသောနိုင်ပါသည်။ အဆိုပါနယ်နိမိတ်ကိုသာထိပ်, အောက်ခြေ, လက်ဝဲသို့မဟုတ်လက်ျာဘက်၌အဘို့သတ်မှတ်နိုင်ပါသည်။ အချို့ကိစ္စများတွင်ပါကတစ်ကြိမ်မှာတစျခုလုံးကိုစားပွဲများအတွက်ဘောင်နှင့်အတူတစ်ဦးဖြစ်နိုင် option ကိုမဟုတျပါဘူးလို့ပဲ။

စားပွဲ {နယ်စပ်-top: 1px အစိုင်အခဲအနီရောင်; }

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

စားပွဲပေါ်မှာ header ကို

စားပွဲတင် header ကို <စာတန်း> အဆိုပါ tag ကို အသုံးပြု. သတ်မှတ်ထားသောနိုင်ပါသည်။ ဤသည် tag ကိုဒဏ်ငွေ-tuning များအတွက်ဂုဏ်သတ္တိများအများကြီးမှတ်ပုံတင်ရန်ဖို့ CSS ကိုအတွက်ဖြစ်နိုင်ပါတယ်။ က element တွေကိုသင်ချင်သောလမ်းစီမံကိုင်တွယ်ရန်ဖြစ်နိုင်သောကြောင့်အဆိုပါ CSS ကိုစားပွဲပေါ်မှာဒီဇိုင်းကောင်းလှ၏။

ဒါကခေါင်းစဉ် (ဥပမာ "စားပွဲတင် 1" ကဲ့သို့) စာအုပ်တွေထဲမှာစံကဲ့သို့တူညီသောလမ်းထဲမှာဖော်ပြပါတယ်။

သင်ကခေါင်းစဉ်များနှင့်ပိုင်ဆိုင်မှုစာတန်း-side (ထိပ်သို့မဟုတ်အောက်ဆုံး) ၏တည်နေရာကိုသတ်မှတ်နိုင်ပါတယ်။ လက်ဝဲသို့မဟုတ်လက်ယာ align လုပ်ဖို့အိမ်ခြံမြေ text-align သတ်မှတ်ပါတယ်။

နောက်ခံစားပွဲ

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

အရောင်နာမတော်ကိုအမှီ ပြု. အဖြစ်သတ်မှတ်ထားသောနှင့်ကွဲပြားခြားနားသော encoding မျိုးစုံနိုင်ပါသည်။ ထို့အပြင်ခုနှစ်, သငျသညျကိုအောက်ပါသတ်မှတ်နိုင်သည်

• ပွင့်လင်း - ပွင့်လင်း။
• အမွေခံရ - အရောင်မိဘဒြပ်စင်၏အဖြစ်အတူတူပင်ဖြစ်ပါသည်။
• ကနဦး - က default ။

လင်းမြင်သာမှုနှင့်အတူ option ကို CSS ကိုဖိုင်ထဲမှာစာသားအားလုံးကိုကျောက်ပြားတစျအရောင်အတွက်ဖန်ဆင်းထားရာထိုကိစ္စများအတွက်အသုံးပြုနိုင်ပါတယ်, ဒါပေမယ့်ဤကိစ္စတွင်အတွက်မလိုအပ်လည်းမရှိ။

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

url ( 'URL ကို')

ဖိုင်ကိုမှလမ်းကြောင်းကိုဆွေမျိုးသို့မဟုတ်အကြွင်းမဲ့အာဏာဖြစ်စေဖြစ်နိုင်သည်။

ပိုမိုရှုပ်ထွေးစွာတစ်ဦး gradient ကိုအတူပြုနိုင်သည်

• linear-gradient ကို ();
• radial-gradient ကို ();
• ) (ထပ်ကျော့-linear-gradient ကို () နဲ့ထပ်-radial-gradient ကို - gradient ကိုထပ်ခါတလဲလဲ။

နောက်ခံဆဲလ်

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

အဆိုပါ alternate အပြင်၌၎င်း, သင်တစ်ဦးအထူးသဖြင့်ကော်လံသို့မဟုတ်အတန်းများ၏အရေအတွက်ကိုသတ်မှတ်နိုင်ပါတယ်။ ဤကဲ့သို့သောဥပမာ:

• TR: nth-ကလေးက (တောင်) { ... } - ယှက်သတ်မှတ်;
• TR: nth-ကလေးက (1) { ... } - သီးခြားအတန်း၏ဂုဏ်သတ္တိများ၏အရိပ်အယောင်;
• td: nth-ကလေးက (တောင်) { ... } - ကော်လံပြောင်းတစ်ခုအရိပ်အယောင်;
• td: nth-ကလေးက (1) { ... } - သီးခြားကော်လံ၏ဂုဏ်သတ္တိများတစ်ခုအရိပ်အယောင်။

sequence ကိုနှင့်နံပါတ်များအပြင်သတ်မှတ်နိုင်သည် - ပထမဦးဆုံး (td: ပထမဦးဆုံးကလေး) သို့မဟုတ်နောက်ဆုံး (td: နောက်ဆုံးကလေး) ။

ဆဲလ်အကြားကွာဟမှု

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

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

နယ်စပ်-ပြိုကျ: ပြိုကျ

ဒါပေမယ့်လည်းအကွာအဝေး, ဆန့်ကျင်ပေါ်, တိုးမြှင့်သင့်ကြောင်းတွေ့ကြုံတတ်၏။ ထို့အပြင်ကွာဟချက်၏အရွယ်အစားကော်လံအကြားနှင့်လိုင်းများအကြားအဖြစ်သတ်မှတ်ထားသောနိုင်ပါသည်။ တစ်ဦးတန်ဖိုး (အစားပြိုကျ) ထိုညွှန်ပြရန်:

နယ်စပ်-ပြိုကျ: သီးခြား

သို့သော်ထိုကဲ့သို့လုပ်ဆောင်မှုကြောင့်ဆဲလ်တွေခွဲခြားရန်လိုအပ်သောကြောင်းညွှန်ပြပါလိမ့်မယ်။ ဒါဟာသူတို့ရဲ့ရှယ်ယာဖြစ်သကဲ့သို့, အပိုဆောင်းပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုညွှန်ပြ:

နယ်စပ်-Space: 20px ။

သင်တန်းများနှင့်စစ်ကြောင်းများအကြားကွဲပြားခြားနားသောအကွာအဝေးကိုသတ်မှတ်ချင်လျှင်, အရာနှစ်ခုဆိုတာကိုပြသ:

နယ်စပ်-ခြား: 10px20px ။

အဆိုပါ browser များအတွက်ခြားနားချက်

အဆိုပါ CSS ကိုဒီဇိုင်းအတွက်စားပွဲ browser ကိုပေါ် မူတည်. ကွဲပြားခြားနားသည်ကြည့်ရှုစေခြင်းငှါစိတ်ကိုထားပါ။ အထူးသဖြင့်မကောင်းတဲ့ CSS ကိုအတွက်တီထွင်မှုကိုမထောက်ပံ့ကြောင်းအဟောင်းတွေဗားရှင်းနဲ့အမှုဖြစ်ပါတယ်။

အထက်ပါဒစ်ဂျစ်တယ်တန်ဖိုးများဘောင်အထူ၏ဥပမာတစ်ခုဖြစ်ပါတယ်။

ဒီဥပမာအဘို့, ရုံကလွဲပြီးများအတွက်ဘောင်၏အထူ။

နယ်စပ်စတိုင်များလည်းကိုအလွန်ကွာခြား။

ထို့ကြောင့်ဖွံ့ဖြိုးတိုးတက်မှုအတွက်အမြဲကွဲပြားခြားနားသော browser များအတွက်ရလဒ်ကိုကြည့်ပါ။

CSS ကိုဒီဇိုင်းအတွက်စားပွဲ browser ကိုအမျိုးအစားကိုစစျဆေးဖို့အကြံပြုခဲ့သည်။ အထူးသဖြင့်ကြီးမားသောပြဿနာက Internet Explorer ဗားရှင်းအဟောင်းနှင့်အတူအသုံးပြုသူများဖြစ်လေ့ရှိတယ်။

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

အများစုကပြဿနာတွေမှောင်မိုက်အရိပ်ကနေပျေါပေါ။

CSS ကို: စားပွဲတင် Format ကိုဥပမာများ

မှတ်ပုံတင်ခြင်းအတော်လေးမတူညီကြစေနိုင်ပါတယ်။ ဒါဟာအားလုံးတပြင်လုံးကို site ကိုနှင့်၎င်း၏ဒီဇိုင်းပေါ်မူတည်ပါသည်။ အားလုံးအရောင်များပေါင်းစပ်နှင့် variegated ရပါမည်။ ဒါ့အပြင်ကကြီးမြတ်အခန်းကဏ္ဍနှင့်အရသာ developer စေသည်။ အလှတရား၏ Sense သည်အားလုံးကွဲပြားခြားနားသည်။

ကျနော်တို့အမျိုးမျိုးသောစားပွဲအချို့ကိုဥပမာပေးပါ။ အထက်ပါပုံကိုနောက်ခံအရောင်နှင့်နယ်စပ်နှင့်အတူ tilt နဲ့ကစား၏အသုံးပြုမှုကိုပြသသည်။

အတော်များများကမျက်စိအသုံးပြုသူများကိုဖြတ်မည်မဟုတ်ကြောင်းလှပသောသပ်သပ်ရပ်ရပ်ဒီဇိုင်းစိတ်ဝင်စားဖို့ဥပမာဖြစ်လိမ့်မည်။ ဤသည်ဂျနီးပါးမည်သည့်အခြေအနေမျိုးတွင်သင့်လျော်သည်။

အနား rounded ဖန်ဆင်းနိုင်ပါသည်။ ဒါဟာတော်တော်လေးကောင်းတဲ့ကြည့်ရှုသည်။

ကောက်ချက်

သင်တို့ကိုတွေ့မြင်နိုင်သကဲ့သို့, CSS ကိုအတွက်စားပွဲ၏အသွင်အပြင်အဘို့များစွာသော tools တွေရှိပါတယ်။ တစ်ခုချင်းစီကို parameter သည်ကိုလည်းတန်ဖိုးတစ်ခုရွေးချယ်စရာကြီးမားတဲ့ငွေပမာဏသည်။ သငျသညျတခါမှာကအားလုံးကိုသုံးလျှင်, သင်လက်ရာဖန်တီးနိုင်ပါတယ်။ သင်ပြုအထူးသဖြင့်လျှင် သပ္ပါယ်ဒီဇိုင်း အားလုံး browser များအဘို့။

ဒီဇိုင်းအတွက်အဓိကအရာ - ဆိုးကျိုးများနှင့်အတူက overdo ပါဘူး။ အရာအားလုံးကိုဖြည့်ညှင်း၌ပြစ်မှားမိရပါမည်။ ပထမဦးဆုံးမှာ, layout ကိုချက်ချင်းအပေါင်းတို့သည်မိမိတို့အသိပညာစမ်းသပ်အသုံးပြုလို။ စားပွဲ၏ရလဒ်အဖြစ် oversaturated ဂုဏ်သတ္တိများရှိပါတယ်။ အဲဒီချို့ယွင်းချက်ကိုရှောင်ရှားရန်ကြိုးစားပါ။

ထို့အပြင်အချို့ parameters တွေကိုတစ်ဦးချင်းစီကတခြားတွေနဲ့နှောင့်အယှက်ဖြစ်နိုင်တယ်။ ဥပမာအားဖြင့်, specify လုပ်ဖို့မလိုအပ်လည်းမရှိ နောက်ခံအရောင် သတ်မှတ်ထားသောအရောင်ထပ်တံ့သောအစုနောက်ခံပုံဆဲရှိလျှင်နေစဉ်, စားပွဲ၏။