CSS ကိုထောင့်ကွက်: လက်တန်းနှင့်အကျိုးသက်ရောက်မှု

အားလုံး၎င်း၏ယုတ္တိရိုးရှင်းများအတွက်စတိုင်စာရွက်များ (CSS ကို) Cascading တစ်အံ့မခန်းဒီဇိုင်းဖြေရှင်းချက်ဖန်တီး, ဒါပေမယ့်လည်းအမှန်တကယ်အရေးယူဆောင်ရွက်မှု၏ဒြပ်စင်များကိုပေးစွမ်းအမှန်တကယ် code တွေရဲ့ performance ကိုအတုယူဖို့သာဖြစ်နိုင်ပါစေ။

မဆိုအမြင်အာရုံ tag ကို HTML ကို-marking - သီးခြားဖွဲ့စည်းပုံနဲ့ content တစ်စတုဂံနယ်မြေ။ အဆိုပါ element ကသြဒီနိတ်တစ်ခုအရိပ်အယောင်, ဒါကြောင့်ထွက်အရွယ်အစား, padding ကို, အရောင်, စာလုံး, font ကိုစတိုင်နှင့်ပါဝင်သည်။ Frame က CSS ကို-element ကသူတို့ကိုသတ်မှတ်ပါတယ်သိမ်းပိုက်ထားသောနယ်မြေ, designated ဤနေရာတွင်အကျယ်အပေါ်နယ်နိမိတ်ထဲကနေအတွင်းတည်ရှိသောခံရ။

syntax ဖော်ပြချက်

သတ်မှတ်ထားသော FIELD တွင်နေရာချထား element ကစာမျက်နှာ (ထိပ်, left) ၏အထက်လက်ဝဲဘက်ထောင့်, အအလျားလိုက်နှင့်ဒေါင်လိုက်လမ်းညွန် (အကျယ်, အရပ်) တွင်အရွယ်အစားမှဆွေမျိုးကိုသြဒိနိတ်။ အားလုံးဒီဇိုင်းနှင့်ကာတွန်း element တွေကိုအားလုံး ": တန်ဖိုးကိုအိမ်ခြံမြေ" တွင်လုပ်နေကြသည်။

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

#name {property က: တန်ဖိုး, အိမ်ခြံမြေ: တန်ဖိုး, အိမ်ခြံမြေ: တန်ဖိုး, ... }

သို့မဟုတ်

.name {property က: တန်ဖိုး, အိမ်ခြံမြေ: တန်ဖိုး, အိမ်ခြံမြေ: တန်ဖိုး, ... }

နာမတော်ကိုအမှီ ပြု. လည်း p, ကိုယ်ခန္ဓာ, html, စားပွဲ, td ... ဖွစျနိုငျကွောငျးက HTML-markup tag ကို၏နာမတော်သည်။ စတိုင်ဒြပ်စင်များ၏ဖော်ပြချက်နှင့်တိုက်ရိုက်ချိတ်ဆက်နိုင်ပါသည်။

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

အဓိက parameters တွေကို

တကယ်တော့ CSS ကိုဘောင်ဒြပ်စင်စတိုင်ကိုယ်စားပြု (border-style), အရောင် (နယ်စပ်-အရောင်), အကျယ် (နယ်စပ်-width ကို) ။ နယ်စပ် - ဒါဟာအားလုံးတဦးတည်းပိုင်ဆိုင်မှုအတွက်တက်ချုပ်ဖော်ပြနိုင်ပါသည်။ သငျသညျ (နယ်စပ်-ထိပ်, နယ်စပ်-အောက်ဆုံး, နယ်စပ်-left, နယ်စပ်-ညာ) လွတ်လပ်စွာတစ်ဦးချင်းစီသည် frame နယ်စပ်ကိုဖော်ပြရန်နိုင်ပါတယ်။

တန်းဒေသတွေစတိုင်စာရွက်များ၏အထွေထွေစည်းမျဉ်းစည်းကမ်းတွေများကဖော်ပြထား CSS ကိုဘောင်:

နယ်စပ်: 3px;
နယ်စပ်-color: red;
border-style: ကို double တွေက dotted အစိုင်အခဲ dashed ။

ဤဖော်ပြချက် 3 pixels, အရောင်များ၏နယ်စပ် width ကိုသတ်မှတ် - အနီ, စတိုင်နှစ်ဖက်: နှစ်ဆ, လက်ျာ၏အထက်ဘက် - dashed, အစိုင်အခဲအောက်ဆုံး, left - အမှတ်။

နယ်စပ်-width: 1px 2px 4px 8px;
နယ်စပ်-အရောင်: အပြာ,
border-style: dotted ။

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

နယ်စပ်-အရောင်: အပြာအနီအစိမ်းရောင်အနက်ရောင်;

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

နယ်စပ်: 1px အစိမ်းရောင်အစိုင်အခဲ,
နယ်စပ်-အချင်းဝက်: 0px 4px 8px 12px;
-moz-border-အချင်းဝက်: 0px 4px 8px 12px;
-webkit-border-အချင်းဝက်: 0px 4px 8px 12px;

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

