DHTML CSS ဆိုင်ရာ သုတေသနပုံ (CSS-P)

စီစဥ်စက်အသုံးပြု၍ ဟောင်းကုတ်အရာများကို စက်လုပ်ပြီး ပြောင်းလဲစေသည်。

实例

注释：大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！

position:relative
如何相对于元素的正常位置来定位这个元素。
position:relative
如何相对其正常位置来定位所有的标题。
position:absolute
如何使用一个绝对值来定义一个元素。

您可以在页面下方找到更多的例子。

哪些属性可与 CSS-P 一同使用？

首先，此元素必须指定 position 属性（relative 或 absolute）。

然后，我就可以设置下列 CSS-P 属性了：

  • left - 元素的左侧位置
  • top - 元素的顶端位置
  • visibility - အီး ကို ဘယ်လို မြင်ပြုရမည် သို့မဟုတ် မြင်ခြင်း ကို အသုံးပြုရမည်
  • z-index - အီး အခြေခံ ပေါ်ထွက် အဆင်းမြင့်
  • clip - အီး အခြေခံ အစုံအလိုက် ကို ဘယ်လို အပြုပြင်သို့ ပြုလုပ်ရမည်
  • overflow - ပေါ်ထွက်သော အခြေခံ ကို ဘယ်လို နည်းဖြင့် ပြုလုပ်ရမည်

Position

CSS သည် position သုံးသပ်ရပ် အား အခြေခံ အုပ်ချုပ်ရန် ခွင့်ပြုသည်။

position:relative

position:relative သည် အီး ကို အခြေခံ အနီးတော် တွင် တည်ထိုင်စေရန် အသုံးပြုသည်။

အထူးသို့ အပြင်းအထန်ပြောဆိုထားသော အကြောင်းအရာတွင်၊ အခြေခံပိုင်း အခြေခံပိုင်း အနီးတော် ၁၀ ပုံ ချီတည်း အီး အခြေခံပိုင်း တွင် တည်ထိုင်စေရန် ပြုလုပ်သည်။

div
{
position:relative;
left:10;
}

position:absolute

position:absolute သည် အီအီး ကို အသိုက်ကို ချီတည်း အခြေခံပိုင်း အနီးတော် အခြေခံပိုင်း အား ချီတည်း အီး တည်ထိုင်စေရန် အသုံးပြုသည်။

အထူးသို့ အပြင်းအထန်ပြောဆိုထားသော အကြောင်းအရာတွင်၊ အခြေခံပိုင်းကို ချီတည်း အခြေခံပိုင်းမှ ခြောက်ချက် ချီတည်း အီအီး အခြေခံပိုင်း အနီးတော် ၁၀ ပုံကို တည်ထိုင်စေရန် ပြုလုပ်သည်။

div
{
position:absolute;
left:10;
}

Visibility

visibility သည် အီအီး ကို မြင်ရတော့ သလောက် သို့မဟုတ် မြင်ခြင်း အား တွက်ချေအား ပြုလုပ်စေသည်။

visibility:visible

visibility:visible သည် အီအီး ကို မြင်ရတော့ သလောက် ပြုလုပ်စေသည်။

h1
{
visibility:visible;
}

visibility:hidden

visibility:hidden သည် အီအီး ကို မြင်ရတော့ သလောက် ပြုလုပ်စေသည်။

h1
{
visibility:hidden;
}

Z-index

z-index သည် အီအီး တစ်ခု အီအီး နောက်သို့ တည်ထိုင်စေရန် အသုံးပြုသော သုံးသပ်ရပ် ဖြစ်သည်။ z-index သည် အချန် အားလုံး အတွက် မူကြမ်း အား 0 ဖြစ်သည်။ အချိန့် အမြင့်ကြီးမှာ အခြေခံ အားမြင့်ကြီးမှာ အမြင့်ကြီး ဖြစ်သည်။ z-index: -1 အခြေခံ အား ပြင်းထန်သော အားနည်းခြင်းဖြစ်သည်။

h1
{
z-index:1;
}
h2
{
z-index:2;
}

အထူးသို့ အပြင်းအထန်ပြောဆိုထားသော အကြောင်းအရာတွင်၊ h1 နှင့် h2 သည် အပေါ်ပေါ် ပေါ် ဖြစ်လာကြောင်း၊ h2 အီအီး အပေါ်ပေါ် h1 အီအီး ဖြစ်လာကြောင်း ရှိသည်။

Filters

filter သည် စာတု နှင့် ယဉ်ကျေးမှု ကို ပိုမိုသော စနစ်ဖြင့် အော်ချယ်ပြီး အထူးပုံစံ ပေးနိုင်သည်။

h1
{
width:100%;
filter:glow;
}

注释：若需要使用 filter 属性，请始终指定元素的宽度。

上面的例子产生下面的输出：

Header

不同的滤镜

注释：除非 background-color 属性被设置为 transparent，否则某些 Filter 属性将无法工作！

属性 参数 描述 例子
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 允许您设置元素的透明度 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 အရွေးအချိုးကို အလိုက်သော အများဆုံး အလေးထား ဖြင့် ပြသထား 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color အချိုးအရွေးကို အချိုးကြောင်း ဖြင့် လွှတ် 
filter:chroma(
color=#ff0000)
fliph none အရွေးအချိုးကို အကြားအအားလျှောက် ပြန်လွှတ် filter:fliph;
flipv none အရွေးအချိုးကို အကြားအရှည်လျှောက် ပြန်လွှတ် filter:flipv;
glow
  • color
  • strength
 အရွေးအချိုးကို အပြန်လွှတ် 
filter:glow(
color=#ff0000,
strength=5);
gray none အရွေးအချိုးကို အရက်အသီး နှင့် အရက်အသီး ဖြင့် ပြသထား filter:gray;
invert none ကြောက်အရောင် နှင့် အလိုက်သော အရောင်ထွက် အရောင် နှင့် အလိုက်သော အများဆုံး အလေးထား ဖြင့် ပြသထား filter:invert;
mask color အရွေးအချိုးကို အပြင်ဘိုး အလယ်အရောင် နှင့် အနည်းငယ်အလေးထား ဖြင့် ပြသထား 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 အရွေးအချိုးကို အရောင်ဆိုင်းဖြင့် ပြသထား 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 အရွေးအချိုးကို အရောင်ဆိုင်းဖြင့် ပြသထား 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 အရွေးအချိုးကို တဲပွဲကြီးပြုထား 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none 使用黑白色显示带有反转色和亮度值的元素 filter:xray;

Background

background 属性允许您选用自己的背景。

background-attachment:scroll

背景随页面滚动。

background-attachment:fixed

背景不会随页面滚动。

更多实例

Visibility
如何使某个元素不可见。你希望此元素显示还是不显示？
Z-index
Z-index 可用于把一个元素放置于另一个元素之后，通过使用 Z-index 次序。
Z-index
请看一下，元素的 Z-index 次序已经改变了。
Cursors
通过 CSS 来改变鼠标指针的样式。
Filters
使用 filter 属性来改变标题的样式。
Filters on Images
filter 属性也可以应用于图像，这里有一些已应用了 filter 属性的图像例子。
Watermark
စာကြိုးသုတ် ပုံပြင် ပုံမှာ စာကြိုးသုတ် မပြောင်းလဲကြလေး