السلام عليكم، رأينا في الدرس 12 من هذه الدورة درس المحدِّدات في CSS المحددات البسيطة :
* محدد العنصر -------------- Element Type Selector
* محدد ID Selector ------------------ ID
* محدد CLASS Selector -------------- CLASS
* المحدد الشامل ------------ Universal Selector
و رأينا في الدرس 27 من هذه الدورة درس المحددات المركبة Combinators و محددات Attribute في CSS :
* المحددات المركبة --------- Combinators
* محددات Attribute Selectors --------- Attribute
و رأينا في الدرس السابق من هذه الدورة درس محددات Pseudo-classes
أما في هذا الدرس، فسنرى آخر نوع من المحددات ألا و هو Pseudo-element.
ما هو Pseudo-element ؟
Pseudo-elements هي محددات تخول إمكانية إعطاء مظهر بـ CSS لجزء من محتوى عنصر HTML، أو جعله في حالة معينة عند تحديده، أو إضافة محتوى قبله أو بعده.
طريقة إقحام Pseudo-elements في كود CSS
تقحم جميع Pseudo-elements في كود CSS بنفس الطريقة حيث يكتب المحدد أولاً سواء كان بسيطاً أم مركباً، ثم زوج نقطتي Double Point '::'، ثم إسم Pseudo-element مع الأخذ بعين الإعتبار تفادي الفراغات من نوع Space بين المحدد و زوج النقطين و إسم Pseudo-element، و يمكن كتابة سوى زوج النقطين و إسم Pseudo-element حيث في هذه الحالة يتم استهداف جميع العناصر في ملف HTML، و أيضا يمكن تركيب زوج النقطتين و إسم Pseudo-element مع عناصر HTML أخرى.
أنواع Pseudo-elements
Pseudo-elements خمسة أنواع :
• SELECTION::
• FIRST-LETTER::
• FIRST-LINE::
• BEFORE::
• AFTER::
SELECTION::
يخول هذا Pseudo-element إمكانية تطبيق مظهر بـ CSS على عنصر HTML عندما يتم تحديده سواء بمؤشر الفأرة في أجهزة الحاسوب أو بالأصابع في أجهزة الهواتف و الطابليط.
FIRST-LETTER::
يخصَّص هذا Pseudo-element للعناصر التي تحتوي على نصوص كالعناوين و الفقرات النصية حيث يخوِّل إمكانية إعطاء مظهر بـ CSS لأول حرف في نص العنصر، و يعمل سوى في العناصر من نوع Block، و يفضل إقحامه في العناصر التي تحتوي على نصوص بلغات تكتب منفصلة الأحرف كاللغات اللاتينية و ما شابه مع الأخذ بعين الإعتبار نوع الخط.
FIRST-LINE::
يخصَّص هذا Pseudo-element للعناصر التي تحتوي على نصوص كذلك، حيث يخوِّل إمكانية إعطاء مظهر بـ CSS لأول سطر في نص العنصر نسبة إلى عرض العنصر المحتوي له في الشاشات، و يعمل أيضاً سوى في العناصر من نوع Block.
الفيديو التوضيحي للدرس
BEFORE:: و AFTER::
يعتبران هذين Pseudo-elements شبيهين من ناحية التأثير، حيث كليهما يخولان إمكانية إضافة محتوى في العناصر، و يكمن الفرق بينهما في أن 'BEFORE::' يضيف محتوى قبل العنصر، أما 'AFTER::' فيضيف محتوى بعد العنصر، و يكون هذا المحتوى المضاف غير قابل للتحديد لأنه مضاف بـ CSS، و يمكن أن يكون عبارة عن نص أو أيقونة أو صورة أو فيديو أو أوديو أو رابط أو أشياء أخرى.. و هذا الإختلاف في ماهية المحتوى المضاف تحدده خاصية بإسم 'CONTENT'، بحيث لا يخلو أي كود CSS لـ 'BEFORE::' أو لـ 'AFTER::' من هذه الخاصية التي تحدد المحتوى المضاف بقيمها التي تشكل خمس أنواع محتويات مضافة، و هم :
- محتوى String
- محتوى الميديا
- محتوى Attribute
- محتوى الإقتباس
- محتوى الترقيم
محتوى String
يكون محتوى String عبارة عن نص أو أيقونة، و طريقة إقحامهما مختلفة حيث في النصوص يجب وضع ما يظهر كمحتوى مضاف نصي داخل Double cotations ("") في قيمة الخاصية 'CONTENT'، أما في الأيقونات فيجب الحصول على Entity Css Code للأيقونة المراد توضيفها كمحتوى مضاف، و هو عبارة عن رمز مكون من أربعة أحرف أو أرقام أو مختلطة، ثم وضعه بالجانب الأيمن لعلامة Backslash (\) داخل Double cotations في قيمة الخاصية 'CONTENT'.
محتوى الميديا
يكون محتوى الميديا عبارة عن صورة أو فيديو أو أوديو، أي ميديا، و تقحم عن طريق القيمة '()URL' للخاصية 'CONTENT' حيث يجب وضع داخل قوسي القيمة ما يراد استدعاؤه حسب مكانه، فإذا كان في الويب يجب كتابة العنوان URL للملف، أما إذا كان في المخدم الخاص يجب كتابة مساره استناداً بقاعدة المسارات. (توجد هذه القاعدة في درس الصور و درس الفيديوهات و درس الأوديوهات في هذه الدورة)
محتوى Attribute
يكون محتوى Attribute عبارة عن ما كتب حرفياً في قيمة Attribute المضاف إسمها بين قوسي القيمة '()ATTR' للخاصية 'CONTENT'.
محتوى الإقتباس
يكون محتوى الإقتباس عبارة عن علامات الإقتباس، و تقحم عن طريق أربع قيم خاصة بعلامات الإقتباس في الخاصية 'CONTENT' و هم :
'OPEN-QUOTE' : قيمة لإنشاء علامات بداية الإقتباس، و يحبذ إقحامها في 'BEFORE::'.
'CLOSE-QUOTE' : قيمة لإنشاء علامات نهاية الإقتباس، و يحبذ إقحامها في 'AFTER::'.
'NO-OPEN-QUOTE' : قيمة لحذف علامات بداية الإقتباس، و يحبذ إقحامها في 'BEFORE::'.
'NO-CLOSE-QUOTE' : قيمة لحذف علامات نهاية الإقتباس، و يحبذ إقحامها في 'AFTER::'.
يمكن تغيير علامات الإقتباس التلقائية التي تظهر في متصفحات الإنترنت عند إنشائها، و ذلك عبر الخاصية 'QUOTES'، حيث تقحم هذه الأخيرة في العنصر المحتوي للعناصر المرغوب إنشاء فيها علامات الإقتباس، و في قيمتها تقحم علامة فتح الإقتباس بين Cotation (' ') يسار القيمة، و علامة إغلاق الإقتباس بين Cotation هي الأخرى يمين القيمة.
محتوى الترقيم
يكون محتوى الترقيم عبارة عن ترقيم لعناصر كالعناوين و ما شابه، و هو إما ترقيم عادي أو ترقيم تشعبي متفرع.
الترقيم العادي
يخول الترقيم العادي إعطاء لمجموعة عناصر HTML ترقيماً (1 2 3 ...) حسب ترتيب إقحامهم في ملف HTML، و ينشأ الترقيم العادي بإضافة خاصية بإسم 'COUNTER-RESET' في العنصر المحتوي للعناصر المراد ترقيمها، و هي خاصية تعيد الترقيم من البداية، و في قيمتها توضع كلمة تلعب دور معرف ID، ثم في 'BEFORE::' أو 'AFTER::' للعناصر المراد ترقيمها يتم إقحام الخاصية 'COUNTER-INCREMENT' و في قيمتها نفس معرف ID، و الخاصية 'CONTENT' و في قيمتها القيمة '()COUNTER' حيث بين قوسي هذه الأخيرة يوضع نفس معرف ID أيضاً.
الترقيم التشعبي المتفرع
يخول الترقيم التشعبي المتفرع إعطاء لمجموعة عناصر HTML ترقيماً حسب ترتيب إقحامهم في ملف HTML، و لمجموعة متفرعة من العنصر الأول في المجموعة الأولى ترقيماً تشعبياً (1.1 1.2 1.3 ...) و لمجموعة متفرعة من العنصر الثاني في المجموعة الأولى ترقيماً تشعبياً (2.1 2.2 2.3 ...) و هكذا... و ذلك بإنشاء ترقيماً عادياً للمجموعة الأولى، ثم إضافة الخاصية 'COUNTER-RESET' في عناصر المجموعة الأولى، و في قيمتها معرف ID جديد، ثم في 'BEFORE::' أو 'AFTER::' للعناصر المراد إعطاؤها ترقيما تشعبياً يجب إقحام الخاصية 'COUNTER-INCREMENT' و في قيمتها معرف ID الجديد، و الخاصية 'CONTENT' و في قيمتها القيمة '()COUNTER' حيث بين قوسي هذه الأخيرة يوضع معرف ID القديم، ثم Double cotation تحتوي على نقطة (.) ثم قيمة '()COUNTER' أخرى تحتوي على معرف ID الجديد بين قوسيها، و يصنف هذا الترقيم بالترقيم التشعبي المستوى الثانى.
يمكن إنشاء ترقيماً تشعبياً مستوى ثالث (1.1.1 1.1.2 1.1.3 ...) و ذلك بتطبيق نفس طريقة إنشاء الترقيم التشعبي المستوى الثانى، أي إضافة الخاصية 'COUNTER-RESET' مقيمة بمعرف جديد في عناصر المجموعة التي سيتم التفرع منها، ثم في 'BEFORE::' أو 'AFTER::' للعناصر المراد إعطاؤها ترقيما تشعبياً مستوى ثالث تقحم الخاصية 'COUNTER-INCREMENT' و في قيمتها معرف ID الجديد، و الخاصية 'CONTENT' و في قيمتها القيمة '()COUNTER' حيث بين قوسي هذه الأخيرة يوضع معرف ID للترقيم العادي، ثم Double cotation تحتوي على نقطة (.) ثم قيمة '()COUNTER' أخرى تحتوي على معرف ID للترقيم التشعبي المستوى الثاني بين قوسيها، ثم Double cotation أخرى تحتوي على نقطة (.) ثم قيمة '()COUNTER' أخرى تحتوي على معرف ID للترقيم التشعبي المستوى الثالث بين قوسيها، و يمكن إنشاء مستويات أخرى بنفس الطريقة.
يمكن استبدال الأرقام العربية في الترقيم بأرقام رومانية، و ذلك بإضافة علامة Comma (,) ثم كلمة 'UPPER-ROMAN' بالجانب الأيمن لمعرف ID داخل قوسي قيمة الخاصية 'CONTENT'
تقنية ضم الطفو
تقنية ضم الطفو هي تقنية تُستعمل من طرف مصممي الويب من أجل ضم عنصر محتوٍ لعناصر في حالة طفوها بالخاصية 'FLOAT'، و ذلك بجعل 'AFTER::' للعنصر المحتوي يلعب دور آخر عنصر محتوى وهمي لديه خاصية 'CLEAR'، و لديه كيفية ظهور بالخاصية 'DISPLAY'، و الأهم من ذلك أن لديه محتوى بالخاصية 'CONTENT' حيث يوضع فراغ داخل Cotations (' ') في قيمتها.
إذن تلعب الخاصية 'CONTENT' دور فعال في 'BEFORE::' و 'AFTER::' و لو كان في قيمتها فراغ كحالة ضم الطفو، و تقبل أيضاً قيمة 'NONE' التي تعتبر قيمتها التلقائية، و تأثيرها هو إلغاء المحتوى، و أيضاً تقبل القيمة 'NORMAL' حيث تتحول هذه القيمة في أكواد 'BEFORE::' و 'AFTER::' إلى القيمة 'NONE'.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس