لغة html/css - إدخال لغة الـCSS

بعدما إنتهينا من الفصول السابقة التي تتحذث عن لغة HTML فقط ، حان الوقت الان في هذا الفصل للتعرف على لغة CSS ، و ما يمكننا فعله باستخدامها .
لغة CSS ليست أكثر تعقيدا من الـHTML ، إنها لغة تأتي لتكمل و تحسن من مواقع الويب المبنية بالـHTML .
تتوفر لغة CSS على خصائص تعدل من مظهر عناصر الـHTML ، و هي كثيرة بحيث لن تصدق ما الذي يمكننا تحقيقة بهذه الخصائص  .
سنقوم في هذا الفصل بالتعرف على لغة CSS : ما هي هذه اللغة ؟ فيم تستخدم ؟ كيف يتم إدخالها ؟ ما هي بنيتها ؟ . على العموم إنها أسهل من الـHTML ، غير أنه قد تواجهك صعوبة في تذكر بعض خصائصها لأنها كثيرة الكثيرة . لكن لا تقلق يمكن أن تقوم بتسجيل هذه الخصائص عندك و النظر إليها كلما نسيت شيئا منها . فلا يوجد أستاذ يقف عند رأسك و يمنعك من ذلك  .

الفهرس

1. قصة صغير عن الـCSS .
2. أين نكتب الـCSS ؟
3. تطبيق خاصية : تحديد عنصر ما .
4. تطبيق خاصية : سمتي Class و Id .
5. تطبيق خاصية : المحددات المتقدمة .

---

قصة صغير عن الـCSS

نحن نقوم في هذه الدروس بتعلم لغتين : الـHTML و الـCSS . قمنا في الفصول الأولى بالتعرف على أهم عناصر الـHTML ، لكننا لم ننته من كل العناصر بعد . سنقوم في الفصول الخمسة التالية بتعلم القليل من الـCSS ثم سنعود إلى الـHTML ثم الـCSS . و ذلك لكي لا نمل و لكي نتعلم كل شيء كما يجب  ، بعض عناصر الـHTML تتطلب منك معرفة قليلة بالـCSS ، و هذا كان سببا اخر لمباشرتنا بالـCSS من الان .

الـCSS أي Cascading Style Sheets ، إنها لغة أخرى تأتي لتكمل الـHTML .
لقد تعرفت في الفصل الأول عن دورها : يتجلى في وصف مظهر الموقع ( التصميم ، المواقع ، الديكور ، الألوان ، حجم الخطوط ، إلخ .. ) .

تذكير صغير 
الـCSS ؟ هي ما يقوم بالتحكم في ألوان نصوص موقعك .
هي ما يقوم بتحديد نوع و شكل الخطوط في موقعك .
هي ما يقوم بتحديد عرض و ارتفاع كل عناصر موقعك .
إنها لغة تتحكم في كل أوصاف و خصائص موقعك .

أتتذكر الصورة التوضيحية في الفصل الأول عن عمل الـCSS :

بفضل لغة HTML تمكنا من إدخال المحتوى إلى صفحتنا ، و بالـCSS سنقوم بتجميل هذه المحتويات و تخصيصها لتظهر كما  نرغب و ذلك يعتمد على براعتنا في تنسيق الألوان و الخطوط و غيرها  .

الـCSS : بداية صعبة
عندما ظهر الويب لأول مرة ، لم يكن هناك CSS . كانت هناك لغة HTML فقط .
ظهرت الـHTML سنة 1991 ، ثم ظهرت الـCSS في 1996 . ستقول بلا شك : كيف كان يتم تخصيص صفحات الويب بين 1991 و 1996 ؟ حسنا ، كان ذلك يتم بالـHTML فقط حيث تم إنشاء بعض العناصر الخاصة بالتخصيص فقط ، على سبيل المثال <"font color="#aab1c3> : بهذا العنصر يستطيعون تحديد ألوان النصوص .

بهذه الطريقة أصبحت صفحات الـHTML أكثر تعقيدا . زادت الحاجة إلى العناصر التي تغير شكل و أبعاد العناصر و هنا فكر المبرمجون بضرورة إنشاء لغة جديدة مسؤولة عن هذا كله و كان إختراع لغة CSS سنة 1996 هو الحل .

