عدد الكلمات: ~٢٨٠٠ · مدة القراءة: ١٤ دقيقة

التنسيق البصري

كيف تحوّل الهياكل الصامتة إلى صفحات مذهلة باستخدام CSS — من سطرٍ واحد يغيّر اللون إلى تخطيطاتٍ تتكيف مع كل شاشة

ملاحظة للقارئ: هذا المقال يُكمل ما بنيناه في المقال السابق. إن لم تكن قد مررت بمرحلة HTML بعد، فننصحك بالبدء من: لغة الهيكل: تعلم أساسيات HTML لبناء أول صفحة ويب بيدك، إذ سنُكمل على نفس الصفحة التي بنيناها هناك.

في المقال السابق، بنينا صفحةً ويب كاملة الهيكل — رأسٌ وأقسامٌ وتذييل وروابط وقوائم — وحين فتحناها في المتصفح كانت نصاً أسود على خلفيةٍ بيضاء بلا أي اهتمامٍ بصري. هذا بالضبط ما ينبغي أن تكون عليه بدون CSS. في هذا المقال من منصة ذي يزن، سنتعلم سويةً كيف تُكسى تلك العظام بلونٍ وحجمٍ وترتيب، وكيف تجعل صفحتك تبدو مختلفةً على الجوال عن الشاشة الكبيرة دون أن تكتب كودَين منفصلَين.

ما هو CSS “روح التصاميم البصرية” وكيف يصل إلى HTML؟

ما هو CSS؟ (روح التصميم البصرية)إذا كانت لغة HTML هي “الهيكل العظمي” أو جدران المبنى الصامتة التي تعلمنا بناءها في المقال السابق، فإن CSS (اختصار لـ Cascading Style Sheets) هي الطلاء، الإضاءة، الديكور، والأثاث الذي يمنح هذا المبنى هويته البصرية ونبرز بها جماله. بدون CSS، تظهر جميع مواقع العالم بنسق واحد ممل: نصوص سوداء متراصة، روابط زرقاء تحتها خط، وصور ضخمة تملأ الشاشة بعشوائية. وظيفة CSS الأساسية هي الإجابة عن سؤال واحد: كيف يجب أن يبدو هذا العنصر للمستخدم؟
لماذا سُميت بالصفحات “المتتالية”؟ (سر الـ Cascading)
كلمة “متتالية” أو “المتعاقبة” في اسم اللغة ليست مجرد مصطلح معقد، بل هي طريقة تفكير المتصفح. تعني هذه الخاصية أن قواعد التنسيق تتدفق وتُطبق من الأعلى إلى الأسفل، تماماً مثل الشلال. إذا أخبرت المتصفح في السطر الأول أن يجعل لون الفقرة “أزرق”، ثم عدت في السطر العاشر وأخبرته أن يجعل نفس الفقرة “حمراء”، فإن المتصفح سيأخذ بالقاعدة الأخيرة (الأحدث) ويلغي ما قبلها. هذا التتالي هو السبب الرئيسي وراء حيرة المبتدئين عندما يكتبون كود تنسيق صحيح بنسبة 100% ولكنهم لا يرون أثره على الشاشة؛ غالباً هناك قاعدة أخرى أسفل الملف أو أكثر تخصيصاً تقوم بإلغاء قاعدتهم دون أن يشعروا
!كيف يفكر كود CSS؟ (القاعدة البسيطة)
كتابة CSS أسهل مما تتخيل، فهي لا تحتوي على معادلات منطقية، بل تعتمد على معادلة ثلاثية بسيطة: (المُستهدَف ➔ الخاصية ➔ القيمة). انظر إلى المثال التالي:

p {
  color: red;
  font-size: 18px;
}

هنا قمنا بـ: تحديد المستهدف (Selector): وهو حرف p، أي أننا نقول للمتصفح “يا متصفح، اذهب إلى جميع الفقرات النصية في الصفحة”.تحديد الخاصية (Property): وهي color (اللون) و font-size (حجم الخط). إعطاء القيمة (Value): وهي اللون الأحمر red، والحجم 18px، وننهي كل سطر بفاصلة منقوطة ; لتأكيد نهاية الأمر.

ثلاث طرق لربط CSS بصفحتك

