Header Ads

التأثيرات الخاصة مع العناصر Pseudo-elements



تستخدم التأثيرات الخاصة مع العناصر لاضافة تأثيرات معينة لبعض المنتقون selectors



تركيبة الكود


ان تركيبة التأثيرات الخاصة مع العناصر هي كالتالي منتقى ثم ":" ثم العنصر ثم بين أقواس مائلة الخاصية والقيمة
selector:pseudo-element {property:value;}

يمكن استدعاء تصميم معين مع التأثيرات الخاصة
selector.class:pseudo-element {property:value;}





اضافة التأثيرات للسطر الأول :first-line


تستخدم السطر الأول "first-line" لإضافة تصميم خاص للسطر الأول للنص

في المثال التالي سيعرض المتصفح السطر الأول للفقرة p حسب التصميم المرفق مع التأثير "first-line"

مثال
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}


ملاحظة : يمكن استخدام "first-line" فقط مع العنصر التي تشكل كتلاً أي تحت بعضها البعض

ملاحظة : يمكن للخواص التالية استخدام التأثير الخاص "first-line"

  • خاصية نوع الخط / font

  • خاصية اللون / color

  • خاصية الخلفية / background

  • تباعد الكلمات / word-spacing

  • تباعد الأحرف / letter-spacing

  • تصميم النص / text-decoration

  • المحاذاة الأفقية / vertical-align

  • تحويل النص / text-transform

  • ارتفاع السطر / line-height

  • المسح / clear





اضافة التأثيرات للحرف الأول :first-letter


تستخدم الحرف الأول "first-letter" لإضافة تصميم خاص للحرف الأول للنص

مثال
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}


ملاحظة : يمكن استخدام "first- letter" فقط مع العنصر التي تشكل كتلاً أي تحت بعضها البعض

ملاحظة : يمكن للخواص التالية استخدام التأثير الخاص "first- letter"

  • خاصية نوع الخط / font

  • خاصية اللون / color

  • خاصية الخلفية / background

  • الهوامش الخارجية / margin

  • الهوامش الداخلية / padding

  • الحدود / border

  • تصميم النص / text-decoration

  • المحاذاة الأفقية / vertical-align ( اذا كانت خاصية الطفو float معطلة )

  • تحويل النص / text-transform

  • ارتفاع السطر / line-height

  • الطفو / float

  • المسح / clear



التصميم الخاص CSS clases و التأثيرات الخاصة Pseudo-classes


يمكن الدمج بين التصميم الخاص CSS clases و التأثيرات الخاصة Pseudo-classes

p.article:first-letter {color:#ff0000;}

<p class="article">هذه مقالة</p>


سيظهر المثال السابق الحرف الأول من جميع الفقرات باللون الأحمر التي تحتوي التصميم الخاص class="article", ( عادة مايكون هذا المثال فعال مع اللغات الأجنبية وليست العربية )



التأثيرات الخاصة المتعددة


يمكن الدمج أيضاً مع تأثيرات خاصة متعددة

في المثال التالي الحرف الأول من الفقرة سيكون أحمر وبحجم خط كبير جداً جداً xx-large وباقي السطر الأول سيكون باللون الأزرق وبأحرف صغيرة . وباقي الفقرة سيكون باللون وحجم الخط الافتراضي ( عادة مايكون هذا المثال فعال مع اللغات الأجنبية وليست العربية )

مثال
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}




التأثيرات الخاصة باستخدام :before


تستخدم :before كتأثير خاص لاضافة محتوى جديد قبل المحتوى المذكور .

في هذا المثال سيتم اضافة صورة قبل كل عنوان كبير <h1>
h1:before
{
content:url(smiley.gif);
}



التأثيرات الخاصة باستخدام :after


تستخدم : after كتأثير خاص لاضافة محتوى جديد بعد المحتوى المذكور .

في هذا المثال سيتم اضافة صورة بعد كل عنوان كبير <h1>
h1:after
{
content:url(smiley.gif);
}





جميع خصائص التأثيرات الخاصة Pseudo-classes
المنتقىمثالشرح المثال
:linka:linkاختيار جميع الروابط التشعبية التي لم يتم فتحها بعد
:visiteda:visitedاختيار جميع الروابط التشعبية التي تم فتحها
:activea:activeاختيار جميع الروابط التشعبية الفعالة
:hovera:hoverاختيار الروابط عند تمرير الماوس فوقهم
:focusinput:focusاختيار العنصر المدخل المركز عليه
:first-letterp:first-letterاختيار الحرف الأول من العنصر <p>
:first-linep:first-lineاختيار السطر الأول من العنصر <p>
:first-childp:first-childاختيار جميع العناصر المتمركزة في الصف الأول الابن من عناصر الأب
:beforep:beforeادراج محتوى قبل كل عنصر <p>
:afterp:afterادراج محتوى بعد كل عنصر <p>
:lang(language)p:lang(it)اختيار لغة العنصر من خلال اللاحقة lang="it"





يتم التشغيل بواسطة Blogger.