عند بدايت هذه اللغة الجديدة لم تلاقي إقبالا كبيرا من أصحاب المواقع ، لكن ما إن شددت منظمة W3C على إستعمال هذه اللغة و أشارة إلى قدراتها حتى إنكب الجميع على تعلمها و إستعمالها . و قد أصبحت الان لغة لا غنى عنها في إنشاء المواقع . و هذا أدى إلى الإختفاء التدريجي لبعض العناصر مثل <font> .

الـCSS : دعم المتصفحات .
مثل الـHTML ، عرفت لغة CSS عدة تحذيثات و صدور عدة نسخ أو إصدارات منها :

• CSS 1
• CSS 2.0
• CSS 2.1
• CSS 3

النسخة CSS 3 لم تكتمل بعد ( ليست نسخة رسمية بعد ) . رغم ذلك عرفت هذه اللغة تقدما كبيرا و إقبالا واسعا حيث يدعمها العديد من المتصفحات الحالية . هذا يعني أنه علينا تعلمها هي الأخرى الان .
سيكون من المؤسف أن ندع CSS 3 جانبا ، لأنها تحتوي على العديد من الخصائص ( ضعف ما تحتوي عليه CSS 2.1 ) . لذلك سنقوم الان بتعلمها لأنها كاملة .

بالنسبة لنا الـCSS سهلة . فالمتصفحات هي من تقوم بالعمل الصعب المعقد : يقرأ المتصفح خصائص الـCSS و يعرض الموقع حسب وصف تلك الخصائص .

في بداية سنة 2000 ، كان إنترنت إكبلورر المتصفح الأكثر إستعمالا في العالم ، لكن دعمه للـCSS كان لا يزال فقيرا ( لكي لا نقول سيئا  ) . لقد كانت فترة إزدهار الإصدار السادس ( IE6 ) ، أما الان فالقليلون من يهتمون بهذا المتصفح .

على إثر الدعم الفقير للـCSS من طرف إنترنت إكبلورر ، ظهرت عدة متصفحات جديدة مستغلة ذالك لصالحها : بالطبع  موزيلا فايرفوكس  و الان  غوغل كروم ، هذا جعل شركة ميكروسوفت تحذث إصدارات مطورة أخرى من متصفحها كـ IE 7 و IE 8 و IE 9 و حتى IE 10 .

حسنا القصة جميلة .
و لكن ما الذي يهمنا نحن من هذه القصة ؟

ما الذي يجب إستحظاره من كل هذا ؟ ليست كل المتصفحات تعرف كل شيء عن خصائص CSS ، فكلما كان المتصفح قديما كلما كان يجهل أكثر عن هذه اللغة  .

سأقدم لكم في هذا الفصل بعض الخصائص التي لا تعمل أبدا على المتصفحات القديمة . لا يمكن تجنب عدم إستعمال هذه الخصائص ، فالـCSS 3 لا تزال في طور الإنشاء و الشركات تقوم في كل مرة بتحذيث متصفحها لكي يدعم بعض هذه الخصائص ، و كنتيجة : لا يوجد متصفح يدعم كل خصائص الـCSS .

سأطلب منك أن تضع الموقع www.caniuse.com في مفضلتك . يقدم هذا الموقع جدولا لكل خاصية يري فيها المتصفحات التي تدعم و التي لا تدعم هذه الخاصية ، يقوم أيضا بنفس الشيء بالنسبة لعناصر HTML 5 . الصفحة الخاصة بالـCSS : www.caniuse.com/#cats=CSS

---

أين نكتب الـCSS ؟

لديك الإختيار ، هناك 3 طرق لإدخال خصائص الـ CSS :

• في ملف css. ( طريقة ينصح بها ) .
• في رأس الصفحة داخل العنصر <style> .
• مباشرة داخل العنصر في سمة style ( طريقة لا ينصح بها ) .

سأقوم بشرح الطرق الثلاثة غير أنني أنصح بالطريقة الأولى لأنها الأحسن .

في ملف css.
يتم كتابة الخصائص في ملف منفصل يتميز بالإمتداد css. ( إمتداد ملف HTML هو html. ، و إمتداد ملف CSS هو css. )  ، هذه الطريقة هي الأفضل على الإطلاق لأنك تتجنب بها تخليط الأكواد و تعقيد صفحتك .

