Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

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

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

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
 

تستخدم التأثيرات الخاصة مع العناصر لاضافة تأثيرات معينة لبعض المنتقون 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

المنتقى مثال شرح المثال
: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”
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " [ دورة CSS ] الدروس المتقدمة CSS – الدرس الس... "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM