Adam Argyle
يُعدّك هذا الدرس التطبيقي حول الترميز لمشاركة طريقتك المفضّلة في التوسيع في CSS وعرضها.
يمكنك الاطّلاع على مركزة العناصر في CSS في مدوّنتي للتعرّف على 5 من طُرقي المفضّلة لتطبيق CSS. يمكنك أيضًا مشاهدة هذا الفيديو.
ضبط إعدادات الجهاز
- انقر على Remix to Edit (إنشاء ريمكس لتعديل المحتوى) ليصبح المشروع قابلاً للتعديل.
- فتح "
app/index.html" - في
line 23، استبدِل/* your centering CSS here /*بخدمة مقارنة الأسعار (CSS). - (اختياري) أدخِل اسمًا لأسلوب التوسيع واستبدِل النص في
<h1>.
الأنماط
- إنشاء ملف جديد في مجلد
app/css/ - أنشئ أداة اختيار لعرض حلّ المركزية، مثل
.turbo-centerأو[floaty-mcfloat] - ضمن هذا العنصر الاختياري الجديد، اكتب أسلوب التوسيع (يمكنك الاطّلاع على
app/css/كأمثلة على العناصر الأخرى). - (اختياري) كتابة بعض "أنماط الدعم" لنتمكّن من معرفة الأطفال الذين يحتاجون إلى أنماط لتفعيل الوضع "في الوسط"
- افتح
app/css/index.cssواستورِد ملفك الجديد في أسفل الصفحة.
تلخيص كل ما سبق
- فتح
app/index.htmlمرة أخرى - ابحث عن
<article>وأضِف إليه أداة الاختيار المخصّصة التي أنشأتها في الخطوة 2 من القسم السابق. - يمكنك إرسال تغريدة إلينا تتضمّن معلومات عن الخطأ، وسنعرضه في مشاركة المدونة.