لننتقل الأن إلى التطبيق . سنضيف عنصرا مهما جديدا :

<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>أول تجريب للسي إس إس</title>
</head>
<body>
    <h1>موقعي الرائع</h1>
    <p>أهلا و سهلا بكم في موقعي</p>
    <p>حاليا ، موقعي <em> فارغ </em> حاليا . إصبروا قليلا ريثما أتعلم كل شيء</p>
</body>
</html>

لاحظ السطر <link rel="stylesheet" href="style.css" /> : هذا العنصر يخبر المتصفح أن خصائص الـCSS الذي يجب أن يطبقها موجودة في ملف إسمه style.css .

قم بحفظ هذه الصفحة بإسم ما ( مثلا page.html ) . حاليا لا يوجد شيء خارق للعادة غير العنصر الجديد الذي أضفناه  .

أنشئ الان صفحة جديدة فارغة بإستخدام ++Notepad ، أنسخ الكود أسفله و ألصقه في الصفحة التي أنشأتها . لا تقلق سأشرح لك الكود التالي فيما يلي :

p {
color: blue;
}

لتفعيل تلوين الكود في ++Notepad إذهب إلى Langage > C > CSS .
هكذا ستصبح عناصر الكود واضحة لك و سيسهل عليك الفهم و التمييز بين هذه العناصر

بعدما ألصقت الكود قم الان بحفظ الملف باسم ينتهي بالإمتداد css. كـ style.css مثلا ، ضع هذا الملف في نفس المجلد الذي يوجد فيه ملف page.html .

في ++Notepad ، سيكون لديك شيء كالتالي :

يجب أن يكون ملف css. بجانب ملف html. ( في نفس المجلد )

إعرض ملف html. الان في المتصفح لتجربته ، و كما ترى إنه كالسحر : ظهرت النصوص زرقاء  .

لا فائدة من محاولة عرض ملف css. في المتصفح ، يكفي عرض ملف html. و هذا الأخير يقوم بجلب الخصائص من ملف css. أتوماتيكيا .

في رأس الصفحة <head> .
توجد طريقة أخرى لإدخال خصائص CSS في صفحات HTML : تركز هذه الطريقة على إدخال الخصائص في عنصر <style> داخل رأس الصفحة <head> .

سنحصل على نفس النتيجة السابقة تماما :

<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8" />
    <style>               
        p {                   
        color: blue;       
        }                      
    </style>              
    <title>أول تجريب للسي إس إس</title>
</head>
<body>
    <h1>موقعي الرائع</h1>
    <p>أهلا و سهلا بكم في موقعي</p>
    <p>حاليا ، موقعي <em> فارغ </em> حاليا . إصبروا قليلا ريثما أتعلم كل شيء</p>
</body>
</html>

مباشرة داخل العنصر في سمة style .
الطريقة الأخيرة : تتم بإدخال الخصائص مباشرة في العنصر المراد تخصيصة باستخدام سمة style :

<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8" />
    <title>أول تجريب للسي إس إس</title>
</head>
<body>
    <h1>موقعي الرائع</h1>
    <p style="color: blue;">أهلا و سهلا بكم في موقعي</p>
    <p>حاليا ، موقعي <em> فارغ </em> حاليا . إصبروا قليلا ريثما أتعلم كل شيء</p>
</body>
</html>

هذه المرة لن تظهر كل النصوص زرقاء بل سيظهر النص داخل العنصر الذي يحتوي على الخصائص أزرق لوحده فقط

ما الطريقة التي أختار

أجد أن الطريقة الأولى أكثر تعقيدا من الطرق الأخرى ؟ لم أقوم بإنشاء ملف css. جديد بينما يمكن أن أضع كل شيئ في ملف html. واحد ؟ 

سأنصحك بأن تتعوذ على الإشتغال بهذه الطريقة و حتى بالطريقة الثانية لأنهما مهمان و معظم أصحاب المواقع يستخدمون الطريقة الأولى ... لمــاذا ؟

