دروس CSS -

🟢الوحدة 1: مقدمة إلى CSS

🎯 الهدف: فهم أساسيات CSS وأهميتها في تصميم المواقع.

• ما هي CSS؟ CSS (أوراق الأنماط المتتالية) هي لغة تُستخدم لتنسيق صفحات الويب، حيث تحدد الألوان، الخطوط، المسافات، والتنسيقات المختلفة لعناصر HTML.
• لماذا نستخدم CSS؟ لتحسين مظهر الصفحات، تنسيق المحتوى، وجعل المواقع متجاوبة مع الشاشات المختلفة.
• طرق كتابة CSS في HTML:
  • CSS داخلي – باستخدام <style> داخل ملف HTML.
  • CSS خارجي – باستخدام ملف مستقل .css.
  • CSS مضمّن – باستخدام style داخل العنصر.

🟢الوحدة 2: محددات CSS (Selectors)

🎯 الهدف: التعرف على كيفية استهداف العناصر المختلفة في CSS.

1. محدد الوسم (Element Selector)

نستخدم محدد الوسم عندما نريد تطبيق الأنماط على جميع العناصر من نفس النوع:

p { color: blue; }

يتم هنا تغيير لون النصوص لجميع العناصر من نوع <p> إلى الأزرق. يُفضل استخدام هذا النوع من التحديد عندما نحتاج إلى استهداف عنصر معين مثل العناوين أو الفقرات بشكل عام.

2. محدد الكلاس (Class Selector)

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

.box { background: gray; }

يمكن تطبيق هذا النمط على أي عنصر يحتوي على class="box". الكلاس مفيد عند الحاجة إلى إعادة استخدام نفس التنسيقات لعناصر متعددة.

3. محدد الهوية (ID Selector)

نستخدم الهوية (ID) عندما نحتاج إلى استهداف عنصر فريد في الصفحة:

#header { font-size: 20px; }

هذا النمط سيتم تطبيقه فقط على العنصر الذي يحتوي على id="header". يُفضل استخدام الهوية للعناصر التي لا تتكرر في الصفحة مثل الرأس أو التذييل.

4. المحددات المتقدمة

• المحدد العام: يتم استدعاؤه باستخدام الرمز (*). يؤثر على جميع العناصر في الصفحة: * { margin: 0; padding: 0; }
• محدد النسب (Descendant Selector): يستهدف عنصرًا داخل عنصر آخر: div p { color: red; }

  يتم هنا تغيير لون النصوص للعناصر <p> التي تقع داخل <div> فقط.

• المحددات المشتركة (Group Selector): نستخدم الفاصلة (,) لاستهداف عناصر متعددة: h1, h2, p { margin: 10px; }
• محدد السمات (Attribute Selector): يستهدف العناصر بناءً على السمات الخاصة بها: [type="text"] { width: 100%; }

🟢الوحدة 3: الألوان والخطوط والخلفيات

🎯 الهدف: تعلم كيفية التحكم بالمظهر العام للنصوص والخلفيات.

1. الألوان في CSS

يمكننا تحديد الألوان بثلاث طرق:

• باستخدام الأسماء: color: red;
• باستخدام الأكواد العشرية (Hex): color: #ff0000;
• باستخدام rgba: color: rgba(255, 0, 0, 0.5);

2. الخطوط (Fonts)

• font-family: لتحديد نوع الخط، مثل: font-family: Arial, sans-serif;
• font-size: لتحديد حجم الخط، مثل: font-size: 16px;
• font-weight: لتحديد سمك الخط، مثل: font-weight: bold;

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

• background-color: لتحديد لون الخلفية، مثل: background-color: #f0f0f0;
• background-image: لإضافة صورة كخلفية، مثل: background-image: url('image.jpg');
• background-size: للتحكم في حجم الخلفية، مثل: background-size: cover;

🟢الوحدة 4: الهوامش والتباعد (Box Model)

🎯 الهدف: فهم كيفية التحكم في المسافات داخل العناصر.

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

يتكون نموذج الصندوق من:

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

.box { margin: 10px; padding: 15px; border: 1px solid black; width: 200px; height: 100px; }

في المثال أعلاه، يتم تحديد الهوامش الخارجية والداخلية بالإضافة إلى الحدود.

2. التحكم في الهوامش والتباعد

• margin: auto; تُستخدم لمركزة العنصر أفقيًا.
• padding: يمكن تحديد قيم متعددة للهوامش الداخلية: padding: 10px 20px;.

🟢الوحدة 5: تنسيق التخطيط (Layout)