إذا كنت قد جربت تدوين المقالات على ووردبريس سابقاً، فربما استخدمت زر “تخصيص” ثم خانة “CSS إضافي” لتغيير لون أو خط في موقعك. في المواقع الحقيقية، الأمر يشبه ذلك تماماً، حيث يقرأ المتصفح كود CSS بثلاث طرق مختلفة. فهمك لهذه الطرق الآن سيسهل عليك التحكم بملفات موقعك بالكامل عندما تنتقل خطوتنا القادمة إلى الاستضافات الذاتية:

1. الطريقة الاحترافية: الملف الخارجي (وهي ما تبحث عنه الاستضافات) بدلاً من حشو الأكواد داخل صفحات الموقع، يكتب المحترفون كود التنسيق في ملف منفصل تماماً نطلق عليه اسماً مثل style.css. هذا الملف نربطه بصفحة الويب بسطر واحد ذكي نضعه في أعلى الصفحة (داخل قسم الـ): لتقريب الصورة: عندما تستخدم قالب ووردبريس جاهز، فإن هذا القالب يأتي ومعه ملف خارجي جاهز مثل هذا تماماً، يقوم بتنسيق موقعك بالكامل خلف الكواليس دون أن تراه يدوياً.

2. الطريقة السريعة: وسم <style> في رأس الصفحةهنا لا ننشئ ملفاً جديداً، بل نفتح مساحة خاصة بالتنسيق في أعلى نفس صفحة الويب باستخدام وسم <style> ونكتب الأكواد بداخلها. هذه الطريقة تشبه تماماً قيامك بكتابة كود في صندوق “CSS إضافي” داخل ووردبريس؛ هي ممتازة للتجربة السريعة والتعديلات البسيطة، لكنها تجعل الصفحة بطيئة وثقيلة إذا كثرت الأكواد.

3. الطريقة الطارئة: التنسيق المباشر على العنصر (In-line Style) وهي أن تذهب إلى العنصر نفسه (مثل فقرة معينة أو عنوان محدد) وتجبره على أخذ لون معين عبر سمة style مباشرة، كأن تكتب: <p style=”color: red>. هذه الطريقة تجنبها قدر الإمكان، لأنها تجعل تعديل الموقع مستقبلاً كابوساً؛ تخيل أنك تريد تغيير لون موقعك من الأحمر للأزرق، ستضطر للبحث عن كل عنصر وتعديله يدوياً بدلاً من تعديل سطر واحد في ملف خارجي!

سنجرب سويةً الطريقة الاحترافية كي ننسق صفحة الويب التي أنشأناها في المقال السابق والتي كنا قد حفظناها باسم: index.html، وسنكتب كل قواعد التنسيق في ملفٍّ منفصل باسم مثل style.css، ثم نربطه بصفحة HTML في قسم <head>. لنبدأ أولاً بإضافة السطر هذا إلى ملف index.html:

<link rel="stylesheet" href="style.css" />

أي ستصبح بداية الملف بعد اضافة هذا السطر كالتالي:

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>أول صفحة ويب بيدي</title>
<link rel="stylesheet" href="style.css" />
</head>

قبل أن نكتب ملف قواعد التنسيق اللوني، سنشرحها أكثر..

بنية قاعدة CSS: المحدِّد والخاصية والقيمة

كل قاعدة CSS تتبع نفس البنية الثلاثية:

المحدِّد {
  القيمة لها: الخاصية;
  قيمتها: خاصية-أخرى;
}

المحدِّد (Selector) هو من تُخاطب: هل تريد تنسيق كل الفقرات؟ أم عنصرٌ بمعرّفٍ محدد؟ أم كل العناصر التي تحمل صنفاً معيناً! الخاصية هي ما تريد تغييره: اللون، أو الحجم، أو الهامش. والقيمة هي ما تريده بدلاً من الافتراضي. مثالٌ عملي مباشر:

/* كل الفقرات في الصفحة */
p {
  color: #333333;
  font-size: 1.1rem;
  line-height: 1.8;
}

/* عنصرٌ واحد بمعرّف فريد */
#main-title {
  color: #c0392b;
  text-align: center;
}

