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

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

Aldawsari

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

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

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

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

هذا النوع من المكوّنات يُستخدم بكثرة في صفحات المنتجات، والمدونات، وبطاقات التعريف، ومعارض الصور. لذا فإن تعلّم بنائه يمنحك فهماً عملياً لأساسيات التصميم باستخدام 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>
  <!-- A div with container id to hold the card -->
  <div id="container">
    <!-- A div with card class for the card -->
    <div class="card">
      <img src="https://images.unsplash.com/photo-1536323760109-ca8c07450053" alt="Lago di Braies">

      <!-- A div with card__details class to hold the details in the card -->
      <div class="card__details">
        <!-- Span with tag class for the tag -->
        <span class="tag">Nature</span>
        <span class="tag">Lake</span>

        <!-- A div with name class for the name of the card -->
        <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>

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

كيف تضيف `CSS` إلى صفحة `HTML`؟

هناك 3 طرق شائعة لإضافة تنسيقات CSS إلى صفحة HTML، ومن المهم فهمها قبل متابعة التطبيق العملي.

1. ملف تنسيق خارجي `External Stylesheet`

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

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

من أبرز مزايا هذه الطريقة:

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

2. تنسيقات داخلية `Internal Stylesheet`

يمكنك كتابة CSS داخل وسم <style> الموجود داخل <head>.

<head>
  <style>
    /* your style */
  </style>
</head>

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

3. تنسيقات مباشرة `Inline Styles`

يمكنك إضافة التنسيق مباشرة إلى العنصر عبر الخاصية style.

<p style="color:red;">paragraph</p>

رغم أن هذه الطريقة قد تكون ضرورية في بعض الأنظمة المقيدة، فإنها غير مفضلة في المشاريع الحقيقية لأنها تصعّب قراءة الشيفرة وصيانتها.

ربط ملف `CSS` الخارجي بالمشروع

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

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

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

قاعدة CSS تتكوّن عادة من محدد Selector، ثم خاصية Property، ثم قيمة Value. على سبيل المثال، إذا أردت جعل عرض الصورة 50%، فاكتب:

img {
  width: 50%;
}

هذا يعني أن المحدد هو img، والخاصية هي width، والقيمة هي 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");

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

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

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

img {
  width: 100%;
}

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

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

قد تلاحظ بعد ذلك أن الصورة أصبحت متمددة أو مشوهة. لحل هذه المشكلة نستخدم الخاصية object-fit بالقيمة cover.

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

بهذا تظل الصورة متناسقة وتملأ المساحة المخصصة لها دون تشويه.

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

الحاوية مسؤولة عن تحديد العرض الكلي للبطاقة ووضعها في منتصف الصفحة.

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

يؤدي max-width: 300px; إلى ضبط أقصى عرض للبطاقة، بينما تسمح margin: 0 auto; بتوسيطها أفقياً. أما margin-top: 20vh; فتضيف فراغاً علوياً يساوي 20% من ارتفاع الشاشة.

تنسيق البطاقة نفسها

الآن ننتقل إلى العنصر الذي يحمل الصنف 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;
}

هذه الخطوة تعزز قابلية الاستخدام Usability وتجعل الواجهة أكثر وضوحاً وتفاعلاً.

النتيجة النهائية: شيفرة `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;
}

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

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

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

كل عنصر في CSS يُعامل على أنه صندوق. هذا الصندوق يتكوّن من المحتوى، ثم padding، ثم border، ثم margin. فهم هذا النموذج مهم جداً لأنه يفسّر طريقة توزيع المسافات والأحجام داخل الصفحة.

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

ما هي `margin`؟

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

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

شرح مرئي لاستخدام خاصية margin في CSS وتوزيع القيم الأربع

ما هي `border`؟

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

border: widthValue styleValue colorValue;

مخطط يوضح مكونات خاصية border في CSS من السمك والنمط واللون

ما هي `padding`؟

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

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

شرح خاصية padding في CSS وكيف تضيف مسافات داخلية حول المحتوى

أفضل ممارسات عند تعلّم وبناء مكوّنات `CSS`

افصل دائماً بين البنية HTML والتنسيق CSS كلما أمكن.
استخدم أسماء أصناف واضحة مثل card وcard__details لتسهيل الصيانة.
اختبر التصميم على شاشات مختلفة للتأكد من تجاوبه.
لا تعتمد على التنسيق المباشر inline style إلا عند الضرورة القصوى.
احرص على أن تكون الأزرار والعناصر التفاعلية واضحة عند hover وfocus.

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

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

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

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

كيف تضيف CSS إلى صفحة HTML؟

1. ملف تنسيق خارجي External Stylesheet

2. تنسيقات داخلية Internal Stylesheet

3. تنسيقات مباشرة Inline Styles

ربط ملف CSS الخارجي بالمشروع

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