حاليا ، أنت تقوم باختبار ما تتعلمه من الـHTML و الـCSS على ملف html. واحد ، لذلك فأنت ترى بأن الطريقة الأولى بلا فائدة . و أنا متفق معك هنا  .
لكن تخيل أن لديك موقعا به مليون صفحة ويب ، و أردت أن تغيير خاصية من خصائص الموقع الذي أنشأته . عليك أن تدخل إلى كل صفحة على حدة و تعدل الخاصية و تنتقل إلى الصفحة التالية و هكذا مليون مرة  . بالطبع أنت لست أحمقا لتفكر هكذا .
هنا يتجلى دور الطريقة الأولى . إن كان لديك مليون صفحة html. مرتبطة بملف css. واحد ، فإن أي تغيير تقوم به في خصائص ملف css. سيظهر على المليون ملف html. في نفس الوقت ، و هكذا ستوفر على نفسك الجهد .

---

تطبيق خاصية : تحديد عنصر ما

الان نعرف أين نضع كود CSS . لنهتم قليلا بالكود و مكوناته . سنبدأ بالكود الصغير الذي أعطيته لك سابقا :

p {
color: blue;
}

جميع كودات الـCSS تتكون من ثلاثة عناصر ضرورية :

• المحدد : و هو الرمز الذي يدل المتصفح على العنصر الذي سيطبق عليه الخصائص التي أدخلناها ، و المحدد في هذه الحالة هو إسم العنصر . في حالة الكود السابق كان المحدد هو p إسم عنصر الفقرة ( في الـHTML نكتب <p> لأنه عنصر ، و في الـCSS نكتب p بدون معقوفات  لأنه يلعب دور مُحَدد ) .
• خصائص الـCSS : تتحكم الخصائص في كل ألوان و أشكال و كل تأثيرات الموقع . مثل تتحكم خاصية color في لون النصوص ، و خاصية font-size في حجم الخطوط إلخ ... 
• القيمة : تأخذ كل خاصية من خصائص الـCSS قيمة ما ، مثلا بالنسبة للخاصية color يجب تحديد قيمتها بإسم اللون الذي ترغب به ، أو بالنسبة للخاصية font-size يجب تحديد قيمتها بالحجم الذي تريد إلخ ...

ظاهريا ، يجب أن تكون صفحة الـCSS كالتالي :

selecteur 1 {                   ( selecteur : المحدد , propriete : الخاصية ,  valeur : القيمة )
   propriete: valeur;
   propriete: valeur;
   propriete: valeur;
}
selecteur 2 {
   propriete: valeur;
   propriete: valeur;
   propriete: valeur;
   propriete: valeur;
}
selecteur 3 {
   propriete: valeur;
}

كما ترى ، نكتب إسم العنصر الذي نريد تخصيصه ، نفتح معقوفة ، نكتب الخاصية ثم نقطتين (:) ، نكتب قيمة الخاصية ثم ننهي السطر بنقطة-فاصلة (;) ، نكتب الخصائص واحدة تلو الأخرى و ننهي كل شيء بغلق المعقوفة .

أنت الان تعرف بنية لغة CSS ، إنها سهلة . تتكون من محددات و خصائص و قيم هذه الخصائص  . إنطلاقا من عدة خصائص سنتعرف عليها في الفصول القادمة ، ستتمكن من تحويل صفحاتك إلى صفحات أكثر جمالا و أكثر قابلية للقرائة . سنكتفي في هذا الفصل بالخاصية color و سنتعرف على باقي الخصائص في الفصول القادمة ، لأننا سنركز في هذا الفصل على المحددات فقط .

الكود الذي إستعملناه حتى الان :

p {
color: blue;
}

يعني كما لو أنك تقول للتصفح بالعربية : أريد أن تظهر جميع الفقرات باللون الأزرق .

حاول أن تغيير المحدد بتغيير إسم العنصر المراد تخصيصه ، مثلا إن كتبت h1 بدل p ، فإن العنوان هو من سيصبح ملونا بالأزرق و ليس الفقرات .

h1 {
color: blue;
}

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

تطبيق خاصية على عدة عناصر

لاحظ الكود أسفله

h1 {
     color: blue;
}
em {
     color: blue;
}

