تعلم CSS من الصفر: المحددات والتتابع ونموذج الصندوق

CSS تضيف إيه إلى HTML؟

جمال تك توفر CSS بجانب HTML. فهم عناصر الصفحة يساعدك على معرفة ما تؤثر فيه المحددات.

نسق بطاقة واحدة

* {
  box-sizing: border-box;
}

.card {
  max-width: 40rem;
  margin-inline: auto;
  padding: 1.25rem;
  border: 1px solid #bfd8d3;
  border-radius: 0.75rem;
  color: #142c34;
  background: #f6f9f8;
}

.card h2 {
  margin-block-start: 0;
}

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

اترك المحتوى كما هو أثناء التجربة حتى ترى أثر تغيير CSS وحده.

افهم نموذج الصندوق

عند استخدام border-box، تضم الأبعاد المعلنة padding والحدود، بينما تظل الهوامش خارجها. هذا يسهل بعض الحسابات لكنه لا يلغي فهم التخطيط المحيط.

لماذا تفوز قاعدة على أخرى؟

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

لا تعالج كل تعارض بإضافة important. افحص القاعدة التي تطبق فعليًا، وبسّط المحددات المتنافسة.

راجع خاصية واحدة

استخدم أدوات المطور لفحص العنصر والقيم المحسوبة. هل يطابقه المحدد؟ هل توجد قاعدة أقوى؟ وهل سياق التخطيط يغير النتيجة؟

لو البطاقة أعرض من المتوقع، راجع العرض وpadding والحدود وطريقة حساب الصندوق. ولو النص صعب القراءة، راجع الحجم والتباين بدل تغيير المسافات عشوائيًا.

تمرين منضبط

أنشئ بطاقتين بنفس الكلاس. غيّر المسافة المشتركة وتأكد من تأثرهما. ثم أضف شكلًا مختلفًا لواحدة باسم واضح واشرح الخاصية التي اختلفت.

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