العودة إلى الدرس

شرح CSS وتمارين إضافية

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

HTML المستخدم في هذا المثال

<main>
  <h1>مرحباً، أنا سارة</h1>
  <p>هذه صفحتي الأولى.</p>
  <ul>
    <li>القراءة</li>
    <li>الرسم</li>
    <li>التعلّم</li>
  </ul>
</main>

غيّر شكل صفحتك

كتبت محتوى الصفحة باستخدام HTML. الآن تختار عنصراً وتغيّر شكله باستخدام CSS. في المثال، h1 يختار العنوان الرئيسي، وcolor تغيّر لون نصه.

CSS

h1 {
  color: #234a91;
}

2. مسافات حول العناصر وداخلها

تضيف padding مساحة داخل العنصر، وmargin مساحة حوله. وتحدّ max-width من طول السطر. جرّب هذه القواعد على صفحتك.

CSS

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

3. رتّب مجموعة باستخدام Flexbox

ضع اهتماماتك داخل ul تحمل class=interests. ترتّب display:flex العناصر في صف، وتفصل بينها gap، وتسمح flex-wrap بانتقالها إلى سطر آخر إذا ضاقت المساحة.

CSS

.interests {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

4. عدّل التنسيق للشاشة الصغيرة

تطبّق قاعدة media query التنسيق عند عرض شاشة تحدّده. هنا تصبح القائمة عموداً إذا قلّ العرض عن 600 بكسل. صغّر نافذة المتصفح لترى الفرق.

CSS

@media (max-width: 600px) {
  .interests {
    flex-direction: column;
  }
}

نسّق صفحتك التعريفية

غيّر لون العنوان، واترك مسافة مريحة بين سطور الفقرات.
أضف مساحة حول المحتوى باستخدام padding، وحدّد عرضه باستخدام max-width حتى لا تصبح السطور طويلة جداً.
أضف class=interests إلى قائمتك، ورتّبها باستخدام Flexbox. أضف media query تجعلها عموداً على الهاتف.

مشروعك: نسّق الصفحة التي بنيتها في HTML دون قالب جاهز. جرّبها في نافذة ضيقة وأخرى واسعة.

شروحات ومراجع إضافية

ارجع إلى مصدر إذا احتجت إلى شرح أكثر

ركّز على الموضوعات التي تحتاجها لمهمة المرحلة. طبّق أثناء التعلّم؛ إنهاء كل المقاطع ليس شرطاً للمتابعة.

أكاديمية الزيرومجاني

خطة دراسة CSS

لغة المصدر: العربية
المستوى: مبتدئ
طريقة الشرح: خطة ودروس فيديو
التمارين: 101 تكليف

من يريد كمية كبيرة من التمارين العملية.

تفاصيل الدورة

أكاديمية الزيرومجاني

كل ما تحتاجه لتعلم CSS

لغة المصدر: العربية
المستوى: مبتدئ
طريقة الشرح: دليل وخطة
التمارين: تكليفات مرتبطة بالدروس

من يحتاج خريطة للمفاهيم قبل البدء بالدروس.

تفاصيل الدورة

Web Tutorialمجاني

دروس HTML وCSS وJavaScript

لغة المصدر: العربية
المستوى: مبتدئ
طريقة الشرح: دروس تفاعلية
التمارين: أمثلة واختبارات

من يفضّل القراءة والأمثلة القصيرة التفاعلية.

تفاصيل الدورة

إذا واجهتك مشكلة

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

هل تستطيع تنسيقها بنفسك؟

أفهم كيف أختار العنصر، وأغيّر الألوان والمسافات وتنسيق النص. أستطيع ترتيب اهتماماتي باستخدام Flexbox وشرح المسافات والالتفاف وقاعدة الشاشة الصغيرة. تظهر صفحتي على الهاتف والحاسوب دون الحاجة إلى تمرير أفقي.

العودة إلى الدرس