🎯 الهدف: تعلم كيفية تنظيم العناصر داخل الصفحة.

1. استخدام display

• block: يجعل العنصر يأخذ مساحة كاملة. div { display: block; }
• inline: يجعل العنصر في نفس السطر مع العناصر الأخرى. span { display: inline; }
• flex: يُستخدم لتخطيط مرن: .container { display: flex; justify-content: center; align-items: center; }

2. محاذاة العناصر

• text-align: لتوسيط النصوص: text-align: center;.
• justify-content: لتوزيع العناصر: justify-content: space-between;.

🟢الوحدة 6: التأثيرات والتفاعل (Animations & Effects)

🎯 الهدف: إضافة حركات وتأثيرات على العناصر.

1. التأثيرات الانتقالية (Transitions)

تُستخدم لتطبيق تغييرات تدريجية:

button { transition: all 0.5s ease-in-out; } button:hover { background-color: blue; }

2. الحركات (Animations)

إنشاء حركة باستخدام @keyframes:

@keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } .box { animation: move 2s infinite; }

🟢الوحدة 7: التصميم المتجاوب (Responsive Design)

🎯 الهدف: جعل الموقع يعمل على جميع الأجهزة.

1. Media Queries

تُستخدم لتطبيق أنماط مخصصة حسب حجم الشاشة:

@media (max-width: 768px) { body { background-color: lightgray; } }

2. الوحدات النسبية

• px: وحدة ثابتة.
• em: نسبة إلى حجم الخط الأب.
• rem: نسبة إلى حجم الخط الأساسي في الصفحة.

🟢الوحدة 8: مشاريع وتطبيقات عملية

🎯 الهدف: تطبيق ما تعلمه الطلاب في مشاريع عملية.

• مشروع تصميم صفحة تعريفية: إنشاء صفحة تحتوي على صورة، عنوان، ووصف.
• إنشاء قائمة تنقل متجاوبة: باستخدام flexbox وmedia queries.

🟢الوحدة 9: تحسين الأداء والتحسينات المتقدمة

🎯 الهدف: تعلم أساليب احترافية لتطوير CSS.

1. تحسين الأداء

• تقليل القواعد الزائدة.
• استخدام أدوات مثل CSS Minification.

2. استخدام المتغيرات

:root { --main-color: blue; } h1 { color: var(--main-color); }

3. مقدمة إلى SASS

يُمكن لـ SASS تبسيط كتابة CSS من خلال المتغيرات، التداخل، والمزيد.

جدول أهم عناصر CSS في Flexbox

الخاصية	الوصف	القيم الممكنة	التأثير
display	تحديد نوع التخطيط للعناصر	flex / inline-flex	يحول العنصر إلى حاوية Flexbox
flex-direction	تحديد اتجاه توزيع العناصر داخل الحاوية	row / row-reverse / column / column-reverse	يحدد ما إذا كانت العناصر ستظهر أفقياً أو رأسياً
flex-wrap	السماح للعناصر بالانتقال إلى سطر جديد عند الحاجة	nowrap / wrap / wrap-reverse	تحكم في التفاف العناصر داخل الحاوية
justify-content	محاذاة العناصر داخل الحاوية أفقياً	flex-start / flex-end / center / space-between / space-around / space-evenly	يحدد موضع العناصر أفقيًا داخل الحاوية
align-items	محاذاة العناصر داخل الحاوية عموديًا	flex-start / flex-end / center / baseline / stretch	يحدد موضع العناصر عموديًا داخل الحاوية
align-self	محاذاة عنصر معين داخل الحاوية	auto / flex-start / flex-end / center / baseline / stretch	تحكم في محاذاة عنصر محدد
gap	تحديد المسافة بين العناصر	px / em / %	يتحكم في المسافة بين العناصر
flex-grow	نسبة توسع العنصر داخل الحاوية	0 (افتراضي) / 1 فأكثر	تحكم في نمو العنصر داخل الحاوية
flex-shrink	نسبة انكماش العنصر عند تصغير الشاشة	0 (لا ينكمش) / 1 فأكثر	يحدد ما إذا كان العنصر سينكمش عند الحاجة
flex-basis	تحديد الحجم الأساسي للعنصر قبل التمدد أو الانكماش	auto / px / %	يحدد حجم العنصر الافتراضي
order	ترتيب ظهور العنصر	عدد صحيح (موجب أو سالب)	يحدد ترتيب ظهور العنصر داخل الحاوية

جداول إضافية لمفاهيم CSS

1. جدول وحدات القياس (Units)

