عناصر CSS الزائفة

[Admin]

بسم الله الرحمن الرحيم



في درس سابق شرحت ما هي الفئات الزائفة "الكلاسات الزائفة" وفي هذا الموضوع سأشرح لكم العناصر الزائفة

يتم استخدام عنصر CSS الزائف لتصميم أجزاء معينة من العنصر.

على سبيل المثال ، يمكن استخدامه في:

تصميم الحرف الأول ، أو السطر ، لعنصر

إدراج محتوى قبل أو بعد محتوى عنصر

تركيب العناصر الزائفة:

selector::pseudo-element {
  property: value;
}

العنصر ::first-line العنصر الزائف للسطر الأول

يستخدم العنصر الزائف first-line:: لإضافة نمط خاص إلى السطر الأول من النص.

ينسق المثال التالي السطر الأول من النص في جميع عناصر
:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

ملاحظة : لا يمكن تطبيق العنصر الزائف للخط الأول :: إلا على عناصر مستوى الكتلة.

تنطبق الخصائص التالية على العنصر الزائف للخط الأول:

خصائص الخط

خصائص اللون

خصائص الخلفية

تباعد الكلمات

تباعد الحروف

زخرفة النص

محاذاة رأسية

تحويل النص

ارتفاع خط

الوضوح



لاحظ تدوين القولون المزدوج - :: السطر الأول مقابل: السطر الأول

استبدل القولون المزدوج ترميز القولون الفردي للعناصر الزائفة في CSS3. كانت هذه محاولة من W3C للتمييز بين الفئات الزائفة والعناصر الزائفة.

تم استخدام بناء الجملة أحادي القولون لكل من الفئات الزائفة والعناصر الزائفة في CSS2 و CSS1.

للتوافق مع الإصدارات السابقة ، يُعد بناء الجملة أحادي القولون مقبولًا للعناصر الزائفة CSS2 و CSS1.

العنصر الأول: ::first-letter

يستخدم العنصر الزائف ::first-letter لإضافة نمط خاص للحرف الأول من النص.

ينسق المثال التالي الحرف الأول من النص في جميع عناصر
:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

ملاحظة: لا يمكن تطبيق العنصر الزائف للحرف الأول إلا على عناصر مستوى الكتلة.

تنطبق الخصائص التالية على العنصر الزائف للحرف الأول:

خصائص الخط

خصائص اللون

خصائص الخلفية

خصائص الهامش

خصائص الحشو

خصائص الحدود

زخرفة النص

محاذاة رأسية (فقط إذا كانت كلمة "تعويم" هي "لا شيء")

تحويل النص

ارتفاع خط

تطفو

الوضوح

العناصر الزائفة وفئات CSS

يمكن دمج العناصر الزائفة مع فئات CSS:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

سيعرض المثال أعلاه الحرف الأول من الفقرات مع class = "intro" ، باللون الأحمر وفي حجم أكبر.

عناصر زائفة متعددة

يمكن أيضًا دمج العديد من العناصر الزائفة.

في المثال التالي ، سيكون الحرف الأول من الفقرة باللون الأحمر ، بحجم خط كبير جدًا. سيكون باقي السطر الأول باللون الأزرق وبأحرف صغيرة. سيكون باقي الفقرة حجم ولون الخط الافتراضي:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

CSS - العنصر الزائف  ":: before"

يمكن استخدام العنصر الزائف ":: before" لإدراج بعض المحتوى قبل محتوى العنصر.

يدرج المثال التالي صورة قبل محتوى كل عنصر :

h1::before {
  content: url(smiley.gif);
}

CSS - The :: after العنصر الزائف

يمكن استخدام العنصر :: after العنصر الزائف لإدراج بعض المحتوى بعد محتوى العنصر.

يدرج المثال التالي صورة بعد محتوى كل عنصر :

h1::after {
  content: url(smiley.gif);
}

CSS - العنصر الزائف ":: selection"

يتطابق العنصر الزائف ":: select" مع جزء العنصر الذي حدده المستخدم.

يمكن تطبيق خصائص CSS التالية على ":: select:" اللون والخلفية والمؤشر والمخطط التفصيلي.

المثال التالي يجعل النص المحدد أحمر على خلفية صفراء:

::selection {
  color: red;
  background: yellow;
}

وستجد في الموضوع القديم عن الفئات او الكلاسات الزائفة مستند يحمل جميع العناصر الزائفة

انتهى الشرح

بالتوفيق للجميع

جميع الحقوق محفوظة لشركة انكور التطويرية

يمنع النقل دون ذكر المصدر

والسلام ختام ​

 

[zoolraqey]

جزاك الله خير 



موفق ان شاء الله