الخطوة 1

ابدأ بإضافة بعض المحتوى إلى القائمة. أضف عنصراً رئيسياً main داخل عنصر الجسم body الموجود حالياً؛ إذ سيحتوي هذا العنصر لاحقاً على معلومات الأسعار الخاصة بالقهوة والحلويات التي يقدمها المقهى.

الخطوة 2

اسم المقهى هو مقهى التقنية. لذا، أضف عنصر h1 داخل العنصر الرئيسي (main element)، واجعل محتواه اسم المقهى.

الخطوة 3

لإعلام الزوار بأن المقهى قد تأسس عام 2025، أضف عنصراً من النوع p أسفل العنصر h1 يحتوي على النص تأسست عام 2025.

الخطوة 4

ستتضمن القائمة قسمين: أحدهما للقهوة والآخر للحلويات. أضف عنصراً من نوع section داخل العنصر الرئيسي main لتوفير مكان تضع فيه جميع أنواع القهوة المتاحة.

الخطوة 5

أنشئ عنصر h2 داخل عنصر section واجعل النص بداخله قهوة.

الخطوة 6

حتى الآن، كانت سيطرتك على طريقة عرض محتواك ومظهره محدودة. ولتغيير ذلك، أضف عنصر نمط (style element) داخل عنصر الرأس (head element).

الخطوة 7

في الدروس السابقة، تعلمت كيفية إضافة خصائص وقيم CSS بهذا الشكل:

نموذج للكود البرمجي

element {
 property: value;
}
                

قم بمحاذاة محتوى عنصر h1 في المنتصف عن طريق ضبط خاصية text-align على القيمة center.

الخطوة 8

في الخطوة السابقة، استخدمتَ مُحدِّد النوع (type selector) لتنسيق العنصر h1. قم بمحاذاة محتوى العنصرين h2 و p إلى المنتصف عن طريق إضافة مُحدِّد نوع جديد لكل منهما إلى عنصر التنسيق (style element) الموجود.

الخطوة 9

لديك الآن ثلاثة مُحدِّدات نوع (type selectors) تشترك في نفس التنسيق. يمكنك تطبيق مجموعة التنسيقات نفسها على عناصر متعددة من خلال إنشاء قائمة بالمُحدِّدات، حيث يتم الفصل بين كل مُحدِّد وآخر "بفاصلة" (commas)، على النحو التالي:

نموذج للكود البرمجي

selector1, selector2 {
 property: value;
}
                

احذف محددات النوع الثلاثة الموجودة واستبدلها بقائمة محددات واحدة تُحاذي النص في المنتصف لعناصر h1 و h2 و p.

الخطوة 10

لقد قمت بتنسيق ثلاثة عناصر عن طريق كتابة أكواد CSS داخل وسوم style. ورغم أن هذه الطريقة فعالة، إلا أنه نظراً لاحتمالية إضافة المزيد من التنسيقات، فمن الأفضل وضع جميع التنسيقات في ملف منفصل وربطه بالصفحة.

قم بإنشاء ملف styles.css منفصل.

ابدأ بنقل الأنماط التي أنشأتها إلى ملف styles.css؛ وتأكد من استبعاد وسوم الفتح والإغلاق الخاصة بالأنماط (style tags).

الخطوة 11

الآن بعد أن أصبح كود CSS موجوداً في ملف styles.css، قم بإزالة عنصر style وكافة محتوياته؛ وبمجرد إزالته، سيعود النص الذي كان متمركزاً في المنتصف إلى جهة اليمين.

الخطوة 12

الآن، عليك ربط ملف styles.css ليتم تطبيق الأنماط مرة أخرى. أضف عنصر link داخل عنصر head؛ وامنحه السمة rel بقيمة "stylesheet" والسمة href بقيمة "styles.css".

ملاحظة: يُعد عنصر link عنصراً فارغاً (void element)، مما يعني أنه لا يحتوي على وسم إغلاق. لذا، ينبغي كتابة العناصر الفارغة بالصيغة <link> بدلاً من <link></link>.