هذا يعني أن كل العناوين <h1> و النصوص المائلة <em> ستظهر باللون الأزرق . لكن ألا تعتقد بأن هناك تكرارا يمكن التخلص منه هنا ؟
فبدل من أن تقول << أريد العناوين زرقاء و أريد النصوص المائلة زرقاء >> يمكن أن تقول بإختصار << أريد العناوين و النصوص المائلة زرقاء >>  .

لحسن الحظ ، هناك طريقة في لغة الـCSS تمكننا من تجنب هذا التكرار ، بحيث يمكن إعطاء نفس الخصائص لأكثر من عنصر عبر الطريقة التالية :

h1 ,em {
     color: blue;
}

---

تطبيق خاصية : سمتي Class و Id

كل ما توصلنا إليه الان غير كافي لتحكم كامل في خصائص CSS ، لأنه إن لاحظت من خلال ما توصلنا إليه لا بد أن تأخذ جميع عناصر الصفحة المتشابهة نفس الخصائص . لقد أصبحت جميع الفقرات <p> تظهر باللون الأزرق .

في بعض الأحيان قد نحتاج إلى أن يكون عنصر <p> واحد أن يكون بالأزق ، و العناصر <p> الباقية تبقى عادية .

لحل هذا الإشكال يمكننا إستخدام سمتين معرِفتين تعملان على جميع العناصر :

• سمة class
• سمة id

لكي أكون واضحا : السمتين class و id يعملان بنفس الطريقة ، إنهما نفس الشيء ، هناك فرق بسيط بينهما سنتعرف عليه في اخر هذه الفقرة . و الان سنهتم بالسمة class 

كما قلنا سابقا سمة class تعمل على جميع العناصر ، و هي تسمى أيضا سمة معرفة : أي تعرف العنصر الذي نريد تخصيصه .

<img class="" />
<h1 class="">
<em class="">
<p class="">

لا نكتفي بوضع السمة class بدون أية قيمة بل يجب إعطائها قيمة ما ، هذه القيمة لا يجب أن تبتدأ برقم أو رمز بل يجب أن تبدأ بحرف . و يمكن أن تكتب أي شيء كقيمة للسمة class مثلا <"p class="Introduction> .

<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8" />
    <title>أول تجريب للسي إس إس</title>
</head>
<body>
    <h1>موقعي الرائع</h1>
    <p class="Introduction">أهلا و سهلا بكم في موقعي</p>     
    <p>حاليا ، موقعي <em> فارغ </em> حاليا . إصبروا قليلا ريثما أتعلم كل شيء</p>
</body>
</html>

حسنا ، لقد أصبحت الفقرة <p> الأولى معرفة بالكلاس : Introduction ، يجب أن تكتب في كود الـCSS شيئا تقول به للمتصفح : أريد أن تكون الفقرة المعرفة بالكلاس : Introduction زرقاء اللون .
الطريقة سهلة و هي كالتالي : نكتب نقطة (.) و نتبعها بالقيمة التي أعطيناها للـClass :

.introduction {
     color: blue;
}

جرب النتيجة ، الفقرة الأولى فقط هي من ستظهر بالأزرق

السمة id تعمل بنفس الطريقة التي تعمل بها class غير أنه في كود الـCSS ، المحدد الذي يعتمد على قيمة السمة id يبدأ بالعلامة (#) و ليس بالنقطة (.) .

<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8" />
    <style>
    .Introduction { 
        color: blue;
    }
    #Important {    
        color: green;
    }
    </style>
    <title>أول تجريب للسي إس إس</title>
</head>
<body>
    <h1>موقعي الرائع</h1>
    <p class="Introduction">أهلا و سهلا بكم في موقعي</p>
    <p>حاليا ، موقعي <em id="Important"> فارغ </em> حاليا . إصبروا قليلا ريثما أتعلم كل شيء</p>
</body>
</html>

و النتيجة تظهر كالتالي :

العناصر العالمية
سيأتي في بعض المرات التي سنحتاج فيها إلى تخصيص كلمة واحدة من فقرة ما و نجد أن هذه الكلمة غير محصورة بوسمين لعنصر ما ، و بالتالي قد يتعذر علينا تخصيص هذه الكلمة .

فمثلا لدينا العنصر التالي و نريد تغيير لون الكلمة << أهلا و سهلا >> فقط دون الكلمات الأخرى :