الوحدة	الوصف	مثال	الاستخدام الشائع
px	وحدة ثابتة مرتبطة بكثافة شاشة العرض	font-size: 16px;	تُستخدم كثيرًا لضبط النص والعناصر
em	نسبة إلى حجم الخط للأب المباشر	font-size: 1.2em;	تصميم متجاوب جزئيًا
rem	نسبة إلى حجم الخط الجذري (Root HTML)	font-size: 1.2rem;	تصميم متجاوب وموحّد في جميع أجزاء الصفحة
%	نسبة إلى العنصر الأب أو الإطار العام	width: 50%;	تصميم متجاوب (عرض عنصر 50% من حاويته)
vh/vw	نسبة إلى ارتفاع/عرض نافذة العرض (Viewport)	height: 50vh;	تصميم متجاوب ملء نصف ارتفاع النافذة

2. جدول الخلفيات (Background Properties)

الخاصية	الوصف	القيم الممكنة	التأثير
background-color	تحديد لون الخلفية	اسم لون أو Hex أو RGB/RGBA	يضفي لون خلفية على العنصر
background-image	إضافة صورة خلفية للعنصر	url('path/to/image.jpg')	يعرض الصورة خلف العنصر
background-repeat	طريقة تكرار الصورة (أفقيًا أو عموديًا)	repeat, repeat-x, repeat-y, no-repeat	تحكم في تكرار الصورة من عدمه
background-size	التحكم في حجم الصورة عند عرضها كخلفية	cover, contain, auto, px, %	cover تملأ العنصر بالكامل، contain تُظهر الصورة كاملة ضمن العنصر
background-position	تحديد مكان عرض الصورة داخل العنصر	left, right, center, px, %	محاذاة الصورة في مكان محدد داخل العنصر
background-attachment	التحكم في ثبات الخلفية عند التمرير	scroll, fixed, local	fixed تبقى الخلفية ثابتة في الشاشة عند التمرير

3. جدول الخصائص المتعلقة بالحدود (Borders)

الخاصية	الوصف	القيم الممكنة	التأثير
border	يحدد كل من سمك الخط ونوعه ولونه	مثال: border: 1px solid #000;	رسم حدود كاملة حول العنصر
border-style	تحديد نوع الحد	none, solid, dotted, dashed, double...	نوع حدود العنصر (متصل، منقط، مزدوج إلخ)
border-width	تحديد سمك الحد	thin, medium, thick, px, em	سمك الحد
border-color	تحديد لون الحد	اسم لون أو Hex أو RGB/RGBA	لون الحد
border-radius	تحديد مدى استدارة زوايا العنصر	px, %	مثال: border-radius: 50% يجعلها دائرية

4. جدول المواضع (Position)

القيمة	المعنى	الاستخدام
static	الوضع الافتراضي للعناصر	لا يمكن تحريك العنصر بخصائص top و left وغيرها
relative	يحرك العنصر نسبة إلى موضعه الأصلي	يسمح بتحريك العنصر دون التأثير على العناصر المجاورة
absolute	يتم وضع العنصر نسبةً لأقرب عنصر أب محدد الموضع	يسمح بتداخل العناصر وتحديد موقعه داخل حاوية أو الجسم
fixed	يبقى العنصر ثابتًا عند التمرير	مفيد لإنشاء عناصر ثابتة مثل شريط علوي أو جانبي
sticky	يجمع بين relative و fixed	يبقى العنصر عاديًا حتى يصل إلى حافة الشاشة فيصبح ثابتًا

5. جدول الهوامش والتباعد (Margins & Padding)

الخاصية	الوصف	القيم	التأثير
margin	المسافة الخارجية حول العنصر	auto, px, %, em, rem	يضيف مسافة خارجية بين العنصر والعناصر الأخرى
padding	المسافة الداخلية بين محتوى العنصر وحدوده	px, %, em, rem	يضيف مسافة داخلية حول المحتوى
margin-top / margin-bottom / margin-left / margin-right	ضبط الهوامش لكل جانب على حدة	نفس القيم بالأعلى	تحكم دقيق في الهوامش لكل جانب
padding-top / padding-bottom / padding-left / padding-right	ضبط الحشوة لكل جانب على حدة	نفس القيم بالأعلى	تحكم دقيق في المسافات الداخلية لكل جانب

جداول إضافية متنوعة

6. جدول الخصائص الشائعة للنصوص (Typography)