အဆိုပါ frame ရဲ့အထူနှင့်၎င်း၏ရည်ရွယ်ချက်

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

အဓိကဘောင်လူတန်းစားသော့ခတ်သည်ဆိုပါကြောင်း Pseudo-class မှာကသတ်မှတ်ခြင်းအသုံးပြုပုံပျက်ကွက်ဖြစ်ပါသည်: ပျံဝဲကြောင့်ထိုကဲ့သို့သော menu ကိုကို item မီးမောင်းထိုးပြအဖြစ်က mouse ကို cursor ဖြစ်ပါတယ်သောအခါ, စာမျက်နှာဒြပ်စင်၏ဧည့်သည်မှပြသနိုင်ပါသည်။ တခါတရံသူက image ကိုကလစ်နှိပ်ခြင်းအားဖြင့်တစ်ခုခုကိုရွေးပါ, သို့မဟုတ်တစ်နေရာရာမှာတစ်ခုခုဆွဲယူဖို့လိုအပ်ပေသည်။ ဒါဟာအစက် frame ကိုသုံးစွဲဖို့အလွန်အဆင်ပြေသည်, Element ရဲ့နောက်ခံသို့မဟုတ်သူ့ရဲ့အကြောင်းအရာတွေကိုပြောင်းလဲပစ်ဖို့မဟုတ်ပါဘူး။

တချို့က applications များဟာစာမျက်နှာ၏ဒေသများ၏ခွဲဝေ, ဒါမှမဟုတ်နောက်ထပ်အပြောင်းအလဲနဲ့အဘို့ကို select လုပ်ပါပစ္စည်းများကိုလိုအပ်သည်။ ဤကိစ္စတွင်ခုနှစ်, ကလစ်၏အချိန်မှာနေသမျှကာလပတ်လုံးဧည့်သည်, Mouse ကိုလွှတ်ကြောင့်ဆိုဒ်ပြောင်းရန်, အမြင်အာရုံရွေးချယ်မှု၏ရလဒ်ဖေါ်ပြခြင်းမဟုတ်ပါအဖြစ်နယ်စပ်နဲ့ div ဖန်တီးရန်။

အောက်မှာအပြင်ဘက်တွင်

လူကြိုက်များက်ဘ်ဆိုက်များ၏သုတေသန codes တွေကိုစာမျက်နှာများ၏အရေးပါမှုဖြစ်သကဲ့သို့ CSS ကိုလဲ tutorial အလွန်စိတ်ဝင်စားစရာကောင်းတဲ့ဖြစ်ကြသည်။ သို့သော်ကိုယ်ပိုင်အရင်းအမြစ်များကိုထူးခြားတဲ့သူဖြစ်ရမည်, က၎င်း၏ကိုယ်ပိုင်မျက်နှာရှိရမည်။

CSS ကို frame ရဲ့ syntax ပေး၎င်း၏ကိုယ်ပိုင်ပဏာမခြေလှမ်းအဖြစ်, ထိုကဲ့သို့သောအမျိုးမျိုးကိုမပေးပါဘူး။ လက်တန်း - အလွန်ကြီးစွာသောစတင်များနှင့်ဘာမျှမမိမိတို့ကိုယ်ပိုင်ဘောင်ကိုတည်ဆောက်မယ့်ဆော့ဖ်ဝဲရေးကာကွယ်ပေးသည်။ လူအပေါင်းတို့သည်အင်တာနက်နည်းပညာ၏အောင်မြင်မှုနှင့်လက်ရှိစံချိန်စံညွှန်းများ၏စွမ်းရည် (ချက်နှင့်အဓိပ္ပါယ်အားဖြင့်) ဖြစ်သည့်တည်ဆဲ syntax ၏အစစ်အမှန်ချို့ယွင်းချက်အပေါ်အခြေခံပြီးအများအပြားအလားအလာစိတ်ကူးများရှိတယ်အထူးသဖြင့်အတူအစဉ်မပြတ်နေတဲ့တင်းကြပ်စွာတရားဝင်ခဲ့ပြီ။

အထူးသဖြင့်, လျှင်အချို့သောဒြပ်စင်များ၏နယ်ပယ်တည်ထောင်ရန်, ကဒါပြည့်ပြည့်စုံစုံလုပ်ဖို့သင့်လျော်သောပုံရသည်။ တစ်ဒေသ၏နှစ်ဖက်နှင့်ထောင့်များတွင်တစ်ဦးချင်းစီ tags များမီးမောင်းထိုးပြ, သင်အံ့သြဖွယ်အကျိုးသက်ရောက်မှုများရရှိနိုင်သည်။ တစ်ဦးကသက်ဆိုင်ရာကိုင်တွယ်တာဝန်ပေးဖို့, ရာထူး, ပုံသဏ္ဍာန်နဲ့ content ပြောင်းလဲနေတဲ့ပြောင်းလဲနေသောစာမျက်နှာ element တွေကိုဖန်တီးနိုင်ပါတယ်။