<p>أهلا و سهلا بكم في موقعي</p>

سيكون ذلك أسهل لو كان هناك وسمان حول الكلمة << أهلا و سهلا >> ، لسوء الحظ لا توجد هذه الوسوم ، و لحسن الحظ قام المصممون بإنشاء عناصر لا تفعل شيئا  .

هناك عنصران مهمان و هما لا يفعلان شيئا ، يعني أنك لو أضفت هذين العنصرية مائة مرة في موقعك فستجد أنه لا يحذث أي تغيير ، لكننا نستعمل وسمي هذين العنصرن للإحاطة بالكلمات التي نريد تخصيصها .

• <span></span> : هذا العنصر من نوع Inline . إنه عنصر نستعمله للإحاطة بالكلمات التي نريد تخصيصها في فقراتنا ، العنصران <strong> و <em> من نفس عائلة هذا العنصر، يتم إضافتهما داخل الفقرات لتحديد بعض الكلمات المهمة ، غير أن <strong> يجعل النص سميكا و <em> يجعله مائلا ، أما <span> فهو كما قلنا سابقا لا يفعل شيئا ، مما يسمح لنا بتغيير خصائص محددة من النص داخله .
• <div></div> : و هو عنصر من نوع Block . من نفس عائلة <p> و <h1> لأنه يخلق سطرا جديدا في الصفحة عند إضافته . و هذا العنصر يستعمل كثيرا في تصميم صفحات الويب كما سنرى في الفصول المتقدمة من هذه الدروس .

حاليا لقد صار واضحا ماذا سنفعل حيال الكلمة التي نريد تلوينها ، سنحيطها بالعنصر <span> و سنعرف هذا العنصر بسمة class التي سنستعملها في تحديد الخصائص .

<p><span class="salutation">أهلا و سهلا</span> بكم في موقعي</p>

و كود الـCSS سيكون كالتالي :

.salutation {
     color: blue;
}

---

تطبيق خاصية : المحددات المتقدمة

في الـCSS ، أصعب شيء هو معرفة المحدد الذي سنستعمله لتخصيص عنصر ما .

المحددات التي تعرفنا عليها 
المحدد الأول و الأبسط الذي تعرفنا عليه هو إسم العنصر ، و الذي يطبق الخصائص على جميع العناصر من ذلك الإسم :

p {
color: blue;
}

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

h1 ,em {
     color: blue;
}

و أخيرا رأينا طريقة تحديد العناصر بإستخدام المعرفات class و id

.class {
...................
}
#id {
...................
}

هناك العديد من الطرق التي نستطيع تحديد بها العناصر التي نرغب في تخصيصها و هي كثيرة سأذكر منها ما يلي في الفقرة التالية .

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

* : المحدد العالمي

* {
...............
}

نستخدم هذا المحدد لتحديد جميع عناصر صفحتنا بدون إستثناء .

A B : عنصر داخل عنصر اخر 

h3 em {
...................
}

يستعمل لتحديد جميع العناصر <em> الموجودة داخل العناصر <h3> ، لا تنسى وضع مساحة فارغة بين إسمي العنصرين .
مثال للـHTML :

<h3>عنوان مع <em>نص مهم </em></h3>

[A[attribut : عنصر معرف بسمة .

a[title] {
...............
}

يعني تحديد جميع عناصر الروابط a التي تحتوي على سمة title . ( كيفما كانت قيمة السمة title )

["A[attribut="valeur : عنصر معرف بسمة و قيمتها .

img[title="infobulle"] {
.......................
}

ستطبق الخصائص على الصور التي تحتوي على السمة title التي تأخذ القيمة infobulle .

هناك محددات أخرى 
لقد قمنا الان بالتعرف على بعض المحددات فقط ، لكن هناك العديد منها و هي بالتفصيل الممل موجودة في موقع www.w3.org .
أهم المحددات التي ستحتاجها دائما هي الثلاث الأولى التي قمت بشرحها بالتفصيل و حتى محدد A B : عنصر داخل عنصر .

لقد إنتهى الفصل بإذن الله ، ترقب الفصل القادم

→ الفصل التالي الفصل السابق ←