More

[ دورة CSS ] الدروس المتقدمة CSS – الدرس السابع – التأثيرات الخاصة مع العناصر

What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()

تستخدم التأثيرات الخاصة مع العناصر لاضافة تأثيرات معينة لبعض المنتقون 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”, ( عادة مايكون هذا المثال فعال مع اللغات الأجنبية وليست العربية )

You may also like  Lenovo S60 With 5-Megapixel Front Camera Launched at Rs. 12,999

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

يمكن الدمج أيضاً مع تأثيرات خاصة متعددة
في المثال التالي الحرف الأول من الفقرة سيكون أحمر وبحجم خط كبير جداً جداً 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
المنتقى مثال شرح المثال
:link a:link اختيار جميع الروابط التشعبية التي لم يتم فتحها بعد
:visited a:visited اختيار جميع الروابط التشعبية التي تم فتحها
:active a:active اختيار جميع الروابط التشعبية الفعالة
:hover a:hover اختيار الروابط عند تمرير الماوس فوقهم
:focus input:focus اختيار العنصر المدخل المركز عليه
:first-letter p:first-letter اختيار الحرف الأول من العنصر <p>
:first-line p:first-line اختيار السطر الأول من العنصر <p>
:first-child p:first-child اختيار جميع العناصر المتمركزة في الصف الأول الابن من عناصر الأب
:before p:before ادراج محتوى قبل كل عنصر <p>
:after p:after ادراج محتوى بعد كل عنصر <p>
:lang(language) p:lang(it) اختيار لغة العنصر من خلال اللاحقة lang=”it”
What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()


Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker
Inline
Inline