JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

-->
Startseite

دليل CSS الشامل 2025: تعلم تنسيق وتجميل مواقع الويب من الصفر

khalilAI
خط المقالة

🎨 مقدمة: مرحباً بك في عالم تصميم الويب مع CSS

إذا كانت HTML هي الهيكل العظمي لصفحة الويب، فإن CSS (Cascading Style Sheets) هي الملابس، الديكور، والألوان التي تمنحها الحياة والجمال. بدون CSS، ستبدو جميع مواقع الإنترنت كصفحات نصية مملة من حقبة التسعينيات.

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


🤔 ما هي لغة CSS وكيف تعمل؟

CSS هي اختصار لـ Cascading Style Sheets (صفحات الأنماط الانسيابية). هي لغة تصميم تُستخدم لوصف كيفية عرض عناصر HTML. كلمة "Cascading" (انسيابية أو متتالية) مهمة جدًا، فهي تعني أن الأنماط تت cascaded (تتدفق) من الأعلى إلى الأسفل، مما يسمح بتطبيق قواعد متعددة على نفس العنصر وتحديد الأولويات بينها.

🔗 3 طرق لإضافة CSS إلى صفحتك

  1. External CSS (ملف خارجي): الطريقة الأفضل والأكثر احترافية. يتم كتابة كل أكواد CSS في ملف منفصل بامتداد .css ثم ربطه بصفحة HTML. 
    <head>
  <link rel="stylesheet" href="styles.css">
</head>
  2. Internal CSS (داخلي): يتم كتابة كود CSS داخل الوسم <style> في قسم <head> من ملف HTML. مفيد لصفحة واحدة.
  3. Inline CSS (مباشر): يتم كتابة الأنماط مباشرة داخل وسم HTML باستخدام الخاصية style. يجب تجنبها إلا في حالات نادرة لأنها تجعل الصيانة صعبة. (هذه الطريقة التي نستخدمها في هذا المقال لتسهيل النشر على Blogger).

نصيحة احترافية: استخدم دائمًا طريقة الملف الخارجي (External CSS) في مشاريعك الحقيقية. فهي تنظم الكود وتسهل التعديل على تصميم الموقع بالكامل من مكان واحد.

📝 فهم بنية كود CSS (محددات، خصائص، قيم)

يتكون كود CSS من "قواعد" (Rules). كل قاعدة تتكون من ثلاثة أجزاء رئيسية:

Selector { property: value; }
  • Selector (المُحدِّد): يحدد عنصر (أو عناصر) HTML التي تريد تطبيق النمط عليها (مثلاً: h1, .main-title).
  • Property (الخاصية): هي السمة التي تريد تغييرها (مثلاً: color, font-size).
  • Value (القيمة): هي القيمة التي ستعطيها للخاصية (مثلاً: blue, 16px).
p {
  color: blue;
  font-size: 16px;
}

هذا الكود يعني: "اختر كل عناصر الفقرات <p> في الصفحة، واجعل لون خطها أزرق وحجمه 16 بكسل".

🎯 أهم المحددات (Selectors) التي يجب أن تعرفها

النوع المحدد (Selector) الوصف
محدد العنصر h2 يحدد كل عناصر <h2>.
محدد الكلاس (Class) .button يحدد كل العناصر التي لديها class="button". (يمكن استخدامه عدة مرات)
محدد المعرّف (ID) #main-logo يحدد العنصر الوحيد الذي لديه id="main-logo". (يجب أن يكون فريدًا في الصفحة)
محدد الحالة (Pseudo-class) a:hover يحدد الرابط <a> فقط عندما يمر مؤشر الفأرة فوقه.

📦 النموذج الصندوقي (The Box Model): أساس التخطيط

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

Margin (الهامش الخارجي)
Border (الإطار)
Padding (الحشوة الداخلية)
Content (المحتوى)
  • Content: المحتوى الفعلي (نص، صورة، ...).
  • Padding: مساحة شفافة حول المحتوى (داخل الإطار).
  • Border: الإطار الذي يحيط بالمحتوى والحشوة.
  • Margin: مساحة شفافة حول الإطار (خارج الصندوق)، تفصل العنصر عن العناصر الأخرى.

✨ خصائص CSS أساسية (الألوان، الخطوط، الخلفيات)

هذه بعض الخصائص الأكثر استخدامًا لتبدأ بها:

