ترتیب CSS Positioning (CSS-P) در DHTML
- صفحه قبلی مقدمه DHTML
- صفحه بعدی DHTML DOM
سی ای اس برائے ایچ تی ایم ایل عناصر کا استعمال کیا جاتا ہے.
实例
توضیحات:大多数 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 元素定位到距离其正常位置右方 10 像素的位置:
div { position:relative; left:10; }
position:absolute
position:absolute 属性根据距离窗口的 margin 来定位一个元素。
下面的例子把这个 div 元素定位到距离其包含块左侧 margin 的右方 10 像素的位置:
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
فیلتر کی اپریشن کا استعمال آپ کیو کس میٹنو اپنے متنی اور تصویری آئیکنو کیو توسیع کردینو اپنایو کرسکو آپنو.
h1 { width:100%; filter:glow; }
توضیحات:برای استفاده از ویژگی filter، همیشه عرض عنصر را مشخص کنید.
مثال بالا منجر به خروجی زیر میشود:
سربرگ
فیلترهای مختلف
توضیحات:مگر اینکه ویژگی background-color به حالت transparent تنظیم شده باشد، برخی از ویژگیهای Filter ممکن است کار نکنند!
ویژگی | پارامتر | توضیح | مثال |
---|---|---|---|
alpha |
|
اجازه میدهد تا شفافیت عنصر را تنظیم کنید | filter:alpha( opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270) |
blur |
|
عنصر کوئی کو را تار میکند | filter:blur( add=true, direction=90, strength=6); |
chroma | color | رنگ مشخصی را شفاف میکند | filter:chroma( color=#ff0000) |
fliph | none | عنصر کوئی کو به صورت افقی معکوس میشود | filter:fliph; |
flipv | none | عنصر کوئی کو به صورت عمودی معکوس میشود | filter:flipv; |
glow |
|
عنصر کوئی کو میدرخشد | filter:glow( color=#ff0000, strength=5); |
gray | none | عنصر کوئی کو با سیاه و سفید نشان میدهد | filter:gray; |
invert | none | عنصر کوئی کو با رنگ و روشنایی معکوس نشان میدهد | filter:invert; |
mask | color | عنصر کوئی کو با پسزمینه و پیشزمینه شفاف نشان میدهد | filter:mask( color=#ff0000); |
shadow |
|
عنصر کوئی کو با سایه نشان میدهد | filter:shadow (color=#ff0000, direction=90); |
dropshadow |
|
عنصر کوئی کو با سایه نشان میدهد | filter:dropshadow (color=#ff0000, offx=5, offy=5, positive=true); |
wave |
|
عنصر کوئی کو سینوئید کی شکل میدهد | 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
- تصویر پسزمینه که در هنگام اسکرول صفحه حرکت نمیکند.
- صفحه قبلی مقدمه DHTML
- صفحه بعدی DHTML DOM