/* كل العناصر التي تحمل هذا الصنف */
.highlight {
  background-color: #fff3cd;
  padding: 10px;
}

المحدِّدات الأساسية التي تكفيك للبداية

نموذج الصندوق (Box Model): الحقيقة التي تُفسّر كل شيء

كل عنصرٍ في HTML — كل فقرة وكل عنوان وكل صورة — هو في جوهره صندوق. وهذا الصندوق يتكون من أربع طبقاتٍ متداخلة يُسمّى مجموعها “نموذج الصندوق”:

المحتوى (Content): النص أو الصورة نفسها.
الحشوة (Padding): المسافة الداخلية بين المحتوى وحافة الصندوق — تحمل لون خلفية العنصر.
الحدود (Border): الخط الذي يُحيط بالصندوق — قد يكون مرئياً أو لا.
الهامش (Margin): المسافة الخارجية بين هذا الصندوق والعناصر المجاورة — شفافةٌ دائماً.

.my-box {
  /* المحتوى */
  width: 300px;
  height: 150px;

  /* الحشوة الداخلية */
  padding: 20px;

  /* الحدود */
  border: 2px solid #c0392b;

  /* الهامش الخارجي */
  margin: 30px auto; /* auto يُمركز الصندوق أفقياً */

  /* اللون والخلفية */
  background-color: #f9f9f9;
  color: #333;
}

فهم نموذج الصندوق يحل ٧٠٪ من ألغاز التباعد والمحاذاة التي تُحيّر المبتدئين. حين ترى عنصراً لا يجلس في مكانه الصحيح، السؤال الأول دائماً: ما قيم الـ margin والـ padding والـ border لهذا العنصر وللعنصر المجاور؟

الألوان والخطوط: من أين تبدأ؟

الألوان في CSS

CSS يقبل الألوان بصيغٍ متعددة، وأكثرها استخداماً هي الكود السداسي عشري (Hex) مثل #c0392b، وصيغة RGB مثل rgb(192, 57, 43)، وصيغة HSL مثل hsl(6, 63%, 46%) التي تُفضّلها كثيرٌ من أدوات التصميم الحديثة لأنها أوضح للعين، والأسماء المباشرة مثل red أو transparent للحالات البسيطة.

نصيحةٌ عملية: اختر لوحة ألوانٍ محدودة منذ البداية — لونٌ رئيسي، ولونٌ ثانوي، وثلاثة درجاتٍ من الرمادي للنصوص والخلفيات — وعرّفها كمتغيراتٍ في أعلى ملف CSS:

:root {
  --color-primary:   #c0392b;
  --color-secondary: #1a3a5c;
  --color-text:      #333333;
  --color-muted:     #666666;
  --color-bg:        #ffffff;
}

h2 { color: var(--color-primary); }
p  { color: var(--color-text); }

هذا الأسلوب — متغيرات CSS — يجعل تغيير اللون الرئيسي للموقع بأكمله مسألة سطرٍ واحد لا مئة سطر.

الخطوط والطباعة

الخط الذي تختاره يُحدد شخصية موقعك أكثر مما تتوقع. المتصفح لديه خطوطٌ افتراضية قبيحة المظهر، والحل الأسهل هو استيراد خطٍّ من غوغل فونتس (Google Fonts) مجاناً:

/* في <head> من ملف HTML */
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">

/* في ملف CSS */
body {
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;       /* 1rem = حجم الخط الافتراضي للمتصفح = 16px */
  line-height: 1.8;      /* المسافة بين الأسطر = ١.٨ مرة حجم الخط */
  color: var(--color-text);
}

وحدة rem تستحق الانتباه: هي دائماً نسبيةٌ إلى حجم خط العنصر <html> الجذر، وليس إلى العنصر الأب المباشر كما تفعل em. هذا يجعلها أكثر قابليةً للتنبؤ وأفضل للمواقع التي تراعي إمكانية الوصول.

التخطيطات: Flexbox وGrid

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

Flexbox: للتخطيطات أحادية الاتجاه

Flexbox يُنظّم العناصر في صفٍّ واحد (أفقي أو رأسي)، وهو الأنسب لشريط التنقل، وبطاقات الخدمات، وأي مجموعة عناصرٍ تريدها متراصةً جنباً إلى جنب:

