الدرس الثالث من سلسلة تعلم لغة HTML و CSS

تنسيق الصفحات باستخدام CSS . سنتعلم كيفية استخدام CSS لإضفاء مظهر احترافي على صفحاتك.

تصميم المواقع

February 6, 2025

مرحبًا بك في الدرس الثالث من سلسلة تعلم لغة HTML وCSS! 🎉

في هذا الدرس، سنركز بشكل أكبر على تنسيق الصفحات باستخدام CSS . سنتعلم كيفية استخدام CSS لإضفاء مظهر احترافي على صفحاتك، بما في ذلك الألوان، الخطوط، الهوامش، الحاويات، والخلفيات. بالإضافة إلى ذلك، سنغطي بعض المفاهيم المتقدمة مثل التصميم المتجاوب (Responsive Design) باستخدام الوسائط الإعلامية (Media Queries).

1. مراجعة سريعة

في الدرس السابق، تعلمنا:

كيفية إنشاء الجداول والنماذج.
استخدام الوسوم الدلالية مثل <header> و<footer>.
إضافة تنسيقات بسيطة باستخدام CSS.

الآن، سننتقل إلى مستوى أعلى من التنسيق باستخدام CSS!

2. أساسيات CSS المتقدمة

أ. الألوان (Colors)

يمكن تحديد الألوان باستخدام:

أسماء الألوان (مثل red, blue).
القيم السداسية (Hexadecimal) مثل #FF5733.
القيم RGB مثل rgb(255, 87, 51).
القيم RGBA حيث "A" تعني الشفافية مثل rgba(255, 87, 51, 0.5).

مثال:

h1 {
color: #FF5733; /* لون العنوان */
}
p {
color: rgba(0, 0, 0, 0.7); /* نص شبه شفاف */
}

ب. الخطوط (Fonts)

يمكن تغيير نوع الخطوط باستخدام خاصية font-family. يمكنك أيضًا ضبط حجم الخط باستخدام font-size.

مثال:

body {
font-family: Arial, sans-serif; /* خط أساسي مع خط احتياطي */
font-size: 16px; /* حجم الخط */
}
h1 {
font-family: 'Times New Roman', serif;
font-size: 24px;
}

💡 نصيحة: يمكنك استخدام خطوط مخصصة من Google Fonts عن طريق إضافة رابط في <head>:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

ثم استخدامها في CSS:

body {
font-family: 'Roboto', sans-serif;
}

ج. الهوامش والمسافات الداخلية (Margins & Padding)

margin: يحدد المسافة الخارجية حول العنصر.
padding: يحدد المسافة الداخلية داخل العنصر.

مثال:

div {
margin: 20px; /* هامش خارجي */
padding: 15px; /* هامش داخلي */
border: 1px solid black; /* حدود للعنصر */
}

د. الخلفيات (Backgrounds)

يمكنك تخصيص خلفية العناصر باستخدام:

لون خلفية (background-color).
صورة خلفية (background-image).
تكرار الصورة (background-repeat).

مثال:

body {
background-color: #f4f4f4; /* لون خلفية الصفحة */
}
header {
background-image: url('background.jpg'); /* صورة خلفية */
background-repeat: no-repeat; /* عدم تكرار الصورة */
background-size: cover; /* تغطية كامل العنصر */
}

3. تصميم الحاويات (Box Model)

كل عنصر في HTML يُعامل كـ "صندوق" يتكون من:

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

مثال:

div {
width: 200px;
height: 100px;
padding: 10px; /* هوامش داخلية */
border: 2px solid black; /* حدود */
margin: 20px; /* هوامش خارجية */
}

4. التصميم المتجاوب (Responsive Design)

أ. وحدات مرنة (Flexible Units)

بدلاً من استخدام وحدات ثابتة مثل px، يمكنك استخدام وحدات مرنة مثل:

%: نسبة مئوية بالنسبة للحاوية الأم.
em: نسبة مئوية بالنسبة لحجم الخط.
rem: نسبة مئوية بالنسبة لحجم الخط الأساسي للصفحة.

مثال:

div {
width: 50%; /* نصف عرض الحاوية الأم */
font-size: 1.2rem; /* 1.2 مرة حجم الخط الأساسي */
}

ب. الوسائط الإعلامية (Media Queries)

تُستخدم لتطبيق أنماط مختلفة بناءً على حجم الشاشة.

مثال:

/* تصميم افتراضي */
body {
background-color: white;
color: black;
}


/* تصميم للشاشات الصغيرة (عرض أقل من 600px) */
@media (max-width: 600px) {
body {
background-color: lightblue;
font-size: 14px;
}
}

5. تمرين عملي

حاول إنشاء صفحة HTML تحتوي على العناصر التالية:

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

6. ما التالي؟

في الدرس القادم، سنتعمق أكثر في تقنيات CSS المتقدمة مثل:

الرسوم المتحركة (Animations).
الظلال (Shadows).
التخطيطات الحديثة (Flexbox وGrid).

📌 نصيحة: لا تتردد في تجربة الأكواد بنفسك وتعديلها لترى النتائج. الممارسة هي مفتاح الإتقان! 🚀

تعلم برمجة المواقع الاكترونية A-0

من الصفر إلى الاحتراف: رحلة تطوير الويب الكاملة

عرض المقال
الاختلافات بين Android وiOS

برمجة التطبيقات المتنقلة: الاختلافات بين Android وiOS وأفضل الممارسات

عرض المقال
تطوير الألعاب باستخدام Unity

تطوير الألعاب باستخدام Unity: من الفكرة إلى المنتج النهائي

عرض المقال
إتقان البرمجة باستخدام Python

إتقان البرمجة باستخدام Python: المشاريع العملية والنصائح

عرض المقال
ما هي فوائد المواقع الاكترونية

فوائد المواقع الإلكترونية للشركات

عرض المقال
تعلم برمجة المواقع الاكترونية A-1

الدرس الأول: تعلم لغة HTML من الصفر - مقدمة شاملة مع إعداد الأدوات

عرض المقال
تعلم برمجة المواقع الاكترونية A-2

الدرس الثاني: تعلم لغة HTML من الصفر - الوسوم المتقدمة والجداول

عرض المقال
الذكاء الاصطناعي Qwen AI

Qwen AI هو نموذج ذكاء اصطناعي متعدد الوظائف يدعم اللغات ويتولى المهام الإبداعية والتفاعلية

عرض المقال