.my-element {
  /* للتحكم في الألوان */
  color: #333333;  /* لون النص */
  background-color: #f5f5f5;  /* لون الخلفية */

  /* للتحكم في الخطوط */
  font-family: Arial, sans-serif; /* نوع الخط */
  font-size: 18px; /* حجم الخط */
  font-weight: bold; /* وزن الخط (عريض) */
  text-align: center; /* محاذاة النص */

  /* للتحكم في الأبعاد والمسافات */
  width: 300px;
  padding: 20px; /* حشوة داخلية من كل الجهات */
  margin: 15px; /* هامش خارجي من كل الجهات */
  border: 1px solid #ccc; /* إطار بسمك 1بكسل، متصل، ولون رمادي */
}

📏 إنشاء تخطيطات عصرية باستخدام Flexbox

Flexbox هو نظام تخطيط حديث يجعل من السهل ترتيب العناصر ومحاذاتها وتوزيع المسافات بينها داخل حاوية (container)، حتى لو كانت أحجامها غير معروفة. لتفعيل Flexbox، نطبق display: flex; على الحاوية الأب.

مثال: لإنشاء 3 صناديق متجاورة بمسافات متساوية:

.container { display: flex; justify-content: space-around; }
صندوق 1
صندوق 2
صندوق 3

📱 مقدمة في التصميم المتجاوب (Responsive Design)

يعني التصميم المتجاوب أن موقعك سيبدو رائعًا على جميع الأجهزة (الحواسيب، الهواتف، الأجهزة اللوحية). يتم تحقيق ذلك بشكل أساسي باستخدام Media Queries.

Media Query تسمح لك بتطبيق كتل من كود CSS فقط عندما تتحقق شروط معينة (مثل عرض الشاشة).

/* هذا النمط يطبق على كل الشاشات */
.container {
  width: 90%;
}

/* هذا النمط يطبق فقط على الشاشات التي عرضها 600 بكسل أو أقل (مثل الهواتف) */
@media (max-width: 600px) {
  .container {
    width: 100%; /* اجعل العرض كاملاً على الشاشات الصغيرة */
  }
}

🚀 مشروع تطبيقي: تنسيق صفحتنا الشخصية

الآن، لنطبق ما تعلمناه على صفحة HTML الشخصية التي أنشأناها في الدرس السابق. يمكنك إضافة هذا الكود داخل وسم <style> في قسم <head> لتجربته.

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
}
header {
  background-color: #333;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}
main {
  padding: 20px;
  max-width: 800px;
  margin: 20px auto;
  background: #fff;
  border-radius: 8px;
}
footer {
  text-align: center;
  padding: 20px;
  background: #333;
  color: #fff;
}
a {
  color: #0d6efd;
}

❓ أسئلة شائعة (FAQ)

ما الفرق بين Class و ID؟

يمكن استخدام نفس الـ Class على عدة عناصر في الصفحة. أما الـ ID فيجب أن يكون فريدًا ولا يتكرر أبدًا؛ يستخدم لعنصر واحد ومحدد فقط.

كيف يمكنني توسيط عنصر (مثل div) في الصفحة؟

الطريقة الحديثة والأسهل هي باستخدام Flexbox. طبق display: flex; و justify-content: center; على العنصر الأب. للطريقة التقليدية، يمكنك جعل عرض العنصر محددًا (e.g., width: 80%;) ثم تطبيق margin: 0 auto;.

ما هي وحدات القياس الأفضل، px أم rem أم %؟

px (بكسل) هي وحدة ثابتة. % (النسبة المئوية) و rem هي وحدات نسبية ومرنة، وهي أفضل للتصميم المتجاوب. rem تعتمد على حجم الخط الأساسي للمتصفح، مما يجعلها ممتازة لإمكانية الوصول (Accessibility).

✅ الخطوة التالية: التفاعلية مع JavaScript

لقد أتقنت الآن بناء الهيكل بـ HTML وتجميله بـ CSS. أنت الآن جاهز لإضافة العقل المدبر لموقعك، وهو ما يجعله تفاعليًا وحيويًا.

📩 هل أنت مستعد لإضافة الحركة والتفاعلية إلى صفحاتك؟ الخطوة التالية هي لغة البرمجة الأكثر شهرة في عالم الويب: JavaScript.

NameE-MailNachricht