تعلّم أساسيات CSS عبر بناء مكوّن بطاقة احترافي

Updated يونيو 10, 2026 6 min read

Aldawsari

دقائق القراءة: 6

مقدمة: لماذا تحتاج إلى تعلّم `CSS`؟

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

في هذا الدليل العملي، سنتعلّم أساسيات CSS من خلال بناء مكوّن بطاقة Card Component من الصفر. هذا الأسلوب مفيد جداً للمبتدئين لأنه يربط المفاهيم النظرية بتطبيق بصري واضح يمكنك استخدامه لاحقاً في مشاريعك.

شرح أساسيات CSS من خلال بناء مكوّن بطاقة احترافي ومتجاوب

ما الذي سنبنيه في هذا الدرس؟

سنقوم بإنشاء بطاقة تحتوي على العناصر التالية:

صورة رئيسية
وسوم تصنيف
عنوان للبطاقة
وصف مختصر
زر إجراء

هذا النوع من المكوّنات شائع جداً في صفحات المقالات، وبطاقات المنتجات، وعروض الخدمات، وواجهات التطبيقات الحديثة.

نموذج مكوّن بطاقة يحتوي على صورة وعنوان ووصف وزر

بناء الهيكل الأساسي باستخدام `HTML`

قبل إضافة التنسيقات، نحتاج أولاً إلى إنشاء البنية الأساسية للبطاقة. افتح محرر الشيفرة مثل VS Code، ثم أنشئ ملفاً جديداً باسم index.html.

بعد ذلك، يمكنك إنشاء القالب الأولي لصفحة HTML وكتابة الكود التالي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

بعد إنشاء القالب، غيّر قيمة العنوان داخل الوسم <title> من Document إلى CSS Basics، ثم أضف داخل العنصر <body> البنية الخاصة بمكوّن البطاقة:

<body>
  <div id="container">
    <div class="card">
      <img src="https://images.unsplash.com/photo-1536323760109-ca8c07450053" alt="Lago di Braies">

      <div class="card__details">
        <span class="tag">Nature</span>
        <span class="tag">Lake</span>

        <div class="name">Lago di Braies</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consectetur sodales morbi dignissim sed diam pharetra vitae ipsum odio.</p>
        <button>Read more</button>
      </div>
    </div>
  </div>
</body>

بهذا الشكل أصبح لدينا الهيكل الأولي للمكوّن، ويمكنك معاينته مباشرة عبر المتصفح أو باستخدام إضافة Live Server.

تنسيق البطاقة باستخدام `CSS`

الآن ننتقل إلى الجزء الأهم، وهو تنسيق المكوّن. هنا ستبدأ الصورة والشكل النهائي للبطاقة بالظهور تدريجياً.

طرق تطبيق `CSS` على ملفات `HTML`

هناك ثلاث طرق أساسية لإضافة تنسيقات CSS:

ملف خارجي External Stylesheet: وهو الخيار الأفضل والأكثر استخداماً، حيث تضع التنسيقات في ملف منفصل بامتداد .css.
تنسيق داخلي Internal Stylesheet: ويتم عبر وسم <style> داخل <head>.
تنسيق مباشر Inline Style: ويُكتب داخل الخاصية style في العنصر نفسه، ويُفضّل تجنبه إلا عند الضرورة.

إضافة ملف تنسيق خارجي

لإنشاء ملف تنسيق خارجي، أنشئ ملفاً جديداً باسم style.css داخل المجلد نفسه، ثم اربطه بملف index.html عبر الكود التالي داخل <head>:

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

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

فهم بنية قاعدة `CSS Ruleset`

إذا أردت مثلاً جعل عرض الصورة يساوي 50%، يمكنك كتابة القاعدة التالية:

img {
  width: 50%;
}

تتكوّن قاعدة CSS من:

محدّد Selector: مثل img
خاصية Property: مثل width
قيمة Value: مثل 50%

توضيح مكونات قاعدة CSS مثل المحدد والخاصية والقيمة

تنسيق عناصر البطاقة خطوة بخطوة

تنسيق العنصر `body`

لنبدأ بتغيير لون خلفية الصفحة وتحديد نوع الخط:

body {
  background-color: #eaeff1;
  font-family: "Raleway", sans-serif;
}

ولكي يعمل الخط Raleway بشكل صحيح، أضف السطر التالي في بداية ملف style.css:

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500;600&display=swap");

بمجرد تطبيق هذا الجزء، ستكون قد أنجزت أول خطوة حقيقية في تنسيق الصفحة باستخدام CSS.

تنسيق الصورة `img`

حتى تبدو الصورة متجاوبة مع حجم البطاقة، اجعل عرضها يساوي 100%:

img {
  width: 100%;
}

ثم أضف زوايا دائرية وارتفاعاً ثابتاً:

img {
  width: 100%;
  border-radius: 12px;
  height: 214px;
}

قد تلاحظ أن الصورة أصبحت متمددة بشكل غير مناسب، ويمكن إصلاح ذلك باستخدام الخاصية object-fit:

img {
  width: 100%;
  border-radius: 12px;
  height: 214px;
  object-fit: cover;
}

هذه الخاصية تجعل الصورة تملأ المساحة المحددة مع الحفاظ على مظهرها البصري بشكل أفضل.

تنسيق الحاوية `#container`

العنصر الذي يحمل المعرّف container مسؤول عن تحديد عرض البطاقة ووضعها في منتصف الصفحة:

#container {
  max-width: 300px;
  margin: 0 auto;
  margin-top: 20vh;
}

استخدام margin: 0 auto; يعد من الحيل الشهيرة لتوسيط العناصر أفقياً، خاصة عندما يكون لها عرض محدد أو max-width.

تنسيق البطاقة `.card`