الخطوة 13

لجعل تنسيق الصفحة يبدو متشابهاً على الأجهزة المحمولة وأجهزة الكمبيوتر المكتبية أو المحمولة، تحتاج إلى إضافة عنصر meta يحتوي على سمة محتوى content خاصة.

لقد تعرفت على عنصر meta الخاص بمنطقة العرض (viewport) في دروس سابقة.

إليك مثال:

نموذج للكود البرمجي

<meta name="viewport" content="width=device-width, initial-scale=1.0">
                

الخطوة 14

تمت إعادة توسيط النص، مما يعني أن الرابط المؤدي إلى ملف CSS يعمل بشكل صحيح. أضف نمطاً آخر إلى الملف يغير خاصية لون الخلفية background-color إلى اللون البني brown لعنصر الجسم body.

الخطوة 15

تجعل الخلفية البنية قراءة النص أمراً صعباً. غيّر لون خلفية عنصر body إلى اللون burlywood؛ ليصبح للخلفية لونٌ ما، مع الحفاظ على إمكانية قراءة النص.

الخطوة 16

يُستخدم العنصر div بشكل أساسي لأغراض تنسيق وتخطيط الصفحة، وذلك بخلاف عناصر المحتوى الأخرى التي استخدمتها حتى الآن. أضف عنصراً من نوع div داخل العنصر body، ثم انقل جميع العناصر الأخرى إلى داخل هذا العنصر div الجديد.

داخل وسم div الافتتاحي، أضف السمة id بقيمة menu.

الخطوة 17

الهدف الآن هو جعل عنصر div لا يشغل كامل عرض الصفحة؛ وتُعد خاصية width في CSS مثالية لهذا الغرض.

يمكنك استخدام مُحدِّد المعرِّف (id selector) لاستهداف عنصر محدد يحمل السمة id.

لقد تعلمت كيفية التعامل مع مُحدِّد المعرِّف (id selector) في الدروس السابقة على النحو التالي:

نموذج للكود البرمجي

#cat {
 width: 250px;
}
                

استخدم المُحدِّد #menu لمنح العنصر الخاص بك عرضاً قدره 300px.

الخطوة 18

تبدو التعليقات في CSS هكذا:

نموذج للكود البرمجي

/* اكتب تعليقاً هنا */
                

في ملف الأنماط (style sheet)، قم بتحويل السطر الذي يحتوي على الخاصية background-color وقيمتها إلى تعليق، وذلك لتتمكن من رؤية تأثير تنسيق العنصر #menu وحده؛ فهذا سيعيد لون الخلفية إلى الأبيض.

الخطوة 19

الآن، استخدم مُحدِّد #menu الحالي لضبط لون خلفية عنصر div ليكون burlywood.

الخطوة 20

من السهل الآن ملاحظة أن النص يتوسط العنصر #menu. وحالياً، تم تحديد عرض العنصر #menu بوحدة البكسل px.

غيّر قيمة الخاصية width لتصبح 80% ، وذلك لجعل العرض مساوياً لـ 80% من عرض العنصر الأب body.

الخطوة 21

بعد ذلك، ستحتاج إلى توسيط العنصر #menu أفقياً. يمكنك القيام بذلك عن طريق ضبط خاصيتي الهامش الأيسر margin-left والهامش الأيمن margin-right على القيمة auto. تخيّل الهامش (margin) على أنه مساحة غير مرئية تحيط بالعنصر؛ وباستخدام هاتين الخاصيتين، قم بتوسيط العنصر #menu داخل العنصر body .

الخطوة 22

لقد استخدمتَ حتى الآن مُحدِّدات النوع (type selectors) ومُحدِّدات المُعرِّف (id selectors) لتنسيق العناصر؛ ومع ذلك، فمن الشائع أكثر استخدام مُحدِّد مختلف لتنسيق العناصر.

