تعيين موضع DHTML (CSS-P)

CSS يُستخدم لتحديد الأنماط للعناصر في HTML.

مثال

التعليقات:معظم أمثلة 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

سمة position في CSS تسمح لك بتحكم في تحديد موقع عنصر في المستند.

position:relative

سمة position:relative تستخدم لتحديد موقع العنصر بناءً على موقع العنصر الحالي.

في المثال التالي، يتم تحديد موقع عنصر div هذا على بعد 10 بكسل من اليمين من الموقع الطبيعي.

div
{
position:relative;
left:10;
}

position:absolute

سمة position:absolute تستخدم لتحديد موقع عنصر بناءً على الحاشية من النافذة.

في المثال التالي، يتم تحديد موقع عنصر div هذا على بعد 10 بكسل من اليمين من الحاشية اليمنى للكتلة المحتوية.

div
{
position:absolute;
left:10;
}

مرئية

سمة 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.

مرشحات

سمة filter تسمح لك بإضافة تأثيرات زخرفية إضافية إلى النصوص والصور.

h1
{
عرض:100%;
filter:glow;
}

التعليقات:إذا كنت بحاجة إلى استخدام خصائص filter، فلا بد من تحديد عرض العنصر دائمًا.

النموذج أعلاه ينتج الناتج التالي:

الرأس

الفرز المختلفة

التعليقات:إلا إذا تم تعيين خصائص background-color على transperent، فإن بعض خصائص 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
  • إضافة
  • اتجاه
  • قوة
 جعل العنصر ضبابي 
filter:blur(
add=true,
اتجاه=90,
قوة=6);
chroma لون جعل لون معين شفاف 
filter:chroma(
لون=#ff0000)
fliph لا شيء تقلب أفقي العنصر filter:fliph;
flipv لا شيء تقلب عمودي العنصر filter:flipv;
توهج
  • لون
  • قوة
 جعل العنصر يتوهج 
filter:glow(
لون=#ff0000,
قوة=5);
gray لا شيء التعديل على العنصر باستخدام الأسود والأبيض filter:gray;
invert لا شيء التعديل على العنصر باستخدام ألوان معكوسة وأرقام ضوء filter:invert;
mask لون التعديل على العنصر ليكون به خلفية معينة وفرجوانة كشفية 
filter:mask(
لون=#ff0000);
ظل
  • لون
  • اتجاه
 التعديل على العنصر ليكون به ظل 
filter:shadow
(لون=#ff0000,
اتجاه=90);
ظل
  • لون
  • offx
  • offy
  • إيجابي
 التعديل على العنصر ليكون به ظل 
filter:dropshadow
(لون=#ff0000,
offx=5,
offy=5,
إيجابي=true);
الطيف
  • إضافة
  • تردد
  • قوة_الضوء
  • المرحلة
  • قوة
 التعديل على العنصر لتكون هائلة 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray لا شيء استخدام الألوان السوداء والبيضاء لعرض العناصر مع قيم العكس والسطوع filter:xray;

Background

يسمح لك خاصية background باختيار خلفية خاصة بك

background-attachment:scroll

الخلفية تتحرك مع تمرير الصفحة

background-attachment:fixed

الخلفية لا تتحرك مع تمرير الصفحة

أمثلة إضافية

مرئية
كيفية جعل عنصر غير مرئي. هل ترغب في عرض هذا العنصر أم لا؟
Z-index
يمكن استخدام Z-index لوضع عنصر في مؤخرة عنصر آخر باستخدام ترتيب Z-index
Z-index
انظر، تم تغيير ترتيب Z-index للعنصر
مؤشرات الفأرة
تغيير نمط مؤشر الفأرة باستخدام CSS
مرشحات
استخدام خاصية filter لتغيير نمط العنوان
مرشحات على الصور
يمكن تطبيق خاصية filter أيضًا على الصور، هنا بعض الأمثلة على الصور التي تم تطبيق خاصية filter عليها.
Watermark
صورة الخلفية التي لا تتحرك عند تمرير الصفحة