أنواع CSS
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
❤4
ما أكثر ما يساعدك على فهم الدروس العملية بشكل أفضل؟
Final Results
23%
اسلوب الشرح المباشر السلس والواضح
45%
الأمثلة العملية والتطبيقات البحته
16%
دعم المدرس ومتابعته المستمرة
16%
المصادر الإضافية والشروحات الخارجية( قنوات التيليجرام )
❤8
تنويه هام:-
نظرًا للتفاوت في في جودة المستوى
سيتم العودة الأسبوع القادم لتكملة تمارين على HTML
اما ال CSS سنعود إليها بعد أن يتم شرحها نظريًا مع د. بكيل
نظرًا للتفاوت في في جودة المستوى
سيتم العودة الأسبوع القادم لتكملة تمارين على HTML
اما ال CSS سنعود إليها بعد أن يتم شرحها نظريًا مع د. بكيل
🫡3❤1👍1
Forwarded from Web Development CYS
Web Development CYS
Photo
الفرق بين Semantic HTML و Non-Semantic HTML
1. Semantic HTML (HTML الدلالي)
يشير إلى العناصر التي تحمل معنى واضحًا يعبر عن محتواها ووظيفتها.
يساعد في تحسين إمكانية الوصول (Accessibility) وتحسين محركات البحث (SEO).
يسهل على المطورين والمتصفحات ومحركات البحث فهم بنية الصفحة.
أمثلة:
<header>العنوان الرئيسي</header>
<nav>روابط التنقل</nav>
<article>مقال</article>
<section>قسم من المحتوى</section>
<footer>التذييل</footer>
2. Non-Semantic HTML (HTML غير الدلالي)
لا يعطي أي دلالة عن محتواه، بل يعتمد فقط على الشكل والتنسيق.
يحتاج المطورون إلى إضافة class أو id لشرح وظيفته.
يصعب فهمه بالنسبة لمحركات البحث والأشخاص ذوي الاحتياجات الخاصة.
أمثلة:
<div class="header">العنوان الرئيسي</div>
<span class="nav">روابط التنقل</span>
<div class="article">مقال</div>
<div class="footer">التذييل</div>
1. Semantic HTML (HTML الدلالي)
يشير إلى العناصر التي تحمل معنى واضحًا يعبر عن محتواها ووظيفتها.
يساعد في تحسين إمكانية الوصول (Accessibility) وتحسين محركات البحث (SEO).
يسهل على المطورين والمتصفحات ومحركات البحث فهم بنية الصفحة.
أمثلة:
<header>العنوان الرئيسي</header>
<nav>روابط التنقل</nav>
<article>مقال</article>
<section>قسم من المحتوى</section>
<footer>التذييل</footer>
2. Non-Semantic HTML (HTML غير الدلالي)
لا يعطي أي دلالة عن محتواه، بل يعتمد فقط على الشكل والتنسيق.
يحتاج المطورون إلى إضافة class أو id لشرح وظيفته.
يصعب فهمه بالنسبة لمحركات البحث والأشخاص ذوي الاحتياجات الخاصة.
أمثلة:
<div class="header">العنوان الرئيسي</div>
<span class="nav">روابط التنقل</span>
<div class="article">مقال</div>
<div class="footer">التذييل</div>
❤2👍2👏1
Forwarded from Web Development CYS
أنواع CSS
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
❤1👍1
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