الآن نضيف الشكل العام للبطاقة نفسها:

.card {
  background-color: white;
  border: 1px solid #bacdd8;
  padding: 8px;
  border-radius: 12px;
}

هذا التنسيق يضيف خلفية بيضاء وحدوداً ناعمة ومسافات داخلية تمنح المكوّن مظهراً أنيقاً وواضحاً.

استكمال تنسيق العناصر الداخلية

بعد الانتهاء من الشكل الخارجي، ننتقل إلى الوسوم والعنوان والوصف والزر:

.tag {
  padding: 4px 8px;
  border: 1px solid #e5eaed;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #788697;
}

.name {
  font-size: 24px;
  font-weight: 600;
  margin-top: 16px;
}

p {
  font-size: 14px;
  color: #7f8c9b;
  line-height: 150%;
}

button {
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  color: #0077ff;
  background-color: #e0efff;
  margin: 0 auto;
  display: block;
  cursor: pointer;
}

.card__details {
  padding: 16px 8px 8px 8px;
}

من خلال هذه التنسيقات ستلاحظ أن البطاقة أصبحت أكثر توازناً من حيث المسافات والألوان والوضوح البصري.

تحسين تجربة المستخدم عند التفاعل مع الزر

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

button:focus,
button:hover {
  background-color: #0077ff;
  color: #e0efff;
}

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

فهم نموذج الصندوق في `CSS Box Model`

من أهم المفاهيم التي يجب فهمها في CSS ما يُعرف باسم Box Model. كل عنصر في الصفحة يُعامل على أنه صندوق يتكوّن من عدة طبقات:

المحتوى Content
الحشو الداخلي Padding
الحدود Border
الهامش الخارجي Margin

رسم يوضح نموذج الصندوق في CSS ومكوناته الأساسية

الهامش الخارجي `Margin`

تُستخدم خاصية margin لإضافة فراغات خارجية حول العنصر، ما يساعد على إبعاده عن العناصر المجاورة. في مثالنا، استُخدمت هذه الخاصية لتوسيط البطاقة وإضافة مسافة علوية لها.

يمكنك تحديد كل جهة بشكل منفصل مثل margin-top وmargin-right وmargin-bottom وmargin-left، أو استخدام الصيغة المختصرة:

margin: topValue rightValue bottomValue leftValue;
margin: verticalValue horizontalValue;

مثال يشرح كيفية عمل خاصية margin في CSS

الحدود `Border`

تضيف خاصية border إطاراً حول العنصر. استخدمناها في البطاقة والوسوم لإبراز الحدود بشكل خفيف ومنظم.

يمكن التحكم في كل جزء من الحدود بشكل مستقل مثل border-top أو border-color، أو كتابة الصيغة المختصرة التالية:

border: widthValue styleValue colorValue;

توضيح مرئي لخاصية border في CSS

الحشو الداخلي `Padding`

تُستخدم خاصية padding لإضافة مسافة بين محتوى العنصر وحدوده. هذه الخاصية مهمة جداً لتحسين القراءة ومنح العناصر مساحة تنفس مناسبة.

في هذا المشروع، استخدمنا padding داخل البطاقة وداخل الزر. ويمكن كتابتها مفصلة أو مختصرة:

padding: topValue rightValue bottomValue leftValue;
padding: verticalValue horizontalValue;

شرح خاصية padding في CSS وتأثيرها على المسافات الداخلية

نسخة كاملة مقترحة من ملف `style.css`

إذا أردت جمع كل التنسيقات السابقة في ملف واحد، فيمكن أن يكون الشكل النهائي كما يلي:

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500;600&display=swap");

body {
  background-color: #eaeff1;
  font-family: "Raleway", sans-serif;
}

img {
  width: 100%;
  border-radius: 12px;
  height: 214px;
  object-fit: cover;
}

#container {
  max-width: 300px;
  margin: 0 auto;
  margin-top: 20vh;
}

.card {
  background-color: white;
  border: 1px solid #bacdd8;
  padding: 8px;
  border-radius: 12px;
}

.tag {
  padding: 4px 8px;
  border: 1px solid #e5eaed;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #788697;
}

.name {
  font-size: 24px;
  font-weight: 600;
  margin-top: 16px;
}

p {
  font-size: 14px;
  color: #7f8c9b;
  line-height: 150%;
}

button {
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  color: #0077ff;
  background-color: #e0efff;
  margin: 0 auto;
  display: block;
  cursor: pointer;
}

button:focus,
button:hover {
  background-color: #0077ff;
  color: #e0efff;
}

.card__details {
  padding: 16px 8px 8px 8px;
}

نصائح عملية لتحسين جودة تنسيقات `CSS`

استخدم ملف CSS خارجياً كلما أمكن، لأنه أسهل في الصيانة والتطوير.
اختر أسماء أصناف class واضحة ومعبرة مثل card وcard__details.
حافظ على تباين جيد بين النص والخلفية لتحسين القراءة.
لا تُكثر من التنسيقات المباشرة inline styles لأنها تجعل الشيفرة أقل تنظيماً.
اختبر شكل البطاقة على شاشات مختلفة للتأكد من تجاوبها.

الخلاصة التقنية

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

مقدمة: لماذا تحتاج إلى تعلّم CSS؟

ما الذي سنبنيه في هذا الدرس؟

بناء الهيكل الأساسي باستخدام HTML

تنسيق البطاقة باستخدام CSS

طرق تطبيق CSS على ملفات HTML

إضافة ملف تنسيق خارجي

فهم بنية قاعدة CSS Ruleset

تنسيق عناصر البطاقة خطوة بخطوة

تنسيق العنصر body

تنسيق الصورة img

تنسيق الحاوية #container

تنسيق البطاقة .card