التأثيرات الخاصة مع العناصر 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);
}
| المنتقى | مثال | شرح المثال |
|---|---|---|
| :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” |
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة،هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة
تحويل كودإخفاء محول الأكواد الإبتساماتإخفاء