العناصر الزائفة هي أحد المحددات الأكثر تقدمًا والمتاحة للاستخدام في CSS. الغرض الرئيسي من هذه المحددات هو إنشاء نمط فريد ، دون تغيير مستند HTML المستخدم لإنشاء البنية الأساسية لصفحة ويب معينة.
إليك كيفية استخدام العناصر الزائفة في CSS.
العناصر الزائفة الشائعة
هناك قائمة واسعة من العناصر الزائفة المتاحة لجعل حياة مطور الويب أسهل. تتضمن بعض هذه العناصر الزائفة ما يلي:
- قبل
- بعد
- الخلفية
- السطر الأول
- الرسالة الأولى
في حالات محددة ، ستثبت بعض العناصر الزائفة أنها أكثر ملاءمة من غيرها ، ولكن الشيء الوحيد الذي يظل ثابتًا هو الهيكل العام لاستخدام أي عنصر زائف.
مثال على بنية العناصر الزائفة
محدد:: عنصر زائف {
/ * كود css * /
} رغم أنك تستطيع استخدم عنصر HTML كمحدد، يوصى باستخدام فئة أو معرف لتجنب استهداف العناصر غير المقصودة في التخطيط الخاص بك. يجب وضع العنصر أو النمط أو البيانات التي ترغب في إدراجها في الموضع المطلوب بين الأقواس المتعرجة.
العناصر الزائفة قبل وبعد هي الأكثر شيوعًا في القائمة ، وبالنظر إلى وجود العديد من الطرق العملية لاستخدامها - ليس من الصعب معرفة السبب.
استخدام عنصر Before Pseudo في CSS
على الرغم من أنه ليس مستحيلًا ، إلا أنه من الصعب تراكب الصور بنص مقروء في CSS. هذا في الغالب لأن الصورة والنص سيحتلان نفس الموقع على صفحة الويب.
من السهل نسبيا إرسال صورة إلى خلفية مجموعة نصية، ولكن عندما تكون هذه الصورة ساطعة للغاية ، فإنها تميل إلى إرباك النص الموجود أعلىها. في هذه الحالات ، فإن الخطوة التالية هي محاولة جعل الصورة أقل تعتيمًا باستخدام خاصية العتامة.
المشكلة الوحيدة هي أنه نظرًا لأن الصورة والنص يشغلان نفس الموضع ، سيصبح النص أيضًا شفافًا إلى حد ما.
إحدى الطرق القليلة الفعالة لحل هذه المشكلة هي استخدام العنصر الزائف قبل.
استخدام مثال العنصر الزائف قبل
.الصفحة المقصودة{
/ * يرتب النص الموجود على تراكب الصور * /
عرض: فليكس ؛
الاتجاه المرن: العمود.
تبرير المحتوى: مركز ؛
محاذاة العناصر: مركز ؛
محاذاة النص: مركز ؛
/ * يضبط الصفحة للتكيف مع أحجام الشاشات المختلفة * /
الارتفاع: 100 فولت
}
.landingPage:: قبل {
المحتوى:''؛
/ * يستورد صورة * /
الخلفية: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
مركز / غطاء لا يتكرر ؛
/ * يضع تراكبًا أعلى الصورة * /
العتامة: 0.4 ؛
/ * يجعل الصورة مرئية * /
الموقف: مطلق.
أعلى: 0؛
اليسار: 0؛
العرض: 100٪؛
الارتفاع: 100٪؛
}تم إنشاء الكود أعلاه لاستخدامه في انسجام مع فئة صفحات HTML المقصودة أدناه. كما هو موضح في الكود أعلاه ، باستخدام العنصر الزائف السابق ، يمكننا استهداف الصورة واستخدام خاصية التعتيم عليها قبل دمج الصورة مع النص.
استخدام العنصر الزائف قبل
هذه نتيجة استخدام العنصر الزائف قبل
للتراكب والصورة بنص مقروء.
سيؤدي ذلك إلى وضع تراكب على الصورة وعرض نص واضح في الأعلى ، كما هو موضح في الصورة أدناه:
استخدام عنصر After Pseudo في CSS
الاستخدام العملي للعنصر الزائف التالي هو المساعدة في إنشاء نموذج HTML. يتم إنشاء معظم النماذج باستخدام مجموعة من الحقول التي تتطلب بيانات للنموذج ليتم إرساله بنجاح.
تتمثل إحدى طرق الإشارة إلى أن الحقل في نموذج ما يتطلب بيانات عن طريق وضع علامة النجمة بعد تسمية هذا الحقل. يوفر العنصر الزائف التالي طريقة عملية للقيام بذلك.
استخدام مثال العنصر الزائف بعد
.required:: بعد {
المحتوى: '*'؛
لون احمر؛
} سيضمن إدخال الكود أعلاه في قسم CSS من النموذج الخاص بك أن كل تسمية تحتوي على الفئة المطلوبة ستتبعها علامة نجمة حمراء مباشرة. يعد العنصر الزائف التالي عمليًا أيضًا في هذا المثال لأنه يساعد على فصل التصميم عن الهيكل (وهو أمر مثالي دائمًا في تطوير البرامج).
خاصية المحتوى
كما هو موضح في المثال التالي للعنصر الزائف أعلاه ، فإن خاصية المحتوى هي الأداة المستخدمة لإدراج محتوى جديد في صفحة ويب. تستخدم هذه الخاصية فقط مع العناصر الزائفة قبل وبعد.
من المهم ملاحظة أنه حتى إذا لم يكن هناك محتوى متاح لتغذية خاصية المحتوى (كما في المثال السابق للعنصر الزائف أعلاه) ، لا يزال يتعين عليك استخدام خاصية المحتوى ضمن معلمات العنصر الزائف قبل أو بعد لجعلها تعمل كـ مقصود.
يمكنك الآن استخدام العناصر الزائفة في CSS
في هذه المقالة ، تعلمت كيفية تحديد العناصر الزائفة واستخدامها في برامج CSS الخاصة بك. لقد تعرفت على العناصر الزائفة قبل وبعد وتم إعطاؤك طرقًا عملية لاستخدام كليهما. لقد تمكنت أيضًا من معرفة سبب أهمية خاصية المحتوى للاستخدام الناجح للعناصر الزائفة قبل وبعد.
هل تريد معرفة المزيد عن استخدام CSS؟ جرب أمثلة كود CSS الأساسية هذه لتبدأ ، ثم قم بتطبيقها على صفحات الويب الخاصة بك.
اقرأ التالي
- برمجة
- تصميم المواقع
- CSS
قاديشا كين مطور برامج متكامل وكاتب تقني / تقني. لديها قدرة مميزة على تبسيط بعض المفاهيم التكنولوجية الأكثر تعقيدًا ؛ إنتاج مادة يمكن لأي مبتدئ في مجال التكنولوجيا فهمها بسهولة. إنها شغوفة بالكتابة وتطوير البرامج الشيقة والسفر حول العالم (من خلال الأفلام الوثائقية).
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
خطوة أخرى أيضا…!
يرجى تأكيد عنوان بريدك الإلكتروني في البريد الإلكتروني الذي أرسلناه لك للتو.
