صيغة الفئات البديلة

صيغة الفئات البديلة

الصيعة العاملة للفئات البديلة تكون كالتالي:

مثال:
selector:pseudo-class {property:value;}


- مقدمة عن ال CSS - بناء جملة فى css - متغيرات وفئات CSS - كيف تعمل css - الخلفيات - التنسيقات الخاصة بالنصوص - التنسيقات الخاصة بالخطوط - الروابط - القوائم - الجداول - الصناديق - الحدود - الحواف الخارجية - الهوامش - الفراغات - الجمع والتداخل - الابعاد - العرض - الدوران - تحديد موقع العناصر - المحاذاه - الفئات البديلة - العناصر البديلة
الفئات البديلة
- -
السبت [04 جمادى الأولى 1431] (03:07:36) صباحاً - - - - القراءات : 71


تستخدم الفئات البديلة لاضافة تأثيرات مختلفة لبعض العناصر كما سنري في هذا الدرس.
صيغة الفئات البديلة

الصيعة العاملة للفئات البديلة تكون كالتالي:

مثال:

selector:pseudo-class {property:value;}

يمكن استخدام الفئات العادية مع الفئات البديلة كالتالي:

selector.class:pseudo-class {property:value;}

استخدام الفئات البديلة في عمل روابط

الروابط يمكن ان تظهر باكثر من شكل علي حسب دعم المتصفحات ل Css

مثال:

a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link *

قم بتجربة
المثال[/url

ملحوظة :

يحب ان تاتي الخاصية a:hover بعد الخاصية a:link حتي يحدث تأثير علي الرابط.

يجب ان تاتي الخاصية a:active بعد الخاصيةa:hover حتي يحدث تأثير علي الرابط.

الخاصية Pseudo-class غير حساسة لحالة الاحرف.

الفئات البديلة وفئات CSS العادية

من الممكن ان تتحد الفئات البديلة مع فئات CSS العادية

a.red:visited {color:#FF0000;}

CSS SYNTAX
اذا كان الرابط في المثال السابق تم زيارته سوف ياخذ اللون الاحمر.
الخاصية FIRST-CHILD PSEUDO

الخاصية FIRST-CHILD PSEUDO لا تعمل في المتصفح انترنت اكسبلورر اذا كان التعريف ليس موجود في بداية الصفحة.

مثال علي الخاصية FIRST-CHILD PSEUDO







I AM A STRONG MAN.


I AM A STRONG MAN.




[URL=HTTP://WEBHOUSES.BIZ/A/UP/TRANSLATION_CSS/EXAMPLE2_PSEUDO-CLASS.HTM]قم بتجربة المثال

توافق العنصرالاول في العنصر مع كل العناصر في العنصر

مثال:



P > I:FIRST-CHILD
{
FONT-WEIGHT:BOLD;
}





I AM A STRONG MAN. I AM A STRONG MAN.


I AM A STRONG MAN. I AM A STRONG MAN.





قم بتجربة المثال

توافق كل عناصر مع كل عناصر

مثال:

>

P:FIRST-CHILD I
{
COLOR:BLUE;
}
>
>

>

I AM A STRONG MAN. I AM A STRONG MAN.P>

I AM A STRONG MAN. I AM A STRONG MAN.P>
>
>
قم بتجربة المثال
توافق كل عناصر > مع كل عناصر

>

مثال:

>

P:FIRST-CHILD I
{
COLOR:BLUE;
}
>
>

>

>I AM A >STRONG> MAN. I AM A >STRONG> MAN.
>

>I AM A >STRONG> MAN. I AM A >STRONG> MAN.
>
>
>
قم بتجربة المثال
استخدام الخاصية LANG PSEUDO في الفئات البديلة

الخاصية LANG PSEUDO تسمح لنا بتحديد قواعد خاصة في لغات بديلة .

ملحوظة : في المتصفح انترنت اكسبلورر يتم دعم الخاصية LANG PSEUDO اذا كان التعريق > معرف في بداية الصفحة .

مثال:

>

Q:LANG(NO) {QUOTES: "~" "~";}
>
>

>

>SOME TEXT ">A QUOTE IN A PARAGRAPH"> SOME TEXT.
>
>
>

قم بتجربة المثال

لفئات البديلة

اسم الفئة


الوصف

:ACTIVE


تضيف تصميم علي الرابط في حالة تنشيطه

:FIRST-CHILD


تضيف تصميم علي العنصر عندما يكون متفرع من عنصر اخر

:FOCUS


تضيف تاثير علي العنصر الذي يحتوي علي الخاصية FOCUS

HOVER


تضيف تاثير علي الرابط عند تحريك الفأرة عليه

LANG


تضيف تاثير علي الرابط عند تحديد القيمة LANG

:LINK


تضيف تأثير علي الرابط الذي لم يزوره المستخدم بعد

اوك

مشكور على الموضوع
الرائع تقبل مروري

شكرآآ على المووضووع

موووضووع رااائع ياارااائع

شكراااااااااااااااااااااااا

شكرا لمروركم جميعا

والله رائع ومفيد وشكراا

مرسي كتير عالموضوع

شكرا لك

تسلم يا غالي

شكرا

شكرا لك