الخاصية	الوصف	القيم الممكنة	مثال
text-align	محاذاة النص داخل العنصر	left, right, center, justify	text-align: center;
text-decoration	إضافة تأثير مثل الخط السفلي للنص	none, underline, overline, line-through	text-decoration: underline;
text-transform	تغيير حالة الأحرف (كبيرة/صغيرة)	uppercase, lowercase, capitalize, none	text-transform: uppercase;
letter-spacing	المسافة بين الأحرف	px, em, rem	letter-spacing: 2px;
word-spacing	المسافة بين الكلمات	px, em, rem	word-spacing: 0.5em;
line-height	المسافة الرأسية بين سطور النص	رقم نسبي (1.5) أو px, em, rem	line-height: 1.5;
text-indent	تحريك السطر الأول للنص داخليًا	px, em, rem, %	text-indent: 20px;
white-space	التحكم في كيفية عرض المساحات والأسطر	normal, nowrap, pre, pre-wrap, pre-line	white-space: nowrap;

7. جدول الحالات الزائفة (Pseudo-classes)

اسم الـ Pseudo-class	الوصف	مثال الاستخدام
:hover	عند تمرير مؤشر الفأرة فوق العنصر	button:hover { background: #ccc; }
:focus	عند تركيز المؤشر على العنصر (حقول الإدخال مثلاً)	input:focus { outline: 2px solid blue; }
:active	عند الضغط على العنصر (مثل الأزرار)	a:active { color: red; }
:visited	للروابط التي تمت زيارتها مسبقًا	a:visited { color: purple; }
:checked	للعناصر القابلة للاختيار مثل checkbox و radio	input[type="checkbox"]:checked { }
:disabled	للعناصر المعطلة	button:disabled { opacity: 0.5; }
:nth-child(n)	لاستهداف العنصر حسب ترتيبه بين إخوته	li:nth-child(2) { color: red; }

8. جدول العناصر الزائفة (Pseudo-elements)

العنصر الزائف	الوصف	مثال الاستخدام
::before	إضافة محتوى/شكل قبل المحتوى الأصلي للعنصر	.element::before {   content: "";   display: block;   width: 10px;   height: 10px;   background: red; }
::after	إضافة محتوى/شكل بعد المحتوى الأصلي للعنصر	.element::after {   content: "تم";   color: green; }
::first-line	تنسيق السطر الأول من الفقرة	p::first-line {   font-weight: bold;   font-size: 1.2em; }
::first-letter	تنسيق الحرف الأول من الفقرة	p::first-letter {   float: right;   font-size: 2em;   color: red; }
::selection	تنسيق النص المُظلَّل عند التحديد	::selection {   background: yellow;   color: black; }

9. جدول أكواد الألوان الشائعة (Color Codes)

الاسم	عينة اللون	كود Hex	RGB
أحمر		#FF0000	rgb(255, 0, 0)
أخضر		#008000	rgb(0, 128, 0)
أزرق		#0000FF	rgb(0, 0, 255)
أصفر		#FFFF00	rgb(255, 255, 0)
برتقالي		#FFA500	rgb(255, 165, 0)
رمادي		#808080	rgb(128, 128, 128)
أسود		#000000	rgb(0, 0, 0)
أبيض		#FFFFFF	rgb(255, 255, 255)

10. جدول أهم خصائص الانتقالات (Transitions) والحركات (Animations)

أ) خصائص الانتقال (Transition)

الخاصية	الوصف	القيم الممكنة	مثال
transition-property	تحديد الخاصية المراد تطبيق الانتقال عليها	اسم الخاصية أو all	transition-property: background-color;
transition-duration	مدة الانتقال	وحدات زمنية (s, ms)	transition-duration: 0.5s;
transition-timing-function	طريقة الحركة (Easing)	ease, linear, ease-in, ease-out, ease-in-out	transition-timing-function: ease-in-out;
transition-delay	التأخير قبل بدء الحركة	وحدات زمنية (s, ms)	transition-delay: 0.2s;

ب) خصائص الحركة (Animation)

الخاصية	الوصف	مثال الاستخدام
animation-name	اسم الحركة المرتبط بتعليمة @keyframes	animation-name: move;
animation-duration	مدة الحركة	animation-duration: 2s;
animation-timing-function	طريقة تدرج الحركة (Easing)	animation-timing-function: ease-in-out;
animation-delay	التأخير قبل بدء الحركة	animation-delay: 1s;
animation-iteration-count	عدد مرات تكرار الحركة	animation-iteration-count: infinite;
animation-direction	اتجاه الحركة (للأمام، للخلف، بالتناوب)	normal, reverse, alternate, alternate-reverse
animation-fill-mode	تطبيق الأنماط قبل أو بعد التشغيل الفعلي للحركة	none, forwards, backwards, both