ما هي CSS أساسًا؟

عندما تنشئ صفحة ويب، فإنك تحتاج إلى:

HTML (لغة ترميز) لتحديد المحتوى والعناصر، مثل العناوين والفقرات والصور.
CSS (أوراق الأنماط المتتالية) لتحديد مظهر هذه العناصر: الألوان، الخطوط، المسافات، التخطيط، وغيرها.

باستخدام CSS، يمكنك جعل صفحاتك تبدو أجمل وأسهل في التحكم والتعديل لاحقًا. إليك كيف تبدأ:

ما هي CSS أساسًا؟

CSS هي اختصار لـ Cascading Style Sheets، أي "أوراق الأنماط المتتالية".

وظيفتها هي تحديد كيف يُعرض المحتوى المكتوب بـ HTML على المتصفحات: اللون، الخط، الهوامش، الحدود، الخلفيات، التخطيط، وغير ذلك. (MDN Web Docs)

الميزة الكبيرة هي فصل المحتوى (HTML) عن التصميم والمظهر (CSS).

خطوات إنشاء ملف CSS وربطه بصفحة HTML

إليك خطوات بسيطة لتبدأ:

أنشئ ملف HTML — مثلاً index.html.
أنشئ ملف CSS — مثلاً styles.css.
اربط ملف CSS بصفحة HTML باستخدام إحدى الطرق الموضَّحة أدناه.
اكتب داخل ملف CSS القواعد التي تريدها (مثلاً: color, font-size, margin).

طرق ربط CSS بصفحة HTML

هناك ثلاث طرق رئيسية لربط CSS بصفحة HTML:

الطريقة	الوصف	مثال	المناسب لها
خارجي (External)	أن تضع القواعد في ملف CSS مستقل، وتربطه بوسم `<link>` في `<head>`	`<link rel="stylesheet" href="styles.css">`	عند وجود عدة صفحات وتريد استخدام نفس الأنماط عبر الموقع بأكمله
داخلي / مضمَّن في الرأس (Internal / Embedded)	أن تضع قواعد CSS داخل وسم `<style>` في رأس الصفحة	`<style> h1 { color: red; } </style>`	للصفحات البسيطة أو للتجارب السريعة
مباشر داخل العنصر (Inline)	تضع قواعد CSS مباشرة في سمة `style` داخل وسم HTML	`<h1 style="color: blue; font-size: 24px;">عنوان</h1>`	عند تعديل سريع لعنصر محدد فقط

لنلق نظرة على أمثلة:

مثال على الربط الخارجي

index.html

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>صفحة تجريبية</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>مرحبًا بالعالم</h1>
  <p>هذا نص تجريبي.</p>
</body>
</html>

styles.css

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333;
}
p {
  color: #666;
  font-size: 18px;
}

مثال على الربط الداخلي

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مثال الربط الداخلي</title>
  <style>
    body { background-color: #fafafa; }
    h1 { color: green; }
    p { color: darkslategray; font-size: 16px; }
  </style>
</head>
<body>
  <h1>عنوان رئيسي</h1>
  <p>فقرة نصية.</p>
</body>
</html>

مثال على الربط المباشر (Inline)

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مثال الربط المباشر</title>
</head>
<body>
  <h1 style="color: purple; font-size: 28px;">عنوان ملوَّن</h1>
  <p style="color: #555; font-size: 14px;">نص مع تنسيق مباشر.</p>
</body>
</html>

أي طريقة أستخدمها ولماذا؟

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

مفاهيم أساسية في CSS (لمعرفة أهم الأمور)

القواعد (Rules) والتحديدات (Selectors)

كل قاعدة CSS تتكوّن من مُحدّد (مثلاً h1, .class, #id) ثم مجموعة خصائص مع قيم.

مثال:

h1 {
  color: blue;
  font-size: 24px;
}

هنا h1 هو المحدد، وداخل {} لدينا الخصائص color و font-size.

الترتيب والتأثير المتتالي (Cascade & Specificity)

عندما يكون هناك أكثر من قاعدة CSS تؤثر على نفس العنصر، يتم تحديد أيها يُطبّق بناءً على:

الأهمية (Inline > Internal > External)
مدى التخصيص (مثل #id أقوى من .class)
الترتيب في الكود (القواعد التي تأتي لاحقًا قد تتجاوز القواعد السابقة)

هذه المفاهيم مهمة لفهم سلوك CSS الحقيقي عند التداخل. (MDN Web Docs)

نموذج الصندوق (Box Model)

كل عنصر HTML يُمثَّل كصندوق مُكوَّن من:

المحتوى (content)
الحشو (padding)
الحدود (border)
الهامش (margin)

إذا وضعت عرضًا أو ارتفاعًا لعنصر، فتلك القيم تخص المحتوى، ولا تشمل الحشو أو الحدود أو الهامش.

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

للمزيد شاهد الفيديو

ما هي CSS أساسًا؟

ما هي CSS أساسًا؟

ما هي CSS أساسًا؟

خطوات إنشاء ملف CSS وربطه بصفحة HTML

طرق ربط CSS بصفحة HTML

مثال على الربط الخارجي

مثال على الربط الداخلي

مثال على الربط المباشر (Inline)

أي طريقة أستخدمها ولماذا؟

مفاهيم أساسية في CSS (لمعرفة أهم الأمور)

القواعد (Rules) والتحديدات (Selectors)

الترتيب والتأثير المتتالي (Cascade & Specificity)

نموذج الصندوق (Box Model)

إرسال تعليق

Contact form

ما هي CSS أساسًا؟

ما هي CSS أساسًا؟

ما هي CSS أساسًا؟

خطوات إنشاء ملف CSS وربطه بصفحة HTML

طرق ربط CSS بصفحة HTML

مثال على الربط الخارجي

مثال على الربط الداخلي

مثال على الربط المباشر (Inline)

أي طريقة أستخدمها ولماذا؟

مفاهيم أساسية في CSS (لمعرفة أهم الأمور)

القواعد (Rules) والتحديدات (Selectors)

الترتيب والتأثير المتتالي (Cascade & Specificity)

نموذج الصندوق (Box Model)

You Might Like

إرسال تعليق

Contact form