This media is not supported in your browser
VIEW IN TELEGRAM
3 Ways to center a div in css
هناك ثلاث طرق لربط ملفات CSS مع HTML:
1. الربط الخارجي (External)
يتم إنشاء ملف CSS منفصل ثم يتم ربطه داخل ملف HTML باستخدام وسم <link> لملفات CSS JavaScript.
مثال على ربط CSS خارجيًا:
<head>
<link rel="stylesheet" href="styles.css">
</head>
2. الربط الداخلي (Internal)
يتم كتابة CSS داخل وسم <style> في ملف HTML، أو كتابة JavaScript داخل وسم <script> في نفس الملف.
مثال على CSS داخلي:
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>
3. الربط المباشر (Inline)
يتم إضافة CSS مباشرة داخل وسم العنصر باستخدام خاصية style=""، أو يتم إضافة JavaScript مباشرة في خاصية onclick="" أو onload="" وغيرها.
مثال على CSS مضمّن (Inline CSS):
<p style="color: red; font-size: 20px;">مرحبا بالعالم</p>
ما هي الطريقة الأفضل؟
الربط الخارجي هو الأفضل من حيث التنظيم، وإعادة الاستخدام، وسهولة الصيانة.
الربط الداخلي مفيد في بعض الحالات مثل تخصيص أنماط أو سكريبتات لصفحة معينة دون الحاجة إلى ملف خارجي.
الربط المباشر يُفضل تجنبه إلا في الحالات الضرورية لأنه يسبب فوضى في الكود وصعوبة في الصيانة.
1. الربط الخارجي (External)
يتم إنشاء ملف CSS منفصل ثم يتم ربطه داخل ملف HTML باستخدام وسم <link> لملفات CSS JavaScript.
مثال على ربط CSS خارجيًا:
<head>
<link rel="stylesheet" href="styles.css">
</head>
2. الربط الداخلي (Internal)
يتم كتابة CSS داخل وسم <style> في ملف HTML، أو كتابة JavaScript داخل وسم <script> في نفس الملف.
مثال على CSS داخلي:
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>
3. الربط المباشر (Inline)
يتم إضافة CSS مباشرة داخل وسم العنصر باستخدام خاصية style=""، أو يتم إضافة JavaScript مباشرة في خاصية onclick="" أو onload="" وغيرها.
مثال على CSS مضمّن (Inline CSS):
<p style="color: red; font-size: 20px;">مرحبا بالعالم</p>
ما هي الطريقة الأفضل؟
الربط الخارجي هو الأفضل من حيث التنظيم، وإعادة الاستخدام، وسهولة الصيانة.
الربط الداخلي مفيد في بعض الحالات مثل تخصيص أنماط أو سكريبتات لصفحة معينة دون الحاجة إلى ملف خارجي.
الربط المباشر يُفضل تجنبه إلا في الحالات الضرورية لأنه يسبب فوضى في الكود وصعوبة في الصيانة.
👍3
تنويه هام:-
إضافة إلى المشروع يجب على كل طالب تسليم تقرير إنجاز المشروع
التقرير يجب ان يحتوي ملاحظات الطالب عن مراحل تنفيذه للمشروع من البداية إلى النهاية مرورًا ب مرحلة إستلهام الفكرة وتنفيذه للمتطلبات إلخ...
شروط التقرير :-
أن لا يقل عن ورقتين
أن لا يقل عن 100 كلمة وغير مولد بالذكاء الإصطناعي
أن يُسلم في وقت المناقشة ( الأسبوع الأخير )
على التقرير درجتين من درجة المشروع
إضافة إلى المشروع يجب على كل طالب تسليم تقرير إنجاز المشروع
التقرير يجب ان يحتوي ملاحظات الطالب عن مراحل تنفيذه للمشروع من البداية إلى النهاية مرورًا ب مرحلة إستلهام الفكرة وتنفيذه للمتطلبات إلخ...
شروط التقرير :-
أن لا يقل عن ورقتين
أن لا يقل عن 100 كلمة وغير مولد بالذكاء الإصطناعي
أن يُسلم في وقت المناقشة ( الأسبوع الأخير )
على التقرير درجتين من درجة المشروع
👨💻3❤1👏1🫡1
Web Development CYS
Photo
في لغة CSS، تُستخدم المحددات (Selectors) لاختيار عناصر معينة من صفحة الويب وتطبيق الأنماط (Styles) عليها. فهم أنواع المحددات يساعد المصمم والمطور على التحكم بدقة في مظهر العناصر. في الصورة الموضحة، يمكننا التعرف على أربعة أنواع رئيسية من المحددات:
1. Element Selector – محدد العنصر
يقوم Element Selector باستهداف جميع العناصر من نوع محدد في الصفحة.
على سبيل المثال، إذا أردنا تغيير لون جميع العناوين من النوع <h2> إلى اللون الأحمر الداكن (#c70039)، يمكننا كتابة:
h2 {
color: #c70039;
}
هذا النوع من المحددات مفيد عندما نريد تنسيق كل عناصر نوع معين دون الحاجة لتعيين فئات أو معرفات.
2. Universal Selector – المحدد العام
يُستخدم Universal Selector ويُكتب على شكل * لاستهداف جميع العناصر في الصفحة مرة واحدة.
على سبيل المثال:
* {
color: #c70039;
}
هذا سيجعل كل النصوص في الصفحة باللون المحدد. لكنه يجب أن يُستخدم بحذر، لأنه يطبق النمط على جميع العناصر مما قد يؤثر على الأداء أو التنسيق العام.
3. ID Selector – محدد المعرف
يُستخدم ID Selector لاستهداف عنصر معين له معرف (ID) محدد، ويُكتب باستخدام الرمز # متبوعًا باسم المعرف.
على سبيل المثال:
#content {
color: #6E4253;
font-size: 15px;
}
هنا، سيتم تطبيق النمط فقط على العنصر الذي يملك المعرف id="content".
هذا النوع مناسب للعناصر الفريدة في الصفحة.
4. Class Selector – محدد الفئة
يُستخدم Class Selector لاستهداف عنصر أو مجموعة عناصر لها نفس الفئة (class)، ويُكتب باستخدام النقطة . متبوعة باسم الفئة.
على سبيل المثال:
.main {
margin-top: 10px;
margin-bottom: 10px;
}
يمكن تعيين نفس الفئة لعدة عناصر، وبالتالي يمكن التحكم في تنسيقها جميعًا بسهولة.
1. Element Selector – محدد العنصر
يقوم Element Selector باستهداف جميع العناصر من نوع محدد في الصفحة.
على سبيل المثال، إذا أردنا تغيير لون جميع العناوين من النوع <h2> إلى اللون الأحمر الداكن (#c70039)، يمكننا كتابة:
h2 {
color: #c70039;
}
هذا النوع من المحددات مفيد عندما نريد تنسيق كل عناصر نوع معين دون الحاجة لتعيين فئات أو معرفات.
2. Universal Selector – المحدد العام
يُستخدم Universal Selector ويُكتب على شكل * لاستهداف جميع العناصر في الصفحة مرة واحدة.
على سبيل المثال:
* {
color: #c70039;
}
هذا سيجعل كل النصوص في الصفحة باللون المحدد. لكنه يجب أن يُستخدم بحذر، لأنه يطبق النمط على جميع العناصر مما قد يؤثر على الأداء أو التنسيق العام.
3. ID Selector – محدد المعرف
يُستخدم ID Selector لاستهداف عنصر معين له معرف (ID) محدد، ويُكتب باستخدام الرمز # متبوعًا باسم المعرف.
على سبيل المثال:
#content {
color: #6E4253;
font-size: 15px;
}
هنا، سيتم تطبيق النمط فقط على العنصر الذي يملك المعرف id="content".
هذا النوع مناسب للعناصر الفريدة في الصفحة.
4. Class Selector – محدد الفئة
يُستخدم Class Selector لاستهداف عنصر أو مجموعة عناصر لها نفس الفئة (class)، ويُكتب باستخدام النقطة . متبوعة باسم الفئة.
على سبيل المثال:
.main {
margin-top: 10px;
margin-bottom: 10px;
}
يمكن تعيين نفس الفئة لعدة عناصر، وبالتالي يمكن التحكم في تنسيقها جميعًا بسهولة.
Web Development CYS
Photo
CSS (Layout Modes)
كيف يقرّر المتصفّح ترتيب الصناديق (boxes) على الصفحة؟
كل نمط له خوارزمية مختلفة ومجموعة خصائص تشتغل معه.
1) Flow (التدفّق العادي)
ما هو؟
الوضع الافتراضي. العناصر تُرتّب حسب ترتيبها في الـ HTML، كسطور نص:
عناصر block تحتل السطر كلّه وتبدأ من اليسار/اليمين حسب الاتجاه.
عناصر inline (مثل <a>, <span>) تتدفّق داخل السطر.
متى أستخدمه؟
للنصوص والمحتوى العادي دون حاجات توزيع معقّدة.
خصائص مهمة:
display (block, inline, inline-block)، أبعاد width/height، المسافات margin/padding.
مفاهيم مهمّة:
Margin Collapsing بين العناصر البلوكية المتجاورة رأسيًا.
Block Formatting Context (BFC): يُنشأ عبر overflow: auto/hidden أو display: flow-root… يمنع تداخل المارجن ويحتوي الفلوّت.
2) Flexbox (تخطيط أحادي البُعد)
ما هو؟
نظام توزيع على محور واحد (أفقي أو عمودي). ممتاز لمحاذاة العناصر وتوزيع المسافات.
متى أستخدمه؟
قوائم أفقية، أشرطة تنقّل، كروت على صف/أكثر، محاذاة عنصر بالمنتصف بسهولة.
خصائص الحاوية:
display: flex | inline-flex,
flex-direction (row/column), flex-wrap, gap,
justify-content (على المحور الرئيسي), align-items (على المحور العرضي), align-content.
خصائص العناصر:
flex (اختصار لـ flex-grow flex-shrink flex-basis), order, align-self.
3) Grid (تخطيط ثنائي البُعد)
ما هو؟
شبكة صفوف وأعمدة. الأفضل لتخطيطات الصفحات المعقّدة ولوحات بطاقات متجاوبة.
متى أستخدمه؟
صفحة كاملة، لوحات Dashboard، جاليري صور، تراكب (areas).
خصائص الحاوية:
display: grid | inline-grid,
grid-template-columns/rows, gap, grid-auto-rows/columns,
place-items (اختصار لـ align-items + justify-items),
grid-template-areas، ودعم subgrid في المتصفحات الحديثة.
خصائص العناصر:
grid-column, grid-row, place-self, grid-area.
4) Positioned (العناصر المُموضعة)
ما هو؟
إخراج/تثبيت العنصر من التدفق العادي بدقّة. أربعة أوضاع:
relative: لا يخرج من التدفق؛ يسمح بإزاحة خفيفة ويُنشئ مرجعًا لأبنائه الـ absolute.
absolute: يخرج من التدفق ويتموضع بالنسبة لأقرب أب positioned (غير static).
fixed: ثابت بالنسبة للنافذة (الViewport).
sticky: يبدأ relative ثم يصير ثابتًا عند التمرير بعد حد معين.
متى أستخدمه؟
شارات/بادجات، Tooltips، نوافذ منبثقة، رؤوس لزجة.
5) Table (تخطيط جدولي)
ما هو؟
خوارزمية الجداول لعرض بيانات جدولية. إمّا بعناصر HTML <table> أو بتحويل عناصر عادية إلى جدول عبر display: table, table-row, table-cell.
متى أستخدمه؟
عند عرض بيانات حقيقية على شكل جدول (ليس لتخطيط الصفحة!).
خصائص مهمة:
انهيار الحدود border-collapse, محاذاة الخلايا vertical-align, أنماط الصفوف.
6) Float (تعويم)
ما هو؟
وُجد أصلاً لالتفاف النص حول الصور. يُخرِج العنصر جزئيًا من التدفق في اتجاه اليسار/اليمين فيلتف النص حوله.
متى أستخدمه؟
صورة داخل مقال مع التفاف نص. ليس للتخطيطات الحديثة (استخدم Flex/Grid).
كيف يقرّر المتصفّح ترتيب الصناديق (boxes) على الصفحة؟
كل نمط له خوارزمية مختلفة ومجموعة خصائص تشتغل معه.
1) Flow (التدفّق العادي)
ما هو؟
الوضع الافتراضي. العناصر تُرتّب حسب ترتيبها في الـ HTML، كسطور نص:
عناصر block تحتل السطر كلّه وتبدأ من اليسار/اليمين حسب الاتجاه.
عناصر inline (مثل <a>, <span>) تتدفّق داخل السطر.
متى أستخدمه؟
للنصوص والمحتوى العادي دون حاجات توزيع معقّدة.
خصائص مهمة:
display (block, inline, inline-block)، أبعاد width/height، المسافات margin/padding.
مفاهيم مهمّة:
Margin Collapsing بين العناصر البلوكية المتجاورة رأسيًا.
Block Formatting Context (BFC): يُنشأ عبر overflow: auto/hidden أو display: flow-root… يمنع تداخل المارجن ويحتوي الفلوّت.
2) Flexbox (تخطيط أحادي البُعد)
ما هو؟
نظام توزيع على محور واحد (أفقي أو عمودي). ممتاز لمحاذاة العناصر وتوزيع المسافات.
متى أستخدمه؟
قوائم أفقية، أشرطة تنقّل، كروت على صف/أكثر، محاذاة عنصر بالمنتصف بسهولة.
خصائص الحاوية:
display: flex | inline-flex,
flex-direction (row/column), flex-wrap, gap,
justify-content (على المحور الرئيسي), align-items (على المحور العرضي), align-content.
خصائص العناصر:
flex (اختصار لـ flex-grow flex-shrink flex-basis), order, align-self.
3) Grid (تخطيط ثنائي البُعد)
ما هو؟
شبكة صفوف وأعمدة. الأفضل لتخطيطات الصفحات المعقّدة ولوحات بطاقات متجاوبة.
متى أستخدمه؟
صفحة كاملة، لوحات Dashboard، جاليري صور، تراكب (areas).
خصائص الحاوية:
display: grid | inline-grid,
grid-template-columns/rows, gap, grid-auto-rows/columns,
place-items (اختصار لـ align-items + justify-items),
grid-template-areas، ودعم subgrid في المتصفحات الحديثة.
خصائص العناصر:
grid-column, grid-row, place-self, grid-area.
4) Positioned (العناصر المُموضعة)
ما هو؟
إخراج/تثبيت العنصر من التدفق العادي بدقّة. أربعة أوضاع:
relative: لا يخرج من التدفق؛ يسمح بإزاحة خفيفة ويُنشئ مرجعًا لأبنائه الـ absolute.
absolute: يخرج من التدفق ويتموضع بالنسبة لأقرب أب positioned (غير static).
fixed: ثابت بالنسبة للنافذة (الViewport).
sticky: يبدأ relative ثم يصير ثابتًا عند التمرير بعد حد معين.
متى أستخدمه؟
شارات/بادجات، Tooltips، نوافذ منبثقة، رؤوس لزجة.
5) Table (تخطيط جدولي)
ما هو؟
خوارزمية الجداول لعرض بيانات جدولية. إمّا بعناصر HTML <table> أو بتحويل عناصر عادية إلى جدول عبر display: table, table-row, table-cell.
متى أستخدمه؟
عند عرض بيانات حقيقية على شكل جدول (ليس لتخطيط الصفحة!).
خصائص مهمة:
انهيار الحدود border-collapse, محاذاة الخلايا vertical-align, أنماط الصفوف.
6) Float (تعويم)
ما هو؟
وُجد أصلاً لالتفاف النص حول الصور. يُخرِج العنصر جزئيًا من التدفق في اتجاه اليسار/اليمين فيلتف النص حوله.
متى أستخدمه؟
صورة داخل مقال مع التفاف نص. ليس للتخطيطات الحديثة (استخدم Flex/Grid).
❤1
Forwarded from Web Development
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Box model
🤩1
Forwarded from Web Development
This media is not supported in your browser
VIEW IN TELEGRAM
Text Animation CSS
تنبيه:
محاضرات هذا الأسبوع ستكون مكثفة
لذا نرجو من الطلاب الحضور مبكرًا
محاضرات هذا الأسبوع ستكون مكثفة
لذا نرجو من الطلاب الحضور مبكرًا
👍2
Web Development CYS
https://youtube.com/playlist?list=PLknwEmKsW8OuN04Odt2sJqt4aAnkp-iYA&si=NqtgeID8Pvc9nu13 كورس شامل HTML & CSS & JS
تم تنزيل الكورس
وهو متواجد مع بعض الطلاب
ولمن يريد يجيب لي فلاشة type-c وقت المحاضره وانسخه له
وهو متواجد مع بعض الطلاب
ولمن يريد يجيب لي فلاشة type-c وقت المحاضره وانسخه له
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Responsive CSS