.nav-links {
  display: flex;
  gap: 24px;                  /* مسافةٌ متساوية بين العناصر */
  align-items: center;        /* محاذاة رأسية في المنتصف */
  justify-content: flex-end;  /* دفع العناصر لليمين */
}

.cards-container {
  display: flex;
  flex-wrap: wrap;            /* التفاف العناصر للسطر التالي لو ضاقت المساحة */
  gap: 20px;
  justify-content: center;
}

Grid: للتخطيطات ثنائية الأبعاد

Grid يُنظّم العناصر في صفوفٍ وأعمدةٍ في آنٍ واحد، وهو الأنسب لتخطيط الصفحة الكاملة ولمعارض الصور والمتاجر:

.portfolio-grid {
  display: grid;
  /* ثلاثة أعمدةٍ متساوية تملأ المساحة المتاحة */
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.page-layout {
  display: grid;
  /* عمودٌ جانبي ثابت ومحتوىً رئيسي مرن */
  grid-template-columns: 280px 1fr;
  gap: 32px;
}

لا تُضيّع وقتك في الجدال: Flexbox للأشياء المتراصة في اتجاهٍ واحد، وGrid لكل ما يحتاج إلى شبكة. الأدوات الحديثة مُصمَّمة للتكامل لا للتنافس، واستخدامهما معاً في صفحةٍ واحدة طبيعيٌ تماماً.

الاستجابة للشاشات (Responsive Design): مبدأ الكسر لا الانهيار

الموقع المستجيب لا يصمم نسختين منفصلتين للجوال والحاسوب — بل يكتب تصميماً واحداً يُعيد تنظيم نفسه تلقائياً حين تتغير أبعاد الشاشة. الأداة الرئيسية لهذا هي “استعلامات الوسائط” (Media Queries):

/* التصميم الافتراضي: للجوال أولاً */
.cards-container {
  display: flex;
  flex-direction: column; /* عمودٌ واحد على الجوال */
  gap: 16px;
}

/* حين تتسع الشاشة إلى 768px أو أكثر */
@media (min-width: 768px) {
  .cards-container {
    flex-direction: row;  /* صفٌّ أفقي على الشاشات الكبيرة */
    flex-wrap: wrap;
  }
}

/* حين تتسع إلى 1200px أو أكثر */
@media (min-width: 1200px) {
  .cards-container {
    gap: 32px;
  }
}

مبدأ “الجوال أولاً” (Mobile-First) يعني أن تكتب تصميم الجوال كأساسٍ ثم تُضيف فوقه تعديلاتٍ للشاشات الأكبر — وهذا عكس ما يفعله المبتدئون الذين يصمّمون للحاسوب ثم يحاولون “ضغط” الموقع للجوال لاحقاً.

للتوسع في هذا الموضوع تحديداً سنخصص له مقالةً كاملةً في السلسلة: مواقع للهاتف فقط: تصميم مواقع مخصصة للجوال واستجابة الشاشات.

صفحتنا من المقال السابق بعد CSS: قبل وبعد

الآن، بعد أن شرحنا تفاصيل وأهم أوامر التنسيق البصري، سنعود إلى ملف index.html الذي

أنشأناه المقال السابق، وأضفنا له سطر الإحالة إلى ملفنا التالي.. ها هو ملف CSS كاملٌ يُطبّق كل ما تعلمناه اليوم على صفحة HTML التي بنيناها في المقال الرابع. احفظه في ملفٍّ باسم style.css في نفس مجلد الصفحة وستجد فرقاً جذرياً فورياً، عندما تعيد فتح ملف index.html من أي متصفح.

🛠️ تنبيه هام لتحويل ملفك إلى صفحة ويب:

إذا قمت بحفظ الملف وما زال يفتح كمستند نصي عادي، فذلك لأن نظام تشغيلك يخفي امتدادات الملفات تلقائياً. اتبع الآتي فوراً:

• لمستخدمي ويندوز: افتح المجلد ← اضغط على View (عرض) في الأعلى ← فعّل خيار File name extensions. سيتغير اسم ملفك إلى index.html.txt، قم بإعادة تسميته واحذف ملاحقة .txt من النهاية تماماً.
• لمستخدمي الماك: اضغط على الملف ← اختر Rename ← غيّر النهاية من .txt إلى .html واقبل رسالة التأكيد.

بمجرد حذف .txt، ستتحول أيقونة الملف فوراً إلى شعار متصفحك، وبذلك يصبح جاهزاً للتشغيل كصفحة ويب حقيقية!

/* ١. إعداد عالمي */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --color-primary:   #c0392b;
  --color-secondary: #1a3a5c;
  --color-text:      #333;
  --color-muted:     #666;
}

