درس تطبيقي حول الترميز: التوسيط في CSS
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يساعدك هذا الدرس التطبيقي حول الترميز على مشاركة وعرض طريقتك المفضّلة في التمركز في CSS.
يمكنك الاطّلاع على مشاركة المدونة Centering in CSS للتعرّف على 5 من طُرقي المفضّلة للتوسيط في CSS. أو شاهد هذا الفيديو!
الإعداد
- انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.
- فتح "
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
من القسم السابق.
- يُرجى نشر تغريدة عن تأثير Glitch وسأعرضها في مشاركة المدونة.
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2020-12-16 (حسب التوقيت العالمي المتفَّق عليه)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"لا يحتوي على المعلومات التي أحتاج إليها."
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"الخطوات معقدة للغاية / كثيرة جدًا."
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"المحتوى قديم."
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"ثمة مشكلة في الترجمة."
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"مشكلة في العيّنات / التعليمات البرمجية"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"غير ذلك"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"يسهُل فهم المحتوى."
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"ساعَدني المحتوى في حلّ مشكلتي."
},{
"type": "thumb-up",
"id": "otherUp",
"label":"غير ذلك"
}]