ما هي لغة بايثون؟ تعرف على تاريخها وأهم مميزاتها

بعد ما اتعلمنا في الجزء الأول الأساسيات بتاعة CSS، زي الأنماط وأنواع الربط، دلوقتي جه وقت نغوص أعمق شوية 💪

في المقال ده، هنتكلم عن Selectors المتقدمة، الـBox Model، وأنظمة التموضع Positioning، وكل ده بأسلوب سهل وممتع إن شاء الله 👨‍💻

🧷 أولًا: أنواع الـSelectors في CSS

الـSelectors هي اللي بتحدد العناصر اللي هتتطبق عليها التنسيقات. تعالوا نشوف الأنواع المشهورة:

1. Selector عادي (النوع):

p {
  color: blue;
}

ده بيأثر على كل عناصر <p> في الصفحة.

2. Selector بالـClass:

.alert {
  background-color: yellow;
}

بنستخدمه مع العناصر اللي فيها class="alert".

3. Selector بالـID:

#header {
  text-align: center;
}

4. Selector داخل عناصر:

ul li a {
  text-decoration: none;
}

5. Pseudo-classes (شروط إضافية):

a:hover {
  color: red;
}

ده بيشتغل لما المستخدم يحط الماوس على اللينك.

6. Attribute Selector:

input[type="text"] {
  border: 1px solid gray;
}

---

📦 ثانيًا: الـBox Model – البنية الأساسية لأي عنصر

كل عنصر HTML بيتكون من أربع أجزاء:

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

مثال عملي:

div {
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

نصيحة:

تقدر تشوف تأثير Box Model وانت بتجرب في أدوات المطور في المتصفح (Inspect Element).

---

📍 ثالثًا: أنظمة التموضع في CSS (Positioning)

الخاصية position بتحدد إزاي العنصر يتوضع في الصفحة.

1. Static (الافتراضي):

العنصر بيكون في مكانه الطبيعي في التدفق.

2. Relative:

العنصر بيتحرك بالنسبة لمكانه الأصلي.

position: relative;
top: 10px;

3. Absolute:

العنصر بيتحرك بالنسبة لأقرب عنصر أب فيه position مش static.

4. Fixed:

العنصر بيتثبت في مكانه في الشاشة حتى مع التمرير.

5. Sticky:

خلي العنصر يفضل ظاهر في مكانه لحد ما المستخدم يوصل لمكان معين.

---

🧪 مثال تطبيقي عملي:

عنصر div بمساحة مخصصة وحدود ومكان معين:

div.box {
  width: 300px;
  height: 150px;
  background-color: lightgreen;
  border: 2px dashed #555;
  padding: 20px;
  margin: 30px auto;
  position: relative;
  top: 10px;
  left: 50px;
}

جرب الكود ده بنفسك، وعدّل عليه علشان تشوف التغييرات بعينك 👀

---

🧠 الخلاصة

فهمك للـSelectors وأنظمة التموضع والـBox Model بيسهّل عليك تصميم صفحات ويب منظمة وسهلة التحكم.

خد وقتك في التجربة، وكل لما تطبّق أكتر هتثبت المعلومات أكتر 💡

---

مستني تعليقك، ولو في جزء معين عايزني أشرحه بالتفصيل، اكتبلي تحت! 👇

تعديل المقال