CSS من الصفر: الألوان والخطوط والصندوق

طريقان إلى نفس الفكرة

قبل أن تبدأ

الفكرة الجوهرية

1أين تكتب CSS؟ ثلاثة أماكن، وواحد هو الصحيح

(1) داخل الوسم بخاصية style: سريع لتجربة لكنه يخلط الشكل بالمحتوى. (2) في وسم <style> داخل head: مناسب لصفحة واحدة. (3) في ملف منفصل styles.css تربطه بـ <link>: الطريقة الصحيحة لأي موقع، لأن ملفًا واحدًا يلبس كل الصفحات، والمتصفح يحفظه فلا يحمّله مرتين.

<!-- 1. on the tag (avoid) -->
<p style="color: brown;">نص بني</p>

<!-- 2. in the page's head -->
<style>
  p { color: brown; }
</style>

<!-- 3. a separate file (the right way) -->
<link rel="stylesheet" href="styles.css">

شكل القاعدة: محدّد يختار العناصر، ثم أقواس معقوفة { }، وفي داخلها سطر لكل خاصية: اسم الخاصية، نقطتان، القيمة، فاصلة منقوطة.

h1 {                    /* selector: every h1 */
  color: #b4532a;       /* property: value; */
  font-size: 32px;
}

2المحدّدات: كيف تختار ما تريد تلوينه

العنصر p يختار كل الفقرات. الصنف .price (بنقطة) يختار كل عنصر عليه class="price"، ويُستخدم لعدة عناصر. المعرّف #total (بشبّاك) يختار العنصر الوحيد الذي id="total". السليل nav a يختار الروابط التي داخل nav فقط. الحالة a:hover حين تمرّ الفأرة، و:focus حين يُركَّز العنصر. وتجمع عدة محدّدات بفاصلة: h1, h2.

3الألوان والخلفيات

تكتب اللون بأربع طرق: اسم مثل tomato وnavy، أو سداسي #b4532a (أحمر أخضر أزرق بالست عشري)، أو rgb(180 83 42) بأرقام من 0 إلى 255، أو hsl(20 62% 44%) بدرجة اللون ثم التشبّع ثم الإضاءة، وهو الأسهل للتعديل: غيّر الرقم الأخير لتفتح اللون أو تغمّقه. وcolor لون النص وbackground لون الخلفية أو صورتها أو تدرّجها.

4الخطوط والنص والوحدات

font-family نوع الخط مع بدائل إن لم يوجد، وfont-size حجمه، وfont-weight سُمكه (400 عادي، 700 عريض)، وline-height المسافة بين الأسطر (1.6 مريحة للقراءة)، وtext-align المحاذاة. وللخطوط العربية الجميلة استخدم Google Fonts مثل «IBM Plex Sans Arabic» أو «Tajawal».

الوحدات: px بكسل ثابت. rem مضاعف لحجم الخط الأساسي في المتصفح (16 بكسل عادة)، فـ 1.5rem = 24 بكسل، ويكبر إن كبّر المستخدم الخط من إعداداته، لذلك هو الأفضل للنص. % نسبة من الأب. vw نسبة من عرض الشاشة: 50vw نصفها.

5نموذج الصندوق: كل عنصر صندوق

أهم فكرة في CSS كلها: كل عنصر صندوق مستطيل من أربع طبقات، من الداخل للخارج: المحتوى (النص أو الصورة)، ثم الحشوة padding (مسافة بين المحتوى والإطار، تأخذ لون الخلفية)، ثم الإطار border، ثم الهامش margin (مسافة شفافة بين الصندوق وجيرانه).

┌──────────────── margin (شفاف) ────────────────┐
│  ┌──────────── border (الإطار) ────────────┐  │
│  │  ┌──────── padding (الحشوة) ─────────┐  │  │
│  │  │                                   │  │  │
│  │  │        content (المحتوى)          │  │  │
│  │  │                                   │  │  │
│  │  └───────────────────────────────────┘  │  │
│  └─────────────────────────────────────────┘  │
└───────────────────────────────────────────────┘

box-sizing: border-box يجعل width يشمل الحشوة والإطار، فـ 220 تعني 220 فعلًا. بدونها، 220 + حشوة 40 + إطار 8 = 268! ضعه على كل العناصر في أول كل ملف CSS تكتبه. والاختصار margin: 10px 20px يعني أعلى وأسفل 10، ويمين ويسار 20.

6من يفوز؟ التتالي والأولوية والوراثة

حين تقول قاعدتان لونين مختلفين لنفس العنصر، المتصفح يحسم بالترتيب: (1) الأخصّ يفوز: المعرّف # أقوى من الصنف .، والصنف أقوى من اسم العنصر. (2) إن تساوتا في الخصوصية، الأخيرة في الملف تفوز. والوراثة: بعض الخصائص تنتقل من الأب لأبنائه مثل color وfont-family، لذلك يكفي أن تضعها على body.

مثال محلول

المسألة: بطاقة عرضها width: 300px وفيها padding: 24px وborder: 3px، ومع ذلك تخرج عن الحاوية التي عرضها 300. وعنوانها .card h2 { color: brown } لا يتلوّن لأن في الملف #offers h2 { color: black }. التحليل: بلا border-box يصير العرض الحقيقي 300 + 48 + 6 = 354. والمعرّف #offers أخصّ من الصنف .card فيفوز رغم أن قاعدة البطاقة بعده. الحل: border-box للعرض، ونزول بالخصوصية إلى أصناف فقط:

خرافة مقابل حقيقة

أين تقابله في العمل

اختبر فهمك

بطاقات مراجعة سريعة

تحقق من فهمك