/* ٢. الجسم العام */
body {
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/* ٣. الرأس والتنقل */
header {
  background-color: var(--color-secondary);
  color: white;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 { margin: 0; font-size: 1.4rem; }

nav { display: flex; gap: 20px; }
nav a { color: white; text-decoration: none; }
nav a:hover { text-decoration: underline; }

/* ٤. المحتوى الرئيسي */
main {
  max-width: 860px;
  margin: 40px auto;
  padding: 0 20px;
}

section { margin-bottom: 48px; }

h2 {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 8px;
}

/* ٥. التذييل */
footer {
  text-align: center;
  padding: 24px;
  background-color: #f4f4f4;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* ٦. استجابة الجوال */
@media (max-width: 600px) {
  header { flex-direction: column; gap: 12px; text-align: center; }
  nav    { flex-wrap: wrap; justify-content: center; }
}

أخطاءٌ تفصل المبتدئين عن المحترفين

كل ما سبق يُعلّمك الأساسيات، لكن ثمة فئةٌ من الأخطاء لا تقع في الشرح المنهجي — تكتشفها فقط حين تبني موقعاً حقيقياً وتجلس أمامه محتاراً. هذه الأخطاء السبعة هي ما يُفرّق بصرياً بين موقعٍ “ينفع” وموقعٍ “يُنبئ بصانعه”.

١. خدعة الأبعاد الافتراضية للصور

حين تُحمَّل الصفحة وتصل الصور بعد النصوص، يقفز كل شيء ويتحرك فجأةً في ظاهرةٍ تُسمّى “انزياح التخطيط” (Layout Shift) — وهي ليست فقط مزعجةً بصرياً، بل تضر بتقييم غوغل لسرعة الموقع. المشكلة أن المتصفح لا يعرف حجم الصورة قبل تنزيلها، فيُخصص لها مساحةً صفرية ثم يُعيد الحساب.

img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* احجز المساحة قبل التنزيل */
  object-fit: cover;       /* اقصّ الصورة دون تمدد أو انضغاط */
  display: block;          /* تخلّص من الفراغ الافتراضي أسفل الصورة */
}

خاصية aspect-ratio تُخبر المتصفح بنسبة الأبعاد مسبقاً فيحجز المساحة قبل وصول الصورة، وobject-fit: cover تجعل الصورة تملأ المساحة المخصصة بأناقةٍ كالتصوير السينمائي — مركّزةٌ ومقصوصة لا ممطوطة.

٢. فخ الهوامش المدمجة

من أكثر اللغازٍ إربكاً للمبتدئ: يُضيف margin-top لعنصرٍ داخل صندوق فيتفاجأ بأن الصندوق الأب بأكمله تحرك للأسفل، لا العنصر الداخلي فقط. هذا ليس خطأً في كوده بل هو سلوكٌ مُتعمَّد في مواصفات CSS يُسمّى “دمج الهوامش” (Margin Collapse): المتصفح يدمج هامشين رأسيين متلامسين ويبقي الأكبر منهما فقط.

/* الحل: حوّل العنصر الأب إلى سياق تنسيق مستقل */
.parent {
  display: flow-root; /* يمنع الدمج دون أي أثرٍ بصري جانبي */
}

/* أو ببساطة أضف حشوةً رمزية */
.parent {
  padding-top: 1px;
}

المحترف لا يزيد قيمة الهامش حتى “يبدو صحيحاً” — فهو يفهم لماذا يحدث هذا ويحله من الجذر.

٣. لغز المحاذاة العمودية المستحيلة

أيقونةٌ بجانب نص، أو حجمٌ خطٍّ مختلف في سطرٍ واحد — ويبدو كل شيء “غير متوازٍ” رغم المحاولات. vertical-align: middle لا يُصلح المشكلة دائماً لأنه يعمل نسبةً إلى خط الأساس الحرفي (Baseline) لا المنتصف البصري الحقيقي.

/* الحل الذي يعمل دائماً: Flexbox */
.icon-with-text {
  display: flex;
  align-items: center; /* محاذاةٌ بصرية حقيقية في المنتصف */
  gap: 8px;
}

/* حين تحتاج محاذاةً على خط الأساس النصي بالضبط */
.mixed-size-text {
  display: flex;
  align-items: baseline; /* يُوحّد خط الأساس لنصوصٍ بأحجامٍ مختلفة */
}

٤. قناع التلاشي البصري للنصوص الطويلة

في بطاقات المحتوى (Cards) حين يكون النص أطول من المساحة، الحل التقليدي بالنقاط text-overflow: ellipsis يُقطع النص قطعاً مفاجئاً. الحل الأنيق هو تلاشي النص تدريجياً في التهاية كأنه يذوب:

.card-text {
  max-height: 120px;
  overflow: hidden;
  /* قناعٌ يجعل النص يتلاشى بدلاً من الاقتطاع الفجائي */
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

هذه التقنية — بدلاً من القطع — تُشعر القارئ بأن هناك المزيد دون أن “تُصفع” عينه بنهايةٍ مبتورة.

٥. عشوائية المسافات بين أجهزة العرض

تصمم الموقع على شاشةٍ متوسطةٍ ويبدو مثالياً، ثم تفتحه على شاشةٍ ضخمةٍ فتبدو المسافات البيضاء ضخمةً مبالغاً فيها، وعلى الجوال تبدو مضغوطةً خانقة. الخطأ هو استخدام قيمٍ ثابتةٍ (px) أو نسبيةٍ بسيطة (%) للمسافات الكبيرة:

/* بدلاً من: padding: 80px;  ← ثابتٌ يبدو ضخماً على الشاشات الكبيرة */
/* أو:       padding: 10%;   ← نسبيٌ يصبح صغيراً جداً على الجوال */

/* الحل: clamp(حد_أدنى, قيمة_مرنة, حد_أقصى) */
section {
  padding: clamp(2rem, 5vw, 8rem);
}

h1 {
  font-size: clamp(1.6rem, 4vw, 3.2rem);
}

clamp() تقول للمتصفح: “لا تقل عن 2rem مهما صغرت الشاشة، ولا تزد عن 8rem مهما كبرت، وفي المنتصف استخدم 5٪ من عرض الشاشة.” هذا يجعل الموقع “يتنفس” بشكلٍ طبيعيٍّ دون التدخل في كل نقطة كسر.

٦. وهم الصندوق المتكامل

ربما أكثر الأخطاء التي تُسبب الإحباط للمبتدئ: يصمم عنصراً بعرض 100% ثم يُضيف padding أو border فيخرج الصندوق عن الشاشة ويظهر شريطٌ تمريرٍ أفقيٌ مزعج. سبب ذلك أن المتصفح بشكلٍ افتراضي يحسب العرض للمحتوى فقط، ثم يُضيف الحواف والحشوة فوق ذلك العرض.

/* هذا السطر ينبغي أن يكون أول شيء في أي ملف CSS تكتبه */
*, *::before, *::after {
  box-sizing: border-box;
  /* الآن العرض 100% يعني 100% شاملاً الحواف والحشوة */
}

هذا السطر الواحد يُصحح سلوك نموذج الصندوق للمتصفح بأكمله ويجعله يتصرف كما يتوقع أي إنسانٍ منطقيٍّ: “إذا قلت 300px فأنا أقصد 300px كاملة بما فيها الحواف.”

٧. الموروثات الخفية: إعادة ضبط المتصفح

كل متصفح يُطبّق تنسيقاتٍ افتراضيةً خاصة به على العناصر — هوامش مختلفة للعناوين، وحجم خطٍّ مختلف للـbutton، وأنماطٌ أخرى. هذا يعني أن موقعك يبدو بشكلٍ مختلفٍ قليلاً من متصفحٍ لآخر حتى بدون أي كودٍ منك. الحل هو “إعادة الضبط” (Reset/Normalize) في بداية ملف CSS:

/* إعادة ضبطٌ عملية وبسيطة */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

button, input, select, textarea {
  font: inherit; /* الحقول لا ترث خط الـ body بشكلٍ افتراضي */
}

المحترف يبدأ كل مشروعٍ بهذا التصفير قبل أي سطرٍ آخر، لأن البناء على أرضيةٍ غير معروفة يُفضي إلى حلولٍ مؤقتة لمشاكلٍ ليست مشاكله أصلاً.

الفرق بين المبتدئ والمحترف ليس في معرفة خواصٍ أكثرٍ، بل في فهم لماذا تتصرف المتصفحات كما تتصرف. حين تفهم السبب تجد الحل فوراً؛ وحين تجهله تُمضي ساعاتٍ في تجربة قيمٍ عشوائية حتى “يبدو صحيحاً”، وبعد أن تنتهي من رؤية نتيجة عملك في تصميم موقعك على متصفح كروم، تتفاجئ بالنتيجة على فايرفوكس!

خلاصة المقال

تعلّمنا اليوم أن تنسيق CSS هي طبقة الجماليات التي تُكسو هيكل HTML بلونٍ وشكلٍ وترتيب، وأن مبدأ الصندوق هو المحور الذي يدور حوله كل تباعدٍ ومحاذاة، وأن Flexbox وGrid هما أداتا التخطيط اللتان أغنتا عن كل الحيل القديمة. ثم تعرّفنا على سبعة أخطاءٍ لا تُصادَف في الشروحات المنهجية لكنها شائعةٌ في المواقع الحقيقية، وإدراكها وحده يرفع جودة عملك درجةً كاملة.

نصيحة من القلب:

سواء كنت كاتباً، محرراً، مدير موقع، أو مصمماً مبتدئاً؛ لا يُطلب منك اليوم حفظ أسطر الأكواد عن ظهر قلب، ولا الإحاطة بكل تفاصيل لغات البرمجة والتنسيق. في عصر الذكاء الاصطناعي، يمكن لأيّ نموذجٍ بسيطٍ أن يكتب لك مئات الأسطر البرمجية في ثوانٍ معدودة.

لكن الفارق الجوهري بين المحترف والمقلّد يكمن في سؤال:
هل تمتلك الأساسيات المعرفية التي تمكنك من فهم هذا الكود، وتعديله، وشرح ما تريده بدقة للذكاء الاصطناعي؟

الإجابة هي لا. بدون استيعابك للمفاهيم الأساسية التي شرحناها اليوم، لن تعرف حتى ما الذي يجب أن تطلبه، أو كيف تحل مشكلة بصرية بسيطة إذا ظهرت أمامك. ربما، لن تستطيع حتى معرفة أين يبدأ الكود وأين ينتهي، وبالتالي لن تتمكن من نسخه ولصقه في مكانه من دون أخطاء. اجعل هدفك دائماً فهم “كيف تعمل الأشياء” وليس مجرد حفظها.

الخطوة التالية الموصى بها:

أجدنا هيكلة الصفحة وتنسيقها، والموقع الذي بنيناه الآن يبدو جيداً على الحاسوب. تابع معنا المقال التالي: مواقع للجوال فقط: تصميم مواقع مخصصة للجوال واستجابة الشاشات، حيث سنُعمّق مبدأ Mobile-First ونتعلم كيف نبني مواقع وتطبيقات ويب تعمل بكفاءةٍ حقيقيةٍ على الهواتف الذكية.

المراجع والمصادر:

1. توثيق CSS الرسمي على MDN Web Docs: MDN CSS Reference
2. دليل Flexbox التفاعلي: A Complete Guide to Flexbox — CSS-Tricks
3. دليل Grid التفاعلي: A Complete Guide to CSS Grid — CSS-Tricks
4. أداة اختيار الألوان بصيغة HSL: HSL Color Picker

— دليل تصميم مواقع الويب —

المقال السابق: ٤- لغة الهيكل: HTML

المقال الحالي: ٥- التنسيق البصري: CSS

المقال التالي: ٦- مواقع للجوال فقط

سلاسل مشابهة: دليل التدوين | ورشة التدوين متعدد الوسائط | دليل السيو

منصة ذي يزن © 2026