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