لقد تعلمت كيفية التعامل مع مُحدِّدات الفئات (class selector) في دروس سابقة، على النحو التالي:

نموذج للكود البرمجي

.class-name {
 property: value;
}
                

حوّل مُحدِّد #menu الحالي إلى مُحدِّد فئة (class selector) عن طريق استبدال #menu بمُحدِّد الفئة .menu.

الخطوة 23

لتطبيق تنسيق الفئة (class) على عنصر div ، قم بإزالة السمة id وأضف السمة class إلى وسم البداية الخاص بالعنصر div ؛ وتأكد من ضبط قيمة الفئة لتكون menu.

الخطوة 24

بما أن المنتج الرئيسي الذي يبيعه المقهى هو القهوة، فيمكنك استخدام صورة لحبوب القهوة كـ"خلفية للصفحة" (page background).

احذف التعليق ومحتوياته الموجودة داخل مُحدِّد العنصر body. بعد ذلك، أضف الخاصية background-image واضبط قيمتها على

url(https://openarabtech.github.io/CSSVerse/src/assets/beans.jpg)

الخطوة 25

الآن وقد أصبحت الأمور تبدو جيدة، حان الوقت للبدء في إضافة بعض عناصر القائمة (menu items).

أضف عنصر article فارغاً أسفل العنوان قهوة . سيحتوي هذا العنصر على نكهة وسعر أحد أنواع القهوة التي تقدمها حالياً.

الخطوة 26

عادةً ما تشتمل عناصر المقال article على عناصر متعددة تتضمن معلومات مترابطة؛ ففي هذه الحالة، سيحتوي العنصر على نكهة القهوة وسعر تلك النكهة.

ضع عنصرين من نوع p داخل عنصر المقال article. يجب أن يكون نص العنصر الأول فانيليا فرنسية ، ونص العنصر الثاني 3.00.

الخطوة 27

بدءاً من أسفل زوج القهوة والسعر الحالي، أضف أنواع القهوة والأسعار التالية باستخدام عناصر article بحيث يحتوي كل منها على عنصرَي p "متداخلين" (nested).

نموذج للكود البرمجي

كاراميل ماكياتو 3.75
توابل اليقطين 3.50
بندق 4.00
موكا 4.50
                

كما في السابق، يجب أن يحتوي نص عنصر الفقرة p الأول على نكهة القهوة، بينما يجب أن يحتوي نص عنصر الفقرة p الثاني على السعر.

الخطوة 28

تظهر النكهات والأسعار حالياً مكدسة فوق بعضها البعض وتتوسط عناصر الفقرة p الخاصة بها؛ وسيكون من الأفضل لو كانت النكهة على اليمين والسعر على اليسار.

أضف اسم الفئة flavor إلى عنصر فانيليا فرنسية.

الخطوة 29

باستخدام فئة النكهة (flavor class) الجديدة كمُحدِّد، اضبط قيمة الخاصية text-align على right.

الخطوة 30

بعد ذلك، عليك محاذاة السعر إلى اليسار. أضف فئة (class) باسم price إلى عنصر الفقرة p الذي يحتوي على النص 3.00.

الخطوة 31

الآن، قم بمحاذاة النص إلى اليسار left للعناصر التي تحمل فئة price.

الخطوة 32

هذا هو ما تريده تقريباً، ولكن سيكون من الجيد الآن أن يظهر كل من النكهة والسعر على السطر نفسه؛ فالعناصر من النوع p تُعد عناصر "مستوى الكتلة" (block-level elements)، ولذلك فهي تشغل العرض الكامل للعنصر الأب (parent element).

لجعلها على نفس الخط، تحتاج إلى تطبيق بعض التنسيقات على عناصر p بحيث تتصرف بشكل أشبه بالعناصر المضمنة (inline elements).

للقيام بذلك، ابدأ بإضافة سمة class بقيمة item إلى عنصر article الأول الموجود تحت العنوان قهوة.

الخطوة 33

توجد عناصر p متداخلةً داخل عنصر article يحمل السمة class بالقيمة item. ويمكنك تنسيق جميع عناصر p المتداخلة في أي مكان داخل عناصر تحمل الفئة (class) المسماة item على النحو التالي:

نموذج للكود البرمجي

.item p { }
                

باستخدام المُحدِّد (selector) المذكور أعلاه، أضف الخاصية display بقيمة inline-block لتصبح عناصر p أقرب في سلوكها إلى العناصر المضمنة (inline elements).

الخطوة 34

هذا أقرب إلى النتيجة المطلوبة، لكن السعر لم يظل في جهة اليمين؛ والسبب في ذلك هو أن العناصر من النوع (inline-block) تشغل فقط مساحة العرض الخاصة بمحتواها.

لتوزيعها، أضف خاصية العرض width بقيمة 50% إلى كل من محددات الفئة (class selectors) الخاصة بالنكهة flavor والسعر price.

الخطوة 35

حسناً، لم ينجح ذلك. إن ضبط نمط عناصر p ليكون inline-block ووضعها في أسطر منفصلة يُنشئ مسافة إضافية إلى يسار عنصر p الأول، مما يؤدي إلى انتقال العنصر الثاني إلى السطر التالي.

إحدى طرق معالجة ذلك هي جعل عرض كل عنصر من عناصر الفقرة p أقل بقليل من 50%؛ لذا، غيّر قيمة العرض width إلى 49% لكل فئة (class) لترى النتيجة.

الخطوة 36

لقد نجح ذلك، ولكن لا تزال هناك مسافة صغيرة على يسار السعر.

يمكنك الاستمرار في تجربة نسب مئوية مختلفة للعرض، ولكن بدلاً من ذلك، استخدم مفتاح (Backspace) لنقل عنصر p الذي يحمل الفئة price ليصبح بجوار عنصر p الذي يحمل الفئة flavor ، بحيث يظهران على السطر نفسه في المحرر. تأكد من عدم وجود مسافة فاصلة بين العنصرين.

الخطوة 37

الآن، قم بتغيير عرض كل من فئات النكهة flavor وفئات السعر price ليكون 50% مرة أخرى.

الخطوة 38

الآن بعد أن تأكدت من أن الأمر ينجح، يمكنك تعديل بقية عناصر article و p لتطابق المجموعة الأولى. ابدأ بإضافة الفئة (class) المسماة item إلى عناصر article الأخرى.

الخطوة 39

بعد ذلك، ضع عناصر p الأخرى على السطر نفسه بحيث لا توجد مسافة بينها.

الخطوة 40

لإكمال عملية التنسيق، أضف أسماء الفئات (class names) المناسبة — flavor و price — إلى جميع عناصر p المتبقية.

الخطوة 41

إذا قمت بتقليل عرض معاينة الصفحة، فستلاحظ عند نقطة معينة أن بعض النصوص الموجودة على اليمين تبدأ في الانتقال إلى السطر التالي؛ ويعود ذلك إلى أن عرض عناصر الفقرة p الموجودة على الجانب الأيمن لا يمكن أن يشغل سوى 50% من المساحة.

بما أن الأسعار الموجودة على اليسار تتكون من عدد أقل بكثير من الأحرف، قم بتعديل عرض width فئة النكهة flavor ليصبح 75% وعرض width فئة السعر price ليصبح 25%.

الخطوة 42

ستعود لتنسيق القائمة (menu) بعد بضع خطوات، ولكن في الوقت الحالي، قم بإضافة عنصر قسم section ثانٍ أسفل القسم الأول لعرض أصناف الحلوى التي يقدمها المقهى.

الخطوة 43

أضف عنصر h2 في القسم الجديد واجعل نصه الحلويات.

الخطوة 44

أضف عنصر article فارغاً أسفل العنوان الحلويات ، وامنحه سمة class بقيمة item.

الخطوة 45

ضع عنصرَي p داخل عنصر article. يجب أن يكون نص العنصر الأول كعكة محلاة ، ونص العنصر الثاني 1.50. ضعهما معاً في السطر نفسه، مع الحرص على عدم وجود مسافة بينهما.

الخطوة 46

بالنسبة لعنصري الفقرة p اللذين أضفتهما للتو، اجعل القيمة dessert هي قيمة السمة class لعنصر الفقرة الأول، والقيمة price هي قيمة السمة class لعنصر الفقرة الثاني.

الخطوة 47

يبدو أن هناك خطأً ما؛ فقد أضفتَ القيمة الصحيحة لسمة class إلى عنصر p الذي يحتوي على النص كعكة محلاة ، لكنك لم تُعرِّف مُحدِّداً (selector) له.

تُحدِّد قاعدة CSS الخاصة بالفئة flavor بالفعل الخصائص التي تريدها؛ لذا أضف الفئة dessert كمُحدِّد إضافي لقاعدة CSS هذه.

الخطوة 48

أسفل الحلوى التي أضفتها للتو، أضف بقية أصناف الحلوى وأسعارها باستخدام ثلاثة عناصر article إضافية، بحيث يحتوي كل منها على عنصرَي p متداخلين. يجب أن يتضمن كل عنصر النص الصحيح للصنف والسعر، وأن تحمل جميعها فئات (classes) صحيحة.

نموذج للكود البرمجي

فطيرة الكرز  2.75
تشيز كيك  3.00
لفائف القرفة 2.50
                

الخطوة 49

يمكنك إضافة مسافة بين المحتوى وجوانب القائمة (menu) باستخدام خصائص الهوامش الداخلية padding المتنوعة.

امنح فئة القائمة (menu class) هامشاً داخلياً من اليسار padding-left ومن اليمين padding-right بقيمة 20px لكل منهما.

الخطوة 50

يبدو ذلك أفضل. الآن، حاول إضافة نفس الهامش الداخلي padding بمقدار 20px إلى أعلى القائمة وأسفلها.

الخطوة 51

بما أن جميع جوانب القائمة الأربعة لها نفس المسافة الداخلية، قم بإزالة الخصائص الأربع واستخدم خاصية حشوة padding واحدة بقيمة 20px.

الخطوة 52

سيشغل العرض الحالي للقائمة (menu) دائمًا 80% من عرض عنصر الجسم body. وفي الشاشات العريضة للغاية، تظهر أصناف القهوة والحلوى بعيدةً جدًا عن أسعارها.

أضف خاصية max-width إلى الفئة menu بقيمة 500px لمنعها من أن تصبح عريضة للغاية.

الخطوة 53

يمكنك تغيير نوع الخط font-family للنص لجعله يبدو مختلفاً عن الخط الافتراضي للمتصفح؛ إذ تتوفر لدى كل متصفح مجموعة من الخطوط الشائعة.

قم بتغيير النص بالكامل في عنصر body عن طريق إضافة الخاصية font-family بقيمة sans-serif؛ إذ يُعد هذا الخط شائعاً للغاية وسهل القراءة

الخطوة 54

قد يبدو الأمر مملاً بعض الشيء إذا استُخدم نوع الخط font-family نفسه لجميع النصوص؛ إذ يمكنك الإبقاء على معظم النصوص بخط sans-serif ، مع تمييز عنصري العنوان h1 و h2 فقط باستخدام مُحدِّد (selector) مختلف.

نسّق عنصري h1 و h2 باستخدام قائمة مُحدِّدات واحدة، بحيث يظهر النص فيهما بخط Impact.

الخطوة 55

يمكنك إضافة خط بديل (fallback value) لخاصية font-family عن طريق إضافة اسم خط آخر مفصول بفاصلة (comma)؛ حيث يُستخدم هذا الخط البديل (fallback font) في حال عدم توفر الخط الأول.

أضف الخط البديل من نوع serif بعد خط Impact.

الخطوة 56

اجعل عبارة تأسست عام 2025 مائلةً (Italic) عن طريق إنشاء مُحدِّد فئة (class selector) باسم established وتعيين الخاصية font-style له بقيمة italic.

الخطوة 57

الآن، طبّق الفئة المُعَدَّة مسبقاً established على النص تأسست عام 2025.

الخطوة 58

يتم تحديد خصائص الخط (typography) لعناصر العناوين (مثل h1 و h2) وفقاً للقيم الافتراضية في متصفحات المستخدمين.

أضف مُحدِّدي نوع (type selectors) جديدين ( h1 و h2 ). استخدم الخاصية font-size لكليهما، ولكن استخدم القيمة 40px للعنصر h1 والقيمة 30px للعنصر h2.

الخطوة 59

أضف عنصراً تذييلياً footer أسفل العنصر الرئيسي main ، حيث يمكنك إضافة بعض المعلومات الإضافية.

الخطوة 60

أضف عنصر عنوان address داخل التذييل footer. وستقوم بإضافة معلومات الاتصال إلى هذا العنصر في الخطوات القليلة التالية.

الخطوة 61

أضف عنصر p داخل عنصر address. ثم قم بتضمين عنصر رابط a داخل عنصر p هذا، بحيث يشير الرابط إلى https://openarabtech.github.io ويحمل النص تفضل بزيارة موقعنا الإلكتروني.

تأكد من فتح الرابط في علامة تبويب جديدة عن طريق إضافة السمة target بقيمة _blank.

الخطوة 62

أضف عنصر p ثانياً أسفل العنصر الذي يحتوي على الرابط، واجعل نصه: 123 مبادرة التقنية العربية المفتوحة.

الخطوة 63

يمكنك استخدام عنصر hr لعرض فاصل بين أقسام ذات محتوى مختلف.

نموذج للكود البرمجي

<section>
 <h2>أشياء تحبها القطط</h2>
 <hr>
 <p>تحب القطط اللازانيا.</p>
</section>
                

أولاً، أضف عنصر hr بين عنصر p الذي يحمل الفئة established وعنصر section الأول.

لاحظ أن العنصر hr هو عنصر فارغ (void element).

الخطوة 64

تؤدي الخصائص الافتراضية (default properties) لعنصر hr إلى ظهوره كخط رفيع باللون الرمادي الفاتح. ويمكنك تغيير ارتفاع الخط عن طريق تحديد قيمة للخاصية height.

غيّر ارتفاع عنصر hr إلى 3px.

الخطوة 65

غيّر لون خلفية (background color) العنصر hr إلى اللون البني brown ليتماشى مع لون حبوب القهوة.

الخطوة 66

لاحظ اللون الرمادي على طول حواف الخط؛ وتُعرف هذه الحواف باسم "الحدود" (borders). يمكن أن يكون لكل جانب من جوانب العنصر لون مختلف، أو يمكن أن تكون جميعها بنفس اللون.

اجعل جميع حواف العنصر hr بنفس لون خلفيته باستخدام الخاصية border-color.

الخطوة 67

لاحظ كيف يبدو سُمك (thickness) الخط أكبر؟ تبلغ القيمة الافتراضية للخاصية المسماة border-width بكسلًا واحدًا 1px لجميع حواف عناصر hr. لقد كان الارتفاع الإجمالي للخط دائمًا 5px (3 بكسلات مضافاً إليها بكسل واحد لكل من الحدين العلوي والسفلي)؛ وقد أدى تلوين الحدود إلى جعل تلك الحواف مرئية.

غيّر خاصية الارتفاع height للعنصر hr لتصبح 2px ، بحيث يصبح إجمالي ارتفاعه 4px .

الخطوة 68

تفضل بإضافة عنصر hr آخر بين العنصر الرئيسي main وعنصر التذييل footer.

الخطوة 69

لتوفير مساحة إضافية قليلاً حول القائمة، أضف مسافة قدرها 20px داخل عنصر الجسم body باستخدام خاصية الحشو padding.

الخطوة 70

عند التركيز على أصناف القائمة (menu items) والأسعار (prices)، نجد فجوة كبيرة نوعاً ما بين كل سطر وآخر.

استخدم المُحدِّد الحالي الذي يستهدف جميع عناصر p المتداخلة داخل عناصر تحمل الفئة (class) المسماة item ، واضبط الهامش (margin) العلوي والسفلي لها ليصبح 5px.

الخطوة 71

باستخدام مُحدِّد النمط (style selector) نفسه المُستخدم في الخطوة السابقة، اجعل حجم خط (font size) العناصر والأسعار (items and prices) أكبر بتعيين القيمة 18px.

الخطوة 72

يبدو تغيير قيمة margin-bottom إلى 5px رائعاً. ومع ذلك، فإن المسافة بين عنصر القائمة لفائف القرفة وعنصر hr الثاني لا تتطابق الآن مع المسافة بين عنصر hr العلوي وعنوان قهوة.

أضف المزيد من المساحة عن طريق إنشاء فئة (class) باسم bottom-line وتعيين القيمة 25px للخاصية margin-top.

الخطوة 73

الآن، أضف الفئة bottom-line إلى عنصر hr الثاني ليتم تطبيق التنسيق.

الخطوة 74

بعد ذلك، ستقوم بتنسيق عنصر التذييل footer. وللحفاظ على تنظيم ملف CSS، أضف تعليقاً في نهاية ملف styles.css يحتوي على النص FOOTER.

الخطوة 75

بالانتقال إلى عنصر التذييل footer ، اجعل حجم الخط (font size) لجميع النصوص 14 بكسل 14px.

الخطوة 76

يتمثل التنسيق الافتراضي لعنصر العنوان address في ضبط نمط الخط font-style ليكون مائلاً italic. أضف مُحدِّداً (selector) لعنصر العنوان address واضبط نمط الخط font-style فيه ليكون عادياً normal.

الخطوة 77

عادةً ما يكون اللون الافتراضي للرابط (link) الذي لم يُنقر عليه بعد هو الأزرق (blue)، بينما يكون اللون الافتراضي للرابط (link) الذي سبق زيارته من الصفحة هو الأرجواني (purple).

لجعل روابط التذييل (footer link) تظهر بنفس اللون بغض النظر عما إذا كان الرابط قد تمت زيارته أم لا، استخدم مُحدِّد النوع (type selector) لعنصر الرابط a واضبط قيمة الخاصية color على اللون الأسود black.

الخطوة 78

يمكنك تغيير خصائص الرابط بعد زيارته باستخدام مُحدِّد زائف (pseudo-selector) يأخذ الصيغة: a:visited { propertyName: propertyValue; }.

غيّر لون رابط تفضل بزيارة موقعنا الإلكتروني الموجود في التذييل إلى اللون الرمادي gray بعد أن يقوم المستخدم بزيارة الرابط.

الخطوة 79

يمكنك تغيير خصائص الرابط عند تحريك مؤشر الفأرة (hovers) فوقه باستخدام مُحدِّد زائف (pseudo-selector) يأخذ الصيغة: a:hover { propertyName: propertyValue; }.

غيّر لون رابط تفضل بزيارة موقعنا الإلكتروني الموجود في التذييل (footer) ليصبح بنيّاً brown عند تمرير المستخدم مؤشر الماوس (hovers) فوقه.

الخطوة 80

يمكنك تغيير خصائص الرابط عند النقر عليه (clicked) باستخدام مُحدِّد زائف (pseudo-selector) يأخذ الصيغة: a:active { propertyName: propertyValue; }.

غيّر لون رابط تفضل بزيارة موقعنا الإلكتروني الموجود في التذييل (footer) إلى اللون الأبيض white عند النقر (clicked) عليه.

الخطوة 81

للحفاظ على نسق الألوان الأسود (black) والبني (brown) الحالي، غيّر لون الرابط (link) عند زيارته (visited) إلى الأسود black ، واستخدم اللون البني brown عند النقر الفعلي (clicked) عليه.

الخطوة 82

المسافة الموجودة أعلى نص القائمة مقهى التقنية لا تتطابق مع المسافة الموجودة أسفل العنوان (address) في ذيل القائمة (bottom of the menu)؛ ويعود ذلك إلى وجود هامش علوي افتراضي (default top margin) يطبقه المتصفح على عنصر h1.

غيّر الهامش العلوي (top margin) للعنصر h1 إلى 0 لإزالة الهامش العلوي بالكامل.

الخطوة 83

لتقليل بعض المساحة العمودية (vertical space) بين عنصر h1 والنص تأسست عام 2025 ، غيّر الهامش السفلي (bottom margin) للعنصر h1 إلى 15px.

الخطوة 84

تبدو المسافة العلوية (top spacing) جيدة الآن؛ أما المسافة الموجودة أسفل العنوان (address) في ذيل القائمة (bottom of the menu) فهي أكبر قليلاً من المسافة الواقعة بين أعلى القائمة وعنصر h1.

لتقليل مساحة الهامش الافتراضية (default margin space) أسفل عنصر الفقرة p الذي يحتوي عنصر (address)، قم بإنشاء مُحدِّد فئة (class selector) باسم address واستخدم القيمة 5px لخاصية الهامش السفلي margin-bottom.

الخطوة 85

الآن قم بتطبيق فئة العنوان (address class) على عنصر p الذي يحتوي على عنوان الشارع 123 مبادرة التقنية العربية المفتوحة.

الخطوة 86

تبدو قائمة الطعام جيدة، ولكن باستثناء صورة الخلفية التي تظهر حبوب القهوة، فهي تتكون في الغالب من نصوص فقط.

تحت العنوان قهوة ، أضف صورة باستخدام الرابط

https://openarabtech.github.io/CSSVerse/src/assets/coffee.jpg

الخطوة 87

الصورة التي أضفتها ليست متمركزة أفقيًا (not centered horizontally) مثل عنوان قهوة الموجود فوقها؛ إذ تُعد عناصر img عناصر من نوع "inline-level" (عناصر ضمن السطر)، ولذلك فهي تقع ضمن تدفق النص.

لجعل الصورة تتصرف كعنصر على مستوى الكتلة (block-level element) — مثل العنوان — قم بإنشاء مُحدِّد (selector) من النوع img. اضبط خاصية العرض display على القيمة block ، واستخدم الخاصيتين margin-left و margin-right لمحاذاتها في المنتصف أفقيًا.

الخطوة 88

أضف صورة أخيرة أسفل العنوان الحلويات باستخدام الرابط

https://openarabtech.github.io/CSSVerse/src/assets/pie.jpg

الخطوة 89

سيكون من الأفضل لو كانت المسافة العمودية (vertical space) بين عناصر h2 والأيقونات (icons) المرتبطة بها أقل؛ إذ تحتوي عناصر h2 افتراضياً على هوامش علوية وسفلية (default top and bottom margin space)، لذا يمكنك تعديل الهامش السفلي (bottom margin) لهذه العناصر h2 ليصبح صفراً 0 أو أي قيمة أخرى.

هناك طريقة أسهل؛ ما عليك سوى إضافة هامش علوي سالب (negative top margin) إلى عناصر img لسحبها للأعلى من مواقعها الحالية. تُنشأ القيم السالبة بوضع علامة - قبل القيمة. ولإتمام هذه الورشة، استخدم هامشاً علوياً سالباً (negative top margin) بمقدار 25px ضمن مُحدِّد النوع img.

تهانينا! لقد أتممت ورشة عمل قائمة مقهى.