Transcript for:

بسم الله هنبدا ان شاء الله دوره جديده ومهمه جدا وهي دوره سي اس اس طيب يعني ايه سي اس اس كلمه سي اس اس هي اختصار ل كاسكيد ستايل شيت طيب بتعمل ايه احنا اتعلمنا قبل كده لغه اتش تي ام ال وعرفنا ان هي مسؤوله عن بناء هيكل الموقع اهو سي اس اس بقى هي المسؤوله عن تنسيق الهيكل ده الهيكل اللي انت عملته بالاتش تي ام ال يعني التحكم في الالوان والاشكال والمقاسات بالاضافه لتنظيم وتخطيط الموقع وحاجات ثانيه كتيره جدا يعني مثلا انا انا هبسط لك دلوقتي التصميم اللي قدامك ده معمول بالاتش تي ام ال والسي اس اس تصميم عادي جدا وجميل تمام طيب لو شيلنا منه السي اس اس هيكون ده الشكل بتاعه عباره عن هيكل فقط او عناصر فقط اللي هي النتس اللي انت عاوز ان انت تضيفها في الموقع ده ولا في الوان ولا مقاسات ولا تنظيم ولا اي حاجه طيب علشان تنسق الهيكل ده وتخليه شكله حلو وتضيف له الوان وتنسيقات ها تضيف عندك السي اس اس وده ببساطه كده الفرق ما بين الاتش تي ام ال والسي اس اس طيب تعالى دلوقتي لما نسال شويه اسئله مهمه انا باكد لك ان هي بتدور في بالك دلوقتي اول سؤال بيقول هل الكورس ده كامل ولا لا فاه الكورس ده ان شاء الله هيكون كامل وشامل كل التحديثات الجديده اللي ظهرت في الفتره الاخ خيره طيباني سؤال بيقول ايه هو نظام التعلم في الكورس ده والسؤال ده مهم جدا لان انت لازم تفهم ان سي اس اس هي لغه كبيره لدرجه ان كل موضوع فيها بيتخصم له كورسات كامله بتشرح الموضوع ده بس يعني مثلا الانيميشن في السي اس اس ده موضوع كبير لدرجه ان في كورسات بتشرح الموضوع ده فقط كذلك الفيلكس بوكس كذلك الجريد وغيرها اهو احنا بقى في الدوره دي عملنا كده ده قسمنا الدوره دي لموضوعات كل موضوع هينا قش حاجه معينه في سي اس اس بحيث اننا نركز على كل موضوع ونشرح بالتفصيل وتحت كل درس هسيب لكم اختبار وده مهم جدا على فكره لان الاختبار ده هيس فهمكم للدرس ده يعني ان شاء الله بعد ما تخلص الدرس بتاعك وتفهمه ان شاء الله وتشوف الفيديو هتلاقي ان شاء الله في الوصف عندك لينك الاختبار تدوس ان شاء الله على اللينك ده وتروح تبدا الاختبار وتختبر نف نفسك وما تنساش تبقى تشاركنا بنتيجه الاختبار بتاعتك علشان تحفز زمايلك علشان الفايده تعم علينا كلنا وان شاء الله بعد ما نخلص خالص هنعمل مع بعض تصميمات قويه جدا هتكون زي تجربه عمليه على كل الحاجات اللي احنا اتعلمناها في الدوره دي علشان نكون حققنا اقصى استفاده ممكنه عايز اقول لك مبدايا كده ان الموضوع مش صعب بل ان انت لو بدات صح صدقني هتلاقي الموضوع سهل جدا وممتع جدا علشان كده ان شاء الله هنبدا بدايه صح في الدوره دي وهنبدا ان شاء الله في الدرس ده بشرح ازاي بتبني كود سي اس اس او ايه هي تركيبه الكود في السي اس اس وتاني حاجه ان شاء الله نتعلمها هو فين بنكتب الكود ده فيلا بينا لما نبدا طيب اول خطوه احنا بنعملها بالراحه وبهدوء كده انت دلوقتي بتعمل موقع الكتروني فالموقع ده انت بتعمل له مجلد او بتعمل له فولدر او مكان بتحط فيه كل ملفات الموقع بتاعك زي ملفات الاتش تي ام ال ملفات السي اس اس ملفات الجافا سكريبت الصور الفيديوهات كل محتويات الموقع ده كل ده انت بتحطه عندك في مجلد او فولدر علشان لو انت نويت ان انت ترفع الموقع ده على استضافه ان شاء الله بعد كده الموضوع يكون سهل عليك فهت عندك دلوقتي في اي مكان في الكمبيوتر بتاعك سواء الديسك توب او اي مكان وهتون عندك مجلد او هتش عندك فولدر جديد فانا هروح عندي هنا في الديسك توب روح انت في اي مكان انت عاوزه ثم كليك يمين ثم نيو فولدر هنعمل دلوقتي فولدر او مجلد جديد سميه انت بالاسم اللي انت عاوزه واعتبر ان الاسم ده هو اسم الموقع بتاعك تمام بشكل مبدئي كده طيب انا دلوقتي محتاج ان انا افتح الفولدر ده في محرر الاكواد بتاعي اللي هو الفيجوال استوديو كود او طبعا اي محرر انت بتستخدمه فهن فح عندنا المحرر بتاعنا وهنضم هنا هنا على اوبن فولدر او افتح المجلد ولو الشكل ده مش هو اللي ظهر لك عادي ما تقلقش يعني حتى لو كان هو بالشكل ده اللي ظهر لك فهت عندك هنا على فايل ثم اوبن فولدر الاثنين واحد وما تقلقش وما تخافش هنضغط هنا على اوبن فولدر وهنروح نختار الفولدر او المجلد اللي احنا كنا لسه عاملينه من شويه طبعا انا كنت عامله في الديسك توب فهحخ تار الفولدر اللي هو اسمه ستور اللي انا كنت لسه عامله من شويه و هضغط هنا على اوبن علشان افتح المجلد ده في الفيجوال استوديو كود فانا دلوقتي بقيت قادر ان انا اتحكم في المجلد ده واقدر دلوقتي ان انا اعمل ملفات واعمل اللي انا عاوزه جوه المجلد ده من داخل البرنامج بتاعي فتعال هنا لما نعمل دلوقتي ملف اتش تي ام ال جوه المجلد ده ف هتيجي عندك هنا كليك يمين ثم نيو فايل وهتعمل عندك ملف اتش تي ام ال بالاسم اللي انت عاوزه انا اسميه اندكس سميه انت بالاسم اللي انت عاوزه ولكن لازم يكون بامتداد اتش تي ام ال ثم انتر وبكده هو دلوقتي عمل لك هنا ملف اتش تي ام ال طيب اول خطوه هو ان انت هتفتح ملف الاتش تي ام ال اللي انت كنت عامله من شويه وهتبدا في الملف ده ان انت تبني صفحه الاتش تي ام ال ولكن بدل ما تكتب كتير انت عندك اختصار اسمه اش تي ام ال 5 ده بيبنك صفحه اش تي ام ال كامله بدون ما تكتب كل الاكواد دي وتوجع دماغك طيب احنا مش محتاجين الاتنين ميتا دول ف هنمسح وهنكتب بالشكل اللي قدامنا ده طيب انا دلوقتي محتاج ان انا اشتغل سي اس اس فببساطة هقوللك يعني انت مثلا عندك تاج البراجراف او تاج الاتش 1 او تاج الصور او الفيديو او اي حاجه في الدنيا هنفترض دلوقتي ان احنا عندنا الاتش 2 شغله السي اس اس انها تنسق لك التاج ده تخلي بقى لونه احمر تخلي الكلمه كبيره صغيره تخليها في الجنب اليمين في الشمال فوق تحت ببساطه هي بتنسق لك التاجز بتاعه الاتش تي ام ال طيب انا فين بكتب السي اس اس ببساطه يا معلم انت عندك ثلاث اماكن بتكتب فيهم سي اس اس وهنا انت لازم تركز معايا كويس جدا اول مكان هو ان انت بتكتب السي اس اس داخل صفحه الاتش تي ام ال والطريقه دي اسمها انترنال سي اس اس يعني انت بتكتب السي اس اس داخل صفحه الاتش تي ام ال وطبعا انا هشرحلك كل حاجه ما تقلقش تاني طريقه هو ان انت بتكتب السي اس اس في ملف خارجي والطريقه دي اسمها اكسترنال سي اس اس ثالث طريقه وهي الان لاين سي اس اس وهو ان انت بتكتب عندك السي اس اس بشكل مباشر داخل التاج بتيجي عندك جوه الوسم بتستخدم عندك اتربيوت اسمه ستايل ومن خلال الستايل بتبدا ان انت تكتب عندك سي اس اس كل الكلام ده ان شاء الله يتشرح دلوقتي ولكن خلينا نمشي واحده واحده طيب كوبايه القهوه بتاعتك وتركيز بنسبه 100% لان ان شاء الله هنبدا دلوقتي في شرح اول طريقه معانا وهي طريقه الانترنال سي اس اس الطريقه دي بتقوللك ان انت بتكتب عندك السي اس اس داخل ملف الاتش تي ام ال وتحديدا داخل وسم الهيد طيب ازاي ببساطه انت بتستخدم عندك وسم اسمهو ستايل الوسم ده ببساطه ما بين البدايه وما بين النهايه بتاعه الوسم ده في المكان ده انت بتكتب عندك كود سي اس اس طيب انا دلوقتي محتاج ان انا اكتب سي اس اس علشان انسق التاج ده انا قلت لك ان السي اس اس بتنسق التاجز بتاعه الاتش تي ام ال اول خطوه انت بتكتبها وهنا تركز كويس جدا اول خطوه انت بتعملها هو ان انت بتحدد العنصر اللي انت عاوز تضيف عليه التنسيق لان انت ممكن يكون عندك هنا عنصر وعنصر ثاني وعنصر ثالث و000 عنصر ممكن يكون عندك الاتش 2 وممكن برض يكون عندك هنا مثلا بارجراف في مثلا اي كلمه وليكن تست انت في الاستايل او في السي اس اس بشكل عام بتحدد العنصر اللي انت عاوز تضيف عليه التنسيق فانا مثلا هقول لك ضيف لي التنسيق على الاتش 2 فانا دلوقتي اخترت عندي الاتش 2 لو كنت عاوز اضيف التنسيق على البراجراف كنت هكتب البراجراف طيب انا هكتب عندي الاتش 2 وهبدا ان انا اضيف التنسيق للاتش 2 طيب دي بعملها ازاي ببساطه بتعملها من خلال الكيرلي براكتس بالشكل ده او الاقواس المجعده ما بين البدايه والنهايه للاقواس المجعده انت بتكتب التنسيق اللي انت عاوز تضيفه للعنصر ده طبعا انت ممكن تفتحه او تكتبه على نفس السطر انت حر طيب انا دلوقتي محتاج ان انا اضيف تنسيق سي اس اس للعنصر ده اغير لونه مثلا للون الاحمر فهاج لك هنا وهكتب دلوقتي كر دي خاصيه في السي اس اس بتتحكم في اللون تمام انا عاوز دلوقتي اضيف للخاصيه دي القيمه بتاعتها فهكذا اكتب ريد عاوز مثلا تضيف عندك لون ازرق ضيف اللون اللي انت عاوزه طيب انا ممكن اضيف لك هنا لون اخضر وفي نهايه الكود بكتب عندي هنا السيمي كولون طبعا السيمي كولون والنقطتين وكل الدوشه دي هنشرح ان شاء الله شويه كده هنبدا ان شاء الله دلوقتي نحلل لك الكود وهنشرح بشكل يعني اهدى شويه من كده تمام طيب انا دلوقتي كده محتاج ان انا اشوف تاثير الكلام ده قبل ما نشرح تركبه الكود على التاج ده فهن دلوقتي ونفتح عندنا صفحه الاتش تي ام ال اللي كنا عاملينها من شويه اللي هي الاندكس دوت اش تي ام ال اللي قدامكم دي تمام هضغط عليها هنا دبل كليك وهبدا دلوقتي ان انا اشوف عندي اللون الاخضر تم اضافته للكلمه دي تمام تعالى كده لما نفتح عندنا ال محرر بالشكل اللي قدامكم ده وتعال كده نغير عندنا اللون ده مثلا لللون الاحمر نشوف كده التاثير ده هيحصل ولا لا ف هنلاقي عندنا ان الكلمه دي تم اضافه ليها اللون الاحمر طيب لو انا مثلا غيرت لك ا 2 وخليتها البي اللي هي البراجراف ببساطه التاثير اللي قدامكم ده هيتم اضافته للعنصر ده فدلوقتي انا لو جيت لك هنا وعملت لك دلوقتي ريلود تم اضافه اللون الاحمر للكلمه دي يبقى دلوقتي اللي انت بتكتبه هنا هو العنصر اللي انت عاوز تضيف ليه التنسيقات دي العنصر ده اسمه السلكتور السلكتور او العنصر اللي انت عاوز تضيف لي التنسيقات دي بما انك كاتب هنا بي ده معناه ببساطه كده ان كل البرجرافات اللي موجوده في الموقع هيتم اضافه لها التنسيق ده يعني ببساطه انت دلوقتي لو عندك مثلا 1000 برجراف بالشكل ده انت دلوقتي بتقول له روح لدلوقتي لكل البراجرافات اللي في الموقع كل البراجرافات دي وضيف ليها التنسيق ده تمام تعالى دلوقتي نشوف الكلام ده لو عملت لك هنا ريلود هتلاقي دلوقتي ان اللون الاحمر تم اضافته لكل البرجرافات اللي موجوده في الموقع ونفس الكلام ده لو انت عندك 1000 اتش 2 وكتبت عندك هنا اتش 2 هيتم اضافه التنسيق ده لكل الاتش 2 اللي موجود عندك في الموقع طيب انا دلوقتي متلخبط انا مش فاهم ليه انت عملت العلامات دي وليه السيمي كولون وايه النقطتين انا مش فاهم اي حاجه وغالبا انا مش هعرف ابني كود من نفسي هقول لك ولا يهمك ركز معايا وانا هديلك دلوقتي مثال يخليك عمرك ما هتنسى تركيبه الكود دي في حياتك ان شاء الله تمام اللي انا عملته هنا ببساطه هو ان انا اخترت عنصر واضفت له صفات بس كده الموضوع ده بالظبط زي مثلا ان انا اختارك انت اهو كمشاهد واديلك مثلا صفات زي الاسم والعمر والطول والكلام الجميل ده كله نفس الم المضوع ده بالضبط في السي اس اس بشكل عملي بقى انا هنا بختار العنصر ده كده اسمه السلكتور اختيار العنصر طيب وبعدين عاوز دلوقتي ان انا اضيف للعنصر ده تنسيقات سي اس اس فببد ان انا افتح لك هنا الكيرل براكتس بعد ما بتفتح عندك الكيرل براكتس بتبدا ان انت تضيف عندك التنسيقات اللي انت عاوزها ممكن ان انت تضيف عندك هنا 1000 تنسيق للعنصر ده مش لازم ان انت تضيف تنسيق واحد بس طيب انا دلوقتي اضفت عندي هنا خاصيه وهي خاصيه الكر عاوز دلوقتي هضيف قيمه للخاصيه دي عاوز مثلا اخلي القيمه بتاعه الكر تكون هي الاحمر الازرق الاخضر الابيض اللي انا عاوزه فببد ان انا اكتب عندي هنا نقطتين النقطتين دول معناهم ببساطه كده يساوي اللي هو انا عاوز اقول لك مثلا ان الكر دي بتساوي اللون الاحمر فتساوي في لغه سي اس اس اسمها نقطتين تمام يعني لو انا مثلا جيت لك هنا واضفت لك خاصيه تانيه وهي الفونت سايز وما تركزش مع الفونت سايز انا مش بشرح لك ولا الفونت سايز ولا بشرح لك الكر انا بفهمك الفكره بس مش اكتر انا دلوقتي اخترت عندي الفونت سايز او حجم الخط عاوز اقول لك ان حجم الخط يساوي 50 بيكسل فيساوي دي هي النقطتين تمام فبكت لك هنا نقطتين و 50 بيكسل تمام طيب انا ليه كتبت عندي هنا سيمي كولون بص يا معلم السيمي كولون هي اللي بتفصل لك الخاصيه دي عن الخاصيه اللي بعدها طالما انت هتكتب عندك كذا خاصيه يبقى لازم تكتب عندك هنا سيمي كولون علشان يفصل لك الخاصيه دي عن الخاصيه اللي بعدها لو ما فيش حاجه تانيه بعدها مش مش لازم تكتب عندك هنا سيمي كولون يعني اخر خاصيه دي انت مش لازم تكتب فيها سيمي كولون ممكن تكتبها او ممكن ما تكتبها لو انا عملتلك هنا ريلود هتلاقي دلوقتي ان اللون الاحمر وال 50 بيكسل تم اضافتهم للبراجراف لكن انا لو شلت لك هنا السيمي كولون وعملت لك هنا ريلود هتلاقي ان اللون الاحمر تم ازالته والفونت سايز تم ازالتها وفي عندك هنا ايرور بيقوللك ان انت عندك هنا غلطه في المكان ده طيب ليه الغط دي ببساطه لان انت ما فصلت الخاصيه دي عن الخاصيه اللي بعدها علشان تفصلها بتكتب عندك هنا السيمي كولون تمام لو انا عملتلك هنا ريلود تم حل المشكله لو انت اضفت عندك خاصيه تالثه وليكن مثلا الفونت ويت انا برض مش بشرحلك هنا الفونت ويت انا بفهمك الفكره تمام قلتلك مثلا فونت ويت 700 هنا برض في مشكله لان انت ما اضفت عندك هنا سيمي كولون للخاصيه التانيه اللي بتفصلها عن الخاصيه الالته فلو عملت لك هنا ريلود هتلاقي بس ان اللون الاحمر هو اللي اشتغل لان اللون الاحمر انت اضفت عندك السيمي كولون و 100 م لكن الفونت سايز تعال كده الفونت سايز والفونت ويت ولا دي تم اضافتها ولا دي تم اضافتها لان انت ما اضفت عندك هنا سيمي كولون ضيف عندك هنا السيمي كولون هيتم حل المشكله وكل حاجه تشتغل معاك 100 م تمام ده ببساطه اللي انا عاوزك تفهمه انا هنا ولا بشرح كر ولا فونت سايز ولا فونت ويت كل الخصائص دي هيتم شرحها ان شاء الله بعد كده تمام تمام يبقى احنا دلوقتي ببساطه كده اتكلمنا عن اضافه اكواد السي اس اس داخل ملف الاتش تي ام ال من خلال وسم الستايل والطريقه دي اسمها انترنال سي اس اس تعال دلوقتي لما نتكلم عن طريقه تانيه وهي طريقه الاكسترنال سي اس اس وهي ان انت بتضيف عندك تنسيقات السي اس اس من خلال ملف خارجي هتيجي عندك هنا جنب ملف الاتش تي ام ال ولاحظ ان انا بقوللك جنب ملف الاتش تي ام ال وهتعمل عندك ملف جديد فهتي عندك هنا على نيو فايل وهتعمل عندك هنا ملف جديد انا هسميه ستايل دوت سي اس اس سميه انت بالاسم اللي انت عاوزه ولكن لازم يكون بامتداد سي اس اس تمام فهغ هنا على انتر بكده انا عملت عندي دلوقتي ملف جديد لازم تفهم ان انت لازم تربط الملفين دول ببعض لازم الملف بتاع الاتش تي ام ال يشوف الملف ده علشان يشوفه يبقى لازم تيجي عندك هنا في الهيد وتربط الملف بتاع السي اس اس بالملف بتاعك ازاي بنربط بنربط من خلال وسم اسمه اللينك تمام الوسم ده ببساطه بيربط لك ملفات السي اس اس فدلوقتي انا لو عملتلك الوسم ده هتلاقي دلوقتي ان الوسم ده واخد اتنين اتربيوت باي ديفولت كده اسمهم ريل وواحد تاني اسمه اتش ريف طيب يعني ايه ريل ويعني ايه اتش ريف الريل هي اختصار لكلمه ريليشن شيب او ايه هي علاقه الملف ده فهو هنا كاتب لك باي ديفولت ستايل شيت يعني ده ملف سي اس اس تمام ستايل شيت يعني الملف اللي انت بتربته ده ملف سي اس اس طيب يعني ايه اتش ريف اتش ريف اللي انت بتكتبه هنا ده هو مسار الملف مسار ملف السي اس اس اللي انت عاوز تربطه بملف الاتش تي ام ال فهتي عندك هنا وتكتب المسار بشكل كامل بما ان الملف جنب الملف يبقى هتكتب عندك الاسم على طول ستايل خلي بالك هو شافه على طول يعني ف بتتكتب عندك ستايل دوت سي اس اس وبكده هو شاف الملف بكده انت ربطت الملف ده بالملف بتاعك طيب دلوقتي لو الملف ده ما كانش جنب ملف الاتش تي ام ال يعني مثلا لو انا مسحت الملف ده كده والملف ده مثلا كان في مجلد تاني يعني انا جيت لك هنا وعملت لك نيو فولدر مجلد تاني المجلد ده سميته لك مثلا سي اس اس وجوه المجلد ده انا عملت لك ملف السي اس اس قلت لك مثلا هنا اعمل لي ملف اسمه ستايل دوت سي اس اس يبقى دلوقتي الملف اللي هو ملف السي اس اس مش جنب ملف الاتش تي ام ال لا هو في مجلد تاني طيب في الحاله دي هنعمل ايه في الحاله دي بنكتب المسار بالكامل هو هنا مش شايف الملف علشان يشوف ملف السي اس اس يبقى لازم اقول له ان الملف ده موجود في مجلد اسمه سي اس اس المجلد ده ادخل جواه يعني اكتب عندك سلاش وادخل لي جوه المجلد ده واكتب لي اسم الملف اللي هو ستايل دوت سي اس اس بكده انا كتبت الباس او مسار الملف بشكل صحيح وبكده هو شاف الملف ده طيب انا دلوقتي بعد ما ربطت الملف ده اقدر دلوقتي ان انا افتحه وادخل جواه اكتب فيه سي اس اس بشكل طبيعي زي ما انا كنت بكتب في الانترنال سي اس اس هي هي بالضبط نفس الطريقه فانا مثلا عاوز اخلي مثلا الكلمه دي باللون الاحمر اللي هو الاتش 2 ف باجي لك هنا وبختار عندي الاتش 2 اللي هو السلكتور وبفتح عندي هنا الكيرل براكتس وبضيف عندي الخاصيه اللي هي الكر او ايا يكن وبكتب هنا نقطتين وبقول لك عاوز اخليها مثلا باللون الاحمر وبما ان هو اخر تنسيق فممكن ان انا اكتب تب عندي السيمي كولون او ممكن ان انا مكتبهاش تمام وبكده انا لو جيت لك هنا وعملتلك دلوقتي ريلود هتلاقي دلوقتي ان الكلمه دي اصبحت عندك باللون الاحمر لو انا غيرتها مثلا ل البلو للون الازرق و عملتلك هنا ريلود هتلاقي دلوقتي ان الكلمه دي اصبحت عندك باللون الازرق في بس ملحوظه مهمه جدا لازم تاخد بالك دلوقتي من ان انت لو جوه الفيجوال استوديو كود تتاكد ان انت تروح عندك لفايل واتاكد ان انت عامل اوتو سيف علشان كل حاجه تتحفظ بشكل اوتوماتيك تمام طيب يبقى دي تاني طريقه وهي طريقه الاكسترنال وهي ان انت بتضيف عندك التنسيقات في ملف خارجي وهنتكلم عن الموضوع ده باستفاضه ان شاء الله في المستقبل تعال دلوقتي بقى لما نتكلم عن الطريقه الثالثه وهي الان لاين سي اس اس انا دلوقتي محتاج ان انا اضيف عندي التنسيق داخل الوسم نفسه علشان تعمل كده بتروح عندك للوسم وبتستخدم عندك اتربيوت اسمه ستايل وجوه الاتربيوت ده بتكتب عندك سي اس اس بشكل مباشر طيب يعني ايه بشكل مباشر يعني بتكتب عندك الخاصيه بشكل مباشر بدون ما تحدد العنصر لان انت اوريدي اصلا جوه العنصر انت دلوقتي اوريدي جوه السلكتور فانت هنا بتكتب الخاصيه اللي هي مثلا الكلر بشكل مباشر على طول فبتقول لي دلوقتي ان الكلر هيكون باللون الاحمر تمام تعال كده ريلود تم اضافه الخاصيه دي طيب انا دلوقتي اضفت عندي اللون الاحمر للاش 2 افرد بقى انا مش عاوز اضيف اللون الاحمر بس انا عاوز اضيف اللون الاحمر وخاصيه ثانيه وليكن مثلا الفونت سايز او الفونت ويت او اي خاصيه تانيه الملخص ان انا عاوز اضيف مجموعه خصائص مش خاصيه واحده ولكن بطريقه الان لاين دي نعملها ازاي الموضوع سهل جدا انت علشان تضيف عندك اكتر من خاصيه فانت بتفصل بالسميك كولون بتعمل عندك خاصيه وبتعمل عندك سيمي كولون وبتكتب الخاصيه اللي بعدها فممكن مثلا اضيف لك الفونت سايز فهقولك هنا فونت سايز قيمتها مثلا مثلا 40 بيكسل ممكن مثلا ان انا اضيف لك خاصيه ثالثه بان انا اعمل لك هنا السيمي كولون واضيف لك الخاصيه الثالثه زي ما انا عاوز ضيف بقى ثالثه رابعه 10ش اللي انت عاوزه تعال دلوقتي لما نشوف النتيجه لو انا عملت لك هنا ريلود تم اضافه عندك الفونت سايز بقيمه 40 بيكسل هنبدا ان شاء الله سكشن جديد في الدوره دي بعنوان السلكت لازم تفهم ان في اثنين سكشن في الدوره دي بعنوان السلكتور واحد هو اللي بنتكلم عليه النهارده وفي واحد تاني ادفانس شويه هتلاقيه موجود في نص الكورس واحد هيقول لي طب ايه الفرق ما بين ده وما بين ده بص يا معلم السلكتور ده بحر كبير جدا جدا في معلومات في السلكتور دي معلومات اساسيه المعلومات دي انت مش هتعرف تشتغل في السي اس اس غير لما تعرفها علشان كده بنبدا بها وهي اللي بنتكلم عليها النهارده وفي معلومات تانيه ادفانسد معلومات متقدمه معلومات هيكون صعب عليك جدا ان انت تعرفها في الاول ولكن هي ضروريه جدا علشان كده حطيناها في نص الكورس امشي معاه بالترتيب وانت ان شاء الله مش هتتلبس لما ندخل في محتوى الدرس بتاعنا دلوقتي افترض ان انت عندك اي عنصر هنا في البادي اي عنصر تتخيله في بالك وليكن مثلا الاتش ت الاتش 1 البراجراف ايا يكن انا هعمل لك هنا اتش 2 وهكتب لك فيه هنا اي كلمه للتوضيح بس مش اكتر وهعمل لك هنا براجراف وهكتب لك فيه هنا ذ از ا بارج راف تمام برض للتوضيح بس مش اكترر فانا دلوقتي عندي هنا اتش ت وعندي هنا براجراف عاوز دلوقتي ان انا اختار اي عنصر فيهم وابدا دلوقتي ان انا اضيف ليه تنسيقات وليكن مثلا الاتش ت هنعمل ايه هنروح عندنا في السي اس اس وهنعمل عندنا في السلكتور اتش 2 هنبدا ان احنا نختار العنصر بنختاره من خلال اسم التاج بتاعه تمام طيب وبعد كده بتبدا ان انت تضيف عليه التنسيق اللي انت عاوزه وليكن مثلا هضيف له دلوقتي اللون الاحمر طيب انا دلوقتي لو كنت محتاج ان انا اضيف اللون الاحمر ده للبرجراف هبدا دلوقتي ان انا اكتب عندي هنا في السلكتور البي تمام فلو عملت لك هنا ريلود هيتم اضافه اللون الاحمر للبراجراف طيب دلوقتي لو انا عاوز اضيف اللون الاحمر ده للاثنين مع بعض للبراجراف والاتش 2 هعمل ايه واحد دلوقتي هيقول لي تعال هنا واكتب عندك هنا الاتش 2 وابدا ان انت ضيف له نفس اللون اللي هو اللون الاحمر بالشكل ده هقول لك تمام ده صح ولكن مش الاصح الاصح ان انا اجيل لك هنا واقول لك بص يا معلم انا دلوقتي عملت لك الخاصيه دي وهي اللون الاحمر واضفت عندك هنا للبراجراف هتقول لي تمام هقول لك طيب تعال كمان وضيفه للاتش 2 كمان ضيفه للاتش 2 دي هي علامه الكوما علامه الكوما دي معناها ان الخاصيه هنا او مجموعه الخصائص اللي انت بتكتبها هنا هيتم اضافتها للبراجراف و وادي هي الكومه والاتش 2 فدلوقتي انا لو عملتلك هنا ريلود هيتم اضافته للاتش 2 والبراجراف ولو انت عندك هنا اي حاجه في الدنيا وليكن مثلا ديف والدف ده مكتوب فيه هنا اي كلمه وليكن هلو اي حاجه يعني مش مشكله انا دلوقتي ممكن برض ان انا اخليلك الديف ده يتم اضافه ليه نفس التنسيق من خلال ان انا اعمللك هنا كوه واكتبلك هنا ديف و اعمللك هنا ريلود هيتم اضافه التنسيق ده للديف ولو انت عندك هنا 1000 ديف وعندك هنا 1 اتش 2 وعندك هنا 1 براجراف هيتم اضافه التنسيق ده لكل العناصر الموجوده لان انت هنا بتقوله روح ليكل البرجرافات وكل الاتش 2 وكل الدفات اللي موجوده في الموقع وضيف ليهم التنسيق ده طيب ده اول نوع من السلكتور وهو ان انت بتختار العنصر من خلال اسم التاج بتاعه طيب انا عندي نوع تاني من السلكتور وهو ان انت بتختار العنصر من خلال الكلاس ومن خلال اي دي تعال دلوقتي لما نشوف ازاي بنعمل كده هنفترض دلوقتي ان انت عندك هنا برجراف مكتوب فيه مثلا تست 1 وعندك برجراف تاني مكتوب فيه تست ت وعندك برجراف تالت مكتوب فيه تست لاه واخيرا عندك برجراف رابع مكتوب في تست 4 دلوقتي انا عاوز مثلا ان انا الون البرجراف رقم 3 باللون الاحمر مش عاوز الون كلهم عاوز الون ده بس هنا انا هعمل ايه دلوقتي انا لو رحتلك هنا في السي اس اس وبدات ان انا اختار لك هنا البراجراف واقول لك دلوقتي لونه لي باللون الاحمر هنا انا بعمل غلطه انا قلت لك قبل كده ان انت لما بتختار اسم التاج ده معناه ان انت بتروح لكل العناصر اللي واخده عندك اسم التاج ده وبتبدا ان انت تضيف ليها التنسيق اللي انت بتكتبه عندك هنا فدلوقتي انا لو عملت لك هنا ريلود هيتم اضافه اللون الاحمر لكل البرجرافات اللي موجوده في الموقع بتاعك ولكن مش ده اللي انا عاوزه انا عاوز دلوقتي الون البراج جراف رقم لاه بس فهنا انا مش هينفع اعتمد على التاج ك سلكتور امال هنعمل ايه هنعتمد على حاجه تانيه اسمها الكلاس والاي دي هنبدا دلوقتي بالكلاس انا دلوقتي عندي مشكله وهي ان انا مش هينفع اكتب اسم التاج لان كل العناصر اللي عندي واخده اسم التاج فهبط ان انا اميز العنصر اللي انا عاوز اضيف ليه التنسيق فهاج لك هنا وابدا ان انا اميزه من خلال ان انا بديله اتربيوت اسمه راس الاتربيوت ده اللي انت بتكتبه فيه ببساطه هو اسم الاسم ده بيميز العنصر اللي انت عاوزه بيكون حاجه كده عامله زي الرقم القومي حاجه بتميز العنصر ده فهنا انت متاح ان انت تكتب اللي انت عاوزه اكتب تست اكتب حماده اكتب الاسم اللي انت عاوزه الاسم ده هو اللي من خلاله انت بتنادي على العنصر فبدل ما تنادي على البراجراف ويجيب لك كل البراجرافات لا انت بتنادي على الاسم اللي انت بتكتبه عندك هنا وبكده انت بتميز العنصر ده طيب ازاي بعمل كده بص يا معلم انت لما بتنادي على تاج فانت بتكتب اسم التاج بشكل مباشر سواء البي سواء الاتش 1 ايا يكن ولكن في الكلاس انت ما ينفعش تكتب اسم الكلاس على طول امال بتعمل ايه بتكتب عندك دوت دوت ببساطه لو انت وقفت عليها هيقول لك ان ده كلاس المنت اللي انت بتكتبه ده هو اسم كلاس فبتكون لو انت كنت كاتب هنا اكس يبقى هتروح وتكتب عندك هنا اكس اللي انت بتكتبه عندك هنا هو اللي انت بتروح وبتنادي عليه فهتي عندك هنا وتقول لي دلوقتي العنصر اللي واخد عندك الكلاس اللي اسمه تيست ضيف ليه اللون الاحمر فدلوقتي انا لو عملت لك هنا ريلود هيروح دلوقتي ويدور على اي عنصر في الصفحه بتاعتك واخد عندك الكلاس ده ويبدا ان هو يضيف له اللون الاحمر الكلام ده معناه ان اي عنصر واخد عندك الكلاس ده هيتم اضافه ليه اللون الاحمر يعني انا لو خدت الكلاس ده كابي واضفت عندك عندك هنا هيتم برض اضافه اللون الاحمر للعنصر ده والعنصر ده فدلوقتي انا لو عملت لك هنا ريلود تم اضافه اللون الاحمر لعنصرين خلي بالك ان اسم الكلاس ده تقدر ان انت تضيفه لاي عنصر انت عاوزه سواء العنصر ده بارجراف او حتى اي حاجه تانيه يعني ممكن يكون ديف ممكن يكون اتش 1 يعني لو انت عندك هنا مثلا اتش 1 مكتوب فيه تايتل تعال كده والاتش 1 ده انت جيت هنا واديت له كلاس مثلا اسمه تست نفس الكلاس بالظبط فلون الاحمر هيتم اضافته لعنصر ده طيب لو سمحت ركز معايا لان الكلام اللي هقوله ده مهم جدا جدا دلوقتي انا بقول لك ان اي عنصر سواء هو اتش1 اتش 2 براجراف ديف ايا يكن لو العنصر ده واخد عندك الكلاس اللي اسمه تست هيتم اضافه ليه التنسيقات اللي انت عملتها طيب افرد انت مش عاوز كده افرد انت عاوز البراجرافات بس اللي واخده عندك الكلاس ده هي اللي يتم اضافه له التنسيقات يعني مش اي عنصر ثاني غير البرجرافات حتى لو العنصر الثاني ده واخد نفس الكلاس يعني حتى لو الاتش 1 واخد نفس الكلاس فلا برده مش هيتم اضافه للتنسيقات انت عاوز التنسيقات يتم اضافتها للبراجرافات بس اللي واخده عندك الكلاس ده عاوز الموضوع يكون محدد معاك اكتر ولو انت مش فاهم تابع معايا وفهمك دلوقتي انا اقصد ايه طيب ازاي بنعمل كده هتروح عندك هنا وقبل ما تكتب عندك اسم الكلاس هتيجي عندك قبله وتكتب عندك بي واوعى تعمل عندك الاسم سبيس الابيس ده حاجه تانيه هنتكلم عليها ان شاء الله في المستقبل بتكتب عندك بي او العنصر اللي انت عاوزه وبتقول لي دلوقتي انا محتاج ان العنصر ده اللي واخد الكلاس ده يتم اضافه ليه اللون الاحمر الكلام ده معناه ايه لو انا وقفت لك عليه هتلاقي شارح لك نفسه بالظبط هيقول لك دلوقتي ان التاثير اللي انت عملته ده بيروح عندك او بيتم اضافته لكل البرجرافات فقط اللي واخده عندك الكلاس اللي اسمه تست يعني هيروح عندك دلوقتي في البرجرافات ويدور في البرجرافات على الكلاس اللي اسمه تست ويتم اضافه ليها التاثير ده فلو عملتلك هنا ريلود تم اضافه اللون الاحمر للاثنين دول بس وصلت يا شباب انا ممكن اكتب لك هنا الاتش 1 ودي معناها ان هو يروح عندك لكل العناصر الاتش 1 اللي واخدين بس التست الكلاس اللي اسمه تست لو عملتلك هنا ريلود هيتم اضافه التاثير ده للاتش 1 اللي واخدين عندك الكلاس اللي اسمه تست وصلت يا شباب اتمنى تكون وصلت طيب ده بالنسبه للكلاس نفس الفكره بالظبط ولكن في الاي دي الاي دي انت بدل ما بتكتب كلاس بتكتب عندك اي دي يعني هي هي نفس الفكره تمام تعال حتى كده لما نكتبها من الاول انا دلوقتي عندي هنا برجراف واخد عندك هنا تست 1 وعندك برجراف تاني تست 2 وبرجراف تالت تست 3 هكتفي بدول بس انا دلوقتي محتاج ان انا اضيف عندك اللون الاحمر للبرجراف التاني بس فانا ممكن استخدم دم عندك الكلاس او ممكن استخدم عندك الاي دي الاي دي انت بتكتب فيه الاسم اللي انت عاوزه اكتب تست اكتب حماده نفس الموضوع بالظبط طيب انا دلوقتي محتاج ان انا اناد على العنصر ده من خلال الاي دي فبروح عندك هنا وبدل ما بكتب عندك دوت دوت دي انا بكتبها علشان انادي على كلاس طب لو انا عاوز انادي على اي دي فبكت عندك هاش هاش دي ببساطه لو انا وقفت لك عليها هيقوللك دلوقتي ان انت بتنادي على اي دي تمام فهيك تب لك هنا اسم الاي دي ايا يكن طبعا الاسم اللي انت هتكتبه وابدا دلوقتي اضيف لي التاثير اللي انت عاوزه وليكن مثلا اللون الازرق تمام فهعمل لك هنا ريلود هيتم اضافه التاثير ل برجراف ده وبرضو نفس الفكره ممكن دلوقتي احدد لك الموضوع اكتر يعني ممكن اقول لك روح لي للبرجراف اللي واخد عندك الاي دي اللي اسمه تيست نفس الفكره ونفس الموضوع اللي اتكلمنا عنه من شويه فلو عملت لك ريلود هيتم اضافه التاثير ده للبرجراف بس اللي واخد عندك الاي دي ده نفس الفكره بالظبط تمام طيب اخيرا عندنا حاجه ثانيه اسمها علامه النجمه علامه النجمه دي ببساطه معناها ان انت بتقول له روح لي لاي عنصر موجود عندي في صفحه الاتش تي ام ال وضيف لي التاثيرات اللي انا هكتبها هنا فممكن اكتب لك هنا مثلا اللون الاحمر تمام اللي انا كتبته ده معناه ببساطه ان انت هتروح عندك لكل العناصر اللي في الاتش تي ام ال وهتضيف لهم اللون الاحمر سواء العناصر دي هتكون براجراف هتكون مثلا اتش 1 تمام تعال كده لما نكتب هنا تايتل سواء مثلا هتكون ديف برضو ايا يكن اللي موجود فيه ا يكن الكلمه دلوقتي علامه النجمه دي هتضيف لك التاثير ده لكل العناصر دي فلو عملتلك هنا ريلود ضفتها لك لكل العناصر دي سواء بقى ديف سواء بقى سبان تمام ايا يكن برض الاسبان هيتم اضافه ليها برضو نفس التاثير ده تمام دلوقتي انا عملتلك هنا سكشن وجوه السكشن هعملك هنا ديف وجوه الديف هعملك هنا برجراف هكتبلك فيه اي كلمه دلوقتي ايه علاقه السكشن بالديف بال براجراف افهم بقى الحته دي كويس جدا دلوقتي الديف والبراجراف جوه السكشن اذا الف والبراجراف هما من سلاله السكشن السكشن هو الاب الكبير لكل الاثنين دول او لاي عنصر لو في عندك مليون عنصر جوه السكشن فكل العناصر دي هي من سلاله السكشن خلي بالك انا بقول لك من سلالته طيب مين الابن المباشر للسكش الابن المباشر هو الديف مش دول هو الديف والبرجراف كلهم من سلالته ولكن ابناءه هم الديف والموضوع مش صعب هو نفس فكره الجد والابن والحفيد فالابن والحفيد هم من سلاله الجد ولكن من الابن المبا الابن المباشر او الدايركت تشايلد هو الابن لان هو اقرب حد للجد نفس القصه دي بالظبط موجود عندنا هنا طيب تعال دلوقتي لما نبدا ندخل عندنا في السلكتور انا هعملك هنا ديف وهعملك جوه الديف ده براجراف وجوه البراجراف هكتبلك هنا كلمه والكلمه التانيه هحطها لك مثلا في استرونج ممكن تحطها انت في سترونج تحطها في سبان تحطها في اللي انت عاوزه انا بس بفهمك فكره الاباء والابناء والسلاله وكل الكلام ده هكتب لك هنا اي كلمه مش مشكله المهم ان الكلمه دي جوه السترونج يبقى البراجراف والاسترونج الاتنين من سلاله الديف ولكن الابن المباشر هو البراجراف تمام طيب جيتلك بقى هنا وقلتلك انا هعمل لك هنا اتش 2 جواها نفس الكلمه ركز بقى وهعمل لك هنا برض سترونج وهحط لك فيها نفس الكلمه يعني الفرق ما بين السطر ده وال السطر ده ان هنا برجراف وهنا اتش ت جيتلك انا بقى قلتلك روحلي في السي اس اس وضيف لي دلوقتي تنسيقات للاسترونج ده بس مش كل الاسترونج اللي موجوده عندك في الموقع لسترونج ده بس بدون ما تستخدم الكلاس والاي دي هنا انت هتستخدم فكره السلاله علشان توصل عندك للاسترونج ده هتروح عندك للاب الكبير اللي هو الديف هكتب لك هنا ديف وهقول لك جوه الف ده انت عندك بارجراف وجواه انت عندك سترونج انت بتعمل مسافه اهو مسافه ما بين كل تاج والتاني وجيلك هنا وضيف لك الخاصيه اللي انا عاوزها فضفت لك هنا كر قيمته عندك ريد فلو انا جيتلك هنا وعملت لك دلوقتي ريلود مين اللي تلون عندك السترونج اهو السترونج ده اللي جوه البراجراف الفكره اللي انت عملتها دي هي فكره السلاله دخلت عندك على الاب الكبير وبعد كده الابن وبعد كده الحف فيد او السليل طيب لو انت دلوقتي عاوز توصل عندك لسترونج ده هتيجي عندك هنا وهتقولي لو سمحت انا عندي هنا ديف جوه الف ده اتش 2 وجوه الاتش ت عندك هنا سترونج تمام هجيلك هنا واضيف لك دلوقتي كر ريد مثلا هعملك هنا ريلود فانت دلوقتي وصلت عندك لمين للسترونج ده خلي بالك انت مش لازم تكتب الف يعني ممكن تكتبها اش 2 وجو الاتش ت سترونج لان بالفعل الاتش 2 جواها سترونج برضو هيوصلك لنفس العنصر وممكن ان انت تكتب عندك ديف تعال كده ممكن ان انت تكتب عندك ديف وبعده تكتب سترونج لان السترونج ده هو سليل الديف هو واحد من ضمن سلالته هعمل لك هنا ريلود ف بص بقى اللي حصل بقى قاللك ان السترونج اللي من سليل الديف هو عندك اتنين لان السترونج ده هو من سليل الديف والاسترونج التاني برضو سليل من سليل الديف لكن لو انت كنت تعامل سترونج بره خالص بره الديف عندك هنا سترونج موجود في اي كلمه اي كلمه تست مثلا فاسترون ده مش هيتم اضافه للتنسيق فلو انا عملت لك هنا ريلود ما حصلش ف اي حاجه لان السترونج ده مش من سليل الديف طيب ليه انت بتقول سليل ما بتقولش ابن لان الابن ليها طريقه تانيه في السلكتور لو انا دلوقتي عاوز اوصل للابن هم مين الابناء للديف ببساطه الابناء عندك هم البي والاتش ت لان هم الاقرب عندك للديف وهو لك دلوقتي الموضوع ده بمثال تاني ما تقلقش فلو انا دلوقتي عاوز اوصل للابن المباشر بجي لك هنا شيل الكلام ده وهكتب لك هنا ديف ثم علامه الاكبر من ثم البي علامه الاكبر من معناها ان لازم البي تكون الابن المباشر للديف لما انت كنت بتعمل سبيس بس كانت البي لازم تكون من سلالته ولكن مش شرط تكون الابن المباشر هنا السلاله فقط لكن لما بتعمل علامه الاض اكبر من انت هنا بتشترط ان البي لازم تكون الابن المباشر للديف طيب مين هم الابناء المباشرين للديف هما البي والاتش ت فلو انا جيت لك هنا وقلت لك دلوقتي جيب لي البي اللي هو الابن المباشر للديف واديله مثلا التنسيق ده ايا يكن التنسيق طبعا وجيت لك هنا وعملت لك دلوقتي ريلود فتم اضافه التنسيق ده للبي اللي هو الابن المباشر للديف كذلك برض الاتش 2 هو ابن مباشر فلو عملتلك دلوقتي ريلود وصله عادي جدا ولكن السترونج لو كتبتلك هنا السترونج السترونج هو سليل الديف لكن مش ابن مباشر للديف فلو عملتلك هنا ريلود قاللك مافيش الكلام ده مافيش عندك هنا سترونج يعتبر ابن مباشر للديف العلامه دي معناها ابن مباشر وانت ما عندكش هنا تعال كده انت ما عندكش هنا سترونج كابن مباشر ممكن اجيلك هنا واعملك دلوقتي سترونج كابن مباشر اكتبلك فيه كلمه سترونج مثلا على سبيل التجربه مش اكتر ودلوقتي الاسترونج دي هي ابن مباشر للديف اهو ابن مباشر فكده هتشتغل معاك تمام لو عملتلك هنا ريلود سترونج دي اشتغلت معاك لانها دلوقتي هي ابن مباشر للديف طيب تعال كده لما نطبق الموضوع ده بمثال عملي جميل جدا لو انا جيت لك هنا هعمل لك هنا ديف وجوه الديف هعمل لك هنا قائمه تعال كده نوسع بس الدنيا هعمل لك هنا قائمه يو ال وجوه اليو ال هعمل لك هنا ال اي وهكتب لك فيها ايتم 1 وهعمل لك هنا ايتم 2 وهعمل لك هنا ايتم 3 يبقى دلوقتي كل دول ههم من سلاله الديف اليو ال وكل الال اي ههم من سلاله الديف لكن مين الابن المباشر الابن المباشر هو اليو ال طيب تعال دلوقتي لما نوصل للعناصر دي من خلال الدي سننت سلكتور وكمان من خلال طريقه الدايركت تشايلد تمام طيب تعال كده لما نعمل عندنا هنا ريلود لو انا جيت لك هنا في المكان ده وقلتلك هنستخدم طريقه السلاله او النتن سلكتور فانا دلوقتي عاوز اوصل للثلاث عناصر دول فهقولك انا عندي الديف والدف جواها يو ال واليو ال جواها ال اي لو انا جيت لك هنا وخليت لونهم احمر فكلهم هيتلون عندك باللون الاحمر بالشكل ده دي طريقه السنن سلكتور الطريقه دي انت ممكن تستخدم فيها تعال كده ممكن تستخدم فيها اليو ال ال اي على طول وممكن ان انت تجيلي هنا وتقوللي هستخدم عندك الديف وال اي لان الل اي هي من سلاله الديف الل اي من سلاله الديف فلو انا عملتلك ريلود شغاله معاك كمان برضو ممكن تستخدم في الطريقه دي الكلاس والاي دي يعني ممكن اجيلك هنا واعملك دلوقتي كلاس سميه مثلا كونتينر وهديل ده مثلا كلاس ليست مثلا انا بس بجرب معاك علشان تكون فاهم القصه مش اكتر وهجيلك هنا في اللال اي اول واحد بس هديله اي دي هسميه مثلا مثلا ايتم 1 اي اسم في الدنيا انا ممكن دلوقتي اوصلك للعنصر ده بالتحديد عن طريقه السلاله اللي احنا استخدمناها دلوقتي فبدل ما بنكتب عندنا اسم التاج ممكن نكتب عندنا اسم الكلاس والاي دي فممكن اجيلك هنا واكتبلك هنا دوت كونتينر ليه كتبنا دوت لان ده كلاس تمام طيب هقولك دلوقتي جوه الكونتينر انت عندك هنا ليست او عندك عنصر واخد عندك كلاس ليست اللي هو مين اللي هو اليو ال طيب انا دلوقتي عاوز اوصل للعنصر ده هجيلك هنا واقوللك ان هو واخد اي دي اسمه ايتم 1 الاي دي بنكتب فيها هاش فلو انا جيت لك هنا وقلتلك دلوقتي هاش ايتم 1 لو سمحت خلي لونه هو باللون الاحمر فلو انا عملت لك هنا ريلود وصلت دلوقتي للعنصر ده بنجاح و 100 م دي طريقه السنن سلكتور تعال بقى دلوقتي لما نتكلم على طريقه الدايركت تشايلد في الطريقه دي انا بكتب هنا ديف اللي هو الاب اللي هو البيرنت من الابن المباشر اليو ال اوعى تكتب الل اي يعني اوعى تجيي هنا وتقوللي دلوقتي ان الل اي هي الابن المباشر للديف لا الابن المباشر هو مين الابن المباشر هو اليو ال طيب كمان برض الابن المباشر لليو ال هو ال اي الطريقه دي هتلون لك كلهم لو انت طبعا اديت عندك هنا لون فلو عملتلك هنا ريلود تلونه كلهم لان الل اي هو الابن المباشر لليو ال هو الابن المباشر للديف كمان برضو انت ممكن تستخدم عندك الكلاس والاي دي فممكن اجيلك هنا واقوللك دوت كونتينر هتلاقي الابن المباشر ليه اللي هو واخد كلاس اسمه ليست فكتب لك هنا دوت ليست وهقولك دلوقتي هات للابن المباشر ليست اللي واخد عندك اي دي اسمه ايتم 1 فه جيلك هنا واقوللك هاتلي الابن المباشر يبقى علامه الاكبر من ثم كان واخد عندك اي دي يبقى هاش ايتم 1 وبكده لو عملتلك ريلود وصلت عندك ل العنصر ده بطريقه الدايركت تشايلد هنبدا ان شاء الله سكشن جديد او موضوع جديد في السي اس اس بعنوان البوكس موديل صدقني لما اقوللك ان البوكس موديل ده واحد من اهم الموضوعات اللي انت هتتعلم في السي اس اس ولو انت فهمته صدقني هيكون عندك اساس قوي جدا هتقدر ان انت تبني عليه كل شغلك اللي هيجي ان شاء الله بعد كده فلو سمحت ركز معايا ولو انت عندك اي حاجه مشتته دماغك دلوقتي يا اما تاجل الحاجه دي يا اما تاجل الفيديو ده نفسه لحد ما دماغك تكون صافيه علشان تقدر ان انت تفهم كل كلمه هتتقال ان شاء الله النهارده فتعالى دلوقتي لما نبدا نتعلم مع بعض يعني ايه بوكس موديل لازم تفهم ان كل عناصر الاتش تي ام ال سواء هي اتش 1 بارجراف اتش 2 ديف ايا يكن العنصر ده فالبراز بيشوفه على ان هو بوكس على ان هو صندوق صندوق بيكون جواه المحتوى وحواف المحتوى حواف المحتوى دي مش شرط انها تظهر لك ولكن هي البراوزر بيحطها علشان يقدر ان هو يظبط لك العنصر ده ويعرضه لك طيب يعني ايه الكلام ده تعالى دلوقتي لما نبدا ان احنا نشوفه مع بعض هنعمل عندنا هنا اتش1 وهنكتب جواه هنا اي كلمه وهسالك واقول لك دلوقتي ايه اللي ظهر قدامك هنا في البراوزر هتقول لي والله اللي ظهر قدامي هنا هو الكونتنت هو المحتوى اللي انا كتبته عندي هنا جوه الاتش 1 هقول لك تمام بالفعل اللي ظهر قدامك هو الكونتنت بس ولكن في حاجات ثانيه البراوزر حطها لك انت مش شايفها قدامك طيب ازاي اشوف الكلام ده هقول لك تعالى دلوقتي لما نشوف ايه المكونات بتاعه الاتش 1 علشان تعرف مكونات اي عنصر بتيجي عندك هنا على العنصر صر ده كليك يمين ثم انسبكت وبتروح عندك على العنصر وبتبدا ان انت تنزل عندك تحت هنا في المكان ده شايف الصندوق اللي قدامك ده او الصناديق اللي قدامك دي دي اسمها البوكس موديل او مكونات العنصر اللي انت واقف عليه هنا في المكان ده هتلاقي اصغر صندوق عندك هنا هو الكونتنت هو ابعاد المحتوى بتاعك اللي انت كتبته عندك جوه الاتش 1 المحتوى ده هو اصغر صندوق بيتم عرضه عندك في البراوزر وبيجي عندك صندوق بعده اسمه البادنجال دين ده هي مساحه داخليه البراوزر بيبدا ان هو يضيفها لك ليه العنصر ده وهتلاقي عندك صندوق هنا اسمه البوردر او الحواف بتاعه العنصر ده وعندك صندوق اخير اسمه المارجن او الحواف الخارجيه اللي بتحدد العنصر بتاعك واللي بتفصل لك عن اي عنصر ثاني في الصفحه بتاعتك هتقول لي يا عبد الرحمن انا مش فاهم ولا كلمه هقول لك يا عم ولا يهمك تعالى دلوقتي لما نشرح لك الموضوع المضوع ده بشكل نظري وبعد كده هنشرح لك ان شاء الله برض تاني بشكل عمليه دلوقتي انا لو عامل عندي هنا براجراف وكاتب دلوقتي جوه البراجراف ده مثلا كلمه هلو فالكلمه دي بتتعرض عندك في البراوزر بالشكل ده كلمه عاديه جدا او محتوى عادي جدا المحتوى ده البراوزر بيضيف لك عليه حاجه اسمها بوردر او حواف او سمك للعنصر ده اللي بيفصلوا عن الكونتنت او الحاجه اللي بتفصل الكونتنت عن البوردر حاجه كده اسمها المساحه الداخليه او البادنجكي انت عندك هنا الكونتنت وبعديه المساحه الداخليه اللي هي البادنجان البوردر وبعدهم بيكون في عندك حاجه اسمها المساحه الخارجيه اللي هي المارجن المارجن ده اللي بيفصل لك اي عنصر عن اي عنصر تاني وتقدر ان انت تتحكم عندك في كل العناصر اللي انا قلتها لك دي سواء المارجن او البادنجال الحاجات دي تقدر ان انت تتحكم فيهم وتقدر ان انت تعدل وتعال دلوقتي لما نب نبدا ان احنا نعدلها ونفهم بشكل اوضح انا عارف ان انت ما فهمتش الكلام اللي فات بشكل كويس فتعالى دلوقتي لما نفهمه بشكل ابسط سد الموضوع سهل جدا وهتشوف بنفسك اول خاصيه هنتكلم عليها هي البوردر البوردر هو حدود او سمك العنصر بتاعك تقدر ان انت تتخيل الموضوع ده بحدود البرواز لو انت عندك برواز او لوحه او صوره فبيكون فيها حدود كده او برواز او حاجه كده بتحد الصوره بتاعتك دي اسمها بورد طيب ازاي دلوقتي ان انا اضيف عندي البوردر ده للاتش 1 طيب علشان تعمل كده بتروح عندك في السي اس اس وبتختار عندك العنصر اللي هو الاتش 1 وبتقول لي انا عاوز ان انا اتحكم في البوردر فبتكون وبعد كده بتحدد عندك نوع البوردر فانا هحدد دلوقتي ان نوع البوردر ده هو سوليد ولو عملت لك هنا ريلود هتلاقي دلوقتي ان الاتش 1 اصبح حواليها كده حدود او خط عندك باللون الاسود الخط ده اسمه البوردر ممكن ان انت تتحكم عندك في سمك البوردر ممكن ان انا اجي لك هنا وخلي سمكه مثلا واحد بيكسل فلو عملت لك هنا ريلود هتلاقي دلوقتي ان سمكه واحد بيكسل ممكن اخليه لك مثلا 10 بيكسل فاصبح عندك سمك البوردر 10 بيكسل وتقدر طبعا ان انت تتحكم عندك في السمك بتاع البوردر زي ما انت عاوز خلي بالك ان انا بعمل عندك هنا سبيس انا لو ما عملت لكش السبيس دي فكل الكلام ده هيبوظ عندك وما فيش حاجه هتظهر عندك بالشكل ده تمام طيب كمان برده تقدر ان انت تتحكم عندك في لون البوردر ممكن ان انا اخليه عندك باللون الاحمر اللون الاسود اللون الاخضر زي ما انا عاوز فانا بعمل هنا مسافه وبكتب عندي هنا اللون ممكن اخليه لك مثلا باللون الازرق بالشكل ده او ممكن ان انا مثلا اختار عندي مثلا لون عن طريق الهيكسا ديسيمال بالشكل ده وهيتم اختيار عندي عندي اللون اللي انا اخترته تمام خلي بالك ان ما بيفرقش عندك الترتيب يعني مش لازم تكتب عندك هنا سوليد و1 بيكسل واللون ممكن ان انا مثلا اجيلك هنا واختار اللون في الاول تمام وبعد كده اختار عندي مثلا السمك 10 بيكسل وبعد كده اختار عندي النوع اللي هو السوليد فلو عملت لك ريلود مافيش اي مشاكل واشتغلت عادي جدا خلي بالك ان انت ممكن ان انت تضيف عندك البوردر من فوق بس او من تحت بس او من اليمين بس او من الشمال بس بتعمل كده بان انت بتيجي عندك هنا على بوردر وبتضيفي عندك الداش وبتحدد الاتجاه بتاع البوردر سواء بقى من التوب او من البوتوم او من الليفتنانت هنا واقول لك دلوقتي انا محتاج ان الخصائص دي تكون في البوردر توب فقط فلو عملتلك هنا ريلود هيكون عندك البوردر توب فقط اللي متضاف لي الخصائص اللي انت كتبتها دي او ممكن ان انت تضيفه عندك من تحت بان انت تكتب عندك هنا بوردر داش بوتوم يعني من تحت فلو عملتلك هنا ريلود هتلاقي دلوقتي ان البوردر اصبح من تحت بس ممكن ان انت تخليه عندك من الشمال الفت او الرايت نفس الفكره ونفس النظام زي ما انا قلت لك خلينا نتكلم دلوقتي في حاجه مهمه جدا انا دلوقتي كتبتلك البوردر بالشكل اللي قدامك ده في طريقه تانيه انت ممكن من خلالها ان انت تكتب البوردر ولكن انا ما بفضلها انا هقولها لك علشان بس لو انت شفتها في اي كود تبقى فاهم الكود ده وتقول والله ده عبد الرحمن شرحلي الكود ده ما سبنيش كده وخلاص تمام طيب لو انا دلوقتي وقفت لك هنا على البوردر هيقوللك دلوقتي ان البوردر ده عباره عن شورت هاند او اختصار هو شورت هاند بورتي فور سيتنج بوردر ت هو اختصار لخاصيه اسمها البوردر تس والبور ستايل والبور كر البوردر ويتس هو سمك البوردر الخاصيه اللي احنا كتبناه هنا ودي البوردر كر ودي البوردر ستايل طيب يعني ايه الكلام ده يعني ببساطه البوردر دي هي اختصار للثلاث خصائص دول يعني انا ممكن اجيل لك هنا واقول لك دلوقتي انا محتاج ان انا اضيف عندي البوردر داش ستايل البوردر ستايل دي من خلالها انت بتحدد نوع الخط بتاعك او نوع البوردر فممكن ان انت تكتب عندك سوليد او ممكن ان انت تختار عندك نوع البوردر من انواع كتيره جدا قدامك هنا هنشرح لك وهنتكلم عليها دلوقتي ولكن انا هكتب لك هنا سوليد وهاجي لك هنا وهبدا دلوقتي ان انا اختار عندي لون البوردر ف قول لك دلوقتي انا محتاج ان انا اكتب عندي بوردر داش كالر تمام وهبدا دلوقتي ان انا اختار عندي لون البوردر وهاجي لك هنا واختار عندي البوردر ويتس اللي هو سمك البوردر فهقولك مثلا انا عاوزه يكون 10 بيكسل فلو عملتلك هنا ريلود هتلاقي دلوقتي ان كل الخصائص دي انت ضفتها عندك بالشكل ده تمام ممكن ان انت تكتبها كده او ممكن ان انت تكتبها عن طريقه الشورت هاند اللي هي البوردر وتضيف الخص خس كلها على نفس السطر وده اللي انا برشح تمام طيب تعال دلوقتي لما نتكلم على انواع البوردر السوليد هو الخط المستقيم اللي قدامك ده انت ممكن ما تعملش عندك البوردر على ان هو خط انت ممكن مثلا عاوزه يكون نقط فبتكون هتلاقي دلوقتي عندك هنا نقط ممكن مثلا تختار ان هي تكون شرط مش نقط فبت اختار عندك هنا الداش اللي هي الشرط فلو عملت لك هنا ريلود اصبحت عندك الشرط بالشكل ده وعندك انواع ثانيه كتيره جدا ممكن ان انت تختارها وتجربها فعندك مثلا الدبل ده بيعمل لك خطين مع بعض بالشكل ده وعندك انواع ثانيه كتيره جدا جربها وشوفها بنفسك تمام طيب طبعا انا بفضل ان انت تكتب عندك البوردر بالشكل ده تكتب عندك بوردر كشور هاند وتضيف عندك الخصائص بالشكل ده تضيف عندك البوردر ويتس والبور كر والبور تايل على نفس السطر تمام وبكده بتكون انت فهمت خاصيه البوردر طيب انت دلوقتي مش ملاحظ ان الشكل اللي قدامك ده هو صندوق طيب هل ينفع دلوقتي ان انا اتحكم في ابعاد الصندوق ده زي الطول والعرض انت عندك دلوقتي ان عرض الصندوق ده هو عرض البراوزر لو انت فتحت دلوقتي البراوزر هتلاقي دلوقتي ان عرض الصندوق ده واخد عندك عرض البراوزر بالكامل سواء بقى البراوزر ده كبير او صغير هو كده كده الصندوق ده واخد عندك عرض البراوزر بالكامل والطول عندك هو طول الكونتنت طول المحتوى اللي جوه الصندوق ولكن هل ينفع دلوقتي ان انا اتحكم عندي في الطول والعرض للصندوق ده زي ما انا عاوز هقول لك ايوه ينفع ان انت تعمل كده هنبدا عندنا بالتحكم في العرض وده انت بتعمله من خلال خاصيه الويتس الويتس اللي هو عرض الصندوق ده فاقول لك انا محتاج دلوقتي ان عرض الصندوق ده مثلا يكون 120 بيكسل فلو جيت لك هنا وكتبت لك 120 بيكسل فلو عملت قلت لك هنا ريلود هتلاقي دلوقتي ان عرض الصندوق ده اصبح عندك 120 بيكسل بس ممكن ان انا اخليها مثلا 220 الرقم اللي انت عاوزه فهيكون عندك 220 بيكسل اتحكم فيها زي ما انت عاوز ممكن كمان تستخدم اي وحده قياس ثانيه غير البكسل وطبعا هيكون في درس ان شاء الله عن وحدات القياس وهنعرف ان احنا عندنا البكسل وهنعرف ان احنا عندنا السنتيمتر وهنعرف ان احنا عندنا الانش وهنعرف كمان ان احنا عندنا النسبه المئويه ولكن كل ده في وقته ان شاء الله مش عاوزين دلوقتي ان احنا نسبق الاحداث او نتفرع من الدرس بتاعنا تمام هنسيب دي مثلا على 160 بيكسل تمام يبقى عرض البوكس اللي قدامنا ده هو 160 بيكسل كمان برض انت ممكن تتحكم عندك في الطول او الهايت وده انت بتعمله من خلال خاصيه الهايت وبتقول لي انا دلوقتي محتاج ان البوكس ده يكون مثلا الطول بتاعه 100 بيكسل فبتكون مش صعب على فكره ف لو عملت لك هنا ريلود هتلاقي دلوقتي ان طول البوكس ده 100 بيكسل وبراحتك هنا بقى خليها 200 300 اللي انت عاوزه طيب انا هخليها دلوقتي مثلا 50 بيكسل وهنبدا دلوقتي ندخل في المساحات الداخليه والمساحات الخارجيه انت دلوقتي عندك حاجه اسمها بادينج بادين دي اللي هي المساحه الداخليه اللي بتفصل عندك الكونتنت اللي هو الكلام اللي قدامك ده عن البوردر عن حدود الصندوق في مساحه كده في النص المساحه دي اسمها البادنجان دي انت ممكن ان انت تتحكم فيها وتزودها وتقللها وتعمل فيها اللي انت عاوزه فلو كتبت لك هنا 10 بكسل ده معناها ان انا عاوز المساحه الداخليه اللي ما بين البوردر والمحتوى المحتوى اللي جوه ده تكون 10 بيكسل فلو عملت لك ريلود هتكون عندك 10 بيكسل من كل الاتجاهات من فوق ومن اليمين ومن تحت ومن الشمال طيب دلوقتي انا ممكن مثلا اخليها 100 بكسل فهتكون عندك 100 بيكسل من كل الاتجاهات من فوق ومن اليمين ومن تحت ومن الشمال طيب افرد دلوقتي انا عاوز مثلا يكون عندي بادينج من فوق بس فهنا هكتب لك بادنج داش توب فلو عملتلك هنا ريلود هيكون عندك دلوقتي البادنجكي انت عاوزها مثلا من الرايت ف بتتكتب عندك هنا بادين داش رايت وبتكتب عندك القيمه اللي انت عاوزها فلو عملتلك هنا ريلود هيكون عن عندك الميد بيكسل من الرايت بس من اليمين بس ممكن كمان ان انت تخليها عندك من الشمال تمام بالشكل ده او ان انت تخليها عندك من تحت بالشكل ده تمام فلو عملت لك ريلود هتكون عندك هنا من تحت ركز بقى لان الحته دي مهمه جدا وبتفرق شخص فاهم عن شخص مش فاهم انا دلوقتي عندي البادنجكي في اتجاه الدين من خلال ان انا بكتب بادين وداش والاتجاه سواء بقى داش ليفت داش توب داش بوتم داش رايت زي ما شرحنا من شويه انا بقى عندي طريقه تانيه ممكن من خلالها ان انا اتحكم عندي في الاتجاهات ولكن من خلال استخدام الاختصار ده بس اللي هو كلمه بادين انا قلتلك ان انا لما بكتب عندك بادين وبكتب عندك قيمه هنا مثلا وليكن 10 بيكسل ده معناه ان ال 10 بيكسل دي هتكون عندك في الاربع اتجاهات تمام فلو عملتلك هنا ريلود هتكون عندك 10 بكسل من فوق ومن اليمين ومن تحت ومن الشمال طيب افرد انا محتاج ان الاربع اتجاهات ما يكونوش زي بعض يعني مش لازم اللي من فوق تكون 10 وهنا 10 وهنا 10 وهنا 10 لا انا مثلا محتاج ان اللي من فوق مثلا تكون 10 واللي على اليمين تكون 20 واللي من تحت تكون 100 وهكذا ولكن اكتبهم عن طريق اختصار البادنجان انا اكتب بادنج داش توب لا اكتبها على نفس السطر اعمل الكلام ده ازاي هقول لك هنا انت مش هتكتب قيمه واحده هنا انت هتكتب الاربع قيم على نفس السطر وركز انا هقولها لك دلوقتي وبعد كده هشرحها لك يعني انت لو لقيت نفسك مش فاهم في الاول فصدقني عادي انا هقولها لك وبعد كده هشرحها لك بالتفصيل اول قيمه انت بتكتبها هي قيمه التوب وتاني قيمه انت بتكتبها هي قيمه الرايت وثالث قيمه انت بتكتبها هي قيمه البوتوم ورابع قيمه انت بتكتبها هي قيمه الفت طيب انا هكتبها لك علشان الذاكره بتاعتك تكون ايه فاكره الكلام ده اول قيمه هي قيمه التوب وتاني قيمه هي قيمه الرايت وثالث قيمه هي قيمه البوتوم افتكر معايا واخر قيمه هي قيمه الفت زي ما قلتلك احنا بنمشي مع عقارب الساعه تمام طيب افهم ايه من الكلام ده تفهم من الكلام ده ان انا قلتلك ان اول قيمه هنا قيمه التوب فدلوقتي انا لو زودتها لك وجيتلك هنا هتلاقي دلوقتي ان انت بتتحكم عندك في اتجاه التوب بس ممكن ان انا ازودها لك اكتر اخليها لك مثلا 200 فهعمل لك هنا ريلود هتلاقي دلوقتي ان ال 200 دي بقت من فوق بس ممكن ان انا اخليها لك مثلا انين بكسل علشان بس تفهم اكتر فهتلاقي دلوقتي ان انت في اول قيمه هنا بتتحكم في التوب بس وتاني قيمه هي قيمه الرايت فانا ممكن مثلا علشان ابينها لك اخليها لك هنا مثلا 100 بنغير بس علشان تفهم هتلاقي دلوقتي ان في 100 بيكسل زادوا عندك من الرايت ممكن ان انا ابينها لك اكتر اخليها لك 300 فهتلاقي عندك ان الرايت بقت عندك 300 ممكن ان احنا نرجعها هنا لثلاثه علشان تكون فاهم ان تاني قيمه هي قيمه الرايت ثالث قيمه هي قيمه البوتوم اللي من تحت فانا ممكن اخليها لك 100 بيكسل علشان بس نتاكد هتكون عندك 100 بيكسل من تحت واخر قيمه هي قيمه الفت ممكن برض اخليها لك 100 بيكسل علشان تتاكد فهتلاقي ان انت في اخر قيمه هنا بتتحكم عندك في الفت تمام طيب دلوقتي الكلام ده في حاله ان انت بتكتب عندك اربع قيم بالشكل ده انا قلت لك ان انت لما بتكتب قيمه واحده بس فانت بتدمج كلهم مع بعض لكن لو كتبت عندك قيمتين لو كتبت عند عندك قيمتين انت بتدمج عندك اتجاه التوب والبوتوم مع بعض وهنا اتجاه الليت والرات مع بعض طيب يعني ايه الكلام ده يعني دلوقتي انا لو جيت لك على اول قيمه وخليتها لك 100 انا قلت لك ان انت هنا بتتحكم في الاتجاه التوب والبوتوم يعني اللي من فوق ومن تحت فدلوقتي انا لو عملت لك ريلود هتلاقي دلوقتي ان اللي من فوق ومن تحت هم اللي بيتغيروا ممكن ان انا اخليه لك هنا 50 واعمل لك هنا ريلود هتلاقي دلوقتي ان اللي من فوق ومن تحت بس هم اللي بيتغيروا لكن هنا انا بقول لك ان الفت والرات فممكن ان انا مثلا اخليها لك 100 فلو عملت لك ريلود فهتلاقي دلوقتي ان القيمه التانيه بتتحكم عندك في الفت والرات لو انا كتبت لك هنا مثلا 30 هتلاقي دلوقتي ان البوكس ده خد عندك 30 من اليسار ومن اليمين مع بعض فهمت يبقى الملخص انت لو كتبت عندك قيمه واحده فانت بتتحكم عندك في الاربع اتجاهات مع بعض لو كتبت عندك قيمتين يبقى اول قيمه هي التوب والبوتوم وتاني قيمه هي الليت والراي لو كتبت عندك اربع قيم اللي هو مثلا تعال كده لما نكتبه اربع قيم فهنا دي بتكون عندك التوب ودي الرايت ودي البوتوم ودي الفت تمام نفس الفكره دي انت تقدر ان انت تطبقها على المساحه الخارجيه او المارجن هتقول لي طب يعني ايه المارجن المارجن ده هو المساحه اللي بتفصل لك البوكس من بره من الخارج عن اي حاجه تانيه عن اي حاجه دي سواء بقى عن البراوزر او عن اي عنصر تاني موجود في الصفحه بتاعتك فانا ممكن مثلا اجيلك هنا واعمل لك مثلا عنصر تاني مثلا اتش 2 واكتب لك فيه مثلا نفس الكلمه تمام فدلوقتي انت عندك هنا عنصرين عندك دلوقتي الاتش 1 اللي هو البوكس بتاعنا وعندك هنا الاتش 2 طيب انا ممكن ان انا اجيلك هنا واتحكم في المساحه الخارجيه اللي هي المارجن المارجن نفس فكره البادنجان بدل المساحه الخارجيه بالمساحه الداخليه انا لو كتبت لك في المارجن هنا مثلا 100 بيكسل ده معناه ان انت دلوقتي هتدي انت عندك مساحه خارجيه 100 بكسل من الاربع اتجاهات من فوق ومن اليمين ومن تحت ومن الشمال خلي بالك من تحت دي انا اقصد ان هي بتفصل عندك اخر عنصر عن العنصر بتاعك من تحت تمام فصلته لك بمقدار 100 بيكسل كمان برض انت ممكن ان انت تخليها مثلا 10 بيكسل تمام هتكون عندك بالشكل ده خدت عندك 10 بكسل من كل الاتجاهات طيب انت برض ممكن ان انت تتحكم عندك في المارجن من التوب او من البوتوم او من ال او من الرايت فانا ممكن اكتبلك مارجن داش توب فدلوقتي ال 10 بيكسل دي هتكون من فوق بس تمام ممكن ان انا علشان اوريها لك اكتبلك هنا 100 تمام فلو عملتلك هنا ريلود هتكون عندك واخد لك مساحه خارجيه من فوق بس بمقدار 100 بيكسل ممكن طبعا تكتب اللي انت عاوزه تكتبها بقى ليفت تكتبها بوتوم تكتبها رايت اللي انت عاوزه نفس اللي انا قلته لك على البادج هو بالظبط اللي انا بقوله لك دلوقتي على المارجن حتى كمان في الاختصار تعالى كده في الاختصار بتاع المارجن انا لما بكتب قيمه واحده ده معناها ان انا بقول لك انا عاوز ال 100 بيكسل دي تكون في الاربع اتجاهات من فوق ومن تحت ومن اليمين ومن الشمال لكن انا ممكن ان انا اكتب عندي الاربع قيم زي ما انا كنت بكتبهم في البادنجال فممكن ان انا اكتب لك اتجاه التوب واتجاه الرايت واتجاه البوتوم واتجاه الفت بالظبط زي ما انا شرحتها لك هنا في البادنجال عملت لك هنا ل لود هتلاقي دلوقتي واخده عندك 10 بيكسل من كل الاتجاهات ممكن ان انا اجرب لك دلوقتي التوب لو عملت لك هنا ريلود هتلاقي دلوقتي ان ده اتجاه التوب وده طبعا اتجاه الرايت وده طبعا اتجاه البوتوم وده طبعا اتجاه الليت ممكن ان احنا مثلا نجرب عندنا اللفت علشان بس اوريك مش اكتر ولكن هي هي نفس الفكره كل اللي انا شرحته لك هنا هو بالظبط اللي بيتم تطبيقه على المارجن كمان برضو انت لما بتكتب عندك هنا قيمتين بس اللي هو مثلا 10 بيكسل و1 بيكسل ده معناها ان اول قيمه هي اتجاه التوب والبوتوم وتاني قيمه هي اتجاه الليت والرات نفس الكلام بالظبط تمام انت لو فهمت الدنج صدقني هتكون فهمت المارجن طبعا احنا شرحنا المارجن قبل كده واتكلمنا على المارجن ليفت والمارجن رايت والمارجن توب والمارجن بوتوم ولكن النهارده هنتكلم على مشكله بتحلها لنا المارجن والمشكله دي ببساطه هي ان اي عنصر انت بتعمله دايما كيكون على شمال المتصفح طيب هل ينفع ان انا اجيب العنصر ده في النص هل ينفع هل ينفع دلوقتي ان انا اوسن العنصر ده هقول لك انت عندك طرق كتيره جدا في السي اس اس بتوسط لك العنصر بتاعك وهنتعلم ان شاء الله كلهم ولكن واحده من الطرق دي هي المارجن وتعال دلوقتي لما نشوف مع بعض دلوقتي انا هعمل لك هنا ديف وهروح في السي اس اس هنادي دلوقتي على الديف ده وهدي له مثلا طول وليكن مثلا 200 ب اكسل وعلشان اشوف البوكس ده فانا هلون هلون مثلا باللون مثلا الاحمر علشان بس اقدر ان انا اشوف العنصر ده طيب دلوقتي انا لو اديت لك ل العنصر ده مثلا مارجن 10 بيكسل ده معناه ايه بالظبط ده ببساطه معناه ان انت بتدي للعنصر ده مارجن من كل الاتجاهات بتدي له مارجن من فوق 10 بيكسل ومن اليمين 10 بيكسل ومن تحت 10 بيكسل ومن الشمال 10 بيكسل طيب في فكره بسيطه جدا بتقوللك ان انت لو عاوز تجيب اي عنصر في النص خلي المارجن ليفت يكون قد المارجن رايت فكره بسيطه جدا ولكن هتفرق معاك جدا لو انت اتعلمتها طيب يعني ايه الكلام ده يعني ان انت لو جيت هنا وقلت لي دلوقتي ان المارجن ليفت مثلا هتكون مثلا 100 بيكسل تمام والمارجن رايت برض هتكون عندك 100 بيكسل تعال كده المارجن رايت برض هتكون 100 بيكسل ده معناها ان العنصر ده ده هيكون في النص ليه في النص لان الفراغ اللي من على الشمال قد الفراغ اللي من على اليمين بالظبط فكره بسيطه ولكن ان شاء الله هتفرق معاك جدا طيب فين المشكله المشكله بتحصل في ان انت لو لعبت في الويتس لو انا جيت لك هنا وقلت لك مثلا الويتس هياخد ا 30% تمام في الحاله دي لا مش هيجي عندك في النص بص الدنيا عندك باظت وما جاش عندك في النص ليه الكلام ده الموضوع بسيط جدا يعني لو انا جيت لك هنا على المارجن ومسحته لما انت بتدي لاي عنصر الويتس بص انت من غير ما بتدي له الويتس كده كده بيكون هو واخدها بالكامل تمام بيكون هو واخد عندك الشاشه عندك بالكامل طب لو انا اديت له ويتس 30% بيروح عندك على الشمال اذا الفراغ اللي من على اليمين بقى اكبر من الفراغ اللي على الشمال يبقى دلوقتي انا لو جيت لك هنا وقلت لك انا عاوز الفراغ اللي على اليمين اضيف ليه 100 بيكسل والفراغ اللي على الشمال اضيف ل ليه 100 بيكسل كده الاثنين مش زي بعض لان انت اصلا اوريدي الفراغ اللي على اليمين اكبر بكتير من الفراغ اللي على الشمال فلو عملت لك ريلود اضاف لك هنا 100 بيكسل واضاف لك هنا 100 بيكسل لكن كان في اوريدي اصلا فراغ اكت من كده فعلشان كده هم مش قد بعض وعلشان كده العنصر ده مش في النص انت ممكن ان انت تيجي عندك هنا في الانسبيك وتلعب مثلا في الشمال تزودها لي مثلا تفضل ان انت مثلا تزودها لحد ما تيجي عندك في النص وطبعا الموضوع ده مش منطقي طيب امال اعمل ايه بالظبط في الحاله اللي زي كده انت بتقول للبراز احسب لي انت الفراغ ده علشان يجوا في النص احسب لي الفراغ اللي على الشمال واحسب لي الفراغ اللي على اليمين وجيبهم لي انت في النص بمعرفتك طيب دي بعملها ازاي ببساطه من خلال كلمه اوتو اوتو لما انت بتقول له دلوقتي اوتو معناها ان انت بتقول له جيبها لي في النص واحسب لي الفراغ اللي هنا خليه قد الفراغ اللي هنا بالظبط زي ما انت عاوز يعني ببساطه علشان نفهم كده دلوقتي الويتس واخد عندك 30% يعني الفراغ اللي موجود عندك هو 70% لما انت قلت له انا عاوز المارجن ليفت يكون اوتو والمارجن رايت يكون اوتو خد لك ال 70% دي وقسمها على الليت وقسمها على الرايت فليفت خدت 35 والراي خدت 35 لو انت لعبت لي في الويتس مثلا وزودتها مثلا خليتها 50 مثلا فال المتبقي 25 هنا و25 هنا هو عمل لك الكلام ده بالاوتو بشكل اوتوماتيك بدون ما انت تقول له او تتدخل في اي حاجه ممكن ببساطه ان انت تقول له دلوقتي انا عاوز المارجن تكون من فوق وتحت مثلا صفر ومن اليمين ومن الشمال تكون اوتو ف هو هيخليها لك اوتو بدون بقى ما تقول له مارجن ليفت و مارجن رايت والكلام ده كله طيب في معلومات مهمه جدا وما ينفعش نقفل الدرس ده من غيرها لان هي حرفيا اسئله انترفيو دلوقتي المارجن اوتو بتوسط لك البوكس من بره ما بوسطن المحتوى اللي جوه طيب يعني ايه الكلام ده يعني انا لو جيتلك هنا وكتبت لك دلوقتي محتوى جوه ديف ده هل المارجن اوتو هتوسع المحتوى ده الاجابه لا المارجن اوتو مش هتوصل لك المحتوى ده طيب ليه لان ببساطه زي ما قلنا قبل كده ان المارجن هو الجزء الخارجي من البوكس فهي بتشتغل على البوكس من بره مش عليه من جوه لو انت بصيت عندك على البوكس موديل هتلاقي دلوقتي ان ارن ده هو الجزء الخارجي من اي بوكس فانت ببساطه بتقول لي انا عاوز يكون في فراغ من بره من اليمين وفي فراغ من بره من الشمال مالكش اي علاقه بالمحتوى من جوه تمام كمان برض انت لازم تفهم ان المارجن اوتو بتوس لك العنصر ده في الاتجاه الهوريزنتال او الاتجاه الافقي فقط مالهاش اي علاقه بالاتجاه الفيرتيكال او الاتجاه العمودي خالص طب يعني ايه الكلام ده يعني انا لو جيت لك هنا وكتبت لك اوتو من فوق ومن تحت ما فيش اي حاجه هتحصل لو عملتلك ريلود مافيش اي تغيير هيحصل حتى لو كتبتلك اوتو في الاربع اتجاهات برضو مافيش اي حاجه هتحصل طيب ليه الكلام ده ببساطه لو رحتلك في موقع دبليو 3 سكولز وسالته على الاوتو فالو بتاعه المارجن هيقوللك ان انت ببساطه يو كان ست ذا مارجن برتي تو اوتو تو زونتل سنتر ان انت تقدر ان انت توسطا اهو العنصر ده هوريزونتي او افقيا فقط مالكش فيرتيكال تمام فنفهم الحته دي وان شاء الله في المستقبل هناخد طرق كتيره جدا من خلالها نقدر ان احنا نوسن الكلام اللي جوه ونوصل العنصر ده افقيا وعموديا وكل الاتجاهات انا بشرح لك دلوقتي بس المارجن اوتو اتكلمنا في الفيديو اللي فات عن البوكس موديل وعرفنا خاصيتين مهمين جدا وهما الويتس والهات او العرض والطول ولكن احنا كنا بنتعرف عليهم بس مش اكتر في حاجات كتيره في الويتس والهاي هنتكلم عليها وفي مشاكل كتيره ممكن تقابلنا فلازم ان احنا نكون فاهمين المشاكل دي بتيجي ازاي ونقدر ان احنا نحل المشاكل دي فالنهار ان شاء الله هنتكلم عن الويتس والهات وتحديدا هنتكلم عن مشكله مهمه جدا في الويتس والهاي المشكله دي ببساطه هنفهم من خلالها الفرق ما بين النسبه المئويه اللي انت بتديها للويس والهاي والديفولبر ليه الويتس والهات وانا عارف ان انت مش فاهم ه تعال دلوقتي لما ندخل معانا في الشرح هنعمل دلوقتي مع بعض بارجراف وهنكتب جواه مثلا اي كلمه اعمل انت براجراف اعمل اتش و اعمل ديف اعمل اللي انت عاوزه وهنروح دلوقتي علشان نشوف شكل البوكس بتاع البراجراف انا شايف قدامي كلمه لكن انا محتاج اشوف البوكس بالكامل فعلشان نشوف البوكس بالكامل هنضطر ان احنا نلون البوكس ده فهقولك مثلا اعمل له بوردر اعمل له حواف ف هخلي البوردر ده مثلا يكون 2 بيكسل ولون البوردر هيكون باللون الاحمر ونوع البوردر هيكون سوليد فهعمل لك دلوقتي ريلود فانا دلوقتي شفت البوكس انا عملت البوردر علشان بس اشوف البوكس مش اكترر تمام انت كنت ممكن تستخدم مثلا مكان البوردر الباك جراوند علشان تلون البوكس الباك جراوند كر او الباك جراوند بس دي بتلون لك البوكس ممكن ان انت تلونه مثلا للون الاحمر بالشكل ده استخدم اللي انت عاوزه انا بس عاوز في النهايه اوريك شكل البوكس الطول والعرض طيب انا هنا بتقابلني مشكله انا دلوقتي لو جيت لك هنا وقلت لك دلوقتي جيب لي الويتس وادي لله مثلا 50% امم لو انا دلوقتي عملت لك هنا ريلود هتلاقي دلوقتي ان هو خد 50% من حجم البراوزر وسواء البراوزر كبير او صغير فهو بياخد 50% يعني لو البراوزر عندك كبير بالشكل ده فهتلاقي عندك خد 50% بالضبط من ح حجم البراوزر لو البراوزر عندك صغير هتلاقيه خد عندك 50% من حجم البراوزر فدلوقتي انا لو جيت لك هنا وكتبت لك هنا مثلا 100% فهتلاقي خد لك عندك 100% من حجم البراوزر تمام بص خد لك 100% من حجم البراوزر الكلام ده ما بيحصلش عندك في خاصيه الهايت فدلوقتي انا لو جيت لك هنا في الهايت وكتبت لك 100% وعملت لك هنا ريلود ما فيش اي تغيير بيحصل تمام طيب اشمعنى في تغيير بيحصل هنا في الويتس وما فيش تغيير بيحصل هنا في الهايت بص يا معلم الموضوع بيكمون في القيمه الافتراضيه للوتس [موسيقى] والهات القيمه الافتراضيه للوتس لو انت دلوقتي ما كتبتش عندك الويتس لو انا دلوقتي ما عملتش عندي الويتس فهي كده كده بتاخد عندك 100% من عرض الاب بتاع العنصر بتاعك يعني ايه الكلام ده يعني دلوقتي البرجراف ده خد عندك 100% من عرض الاب اللي هو البادي والبادي في الحاله دي هو جسم الموقع بتاعك اللي هو البراوزر علشان كده البراجراف خد عندك 100% من عرض البراوزر سواء انت فاتح البراوزر او قفله كده كده البرجراف بياخد عندك 100% من عرض الاب بتاعه هتقول لي انا مش مصدقك هقول لك طيب لو انت مش مصدقني انا ممكن دلوقتي اجيب لك البادي واخليه مثلا العرض بتاعه مثلا الويتس يكون مثلا 200 بيكسل هو انا مش قلت لك ان البراجراف بياخد 100% من عرض الاب ودلوقتي لو الاب خد عندك 200 بيكسل يبقى المفروض البراجراف يكون برض 200 بيكسل تعال دلوقتي لما نشوف هعمل لك هنا ريلود هتلاقي دلوقتي ان البراجراف قل عندك من هنا واصبح عندك 200 بيكسل طيب تعال كده لما نقلل عندنا البادي هنخليه مثلا 100 وهعمل لك هنا ريلود هتلاقي دلوقتي ان البراجراف عمال بيقل برغم ان انت ما قلتش عرض البراجراف انت ماجيتش جنبه اصلا انت عمال بتقلل عرض الاب بتاعه هتقول لي يا عبد الرحمن انا مش فاهمك هقول لك ولا يهمك وسيبك من كل الكلام ده تعال دلوقتي لما نبدا من الاول على نظافه انا دلوقتي هعمل لك هنا ديف الديف ده هيكون الاب بتاع مثلا الاتش 2 تمام يبقى دلوقتي انا عندي هنا اتش ت وعندي هنا الديف هجيلك هنا واقوللك دلوقتي انا محتاج ان انا مثلا اكتب اي كلمه اكتب اللي انت عاوزه جوه الاتش ت طيب وبعدين تعالى بس كده لما نقلل عندنا عرض خليها 100% طيب وبعد كده هروح لك هنا على الاتش 2 وهبدا دلوقتي ان انا اظهر البوكس هلون تمام هخليه مثلا باللون الاحمر حلو الكلام حلو الكلام ليه دلوقتي الاتش 2 خد عندك 100% من عرض البراوزر هقول لك لان ببساطه هو خد 100% من عرض الاب بتاعه اللي هو الديف والدف خد عندك 100% من عرض الاب بتاعه اللي هو البادي اللي هو جسم الموقع اللي هو هنا براوزر لكن انا لو جيت لك على الديف واديت له مثلا عرض تعال كده مثلا لما ندي للديف عرض مثلا هقول لك ويتس مثلا 300 بيكسل تمام لو عملت لك هنا ريلود هتلاقي دلوقتي ان الاتش 2 خد عندك 100% من عرض الديف اللي هو 300 بيكسل وعلشان ابين لك الموضوع اكتر تعال كده لما ندي خلفيه للديف هدي له مثلا خلفيه باللون الازرق تمام وهجيب هنا واقول لك دلوقتي انا محتاج ان الاتش 2 ياخد مثلا 80% من عرض الاب بتاعه تمام فلو عملتلك هنا ريلود هتلاقي دلوقتي ان ال 80% دي مش 80% من عرض البراوزر 80% من عرض الاب بتاعه اللي هو الديف لو انا كتبت لك 50 تمام اذا دلوقتي انا لما اقول لك 100% تفهم ان 100% دي معناها ايه 100% معناها 100% مش من عرض البراوزر 100% من عرض الاب بتاع العنصر ده الكلام ده بالنسبه للوتس في بس ملحوظه مهمه لازم ان انا اشرحها لك قبل ما ندخل في شرح الهايت وهي ان العناصر في الاتش تي ام ال بتتقسم لنوعين يا اما العنصر ده بلوك يا اما العنصر ده ان لاين لازم تفهم ان كل الكلام اللي انا قلته لك ده ما بينطبق على العناصر الان لاين طبعا الكلام ده هنشرح في المستقبل انا مش عاوزك ان انت تفهم الحته دي انا عاوزك بس ان انت تسجلها عند قدام ان شاء الله هنبدا ان احنا نشرحها انا عاوزك بس تفهم ان احنا عندنا عناصر ان لاين زي الاسبان مثلا السبان ما بينطبق عليه الكلام اللي انا قلته لك او اللي انا شرحته لك ده الكلام ده انا بكرر تاني هيتشر ان شاء الله في المستقبل تعال دلوقتي بقى لما نتكلم في الطول دلوقتي انا لو جيتلك هنا واديتلك هايت واديت له قيمه 100% وعملتلك هنا ريلود مش هتلاقي اي حاجه بتتغير كذلك لو انا استخدمت عندي ال 50% برده ما فيش حاجه بتتغير طيب ليه بص يا معلم انا هقولها لك وبعد كده هشرحها لك تمام ببساطه الطول بيتحدد على حسب المحتوى اللي جوه طبعا انت مش فاهم تعال دلوقتي لما اشرح لك الكلمه دي دلوقتي انت لما بتستخدم النسبه المئويه لما اقول لك 50% او 100% دي معناها ايه معناها ان انا بقول لك ادي له طول 100% من طول الاب طيب وهو فين طول الاب طول الاب بيتحدد على حسب المحتوى اللي جوه لو الكلام اللي جوه كبير الطول بيكبر طيب انا مش فاهم تعال دلوقتي لما نفهم مع بعض دلوقتي لو انا عندي هنا كلام كتير تعال كده مثلا لما نكتب عندنا كلمه كبيره هقوللك دلوقتي لورم مثلا 100 كلمه اعمل لي دلوقتي 100 كلمه انت لما بتكتب عندك لورم وشرحت الموضوع ده في كورس الاتش تي ام ال لما بتكتب عندك لورم وبعدها رقم هو بيعمل لك عدد كلمات عشوائيه بحسب الرقم اللي انت بتكتبه هضغط لك هنا على انتر فهو دلوقتي كتب لك 100 كلمه طالما عندك محتوى كبير يبقى الطول عندك هيزيد عندك هنا فلو عملت لك ريلود هتلاقي دلوقتي الطول عندك زاد على حسب المحتوى اللي جوه جالك عند المحتوى ووقف ده بالنسبه للطول لو الطول عندك قليل او الكلام اللي عندك جوه قليل بالشكل ده فهتلاقي عندك ان الطول قل طيب لو ما فيش كلام خالص الحته دي مهمه جدا لو ما فيش كلام خالص مش هتلاقي اي طول عندك بيظهر الطول عندك هيكون زيرو تمام الكلام ده حتى بالنسبه للبادي خلي بالك دلوقتي البادي بالشكل اللي قدامك ده الطول بتاعه بيكون زيرو لكن العرض ما بيكونش زيرو تعال كده لما اوريك لو انا جيت لك هنا وضغطت لك هنا كليك يمين على انسبكت ووقفت لك هنا على البادي ونزلت لك هنا هتلاقيه دلوقتي بيقول لك ان العرض هو 1264 في الطول اللي هو زيرو واخد بالك هو هنا بيدي له العرض لكن الطول بيكون زيرو هخليه لك دلوقتي العرض مثلا بالشكل ده هتلاقيه بيقوللك ان العرض بقى قليل لكن الطول مازال زيرو افضل العب في العرض هتلاقي دلوقتي بيكبر لك العرض لكن مازال الطول عندك بيكون زيرو اذا الطول بيتحدد على حسب المحتوى اللي جوه العنصر تمام دلوقتي انا لو عندي هنا الديف وجوه الديف مثلا كلمه عاديه بالشكل ده فدلوقتي لازم تفهم ان البادي نفسه اصبح دلوقتي الطول بتاعه على حسب المحتوى اللي جوه ده الكلام ده بالنسبه للبادي وبالنسبه للديف وبالنسبه للاتش 2 فدلوقتي انا لما اجي لك هنا واقول لك خليل لي الاتش 2 يكون طولها 100% من طول الاب كده كده اصلا الاب طوله بيكون على حسب المحتوى اللي جوه فكده كده دي مش هتتغير طيب لو انا جيت لك هنا على الاب وقلت له خلي بالك انا مش عاوزك تكون على حسب المحتوى انا هديلك طول ثابت وليكن مثلا 200 بيكسل الكلام ده معناه ان ان انا لما بقول لك خد 100% من طول الاب يبقى دلوقتي الاتش 2 هيكون طولها 200 بيكسل تعال دلوقتي لما نتاكد فدلوقتي هو خد عندك 100% من طول الاب لو انا اديت له مثلا 50% فهتلاقي دلوقتي خد عندك 50% من طول الاب لو انا اديت له مثلا 80 فهيا اخد عندك 80% من طول الاب لكن لو انت ما كنتش كاتب هنا طول بالشكل ده تمام فدلوقتي الدف ده طوله هيكون على حسب المحتوى اللي جوه يبقى دلوقتي ال 80% وال 100% واللي انت بتكتبه هنا مش هيكون ليه اي معنى وكده كده مش هتتغير يبقى ملخص الكلام ده كله انا دلوقتي لو جيت لك هنا على الهايت وكتبت لك رقم ثابت وليكن مثلا 100 بيكسل اه هيكون عندك 100 بيكسل لكن لو استخدمت عندك نسبه مئويه وليكن مثلا 100% او 50% او 80% لازم تفهم ان النسبه المئويه دي بتكون من طول الاب فدلوقتي انا لو مش مدي طول للاب اب يبقى الرقم ده مالوش اي لازمه تمام يبقى يا اما دلوقتي قد طول الاب اقول لك دلوقتي ان الهايت مثلا هيكون طولها مثلا 400 بيكسل يبقى دلوقتي النسبه المئويه دي هيكون ليها معنى لان انت بتقول له انا عاوز دلوقتي 100% من طول الاب اللي انا دلوقتي حطيته تمام فدلوقتي انا لما اعمل لك ريلود اه دلوقتي هيكبر لكن لو انا مش كاتبها يبقى مش هيكون ليها اي معنى بالشكل ده هنتكلم النهارده ان شاء الله عن اربع خصائص جداد وسه جدا وهما الماكس ويتس والمين ويتس وهنتكلم عن الماكس هايت والمين هايت طيب تعال الاول لما نتكلم عن الفرق ما بين الويتس والماكس ويتس والمين ويتس الويتس هو العرض الثابت اللي انت بتديه لاي عنصر فدلوقتي انت لو اديت مثلا لاي عنصر ويتس 100 بكسل ده معناه ان العنصر ده هيكون 100 بيكسل ايا يكن المتغيرات اللي هتحصل على العنصر ده يعني انت لو فتحت الموقع بتاعك مثلا من موبايل هيفضل برض برض العرض 100 بيكسل لو فتحته من لاب توب هيفضل العرض بتاعك 100 بيكسل لو فتحته في شاشه كبيره شاشه صغيره مش هيفرق عندك وهيفضل العرض عندك ثابت وهو 100 بيكسل الكلام ده مش بيحصل في الماكس ويتس والمين ويتس فالماكس ويتس المعنى بتاعها بالعربي هو اقصى عرض انت ممكن ان انت توصل له ممكن توصل لعرض اقل من كده لكن اقصى عرض او اكبر عرض انت ممكن توصل له هو الماكس ويتس طيب عكسها هو المين ويتس المين ويتس هو اقل عرض انت ممكن ان انت توصل له لكن انت ممكن توصل لعرض اكبر من كده لو فتحت الموقع بتاعك في شاشه العرض بتاعها اكبر من كده طيب انا عارف ان انت مش فاهم فتعال دلوقتي لما نبدا ان احنا ندخل في الشرح العملي فهقولك دلوقتي اعمل لي ديف واكتب لي مثلا في وليكن 20 كلمه فهقولك انا محتاج ان انا اعمل لورم 20 كلمه طيب انا دلوقتي عندي هنا ديف الديف ده فييه 20 كلمه هنعمل عندنا ديف تاني برضو في 20 كلمه بالشكل ده طيب اول ديف انا هديله كلاس علشان اقدر ان انا انادي عليه واقدر ان انا اميزه هسمي الكلاس ده تس ديف التاني هديله كلاس وسميه مثلا ام وس ممكن ان انت تسميهم بالاسم اللي انت عاوزه طيب تعال دلوقتي لما ندخل عندنا في السي اس اس هنبدا دلوقتي ان احنا ننادي عندنا على اول عنصر اللي واخد عندنا الكلاس اللي اسمه تيتس وطالما انا قلتلك ان هو كلاس يبقى انت بتكتب عندك هنا دوت طيب هندي عندنا على العنصر ده وهنحاول ان احنا نميزه ب باك جراوند علشان بس ان احنا نشوفه فهقولك دلوقتي ان انا هديله باك جراوند باللون الازرق وبرضو هحاول ان انا اميز عندي العنصر التاني اللي واخد عندي كلاس اسمه ام تس هميز باني اديله برض باك جراوند مثلا باللون الاحمر يبقى ده الشكل بتاعهم طيب دلوقتي انا لو استخدمت عندي خاصيه الويتس لو انا جيت لك هنا على الويتس واديت لها 300 بيكسل ده معناه ايه ده معناه ان عرض البوكس بتاع العنصر ده هيكون عندك 300 بيكسل بشكل ثابت ايا يكن المتغيرات اللي هتحصل على العنصر ده يعني لو فتحته في شاشه كبيره هيفضل عندك 300 بيكسل لو فتحته في شاشه اقل من ال 300 بيكسل برده هيفضل عندك 300 بيكسل طيب تعالى دلوقتي لما نتكلم على الماكس ويتس الماكس ويتس لو انت اديت لها 300 بيكسل ايه اللي بيحصل بالظبط كلمه ماكس ويتس معناها ان ده اقصى عرض انت ممكن ان انت توصل له ممكن توصل لعرض اقل من كده لو انت فتحت الموقع ده في شاشه اقل من كده طيب يعني ايه الكلام ده تعال دلوقتي لما نشوف مع بعض لاول وهله انت هتفكر ان الماكس ويتس شبه المين ويتس لكن لا الاثنين مش زي بعض انا قلتلك ان ده اقصى عرض انت ممكن توصل له لكن ممكن توصل لعرض اقل من كده لو انت فتحت الموقع ده في شاشه اقل من كده تعال دلوقتي لما نفتح الموقع ده في شاشه اقل من كده بص يا معلم علشان بس تكون فاهم النقطه دي انت عندك على الجنب هنا في ارقام الارقام دي هي الطول والعرض كل ما بتصغر العرض او تكبر العرض بيبدا الرقم ده يتغير على حسب العرض بتاع البراوزر اللي انت فاتحه طيب انا قلتلك ان اقصى عرض انت ممكن توصل لله هو 300 بيكسل تعالى كده لما نقلل عن ال 300 بيكسل هنفضل ننزل هنا عند ال 300 بيكسل بص اول ما نزلنا عن ال 300 بيكسل العنصر ده بدا العرض بتاعه ان هو يقل وبدا ان هو يكون متجاوب مع الموقع بتاعك بص بدا ان هو يقل عندك بالشكل ده تمام لكن العنصر اللي عندك اللي فوق اللي انت مديله 300 بيكسل بشكل ثابت اصبح العرض بتاعه ثابت عندك وما بيتغيرش كده كده ههم ال 300 بيكسل ايا يكن انت تفتحه منين بالظبط تمام لكن لما انا اقول لك ان اقصى عرض هيكون 300 بيكسل ده معناه ان العرض ممكن يقل لكن لو انت فتحته في شاشه العرض بتاعها اكبر من 300 بيكسل لا هو خلاص اقصى عرض ممكن يوصل له هو ال 300 بيكسل ممكن ان احنا نشبه الموضوع ده مثلا علشان تكون فاهم ان العرض بتاعك بيبدا من صفر لحد 300 بيكسل افهمها بالشكل ده ان الرينج عندك بيبدا من صفر لحد 300 بيكسل الكلام ده العكس بتاعه هو المين ويتس بص يا معلم المين ويتس معناها ان ده اقل عرض انت ممكن ان انت توصل له ممكن العرض يكبر اكتر من كده لو انت فتحت الموقع بتاعك في شاشه اكبر من العرض ده طيب تعالى دلوقتي لما نشوف مع بعض لو عملتلك هنا ريلود بص يا معلم المنظر اللي قدامك بالشكل ده انا قلتلك ان ده اقل عرض انت ممكن ان انت توصل له لكن لو انت فتحت الموقع بتاعك في شاشه اكبر من كده فالعنصر ده العرض بتاعه هيفضل ان هو يكبر تعال كده لما اوريك العرض بتاعه هيفضل ان هو يكبر كل ما انت بتكبر عندك عرض البراوزر افضل كبره هيفضل عندك يكبر الى ما شاء الله تمام افضل كبر بص هيفضل ان هو يكبر لكن لو قللت لو قللت عن ال 300 بيكسل هو مش هيقل تعال دلوقتي لما نشوف مع بعض هجيلك هنا و هصر عندي العرض اللي هي اقل من 300 بيكسل بالشكل ده بص اول ما صغرت عن ال 300 بيكسل بدا ان هو ما يتغيرش بدا ان هو ما يكونش متجاوب ثبت عندك عند 300 بيكسل ليه ثبت عند 300 بيكسل لان ببساطه انا قلتلك ان اقل عرض هو 300 بيكسل طيب ده بالنسبه للعرض تعال دلوقتي لما نتكلم عن الطول والماكس هايت والمين هايت بص الموضوع يعني صدقني مش صعب الموضوع سهل جدا دلوقتي انا لو عملتلك هنا ديف والدف ده كان فاضي بالشكل ده واديتله دلوقتي مثلا كلاس وسميته مثلا هايت علشان اقدر دلوقتي ان انا انادي عليه هنا و ابدا ان انا اعرضه لك بالشكل ده طيب هنبدا دلوقتي ان احنا نميزه مثلا باللون الاحمر طبعا هو مش هيظهر ليه مش هيظهر لان مافيش محتوى جوه الدف ده طيب لو انا جيتلك على الدف ده واديت له طول ثابت وليكن مثلا 100 بيكسل ركز هنا كويس جدا لو عملت لك هنا ريلود اصبح طول العنصر بتاعك هو 100 بكسل الطول ده هو طول ثابت ايا يكن المحتوى اللي جوه حتى لو ما فيش محتوى بالشكل ده كده كده طول العنصر ده هيكون عندك مد بيكسل لان انت استخدمت عندك الهايت بشكل مباشر عندك بالشكل ده حتى لو الكلام اللي جوه العنصر ده كان اكبر من 100 بيكسل يعني انا دلوقتي لو جيت لك هنا وقلت قلت لك انا محتاج ان انا مثلا اعمل 200 كلمه طبعا ال 200 كلمه دول كتير جدا تمام فدلوقتي انا لو عملت لك هنا ريلود هتلاقي دلوقتي ان ال 200 كلمه عدوا البوكس بتاعك ومع ذلك البوكس بتاعك فضل ثابت على 100 بيكسل يبقى الملخص ان الهايت هو طول ثابت انت بتديه للعنصر بتاعك طيب تعالى دلوقتي لما نرجع هنا ونفضي المحتوى اللي جوه ونتكلم عن الماكس هايت دلوقتي انا عندي حاجه اسمها ماكس هايت والماكس هايت معناها ان ده اقصى طول انت ممكن ان انت توصل له اكبر طول انت ممكن ان انت توصل له لكن متاح ان الطول عندك يكون اقل لو المحتوى اللي جوه العنصر ده كان اقل يعني ايه الكلام ده يعني ببساطه هي بتبدا من صفر لحد الرقم اللي انت حاطه اللي هو 100 بيكسل طيب تعالى دلوقتي لما نشوف مع بعض دلوقتي ما فيش محتوى جوه العنصر ده يبقى المفروض ان هو يكون عندك صفر تمام تمام طيب تعال كده لما نكبر عندنا المحتوى نحط بس كلمه واحده بالشكل ده فدلوقتي انا لو عملت لك هنا ريلود هتلاقي دلوقتي ان الطول عندك زاد طيب تعالى دلوقتي لما نحط عندنا كلام كتير وليكن مثلا هنحط عندنا 200 كلمه ال 200 كلمه دول كتير انا عارف ان هم اكتر من ال 100 بكسل انا هنا قلت لك ايه انا هنا قلت لك ان اقصى طول هيكون عندك 100 بيكسل فدلوقتي انا لو عملت لك هنا ريلود فاقصى طول عندك هو 100 بيكسل خلي بالك ان انا لو شايل الماكس هايت الطول عندك هيكون على قد المحتوى اللي جوه العنصر بالظبط لكن لما بستخدم عندي الماكس هايت معناها ان اقصى طول للعنصر هو الرقم اللي انا حطيته هنا لو المحتوى اللي جوه عدى الكلام ده يبقى خلاص انا ماليش دعوه لكن لو المحتوى اللي جوه بقى اقل تعالى كده لو المحتوى اللي جوه بقى اقل فانا هتجاوب معاك وطولي هيكون اقل على حسب المحتوى اللي جوه خدت بالك ان الماكس هايت بتتفاعل مع طول المحتوى اللي جوه الماكس هايت ما بتتفاعل مع طول او عرض البراوزر تمام خلي بالك الحته دي مهمه جدا جدا الماكس هايت بتتفاعل مع طول المحتوى اللي جوه لو المحتوى اللي جوه صغير هيبدا ان طول البوكس بتاعك هيكون صغير لو مافيش محتوى هيكون الطول عندك صفر طيب لو في محتوى لو في عندك محتوى هتبدا ان الطول عندك بيكبر بيكبر على قدر المحتوى لحد ما يوصل عندك للرقم اللي انت حاطه هنا وده اقصى طول انت ممكن ان انت توصل له فلو كتبت لك هنا مثلا 20 كلمه وليكن لورم 20 كلمه وعملت لك هنا ريلود فهو بيكبر معاك على حسب المحتوى ولو انت كبرت عندك الكلام ف لو حطيت لك هنا مثلا 100 كلمه هتلاقيه دلوقتي هيوصل عندك لحد ال 100 بيكسل وهقف عندك تمام فالماكس هايت بتتفاعل مع طول المحتوى اللي جوه الماكس ويتس والمين ويتس ما كانتش كده الماكس ويتس والمين ويتس كانت بتتفاعل مع عرض البراوزر او ممكن نقول عرض الشاشه اللي انت بتفتح من خلالها سواء بقى موبايل او لاب توب او ايا يكن تمام او حتى عرض الاب اللي بيحتوي العنصر ده تمام لكن الماكس هايت بتتفاعل مع المحتوى اللي جوه كذلك المين هايت المين هايت برض بيتفاعل تعالى كده ده المين هايت بيتفاعل مع المحتوى اللي جوه ولكن بشكل عكسي عن الماكس هايت فالماكس هايت كانت معناها ان ده اقصى طول انت ممكن توصل له المين هايت بقى معناها ان ده اقل طول انت ممكن توصل له طيب يعني ايه الكلام ده تعالى دلوقتي لما نشوف مع بعض معنى ان انا اقول لك اقل طول انت ممكن ان انت توصل له يعني لو ما فيش محتوى اقل طول انت هتوصل له مش صفر اقل طول انت هتوصل له هو الرقم اللي انت كاتبه هنا اللي هو 100 بيكسل سواء في محتوى او حتى المحتوى اقل من 100 بيكسل بالشكل ده فبرضه اقل طول عندك هيكون 100 بيكسل لان انت قلت له ان اقل طول هيكون عندك 100 بيكسل لكن لو انت زودت المحتوى لو انت زودت هيزيد معاك تمام يعني لو انا قلت لك دلوقتي اعمل لي هنا مثلا 200 كلمه 200 كلمه دول كتير تمام فلو انا زودت هيزيد معاك بالشكل ده هو هيزيد معاك لان انت قلت له ان اقل طول هو 100 بيكسل لكن متاح ان انت تزيد هنعمل مع بعض هنا ديف ومش هكتبلك في الديف ده اي حاجه وهنبدا دلوقتي ان احنا ندي طول وعرض للديف ده علشان نبدا ان احنا نظهره عندنا هنا في المكان ده فهقولك دلوقتي جيب لي الديف واديله دلوقتي مثلا ويتس وليكن 300 بكسل و هديلك برض طول هايت 300 بيكسل وعلشان ابدا ان انا اظهره فهدي لله دلوقتي باك جراوند باللون الاحمر وهعمل لك هنا ريلود فظهر عندي البوكس ده طيب ايه هي البوردر ريديوسر داش راديوس تعال كده بس لما نمسح الاي طيب لو انا كتبتلك بوردر راديوس واديت لها هنا مثلا وليكن 20 بيكسل فركز على حواف البوكس ده بص ركز على الحواف دي لو عملتلك هنا ريلود هتلاقي ان في انحناء حصل عندك هنا بمقدار 20 بيكسل لو انا زودت لك مثلا القيمه دي مثلا ل 70 وعملت لك هنا ريلود هتلاقي دلوقتي ان في انحناء حصل عندك هنا من الاربع جوانب عندك بالشكل ده خلي بالك ان انا ممكن ان انا بدل ما اكتب قيمه واحده اكتب عندك قيمتين يعني بدل ما اقول لك ان انا هكتب لك 70 بيكسل انا هقول لك ان انا هكتب لك 70 بيكسل و و 10 بيكسل طيب يعني ايه قيمتين انا لما كنت بكتب قيمه واحده كانت البوردر راديوس دي بتاثر عندك على الاربع اتجاهات لكن لما بتكتب عندك قيمتين فاول قيمه بتاثر عندك على الجنب ده اللي هو التوب ليفت والجنب اللي قصادها بالظبط اللي هو البوتوم رايت تمام لكن ال 10 بيكسل اللي هي القيمه التانيه العكس بتاثر عندك على التوب رايت والبوتوم ليفت طيب تعالى دلوقتي لما نشوف مع بعض انا قلتلك ان الجنب ده بياثر عندك على التوب ليفت والبوتوم رايت ف لو انا مثلا قللت القيمه بتاعتها لصفر وعملتلك ريلود هتلاقي دلوقتي ان الجنب ده هو اللي بيتاثر لو انا غيرت القيمه بتاعتها ل 100 بكسل فهتلاقي دلوقتي ان الجنب ده هو اللي بيتاثر وكذلك برض الجنب ده لو انا خليته صفر فهتلاقي دلوقتي ان الجنب ده هو اللي بيتاثر اما لو انا غيرت القيمه بتاعته وليكن مثلا خليتها 70 وعملت لك هنا ريلود اقفل يا بتاع انت اقفل خليتها لك هنا كده فجنب ده هو اللي بيتغير عشان برض انا مركزتش خلايه هنا 40 وهعمل لك هنا ريلود فالجنب ده هو اللي بيتغير انت ممكن ان انت تكتب عندك اربع قيم طيب يعني ايه الكلام ده هو انت مش عندك هنا اربع زوايا طيب كل زاويه انت ممكن ان انت تكتبها عندك هنا فممكن ان انا اكتب لك هنا الاربع قيم طيب بيعبروا عن ايه الاربع قيم دول اول قيمه بتعبر عندك عن التوب ليفت الجنب ده وتاني قيمه بتعبر عندك عن التوب رايت وثالث قيمه بتعبر عن البوتوم رايت واخر قيمه بتعبر عندك عن البوتوم ليفت هي ماشيه مع عقارب الساعه بالشكل ده فلو عملت لك ريلود وبدات ان انا اركز عندي على اول قيمه اللي انا بقول لك ان هي بتاثر عندك على التوبل ليفت وخليتها عندك صفر بالشكل ده فهتلاقي دلوقتي ان الجنب ده هو اللي بيتاثر كذلك انا ممكن ان انا اعدل فيه علشان اوريك اكت فهتلاقي ان الجنب ده هو اللي بيتاثر وكذلك بقى انا ممكن ان انا اوريك ان تاني قيمه هي التوب رايت فلو عملت لك ريلود هتلاقيها بالشكل ده كذلك برض اللي تحت دي انا ممكن ان انا اعدلها بالقيمه الثالثه اللي هي البوتوم رايت وكذلك ان انا ممكن اوصل لقيمه الرابعه اللي بتعدل عندك الفت بوتوم او البوتوم ليفت فلو عملت لك هنا ريلود هتلاقي دلوقتي ان الجنب ده هو اللي بيتاثر طيب انا عاوز اقوللك ان الاتجاهات دي ليها مسمى فعلي انت ممكن ان انت تستخدمه فممكن دلوقتي ان انا اقول لك انا محتاج ان انا اوصل للبورد وممكن ان انا اوصل للاتجاه اللي انا عاوزه زي ما انا عاوز سواء مثلا البوتوم ليفت راديوس او التوب ليفت او التوب رايت راديوس او زي ما انا عاوز فممكن دلوقتي ان احنا نستخدم عندنا التوب ليفت راديوس اللي هو الاتجاه اللي قدامكم ده فممكن دلوقتي ان انا اخليه مثلا 100 بيكسل فلو عملتلك ريلود هتلاقي دلوقتي ان الجنب ده بس هو اللي اتاثر ممكن ان انا اخليه 10 بيكسل فهتلاقي دلوقتي ان الجنب ده هو بس اللي بيتاثر عاوز اقوللك ان كل جنب ممكن ياخد منك قيمتين مش قيمه واحده طيب يعني ايه الكلام ده بص يا معلم النص دايره اللي قدامك دي مقسومه لنصين النص اللي فوق والنص اللي تحت النص اللي فوق انت ممكن ان انت تتحكم فيه من اول قيمه والنص اللي تحت انت ممكن ان انت تتحكم فيه في تاني قيمه هتقول لي طيب الموضوع ده يلخبط هقول لك لا ولا بيلخبط ولا حاجه دلوقتي انا لو زودت لك هنا القيمه اللي فوق فبص هتلاقي ان اللي بيتغير هي القيمه اللي فوق اما لو انا زودت لك القيمه اللي تحت فهتلاقي دلوقتي ان اللي بيتغير هي القيمه اللي تحت اللي في الجنب ده تمام الدايره اللي من تحت دي فانت ممكن ان انت تعدل زي ما انت عاوز مش عاوز كده اكتب عندك قيمه واحده بالشكل اللي انت عاوزه واعملها بالشكل اللي انت عاوزه تمام الكلام ده ينطبق على كل الاتجاهات طيب كمان برضو انت ممكن ان انت تعمل دايره من خلال البوردر راديوس يعني مثلا انت ممكن ان انت تفضل تزود في القيمه دي لحد ما الدايره دي تفضل تزيد فهي هنا 50 ممكن مثلا تزودها ال 100 فهتلاقي عندك زادت عندك بالشكل ده ممكن ان انت توصلها عندك لدائه الدايره دي علشان توصلها بتكتب عندك نص قطر الرقم ده يعني لو هنا 300 بتكتب عندك هنا 150 تمام ف بتتكتب عندك هنا 150 فبتصير بالشكل ده خلي بالك هي عمرها ما هتكون دايره لو الطول مش قد العرض يعني لو الطول مثلا ازيد عندك بالشكل ده عمرها ما هتكون دايره كذلك برضو لو العرض هو اللي ازيد بالشكل ده برضو عمرها ما هتكون دايره لازم الطول يكون قد العرض علشان تقدر ان انت تخليها دايره كذلك الرقم ده لازم يكون نص قطر الرقم ده يعني لو الرقم ده هنا مثلا 200 لو انت عندك هنا 200 بيكسل وهنا 200 بيكسل يبقى لازم الرقم ده يكون 100 اللي هو نص الرقم ده طيب لو عملتلك ريلود هتصبح عندك دايره بالشكل ده و علشان ما تتلخبطش انت ممكن ان انت تكتب عندك هنا 50% وهي كده كده بتحسب لك نص الرقم ده ايا يكن الرقم ده يعني حتى لو انت كاتب هنا ا 77 وهنا 77 برض هيعمل لك دايره تمام طالما انت كتبت 50% بالشكل ده طيب دلوقتي انا عاوز ابدا صح في المجال ده عاوز دلوقتي اكون فاهم انا بعمل ايه مش مجرد ان انا بحفظ كود او او بحفظ تنسيق وكده لا انا عاوز ابقى فاهم طيب دلوقتي انت بتكتب عندك اكواد سي اس اس واحنا عرفنا ان السي اس اس بتنسق عندنا عناصر الاتش تي ام ال طيب لازم تفهم دلوقتي ان كل عنصر في الاتش تي ام ال ايا يكن العنصر ده بيكون مكون عندك من نوعين يا اما العنصر ده ان لاين يا اما العنصر ده بلوك يا اما ان لاين يا اما بلوك وهشرح لك دلوقتي يعني ايه ان لاين ويعني ايه بلوك بناء على المعلومه دي انت بتدي تنسيق السي اس اس فانت هتلاقي عندك تنسيقات ما بتشتغلش غير على العناصر البلوك وتنسيقات ثانيه ما بتشتغلش غير على العناصر الان لاين فلازم اول حاجه تتعلمها في السي اس اس هو ان انت تكون فاهم العنصر اللي انت بتتعامل معاه ده او اللي انت عاوز تديله تنسيق هو عنصر ان لاين ولا عنصر بلوك طيب باختصار ايه الفرق ما بين العنصر البلوك والعنصر الان لاين العنصر البلوك ببساطه هو اللي بياخد 100% من عرض ايه بقى واحده هيقول لي من عرض المتصفح هقول لك لا ده غلط هو بياخد 100% من عرض الاب بتاعه وهشرح لك الكلام ده دلوقتي اما العنصر الان لاين هو اللي بياخد عرض المحتوى اللي جواه تعالوا كده لما نشوف الكلام ده بشكل عملي هنكتب هنا تعليق في كلمه بلوك المنتس علشان نستعرض دلوقتي شويه عناصر بلوك الاتش 1 هو عنصر بلوك طبعا الاتش 1 والاتش 2 والاتش 3 لحد الاتش 6 كمان برضو البي هو عنصر بلوك كمان برضو الديف هو عنصر بلوك وبعيدا عن الكلام ده تعالوا دلوقتي لما نعرف الفرق ما بين العنصر البلوك والعنصر الان لاين علشان نكون احنا عارفينهم من نفسنا دلوقتي البي هو عنصر بلوك ولكن افترض ان انا معرفش ان هو عنصر بلوك فجيل لك هنا وهكتب لك جواه اي كلمه علشان نعرف ازاي بنحدد هل العنصر ده بلوك ولا لا دلوقتي انا لو عملتلك هنا ريلود هتلاحظ ملاحظه مهمه جدا دلوقتي كل كلمه في دول هي عنصر برجراف هي واحده من البراجرافات دول ودلوقتي كل برجراف واخد سطر لوحده الكلام ده ماجاش عندك على نفس السطر لا كل برجراف خد سطر لوحده فتعمل لك هنا لات سطور بعدد اللات برجرافات اللي انت عملتهم تعال دلوقتي لما نجرب مع بعض عنصر ان لاين تعال كده لما نكتب هنا ان لاين علشان نشوف بس الفرق ما بين العنصر البلوك والعنصر الان لاين اشهر عنصر عندي ان لاين هو السبان طبعا في عناصر تانيه ان لاين كتيره غير السبان ولكن احنا بنفهم الفرق دلوقتي مش اكترر فتعال كده لما نكتب عندنا نفس الكلام تاني ونكررها لات مرات فانا دلوقتي عندي لات عناصر بارجراف وتلاته سبان تعال كده لما نشوف النتيجه عملت ايه بص بقى دلوقتي الفرق دلوقتي العنصر البي او العنصر البلوك بياخد عندك سطر كامل لوحده بياخد عندك بلوك او كتله كامله اما العناصر الان لاين فهي من اسمها بتيجي عندك ان لاين او باختصار بتاخد عندك عرض المحتوى بتاعها اما العنصر البلوك بياخد عندك عرض الاب بالكامل 100% من عرض الاب طيب ازاي بعرف الكلام ده ممكن دلوقتي استخدم عندي ميزه مهمه جدا تكشف لي الكلام ده وهي ميزه الباك جراوند وهي ان انا اغير لون الخلفيه لكل عنصر فيهم علشان اعرف عرض كل عنصر فيهم بالظبط فعلشان اعمل كده بروح دلوقتي وانادي مثلا على البراجراف واديله خاصيه الباك جراوند الخاصيه دي هنتكلم عليها بعد كده ان شاء الله بالتفصيل ولكن احنا دلوقتي هنستخدمها علشان نعرف بس حدود العنصر ده فلو عملتلك هنا ريلود بص دلوقتي لحدود البراجراف دلوقتي البراجراف واخد عندك 100% من مساحه البراوزر هتقول لي يا عبد الرحمن ده انت لسه قيل من شويه ان العنصر البلوك بياخد 100% من عرض الاب بتاعه مش من عرض البراوزر هقوللك طيب وفين الاب بتاع العناصر دي تعال كده لما نشوف الاب بتاع العناصر دي هو البادي هو المتصفح نفسه في الحاله دي هناخد دلوقتي حالات تانيه وهنشوف دلوقتي مع بعض ولكن تعال كده لما نغير الخلفيه للسبان علشان نعرف الفرق ما بين العنصر البلوك والعنصر الان لاين فهدي لك نفس الخاصيه للسبان يبقى دلوقتي الباك جراوند ده اديته عندك هنا للبراجراف والسبان تعال كده لما نشوف الفرق دلوقتي مع بعض فبص دلوقتي الفرق ما بينهم فببساطة [موسيقى] [موسيقى] بالضبط او عرض المحتوى اللي جواه بالظبط وصلت طيب انت دلوقتي قلت لي ان العنصر البلوك بياخد 100% من عرض الاب بتاعه اه طيب ما تيجي دلوقتي تشيله وتحطه عندك دلوقتي في ديف بالشكل ده فدلوقتي الثلاثه دول هم ابناء ل الديف ده تعال دلوقتي لما ندي للديف مثلا عرض 200 بيكسل فجيل لك هنا وانادي دلوقتي على الديف وهدي له تيس يعني هدي له عرض 200 بيكسلز تمام فلو عملت لك هنا ريلود تعال كده لما نشوف دلوقتي مع بعض اه بص بقى الفرق هو مش البي عنصر بلوك والمفروض ان هو بياخد 100% ها طيب هو بياخد 100% من حجم الاب بتاعه والاب هنا في الحاله دي واخد عندك عرض 200 بيكسلز طيب لو انا كبرت لك العرض بتاع الاب مثلا خليته 400 الضعف فبرضه الابناء بتوعه هياخدوا عندك 100% من عرض الاب بتاعهم ولو انا جيت لك هنا وشلت لك الديف وخليت دلوقت دلوقتي العناصر دي هي ابناء لمين للبادي اللي هو عرض المتصفح فلو جيت لك هنا هياخد 100% من عرض المتصفح اللي انا برض ممكن اجيل لك هنا واتحكم فيه انادي دلوقتي على البادي وادي له مثلا ويتس اي حاجه 150 مثلا 150 بيكسلز فلو جيت لك هنا اهو بالمنظر اللي قدامك ده يبقى دلوقتي كده بالراحه وبهدوء العنصر البلوك بياخد عندك 100% من عرض الاب بتاعه ايا يكن الاب ده طيب ازاي بنعرف العنصر البلوك والعنصر الان لاين احنا استخدمنا طريقه وهي طريقه الباك جراوند ممكن نستخدم طريقه تانيه تعال كده شيل عندك الكلام ده وهتيجي هنا على اي عنصر كليك يمين ثم انسبكت لو انت دلوقتي وقفت على اي عنصر فبص ايه اللي هيحصل عندك العنصر البلوك هتلاقيه واخد عندك 100% بص على العلامه تعال كده لما انزلها لك بص دلوقتي على العلامه او اللون اللي ظهر دلوقتي على العنصر ده فهتلاقي لاقي دلوقتي محدده لك اما العنصر الان لاين فبص تعال كده اما العنصر الان لاين هتلاقيه دلوقتي محدد لك العنصر بس تمام مركز دلوقتي معايا كمان لو انت دلوقتي وقفت على اي عنصر بلوك ورحت دلوقتي على خصائص السي اس اس هتلاقيه دلوقتي واخد عندك خاصيه اسمها ديسبلاي بلوك الخاصيه دي هنفهم ان شاء الله بعد كده ازاي بنتحكم فيها وازاي بنحول العنصر البلوك لان لاين والعكس ان شاء الله ولكن دلوقتي احنا بنتعرف عليهم بس مش اكتر انت دلوقتي قادر ان انت تتعرف على اي عنصر وتعرف ان هو عنصر بلوك ولا عنصر ان لاين وهسيب لك ان شاء الله ملف بي دي اف فيه كل العناصر اللي موجوده في الاتش تي ام ال هتعرف من خلالها هل العنصر ده بلوك ولا العنصر ده ان لاين كمان ممكن تستخدم اي طريقه من اللي انا قلتها لك سواء الباك جراوند او الانسبيك علشان تعرف انت هل العنصر ده بلوك ولا ان لاين بعد ما اتعلمنا الفرق ما بين العنصر البلوك والعنصر الان لاين هناخد دلوقتي خاصيه جديده في في السي اس اس وهي التكست اللاين او محاذاه النص محاذات النص دي هو فكره ان انت تجيب النص عندك في الشمال ولا في اليمين ولا في النص هنتكلم دلوقتي ان شاء الله عن الخاصيه دي وهنعرف المشاكل بتاعتها وهنعرف هي بتشتغل مع العنصر البلوك ولا العنصر الان لاين فتعالوا دلوقتي لما نبدا مع بعض نعمل دلوقتي اي عنصر انا هعمل عندي ديف انت ممكن تعمل ديف ممكن تعمل بارجراف ممكن تعمل اتش 1 كلهم بينطبق عليهم نفس الكلام بالظبط لو انا كتبتلك هنا اي كلمه ايا يكن فالكلمه دي تلقائيا هتيجي عندك في شمال المتصفح لو عملتلك هنا ريلود هتجيلك هنا على الشمال طيب ليه جت على الشمال ما جتش على اليمين ولا جت في النص لان ببساطه دي القيمه الافتراضيه ده الفولت فو هم بيفتروا ان انت بتعمل الموقع بتاعك باللغه الانجليزيه فطالما هو بيتعمل باللغه الانجليزيه فالكلام تلقائيا بيجي عندك على الشمال ولكن لو لو انت عاوز تجيبه على اليمين او في النص فتيجي عندك هنا وبتروح دلوقتي لستايل وبتنادي دلوقتي على العنصر ده اللي هو الديف وبجيلك هنا وبقولك ديف لو سمحت انا عاوز اديله خاصيه اسمها تكست الين بالشكل ده الخاصيه دي الفولت فو بتاعها هو ففت فسواء انت كتبت ليفت او ماكتبتش كده كده الكلام بيجي عندك على الشمال طيب لو انا جيتلك هنا وكتبتلك دلوقتي رايت كده الكلام اللي جوه هنا ده هيجي عندك على اليمين فلو عملتلك هنا ريلود جالك على اليمين لو كتبتلك هنا سنتر هيجي عندك في النص لحد دلوقتي الكلام سهل وجميل ومافيش اي مشاكل ولكن تعال بقى لما نفهم مع بعض التكست اللاين بتشتغل ازاي هتقوللي يا عم هنفهم ايه اكتر من الكلام اللي اتقال هقوللك بص يا معلم لو الف دي ما كانتش ديف لو كانت مثلا اسبان تعال كده لما نجرب دلوقتي مع بعض نخليها سبان واجيلك هنا وانادي دلوقتي على السبان واديلها نفس الخاصيه لو عملتلك هنا ريلود مافيش اي تغيير هيحصل سواء انت كتبت سنتر او كتبت عندك هنا رايت وعملتلك هنا ريلود مافيش اي تغيير هيحصل الله طيب ازاي التكست اونلاين اشتغلت في الديف وما اشتغلتش في السبان تعال دلوقتي بقى لما نفهم مع بعض الخاصيه دي بتشتغل ازاي دلوقتي انت لما بيكون عندك عنصر وانت عاوز تدي تنسيق التكست اللاين للعنصر ده لو انا جيتلك هنا وكتبتلك ديف تكست الاين مثلا سنتر معنى الكلمه اللي انا كتبتها دي ان انا بقوللك دلوقتي روحلي للديف وخليلي كل الابناء اللي جواه ايا يكن الابناء دي الابناء دي ممكن تكون كلمه عاديه وممكن تكون عندك عناصر كتيره جدا ممكن تكون مثلا برجراف مكتوب فيها مثلا ايتم 1 وممكن يكون عندك اتش 2 مكتوب فيها اي كلمه ايتم 2 مثلا اي حاجه وممكن يكون عندك حاجات كتيره جدا انت لما بتكتب عندك التكست اللاين ايا يكن بقى سنتر ليفت رايت فانت دلوقتي بتقول ان انا عاوز الدف ده كل اللي جواه يجوا عندك هنا مثلا في النص وصلت كل اللي جواه طيب بييجوا في نص ايه بالظبط بيجوا في نص العرض بتاع الديف اه هنا بقى لازم نركز شويه هو الديف ده عرضه ايه بالظبط الدف ده بياخد عندك عرض المتصفح لانه ببساطه عنصر بلوك فلو انا جيت لك هنا وعملتلك دلوقتي ريلود فالكلام ده جالك هنا في نص المتصفح ولكن بقى تعال كده لما نفهم دلوقتي مع بعض لو انا جيت لك هنا وخليت لك دلوقتي الدف ده العرض بتاعه مثلا اللي هو الويتس الويتس خليته مثلا 200 بيكسلز اه دلوقتي لما عرض الديف اصبح 200 بيكسلز اذا المحتوى اللي جواه هيجي عندك في النص يعني هيجي عندك في ال 100 بيكسل اللي هو نص الديف تمام تمام فلو جيتلك هنا وعملتلك دلوقتي ريلود اه جتلك هنا انت هتفكر ان هنا ما جتش في النص ولكن حرفيا هي جت في نص الديف بالظبط فلو انا جيتلك هنا وحبيت دلوقتي ان انا الون لك الخلفيه بتاعه الديف علشان تفهم وتشوف معايا هديلها دلوقتي خاصيه الباك جراوند ريد مثلا واعمل لك هنا ريلود وتعال دلوقتي لما نشوف مع بعض فالمحتوى اللي جوه جالك في نص الدف بالظبط فاهم ف ببساطه خاصيه التكست بتجيب لك كل ابناء المحتوى ده في النص بتاع الاب بتاعه ايا يكن عرض الاب فلو الاب اللي انت مديه له خاصيه التكست اللاين كان العرض بتاعه 100% من عرض البراوزر لو كتبت لك هنا 100% فهيج لك في نص البراوزر هيجيلك في النص عندك بالشكل ده طيب لو ما كانش عندك 100% لو كان عندك مثلا 100 بيكسل او خليها مثلا 300 بيكسلز فلو جيت لك هنا وعملت لك دلوقتي ريلود فجك في النص بالظبط وده تفسير ان التكست اونلاين ما اشتغلتش مع السبان ليه لان زي ما اتكلمنا قبل كده ان العنصر الابان مالوش عرض اصلا المحتوى ده جالك في نص العرض بتاع الديف لكن الابان او العناصر الان لاين لو كتبتلك هنا سبان وحطيت لك جواها ايا يكن اللي انت هتحطه جواها حط اللي انت عاوزه انا اكتب لك كلمه عاديه وهجيلك هنا دي ريلود وهجيلك هنا واناديلك دلوقتي على السبان واديلها نفس الخاصيه التكست سنتر فلو عملتلك هنا ريلود مافيش حاجه حصلت مافيش حاجه حصلت ببساطه لان مافيش عرض ليه السبان ولو انا دلوقتي عملتلك خاصيه الباك جراوند ريد علشان نشوف عرض الابان فلو جيتلك هنا ده عرض الاسبان ف هتجيلك في النص فين بالظبط فاهم او لو انت عملتها رايت هتيجي فين في الرايت هتيجي فين في اليمين هو اصلا الاسبان مالوش عرض فاهم انا لو كنت جيتلك هنا والكلام اللي هقوله ده كلام من المستقبل انت ممكن ما تركزش فيه نهائي انا بس بعمله لك علشان تفهم بس معايا الفكره مش اكتر لو انا دلوقتي حولت لك الاسبان من عنصر ان لاين لعنصر بلوك ما تركزش في الخاصيه دي انا بس بعملها لك علشان تفهم الفكره مش اكتر لو عملت لك هنا ريلود اه هنا اشتغلت بقى هنا الخاصيه دي اشتغلت ليه اشتغلت لان العنصر ده اتحول عندك لعنصر بلوك اذا اصبح له عرض وصلت الفكره يبقى ببساطه التكست انلاين ما بتشتغلش مع العناصر الان لاين تمام اتكلمنا في الدرس اللي فات عن خاصيه التكست انلاين اللي بتخليل لك الكلمه بتاعتك سواء في اليمين او في النص او في الشمال فدلوقتي انا لو بعمل عندي موقع باللغه العربيه وفي مثلا هنا برجراف جواه مثلا اي كلمه تمام والكلمه دي انا عاوزها تيجي عندك في يمين المتصفح فبج لك هنا وبقولك دلوقتي انا عاوز البرجراف ده اضيف له خاصيه التكست الاين رايت مثلا فلو جيتلك هنا وعملتلك دلوقتي ريلود الكلمه دي جتلك عندك في اليمين ولكن هتظهر عندك دلوقتي مشكله لو الكلمه دي فيها كلمه باللغه العربيه وباللغه الانجليزيه فدلوقتي انا لو كتبتلك هنا كلمه باللغه العربيه مرحبا مثلا وخلي بالك انا بدات الجمله بتاعتي بالكلمه اللي باللغه العربيه فكتبت لك مثلا مرحبا عبد الرحمن جمل ايا يكن يعني انا بدات الجمله بتاعتي باللغه العربيه ومع ذلك لو انا جيت لك هنا وعملتلك دلوقتي ريلود فاتجاه الكلام بتاعك برض من الشمال من الشمال لليمين دي مشكله كبيره جدا ما بتحل لكش التكست انلاين فالكست انلاين بتشيل لك الجمله زي ما هي وبتحط لك في اليمين او في النص او في الشمال لكن لو انت عاوز تتحكم في اتجاه النص بتاعك الكلام ده انت بتعمله من خلال خاصيه الدايركشن الدايركشن بتاخد عندك يا اما التي ار يا اما ار تي ال ال تي ار هي اختصار لكلمه ليفت تو رايت ودي هي القيمه الافتراضيه او الديفولت فالو اللي هو سواء انت كتبتها او ما كتبتها فكده كده اتجاه الكلام بتاعك بيكون عندك من الشمال لليمين لكن لو انت عاوز تخلي الكلمه بتاعتك من اليمين للشمال بتيجي عندك هنا وبتكتب ار تي ال او اختصار لكلمه رايت تو ليفت هنا هيظبطلك دلوقتي اتجاه الكلام عندك وهيجيب لك من اليمين للشمال اهو بدلك عندك من الكلمه اللي باللغه العربيه وهنا حليت عندك مشكله اتجاه الكلام النهارده هنتكلم عن خاصيه جديده في السي اس اس وهي التكست ترانس فورم الخاصيه دي بتخليل لك النص بتاعك يا اما بحروف لور كيس يعني حروف صغيره او حروف ابر كيس يعني حروف كبيره او حروف كابيتالز يعني اول حرف بس هو اللي كبير والباق بيكون عندك حروف عاديه جدا طيب تعال دلوقتي لما نشوف الموضوع ده مع بعض هعملك هنا برجراف واكتبلك هنا اي كلمه وليكن عبد الرحمان جمال لو انا دلوقتي عملتلك هنا ريلود ظهرت عندك الكلمه بالشكل ده انا ممكن اجيلك هنا واقوللك دلوقتي جيبلي البراجراف واديله خاصيه التكست ترانسفورم الصيه دي ممكن من خلالها ان انت تخلي حروف الكلمه دي حروف كبيره او حروف ابر كيس من خلال ان انت بتدي عندك للتكست ترانسفورم الفالو اللي هو الابر كيس الابر كيس بيحولك الكلمه دي لحروف كبيره او حروف ابر كيس عكسها تماما هي اللور كيس اللور كيس بتخلي لك الكلمه دي بحروف صغيره حتى لو انت كنت كاتبها عندك بحروف كبيره تعال كده لما نخلي لك الثلاث حروف دول عبد بحروف كبيره برض هتفضل عندك بحروف لور كيس اهو لان انت اديت لها قيمه اللور كيس تمام طيب عندك كمان برضو فالو تانيه وهي الكابيتال ايز او حاله تانيه وهي الكابيتال ايز الكابيتال ايز بتخليل لك اول حرف من كل كلمه يكون كابيتال اما الباقي بتسيبه لك زي ما هو فلو انا دلوقتي عملت لك هنا ريلود خليت لك اول حرف بس هو اللي كابيتال والباقي بيفضل زي ما هو حتى الكلمه التانيه اهو اول حرف فيها كابيتال والباقي زي ما هو طيب كلمه الباقي زي ما هو دي يعني حتى لو انت كنت كاتبه كابيتال هيفضل كابيتال ما بتغيرو بتسيبه لك زي ما هو مش بتحوله للور كيس فلو انا مثلا كتبتلك تعال كده عبد الرحمن كتبتلك الباقي بحروف كابيتال هتسيبه لك كابيتال زي ما هو فلو انا دلوقتي عملتلك هنا ريلود هتسيبه لك زي ما هو فدلوقتي خاصيه الكبيز بتتحكم لك في اول حرف من كل كلمه بس مالهاش علاقه بباقي الحروف لو انت عاوز تتحكم في كل الحروف يا اما بتكتب عندك ابر كيس علشان يخليلك كل الحروف كبيره يا اما بتكتب عندك لور كيس علشان يخليلك كل الحروف صغيره طيب احنا دلوقتي ان شاء الله هنتكلم عن التكست سبيس او المسافات ما بين النصوص فتعال دلوقتي لما نعمل عندنا نص كبير هنعمل عندنا هنا لورم الورم لما بتكتبها وبتكتب بعدها رقم بيعمل لك كلمات عشوائيه بعدد الرقم ده فانا دلوقتي كتبتلك لورم 20 يبقى دلوقتي هو عمللك 20 كلمه تعال كده لما نصغر بس علشان ايه يبانوا بس قدامنا مش اكتر تمام فدول ال 20 كلمه ودول شكل ال 20 كلمه في المتصفح تعال كده لما نتكلم عن اول خاصيه عندنا وهي التباعد ما بين الحروف فهدي دلوقتي على البراجراف واقول لك دلوقتي انا عاوز استخدم خاصيه الليتر سبيس لو اديت لها مثلا 30 بيكسلز فهي هتعمل لك تباعد ما بين الحروف بمقدار 30 بيكسلز طبعا 30 بكسلز دي كبيره جدا فهتمك الشكل اللي قدامك ده المسافه دي هي اللي عملتها الليتر سبيس كلمه ليتر هي حرف وبيسين هي مسافه فهنا بتعمل لك مسافه ما بين الحروف بالمقدار اللي انت بتكتبه هنا فلو انا كتبت لك لاه بيكسلز فهتمك مسافه ما بين كل حرف والتاني بمقدار لاه بكسلز لو كتبت لك 10 تعال كده هتعمل لك دلوقتي مسافه ما بين كل حرف والثاني بمقدار 10 بكسلز اعمل انت اللي انت عاوزه وتعال دلوقتي لما ندخل عندنا في الخاصيه الثانيه وهي الوورد سبيس او التباعد ما بين الكلمات مش الحروف فلو انا جيتلك هنا واستخدمت دلوقتي خاصيه الورد سبيس سينج واديت لها مثلا 30 بيكسلز وعملتلك هنا ريلود فعملت لك مسافه 30 بيكسلز ما بين كل كلمه والتانيه مش ما بين كل حرف والتاني في الليتر سبيس لا الورد سبيس بتعمل لك مسافه ما بين كل كلمه والتانيه بالمقدار اللي انت هتكتبه هنا فلو انا كتبتلك لاه هتعمل لك مسافه لاه بيكسلز ما بين كل كلمه والتانيه لو كتبتلك 100 هتعمل لك مسافه 100 بيكسل ما بين كل كلمه والتانيه طيب دلوقتي لو انا مش عاوز اعمل مسافات ما بين الكلام وما بين الحروف عاوز اعمل مسافات ما بين السطور يعني عاوز السطر ده يبعد عن السطر ده يبعد عن السطر ده بتعمل كده من خلال خاصيه اسمها لاين هايت اللاين هايت بتعمل تباعد ما بين السطور وبعض فلو انا مثلا اديت لها 30 بيكسلز اي رقم يعني مش مشكله وعملتلك ريلود فهعمل لك تباعد ما بين كل سطر والتاني بمقدار 30 بيكسلز لو كتبتلك هنا 100 هيعمل لك دلوقتي تباعد ما بين كل سطر والثاني بمقدار 100 بكسلز فدلوقتي انت قادر ان انت تتحكم في التباعد ما بين السطور هنتكلم النهارده ان شاء الله عن خاصيه جديده في السي اس اس وهي التكست ديكوريشن ومن اسمها كلمه تكست ديكوريشن يعني انت بتعمل ديكور للتكست للنص بتعمل له ديكور بتعمل له تز بتدلع من الاخر فتعالوا دلوقتي ان شاء الله لما نتكلم دلوقتي عن التورشن لاين والتكست ديكورشن كر والتست ديكورشن ستايل ونعرف الفروق ما بينهم هنعمل دلوقتي مع بعض نص هكتبلك في هنا اي كلمه ايا يكن فده شكل الكلمه بكل بساطه فلو انا جيتلك هنا علشان دلوقتي انادي على البراجراف واديتله خاصيه اسمها ديكورشن لاين طيب بتعمل ايه التكست ديكورشن داش لاين من اسمها بتضيف لك لاين للنص ده بتضيف لك لاين او بتمسح اللاين لو كان موجود طيب تعال دلوقتي لما نضيف عندنا خط تحت الكلمه دي علشان تضيف عندك خط تحت الكلمه بتكتب عندك دلوقتي اندر لاين بالشكل ده بتكتب عندك اندر لاين الاندر لاين بتعملك خط تحت الكلمه دي تمام طب لو انت عاوز الخط ده يكون فوق الكلمه دي بتكتب عندك هنا اوفر لاين لو عملت لك هنا ريلود هيحط لك دلوقتي الخط ده فوق الكلمه دي كمان ممكن تخلي الخط ده في نص الكلمه او من خلال الكلمه بتعمل الكلام ده من خلال خاصيه اسمها لاين ثرو يعني خط من خلال الكلمه فلو عملتلك هنا ريلود الخط ده هيكون من خلال الكلمه كمان انت ممكن تحط الخاصيتين في بعض يعني انا ممكن اجيلك هنا واخلي لك مثلا الخط فوق وتحت في نفس الوقت فممكن دلوقتي اقول لك انا عاوز الخط يكون اوفر لاين يعني فوق وكمان تحت يبقى هعمل لك دلوقتي سبيس وهقول لك اندر لاين يبقى اوفر لاين وسبيس واندر لاين هيعمل لك دلوقتي خط فوق وخط تحت الكلمه فلو جيت لك هنا وعملت لك دلوقتي ريلود عمل لك خط من فوق وخط من تحت كمان برضو ممكن تعمل عندك خط من فوق وخط من تحت وخط في النص في نفس الوقت فممكن اجيلك هنا واقول لك دلوقتي اعمل لي كمان لاين ثرو فلو جيتلك هنا وعملتلك دلوقتي ريلود عمللك التلات خطوط في نفس الوقت طيب جميل جدا جدا يبقى دلوقتي التكست ديكورشن لاين بتتحكم لك في الخط بتاع التكست طيب انا دلوقتي عاوز اغير لون الخط ده عاوز اخليه احمر اصفر اللي انا عاوزه فعلشان تعمل كده بتيجي عندك هنا وبتكتب دلوقتي تكست ديكوريشن داش كر يبقى انا دلوقتي هتحكم عندي في لون الخط هخليه مثلا هنا احمر وهجيلك هنا وعملك دلوقتي ريلود فالخطوط دي اصبحت عندك باللون الاحمر تعال كده لما نكتفي بخط واحد بس هخليه مثلا الخط اللي تحت اللي هو الاندر لاين وهعملك هنا ريلود فالخط عندك هنا باللون الاحمر طيب كمان برضو انت ممكن تتحكم عندك في الستايل او شكل الخط ده بتعمل كده من خلال خاصيه اسمها تكست ديوريشن داش ستايل الخاصيه دي بتسمح لك ان انت تتحكم عندك في الخط ده ف الديفولت فو او القيمه الافتراضيه هي السولد والسوليد معناها خط بالمنظر اللي قدامك ده فلو عملتلك ريلود مش هتلاحظ عندك اي تغيير لكن لو جيت لك هنا وكتبت لك مثلا داشد داشد يعني هتلاقي عندك شرط بالمنظر اللي قدامك ده تمام كمان برض عندك حاجه زيها وهي الوتد الوتد هي اختصار لكلمه دوت اللي هي نقطه فلو عملت لك هنا ريلود هيعمل لك هنا نقط كمان برض عندك حاجه تانيه وهي الويفي ده بيعملها لك بشكل تموج بالشكل اللي قدامك ده ممكن ان انت تختصر كل ده تعال كده من خلال حاجه اسمها تكست ديكوريشن فقط لا غير بالمنظر اللي قدامك ده الخاصيه دي لو انت مثلا كتبت لك هنا اندر لاين هتعمل لك خط اندر لاين ال الخاصيه دي هي اختصار للاين والكر والستايل في بعض فممكن اجيلك هنا واقوللك دلوقتي اعمللي الاندر لاين وفي نفس الوقت خليه لي احمر عملت في نفس السطر اهو مجرد بس ان انا عملتلك هنا سبيس تمام فخليها لك هنا باللون الاحمر كمان برضو ممكن اجيلك هنا وخليها لك مثلا ويفي بص انا بعمل اختصار تمام فبدل ما اكتبلك تكست ديكوريشن لاين وتكست ديكوريشن كر وتكست ديكوريشن ستايل فانا بكتبلك تكست ديكورشن وبحطهم هنا بالمنظر اللي قدامك ده طيب مش هيفرق الترتيب بتاعهم فانت ممكن تكتب عندك الويفي في الاول او التكست ديكوريشن ستايل في الاول وتكتب مثلا بعدها التكست ديكوريشن كر او القيمه بتاع التكست ديكوريشن كر وتكتب بعدها القيمه بتاعه التكست ديكورشن لاين فعادي جدا مافيش اي اختلاف ولكن طبعا لازم تكون ظاهر الخط نفسه فلو القيمه بتاعه لاين دي مش موجوده اكيد مش هيعمل لك خط من الاساس تمام عندنا قيمه تانيه للتكست ديكوريشن لاين وهي نون طيب نن دي بتلغي الخط نفسه تعال كده لما نشوف ازاي بنستخدمها عندنا تاج الاي وده تاج الانكور التاج ده بيعملك خط من نفسه فلو انا مثلا كتبتلك هنا اي كلمه هيعمل لك هو هنا خط للكلمه دي لو انت عاوز تشيل الخط ده بتيجي عندك هنا وبتنادي على الاي وبتقول قله انا عاوز دلوقتي اجيبلك التكست ديكوريشن واخلي قامتها ن القيمه ن بتشيل لك الخط من الاساس فلو عملتلك هنا ريلود شالت لك الخط عندك بالمنظر ده التكست شادو مخصصه للتكست للنصوص فتعال كده لما نعمل عندنا نص ونكتب جواه اي كلمه تمام وتعال كده لما نشوف نتيجه النص ده وتعال دلوقتي لما نعمل النص ده شادو من خلال التكست شادو هنندي دلوقتي على البرجراف وهندي له خاصيه التكست داش شادو بالمنظر ده التكست شادو بتاخد منك اكتر من قيمه لان انت بتضيف عندك ظل المفروض ان انت بتحدد اللون بتاعه وبتحدد موقعه وبتحدد درجه الضبابيه بتاعته فال تكست شادو بتاخد منك اربع قيم او اربع قيم بيتكتب عندك هنا تعال كده لما نكتب عندنا عننا تعليق فوق هنا نشرح من خلالهم ايه هو التكست شادو هنيجي عندنا كده وهقول لك دلوقتي انا عندي هنا خاصيه اسمها تكست شادو الخاصيه دي بتاخد مني اربع قيم اول قيمه هي الهوريزنتال شادو الهوريزنتال معناها الافقي معناها ان انت بتحرك الشادو في اتجاه افقي وهنشرح الموضوع ده ان شاء الله دلوقتي مع بعض هناخد دلوقتي تاني قيمه وهي الفيرتيكال شادو هشرحلك كل حاجه ما تقلقش الفيرتيكال هو ان انت بتحرك الشادو باتجاه عمودي التت قيمه هي البلور ورابع قيمه هي الكر الكلام ده تعال دلوقتي لما نشوف مع بعض انا قلتلك ان انت اول قيمه بتكتبها هنا هي الهورزنتال شادو فلو انا كتبتلك صفر فدي قيمه الهوريزنتال شادو ولو انا كتبتلك هنا صفر او تاني قيمه دي هي الفيرتيكال شادو وتالت قيمه انت بتكتبها تع كده التث قيمه انت بتكتبها هي البلور ششرح لك دلوقتي كل حاجه والقيمه اللي بعد كده هي الكر فانا ممكن اقوللك مثلا ريد او اورانج او اللون اللي انت عاوزه طيب لو انا جيتلك هنا انت مش هتشوف دلوقتي اي حاجه تعال كده لما نكبر تعال كده بقى لما نحرك عندنا الشادو باتجاه الهوريزنتال اول قيمه عندنا هي القيمه الهوريزنتال او الافقيه او ممكن نقول مثلا خط او محور الاكس فلو انا كتبت لك 10 بيكسل معناه ان انت هتحرك الشادو على محور الاكس اللي هو من الشمال لليمين فهتلاقي دلوقتي الخط ده راحلك شويه كده في اتجاه اليمين بمقدار 10 بيكسل ممكن مثلا تكتب عندك هنا 20 فهي زياده في اتجاه اليمين كده بمقدار 20 بيكسلز ممكن طبعا تكتب اللي انت عاوزه 50 مثلا فهز ويروح عندك هنا في اتجاه اليمين طبعا لو انت عاوزه يروح عندك في اتجاه الشمال بتكتب عندك الرقم بالسالب فلو انا كتبتلك مثلا سالب 10 بيكسل فهحخ 10 بكسل سالب لو كتبتلك 50 تعال كده هيروح عندك باتجاه الشمال بمقدار 50 بكسلز فده خط الهوريزنتال او محور الاكس عندك هنا الفيرتيكال او محور الواي اللي هو من فوق لتحت فلو انا كتبتلك هنا 10 بيكسل تعال كده بس الاول لما نرجع دي نخليها صفر وال 10 بيكسل دي يعني هتنزلها لك لتحت بمقدار 10 بيكسل فلو عملتلك هنا ريلود زتك لتحت بمقدار 10 بيكسل ممكن ان انت مثلا تخليها 30 فهت نزل عندك اكتر نفس الموضوع بالظبط فده الفيرتيكال لو انت عاوز ترفعها لفوق فبت عندك رقم سالب فممكن اقوللك مثلا سالب 10 بيكسل فلو عملتلك هنا ريلود طلعت لفوق بمقدار 10 بكسل ممكن اديلها 20 اكتب انت الرقم اللي انت عاوزه فانتهينا في اول قيمه وتاني قيمه بتتحكم عندك في اتجاه الشادو طيب تعال كده لما نرجعها عندنا نخليها مثلا خم بكسل وهنا مثلا خ بيكسل تمام لو عملتلك هنا ريلود فده شكل الشدو اللي عندك القيمه اللي بعد كده هي قيمه البلار او الضبابيه فلو انا جيتلك هنا وكتبتلك مثلا هنا 10 بكسل هيعملك دلوقتي ضبابيه بمقدار 10 بيكسل لو قللت لك شويه خليتلك مثلا خ وعملتلك هنا ريلود ف الضبابيه قلت شويه ممكن اخليها لك مثلا واحد تمام فهي خيل لك الضبابيه بمقدار واح بيكسل وهنا طبعا اللون ممكن تختار انت هنا اللون اللي انت عاوزه فلو انا كتبت لك هنا بلو هيعمل لك هنا اللون الازرق زي ما انت عاوز طيب كمان برض انت ممكن تضيف عندك اكتر من ظل يعني انا دلوقتي اضفت ظل عندي باللون الازرق في الموقع ده ممكن اجيل لك هنا واعمل لك هنا كوما لازم الكوما دي تمام وممكن ان انا اخد لك دي مثلا كوبي واحطها لك هنا تمام واغير لك بس القيم يعني انا ممكن اديلك هنا في الهوريزنتال سالب خ وفي الفيرتيكال سالب خ بغير بس الموقع مش اكترر وفي اللون مثلا هضيف لك هنا لون احمر فكده هو هيضيف لك هنا ظل في الموقع ده باللون الازرق وظل في الموقع ده باللون الاحمر لو انا جيتلك هنا وعملتلك دلوقتي ريلود اضف لك الظل اللي باللون الاحمر والظل اللي باللون الازرق ممكن اجيلك هنا واضيف لك كمان ظل تاني باللون الاصفر خلي بالك انت ممكن تنزلهم يعني هنا تنظيما للكود بس مش اكتررر وخليلك مثلا الظل ده باللون الاصفر يلو واغير لك مثلا الموقع بتاعه هنا واحد بكسل هنا واحد بكسل واجيلك هنا واعملك دلوقتي ريلود فتم اضافه التلاته شادو طيب ده بالنسبه للتكست او النص افترض دلوقتي ان انا م عنديش نص انا دلوقتي عندي مربع او عندي ديف او عندي اي المنت وعاوز النت ده يكون ليه شادو او ظل هنا ما بنستخدم التكست شادو فالكست شادو موجهه للنصوص فقط لا غير فلو انت عندك هنا ديف هنعمل ديف وهنسيب فاضي ما فيهوش اي حاجه بالشكل ده طبعا هو فاضي مش هيبان عندك اي تاثير للديف تعال كده لما نظهر عندنا الديف هيجيلك هنا وهدي لله مثلا باك جراوند مثلا ريد طبعا برضو هو مش هيظهر ليه مش هيظهر لان مالوش ابعاد ومافيش جوه الدف عندك هنا محتوى فلو انا عملت لك هنا ريلود مش هيظهر عندك ممكن يظهر لو انت كتبت جواه مثلا اي كلمه اي محتوى فبدا دلوقتي ان هو يظهر عندك او انت ممكن تشيل المحتوى وتيجي عندك هنا وتديله طول وعرض تديله ابعاد علشان يظهر عندك فممكن ادي له طول من خلال خاصيه الهايت اديله مثلا طول 100 بيكسل واديله عرض وس 100 بكسل برض فدلوقتي هيظهر لك مربع مكون عندك من طول 100 بكسل وعرض 100 بكسل كده انت بتظهر عندك الف طيب كل ده احنا لسه ما اتكلمناش عن البوكس شادو تعال كده بقى لما ناخد عندنا خاصيه البوكس شادو بالشكل ده الخاصيه دي زي خاصيه التكست شادو بالظبط ولكن بيزيد عليها شويه حاجات كده تعال كده لما نتكلم عليهم فعندنا هنا خاصيه البوكس شادو بتاخد عندك اول قيمه هي الهورزنتال شادو زيها بالضبط زي التكست شادو بالظبط وعندك تاني قيمه هي الفيرتيكال شادو نفس الموضوع وثالث قيمه هي البلور ورابع قيمه بقى هي دي بقى اللي بتزيد وهي السبريد او الانتشار هنتكلم عليها ان شاء الله والقيمه اللي بعدها هي الكلر عاديه جدا وكمان بيزيد عليها حاجه اسمها ال ان ست الكلام ده تعال دلوقتي لما نشرح لك ايه الزيادات دي ونشوفهم دلوقتي مع بعض في البوكس شادو انا قلتلك ان اول قيمه انت بتكتبها هي الهوريزنتال شادو او محور الاكس فهكذا بقى لما نحرك عندنا الشادو اللي هو باللون الازرق ده باتجاه الهوريزنتال او محور اكس اللي هو من اليمين للشمال او من الشمال لليمين فلو انت كتبت عندك رقم موجب هيتحرك عندك في اتجاه اليمين بمقدار 10 بيكسل فلو جيت لك هنا وعملت لك ريلود اتحرك عندك الشادو من اتجاه اليمين بمقدار 10 بكسل نفس الموضوع بالظبط لو انت عاوزه يتحرك في اتجاه الشمال بتكتب عندك هنا رقم سالب تعال كده لما نكتب سالب 10 بيكسلز فتحرك عندك في اتجاه الشمال نفس الموضوع برض في الفيرتيكال فلو كتبتلك رقم موجب هينزل عندك لتحت ولو كتبت لك رقم سالب هيطلع عندك لفوق فلو عملت لك هنا ريلود نزل عندك لتحت بمقدار 10 بكسل ولو انا عاوز ارفعه بكتب عندك رقم سالب فبيت فع عندك لفوق البلر اتكلمنا عليها وهي الضبابيه فلو انا عملت لك هنا 10 بيكسل هيعمل لك ضبابيه بمقدار 10 بيكسل تعال كده لما ابينها لك اكتر هنكتب عندنا هنا واحد بكسل في الفيرتيكال وواحد بيكسل في هوريزونتال فلو عملت لك هنا ريلود فظهر عندك دلوقتي البلور او الضبابيه شايف الضبابيه اللي قدامك دي انت ممكن تتحكم فيها بالقيمه الثالثه اللي انت بتكتبها هنا اما القيمه الرابعه دي بقى هي الانتشار الانتشار لو انا مثلا كتبت لك هنا خمسه بيكسل هيعمل لك انتشار للظل بمقدار خمسه بيكسل شايف بينتشر ازاي لو انا كتبت لك هنا مثلا 10 بص بينتشر بيكبر فلو انا كتبت عمللك هنا 20 انا بجرب معاك لو عملتلك هنا ريلود فبص عمال بينتشر وبيكبر فحاجه الزياده اللي احنا خدناها هي الاسبريد القيمه الرابعه هنا هي السبريد او الانتشار دي انت بتستخدمها مع البوكس شادو طيب ايه موضوع الانس ده في القيمه دي انت بتقول انت عاوز الشادو ده يكون جوه البوكس ولا من بره هو هنا في الطبيعي الشادو عندك من بره لكن لو انا كتبتلك هنا ان ست كده الشادو هيكون عندك من جوه العنصر بص من جوه مش من بره فاهم تعالى كده بس ايه لما نخلي الانتشار مثلا عندنا خمسه علشان بس نكون فاهمين فبص عندنا الشادو عندنا من جوه ليه من جوه لان احنا استخدمنا خاصيه الانس لو انا شلتها هيكون عندك الشادو عندك من بره تمام فالانس بتعمل لك الشادو عندك من جوه الموضوع سهل جدا مش صعب ونفس الكلام اللي قلته على التكست شادو وهو ان انت ممكن تكرر عندك الظل برضو انت ممكن تعمله عندك هنا في البوكس شادو فانا دلوقتي عندي ظل هنا باللون الازرق في الموقع ده ممكن ان انا اجيلك هنا واعمل لك دلوقتي كومه ممكن ننزل تحت عادي جدا وناخد دي كوبي تعال كده بس لما نشيل الانس يعني اختصارا بس للكود واجيلك هنا واعمل لك دلوقتي ظل تاني طبعا لازم الكومه تمام طيب الظل التاني ده انا مثلا هعمله في موقع خمسه بكسل هوريزونتال وخمسه بيكسل فيرتيكال وهخلي مثلا اللون بتاعه باللون الجرين اللون الاخضر فلو جيت لك هنا وعملت لك دلوقتي ريلود مش عارف انت شايفه ولا لا ممكن دلوقتي ابينه لك اكتر باني بس ازود لك الانتشار بتاعه واخليه مثلا 10 بيكسل فلو عملت لك هنا ريلود انت ملاحظ دلوقتي في عندك هنا ازرق وفي عندك هنا اخضر بالمنظر اللي قدامك ده زود بقى طبعا براحتك اعمل اصفر عمل اللي انت عاوزه واعتقد كده الفكره وصلت ليك اتمنى يا رب تكون فهمتها كل المعلومات اللي هتتقال النهارده ان شاء الله هتكون متمحور على فكره تعامل المتصفح مع النصوص بتاعتك الدرس ده هيكون مكون عندنا من جزئين اول جزء هنتكلم فيه عن الرابينج او التفاف النص وهشرح لك كل حاجه وهنشوف المشاكل اللي هتقابل انا وهنصلي معلومات كتيره جدا ان شاء الله في جزء الرابينج اني جزء انء ان شاء الله هنتكلم فيه عن الوايت سبيس او تعامل المتصفح مع المسافات فاحنا دلوقتي محتاجين ان احنا يكون عندنا نص علشان نفهم الكلام ده كله مع بعض هنعمل دلوقتي عندنا ديف اعمل ديف اعمل بارجراف اعمل اتش و اعمل اللي انت عاوزه كلهم بينطبق عليهم نفس الفكره بالظبط انا دلوقتي محتاج ان انا يكون عندي نص فهعمل لك هنا لورم كفايه قوي 30 كلمه لو انت مركز هتلاقي دلوقتي ان ال 30 كلمه دول اتكتب عندك على نفس السطر او على لاين واحد ولكن انا دلوقتي لو جيت علشان اشوف ال 30 كلمه دول هلاقيه دلوقتي نزلوا عندك في سطرين طيب ليه نزلوا عندك في سطرين يعني ليه تعمل لهم رابنج اللي قدامك ده كده اسمهم رابنج اللي حصل ده اسمه راب طيب ليه هو عمل راب وماكملش النص يعني ليه ما حط لكش النص على سطر واحد زي ما انا كتبته ليه نزل لك في سطر جديد والسؤال الثاني الاهم ليه نزل لك في المكان ده تحديدا يعني ماشي يا عم انت دلوقتي هتعمل راب ليه عملت راب في المكان ده يعني ليه مثلا ما عملتش راب في المكان ده او في المكان ده اشمعنى في نهايه المتصفح ببساطه وباجاج بحدود عرض الاب بتاعه والاب بتاع النص عندك هنا هو الديف الدف ده هو اللي موجود في النص اذا النص بيلتز بحدود عرض الديف وعرض الديف عندك في الحاله دي هو عرض المتصفح تمام علشان كده النص عندك التزم بحدود عرض الدف عندك اول ما وصل لنهايه عرض الدف نزل عندك هنا في سطر جديد او عمل لك راب وعلشان نشوف عندنا عرض الديف احنا ممكن نيجي هنا وندي دلوقتي للدف ده باك جراوند هديله دلوقتي مثلا باك جراوند باللون الاصفر انت ممكن تديله اللون اللي انت عاوزه انا هجيلك هنا واعمل لك دلوقتي ريلود ده كده عرض الدف عندك هنا اول ما النص ده وصل عندك هنا لنهايه الديف عمل لك راب ونز لك في سطر جديد طيب في هنا سؤال مهم جدا دلوقتي لو عرض الديف ده ما كانش عرض المتصفح لو مثلا كان عرضه 200 بيكسل لو كان عرضه مثلا لحد المكان ده ايه اللي هيحصل ببساطه هيعمل لك رابنج برض فلو انا جيت لك هنا وعملت لك دلوقتي العرض مثلا 200 بيكسلز وجيت لك هنا وعملت لك دلوقتي ريلود فعرض الديف عندك هنا 200 بيكسلز وبرده النص بتاعك التزم بحدود عرض الديف وعمل لك هنا رابنج طيب ده الديفولت فالو او القيمه الافتراضيه دي حاجه بتحصل من نفسها من غير ما انت تعمل اي قيم في السي اس اس امتى ما بيعمل لكش راب ما بيعمل لكش راب في حاله ان النص ده كان كلمه واحده يعني ما كانش في هنا مسافات بالشكل اللي قدامك ده وتعال كده لما نشوف الموضوع ده دلوقتي مع بعض هنشيل دلوقتي النص اللي قدامنا ده وهنحط هنا مثلا كلمه واحده ايا يكن الكلمه دي مش مشكله المهم دلوقتي ان انا عندي هنا كلمه واحدها طالما انت ما عندكش هنا مسافات يعني ما عندكش هنا مسافه كده بالشكل ده اذا دي كده كلها على بعضها كلمه واحدها الكلمه دي مش هينفع انها يتعمل لها رابنج يعني هو كان نفسه ان هو يعمل لها راب لكن هو ما قدرش ماقدرش لان هي كلمه واحده طيب كل ده بيحصل بشكل اوتوماتيك ازاي انا اتحكم في الموضوع ده تعال دلوقتي بقى لما نشوف الكلام ده دلوقتي مع بعض هنرجع عندنا هنا وهنعمل دلوقتي هنا ال 30 كلمه هقوللك دلوقتي اعمل لي لورم 30 كلمه ده شكل ال 30 كلمه طبعا بعم لهم رابنج والدنيا عندنا تمام و 100 م انا عندي هنا خاصيه في السي اس اس اسمها الوايت سبيس الوايت سبيس ممكن من خلالها ان انت تتحكم في الرابينج ممكن تتحكم في الوايت سبيس نفسها وتعمل بها حاجات كتيره جدا هنتكلم دلوقتي ان شاء الله عن جزء الرابينج طيب دلوقتي القيمه الافتراضيه هي النورمال وده العادي او الطب او القيمه الافتراضيه اللي هو سواء انت كتبتها او ما كتبتها فكده كده كل اللي انت شفته قبل كده من البراوزر هو ده القيمه الافتراضيه اللي هي النورمال اللي هو بيعملك رابنج والدنيا تمام ووم م طيب افرد انا مش عاوز اعمل رابنج بجيلك هنا في الوايت سبيس وبديله خاصيه النو راب بالشكل ده بتكتب عندك هنا نو راب للوايت سبيس وبكده بيعمل لك نو راب يبقى دلوقتي النص اللي انت كتبته ده ما تعملوش راب ماال التزم بعرض الديف بتاعه ولا حتى بعرض البراوزر نفسه فبص عندك كده النص مكمل عندك لحد ما انتهى طيب ده جميل جدا انا دلوقتي عاوز اعمل راب باجي عندي هنا وبكتب عندي نورمال ولكن بتفضل عندي نفس المشكله يعني هو دلوقتي عمل لك راب لكن لو النص ده كان كلمه واحده فهنا هتحصل عندك مشكله او نفس المشكله اللي اتكلمنا عليها من شويه فدلوقتي انا عندي هنا كلمه واح ده تمام وجيت لك هنا قلت لك اعملي نورمال يعني المفروض ان انت تعمل لي رابن ولكن ده مش هيحصل فلو جيت لك هنا وعملت لك دلوقتي ريلود ف خاصيه الوايت سبيس خاصيه مش ذكيه ما قدرتش ان هي تفصل لك الكلمه دي هتفصل امتى في حاله ان هي كانت كذا كلمه يعني لو انت جيت هنا وعملت دلوقتي سبيس تمام وسبيس مثلا هنا فهنا انت عندك ثلاث كلمات فقال لك تمام انا دلوقتي اقدر ان انا اعمل لك رابنج لكن لو هي كلمه واحده حده مش هيقدر طيب هنا بقى نعمل ايه هنا في خاصيه تانيه غير الوايت سبيس ظهرت عندنا في السي اس اس 3 وهي الوورد تعال كده اسمها وورد راب الوورد راب لما انت بتديلها قيمه البريك ورد من اسمها بريك ورد يعني اكسر الكلمه حتى لو كانت كلمه واحده بالشكل ده فلو جيتلك هنا وعملتلك دلوقتي ريلود هيقوللك انا هعمل لك رابنج حتى لو دي كلمه واحده هنا والتزم بحدود عرض الديف فايا يكن بص لو انت كتبتها عندك هنا 600 مره لو هي كلمه واحده طويله جدا جدا جدا وانا جيتلك هنا وعملتلك دلوقتي ريلود ف خاصيه الور دراب لما انت بتديلها بريكورد بتكسر لك الكلمه بتعمل لها راب حتى لو هي كانت كلمه واحده فدي اكثر ذكاء من الوايت سبيس لما انت بتديلها قيمه النورمال طيب كده احنا خلصنا الجزء الاول وهو كلامنا عن الراب اتمنى ان انا اكون وفقت وتكون انت فهمت الجزء ده هندخل دلوقتي ان شاء الله في الجزء الثاني وهو كلامنا عن الوايت سبيس اوعى تكون فاكر ان الوايت سبيس انتهت لحد كده الوايت سبيس مهمه جدا جدا قبل ما نتكلم عليها تعال كده لما نفهم دلوقتي مع بعض ازاي البراوزر بيتعامل مع الوايت سبيس دلوقتي انا لو عندي هنا كلمه عبد الرحمن تمام وعندي تحت هنا عملت دلوقتي شويه مسافات وكتبت لك هنا جمال دلوقتي المتصفح هل هيظهرلك المسافات دي اكيد لا واتكلمنا عن الموضوع ده قبل كده طيب هل انا اقدر اتحكم في الموضوع ده ايوه انا اقدر اتحكم في الموضوع ده من خلال السي اس اس هناخد دلوقتي مثال مع بعض هنكتب هنا لاين 1 تمام واللاين ده هيكون مثلا فيه مان كلمات فهعمل لك لورم 8 تمام ده كده السطر الاول هعملك كمان سطر تاني لاين ت سطر تت لاين 3 سطر رابع لاين فور السطور دي هتظهر ازاي تعال دلوقتي لما نشوف مع بعض لاحظ ان انا عملتهم كل واحده فيهم في سطر لكن لو جيت لك هنا مافيش عندك الكلام ده السطر الاول اهو لحد هنا والسطر التاني قال لك اهو لحد المكان ده والسطر الثالث لحد المكان فين لحد المكان ده والسطر الرابع هنا طيب ليه ما التزمو بالسطور زي ما انا كتبتهم هنا ببساطه لان المتصفح ما بيعمل لكش نيو لاين يعني كل اللاينات اللي انت عملتها دي المتصفح ولا كانك عملتها كمان كل المسافات دي ولا كانها تظهر ولا كانها موجوده اصلا فلو عملت لك هنا ريلود ولا اي حاجه في دي هتظهر عندك طيب ازاي بنظرهم تعال دلوقتي لما نشوف مع بعض اللي بيتحكم لك في الموضوع ده هي خاصيه الوايت سبيس خاصيه الوايت سبيس لو انت اديت لها البري قيمه البري هتظهر لك كل المسافات اللي موجوده عندك هنا شايف كل المسافات دي هتظهر عندك دلوقتي في البراوزر شايف كل المسافات دي ظهرت عندك كمان المسافات اللي انت هتعملها دلوقتي جوه السطور بالمنظر ده هتظهر عندك هنا طالما انت ديت دلوقتي قيمه البري ل الوايت سبيس تمام كل المسافات وكل الحاجات اللي انت بتعملها دي هتظهر عندك في المتصفح بالشكل ده تمام قيمه البري بتعادل بالضبط وسم البري اللي كنا اتكلمنا عنه في كورس الاتش تي ام ال شايف وسم البري اهو خاصيه الوايت سبيس بري بتعادل وسم البري بالضبط لاحظ دلوقتي ان الخاصيه دي ما بتلتزم عندك بالراب يعني بتحط لك النص زي ما انت كتبته بالظبط انت كتبته على لاين واحد فهي هتحطه لك على لاين واحد طيب افرض دلوقتي انا عاوز اظهر عندي المسافات لكن عاوز الكلمه عندي او النص عندي يعمل راب يلتزم بحدود الديفي بتاعه هنا انت بتستخدم عندك خاصيه البي وبتعمل عندك داش وبتكتب عندك راب الخاصيه اسمها بري راب تمام الخاصيه دي بتظهرلك المسافات مع الاحتفاظ با ابعاد الديف بتاعك فالمسافه اهي كلها ظاهره عندك هنا اهي بالمنظر اللي قدامك ده ولكن عامل لك رابنج وملتزم بحدود الديف بتاعك او الاب بتاع النص بتاعك تمام طيب جميل جدا جدا عندك خاصيه تانيه اسمها البري لاين وركز هنا كويس جدا لو انا دلوقتي عملت لك ريلود انت ممكن ما تاخدش بالك فلو عملت لك هنا ريلود هتقول لي طيب فين الفرق او ايه اللي حصل بالظبط تعالى دلوقتي لما نفهم ايه اللي حصل بالظبط خاصيه البري لاين بهدوء شديد بتعمل لك بري في كل مكان الا جوه اللاين يعني ايه الكلام ده تعال دلوقتي لما نشوف هنرجع دلوقتي كل حاجه للاصل زي ما كانت بالظبط او يلا كده اختصارا للوقت شيل عندك كل الكلام ده تمام تمام جدا جدا لو انا دلوقتي عملت لك ريلود ايه اللي هيحصل دلوقتي اللاين الاول ظهر عندك هنا واللاين الثاني واللاين الثالث واللاين الرابع اول ملاحظه عندك ان هو هتلاقيه عامل لك رابنج طيب جميل جدا جدا انا دلوقتي لو عملت لك مسافات هنا هتظهر عندك فلو عملت لك دلوقتي ريلود كل المسافات دي ظهرت عندك ولكن لو عملت لك مسافات جوه اللاين مش هتظهر عندك ايه ده يعني ايه الكلام ده يعني لو جيت لك هنا وعملت لك دلوقتي ريلود ما فيش اي مسافات ظهرت عندك هنا الله ليه الكلام ده لان انت اديت لها خاصيه البري لاين فلاين عندك هنا محافظ دلوقتي على نفسه وكل المسافات دي مش هتظهر عندك غير مسافه واحده بس زي ما موجود عندك هنا طيب لو انت دلوقتي جيت هنا وعملت دلوقتي انتر فكل المسافات دي هتظهر عندك فلو جيتلك هنا وعملتلك دلوقتي ريلود كل المسافات دي ظهرت عندك تمام ووصلت الفكره فهمتوا الموضوع مش صعب هو استخداماته مش كتيره يعني ولكن انا ايه بفهم لك الفكره لعل ان انت حبيت ان انت تست استخدمها في يوم من الايام من خلال الموضوع ده ان شاء الله هننا قش كل حاجه خاصه بالخطوط من اول التحكم في نوع الخط او سمك الخط او حجم الخط او الستايل بتاع الخط او الكابس او حاجات ثانيه كتيره جدا ان شاء الله هنتكلم عليها في السكشن ده ده اول موضوع ان شاء الله هنتكلم عليه في السكشن ده هيكون خاص بنوع الخط هنتعلم ان شاء الله في الدرس ده ازاي نتحكم في نوع الخط من خلال خاصيه اسمها الفونت فاملي فتعالوا دلوقتي لما نشوف مع بعض دلوقتي انا عندي هنا اربعه برجراف انا بس دلوقتي بديلك فكره عن الفونت فاملي لسه مش هنشرح حاجه دلوقتي دلوقتي انا عندي هنا اربعه برجراف عندي هنا كل برجراف مكتوب فيه نفس الكلمه بالظبط اللي هي كلمه هلو ورلد عندي نفس الكلمه دي موجوده هنا وموجوده هنا وموجوده هنا وموجوده هنا ولكن دلوقتي انا لو شفت الكلمه دي هلاقي دلوقتي ان نوع الخط في اول برجراف بيختلف عن نوع الخط الثاني بيختلف عن نوع الخط الثالث بيختلف عن نوع الخط الرابع طيب ازاي دلوقتي بنتحكم في انواع الخطوط هو ده عنوان درس النهارده شيل دلوقتي الكلام ده كله ورجع كل حاجه للاصل وتعال دلوقتي لما نشوف ازاي بنعمل كده علشان تتحكم عندك في نوع الخط بتستخدم عندك خاصيه اسمها فونت داش فا ملي القيمه اللي انت بتديها عندك للخاصيه دي هو نوع الخط فكل اللي قدامك دول هم انواع الخطوط هناخد دلوقتي فكره بسيطه بس من خلال نوع خط اسمه مونو سبيس انا مش بشرح لك المونو سبيس انا بس بدي لك فكره ان انا دلوقتي لو عملت لك ريلود تم تغيير نوع الخط لنوع خط اسمه مونو سبيس ممكن ان احنا نستخدم عندنا خط ثاني وانا مش بشرح لك برده الخط ده كل الكلام ده هشرح دلوقتي ولكن انا بس بوريل لك ان انت ممكن تغير عندك نوع الخط باستخدام الفونت فاملي طيب ايه الخط ده وايه الخط اللي قبله ويعني ايه كلمه فونت فاملي بص يا معلم هي الاول كده اسمها فونت فاملي لان الخطوط عندنا بتتكون عندنا من فاميليز من عائلات فاحنا مثلا بيكون عندنا عائله من الخطوط بيندر تحتها مجموعه من الخطوط كل الخطوط دي بتشترك في صفات معينه علشان كده اسمها عائله فمثلا عشان بس اقرب لك الفكره احنا عندنا عائله اسمها سان سريف وعندنا عائله تانيه اسمها سريف انا بديلك فكره بس مش اكتر اللي بيميز عائله سريف العاديه ان كل الخطوط اللي فيها بتشترك في صفه وهي ان بيكون فيها نتوق نتوق كده شايف النتوءات اللي قدامك دي كل الخطوط اللي في عاليه سريف بيكون فيها النتق دي وده الخط الرسمي يعني انت مثلا لو بتعمل موقع حكومي او موقع رسمي فبت استخدم فيه نوع الخط اللي من عائله سريف وهشرح لك الكلام ده دلوقتي بالتفصيل الممل عندنا عائله ثانيه اسمها السانس ريف كلمه سانس ريف بالمناسبه يعني هي كلمه فرنسيه فكلمه سنس هي بدون والسف نتوءات فكلمه سنس ريف هي بدون نتوء فكل الخطوط اللي من عائله سنس ريف هي خطوط بدون نتوءات ودي خطوط بتحسها شبابيه اكثر ممكن تستخدمها لو انت بتعمل موقع شبابي او موقع شخصي او موقع مثلا لديزاين او لفكره جديده وكده ممكن تستخدم فيها الخطوط اللي من عائله سنس ريف وطبعا عندنا عائلات ثانيه كتيره جدا طيب انا عاوزك تفهم نقطه مهمه جدا دلوقتي الخط اللي انت بتكتبه هنا وليكن مثلا خط المونو سبيس الخط اللي انا كتبته ده مش هيشتغل عند المستخدم الا لما يكون الخط ده موجود في الجهاز بتاع المستخدم فلو الخط ده مش موجود في الجهاز بتاعه ولو المستخدم فتح الموقع بتاعك الخط ده مش هيشتغل عنده طيب منين بنجيب الخطوط بص يا معلم احنا عندنا نوعين من الخطوط خطوط اسمها ويب سيف فونت يعني خطوط امنه للاستخدام في الويب وهي اسمها كده لان غالبا هتكون موجوده في كل اجهزه المستخدمين طيب بنجيبها منين ممكن دلوقتي نروح هنا في جوجل ونكتب ويب سيف فونز تمام ونضغط هنا على انتر هنلاقي دلوقتي ان اول لينك عندنا هنلاقي عندنا هنا السي اس اس ويب سيف فونز هتلاقي عندك هنا كل الخطوط اللي قدامك دي وممكن دلوقتي لو انا رحت لك هنا على فول باك فونز هلاقي دلوقتي عندك هنا كل الخطوط اللي انت ممكن تستخدمها الخطوط اللي من عائله سريف الخطوط اللي قدامك دي كل الخطوط دي بتندر عندك تحت عائله سريف كل الخطوط اللي قدامك دي وبيكون ده الشكل بتاعهم بتلاقي عندك هنا نوقات والكلام اللي اتكلمنا فيه من شويه عندنا كمان عائله سانس ريف هتلاقي عندك كل الخطوط دي من عائله سنس ريف هتلاحظ دلوقتي ان كل الخطوط دي ما بيكونش فيها نقات بالشكل اللي قدامك ده عندك عائلات ثانيه برض عائله المونو سبيس بيكون عندك الخط ده وبيكون ده شكل الخط اللي قدامك عندك عائلات ثانيه كتيره جدا جدا كل الخطوط دي خطوط امنه للاستخدام يعني انا لو جيت لك هنا واستخدمتها لك دلوقتي هتلاقي دلوقتي ان الخط ده غالبا بنسبه كبيره موجود في كل اجهزه المستخدمين وهيشتغل عندهم طيب كل الخطوط اللي قدامك دي هي خطوط امنه للاستخدام دام يعني ممكن تجيب عندك هنا اي خط وتاخده عندك هنا كوبي وتروح عندك هنا في الفونت فاملي بالشكل اللي قدامك ده وتحطه عندك هنا وتستخدمه لانه بنسبه كبيره جدا هيكون موجود في كل اجهزه المستخدمين طيب قبل ما ندخل في النوع الثاني من الخطوط لازم تفهم يعني ايه كلمه فول باك فونس كلمه فول باك فونس يعني الخطوط الاحتياطيه يعني ايه الكلام ده يعني بص يا معلم دلوقتي انا مش ضامن ان الخط ده يكون موجود في الجهاز بتاع المستخدم فانا دلوقتي بقول له لو الخط ده كان موجود عندك تمام طب لو ما كانش موجود لو ما كانش موجود انا هضيف لك خط تاني فهعمل لك هنا كه وهكتب لك مثلا خط تاني اسمه سانس داش سريف بالشكل ده اللي انا عملته ده او الكه اللي انا عملتها دي معناها ان انا بقول له لو الخط ده موجود عندك اشتغل بيه طب لو ما كانش موجود لو ما كانش موجود انت عندك هنا خط فول باك او خط احتياطي الخط ده مش هيشتغل غير في حاله ان الخط ده ما كانش موجود في الجهاز بتاع المستخدم انت في العادي لو جيت هنا علشان تبص وضغطت على كنترول سبيس كنترول سبيس بتجيب لك كل الاقتراحات اللي موجوده عندك فهتلاقي دلوقتي ان كل الخطوط اللي هو بيقترح لك بيكون فيها علامه الكومه علامه الكومه دي معناها تعال كده لو احنا اخترنا الخط ده معناها ان الخط ده هو اللي بيشتغل طب لو الخط ده ما كانش موجود خلاص الخط ده هو الخط الاحتياطي اللي بيشتغل لو الخط الاول ما اشتغلش علشان كده بيحط حط لك علامه الكها طب لو الاثنين دول ما كانوش موجودين يبقى خلاص الخط الثالث هو اللي بيشتغل هتلاقي دايما بيحط لك خطين ثلاثه ساعات كده كمان بيحط لك اربعه زي ده مثلا حطط لك هنا خط والثاني والثالث والرابع طيب في ملحوظه دلوقتي مهمه جدا دلوقتي انت هتلاقي عندك الخط ده في علامه تنصيص والخط ده في علامه تنصيص اما ده ما فيهوش وده ما فيهوش طيب ليه طيب انا هديلك الفرصه ان انت تكتشف بنفسك وتعرف ليه هنا في الخطين دول في علامه تنصيص اما في دول ما فيش علامت تنصيص انا طبعا هجاوب ولكن انا هديلك الفرصه ان انت تكتشف كده بنفسك تبص كده وتكتشف الخطا فين او المشكله فين او ليه هنا في علامات تنصيص وهنا ما فيش علامات تنصيص هعد من واحد لخمسه وبعد كده هجاوب انا بنفسي 1 2 3 4 5 ببساطه علشان السبيس علشان المسافات طالما انت عندك نوع خط الخط ده الاسم بتاعه متكون عندك من مسافات فبتحب عندك في علامات تنصيص طب لو انت ما حطيتو لو انت ما حطيتو بيكون شكله بالمنظر اللي قدامك ده هتلاقي حتى عندك هنا لون الخط باللون الابيض وهنا لون الخط باللون الابيض اما هنا باللون الاورنج اللي قدامك ده دول مش خط واحد علشان تخليهم خط واحد بتحطهم عندك في علامه تنصيص بالشكل ده طيب ليه انت هنا ما حطيتش ببساطه لان ما فيش عندك هنا سبيس ما فيش سبيس عندك في الكلمه فمش لازم تحط عندك النوع ده في علامه تنصيص وكذلك هنا برده طيب اللي اتكلمنا عنه ده اسمه الويب سيف فونس او الخطوط الامنه للاستخدام في الويب طيب افرض دلوقتي انا في خط تاني عجبني مش موجود في الخطوط الامنه دي ولكن انا عاوز استخدمه بشكل امن وبشكل كويس اعمل ايه عندنا حاجه اسمها جوجل فونز بتروح عندك هنا وبتكتب دلوقتي جوجل فونز جوجل بتوفر لك مجموعه كبيره جدا من الخطوط وبتعرف ازاي تستخدمهم بشكل كويس فنح عندنا هنا على جوجل فونز هنلاقي هنا مجموعه كبيره جدا جدا من الخطوط ومش هيفرق شكل الديزاين اللي ظاهر عندك هنا ممكن يظهر عندك بعد فتره تانيه ديزاين مختلف يعني ممكن يكون غيروا الديزاين بس هي هي نفس الفكره هتلاقي عندك هنا سيرش فونس ممكن ان انت مثلا تبحث عن نوع خط اللي انت عاوزه ممكن تكتب هنا اسم الخط وهيطلعلك هنا بالشكل ده كمان عندك هنا حاجه اسمها تايب سامسن يعني ممكن دلوقتي تكتب هنا اي كلمه والكلمه دي بتظهر عندك شكلها قدامك هنا كمان ممكن تبحث عن الخط اللي انت عاوزه من خلال الكاتيجوري بتشوف العائله اللي انت عاوزها عائله سريف عائله سان سريف عائله ديسبلاي كل العائلات اللي موجوده عندك كمان انت ممكن تبحث عن نوع الخط اللي بيدعم لغه معينه فممكن دلوقتي انا لو كتبت لك كلمه باللغه العربيه ما نلاقيش ان كل الخطوط بتدعم اللغه العربيه فمثلا الخط ده بيدعم اللغه العربيه ولكن الخطوط التانيه دي ما بتدعم اللغه العربيه لو انت دلوقتي عاوز تبحث عن ال الفونس اللي بيدعموا اللغه العربيه بس بتيجي عندك هنا على لانجويج وبتضغط عندك هنا على ارابيك فهيج لك كل الخطوط اللي بيدعمه العربيه بس بالشكل ده طبعا الانترنت عندي ضعيف شويه المهم ان كل الخطوط اللي قدامك دي بتدعم اللغه العربيه طيب انا دلوقتي عجبني مثلا خط معين وعاوز دلوقتي ان انا اشتغل بيه ممكن اقول لك مثلا ان انا عجبني اي واحد مثلا الخط ده تمام فده اسم الخط ده الخط المفروض اللي انت انت بتكتب اسمه عندك هنا في الفونت فاملي فعلشان دلوقتي تستخدم عندك الخط ده بتضغط هنا عليه وبيقول لك ان هو ده شكل الخط بالمنظر اللي قدامك ده لو انا نزلت لك هنا هيوري لك دلوقتي شكل الخط باوضاع مختلفه كمان برض انت ممكن تكتب انت هنا كلمه والكلمه دي اختبر لك شكلها بالخط ده فممكن اكتب لك مثلا كلمه تانيه السلام عليكم ايك الكلمه ديدي ممكن دلوقتي اصغر لك هنا بس علشان تشوف الكلمه ب الشكل اللي قدامك ده في خطوط بيكون حاطط لك هنا اكت من ستايل الخط ده في ستايل واحد بس علشان تستخدم الستايل ده بتيجي عندك هنا على الكلمه دي وبتضغط عليها اللي هي كلمه ريجولار 400 بتضغط دلوقتي على الكلمه دي فبي فح لك الجنب اللي قدامك ده لو الجنب ده ما فتحش وكان موجود عندك بالشكل اللي قدامك ده بتضغط عندك هنا على العلامه دي اللي هي علامه السلكت فاملي او الخطوط اللي انت اخترتها لو انت اخترت عندك اك اكتر من خط هتلاقيهم عندك موجودين في الجنب اللي قدامك ده تقدر ان انت تحذف هنا الخطوط اللي انت اخترتها او تضيف عندك هنا خطوط بالمنظر اللي قدامك ده علشان دلوقتي تستخدم عندك الخط ده عندك طريقتين يا اما طريقه اللينك يا اما طريقه الامبورد وهشرح لك الطريقه دي وهشرح لك الطريقه دي هنستخدم الاول طريقه اللينك هتلاقي حطط لك هنا كود اتش تي ام ال وتحت هنا كود سي اس اس كود السي اس اس اللي هو الفونت فاملي العادي جدا اما الكود الاتش تي ام ال هو واسم اللينك اللي هتلاقيه موجود عندك في الهيد عندك هنا واسم اللينك اللي قدامك ده واسم اللينك ده تعال كده لما ناخد دلوقتي الكود ده كوبي كده على طول ونحطه عندنا في وسم الهيد انا بفكرك ان دي طريقه اللينك بتاخد عندك دلوقتي الكود ده كوبي وبتروح عندك هنا في وسم الهيد بالمنظر اللي قدامك ده في العادي انت ممكن تلاقيه حط لك وسم لينك واحد بس او حط لك لاثه بالمنظر اللي قدامك ده عادي جدا ما فيش اي مشكله كل اللي انت بتركز عليه هو الوسم اللي قدامك ده هتلاقي الوسم ده في عندك هنا اتش ار اي اف وهتلاقي عندك هنا ريل هتلاقيها بالمنظر اللي قدامك ده ريل ستايل شيت لان ده ملف ستايل شيت واللينك اللي قدامك ده اللي هو الاتش ار اي اف هو ده سيرفر جوجل اللي بيجيب من خلاله الخط اللي انت اخترته طيب الخط ده انا دلوقتي عاوز اشتغل بيه فبت جي عندك هنا وبتاخد دلوقتي الفونت فاملي وبتروح تحطها في العنصر اللي انت عاوز تضيف ليه الخط ده بتضيف عندك هنا الفون فاملي واسم الخط اللي انت اخترته طيب تعال هنا لما نكتب كلمه باللغه العربيه هنكتب هنا مثلا السلام بكتبه ده هنكتب هنا السلام عليكم بالشكل اللي قدامك ده طيب تعال هنا بقى لما نعمل ريلود تم اضافه عندنا الخط بالمنظر اللي قدامك ده طيب الطريقه الانيه تعال دلوقتي لما نشوف عندنا الطريقه الثانيه اللي هي اسهل بكتير من الطريقه دي او زيها يعني ما فرقتش كتير الطريقه الثانيه هي الابور بتيجي عندك هنا وبدل ما بتختار عندك اللينك بتختار عندك هنا الامبورد هتلاقيه دلوقتي حطط لك هنا كود الابور جوه وسم الستايل عاوز يقوللك ان انت ممكن تاخد دي كده كوبي وتحطها عندك في وسم الهيد في صفحه الاتش تي ام ال بالشكل اللي قدامك ده بتحطها عندك في وسم الستايل وانا عارف اللي بيتكتب في وسم الستايل هو سي اس اس يعني انا ممكن اخد عندك الكود ده كات واروح احطه عندك هنا في صفحه ال سي اس اس فوق عندك هنا في المكان ده يعني ايه الكلام ده يعني انا ممكن اشيل لك الكلام ده كله بالراحه كده وبهدوء نشيل عندنا دلوقتي الاستايل ممكن نيجي عندنا هنا وبدل دلوقتي ما ناخد عندنا الستايل كله ممكن ناخد عندنا الكود اللي جوه الستايل اللي هو كود الامبورد وناخده ونحطه عندنا في صفحه السي اس اس بالشكل اللي قدامك ده هتلاقيه هنا بيقوللك امبورت اعمل لي استدعاء لخط معين من اليو ار ال ده اللي هو اليو ار ال بتاع الس فر بتاع جوجل اللي من خلاله بنجيب عندنا الخط ده وهنا طبعا بنستخدم عندنا نفس كود السي اس اس اللي هو لو انا رحتلك هنا هلاقي دلوقتي ان هو هو نفس الكود انا بستخدمه عندي هنا في المكان ده هي هي نفس الفكره بالظبط فلو عملتلك هنا ريلود هو هو نفس الخط مافيش مشكله الكلام اللي انا قلته لك ده بينطبق عندك على كل خطوط جوجل هتلاقي عندك هنا خطوط كتيره جدا وهتلاقي عندك ساعات كده بيكون في خطوط بيكون ليها اكتر من ستايل تعال كده لما نجيب مثلا الخط ده اللي هو خط ليه منادى هتلاقي ان هو ده شكل الخط بالمنظر اللي قدامك ده وهتلاقي هنا شكل الخط باكتر من ستايل انت ممكن تكتب هنا الكلمه اللي انت عاوزها ممكن تكتب عبد الرحمن يعني من غير بقى كلام كتير احنا فهمنا يعني تعال كده لما نصغر عندنا دي هنلاقي دلوقتي ان الخط ده له اكتر من ستايل الستايل اللي قدامك ده اللي هي 700 و600 و500 ده سمك الخط او الفونت ويت هنشرح ان شاء الله في دروس متقد ولكن انا بس بديلك فكره علشان لما تشوفها ما تتلخبطش هي هي عاديه جدا دلوقتي انت لو اخترت عندك مثلا خط انا دلوقتي مثلا عجبني الخط ده جيت علشان اختاره خلي بالك ان هو يختاره بالاضافه للخط الاول اللي هو الخط اللي انت كنت مختار الخط ده والخط ده لما انت دلوقتي تيجي علشان تعمل امبورت هيعملك امبورت للخطين فخلي بالك امسح عندك الخط الاول واكتفي عندك بالخط التاني علشان ما يكونش حمل على الموقع بتاعك دلوقتي انا عندي هنا برجراف مكتوب في كلمه وعندي هنا برجراف مكتوب فيه نفس الكلمه وبرجراف تالت مكتوب في نفس الكلمه بالظبط فتته مكتوب فيهم نفس الكلمه ولكن لو انا شفتهم دلوقتي قدامك هلاقي دلوقتي ان اول برجراف الحجم بتاعه او السايز بتاعه اصغر من البرجراف التاني اللي الحجم بتاعه او السايز بتاعه اصغر من البرجراف الثالث طيب ازاي ده حصل يعني ازاي انا اتحكمت في الفونت سايز بتاع الخط ده ببساطه بساطه هو ده عنوان درس النهارده فتعالوا دلوقتي لما ندخل عندنا في السي اس اس علشان نعرف ازاي بنتحكم عندنا في الفونت سايز دلوقتي تعال كده لما نعمل عندنا هنا ريلود علشان بس نرجع كل حاجه للاصل ودلوقتي انا عاوز اتحكم في الفونت ده فالفن الاول ده او البرجراف الاول ده انا كنت مديله اي دي اسمه تكست 1 فدلوقتي هنندي عليه هكتب لك هنا هاش لان ده اي دي والاي دي كان اسمه تكست و وتعال دلوقتي لما نتكلم في الفونت سايز علشان تتحكم عندك في الفونت سايز بتاع الخط فبتكون داش سايز بالشكل اللي قدامك ده انا ممكن دلوقتي اديلك هنا 20 بيكسل كنوع من التجربه بس مش اكتر فلو عملتلك هنا ريلود هيتحكم لك دلوقتي في حجم الخط ويخليه 20 بيكسل ممكن اخليه مثلا 40 بيكسل فلو عملت لك هنا ريلود هيكون عندك 40 بيكسل ممكن اصغره لك جدا جدا جدا واخليه مثلا 10 بيكسل فلو عملت لك هنا ريلود هيكون عندك 10 بيكسل لازم تفهم ان انت مش بتكتب البكسل بس انت عندك ودات قياس كتيره جدا ممكن تستخدم اللارج او اللارج او الميديم او السمول او السمول او الاكس لارج او الاكس سمول او الاكس اكس لارج او الاكس اكس سمول او حتى الفلميه او كل وحدات القياس الممكنه كل وحدات القياس دي هيكون ليها درس ان شاء الله بعد كده هتعرف يعني ايه البكسل وايه الفرق ما بين البكسل والفيليه وايه الفرق ما بين الا ام والبيكسل والفرق ما بين الفيو بورد وكل وحدات القياس دي فكل وحدات القياس دي ان شاء الله هتشرح بعد كده ما تقلقش الفكره ان انا عاوز اوصل لك ان انت ممكن تستخدم كل وحدات القياس الممكنه وتعال كده لما ناخد دلوقتي مثال عملي اكتر من المثال ده هعمل لك هنا براجراف والبراجراف ده هيكتب لك فيه كلمه هلو والكلمه الثانيه هحطها لك دلوقتي في سبان تمام وهكتب لك هنا الكلمه دي طيب ده جميل جدا جدا ده الشكل اللي قدامك تعال كده لما نكبره هقوللك دلوقتي انا عاوز الكلمه دي تكون اكبر من الكلمه دي الكلمه اللي محطوطه عندك في الاسبان تكون اكبر من الكلمه التانيه فعلشان نتحكم في السبان المفروض ان احنا ننادي دلوقتي على الاسبان فجيل لك هنا واقوللك دلوقتي ناديلي على الابان وانا هتحكم في الفونت سايز وهقول لك دلوقتي انا عاوز الكلمه دي تكون لارج لارج يعني كبيره لو عملت لك هنا ريلود هتلاقي دلوقتي ان الكلمه دي كبرت بشكل بسيط جدا لو عاوزها تكبر بشكل اكبر بكتب عندي هنا لارجر فلو عملتلك هنا ريلود هتكبر بشكل اكبر ممكن اكبرها اكتر من كده واكتب لك هنا اكس داش لارج مش لارجر فبتكون هتلاقي الكلمه كبرت عندك ممكن اكتب لك هنا اكس اكس لارج لو عملتلك ريلود هتلاقي الكلمه كبرت اكتر من ما كانت عليه تمام كمان برضو عندك هنا السمول نفس الوضع بالظبط فانا ممكن هنا اكتبلك اسمول لو عملتلك هنا ريلود هتلاقي كلمه صغيره ممكن اكتبلك هنا سمولر لو عملتلك هنا ريلود هتلاقي الكلمه اصغر طبعا سمولر بتكون اصغر من الكلمه التانيه تمام بتكون الكلمه دي اصغر من الكلمه التانيه كمان برضو ممكن اكتبلك هنا اكس داش سمول لو عملتلك هنا ريلود هتصرخ عندك بالشكل ده فانت ممكن تستخدم الكلام ده او وحدات القياس العاديه وده الافضل الافضل ان انت تستخدم عندك وحدات القياس العاديه زي البكسل او الاي ام او كل وحدات القياس دي طيب قبل ما نتكلم على وحدات القياس المفروض ان انا اكون عارف الديفولت فو او القيمه الافتراضيه يعني دلوقتي قبل ما انا اديلها الفونت سايز دلوقتي الفونت سايز اللي ظهر قدامي ده هو عباره عن ايه بالظبط ماهو انا لازم اكون فاهم تمام فتعال كده لما نفهم دلوقتي مع بعض الفونت سايز بتاعه البراجراف طبعا البراجراف او الاسبان او حتى الكلمه العاديه فممكن اقوللك بدل البرجراف مثلا النورمال تكست الكلام العادي اللي هو مثلا سواء برجراف او حتى بتكتب كلمه عاديه بالشكل ده لان الكلمه العاديه السايز بتاعها هو نفس سايز البراجراف فلو عملتلك ريلود السايز ده هو نفس السايز ده بالظبط طيب النورمال سايز الديفولت فالو بتاعه بيكون تعال كده 16 بيكسل لو انت بتستخدم عندك البكسل كوحده قياس وهنج الموضوع ده دلوقتي مع بعض ما تقلقش طيب لو انت مثلا بتستخدم الاي ام وحده قياس تانيه فهي بتكون واحد اي ام تمام بتكون عندك واحد اي ام الواحد اي ام بيعادل عندك برض 100% ه يعني ايه الكلام ده يعني دلوقتي البراجراف او النورمال تكست اللي انت بتكتبه كده كده بيكون واخد عندك قيمه افتراضيه 16 بيكسل ال 16 بكسل دي هي وحده قياس وحده قياس بتعادل عندك اي ام او واحد اي ام الواحد اي ام ده بيعادل عندك 100% من حجم الفونت سايز اللي موجود عندك في البراوزر تيجي دلوقتي لما نجرب تعالوا دلوقتي لما نجرب مع بعض فدلوقتي انا لو جيتلك هنا وتعال كده لما نجيب عندنا البراجراف وهقول لك دلوقتي انا هديلك فونت سايز مثلا 16 بيكسل المفروض ان دي القيمه الافتراضيه يعني المفروض ما يتغيرش عندك فلو عملتلك هنا ريلود مافيش اي تغيير حصل عندك تمام تمام جدا طيب لو اديت له واحد اي ام تعال كده لما نجرب واحد اي ام فلو عملتلك هنا ريلود برضو مافيش اي تغيير حصل طيب لو اديت له 100% تعال كده لما نشوف 100% فلو عملتلك هنا ريلود مافيش اي تغيير حصل لان دي القيمه الافتراضيه طيب ده بالنسبه لايه ده بالنسبه للبرجراف والكلام العادي اللي بيكون موجود عندك في الموقع بتاعك اما بالنسبه للاتش 1 مثلا فاتش 1 تعال كده الاتش 1 بيكون عندك 32 بيكسل ده الديفولت فالو وال 32 دي بتعادل عندك 2 اي ام تمام اللي بتعادل عندك برضو 200 في اه الكلام ده تعال دلوقتي لما نشوف دلوقتي مع بعض لو انا جيت لك هنا وكتبت لك هنا اتش و كتبت لك فيها اي كلمه ايا يكون فالكلمه اللي انت كتبتها دي من غير ما تعمل اي حاجه تعال كده بس لما نصغر عندنا البراوزر الكلمه اللي انت كتبتها دي بتاخد عندك قيمه افتراضيه 32 بيكسل او 2 اي ام او 200% ممكن دلوقتي نجرب الموضوع ده من غير ما نكتب دلوقتي اي فونت سايز ممكن ان انا اجيل لك هنا كليك يمين ثم انسبكت لو وقفت لك دلوقتي على الاتش 1 هلاقيه دلوقتي واخد عندك فونت سايز 2 اي ام ده بشكل اوتوماتيك من غير ما انت تعمل حاجه المتصفح نفسه او اليوزر ايجنت هو اللي اداله القيمه دي تمام طيب جميل جدا تعال دلوقتي برض لما نجرب دلوقتي مع بعض لو انا جيتلك هنا وقلتلك جيبلي الاتش 1 واديله دلوقتي مثلا 2 و بيكسل المفروض ان دي القيمه الافتراضيه يعني مش هيتغير فلو جيتلك هنا وعملتلك دلوقتي ري مافيش اي تغيير حصل كمان برض الاتنين اي ام تعال كده الاتنين اي ام لو عملتلك هنا ريلود مافيش اي تغيير هيحصل طبعا انت لو كتبت عندك اي قيمه تانيه يعني مثلا 2 ونص هتلاقي دلوقتي تغيير فلو عملتلك هنا ريلود هتلاقي دلوقتي الحجم عندك كبر تمام لكن الاتنين اي ام هي الديفولت فو لتش 1 كمان برض ال 200% 200% فلو عملتلك هنا ريلود هي هي بالضبط طبعا انت لو كتبت عندك 220 هتلاقي مثلا الحجم كبر عندك بالشكل اللي قدامك ده تمام طيب اخيرا كده نصيحه لوجه الله لو انت بتستخدم البراجراف ما تحاولش ان انت تديله الفونت سايز بتاع العناوين او الاتش 1 ما تحاولش تخلي البراجراف عنوان او العنوان براجراف يعني لو انت بتستخدم الاتش 1 ما تجيش هنا وتقوللي انا هخليه مثلا 16 بكسل تمام اللي هو ليه طب ما تستخدم البرجراف بقى في الحاله دي فاهم النهارده ان شاء الله هنتكلم عن خاصيه جديده في السي اس اس وهي الفونت ستايل الفونت ستايل بتتحكم في ميلان الخط بتاعك تعال دلوقتي لما نعمل عندنا هنا براجراف ونكتب جواه هنا اي كلمه ايا يكن وتعال دلوقتي لما نجرب عندنا الفون ستايل فقبل ما ندي اي حاجه للبراجراف ده شكل البراجراف بتاعك لو جيت هنا للبراجراف واديتله دلوقتي خاصيه الفونت ستايل بالشكل ده الفونت ستايل بتاخد منك لاث قيم يا اما اتالك يا اما نورمال يا اما اوبليك الاتك بتحولك الخط بتاعك لخط مائل فلو عملتلك هنا ريلود هتلاقي دلوقتي ان الخط ده بقى مايل عندك بالشكل ده مش محتاج اقوللك ان احنا عندنا تاج في الاتش تي ام ال اسمه اي اختصار لكلمه اتالك لو انا جبتلك نفس الكلمه دي وحطيتها لك فيه هتلاقي دلوقتي نفس الافكت بالضبط فلو جيتلك هنا وعملتلك دلوقتي ريلود هتلاقي بالضبط نفس الافكت بتاع الفونت ستايل اتالك احنا كنا شرحنا الاي ده في كورس الاتش تي ام ال عندك خاصيه تانيه وهي الديفولت فالو او القيمه الافتراضيه للفونت ستايل وهي النورمال وده العادي او الطبيعي اللي هو الخط بيكون عندك طبيعي بالشكل اللي قدامك ده عندك كمان خاصيه اخيره اسمها اوبليك كلمه اوبلك ترجمه لكلمه منحرف وهي بتديلك نفس الافكت بالظبط فهتلاقي دلوقتي عملت لك خط مايل او منحرف نفس نفس الافكت ده هو نفس ايفيكت الاتيك بالظبط ولكن الاوبليك هي اقل دعما فانت لو حبيت ان انت تعمل خط مايل استخدم عندك الالك هنتكلم النهارده ان شاء الله عن خاصيه مهمه جدا في السي اس اس وهي الفونت رييان الخاصيه دي مسؤوله عن ان هي بتحول لك الحروف الصغيره لحروف كبيره ولا تستخدم مع اللغه العربيه تعال دلوقتي لما ناخد مثال عن الفونت ريان علشان تكون فاهم انا بقوللك ايه بالظبط هنعمل دلوقتي براجراف ونديله مثلا اي دي اسمه تكست 1 على سبيل المثال فانا دلوقتي عندي براف اللي هو ايدي تكست هكتبلك جواه اي كلمه علشان نقدر ان احنا نختبر عليها الفونت لو انا جيتلك هنا وديتلك دلوقتي على البرجراف اللي واخد ايدي اسمه تكست 1 وقبل ما نكتب هنا اي حاجه تعال كده لما نشوف تاثير الخط العادي فده شكل الخط قبل ما نديله الفونت فلو انا جيتلك هنا واديت له دلوقتي خاصيه الفونت ريان الفونت ريان بتاخد منك قيمتين يا اما نورمال يا اما سمول كابس النورمال هي الطبيعي العادي جدا اللي هو كانك ما عملتش اي حاجه فلو جيت لك هنا وعملت لك دلوقتي ريلود مافيش اي تغيير هيحصل اما القيمه الثانيه وهي السمول كابس فهي بتحول لك الحروف من حروف صغيره لحروف كبيره فلو عملت لك هنا ريلود هتلاقي دلوقتي الحروف اللي عندك هنا بقت حروف ابر كيس هتقوللي طيب وايه الفرق ما بين الخاصيه دي وخاصيه التكست ترانسفورم ابر كيس ماه برضو خاصيه التكست ترانسفورم كانت بتحولي الخط بتاعي لابر كيس هقوللك ببساطه الفونت فرانت بتحولك ا الخط بتاعك لحروف ابر كيس ولكن بتحافظ لك على السايز صغير بعكس التكست ترانسفورم هتقوللي انا مش فاهم ولا كلمه هقوللك تعال دلوقتي لما نشوف الموضوع ده مع بعض هنعمل دلوقتي براجراف تاني ديله اي دي مختلف وي كونتكست ت فدلوقتي ده البرجراف الاول اللي احنا ادينا له خاصيه الفونت ريان وده البراجراف العادي بدون اي اضافات تعال كده لما نستخدم على البرجراف التاني ده اللي هو التكست 2 نستخدم عليه خصيه التكست ترانسفورم اللي اتكلمنا عليها قبل كده وهندي لله دلوقتي قيمه الابر كيس اللي اتعلمناها برض قبل كده الخاصيه دي هتحول لك الفونت ده لحروف ابر كيس ولكن يكون كبير فلو عملتلك هنا ريلود هتلاحظ دلوقتي ان الخط ده اكبر من الخط ده الاتنين بيعملوا افيكت الابر كيس ولكن ده بيكون بحروف صغيره وده بحروف كبيره النهارده ان شاء الله هنتكلم عن الفونت ويت او وزن الخط وزن الخط او الفونت ويت هو قدرتك على ان انت تخلي الخط بتاعك بولد او سميك او ان انت تخليه لايت او رقيق ازاي بنعمل كده تعالوا دلوقتي لما نشوف مع بعض هنعمل هنا برجراف وهنكتب جواه اي كلمه ا يكن وهنعمل هنا ريلود ده سمك الكلمه بتاعتك لو رحتلك هنا في السي اس اس وناديت دلوقتي على البراجراف واديتله خاصيه الفونت داش تيت الشكل اللي قدامك ده الفونت تيت بتقبل منك قيم رقميه نتكلم عليها ان شاء الله شويه كده وكمان بتقبل منك قيمه البولد او البولدر او اللايتر او النورمال وكمان بتقبل منك هنتكلم ان شاء الله على كل القيم دي اول قيمه هنتكلم عليها هيول البولد لو انت ركزت دلوقتي في سمك الخط اللي قدامك ده لو عملتلك هنا ريلود هتلاقي دلوقتي ان الخط بتاعك اصبح بولد بالشكل ده انت عندك تاج في الاتش تي ام ال بتحولك الخط بتاعك لبد بدون تدخل السي اس اس اول تاج عندك واتكلمنا عنه طبعا في كورس الاتش تي ام ال وهو البي التاج اللي قدامك ده لو انا كتبتلك نفس الكلمه هتلاقي نفس الافكت بتاع البولد ظهر عندك هنا بالشكل ده نفس الافكت بالضبط كمان عندك تاج تاني تعال كده عندك برض تاج تاني بيديلك نفس الافكت وهو السترونج نفس الافكت بالظبط فلو عملتلك هنا ريلود هي هي بالظبط طبعا دي تجات ان لاين ف جايين عندك على نفس السطر ممكن ان انا انزلهم لك من خلال البي ار بالمنظر اللي دامك ده عندك كمان تاج تاني مهم جدا وهو الاتش طبعا الاتش 1 او الاتش ت لحد الاتش 6 كل دول بيخلوا الخط بتاعك بولد فلو انا كتبتلك نفس الكلمه تمام تعال هنا لو عملت لك دلوقتي ريلود هتلاحظ دلوقتي ان الكلمه دي بولد ولو انت مش مصدقني ممكن تيجي هنا كليك يمين ثم انسبكت لو انا دلوقتي وقفت لك على الاتش 1 هلاقيه دلوقتي واخد لك هنا تعال كده لما ننزل اهو هتلاقي دلوقتي واخد لك هنا فونت ويت بولد اه يعني هو بياخد عندك الفونت ويت بولد بشكل اوتوماتيك بدون ما انت تتدخل طيب في الحاله دي لو انت دلوقتي عندك عنصر واخد عندك فونت ويت بولد وانت عاوز تشيل منه الفونت ويت بولد بتيجي عندك هنا وبتقولي لو سمحت انا عندي دلوقتي الاتش 1 عاوز دلوقتي الفونت داش ويت يكون عندك ايه بقى يكون عندك نورمال ودي القيمه الافتراضيه هنا دي هتشيلك البولد وهتخلي لك خط عادي جدا بالمنظر اللي قدامك ده تمام فالبلد بتخليل لك الخط بتاعك بولد اما النورمال بتشيلك منه البولد وبتخليه لك خط طبيعي تمام جدا جدا هنتكلم دلوقتي ان شاء الله عن لات عناصر تانيين وهم البولدر او اللايتر او الانهر والتته دول هم عناصر نسبيه يعني القيمه او قيمه السماكه اللي انت بتديها للعنصر بتكون بالنسبه لعنصر تاني يعني مثلا مثلا كلمه بولدر هي كلمه اسمك طيب اسمك من مين ما هي اكيد اسمك من عنصر تاني فهي قيمه نسبيه كذلك اللايتر كذلك الانهر الانهر ترجمه لكلمه الوراثه طب انت بتورث من مين تعال بقى دلوقتي لما نشوف الكلام ده بشكل عملي اكترر امسح الكلام ده كله وتعال هنا لما نتكلم دلوقتي على مفهوم الوراثه وركز معايا لان صدقني والله ما هتلاقي حد بيشرح لك الفونت ويت زي ما انا هشرحها لك دلوقتي دلوقتي انت لما بتعمل عندك هنا سبان الكلام اللي بيتكتب جواها لو انت دلوقتي مثلا كتبت اي كلمه الكلمه دي الفونت سايز بتاعها بيكون ايه والفونت ويت بتاعها بيكون ايه ببساطه السبان بتعمل حاجه اسمها انهرت بتورث القيمه بتاعتها من الاب بتاعها فالاب عندك هنا بيديلك قيمه بشكل باي ديفولت كده الفونت سايز بتكون 16 بيكسل زي ما اتكلمنا قبل كده في درس الفونت سايز والفونت ويت بيكون نورمال فلو انا دلوقتي عملتلك هنا ريلود ده شكل الكلمه بتاعتك ولكن لو السبان ده مثلا كان موجود جوه اتش 1 هنا الموضوع بيختلف لو انا دلوقتي عملتلك هنا سبان وكتبتلك نفس الكلمه بالظبط تمام لو عملتلك هنا ريلود فبص بقى وشوف الفرق ما بين الاسبان اللي موجود عندك جوه الاتش 1 والسبان اللي موجود عندك جوه البادي فال سبان دي وريسيت او عملت حاجه اسمها انهرت ده طبعا بشكل اوتوماتيك من البادي اما السبان دي فهي ورثت عندك الفونت سايز والفونت ويت مش مصدقك يا عبد الرحمن فتعال دلوقتي لما نشوف دلوقتي مع بعض لو انا جيتلك هنا على الابان التانيه وعملتلك هنا انسبكت ووقفت لك دلوقتي على السبان هلاقيها دلوقتي واخده عندك فونت سايز اين اي ام واخد عندك فونت ويت بولد واخداهم منين واخداهم عندك من الاتش و ركز دلوقتي هتلاقي هنا بيقوللك انهرد فروم اتش و ورثت الصفات دي من الاتش 1 فده مفهوم الوراثه وطبعا احنا هنتكلم بعد كده على مفهوم الوراثه ده بشكل كبير جدا ولكن احنا بناخد نبذه بس عن الموضوع ده الموضوع ده انت ممكن تتحكم فيه بكذا طريقه تعال دلوقتي مثلا لما نعمل هنا اتش 1 ونكتب فيها كلمه تمام ونعمل عندنا هنا سبان ونكتب فيها نفس الكلمه بالظبط تمام فهنا الكلمتين هيظهروا عندك بنفس الشكل بالظبط طيب انا ممكن اجيلك هنا على السبان تمام واقوللك لو سمحت جيب لي السبان واديلها فونت ويت بقيمه ايه بقى بقيمه بولدر قبل ما نتكلم خلي بالك في قيم ما بتشتغلش مع كل الحروف او مع كل انواع الحروف اللي هو الفونت فاملي وهنتكلم ان شاء الله عن الموضوع ده شويه كده كلمه بولدر دي معناها ايه كلمه بولدر معناها اسمك طيب اسمك من مين اسمك من الاب فانا دلوقتي بقوللك انا عاوز الاسبان تكون اسمك تكون بولدر زان الكلمه التانيه اللي هو الاب بتاع العنصر ده اللي هو الاتش 1 نفسه طبعا انا دلوقتي لو عملتلك ريلود انت مش هتلاقي اي فرق هتقوللي طب ليه ما بتشتغلش هقوللك لان هي ما بتشتغلش مع كل الحروف تعال كده هنا لما نجيب دلوقتي كل العناصر وندي لهم فونت فاملي مختلف فهقولك دلوقتي خد فونت فاملي مثلا سيستم داش يو اي الخط ده ممكن يشتغل معاه وممكن خط تاني يشتغل معاه اكتر وهو السانس داش سيرف ده هيشتغل معاه وهيبان لك اكتر لو انا دلوقتي عملتلك هنا ريلود هتلاحظ دلوقتي ان الكلمه دي اسمك من الكلمه دي لو انا فتحتلك هنا بص الكلمه اللي هي الاسبان بولدر زان الكلمه التانيه اللي هي موجوده عندك في الاتش 1 طبعا عكسها تماما هي اللايتر لو انا جيتلك هنا وقلتلك دلوقتي لايتر هتلاقي دلوقتي ان الكلمه دي لايتر الكلمه دي اقل سماكه او ارق من الكلمه الثانيه طبعا مش كل القيم بتشتغل عندك مع كل انواع الحروف ففي انواع حروف مابيشتغلش معاها الكلام ده خالص وما بتقبلش منك القيم دي تمام طيب ايه بقى الانهر الانهر ببساطه هي الوراثه الهرت تعال كده ال انهرت ببساطه هي الوراثه يعني انا هنا بقوللك اورث لي القيمه دي من الاب بتاعي فلو عملتلك دلوقتي ريلود هتلاقي دلوقتي ان القيمه دي بالظبط بتساوي عندك القيمه دي هتقول لي طب استنى طب ما هو كده كده الابان بيعمل انهرت من نفسه يعني كده كده الابان ده بيعمل انهرت من الاب بتاعه ليه انا استخدم عندي الهرت هقوللك ماشي السبان بيعمل انهرت ولكن في عناصر تانيه ما بتعملش انهرت فانا ممكن مثلا اجيلك هنا وناخد دلوقتي مثال تاني فممكن دلوقتي اعمللك ديف الديف انا عارف ان هو بيعمل انهرت يعني هياخد دلوقتي الصفات بتاعته من الاب فلو انا كتبتلك هنا مثلا اي كلمه ف الكلمه دي بتاخد عندك الفونت سايز والفونت ويت من البادي او من الاب بتاع العنصر ده لكن دلوقتي انا لو جيت جوه الديف وكتبتلك هنا الاتش 1 فاتش 1 ما بيعملش انهرت مش هياخد الصفات بتاعته من الاب لا لو انا مثلا كتبت لك هنا هلو مثلا نفس الكلمه بالظبط وعملتلك هنا ريلود فاتش 1 بيكون ليه فونت سايز وفون ويت مختلف لو انا دلوقتي عاوز الاتش 1 يعمل انهرت من الاب بتاعه بجيلك هنا وبقول لك دلوقتي جيبلي وخليه دلوقتي يعمل انهرت من الاب بتاعه طبعا الانهر ده في الفونت ويت بس مش الفونت سايز فدلوقتي انا لو عملتلك هنا ريلود هتلاقي دلوقتي ان الفونت ويت بقى نورمال كمان نفس الفكره موجوده في الفونت سايز انا ممكن دلوقتي اديلها هنا انهيت فلو عملتلك هنا ريلود هتورث دلوقتي الفونت سايز من الاب بتاعها اللي هو الف تمام تمام جدا جدا جدا تعال كده لما نرجع ونرجع هنا كل حاجه للاصل فلو عملتلك هنا ريلود ده الشكل اللي قدامي كمان عندنا حاجه تانيه وهي الانال الانشي بالشكل ده الانشي بترجع لك الكلمه ولا كان فيها بولد ولا كان فيها اي حاجه بترجعها لك للقيمه الديفولت القديمه اللي مش هتلاقي فيها اي بولد خالص ما بنستخدمها كتير لاننا مش بحاجه للكلام ده تعال بقى دلوقتي لما ندخل في القيم الرقميه وهو ده الموضوع كله تعال كده لما نتكلم دلوقتي ونشوف دلوقتي مع بعض الفونت ويت تعال كده لما نعمل عندنا تعليق علشان الموضوع ده مهم جدا جدا الفونت ويت ممكن تقبل منك قيم رقميه من 100 لحد 900 ال 100 هي اقل حاجه ممكن نكتبلك مثلا هنا سن اللي هو رقيق يعني وكده و 200 ممكن نقول عليها مثلا سيمي لايت اللي هو نص لايت يعني وكده ال 300 ممكن نقول عليها مثلا انا بسميه لك علشان تبقى فاهم احنا هنعمل ايه دلوقتي ال 300 ممكن نقول عليها لايت 400 ممكن نقول عليها ريجولار اللي هي القيمه العاديه ممكن كمان نقول بدل ريجار ممكن نقول نورمال فاكر قيمه النورمال هي قيمه ال 400 وهنتكلم برض عن الموضوع ده شويه كده كمان عندك هنا ال 500 ال 500 دي بتعادل مثلا الميديم الميد يم طيب ال 600 بتعادل عندك السيمي بولد وال 700 هي قيمه البولد لو كتبتلك هنا بولد وال 800 ممكن نقول عليها اكسترا بولد او الترا بولد ا يكن واخيرا ال 900 هي اكتر حاجه بولد فممكن نقول عليها مثلا هنا مثلا مثلا بلاك اللي هو اكتر حاجه بولد دي القيم اللي بتكون موجوده عندنا وتقدر ان انت تديها عندك للفونت تيت زي ما قلتلك في قيم ممكن تشتغل معاك في انواع من الحروف وفي قيم تانيه ممكن ما تشتغلش فتعال دلوقتي لما نجربهم مع بعض هنعمل عندنا في الاتش تي ام ال تس جمل علشان نختبر عليهم التسع قيم فجيل لك هنا وعملك دلوقتي مثلا بارجراف او تعال كده لما نعمل ديف كنوع من التغيير يعني وكده وهدي لله هنا مثلا اي دي تكست 1 تمام واكتبلك فيه هنا اي كلمه ايا يكن تمام دي اول كلمه عندي او اول جمله عندي هعمل لك هنا جمله تانيه وجمله ثالثه وجمله رابعه وجمله خامسه وجمله سادسه وسبعه وثمانيه وتسعه يبقى انا دلوقتي عندي هنا تسع جمل تعال كده لما نشوفهم قدامنا جميل جدا جدا تعال هنا بقى دلوقتي لما نحط عندنا التنسيقات للتسعينات لك دلوقتي انا عندي اول جمله كانت واخده عندي اي دي اسمه تكست 1 هديلها دلوقتي فونت ويت قيمه 100 تمام يبقى دي اول قيمه عندي تعال كده بقى دلوقتي لما نضيف عندنا تاني واحده اللي هي واخده عندك اي دي تكست 2 وهدي لها هنا 200 وهكذا طبعا عندك هنا كل العناصر دي هنا 3 و هديلها هنا 300 وهنا تكست 4 هديلها هنا 400 ممكن تجر الحته دي لو انت عاوز وهنا 5 اديلها هنا 500 وسريعا كده 6 هديلها هنا 600 وهنا 7 700 و 8 800 واخيرا 9 انا تعبت والله 900 طيب جميل جدا تعال دلوقتي لما نشوف الفرق لو عملتلك هنا ريلود هتلاقي دلوقتي ملاحظه مهمه جدا رقم 100 و2 و300 و400 و500 شبه بعض واللي بعدهم اللي هم ال 600 وال 700 وال 800 وال 900 شبه بعض الله ايه الكلام ده هقوللك لان ببساطه ده الخط العادي اللي ما بيشتغلش عليه اغلب القيم دي لكن لو انا جيتلك هنا وقلتلك مثلا جيبلي كل الديف اللي موجو عندك لان هم كلهم اصلا عناصر ديف ده ديف وده ديف وده ديف وكلهم زي بعض انا ممكن اجيلك هنا واديلك دلوقتي مثلا فونت فاملي مثلا ممكن دول سان سن سيرف تمام لو عملتلك هنا ريلود ممكن دلوقتي تلاحظ الفرق ده هنا ال 900 او البلاك وده الالترا بولد وهنا البولد وعندك هنا السيمي بولد اللي هي 600 ومن اول ال 500 للاخر هتلاقي شبه بعض ممكن نستخدم مثلا خط تاني مثلا وهو السيستم داش يو اي ممكن يبان لك في التاثير اكتر لو انا عملت لك هنا ريلود ممكن تلاقي هنا التاثير بان لك اكتر فهنا ده ده ال 100 200 300 ده ال 400 هتلاقي هنا مختلف شويه عن ال 300 وال 500 مختلف عن ال 400 وهكذا لحد الاخر طيب لازم تفهم ان ال 400 بتعادل عندك النورمال فلو انت شلتها وكتبت مكانها نورمال هي هي بالظبط فين ال 400 هنا ال 400 اهي قدامك هنا لو عملت لك هنا ريلود هي هي بالظبط تمام كمان ال 700 بتعادل عندك البولد تمام فهي هي بالضبط فين 700 ادي دي 900 800 700 لو انا جيتلك هنا وعملتلك دلوقتي ريلود هي هي بالظبط تمام في الدرس ده ان شاء الله هنتعلم الشورت هاند فونت او اختصار الخطوط يعني ايه الكلام ده كلمه شورت هاند او مصطلح شورت هاند انت هتسمعه كتير جدا في السي اس اس كلمه شورت هاند بتعني اختصار انت هتحتاج كتير ان انت تختصر خصائص كتيره جدا في السي اس اس طيب احنا النهارده ان شاء الله هختصر كل الخصائص اللي اتعلمناها في السكشن ده احنا في السكشن اللي هو بتاع الخطوط ده اتعلمنا الفونت ستايل اتعلمنا الفونت ريان اتعلمنا الفونت ويت اتعلمنا الفونت سايز اتعلمنا الفونت فاملي خصائص كتيره جدا جدا لما انت تيجي تديهم لاي عنصر هتكتب سطور كتيره جدا انت ممكن تختصر كل ده بسطر واحد بس السطر ده بيتعمل من خلال خاصيه اسمها فونت الفونت هي الشورت هاند الكود الخصائص اللي اتعلمناها قبل كده فمن خلال الفونت انت ممكن تدي الخمس خصائص اللي انت كنت مديهم قبل كده فعندك هنا الايتك اللي هي قيمه الفونت ستايل انت بتديها برض للفونت ممكن برض على نفس السطر تكتب عندك قيمه الفونت ريان اللي هي السمول كابس كمان برضو ممكن تكتب عندك البولد اللي هي الفالو او القيمه بتاعه الفونت ويت كمان برضو بتكتب عندك قيمه الفونت سايز وكمان بتكتب عندك اخيرا قيمه الفونت فاملي طيب تعالوا دلوقتي لما نفهم مع بعض من خلال مثال عملي هنعمل هنا برجراف وهنكتب جواه هنا اي كلمه تمام فده شكل الكلمه لو انا دلوقتي رحتلك في السي اس اس وناديت على البراجراف وحبيت دلوقتي ان انا اغير الستايل فهقولك دلوقتي فونت داش ستايل عاوز مثلا اخليه اتالك اتعلمنا طبعا الكلام ده كله قبل كده فعملك هنا ريلود اصبح عندك اتالك ممكن كمان اتحكم عندك في الفونت ريان واخليه مثلا سمول كابس لو عملتلك هنا ريلود هيصبح عندك سمول كابس كمان برضو انا ممكن اتحكم لك في الفونت ويت اخليه مثلا بولد فلو عملتلك هنا ريلود هيصبح عندك بولد كمان ممكن اتحكم في الفونت سايز واخليه مثلا 18 بيكسلز لو عملتلك هنا ريلود هيصبح عندك 18 بكسلز كمان برضو ممكن اتحكم في الفونت فاملي واديله اي خط مثلا ممكن نديله الخط ده ايا يكن فلو عملت لك هنا ريلود هيصبح ده شكل الخط بتاعك كل الكلام ده اتعلمناه قبل كده طيب اللي قدامك دي سطور كتيره جدا جدا انا ممكن اختصر كل ده من خلال خاصيه اسمها الفونت بالشكل اللي قدامك ده الخاصيه دي بتديلها الخمس قيم دول بالترتيب اللي انا هقوله لك فلو انا جيت لك هنا وعملت لك دلوقتي تعليق علشان نشرح لك الفكره بشكل اوضح دلوقتي احنا عندينا هنا خاصيه اسمها فونت تعال كده لما نفتح انت بتكتب ايه او بتدي قيمه ايه للفونت دي ببساطه انت بتديلها الخمس قيم دول اول قيمه انت بتكتبها هي قيمه الفونت داش ستايل قيمه الفونت ستايل تاني قيمه هي قيمه الفونت ريان تعال كده لما ناخدها التت قيمه هي الفونت ويت رابع قيمه هي الفونت سايز خامس قيمه هي الفونت فاملي بال الطريقه اللي قدامك دي طيب تعال دلوقتي لما نطبق عندنا نفس الفكره دي عندنا هنا انا قلتلك ان اول قيمه هي قيمه الفونت ستايل يبقى اجيلك هنا واكتبلك ايتك اتالك اللي هي قيمه الفونت ستايل طيب تاني قيمه هي قيمه الفونت ريان فخدها هنا واحطها لك هنا بالشكل ده التالث قيمه هي قيمه الفونت ويت اهي قدامك اهي فانا كتبتلك هنا بولد طيب رابع قيمه هي الفونت سايز فخد لك الفونت سايز واحط لك هنا بالشكل ده خامس قيمه عندك اللي هي قيمه الفونت فاملي فاخد لك دلوقتي الفونت فاملي واحط لك هنا بالشكل ده حافظ على المسافات ما بين كل قيمه والثانيه بالشكل اللي قدامك ده طيب دلوقتي المفروض ان انا لو مسحت لك دول ما يحصلش اي تغيير لو عملت لك هنا ريلود بالفعل ما حصلش اي تغيير اذا الفونت هو اختصار لكل الكلام اللي قلناه من شويه طيب هيجرا ايه لو انا مثلا مسحت قيمه من هنا بص يا معلم افهم الحته دي لان الحته دي مهمه جدا جدا كل اللي قدامك دول مش مطلوبين او مش اجباري غير اخر قيمتين بس اللي هما قيمه الفونت سايز والفونت فاملي يعني ايه الكلام ده يعني لو اي واحده فيهم اتشالت كل دول مش هيشتغلوا عندك سواء الفونت سايز او الفونت فاملي مش فاهم حاجه تعال دلوقتي لما نفهم انا ممكن اجيلك هنا وماكتب مثلا الفونت ستايل ممكن ما اكتبها عاديه جدا مش مشكله لو عملت لك دلوقتي ريلود كله شغال الا الفونت ستايل ممكن كمان اشيل لك الفونت فاريان كله هيشتغل معاك الا الفونت ستايل والفونت رييان كمان ممكن اشيل لك الفونت ويت بالشكل ده لو عملت لك هنا ريلود كله اشتغل معاك اللي هو الفونت سايز والفونت فاملي والباقي كله اتشال من عندك ولكن تعال كده بقى لما نرجع كل حاجه للاصل عندنا بالشكل ده لو انا مسحت لك الفونت سايز او الفونت فاملي كل دول مش هيشتغلوا يعني ايه الكلام ده تعال دلوقتي لما نجرب نمسح عندنا الفونت فاملي لو عملتلك هنا ريلود كل حاجه اتمسحت الفونت ويت والفونت سايز والفونت ريان والفونت ستايل وكل حاجه ما اشتغلتش ليه لان الفونت فاملي اجباري ان انت تكتبها كمان برض الفونت سايز فلو انا رجعتلك الفونت فاملي وشلت لك الفونت سايز وعملتلك هنا ريلود مافيش حاجه اشتغلت عندك لان الفونت سايز والفونت هم اللي اجبار طيب تيجي الملك الموضوع ده كله في كلمتين بص يا معلم الفونت سايز اجباريه لازم تكتبها علشان الفونت دي من الاساس اصلا تشتغل عندك تمام الفونت سايز والفونت فاملي ولكن هل لازم ان انت تكتب عندك الفونت ستايل لا مش لازم هل لازم تكتب عندك قيمه الفونت ريان لا مش لازم هل لازم تكتب عندك قيمه الفونت ويت لا مش لازم الموضوع ده اختياري بالنسبه لك عاوز تدخل القيم دي او ما تدخلها الموضوع ده يرجعلك انت ولكن هل الفونت سايز اجباريه اه اجباريه علشان الفونت دي تشتغل من الاساس هي والفونت فاملي طيب الخمس قيم دول في قيمه سادسه الفونت دي ممكن ان هي تشغلها لك وهي قيمه اللاين هايت اللاين هايت علشان تدخلها بتدخلها مع الفونت سايز طيب ازاي الكلام ده شايف عندك الفونت سايز بتعمل عندك هنا سلاش وهشرح لك كل حاجه ما تقلقش تكتب عندك سلاش ثم لاين هايت او قيمه اللاين هايت عندك في المكان ده بتكتب عندك سلاش في المكان ده انا كده مش فاهم اي حاجه طيب هقوللك استنى انا فاهمك دلوقتي كل حاجه ان شاء الله هنروح دلوقتي الموقع دبليو 3 سكولز وهننزل عندنا هنا هيقوللك دلوقتي ان الفونت هي شورت هاند الكلول الخصائص اللي قدامك دي تعال دلوقتي لما نقراه ونركز دلوقتي في الكلام ده هيقوللك ان انت عندك هنا قيمه الفون ستايل وقيمه الفونت ريان وقيمه الفونت ويت وقيمه ايه بقى قيمه الفونت سايز بتدخل معاها كمان قيمه اللاين هايت وبعد كده اخيرا بتكتب عندك الفونت فاملي طيب ما تدينا مثال يا دبليو سري سكولز هيقوللك انت عندك هنا اهو بتدخل عندك قيمه الفونت سايز وجنبها قيمه اللاين هايت بيفصل ما بينهم السلاش او الفورورد سلاش تعال دلوقتي لما نشوف الموضوع ده بنفسنا اللاين هايت طبعا هي قيمه بتفصل عندك السطور فلازم يكون عندنا كلمه كبيره فيها سطور فهعمل لك هنا لورم 20 كلمه مثلا يعني وهاجي لك هنا وعمل لك دلوقتي ريلود فده شكل ال 20 كلمه تعال كده لما نتحكم فيهم شويه نصغر شويه نخليهم مثلا 10 بيكسل طبعا دي خانه الفونت سايز احنا لسه ما دخلناش عندنا اللاين هايت تمام فانا خليت لك دلوقتي الفونت سايز 10 بيكسل عشان بس تكون شايف عندك السطور كلها بالمنظر ده دلوقتي انا عاوز اتحكم في اللاين هايت من خلال الفونت فبروح هنا على قيمه الفونت سايز هنا بالمنظر اللي قدامك ده وبجيلك هنا وبعمل دلوقتي سلاش زي ما انا كتب لك هنا وبدخل لك بعد كده قيمه اللاين هايت زي ما انا هعمل هنا فهكذا 20 بيكسل بالشكل ده بتدخل عندك قيمه الفونت سايز ثم سلاش وبعد كده قيمه اللاين هايت وبتيجي عندك هنا وبتعمل ريلود فبيعمل لك لاين هايت بمقدار 20 بيكسل ممكن ان انا ابينها لك اكتر بحيث ان انا مثلا اخليها 100 بيكسل فتبن لك اكتر لو عملتلك هنا ريلود فبانت عندك هنا بال الشكل ده يبقى احنا اعلمنا النهارده خاصيه الفونت وهي شورت هاند للفونت ستايل والفونت ريان والفونت ويت والفونت سايز وكمان اللاين هايت واخيرا الفونت فاملي هنتكلم النهارده عن الباك جراوند الباك جراوند هي واحده من اهم الحاجات اللي بتفرق جدا في شكل الموقع بتاعك شايف المواقع اللي قدامك دي هتلاحظ دلوقتي ان اكتر حاجه لفتت نظرك في المواقع دي هي الباك جراوند او الخلفيه بتاعه المواقع دي في مواقع بتحط باك جراوند عباره عن صوره بتفرق جدا في شكل الموقع وفي مواقع بتحط خلفيه مثلا كلون وفي مواقع بتحط مثلا خلفيه مثلا الوان متداخله في بعض كذا درجه لون وبيعمل لهم جريدين او تداخل في الالوان دي وكل الكلام ده ان شاء الله نتعلمه في الدوره دي تعالى دلوقتي لما نبدا مع بعض في فهم كونسبت الباك جراوند هنعمل مع بعض ديف وهنروح ندي خلفيه للديف ده فهني عندنا في السي اس اس وهنادي دلوقتي على الديف ونديله دلوقتي لون كخلفيه فهن استخدم عندنا اول خاصيه وهي الباك جراوند كر ومن اسمها انا لما اقول لك انا محتاج ان انا ادي كر للباك جراوند يبقى دلوقتي انا محتاج ان انا ادي لون للباك جراوند ممكن ان انت تضيف اللون بتاعك بكذا طريقه ممكن ان انت تكتب مثلا لون احمر او ازرق او اخضر او ممكن ان انت تستخدم نظام الار جي بي او الهيكسا ديسيمال او كل الكلام اللي هنتكلم عنه شويه كده ولكن الملخص ان انا دلوقتي لو عملت لك ريلود اللون مش هيظهر ليه لان ببساطه الديف فاضي الديف ما فيهوش محتوى فبالتالي مش هيكون في خلفيه لحاجه فاضيه فتعالى دلوقتي لما نعمل مثلا عندنا هنا اي كلمه فلو عملت لك ريلود بما ان في محتوى فهيكون في خلفيه للمحتوى ده طيب افرد انا مش عاوز كده افرد انا مثلا عاوز ان الديف يكون فاضي ولكن الباك جراوند تظهر فممكن ان انا اجيل لك هنا واحط لك طول ثابت وليكن مثلا 200 بيكسلز حط انت الطول اللي انت عاوزه فبشكل ده بما ان في ابعاد للديف فبشكل ده هيكون في خلفيه هتظهر بالفعل للديف ده طيب انت ممكن ممكن ان انت تضيف عندك مثلا اللون الاحمر او اللون الازرق او اللون اللي انت عاوزه كمان انت ممكن ان انت تيجي على المربع اللي باللون الازرق ده وتختار درجه اللون اللي انت عاوزها درجه اللون اللي انت عاوزها وكمان درجه شفافيه اللون اللي انت عاوزه فهتلاقي دلوقتي ان اللون بتاعك اتحول للنظام الار جي بي كمان برض انت لو ضغطت عندك هنا على العلامه دي هتلاقي ان هي نفس درجه اللون ولكن تتحول معاك لنظام الهيكسا ديسيمال تمام تقدر برض ان انت تختار درجه اللون اللي انت عاوزها بنفس الموضوع بالظبط ودرجه الشفافيه كل اللي انت عاوزه بنظام الهيكسا ديسيمال او بنظام الار جي بي طبعا انا علشان يعني ما نخرجش بره موضوع الباك جراوند هسيب لك ان شاء الله تحت في الدسكربشن فيديو بيشرح لك نظام الار جي بي بالكامل ونظام الهيكسا ديسيمال هتلاقي فيديو ممتع جدا وفيه كل التفاصيل الممكنه عن نظام الار جي بي ونظام الهيكسا ديسيمال طيب كمان برض انت ممكن من خلال الباك جراوند ان انت تضيف عندك صوره للباك جراوند فده انت بتعمله من خلال خاصيه اسمها الباك جراوند ايج طيب دلوقتي ازاي ان انا اضيف صوره للباك جراوند بص يا معلم انا عندي هنا صوره تعال كده لما نفتح عندي هنا صوره وليكن مثلا الصوره دي طيب عاوز دلوقتي ان الصوره دي اللي هي جنب الملف بتاعي عاوز دلوقتي ان الصوره دي اضيفها باك جراوند اعملها ازاي باجي عندك هنا على خاصيه الباك جراوند ايج وبستخدم عندك يو ار ال اليو ار ال ما بين القوسين بتوعها بتحط عندك المسار او الباث او المكان بتاع الصوره بتاعتك اللي انت عاوز تضيفها كخلفيه للديف بتاعك بما ان الصوره جنب الملف بتاعك ف بتكتب عندك هنا اسم الصوره اللي هو ايج دوت بي ان جي طيب تعال كده لما نشوف دلوقتي مع بعض هنعمل هنا ريلود هتلاقي دلوقتي ان الصوره دي تم اضافتها عندك لديف بتاعك ك فييه ولكن هتلاحظ ان الصوره دي تم تكرارها مرتين خلي بالك ان الصوره في الاصل اهي مش متكرره بص شايف الصوره في الاصل بالشكل ده ولكن لما ظهرت عندك ظهرت عندك متكرره مرتين مش بس مرتين انت كل ما هتكبر العرض تعال كده كل ما هتكبر العرض كل ما الصوره هتتكرر عندك شايف كل ما بتكبر العرض كل ما الصوره بتتكرر عندك وكل ما بتصغر كل ما الصوره ما بتتكرر تمام طيب كمان برض كل ما بت كر الطول تعال كده كل ما بتكبر الطول بتاعك كل ما الصوره عندك هتتكرر لتحت فدلوقتي انا مثلا لو عملتلك هنا 600 الطول بتاعك 600 بيكسل هتلاقي دلوقتي ان الصوره دي تم تكرارها وعلشان اوضح لك الموضوع ده اكترر انا لو عامل دلوقتي الخلفيه للبادي نفسه لو انا جيت لك هنا مثلا على بدل ما اقوللك دلوقتي الديف قلت لك اديلي دلوقتي الخلفيه دي للبادي وطبعا شيل عندك الطول واللون سيب دلوقتي الخلفيه الصوره بس مش اكتر واعمل لي دلوقتي ريلود دلوقتي الخلفيه دي خلفيه مين خلفيه البادي اللي هو جسم الموقع نفسه فدلوقتي هتلاقي ان الصوره متكرره عندك بالشكل ده طيب ليه الصوره اتكررت ببساطه الصوره لو هي صغيره لو حجم الصوره بتاعك صغير اللي هو الطول والعرض هتلاقيه في الحته الفاضيه بدا ان هو يكرر لك الصوره بحيث ان هو ما يسيب لكش المكان التاني فاضي طيب لو انا مش عاوز كده لو مش عاوز كده بستخدم عندي خاصيه اسمها باك جراوند ريبيت باك جراوند ريبيت كلمه ريبيت يعني تكرار طيب الفولت فو بتاعها هو ريبيت يعني كرر لي الصوره تمام فسواء انت كتبتها او مكتبتهاش كده كده هو هيكرر لك الصوره طيب لو انا مش عاوز ان هو يكررها بستخدم عندي حاجه اسمها نو ريبيت نو ريبيت لو عملتلك ريلود هتلاقي دلوقتي ان هو مكررش الصوره ولا كررها من ناحيه العرض ولا كررها من ناحيه الطول طيب لو انا دلوقتي عاوز ان هو يكررها مثلا من محور الاكس بس تمام اللي هو يكررها من ناحيه الشمال لليمين تمام اللي هو العرض طيب اعملها ازاي بكتب عندك ريبيت اكس تمام فلو عملت لك ريلود هتلاقيه دلوقتي ان هو كررها من الشمال لليمين فقط اللي هو طبعا على محور الاكس فقط وكمان برض تقدر ان انت تكررها على محور الواي فقط ده لو انت حبيت طبعا تمام طيب هتقول لي انا ايه الاستفاده اصلا عندي من التكرار انا ليه استخدم حاجه تب بوظ لي شكل الموقع بتاعي بالشكل ده هقول لك لا في الحقيقه هي ما بتبوظ لكش شكل الموقع ولا حاجه انت مثلا مثلا هدي لك مثال دلوقتي علشان اوضح لك اهميه التكرار انت لو عندك صوره لون ثابت زي اللون ده فبدل دلوقتي ما تحط مثلا الصوره دي في مكان محدد وتبدا ان انت تحطها مره واثنين وثلاثه واربعه لا انت بتحطها مره وهو بيكرر لك طيب هتقول لي مش فاهم هقول لك تعال دلوقتي لما نحط الصوره دي ونفهم دلوقتي مع بعض انا هقول لك ان انا عاوز عاز احط الصوره اللي هي سوليد دي تمام اللي هي فيها اللون طيب فبتكون مستخدم خاصيه النور يبيت ايه اللي هيظهر عندك اللي هيظهر عندك هو حجم الصوره فقط صوره مش متكرره طيب انا لو كررت الصوره دي لو انا شلت عندك النو ريبيت وخليتها ريبيت اللي هو الديفولت فالو فهتلاقي ان ده اصبح شكل الباك جراوند بتاعك شكل متناسق وقادر ان انت تكون حاجه كويسه كمان مش لازم الصوره تكون لون واحد في صور مثلا زي الصوره دي الصوره دي انا لو كررتها هتبدا ان هي تعمل لك شكل كويس جدا تعالى دلوقتي لما نشوف مع بعض لو انا جيت لك هنا واضفت الصوره الثانيه دي لو انا مش عامل تكرار لو انا مثلا مخليها نور بيت بالشكل ده هتلاقي دلوقتي ان ده شكل الصوره اللي ظهر عندك تعال كده لما نصغر ده شكل الصوره اللي ظهر عندك وهي مش متكرره تعالى دلوقتي لما نكرر الصوره دي تمام لو عملت لك هنا ريلود هتلاقي دلوقتي ان في شكل تعالى كده لما نكبر هتلاقي دلوقتي ان في شكل جميل بدا ان هو يظهر عندك من فكره بسيطه جدا انت ممكن ان انت ما تكتبها اصلا لان هو كده كده بيكرر لك الصوره بتاعتك تمام طيب هتقول لي عبد الرحمن انا اجيب الصور دي منين بالظبط هقول لك انت ممكن ان انت تيجي عندك هنا وتروح ل جوجل وتكتب فيها باك جراوند ريبيت تمام وتيجي عندك هنا في الصور انا برده اخترت الصوره اللي انا اضفتها من شويه بنفس الطريقه دي اللي هي الصوره دي انت ممكن ان انت تختار اي صوره انت عاوزها وتقدر ان انت تحط اشكال جامده جدا وتعمل اللي انت عاوزه بفكره الريبيت بس بفكره التكرار بس طيب تعالى دلوقتي لما نتخطى التكرار وندخل في حاجه ثانيه وهي هي باك جراوند اتاتشمنت تمام تعال كده لما نعمل هنا نو ريبيت ونسيبها عندنا بالشكل ده علشان نوريلك حاجه تانيه اسمها الباك جراوند اتاتشمنت طيب دلوقتي علشان اوريلك الباك جراوند اتاتشمنت لازم ان انا يكون عندي محتوى كبير جوه الموقع بتاعي علشان اقدر ان انا اعمل سكرول فهعمل لك هنا مثلا وليكن لورم 2000 كلمه مثلا هعمل لك هنا 2000 كلمه طيب انا عملت ال 2000 كلمه دول عشان يكون عندي سكرول تعال كده لما نكبر علشان يكون عندي سكرول واقدر دلوقتي ان انا انزل عندك هنا بالشكل ده طيب بمجرد ان انا نزلت الصوره عندك اختفت يعني الصوره عندك اهي فوق عندك بالشكل ده اول ما انت بتعمل سكرول طبيعي وبديه ان هي ايه تفضل عندك فوق انت عمال بتنزل فالصوره عندك فضلت فوق عندك بالشكل ده انا عندي حاجه تانيه اسمها باك جراوند اتاتشمنت تمام باك جراوند اتاتشمنت دلوقتي انا لو اديت تت لها قيمه فيكسد بص بقى يا معلم لو انا عملتلك ريلود ونزلت هتلاقي ان الصوره بتنزل معاك خلي بالك بص اهي لما بنزل بتلاقي دلوقتي ان الصوره ثابته عندك وبتنزل معاك سواء ان انت بقى طلعت بالسكرول نزلت بالسكرول هي كده كده هتفضل ثابته معاك وهتنزل معاك بعكس ان انت تستخدم عندك خاصيه السكرول وده هو الديفولت فالو بتاع الاتش مننت دلوقتي انا لو عملت لك ريلود هتلاقي دلوقتي ان الصوره عندك فوق عندك في المكان ده لو انت عملت سكرول الصوره هتفضل عندك فوق وانت بتنزل وهي ما بتنزلش معاك لما كنت بتعمل عندك فيكسد تمام كانت بتنزل معاك سواء انت هتطلع فوق او هتنزل عندك هنا هتلاقي دلوقتي ان الصوره عندك ثابته عندك في المكان ده وانت بتعمل سكرول هي ثابته عندك وفيكس وبتنزل معاك وبتطلع معاك تمام طيب تعالوا نتكلم على حاجه ثانيه وهي الباك جراوند بوزيشن وعلشان نفهمها هنعمل مع بعض ديف وهنروح ندي خلفيه للديف ده الاول انا محتاج ان انا ادي لله طول زي ما اتفقنا طبعا هقول لك انا محتاج ان انا اديلك مثلا طول وليكن 600 بيكسل وعلشان اظهر بس هعمل لك هنا بوردر وليكن مثلا البوردر ده هيكون 4 بيكسل وهيكون من نوع سوليد وهيكون لونه احمر علشان بس اظهره مش اكتر تمام فظهر عندك هنا مربع بالشكل ده تعال دلوقتي بقى لما نضيف عندنا الخلفيه اللي هي صوره هقول لك دلوقتي مثلا ضيف لي صوره علشان اضيفها طبعا اتفقنا ان احنا بنستخدم اليو ار ال وبنضيف عندنا مسار الصوره فهي مثلا الصوره اللي هي الايمج دي فجي لك هنا واقول لك دلوقتي ضيف لي الصوره اللي اسمها ايج دوت بي ان جي طبعا في البدايه هتكون متكرره عندك بالشكل ده فعلشان اخليها ما تتكررش هستخدم عندك الباك جراوند ريبيت وهقول لك هنا نو ريبيت طيب انت عاوز تتكلم عن ايه دلو دلوقتي بشكل مبدئي كده الصوره جت عندك في الشمال من فوق طيب افرد انا مثلا عاوز اخلي الصوره دي تكون على اليمين او في النص او تحت او في المكان اللي انا عاوزه اتحكم في البوزيشن او موقع الصوره دي ازاي بتعمل كده من خلال حاجه اسمها باك جراوند بوزيشن الباك جراوند بوزيشن هو اللي بيخليك تتحكم في الصوره بتاعتك والموقع بتاعها طبعا بشكل مبدئي انت ممكن ان انت تتحكم فيها من اتجاه الاكس واتجاه الواي بقيمه البكسل فدلوقتي ده قيمه الاكس اللي هو من الشمال لليمين محور الاكس فممكن ان انا اقول لك مثلا روحي من محور الاكس 10 بيكسل فهت احرك عندك من الشمال لليمين بقيمت 10 بيكسل اهو 10 بيكسل ممكن اخليها مثلا تروح بقيمه 100 بيكسل براحتك كمان برض ممكن ان انت تحركها من اتجاه الواي اللي هو من فوق لتحت بمث مقدار 100 بيكسل او القيمه اللي انت عاوزها براحتك بقى العب فيها بقى زي ما انت عاوز 100 200 تعال هنا بقى من الاكس مثلا زودها لي مثلا خليها لي 300 براحتك اعمل اللي انت عاوزه كمان برضو ممكن ان انت مثلا تقول لي انا عاوزها تكون ليفت من محور الاكس تكون على الشمال ومن محور الواي تكون فوق اللي هو اصلا الديفولت اللي هي تكون في المكان ده طيب لو انا مثلا عاوزها تكون في اليمين من فوق فبقول لك تعال هنا وقوللي ان هي هتكون رايت توب يعني رايت من محور الاكس ومن محور الواي هتكون توب طب لو انا عاوزها مثلا رايت من تحت فهقولك ان هي هتكون رايت من محور الاكس ومن تحت يعني بوتوم بالشكل ده تمام وبراحتك كمان برض انت ممكن ان انت مثلا تستخدم عندك كي وورد واحده وهي سنتر فسنتر دي طالما انت كتبت كي وورد واحده يعني هتكون سنتر من الاكس ومن الواي فهتكون في النص بالظبط تمام كمان برض انت ممكن ان انت تخليها مثلا سنتر توب براحتك بقى اعمل اللي انت عاوزه طيب كمان برض انا محتاج ان انا اتحكم في حجم الصوره دي محتاج ان انا اعرف ان انا اكبرها او ان انا اصغرها علشان تعمل كده بتستخدم عندك حاجه اسمها باك جراوند سايز طيب انت ممكن ان انت مثلا تدي للباك جراوند سايز دي مثلا مقدار 100% فدلوقتي حجم الصوره من العرض بتاعها هياخد عندك 100% من عرض الدف بتاعك سواء الدف ده كبير او صغير كده كده بياخد عندك 100% ممكن مثلا ان انا اقوللك 50% فكده هخد منك 50% من عرض الديف تعالى كده حتى لما نمسح عندنا البوزيشن فهتلاقي دلوقتي خدت عندك 50% سواء انت كبرت او صغرت كده كده بتاخد عندك 50% كمان برض انت ممكن ان انت تتحكم في العرض والطول فاول قيمه انت بتكتبها هي قيمه العرض وتاني قيمه انت بتكتبها هي قيمه الطول فدلوقتي انا لو عملت لك ريلود هتلاقيه دلوقتي خد عندك 200 بيكسل من العرض والصوره خدت عندك 100 بيكسل من الطول ممكن ان انا ازود لك الطول مثلا بمقدار 400 بيكسل فلو عملت لك ريلود هتلاقي دلوقتي الطول بتاع الصوره زاد ل 400 بيكسل ممكن كمان ان انا اتحكم في العرض وازود ه مثلا واخليها 300 بيكسل او القيمه اللي انت عاوزها كمان برض انت عندك قيمتين ثانيين مهمين جدا وهما الكونتين والكفر دلوقتي الفرق ما بين الكونتين والكفر هو ان الكفر بيمل عندك حجم الديف بتاعك الصوره بتملا حجم الدف بتاعك سواء الصوره دي باظت ولا ما باظت يعني دلوقتي انت لو حاولت ان انت مثلا تكبر الشكل ده هتلاقي ان الصوره عندك باظت الصوره عندك ملت الطول والعرض ولكن الصوره باظت عندك بالشكل ده الكلام ده ما بيحصلش في الكونتين فالكون اه بتملا عندك العرض او الطول يعني ايه العرض او الطول دلوقتي الكفر ملت عندك الطول والعرض لكن الكونتين ممكن ان هي تملى عندك العرض ولكن لو في لسه مساحه عندك من الطول هو مش هيبوظ لك ابعاد الصوره تاني بهدوء كده علشان نفهم دلوقتي الكفر تعال كده بهدوء وبالراحه الكفر بعمل ايه في الصوره الكفر بتمل الصوره بتملاها من الطول والعرض فكره انها تملاها كده ممكن ان هي تبوظ لك ابعاد الصوره ممكن انها تمط لك الصوره بتاعتك ولكن الكونتين مش كده الكونتين بالفعل بيكون عاوز ان الصوره تملى ابعاد الدف بتاعك ولكن لو ابعاد الدف بتاعك مش متوافقه مع ابعاد الصوره فهو مش هيبوظ لك الصوره علشان يمل لك الديف بتاعك فالكون تين حاولت بالفعل ان هي تغطي الباك جراوند فوصلت للعرض بتاع الديف وصلت بالفعل ان هي تم ملء العرض طب والطول قال لك لا الطول طالما هو اكبر فانا مش همط الصوره مش هبوز لك مش هشد لك كده علشان ابوظ لك ابعاد الصوره الكونتين بتحافظ على ابعاد الصوره طيب لو كان مثلا العرض هو اللي اكبر قال لك خلاص لو العرض اكبر يبقى انا همل لك الطول بالشكل ده انا همل لك الطول ولو العرض اكبر فانا مش هبوز لك العرض علشان خاطر عيونك لا الكونتين ما بتبوظ ابعاد الصوره بعكس ما كفر بتبوظ لك ابعاد الصوره الكفر كل اللي هي يهمها هو ان الصوره تغطي اسمها كفر يعني تغطي ابعاد الديف او الباك جراوند بالكامل مش مهم بقى الصوره دي تبوظ ما تبوظش تتم ما تمطشر بيغطي لك كل ابعاد الباك جراوند بتاعتك طيب خلي بالك في ملاحظه هنا مهمه جدا الملاحظه دي هتكون في الكفر دلوقتي انا لو عملتلك زوم ان بص هتلاقي دلوقتي ان الزوم ان ده بيروح فين بيروح عندك في الشمال من فوق بص لو عملتلك زوم ان او زوم اوت بتعمل لك فين الكلام ده بتروح عندك على الشمال طيب دلوقتي انا مثلا مثلا عاوز استخدم الكفر ولكن عاوز مثلا ان انا لو فتحت من شاشه مثلا تعال كده عاوز دلوقتي ان انا لو فتحت من شاشه مثلا صغيره يكون مثلا الزوم ان والزوم اوت في النص على المين اوبجكت على الكتب اللي موجو عندك في المكان ده ازاي اعمل الكلام ده ببساطه انت بتعمله من خلال الخاصيه اللي اتكلمنا عليها من شويه وهي الباك جراوند بوزيشن انا دلوقتي هقول لك ان انا عاوز الاتجاه او موقع الصوره يكون عندك في السنتر في النص فبكده دلوقتي اي زوم انت هتعمله سواء بقى زوم ان او زوم اوت اللي انت هتعمله كده كده هيكون عندك في النص تمام زوم ان او زوم اوت كده كده هيكون عندك في النص علشان تفهم الموضوع ده اكبر هعمل لك دلوقتي صوره اوضح من كده بكتير تمام فيها مين اوبجكت بالفعل تمام فدلوقتي المين اوبجكت لو انا دلوقتي مثلا مش مستخدم الباك جراوند بوزيشن تمام دلوقتي انا لو عملتلك مثلا زوم ان بص شوف الزوم ان هيروح فين هيروح عندك في المكان ده طيب افرض دلوقتي واحد مثلا فتح من شاشه مثلا صغيره هيظهرله مثلا الشكل ده فما ينفعش طيب نعمل ايه في الموقف ده في الموقف ده انت بتستخدم عندك البوزيشن وبتقوله الاتجاه اللي انت عاوزه دلوقتي انا قلتله هنا سنتر فسنتر دي معناها ان هو هيركز عندك في النص فدلوقتي انا لو عملتلك مثلا زوم ان هتبقى في النص زوم اوت هتبقى في النص طب لو انا عاوز مثلا الزوم ان او الزوم اوت تكون مثلا في اليمين فكتب لك هنا رايت ببساطه شديده تمام فلو عملت لك هنا زوم ان او زوم اوت هتكون عندك في النص بالشكل ده كذلك برض الفت لو انا عملت لك كده وعملت لك زوم ان زوم اوت هتكون عندك في الفت بالشكل ده اخر حاجه هنتكلم عليها واسهل حاجه ما تقلقش يعني هي الباك جراوند اورجين ودي ببساطه بتقول لك ان اي عنصر زي ما اتكلمنا قبل كده طبعا اي عنصر عباره عن بوكس موديل البوكس موديل ده زي ما اتكلمنا قبل كده وقلنا ان هو بيبدا عندك من المحتوى ثم البادنجان ارجع لدرس البوكس موديل طيب ايه علاقه البوكس موديل بالباك جراوند اورجن دلوقتي في سؤال مهم جدا يا ترى الصوره اللي انا حاطتها دي بدات عندك من عند المحتوى ولا من عند البادنجال من عند البوردر ولا من عند المارجن هتقول لي انا مش فاهمك هقول لك بص يا معلم انا دلوقتي لو اديت لك هنا بادينج وليكن 10 بيكسل يعني انا دلوقتي عندي هنا بوردر بمقدار ا بيكسل خليها كمان 10 بيكسل وخليها كمان دوتيد علشان ايه نشوف كل حاجه يبقى دلوقتي انا عندي هنا بوردر بمقدار 10 بيكسل وعندي هنا بادنج بمقدار 10 بيكسل الصوره دي بدات منين هتلاقي دلوقتي ان الصوره دي بدات من تحت البوردر بالظبط بدات عندك من عند البادنجال بتاعه الباك جراوند اورجين القيمه الديفولت بتاعه الباك جراوند اورجين هي الدنج بوكس هي بتاخد عندك بادن بوكس وبتاخد عندك كونتنت بوكس وبتاخد عندك بوردر بوكس البادنجكي ان الصوره دي بتبدا عندك من عند مربع البادنجال عاوزها مثلا تبدا من عند مربع الكونتنت فبكت عندي هنا كونتنت بوكس فلو عملتلك ريلود هتلاقي دلوقتي ان البادج ال 10 بيكسل دول بداوا ان هم يظهروا لان الصوره بتبدا من قبلهم بتبدا عندك من عند المحتوى فدلوقتي انا لو كتبتلك حتى بادنج 100 بيكسل هتشوف ال 100 بيكسل قدام عينك بالمنظر اللي قدامك ده هتلاحظ دلوقتي ال 100 بيكسل لكن انت لو ما كنتش كاتب الكونتنت وكنت كاتب مثلا بادينج بوكس اللي هي بالمناسبه لقيمه الديفولت فهتلاقي دلوقتي ان الصوره دي غطت البادنجان طيب دلوقتي لو انا مثلا عاوز الصوره دي تبدا من عند البوردر بوكس فلو عملتلك ريلود بص هتلاقي دلوقتي ان الصوره دي راحت لعند البوردر بوكس علشان كده انا عملت لك دوتيد علشان تقدر ان انت تشوفها تمام انا لو ما كنتش عامل البوردر بوكس وكنت سايبها على الدن بوكس لاحظ دلوقتي لو عملت لك هنا ريلود هتلاقي ان الصوره نزلت عند الدنج بوكس يعني كانت قبل البوردر بوكس تمام فحطه انت بالشكل اللي انت عاوزه طيب اخيرا يعني علشان نكون لمينا كل حاجه ان شاء الله هنتكلم عن الاختصار او الباك جراوند شورت هاند وده ببساطه بيختصر لك كل دول تعال كده بس لما نرفع عندنا الباتين نرفعها عندنا فوق هنا بيختصر لك كل دول في سطر واحد بس يعني انا ممكن ان انا تعال كده ممكن ان انا اجيلك هنا واقول لك انا عاوز ان انا استخدم عندك الباك جراوند فقط ففي الباك جراوند انا ممكن ان انا اكتب لك كل القيم دول على سطر واحد بالاضافه طبعا لقيمه الباك جراوند كالر بنعملهم ازاي بتيجي عندك هنا وبتكتب عندك قيمه الباك جراوند كر ف بتتي عندك هنا هنا تعال الاول كده لما نشيل عندنا دول او نعملهم على هيئه تعليق علشان ما يظهرو عندنا هنا يبقى دول كده كانهم مش موجودين تمام هنبدا دلوقتي ان احنا نضيف عندنا كل دول من خلال السطر ده بس هنكتب عندنا اول حاجه هي قيمه الباك جراوند كالر فممكن ان انت تكتب عندك ريد اكتب عندك اللون اللي انت عاوزه وبعد كده بتكتب عندك قيمه الباك جراوند ايمج فحط الصوره اللي انت عاوزها فاقول لك دلوقتي يوار ال فحط لك دلوقتي نفس الصوره اللي انا كنت حاططها تمام تعال كده بس لما نفتح عندنا يبقى انا دلوقتي عملت هنا مسافه فقط اضفت عندك الباك جراوند كر وبعد كده اضفت عندك قيمه الباك جراوند ايمج وبعد كده بتضيف عندك قيمه الباك جراوند ريبيت فانا مثلا مش عاوز ان انا اعمل عندك تكرار فجيل لك هنا واكتبلك دلوقتي نو ريبيت نو ريبيت طيب وبعد كده وبعد كده بتكتب عندك قيمه البوزيشن ف ممكن ان انا مثلا اكتب لك ليفت زي ما هي تمام تعال كده ممكن دلوقتي ان انا اكتب لك ليفت زي ما هي طبعا انت اكتب ليفت ممكن ان انت مثلا تكتبها سنتر سنتر ممكن تعمل ايه اللي انت عاوزه تكتبها سنتر تكتبها ليفت تكتب فيها ايه اللي انت عاوزه ولكن لاحظ ان قيمه البوزيشن وقيمه السايز بتفصل بعلامه السلاش مش بمسافه بتكتب عندك قيمه الباك جراوند بوزيشن وبعد كده بتعمل عندك سلاش وبتكتب عندك قيمه الباك جراوند سايز فهقولك هنا كفر بالشكل ده تمام فبكده بتظهر عندك بالشكل اللي قدامك ده طيب وبعد كده وبعد كده انت ممكن ان انت تضيف عندك الباك جراوند اورجن فممكن دلوقتي ان انا اقوللك بادنج بوكس او اللي انا عاوزه فممكن ان انا اجيلك هنا واقوللك دلوقتي بادنج بوكس ولو انا جيت لك هنا هلاقي دلوقتي ان انا من خلال سطر واحد بس اضفت عندك كل الكلام ده كل ده انا كنت عامله عندك بالسطور الكتيره دي لا انا ممكن دلوقتي ان انا اعمل كل الكلام ده بسطر واحد فقط وبس تكمله لدروس الباك جراوند هنتكلم النهارده عن اللينر جريدين او فكره ان انت تدمج عده الوان مع بعض اللي هو بدل ما انت بتحط لون ثابت للخلفيه بتاعتك انت ممكن ان انت تدمج لونين مع بعض او ان انت تدمج عده الوان مع بعض طيب ازاي بنعمل كده تعالوا دلوقتي لما نشوف هنعمل هنا ديف وهنروح دلوقتي علشان دي خلفيه للدف ده فهني جي عندنا هنا وهقول لك دلوقتي انا محتاج الاول ان انا اعمل طول للدف ده وليكن 200 بيكسل وانا علشان كنت اعمل لون ثابت للدف ده كنت بستخدم الباك جراوند كر وكنت بكتب اللون اللي انا عاوزه وليكن مثلا ازرق او وات ايفر يعني اللون اللي انت عاوزه ان انت تحطه فبتحب اللون بتاعك وبالشكل ده انت حطيت لون ثابت ولكن لو انت عاوز تدمج عده الوان مع بعض ما بتستخدم عندك الباك جراوند كر بتستخدم عندك الباك جراوند ايج واستنى عليا هقول لك كل حاجه دلوقتي دلوقتي انت لو فتحت موقع دبليو 3 سكولز احنا عندنا حاجه في السي اس اس اسمها سي اس اس جريدين او التدرج زي ما انت شايف قدامك هنا او زي ما هو موضح لك في موقع دبليو 3 سكولز تمام طيب ازاي بنستخدمها علشان تستخدمها بتيجي عندك هنا على السنتاكس هتلاقيه هنا بيقول لك ان انت علشان تستخدمها بتستخدم عندك الباك جراوند ايمج الباك جراوند ايمج هي اللي بتسمح لك ان انت تعمل تدرج في الالوان عندك بالشكل ده وعلشان تستخدم عندك التدرج بتستخدم عندك اللينر جريدين طيب يعني ايه الكلام ده تعال دلوقتي لما نشوف مع بعض انا دلوقتي علشان اعمل عندي الجرادينت ف بكتب عندي الباك جراوند ا ايج تمام وبعد كده بستخدم عندي اللينر جريدين او التدرج الخطي لينير يعني تدرج خطي طيب ايه اول حاجه انا بكتبها هنا بص يا معلم اول حاجه انت بتكتبها هنا هي الدايركشن او اتجاه التدرج لان انت ممكن يكون عندك تدرج من فوق لتحت او من اليمين للشمال او من الشمال لليمين او في الاتجاه اللي انت بتحدده فاول حاجه انت بتكتبها تعال كده لما اوريك اول حاجه انت بتكتبها هي الدايركشن الاتجاه وبعد كده بتكتب عندك الالوان اللي انت عاوزها سواء لون او اثنين او لاثه او اللي انت عاوزه طيب تعال دلوقتي لما نشوف مع بعض انا قلت لك ان انت اول حاجه بتكتبها هي الدايركشن فانا هقول لك هنا انا عاوز التدرج ده يكون لليمين ممكن ان انت تكتبها لليمين ممكن ان انت تكتبها للشمال تكتبها لفوق تكتبها لتحت للي انت عاوزه وبعد الدايركشن بتكتب عندك الالوان اللي انت عاوز تع اعمل لها جريدين فانا هكتب لك هنا مثلا اللون الاحمر وهقول لك اعمل لي تدرج مع اللون الاخضر ممكن تكتب لونين او لاثه او اربعه او اللي انت عاوزه طيب لو انا عملت لك ريلود هتلاقي دلوقتي ان في تدرج عندك من اللون الاحمر واللون الاخضر للشمال التدرج ده الاتجاه بتاعه للشمال طب لو انا عكست لو انا كتبت لك هنا تو رايت لو انا كتبت لك تو رايت هتلاقيها بدات عندك من هنا وراحت عن عندك لرايت راحت عندك لليمين خلي بالك بدات باللون اللي انت كتبته في الاول بدات باللون الاحمر و راحت عندك يه اتجاه اليمين زي ما انت كاتب لو انا قلتلك تو توب معنى تو توب انها تبدلك من تحت وتطلع لفوق يعني لو عملتلك ريلود هتبدا عندك باول لون انت كتبته وهتطلع عندك لفوق لو انا كتبتلك تو بوتوم بالشكل ده هتروح عندك في الاتجاه المعاكس اللي هو من فوق لتحت خلي بالك ان هو ده الديفولت اصلا يعني لو انت ما كتبتش عندك الدايركشن بالشكل ده هيكون هو ده اصلا الديفولت بتاعك زي ما هو موضح لك هنا قاللك دلوقتي ان الديفولت بتاعك بتاع الدايركشن هو توب تو بوتوم يعني من فوق لتحت قال لك ان هو ده الديفولت فو بتاعك تمام من فوق لتحت طيب افرد انا عاوزها تنزل لتحت على الشمال او لفوق مثلا على اليمين فاهم اعمل الكلام ده ازاي انا ممكن ان انا بدل ما اقول لك تو توب او تو رايت او الكلام ده كله ممكن ان انا اقول لك مثلا تو توب رايت الاتنين مع بعض يعني ايه الكلام ده يعني انا بقوللك ان اتجاه الجرادينت هيكون لفوق على اليمين تو توب رايت فهتلاقي دلوقتي بص بدات من هنا وراحت لفوق على اليمين طيب لو انا عاوزها مثلا تنزل لتحت على الشمال فهكذا لتحت يبقى تو بوتوم ليفت لتحت على الشمال فتنزل لك هنا هتبدا لك من هنا وهتنزل لك لتحت على الشمال طب لو انا عاوزها لتحت على اليمين ف بكتب عندك تو بوتوم رايت وبراحتك اكتب الاتجاه اللي انت عاوزه كمان انت ممكن ان انت تريح دماغك وتكتب عندك الدرجه زي مثلا 90 درجه او 80 درجه او 180 درجه زي ما انت عاوز ممكن ان انت تعمل كده بان انت تقول لي مثلا 90 ديجري تمام 90 ديجري بالشكل ده فلو عملت لك ريلود هيجيب لك 90 درجه بالشكل ده ممكن بقى ان انا العب فيها واخليها 30 تمام ممكن ان انا اخليها مثلا 180 180 درجه زي ما انا عاوز و تال نسيبها عندنا هنا على تو رايت علشان ننتقل للجزئ اللي بعد كده عاوزك تفهم ان انت ممكن الالوان تكون متساويه عندك بالشكل ده او ان انت مثلا تخلي اللون الاحمر ياخد 80% من الباك جراوند عادي جدا ممكن ان انت تيجي هنا عند اللون الاحمر وتقول لي ان اللون الاحمر هياخد عندك 80% فلو عملت لك ريلود هتلاقي دلوقتي ان اللون الاحمر خد عندك 80% ممكن ان انت تكتبها بالفل الميه او ان انت تكتبها بالبيكسل فممكن ان انا اقول لك مثلا 200 بيكسل تمام بالشكل ده او ان انا اكتب لك مثلا هنا 100 بيكسل تمام زي ما انت عاوز طيب عاوزك تفهم ان انت لما بتكتب عندك 50% للون الاحمر و 50% لللون الاخضر ده هنا مش هيعمل اي جريدين تمام مافيش فرصه ان يحصل فيه اي تدرج في الالوان ده اوريدي خد عندك 50% وده 50% لو انت عاوز ان يكون في اي تدرج ف بتتديش ليه التدرج ده فممكن اقول لك مثلا ان اللون الاحمر ياخد 20 واللون الاخضر هي يبدا عندك من 50 هيبدا من 50 للنهايه فاهم ففي فرصه عندك هنا ان يحصل اي تدرج ل الالوان في بعض طيب عاوزك برضو تفهم ان انت ممكن ان انت تحط عندك لونين بالشكل ده او ان انت مثلا تحط عندك لاث الوان بلو او ان انت تحط عندك اربع الوان او خمس الوان او اللي انت عاوزه تمام وبراحتك وزي ما انت عاوز وممكن ان انت ففضل لون معين مثلا وتخليه مثلا ياخد 80% او اللي انت عاوزه انا فهمتك الفكره وانت براحتك ابدا فيها زي ما انت عاوز دلوقتي علشان ما تتلخبطش انت لو كتبت عندك هنا لونين وقلت لي انا هعمل لك ريلود فهتلاقي دلوقتي ان هو قسمهم الاتنين على بعض لو انا مثلا عاوز اللون الاحمر ياخد 90% من حجم الباك جراوند فبالفعل ياخد عندك 90% لكن انا لو عاوز اللون الازرق هو اللي ياخد 90% وكتبت 90% فانا كده غلطان شايف هو هنا ما عمل لكش نفس الافكت طيب ليه الكلام ده ببساطه انا دلوقتي لما بكتب لك هنا 20% دي معناها ايه لما انا بكتب لك هنا في اللون الاحمر 20% ببساطه دي معناها ان انت بتبدا عندك من صفر لحد 20% بما ان ده هو اول لون ده معناها بالظبط ان انت بتقول له انا دلوقتي ببد لك اهو من صفر ببدا عندك من اول هنا لحد 20% خلي بالك اللي بعد كده ده الجرادينت ده التداخل يعني هو مش لحد هنا لا هو لحد ال 20% واللي بعد كده ده هو الجرادينت وبما ان ده اول لون فمش لازم ان انت تكتب صفر يعني سواء هتكتبها او هتكتب 20% ده معناها ان هي 0 20% هو فهمها كده طيب اخر لون بما ان ده اخر لون فالرقم اللي انت بتكتبه هنا لو انا مثلا كتبت 20% بما ان ده اخر لون فبالضغط هيي عند 100% فال 100% دي سواء انت كتبتها او ما كتبتها فكده كده هو هيبدا اهو بص هيبدا من عند ال 20% وهيكمل للاخر هيكمل لحد ال 100% طيب انا مش فاهمك بص يا معلم سيبك انت من كل الكلام ده وهشرح لك بطريقه ثانيه دلوقتي لو انت عندك هنا مثلا ثلاث الوان هم الاخضر والاحمر واللون الازرق تمام وانا دلوقتي حابب ان اللون الاخضر يبدا من صفر لحد 30 بما ان اللون الاخضر هو اول لون فممكن ان انا اكتب 30% بس تمام هو كده فهمها ان هو من صفر لحد 30 فلو انا كتبتها كده تمام هيديلك نفس الافكت ولو انا شلت الصفر برده تمام وهو هو نفس الافكت بالظبط كان انت كتبته لان ده هو اول رقم طيب انا مثلا عاوز ثاني رقم اللي هو اللون الاحمر يبدا من 30 وينتهي عند 50 فهقولك ابدا من 30 وانتهي عند 50 لان ده ثاني رقم فهيبقى عندك من 30 اهو ما فيش اي جريدين لان المكان اللي انتهى عنده اللون الاخضر هو المكان اللي بدا عنده اللون الاحمر دي قيمه ستارت اللي هي البدايه ودي قيمه الاند اللي هي النهايه فانا هنا بقول لك انت هتنتهي عند ال 50% طيب انا عاوز اقول لك ان اللون الازرق هيبدا من 50% فهيك تب لك 50% وهين انتهي فين ممكن ان انا اكتب لك 100% او ممكن ان انا ما اكتبها بما ان ده هو اخر رقم فلو عملت لك ريلود هتلاقي دلوقتي ان ما فيش اي جريدين ما بين اللون الازرق واللون الاحمر لان القيمه اللي انتهى اهو اللي انتهى عندها اللون الاحمر هي القيمه اللي بدا عندها اللون الازرق ممكن لو انا عاوز شويه جريدين اوسع الفرق ما بينهم اخلي مثلا 10% فرق ما بين اللون الازرق واللون الاحمر فهيكون في عندك جريدين بنسبه 10% بالشكل ده طيب قبل ما ندخل في النقطه الثانيه تعالوا دلوقتي لما نعمل اختبار مع بعض هنفتح دلوقتي موقع ونحاول ان احنا نقلد اللينر جريدين بتاعته علشان على الاقل نعرف احنا فهمنا ولا ما فهمناش طيب الموقع اللي قدامك ده طبعا انت هتركز على الباك جراوند سيبك انت من كل الكلام ده والصور وكل ده مش شغلنا انا عاوزك تركز على اللينر جريدين اللي معمول في الباك جراوند هتلاحظ دلوقتي ان هو عامل لينر جريدين بدا عندك من لون معين ايا يكون اللون ده وانتهى عندك بدرجه شفافيه خلي بالك اللي تحت ده مش لون دي درجه شفافيه هنحاول دلوقتي ان احنا نعملها ونشوف هنعرف نعملها ولا مش هنعرف فتعال دلوقتي لما نشوف مع بعض هنفتح عندنا محرر الاكواد بتاعنا وهنشيل عندنا كل الكلام ده طيب انا دلوقتي محتاج ان اللينير جريدين يبدا عندي من فوق لتحت بص من فوق لتحت فهن عندنا هنا وهنفتح المحرر بتاعنا وهقول لك دلوقتي انا عاوزه يكون ل تحت فهقولك تو بوتوم وممكن ان انا ما اكتبها لان هو ده الديفولت طيب انا محتاج ان انا ابدا باللون ده ف انا عملته لك كبي علشان بس ايه ما تضيعش وقت الحلقه وكده ممكن ان انت تحط اي لون تاني مش مشكله المهم ان انا عاوز انتهي لدرجه شفافيه فدر الشفافيه اسمها ترانس بيرنت تمام اسمها ترانس بيرنت طيب لو انا جيت لك هنا و عملتلك ريلود هتلاقي دلوقتي ان عمل لك هنا اهو بد لك بلون معين وانتهى عندك عند درجه الشفافيه اللي انا قلت له عليها النهارده برض ان شاء الله هنتكلم عن نوع جديد من الجرادينت وهو الراديال جريدين او الشكل الدائري اللي قدامك هنا بالمنظر ده تمام انا عاوز اقوللك ان الاتنين ما بيختلفو كتير عن بعض يعني انت لو فهمت الدرس السابق بتاع اللينر جريدين صدقني الدرس ده هيكون سهل بالنسبه لك فيلا بينا دلوقتي لما ندخل في الشرح مباشره هنعمل مع بعض ديف وهنروح في السي اس اس علشان ننادي على الديف ده وندي لله طول علشان بس ان احنا نشوفه وليكن 600 بيكسل تمام وبعد كده علشان نستخدم خاصيه الراديال جريدين بنستخدم عندنا خاصيه الباك جراوند ايج تمام هي هي نفس فكره اللينر جريدين ولكن هنا هنكتب رديال جريدين طيب دلوقتي انا لو جربت ان انا احط لونين بس تمام انا حط لك الاحمر واللون الاصفر فقط لا غير يعني انا دلوقتي استدعيت عندك خاصيه الباك جراوند ايمدج واديت لها الراديال جريدين واديت لها لونين بس ايه اللي هيحصل عندك اللي هيحصل عندك ان هيتعمل لك جريدين ولكن الجرادينت ده اوعى تقول ان هو مدور لا دي مش دائره ده شكل بيضاوي بص سجل الملاحظه دي عندك كويس جدا الشكل ده مش دائري الشكل ده اسمه البس او بيضاوي تمام طيب انت ممكن ان انت تضيف عندك لونين او ثلاثه او اربعه او كل الكلام اللي احنا قلناه على ال لينر جريدين هي هي نفس الفكره بالظبط تمام طيب انا ممكن ان انا اجيل لك هنا تمام تقدر ان انت تضيف عندك كل الالوان اللي انت عاوزها تعال كده لما نرجع عندنا للونين ونسيبها عندنا بالمنظر ده انا قلت لك ان الشكل اللي طلع لك ده شكل بيضاوي او بيميل عندك لاطراف ال مربع بتاعك طيب افرد انا عاوز الشكل ده يكون شكل دائري مش بيضاوي اعمل ايه بتيجي عندك هنا تعال كده لما نفتح عندنا دي وبتيجي عندك في الاول وبتستخدم عندك خاصيه السيركل تمام السيركل اللي هي الدائره وبتيجي عندك هنا وبتعمل عندك ريلود فتحول عندك الشكل ده لشكل دائري تمام بيتحول عندك لشكل دائري الشكل اللي في الاول كان اسمه تمام البس اللي هو الديفولت اللي سواء انت كتبت الكلمه دي او ما كتبتها كده كده بيكون الشكل عندك بيضاوي تمام فلو عملتلك هنا ريلود هيرجعلك للشكل اللي انت كنت شفته قبل ما تكتب عندك اي حاجه بالمنظر ده هي هي نفس الفكره حتى لو انت مكتبتهاش لان الالبس هي الديفولت طيب تعال كده لما نرجع عندنا ل سيركل وتعال كده لما نعمل ريلود لو انت ملاحظ هتلاقي ان الدايره عندك كبيره عندك بالمنظر ده هل انا اقدر اتحكم في سمك الدايره دي او حجم الدايره دي هقول لك ايوه انا ممكن ان انا اجي لك هنا بعد كلمه سيركل واكتب لك مثلا 200 بيكسل خلي بالك ان انت بتكتبها بدون اي فصلات ولا اي حاجه تمام وبتعمل عندك ريلود وتقدر ان انت تتحكم عندك في السمك بتاع الدايره زي ما انت عاوز او في حجم الدايره زي ما انت عاوز تخليها 200 تخليها 400 تعمل اللي انت عاوزه خلي بالك ان انت لو كاتب عندك هنا البس واديت لها 400 بيكسل بالمنظر ده مش هتشتغل عندك ليه لان الالبس ببساطه هو شكل بيضاوي لازم ان انت تدي له طول وعرض الدايره انت كنت ممكن ان انت تديها بعد واحد بس لان كده كده كل الابعاد بتاعتها متساويه دي دايره تمام لكن الشكل البيضاوي لا الشكل البيضاوي ما ينفعش انت بتدي له عندك عرض وبتديله عندك طول وليكن مثلا العرض 200 بيكسل والطول مثلا 400 بيكسل كده هتظهر عندك انا قلت لك ان العرض هيكون 200 والطول هيكون 400 ممكن ان انا مثلا اكبر لك العرض واخليه مثلا 600 فكده العرض عندك هيكبر وهيكون عندك 600 ممكن ان انا اصغر لك الطول مثلا واخليه عندك 100 تمام بالمنظر ده فتقدر ان انت تتحكم عندك في الطول والعرض من خلال ان انت بتكتب عندك هنا العرض وهنا بتكتب عندك الطول طبعا لو القيمتين زي بعض وليكن مثلا هنا 200 وهنا 200 هيكونوا شكلهم شبه الدايره بالمنظر اللي قدامك ده طيب تعالى كده لما نرجع عندنا مثلا للدائره تمام وهندي لها عندنا 200 بيكسل طيب انا دلوقتي ممكن ان انا اتحكم عندك في موقع الدايره دي الدايره دي ظهرت عندك في النص انا ممكن اخليها فوق او على الجنب او تحت او في المكان اللي انا عاوزه الكلام ده انا بعمله من خلال ان انا بجي لك هنا وبقول قلك ات مثلا توب تعال كده حتى لما ننزل عندنا هنا علشان بس تكون شايف كل حاجه بس مش اكترر انا نزلت النازله دي علشان بس تكون شايف الكود بشكل اوضح مش اكتر من كده تمام انا قلتلك هنا 200 بيكسل ات توب بدون اي فواصل ولا اي حاجه انا عملت بس ايه المسافات اللي قدامكم دي طيب انا دلوقتي لما اقوللك ات توب هيطلع عندك فوق بالمنظر ده ممكن ان انا اقوللك مثلا ات رايت ت تمام فهحس بالمنظر ده كمان برضو انا ممكن ان انا اقوللك مثلا تعال على الشمال من فوق تمام يبقى ات ليفت توب دي هتروح فين هتروح عندك في المكان ده لو عملتلك ريلود هتروح عندك في المكان ده ممكن ان انا مثلا اخليها في اليمين من تحت فهكذا او تكتبها انت طبعا في المكان اللي انت عاوزه طبعا انت لو كتبت سنتر واحده بس فهتكون عندك في النص وهو ده اصلا الديفولت فكده كده هي بتكون في النص اصلا بدون حتى ما انت بتكتب كل الكلام ده كله هي كده كده بتكون عندك في النص الفلوت لو انت فهمتها صح صدقني هتكون هي اسهل وامتع حاجه انت هتتعلم الفلوت جميله جدا ولكن بس محتاجه منك شويه تركيز طيب ترجمه كلمه فلوت معناها يطفو والترجمه ما بتختلف عن المعنى كتير فتخيل دلوقتي معايا ان مجموعه من الناس بتغرق في بحر تمام تخيل بس يعني معايا وانت باستخدام خاصيه الفلوت بتخلي الناس دي تطفوا على سطح البحر عارف ان انت مش فاهم فتعال دلوقتي لما ندخل في مثال تمهيدي توضيحي ده مش شرح ده مجرد مثال بس مش اكتر هنعمل في المثال ده لاثه برجراف وبكرر تاني ده مش شرح احنا هندخل في الشرح شويه كده ولكن انا بس بوضح لك وبمه لك فكره الفلوت علشان كل حاجه تكون مبسطه وسهله بالنسبه لك هنروح دلوقتي في السي اس اس وهندي دلوقتي او هندي دلوقتي على البرجرافات دي كلها وهندي لها كلهم كده خاصيه الفلوت بالراحه كده وبهدوء الفلوت بتاخد منك لاث قيم وهي الفت والنان والرات النان هو الديفولت ودي معناها ان انت ما بتديش اي فلوت لاي عنصر طيب قبل ما اقوللك دلوقتي الليفتنانت ان هي تيجي فوق بعض طيب دلوقتي انا لو استخدمت عندك الفت بص ايه اللي هيحصل هتلاحظ دلوقتي ان العناصر اللي هي عناصر بلوك جت جنب بعض جت جنب بعض بدات عندك بالفيرست وبعد كده السكند وبعد كده الثيرد جوم كلهم فين في اتجاه الفت طيب لو انا جيت لك هنا وقلتلك ان انا هستخدم الفلوت رايت ايه اللي هيحصل اللي هيحصل ان العناصر دي جت كلها في اتجاه الرايت اهو بص بدات عندك بفيستر بداوا كلهم باتجاه الرايت طيب انا قلتلك ان انا ما بشرح حاجه ده بس مجرد مثال تمهيدي او توضيحي لفكره الفلوت طيب تفسير اللي حصل ده ايه قبل ما ندخل في شرح تفسير اللي حصل ده ان انت تخيل دلوقتي العناصر البراجرافات اللي عندك دي كانها عناصر بتغرق في بحر تخيلها بس معايا كده قبل ما ندخل في الشرح تخيل دلوقتي ان العناصر دي بتغرق في بحر وانت باستخدام خاصيه الفلوت خليت العناصر دي تطفو وتطلع على سطح البحر افهمها بالطريقه دي طيب انا مش فاهم حاجه تعال دلوقتي بقى لما ندخل في الشرح انسى كل الكلام ده وتعال دلوقتي لما ندخل في الشرح بشكل مباشر هنعمل ديف وهندي له مثلا كلاس هنسميه بيرنت وجوه الديف ده هنعمل مع بعض لاثه ديف كل واحد فيهم مثلا هيكون ليه لون معين فاول ديف مثلا هديله باك جراوند باللون الاحمر فهدي له كلاس هسميه ريد علشان اقدر ان انا انادي عليه في السي اس اس وهعمل ديف تاني هدي له كلاس هسميه جرين برده هونه باللون الاخضر وهعمل ديف اخير هديله كلاس هسميه بلو تمام طيب دلوقتي انا لو رحت عندك في السي اس اس وناديت على البيرنت واديت له باك جراوند باللون الاصفر اللي هو اف اف 0 طبعا البيرنت مش هيظهر او اللون بتاعه مش هيظهر ليه لان دلوقتي البيرنت ده مافيش جواه محتوى مافيش جواه محتوى ومالوش ابعاد يعني مالوش طول علشان كده اللون ده ما ظهرش طيب تعال دلوقتي لما ننادي عندنا على اول عندنا اللي هو اللي باللون الاحمر هقول لك دلوقتي جيب لي الريد واديله باك جراوند باللون الاحمر اللي هو اف 00 وطبعا هو مش هيظهر فتعال دلوقتي لما ندي له ابعاد عرض 50 بكسل ممكن انت تدي العرض والطول اللي انت عاوزه وهدي له مثلا طول 50 بكسل وركز وشوف ايه اللي هيحصل دلوقتي لما انت اديت له ابعاد فبد ان هو يظهر وكمان بديه ان البيرنت اللي شايلهم كلهم يظهر عندك لان دلوقتي جواه محتوى واخد عندك طول فطول البيرنت اصبح بطول المحتوى اللي جواه فلون البيرنت نفسه اللي هو اللي باللون الاصفر ده ظهر عندك تمام تعالى دلوقتي لما ننادي عندنا على تاني عنصر اللي هو الجرين تمام تعالى دلوقتي لما نكتب عندنا هنا جرين وتعال دلوقتي لما ندي له لون اخضر اللي هو ز اف 0 وتعال دلوقتي لما ننادي على العنصر اللي واخد عندك كلاس اسمه بلو ونديله لون ازرق اللي هو ز ز اف طيب دلوقتي انت كل ما بتكبر المحتوى اللي جوه كل ما طول البيرنت نفسه بيكبر معاك لان طول البيرنت بيكبر على حسب المحتوى اللي جوه تمام طيب تعال دلوقتي بقى لما نستخدم عندنا خاصيه الفلوت ونشوف ايه اللي هيحصل بالظبط دلوقتي بدل ما اجيل لك هنا واكتب لك فلوت واجي لك هنا في الاخضر واكتب لك فلوت وهنا واكتب لك فلوت انا هدي لهم كلهم كلاس مشترك علشان بدل ما اكتبها ثلاث مرات اكتبها مره واحده فهدي لهم مثلا كلاس اسميه فلوت انت ممكن ان انت تسميه حماده تسميه اللي انت عاوزه تمام باستخدام الكلاس ده هبدا دلوقتي ان انا اجيلك هنا وانادي دلوقتي على الكلاس اللي اسمه فلوت واديله خاصيه الفلوت انا بدي الخاصيه دي لمين بديها ل لاه ديف دول تمام هدي لهم دلوقتي خاصيه الفلوت ليفت وركز وشوف ايه اللي هيحصل في ملاحظتين مهمين جدا اول ملاحظه ان الثلاثه ديف اللي جوه دول جم جنب بعض باتجاه الفت طبعا انت لو كنت كاتب هنا فلوت رايت كان هيجوا جنب بعض ولكن باتجاه الرايت ولكن مش ده المهم المهم ان البيرنت اختفى اللون بتاعه اختفى طيب اختفى علشان نفهم هو ليه اختفى نفهم هو ليه اصلا ظهر البيرنت اللون بتاعه ظهر لان كان جواه محتوى طيب نفهم من الكلام ده ايه نفهم من الكلام ده ان بما ان هو اختفى بما ان اللون بتاع البيرنت اللون الاصفر ده اختفى يعني المحتوى اللي جوه ده ما بقاش جوه البيرنت لا يا عبد الرحمن انا مش فاهمك اهد كده بالراحه وواحده واحدها الفلوت اللي هي بتعمله ان هي بتخرج لك العناصر دي بتخليها تطفو وتطلع بره المكان بتاعها يعني طلعت بره البيرنت بتاعها فدلوقتي البيرنت ده اصبح فاضي هتقول لي عبد الرحمن والله العظيم انا ما فاهم ولا كلمه هقول لك تعال دلوقتي يا عم ولا يهمك همثل لك الموضوع ده بشكل 3 دي دلوقتي ده المتصفح بتاعنا ولكن بشكل ري دي بحيث بس ان انت تفهم قصدي وتفهم انا عاوز اقول لك ايه دلوقتي ده المتصفح بتاعنا ودي المربعات اللي احنا عملناها وده شكلهم الطبيعي بما ان هم عناصر بلوج فهم بيجوا فوق بعض طيب هيحصل ايه لو انت اديت لاي عنصر فيهم فلوت يعني مثلا لو انا اديت لل المربع اللي باللون الاحمر ده فلوت ليفت ايه اللي هيحصل هيحصل عندك حاجتين اول حاجه هتحصل ان العنصر ده بيعوم بيطفوا لفوق بيطلع لفوق يعني بيعوم يعني بيخرج من مكانه بيطلع من الصفحه فبالتالي بما ان هو طلع من الصفحه بتاعتك فبالتالي العناصر اللي تحته هتطلع مكان هتدخل مكانه هو دلوقتي خرج من المكان بتاعه فكل العناصر اللي تحته هتطلع مكانه طيب دلوقتي انا لو اديت للعنصر اللي باللون الاخضر ده فلوت ليفت برض ايه اللي هيحصل ايه اللي هيحصل نفس الموضوع بالظبط العنصر اللي باللون الاخضر ده هيطفى وهيطلع جنب العنصر اللي باللون الاحمر وطبعا بما ان هو بيطفوا يعني بيعوم يعني بيخرج من مكانه فبالتالي كل العناصر اللي تحته هتطلع مكانه وهكذا لو جربتها على باقي العناصر لو جربتها على كل العناصر يبقى كل العناصر بتاعتك هتخرج من المكان بتاعها تمام فبما ان كل العناصر دي كل الدفات دي خرجت من المكان بتاعها يبقى دلوقتي المكان بتاعها اللي هو البيرنت نفسه ما بقاش جواه محتوى علشان كده هو ما ظهرش فهمت الفكره طيب علشان تفهم الفكره اكتر انت لو كاتب مثلا او عامل عندك هنا برجراف تعال الاول كده بس لما نمسح عندنا الفلوت تمام وتعال هنا لما نعمل عندنا براجراف هكتب لك مثلا جواه اي كلمه تمام البرجراف ده فين البرجراف ده تحت العناصر بتاعتك تحتهم طيب انا لو جيت لك هنا ورجعت الفلوت للعناصر دي ايه اللي حصل اللي حصل ان العناصر بتاعتك التلاته دول اصبحوا دلوقتي فلوت اصبحوا دلوقتي بيطفوا فوق الصفحه يعني خرجوا من المكان بتاعهم فبالتالي البرجراف ده جه بعدهم بالمنظر ده خلي بالك هو جه بعدهم طيب نحل المشكله دي ازاي انا دلوقتي محتاج ان العناصر دي تفضل فلوت ولكن باقي عناصر الصفحه ما تطلعش انا عاوز باقي عناصر الصفحه تفضل تحت زي ما هي هنا بنلحق اني وهو الكلير والكلير هي خاصيه بتفصل لك العناصر دي عن باقي عناصر الصفحه يعني ممكن مثلا نقول بالبلدي شويه انت بتعمل زي جدار جدار او حاجز عندك هنا ما بين العناصر اللي انت بتعمل لها فلوت وما بين باقي عناصر الصفحه بتعمل هنا جدار الجدار اللي انت بتعمله ده او العنصر اللي انت عاوز تديله كلير ده ممكن يكون ديف ممكن يكون اي حاجه في الدنيا تمام فانا مثلا مثلا هعمل ديف هنا ديف فاضي وهدي لله مثلا كلاس الكلاس ده انا مثلا هسميه كلير انت ممكن تدي الكلاس اللي انت عاوزه تمام ممكن تسم هنا اكس براحتك انا بديله بس كلير للتوضيح بس مش اكتر طيب ايه خاصيه الكلير دي لو انا جيت لك هنا وقلت لك انا عاوز العنصر اللي انا اخليه جدار فاصل ما بين العناصر اللي انا اديت لها فلوت و ما بين باقي عناصر الصفحه اللي هو العنصر ده العنصر ده انا محتاج ان انا اديله خاصيه الكلير طيب الخاصيه دي اللي هي الخاصيه اللي قدامك دي بتقبل منك ثلاث قيم يا يا اما رايت يا اما ليفت يا اما بوس طيب الرايت واللفت الموضوع سهل جدا الرايت بتشتغل مع الفلوت رايت وهي زي ما قدامك هنا اشتغلت مع الفلوت رايت عرفت ان اللي قدامك دول واخدين فلوت رايت قامت عملت لك جدار الجدار ده بيشتغل مع الفلوت رايت طيب لو هي ليفت لو هي ليفت خلاص هتشتغل مع الفلوت ليفت فقط ومش هتشتغل مع الفلوت رايت طيب لو هي بوس بوس طبعا الاحسن وهي بتشتغل مع الاثنين سواء الفلوت رايت او الفلوت ليفت فبدو شديد انت بتعمل عندك عنصر العنصر ده ممكن يكون ديف ممكن يكون مثلا براجراف ممكن يكون اللي انت عاوزه بتعمل عندك عنصر وبتدي له الكلاس اللي انت عاوزه وبتروح عندك هنا تدي له خاصيه الكلير وبتقول لي ان انا عاوز الكلير تكون بوس علشان تشتغل مع الفلوت رايت والفلوت ليفت بتعمل ايه الكلير بتعمل لك حاجز ما بين العناصر اللي انت اديت لها فلوت وما بين العناصر او باقي عناصر صفحه هنتكلم النهارده عن الاوفر فلو علشان تفهم الاوفر فلو محتاج ان انت تجاوب على السؤال ده تعمل ايه لو المحتوى بتاعك كان اكبر من الحدود اللي انت حاطه فيها واحد هيقول لي انا مش فاهمك هقول لك طيب دلوقتي انت لو عامل ديف ومدي له طول وعرض وحاطط جوه الديف ده مثلا محتوى تعمل ايه لو المحتوى ده كان اكبر من حدود الديف يعني تعمل ايه لو المحتوى ده خرج بره حدود الديف بتاعك ما خلي بالك دي مشكله ومشكله ممكن ان هي تاثر على التصميم بتاعك وتضربه لك بالكامل طيب عاوز اقول لك ان حل المشكله دي هي الاوفر فلو وتعال دلوقتي لما نشوف مع بعض هنعمل ديف وهنروح في السي اس اس وهندي دلوقتي على الدف ده وهندي لله طول وعرض وليكن مثلا طول 200 بيكسل وعرض 200 بكسل اديله انت الطول والعرض اللي انت عاوزه وهدي له دلوقتي مثلا باك جراوند باللون الاصفر مثلا تمام اديله برضو انت الباك جراوند اللي انت عاوزه وتعال كده لما نديله برضو بوردر 5 بيكسل ممكن ان انت ما تديلو بوردر براحتك برضو هديله دلوقتي بوردر دوتيد وهسيبه بالديف اوت اللي هو اللون الاسود طيب تعال دلوقتي لما نتكلم على الاوفر فلو وهو ده محتوى الدرس بتاعنا طيب علشان تفهم الاوفر فلو محتاج ان انت يكون عندك محتوى والمحتوى ده تراعي ان هو يكون اكبر من حدود الديف بتاعك فهن مثلا وليكن 50 كلمه فبمن ده الكلام بتاعنا بقى اكبر من الديف اكبر من الديف ونزل عندك هنا من تحت كمان برض انا محتاج ان انا يكون عندي كلمه طويله بحيث ان هي تطلع بره حدود الديف من الجنب ده من على محور الاكس تمام علشان اعمل كده هعمل عندك كلمه طويله ما فيهاش اي مسافات انا بعمل كده بس يا شباب للاختبار مش اكتر تمام فهعمل لك مثلا كلمه طويله ايا يكن الكلمه دي خلي بالك ممكن ان انت تحط لينك مثلا او تعمل اللي انت عاوزه المهم ان انا يكون عندي كلمه ما فيهاش مسافات بحيث ان هي تخرج بره عندك هنا علشان اختبر لك الاوفر فلو يبقى انا دلوقتي عندي كلام خارج بره من الجنب ده وعندي كلام خارج بره من الجنب ده طبعا الشكل ده بايظ جدا وما ينفعش ان انت تسيب تصميم عندك بالمنظر ده تعالى دلوقتي بقى لما نحل المشكله دي من خلال الاوفر فلو وهنستخدم عندنا اول حاجه وهي الزبل ودي معناها ان انت هتسيب المحتوى ظه زي ما هو اللي خارج بره هنا يفضل خارج بره واللي خارج بره هنا هيفضل خارج بره طيب عندك حاجه طبعا دي القيمه الديفولت عندك حاجه تانيه وهي الهيدن ودي معناها ان اللي يخرج بره سواء من هنا من على محور الاكس او من على محور الواي هتعمل له هيدن او هتعمل له اخفاء طيب عندك حاجه تانيه وهي السكرول ودي معناها ان المحتوى اللي يخرج بره سواء من على محور الاكس هتعمل له هنا سكرول من على محور الاكس واللي هيخرج بره من على محور الواي هتعم له سكرول من من على محور الواي خلي بالك ان مكان السكرول ده بيفضل موجود حتى لو ما فيش محتوى خرج بره ال الحدود بتاعتك يعني انت مثلا لو ما فيش محتوى خرج بره محور الاكس شايف عندك الشريط اللي باللون الابيض ده فضل برده عندك موجود حتى لو كل الكلام اللي جوه عندك اختفى في عندك شريط اهو بالمنظر ده موجود وفي عندك شريط بالمنظر ده موجود طيب ده معناه ايه ده معناه ان السكرول بتحجز لك المكان بتاعها كده كده سواء المحتوى تجاوز الحدود بتاعته او ما تجاوز كده كده السكرول بتفضل موجوده تمام طيب افرض انت مش عاوز تبوظ الديزاين بتاعك بالمنظر ده في الحاله دي انت عندك حاجه اسمها اوتو اوتو دي معناها ببساطه لو المحتوى تجاوز هيعمل لك سكرول لو ما تجاوز مش هيعمل لك سكرول ومش هيبوظ لك الديزاين طيب هو دلوقتي الاوتو عمل لك سكرول من تحت وسكر من فوق طيب لو ما كانش عندك مثلا محتوى تجاوز من على محور الاكس يبقى مش هيعمل لك سكرول من تحت ولا عمل لك سكرول ولا عمل لك الشريط الابيض اللي كان عامله لك في السكرول خلي بالك لو انت كنت مخلي دي سكرول كان هيعمل لك شريطه بيضا كده اهي من تحت بالمنظر ده طبعا ده بيبوظ لك الديزاين ف يعني مش افضل حاجه الافضل ان انت تستخدم عندك الاوتو الاوتو طبعا بتعمل لك سكرول من على محور الاكس تمام ومن على محور الواي طيب انت ممكن ان انت تتحكم في الاوفر فلو من على محور الاكس بس او من على محور الواي بس الاوفر فلو دي بتتحكم في الاثنين لكن انت ممكن ان انت تيجي هنا واقول لك دلوقتي ان انا عاوز اتحكم في الاوفر فلو من على محور الاكس بس تمام بقول لك اوفر فلو اكس طيب نفس القيم بالظبط انا هنا بتحكم في محور الاكس يعني الكلام اللي بيخرج عندك من محور الاكس فقط تمام ممكن ان انا اقول لك مثلا هيدن ولكن خلي بالك ان هو يخفي لك الكلام ده ولكن الكلام اللي على محور الواي بيعمل له سكرول خلي بالك من المعلومه دي هو بيخفي لك الكلام اللي بيطلع لك من على محور الاكس يعني مش هيعمل لك سكرول من على محور الاكس عمله لك هيدن طب واللي على محور الواي هيعمل لك ليه سكرول بالمنظر ده تمام وتقدر ان انت تستخدم عندك كل القيم كذلك برض على محور الواي كل الكلام اللي خرج عندك من على محور الواي عمل له هيدن عمل له اخفاء بدليل ان هو ما عمل لكش سكرول عندك من الجنب ده تمام لكن هو عمل لك سكرول عندك من الجنب ده علشان تقدر ان انت تشوف عندك الكلام على محور الاكس هنتكلم النهارده ان شاء الله عن البوزيشن البوزيشن هي خاصيه مسؤوله عن تحريك العناصر بتاعتك يعني انت ممكن ان انت تحرك العناصر بتاعتك في الصفحه بتاعتك مثلا وتوديها فوق او في اليمين او تحت في الصفحه او في الشمال او في الاتجاه او في الموقع او في البوزيشن اللي انت عاوزه ودي ببساطه فكره البوزيشن اللي هنشرح ان شاء الله من خلال مثال عملي هنتكلم عن عليه دلوقتي المثال ده ببساطه هنعمل من خلاله هنا ديف والدف ده هيكون اب اللي هي مجموعه تانيه من الفات فهن لله كلاس هنسميه بيرنت تمام علشان بس نقدر ان احنا ننادي عليه في السي اس اس وجوه الديف ده هنعمل لاثه ديف كل ديف هنديله كلاس هسميه مثلا هنا 1 وهكتب برض جواه كلمه 1 للدلاله بس مش اكتر علشان بس نبدا ان احنا نشوفه عندنا هنا بالمنظر ده وهنعمل ديف تاني و هنكتب جواه كلمه 2 وبرضو هديله كلاس 2 علشان اقدر ان انا انادي عليه واخيرا هنعمل عندنا ديف هنديله كلاس اسمه 3 وهنكتب جواه كلمه 3 تمام كده تمام جدا جدا تعال هنا لما ندي شويه تنسيقات هنبدا عندنا بالبرنت هديله باك جراوند وليكن مثلا السكاي بلو وهدي لله مثلا طول وعرض وليكن طول 200 بيكسل وعرض 200 بكسل وانا محتاج دلوقتي ان انا ادي طول ثابت لكل ديف من الفات اللي جوه دي ولكن بدل ما اروح لل 1 واديله طول ثابت وبعد كده اروح للتو وبعد كده اروح لل 3 لا انا هقوللك تعال هنا وادخلي لل بيرنت وادخل لي على كل ديف جوه البيرنت اللي هي ابناء البيرنت تمام كل الدفات اللي جوه دي وادي لهم طول ثابت وليكن 50 تعال كده 50 بيكسل طيب تعال دلوقتي ندي لون او باك جراوند لكل واحد فيهم فاول واحد مثلا هديله لون التوميتو مثلا وتاني واحد اللي هو واخد كلاس اسمه تو هديله باك جراوند وليكن مثلا لون جولد اي لون يجي في بالي مش مشكله واخر واحد اللي هو واخد كلاس اسمو 3 هدي لله باك جراوند وليكن دارك فايوليت اي لون مش مشكله طيب علشان برضو ماحدش يفتكر ان اللون الرابع ده هو عنصر رابع ممكن نروح عندنا هنا لل بيرنت ونديله بادينج مثلا وليكن 10 بيكسل طبعا انت ممكن ان انت تحط بادين تحط مارجن تغير في كل الخصائص دي كل ده حريتك كل ده مش مشكله المهم ان انت تركز في الكلام اللي انا هقوله دلوقتي طيب علشان الموضوع يكون سهل وما تقابلنا اي صعوبه هنحط دلوقتي نقط هنقدر ان احنا نبني عليها كل الشغل بتاعنا دلوقتي البوزيشن دي بتتحكم في الحركه بتاعه العنصر بتوجه العنصر من خلال الاربع اتجاهات بتوعنا اللي ههم التوب واللفت والرات والبوتوم وما تقلقش الموضوع بسيط جدا دي خصائص عاديه جدا انت تقدر ان انت تديها لاي عنصر تمام التوب واللفت والرات والبوتوم هي خصائص عاديه جدا زيها زي اي خصائص في السي اس اس ولكن الخصائص دي ما بتشتغلش غير مع البوزيشن يعني لازم العنصر بتاعك ده ع عشان تقدر ان انت تحركه لازم ان انت تكون مديله في الاول اصلا بوزيشن وبكده الاتجاهات بتاعتك دي هتبدا ان هي تشتغل لو انت مش مدي له بوزيشن وقلت لي مثلا ان انا عاوز احرك العنصر ده من التوب بمقدار 100 بكسل فهو ببساطه مش هيشتغل طيب تعالى دلوقتي لما نركز عندنا على البوزيشن لان البوزيشن نفسها بتاخد منك قيم كتيره جدا وكل قيمه بيكون ليها حاجات مختلفه فاحنا عندنا تقدر ان انت تحط عندك هنا قيمه الابسليوت وعندك الفيكسد وعندك الريليف وعندك الاستاتيك وعندك الستيكي مبدئيا كده الاستاتيك هي القيمه الافتراضيه اللي كده كده بتكون موجوده في كل العناصر بتاعتك بشكل افتراض يعني كده كده كل العناصر بتاعتك اللي قدامك دي كده كده واخده عندك بوزيشن ستاتيك تمام وده معناه برض ان الاستاتيك ما بيشتغلش معاها الاتجاهات بتاعتنا لان كده كده هي القيمه الا افتراضيه سواء انت كتبتها او ما كتبتها طيب تعال دلوقتي باستثناء الاستاتيك لما نتكلم على بقيه القيم بتاعتنا طيب علشان ما تتلخبطش وتقول لي انت بتشرح لي الابسليوت او الفيكسد او الريليف وانا ممكن اتلخبط او مافهمش احنا هنحط دلوقتي نقطه هنقدر من خلال النقطه دي ان احنا نبني على كل القيم بتاعتنا من خلال النقطه دي انت هتفهم لوحدك الابسليوت وهتفهم الفيكسد والريليف وكل القيم دي قبل ما تحط عندك اي قيمه للبوزيين لازم ان انت تسال نفسك سؤالين دلوقتي انا بحرك العنصر ده اول سؤال يا ترى العنصر اللي انا بحركه ده المكان الاصلي بتاعه اللي هو قبل ما احركه المكان الاصلي بتاعه ايه اللي هيحصل فيه طبعا هجاوبك دلوقتي على السؤال ده وطبعا كل قيمه بيكون ليها اجابه مختلفه تمام طيب تاني سؤال دلوقتي العنصر اللي انا بحركه ده هيتحرك نسبه لمين او بناء على ايه بالضبط بالظبط طبعا انت مش فاهم فتعال دلوقتي لما نبدا ان احنا نفهم مع بعض هنمسك عندنا اول قيمه وهي الريليف دلوقتي انا بشتغل على العنصر 2 اللي هو العنصر الجولد اللي قدامكم ده هبدا دلوقتي ان انا احرك العنصر ده من خلال الاتجاهات بتاعتي فاقول لك ان انا هركه من التوب بمقدار 10 بيكسل لما اقول لك ان انا حركه من التوب يعني انا دلوقتي هزود على التوب 10 بيكسل يعني هينزل بمقدار 10 بيكسل فممكن اني ازود مثلا القيمه دي واخليها 70 فهينم عندك هنا بمقدار 70 ممكن طبعا ان انت تتحكم في كل الاتجاهات بتاعتك تروح مثلا للفت وتخليها 40 بيكسل براحتك اتحكم انت في كل الاتجاهات بتاعتنا تعالى دلوقتي بقى لما نجاوب على السؤالين بتوعنا علشان نفهم الريليف اول سؤال بيقول لك المكان الاصلي بتاع العنصر ده ايه اللي حصل فيه ببساطه الريليف بتحافظ على المكان الاصلي بتاع العنصر يعني العنصر رقم لاه العنصر اللي تحت ده ماقدرش ان هو يطلع وياخد المكان الاصلي بتاع العنصر اللي انت مديله بوزيشن ريليف فببساطة ان انا مثلا عاوز احركه من اتجاه معين مثلا وليكن اللفت بمقدار 10 بيكسل فهو هيتحرك نسبه لمكانه الاصلي هينتقم من مكانه الاصلي للمكان الجديد بمقدار 10 بيكسل لو انا قلت لك ان انا هركه من تحت اللي هو البوتوم البوتوم دي يعني هترفع لفوق هقول لك انا عاوز ان انا احركه من البوتوم بمقدار 30 بيكسل فهو هيتحرك من مكانه الاصلي لمكانه الجديد بمقدار 30 بيكسل ف الريليف العنصر فيها بيتح حرك نسبه لمكانه الاصلي الكلام ده ما بيحصلش في الابسليوت ركز وتعال دلوقتي بقى لما نشيل الاتجاهات علشان نفهم مع بعض الابسليوت اول ملاحظه انت هتلاحظ ان العرض بتاع الابسليوت ما بقاش بعرض الاب بتاعه يعني العنصر ده العرض بتاعه ما بقاش بعرض البيرنت زي بقيه العناصر بتاعتنا تمام بقت العناصر بتاعتي هي كده كده بعرض الاب بتاعها اللي هو عرض البيرنت الا العنصر اللي واخد عندك ابسليوت العنصر ده العرض بتاعه بيكون فيت كونتنت على حسب الكونتنت او المحتوى اللي جوه لو المحتوى اللي جوه ده كبير فالعرض بتاعك هيكبر لو العرض اللي جوه قليل فالعرض بتاعه هيقل طيب تعال دلوقتي نجاوب على السؤالين بتوعنا انا قلت لك ان السؤالين دول هيكونوا هم النقطه اللي من خلالها انت هتفهم كل القيم بتاعتنا طيب اول سؤال المكان الاصلي بتاع الابسليوت مش محتاج اقول لك ان المكان الاصلي بتاعه اتاخد والاب سليوت ما قدرش ان هو يحافظ على المكان الاصلي فببساطة لو الاب بتاعه ما كانش واخد بوزيشن طيب يعني ايه الكلام ده يعني لو الاب البيرنت ده مش واخد تعال كده اهو مش واخد بوزيشن سواء بقى ريليت او ابسليوت او ايا يكن لو هو مش واخد بوزيشن فالعنصر اللي واخد ابسليوت كده كده الحركه بتاعته بتكون نسبه للشاشه اللي انت فاتح من خلالها هتقول لي انا مش فاهم ولا كلمه هقول لك تعال دلوقتي لما نفهم مع بعض هقول لك انا عاوز ان انا احركه من البوتوم بمقدار صفر عاوز دلوقتي اوديه في البوتوم فراح فين راح في البوتوم بتاع الشاشه نفسها طيب لو قلت لك ان انا عاوز اوديه في الرايت زيرو يبقى دلوقتي هو واخد عندك بوتوم زرو ورايت 0ي فراح في البوتوم زيرو والرات زيرو بتاع مين بتاع الشاشه الشاشه اللي انا فاتح من خلالها طيب لو انا عاوز مثلا اوديه في المكان ده اللي هو الرايت زيرو والتوب 0 فهقولك ان انا عاوز اوديه في التوب زيرو فهحخ عندك نسبه نسبه للشاشه اللي انت فاتح من خلالها ده في حاله ان الاب ما كانش واخد بوزيشن طيب لو انا رحت للاب واديت له مثلا بوزيشن ريليف ايه اللي هيحصل اللي هيحصل ان العنصر اللي واخد عندك ابسليوت اللي هو العنصر رقم 2 اللي هو العنصر اللي قدامك ده بقى بيتحرك دلوقتي نسبه للاب بتاعه بيتحرك نسبه للاب بتاعه فلو انا جيت لك هنا وقلت لك ان انا عاوز اوديه في البوتوم زيرو هيروح في ال زي بتاع مين مش بتاع الشاشه بتاع الاب بتاعه بتاع البيرنت تمام الكلام ده حصل ليه الكلام ده حصل لان الاب واخد عندك بوزيشن طبعا انا لو مش مديله بوزيشن فهو هيرجع وهيكون بيتحرك نسبه للشاشه طيب الكلام ده في حاله ان الاب واخد بوزيشن ريليف او حتى ابسليوت تمام برضو هتشتغل او حتى فيكسد اللي هنتكلم عليها شويه كده فيكسد تمام طيب حتى لو هي فيكسد او ح ح برض لو هي ستيكي اوكي حتى لو هي كل الكلام ده كده كده لو الاب واخد عندك بوزيشن سواء ستيكي او ابسليوت او ريليف او فيكسد كده كده العنصر اللي واخد عندك ابسليوت كده كده هيتحرك بناء على الاب بتاعه الا لو الاب واخد عندك ايه بقى الا لو الاب واخد عندك ستاتيك اللي هي كده كده بتكون القيمه الافتراضيه اللي معناها ان انت كانك ما كتبتها بالظبط تمام كده طيب تعال دلوقتي بقى لما نتكلم على الفيكسد هنكتب عندنا هنا فيكسد ونفس الملاحظه بالظبط هتلاقي دلوقتي ان العنصر بتاعك ده اصبح فيت كونتنت العرض بتاعه اصبح فيت كونتنت كمان برض ان المكان الاصلي بتاع العنصر ده ما بقاش موجود والعنصر رقم لاه ده طلع مكانه طيب الحركه هتكون نسبه لمين الحركه برض هتكون نسبه للشاشه نفسها فلو قلت لك ان انا خليه يتحرك في البوتوم زيرو يبقى هيروح للبوتو زيرو بتاع ايه بقى بتاع الشاشه نفسها تمام ولكن الفيكسد الموضوع مختلف شويه فالفيك لو انا سبتها في المكان ده ورحت للاب مثلا وخليته مثلا الطول بتاعه 2000 بيكسل بحيث بس ان يكون في سكرول فلو انا نزلت بص ايه اللي بيحصل عندك هنا اللي بيحصل ان العنصر الكسد بيفضل فيكسد وثابت زي ما هو وبينزل معاك في لو انت انت بتعمل عندك سكرول بالمنظر ده بينزل معاك بالمنظر ده وطبعا تقدر ان انت تتحكم في الاتجاه بتاعه وتخليه مثلا تحت مثلا في البوتوم زيرو ا برض هيطلع وينزل معاك وهو في نفس المكان بتاعه ممكن ان انت مثلا تخليه في البوتوم زيرو وفي الرايت زرو برض برضو هيثبت عندك هنا ولكن لو انت طلعت بالسكرول ونزلت برض فضل عندك موجود بالمنظر ده طبعا الحركه دي مواقع كتير بتعملها وانت هتلاقي اكار كتير جدا تقدر من خلالها ان انت تطبق الفكره دي وتستفاد من خلالها طيب عندنا اخر حاجه وهي الستيكي لو انت جيت هنا على الستيكي وقلت لي انا عاوز ان انا اشغل الستيكي هتلاحظ دلوقتي ان ما فيش اي تغيير حصل حتى لو انت جيت هنا وقلت لي مثلا ان انا عاوز التوب يكون زيرو مش هتلاقي ان في اي حاجه هتحصل لو قلت لي ان البوتوم هيكون زيرو مش هتلاقي ان في اي حاجه هتحصل هتفتكر ان في غلطه وان انت مش فاهم ولكن لا انت فاهم ولكن المشكله ان انت لما بتنزل عندك هنا بتبدا الستيك ان هي تشتغل بص بقى تعال دلوقتي لما نفهم تاثير اللي حصل ده بالظبط علشان نفهمه هنروح عندنا هنا في بيرنت وهندي لله مثلا طول 400 بحيث بس ان احنا نصغر شويه وبس نكتب تحته بس ايه برجراف نحط فيه مثلا 200 كلمه فقول لك ان انا عاوز اعمل لورم 200 كلمه بحيث ان يكون في محتوى تحته علشان نقدر ان احنا نفهم الستيكي وتعال هنا لما نفهم مع بعض الستيكي دلوقتي انا لو جيت لك هنا في العنصر اللي واخد عندك استكي وقلت لك ان انا عاوز التوب يكون زيرو دلوقتي ايه اللي بيحصل دلوقتي انت اول ما هتنزل عندك هنا والعنصر بتاعك ده يلامس التوب زيرو بص اول ما لامس التوب زيرو هينزل معاه يبقى الستيكي معناها ان العنصر بتاعك اول ما هيلام س القيمه اللي انت هتكتبها دي هينزل معاك بالمنظر ده ولكن هينزل لحد ما البيرنت بتاعه يختفي اول ما البيرنت بتاعه يوصل للنهايه هتلاقي العنصر بتاعك اختفى وطلع عندك هنا بالمنظر ده بص اهو اول ما يوصل عندك عند نهايه الاب بتاعه نهايه البيرنت نهايه الاب ده هيبدا ان هو يختفي تمام طيب دلوقتي انا مش عاوز ان هو ينزل اول ما يلامس التوب زيرو عاوز ان هو ينزل اول ما يلامس التوب 20 بيكسل طيب نفس الموضوع بالظبط اول ما لامس التوب 20 بيكسل اهو مش التوب زيرو التوب 20 بيكسل اول ما هيوصل عنده هيبدا ان وينزل واول ما يوصل عند نهايه البيرنت هيبدا ان هو يختفي عندك بالمنظر ده تمام تكمله لدرس البوزيشن هنتكلم النهارده ان شاء الله على الزد اندكس او التحكم في الطبقات بتاعتنا دلوقتي انا لو كتبت لك هنا بوزيشن سواء بقى ريليت او حتى مثلا قلت لك ان انا عاوز اعمل بوزيشن ابسليوت تمام اللي هيحصل ان العناصر بتاعتي اللي قدامك دي اللي هي الثلاث ديفات دول هيطلعوا فوق بعض وهيطلع بالترتيب اللي قدامك ده اول عنصر بيكون تحت وبعد كده العنصر اللي بعده وبعد كده اخر عنصر هو اللي بيظهر عندك هنا في المكان ده طيب افرض دلوقتي انا عاوز اتحكم في الطبقات دي افرض انا مثلا عاوز العنصر اللي باللون الاخضر ده هو اللي يكون فوق او العنصر اللي باللون الاحمر هل انا اقدر اتحكم في حاجه زي كده هقول لك ايوه انت تقدر ان انت تتحكم في حاجه زي كده وتعالى دلوقتي لما نشوف مع بعض علشان بس بس نبدا ان احنا نشوف هنعمل بس ايه هنوس على الدنيا بس كده هنخلي العنصر اللي باللون الازرق ده يتحرك من التوب مثلا بمقدار 30 بيكسل علشان بس نبدا ان احنا نشوف العناصر اللي وراه عندك بالمنظر ده وكمان هيتحرك من اللفت بمقدار 30 بيكسل وبرده احرك العنصر اللي باللون الاخضر علشان برده اشوف العنصر اللي باللون الاحمر ونبدا ان احنا نشتغل عليهم وهم ظاهرين قدامنا فهقولك العنصر ده حركه من التوب بمقدار 20 20 بيكسل واحركه من الفت برض بمقدار 20 بيكسل علشان بس ابدا ان انا اشوف الثلاث عناصر مع بعض وابدا ان انا احركهم وانا شايف كل واحد فيهم انا عندي خاصيه اسمها زد اندكس الزد اندكس دي لو انت اديت لها رقم مثلا وليكن واحد فمعناها ان العنصر اللي واخد عندك زد اندكس بقيمه اكبر يبقى العنصر ده هيرتفع في الطبقات عن العناصر الثانيه طيب لو انا رحت لك للعنصر باللون الاخضر واديت له زد اندكس بقيمه اعلى من القيمه دي فمثلا اللون الاحمر واخد عندك واحد فانا هكتب لك هنا اين فده معناه ان العنصر اللي باللون الاخضر بما ان الزد اندكس بتاعه القيمه بتاعته اكبر يبقى هيرتفع عن العنصر ده طيب لو انا رحت لك للعنصر اللي باللون الازرق واديت له زد اندكس بقيمه اعلى وليكن مثلا مليون او اي رقم مش مشكله المهم ان القيمه هتكون عندك اعلى من القيم الثانيه فبما ان القيم القيمه دي اعلى فالعنصر اللي باللون الازرق هو اللي هيرتفع وصلت طبعا انت ممكن ان انت تكتب القيمه اللي انت عاوزها تكتب بقى 100 تكتب اللي انت عاوزه بما ان القيمه دي بتاعه اللون الاحمر ده اكبر من القيمه بتاعه اللون الاخضر فالعنصر اللي باللون الاحمر ارتفع عن العنصر اللي باللون الاخضر طيب افرد تعال كده بقى لما نرجعهم ونمسح عندنا كل حاجه ونمسح عندنا كل حاجه افرض دلوقتي هم موجودين عندك بالمنظر ده ولكن انا مش عاوز مثلا اطلع العنصر اللي باللون الاحمر او اطلع العنصر اللي باللون الاخضر انا عاوز انزل يعني عاوز العنصر اللي باللون الازرق ده انزله تحت فانا هجي لك هنا واقول لك ان انا هخلي الزد اندكس سالب واحد ليه خليته سالب واحد لان القيمه الافتراضيه للزد اندكس بتكون صفر القيمه الافتراضيه بتاعتهم صفر فبما ان القيمه بتاعه البلو اصبحت سالب واحد يعني اقل فهي اللي نزلت عندك بالمنظر ده وبس كده يعني خاصيه سهله جدا وهتفيد كتير جدا بالمناسبه وتقدر ان انت تستخدمها مع الابسليوت او الريليف او كل انواع البوزيشن هنتكلم النهارده ان شاء الله عن فكره تنسيق القوائم او الليست ستايل الكلام ده انت ممكن ان انت تعمله عن القوائم اللي هي الاوردر ليست او حتى على الان اوردر ليست وهنشوف الكلام ده دلوقتي ان شاء الله مع بعض فهن عندنا قائمه وهنكتب جواها مثلا مجموعه من الايتمز وليكن هنا احمد وهنا مثلا شيماء وهنا مثلا علي ايا يكن يعني والقائمه دي هي ان اوردر ليست هنعمل عندنا قائمه تانيه برضو هتكون اوردر ليست او قائمه مرتبه زي ما شرحنا في كورس الاتش تي ام ال طيب انا عاوز اقوللك ان الاثنين انت تقدر ان انت تطبق عليهم نفس الفكره بالظبط فانا ممكن اجيب لك ان اوردر ليست وكمان الاوردر ليست واقوللك ان انا عاوز استخدم الليست ستايل وانت عندك لات حاجات انت ممكن ان انت تستخدمهم عندك الليست ستايل تايب ودي مسؤوله عن نوع النقط او الدواير اللي موجو عندك هنا في الان اوردر ليست او الارقام اللي موجوده عندك في الاوردر ليست تمام دي هي التايب وتعال دلوقتي لما نشوف دلوقتي مع بعض لو انا كتبتلك هنا ديسك فكله هيتحول ل اوردر ليست هتكون عندك بالمنظر ده طيب لو انا كتبتلك مثلا ديسمل اللي هي ارقام فكده كله الان اوردر والاوردر هيتحول عندك لارقام تمام طيب انت ممكن ان انت تتحكم في الموضوع ده زي ما انت عاوز ممكن مثلا ان انت تخليها مربعه تكتب عندك هنا سكوير فهتكون عندك مربعه ممكن ان انت تخليها دايره تكتب عندك هنا سيركل فهتكون دايره بالمنظر ده وممكن ان انت تتحكم فيها زي ما انت عاوز وطبعا انت عندك حاجات ثانيه كتيره جدا عندك الارمن وعندك الجورن و عندك حاجات انت عمرك ما تستخدمها اصلا عندك مثلا اليوناني واللاتيني والروماني عاوز اقول لك ان اكتر حاجه انت هتستخدمها هنا هي النون والنون دي معناها ان انت بتشيل الحاجات دي كلها انا دلوقتي عاوز اقول لك ان انا مش عاوزها اصلا تمام طيباني حاجه عندنا وهي الليست ستايل بوزيشن عندك الديفولت اللي هو الاوت سايد وعندك انت ممكن ان انت تخليها ان سايد وعلشان تفهم انا اقصد ايه بان سايد واوت سايد هنشيل عندنا الكلام ده وهنروح عندنا هنا في الايتمز نفسها وهدي لها دلوقتي باك جراوند وليكن باللون الجولد مثلا وفي البوزيشن انا دلوقتي في البوزيشن بتحكم في موقع الايكونز دي عاوز ان انا ادخلها جوه ولا اسيبها بره هي الديفولت بتاعتها بتكون اوت سايد بتكون بره بالمنظر ده انا ممكن ان انا اخليها عندك هنا ان سايد فهت دخل عندك جوه تمام طيب عندك كمان اخيرا عندك حاجه اسمها ايج ممكن ان انت تخلي الايكونز دي عباره عن صور طبعا دي انت بتعملها من خلال ان انت بتكتب عندك هنا يو ار ال وبتختار صوره تكون حجمها صغير لان انت لو اخترت صوره حجمها كبير الدنيا عندك هتبوظ و مش هتعرف ان انت تعالجها تعال كده لما نستخدم عندنا مثلا الصوره دي وهحاول ان انا ادخل لك الصوره دي تكون جوه فقول لك هنا ليست ستايل بوزيشن وخليها عندك هنا ان سايد فهد خلك الصوره دي تكون جوه عندك بالمنظر ده تمام فانت ممكن ان انت تحط صوره تغير الايكونز تشيل الايكونز كلها تتحكم في موقعها او تعمل فيها اللي انت عاوزه كمان انت ممكن ان انت تستخدم عندك الشورت هاند اللي هي الليست ستايل وتحط عندك اللات قيم بالضبط اللي هي التايب والبوش ايج فبتحب عندك التايب وليكن مثلا مثلا انا هخليها هنا ديسك تمام والبوز شن ممكن اقول لك ان هي تكون ان سايد واخيرا الصور انا ممكن ان انا احطها برضو على نفس السطر عندك هنا فممكن ان انا اختار مثلا صوره معينه ايا يكن الصوره دي واحطها عندك هنا بالمنظر ده فهتكون الترتيب بتاعها هنا التايب وهنا البوزيشن وهنا الامج تمام وبراحتك بقى اعمل اللي انت عاوزه في الفيديو ده ان شاء الله هنتعلم تنسيق الجداول في السي اس اس تعال كده لما نعمل مع بعض جدول من خلال اليبل وهنعمل عندنا صف من خلال التي ار اللي هي اختصار لكلمه بيبل رو وهنعمل عندنا اول صف هيكون هو التي هيدر تمام فنعمل عندنا تي هيدر اللي هي اختصار لكلمه تيبول هيدر واول عمود هيكون الاي دي وتاني عمود هيكون هو النيم وتالت عمود هيكون هو مثلا الادش فكده انا عملت عندي اول صف اللي هو صف الهيدر هنعمل عندنا صف الداتا تمام وهنعمل عندنا تي دي في عمود الاي دي هكتبلك هنا مثلا واحد وفي عمود النيم هكتبلك مثلا هنا احمد وفي عمود الايدج هكتبلك مثلا 24 تمام طيب هعمل عندي صف تاني وهكتب لك عندك هنا في عمود الاي دي مثلا انين في عمود النيم هكتب لك علي وفي عمود الايدج هكتب لك مثلا 23 وهعمل لك برض صف كمان تي ار في الاي دي هكتبلك هنا مثلا لاه وفي النيم هكتبلك مثلا ساره وفي الايدج هكتبلك مثلا 28 وبس اخيرا بس عمللك صف اخير كده علشان بس يكون عندنا داتا كتيره فنبض ان احنا نعمل تنسيقاتنا بشكل يكون مفهوم اكتر تمام هعمل لك هنا النيم شيماء والايدج 20 وبكده اكون عملت الجدول بتاعي طبعا انا عملت جدول ولكن جدول قبيح يعني ما فيهوش اي تنسيقات ولا في اي شيء من الجمال اللي احنا بنكون عايزينه تعال دلوقتي بقى لما نبدا ان احنا ننسق الجدول ده علشان بس ابدا ان انا انسقه ويظهرلك التنسيق بتاعه تعال كده لما نعمل عندنا الاول باك جراوند للتي اتش في الاول اللي هو المربعات اللي فوق دي تمام اللي هي اللي في الرقص عندك دي علشان اعمل لها باك جراوند بروح عليها بشكل مباشر فبقول لك روح لي على التي اتش واديلها مثلا باك جراوند باللون اللي انت عاوزه فانا مثلا هديلها اللون ده مثلا اختار اللون اللي انت عاوزه عاوز برض ان انا احط لون للتي دي المربعات اللي جوه عندك هنا دي تمام فهحس مباشر تمام واديلها باك جراون وليكن مثلا بلون قريب شويه ولكن هيكون فاتح يعني مثلا هنحاول ان احنا نقلل الشفافيه بتاعته بالمنظر ده وطبعا حط انت الالوان اللي انت عاوزها طيب تعالى كده بس لما نخليه بالهيكسا ديسمال طيب اول حاجه هنتكلم عليها هي السايز فكره ان انت تتحكم في السايز بتاع الجدول بتاعك فهقولك انا عاوز ان انا اجيب الجدول واتحكم في العرض بتاعه فهقولك ان انا مثلا انا عاوز اجيب العرض ده واخليه مثلا 100% من عرض الشاشه اللي انا فاتح من خلالها فكده سواء انت فتحت عندك من شاشه كبيره او من شاشه صغيره فكده كده الع العرض هيكون عندك 100% طبعا انت ممكن ان انت تخليه مثلا بالبكسل او ان انت تخليه بالحجم اللي انت عاوزه طيب كمان برض انت ممكن ان انت مثلا تتحكم في الطول بتاع التي اتش ممكن ان انا مثلا اخليه مثلا 40 بيكسل براحتي برده ممكن كمان برض ان انا اتحكم في الطول بتاع التي دي ان انا مثلا اخليه مثلا برض 40 بيكسل زي ما انا عاوز براحتي الموضوع راجع لك انت طيب تعال دلوقتي لما نتحكم في الالين مننت دلوقتي انا الكلام اللي جوه ده جاي عندك على الشمال طبعا التي اتش بيكون الديفولت بتاعها ان الكلام بيكون جاي في النص زي ما موجود عندك هنا ولكن التي دي الكلام بيكون جاي عندك على الشمال هل انا اقدر ان انا اتحكم في حاجه زي كده هقوللك ايوه انا ممكن ان انا اروح للتي دي واقوللك ان انا عاوز التكست اللاين مثلا تكون سنتر فالكلام هيجي عندك في النص ممكن ان انا اخليه مثلا يروح في اليمين او ان انا اخليه يروح في الشمال وطبعا ده الديفولت كمان برضو انا ممكن ان انا اتحكم في الفيرتيكال يعني ان هو يكون فوق او في النص او تحت دي ممكن ان انا اعملها من خلال الفيرتيكال الاين وممكن ان انا اقوللك توب ان الكلام يكون توب فوق او ان هو يكون في النص اللي هي ميدل او ان هو طبعا الميدل ده هو الديفولت او ان هو يكون تحت من خلال القيمه اللي هي بوتوم اللي هتخليه في الاسفل بالمنظر ده طبعا الموضوع راجعلك انت و انا هخليها ميدل او همسحها خالص لان الميدل هو الديفولت وخليلك تكست اللاين هتكون عندك هنا سنتر كمان برض الفراغات اللي في النص دي الفراغات اللي في النص دي انت ممكن ان انت تتحكم فيها طيب انا ممكن ان انا اروح لك للتيبو واقول لك ان انا عاوز ان انا اتحكم في البوردر سبيس تمام طبعا هي بتاخد عندك انين بيكسل انا ممكن ان انا اشيلها خالص واكتب لك صفر فالفراغات اللي في النص دي البوردر سبيس اتشالت خلي بالك انا اديتها لمين اديتها لل تيبل طيب انا انا هقول لك ان انا مثلا عاوزها تكون 10 بيكسل براحتك هتلاقيها كبير عندك بالمنظر ده ممكن ان انا اخليها اين بيكسل او ان انا احط القيمه اللي انا عاوزها تمام كمان برض انا ممكن ان انا اضيف بوردر لاي واحد فيهم زي ما انا عاوز فممكن مثلا اروح هنا للتي دي واضيف لها بوردر عادي اللي هو البوردر بتاعنا اللي اتعلمناه قبل كده فممكن ان انا اقول لك ان انا عاوز اضيف مثلا بوردر بسمك مثلا 4 بكسل ويكون سوليد وباللون الاحمر اللي انا عاوزه طبعا انت بتضيف اللي انت عاوزه او او القيمه اللي انت عاوزها او اللون اللي انت عاوزه طبعا ممكن ان انا هنا مثلا اشيل البوردر سبيس ومثلا احط هنا مثلا لون قريب شويه او اللون طبعا اللي انا عاوزه ممكن ان انا مثلا اغير لك الالوان شويه وابدا مثلا ان انا اظبط لك اللون بالشكل اللي انا عاوزه وطبعا انت ممكن ان انت من فكره تنسيق الالوان ممكن ان انت تطلع بالوان وبتنسيق كويسه جدا ده انا عملته من خلال فكره ان انا عملت بوردر عادي جدا اضفته لمين اضفته للتي دي ممكن برض ان انا اعمل بوردر عندك هنا واضيفه لمين بقى للتي اتش تمام بنفس الموضوع عشان بس اظهره لك اكت ممكن ان انا مثلا احط لك لون بس كده ان هو اللون ده يبدا ان هو يظهر لك ويبان لك عندك هنا طبعا انت ممكن ان انت تحط اللون اللي انت عاوزه فتقدر ان انت تضيف عندك بوردر او و تقدر ان انت تضيف عندك مسافات في البوردر ان انت مثلا تزود عندك المسافه دي زي ما اتعلمنا من شويه وتقدر ان انت تعمل اللي انت عاوزه هنتكلم النهارده ان شاء الله عن وحدات القياس او اليونت في السي اس اس زي البيكسل اللي احنا بنستخدمها من بدايه الدوره لحد دلوقتي النهارده ان شاء الله هنعرف حاجات كتيره جدا فيلا بينا دلوقتي لما نبدا اولا كده انت لازم تفهم ان احنا عندنا نوعين من وحدات القياس نوع ثابت او ممكن نقول عليه ان هو ابسليوت ونوع ثاني متاثر بحاجات ثانيه وتقدر ان انت تقول عليه ريلاتيف طيب علشان نفهم انا بقول لك ايه هنعمل عندنا دلوقتي ديف وجوه الديف ده هنعمل عندنا برجراف وهنكتب فيه تعال كده هنكتب فيه هنا اي كلمه ايا يكن يبقى دلوقتي الدف ده هو اب للبرجراف ده طيب هنروح عندنا هنا في السي اس اس وهنمشي البراجراف وهنبدا دلوقتي ان احنا نديله عندنا هنا فونت سايز وليكن 20 بكسل يبقى دلوقتي البكسل هي اول حاجه هنتكلم عليها والبكسل ده هو من النوع الثابت لو رحنا عندنا هنا للانواع الابسليوت وبصي عندنا هنا هنلاقي دلوقتي ان احنا عندنا البكسل وهنلاقي ان احنا عندنا الس سي ام اللي هي اختصار للسنتيمتر وعندنا الملي ميترز وعندنا الانش وعندنا البوينت وحاجات تانيه كتيره جدا فدلوقتي ببساطه كده البكسل اللي هو نوع ابسليوت عندنا طبعا السي ام اللي هو السنتيمتر وطبعا انا ما بنصح حد يستخدم السنتيمتر لان طبعا 2 سم ده طبعا كبير جدا فانا مش بنصح حد يستخدم السنتيمتر ولا حتى الملر تعال كده المليت احنا ممكن نكتب 20 ملم تمام وعندنا طبعا الانش برض مش بنصح بيه خالص فممكن نكتب عندنا هنا انش وطبعا تعالى كده لما نكتب عندنا اين انش مثلا ف برده انا مش بنصح بيه ف ببساطه اكت حاجه انت هستخدمها في الانواع الابسليوت هي البكسل طبعا عندك البكسل وعندك البي تي اللي هي البوينت فممكن دلوقتي ان انا اكتبلك مثلا 10 بي تي فيعمل لك 10 بوينت وبراحتك طيب تعال دلوقتي بقى نتكلم على الانواع الريلاتيف عندنا اول نوع عندنا وهو الار اي ام فدلوقتي انا لو كتبتلك انين ار اي ام هتلاحظ ان الكلمه هتكبر لو كتبتلك 3 ار اي ام هتلاحظ برض ان الكلمه هتكبر ولكن انا مش فاهم ايه الار اي ام دي بص يا معلم علشان نفهم الار اي ام لازم تفهم كده ان الار اي ام بتحسب الحجم بتاعها بناء على حجم الروت الروت اللي هو الاتش تي ام ال طيب يعني ايه الكلام اللي انا بقوله ده لازم تفهم كده ان الاتش تي ام ال او ببساطه اي كلمه انت بتكتبها جوه عندك هنا اي كلمه اي كلمه انت بتكتبها كده كده بتكون واخده عندك فونت سايز 16 بيكسل برضو مش فاهمك تعال كده لما نشوف دلوقتي انا عملت عندك اهو براجراف وما كتبتش في السي اس اس الفونت سايز فالبر جراف ده الفونت سايز بتاعه كان بالظبط ببساطه هو 16 بيكسل وده لان الروت بتاعنا كده كده بيكون 16 بيكسل لازم تفهم الحته دي فلو انا رحت عندك هنا وكتبت عندك هنا البراجراف وقلت لك ان البراجراف ده الفونت سايز بتاعه مثلا هيكون 16 بيكسل مش هتلاحظ اي فرق سواء انا كتبتها او حتى مسحتها بص الكلمه ولا بتكبر ولا بتصغر لان هي كده كده بتكون 16 بكسل طيب يعني ايه بقى ار اي ام بص يا معلم احنا اتفقنا ان الروت الروت بتاعتنا الفون سايز بتاعتها هي 16 بيكسل طيب الار اي ام كلمه ار تعال كده كلمه ار اي ام ببساطه كده بتروح تشوف الار اللي هو الروت الفونت سايز بتاعته كا بالظبط وبتضرب في الرقم اللي انت كتبته يعني ايه يعني لو انا كتبت هنا واحد فبتحب في ال 16 يعني بتقوللك دلوقتي تعال كده 1 في 16 يعني ال ار اي ام بتساوي دلوقتي 16 بكسل طيب لو انا دلوقتي مثلا كتبت انين هتروح تمسك ال 2 وتضربها في الروت وبكده ال 2 دلوقتي هتكون معناها 32 بيكسل ده في حاله ايه في حاله ان الروت بتساوي 16 بيكسل طيب لو انا رحت وغيرت الروت انا قلت لك دلوقتي ان الروت ده اللي هو ايه بقى الروت اللي هو الاتش تي ام ال لو انا رحت هنا وجبت الاتش تي ام ال ورحت لك دلوقتي وغيرت فيها مثلا الفونت سايز خليته مثلا 10 بيكسل طيب دي معناها ايه معى ان انت تكتب عندك هنا واحد تعال كده معنى ان انت تكتب عندك واحد ار اي ام ان انت هتضرب عندك الواحد دي في الش الواحد هتضرب عندك في ال 10 بكسل يبقى دلوقتي الون ار اي ام في الحاله دي معناها 10 بكسل يعني الحجم اللي قدامك ده هيفضل هو سواء انت كتبت عندك 10 بيكسل بالمنظر اللي قدامك ده اهو او حتى كتبت عندك 1 ار اي ام هيفضل زي ما هو لو انت كتبت عندك هنا اننين معناها ان الاتنين الاثنين دي هتضرب عندك في ال يعني الفونت سايز هنا هيكون 20 بيكسل بالمنظر اللي قدامك ده فسواء انت كتبت عندك اين ار اي ام او كتبت عندك تعال كده 20 بيكسل هتفضل هي هي ف باختصار الار اي ام بتروح تشوف الروت اللي قدامك هنا قيمته ايه بالظبط وبتضرب الرقم ده في القيمه بتاعته تمام طيب ايه بقى الاي ام لان احنا عندنا ار اي ام وعندنا اي ام فقط تعال كده عندنا هنا اي ام فقط الاي ام مش بتروح تشوف الروت في ايه بالظبط لا هي بتروح تشوف الاب في ايه بالظبط ام يعني ايه الكلام ده يعني لو انا رحت لك دلوقتي على الديف انا قلت لك هنا ان الاب عندنا هنا هو الديف لو انا رحت لك دلوقتي على الديف ده وخليت ان الفونت سايز بتاعته مثلا 20 بيكسل الديف اهو الفون سايز بتاعتها 20 بيكسل لو انا كتبت لك هنا واحد واحد دي معناها ايه واحد دي معناها ان هو ياخد الواحد دي ويضربها في قيمه الاب هيضربها عندك في قيمه الاب بتاعه الاب هنا اللي هو الديف اللي واخد عندك 20 يبقى الان اي ام في الحاله دي معناها 20 بيكسل اللي سواء انت كتبتها او ما كتبتها فكده كده هتكون عندك 20 بيكسل طيب لو انا مثلا كتبت عندك هنا اين تعالى كده لو كتبت عندك هنا اين ف 2 في 20 هتساوي عندك 40 يعني سوا انت كتبت عندك هنا 40 بكسل او كتبت عندك انين اي ام هتكون هي هي بالظبط طيب هندخل دلوقتي في النسبه المئويه وكمان برض هنشرح عندنا الفي دبليو وكمان برض هنشرح عندنا الفي اتش بص يا معلم هنمسك عندنا ال ديف وهندي لله مثلا باك جراوند باللون الاحمر مثلا تمام وهنمشي عندنا البراجراف وهن خي مثلا لونه باللون الازرق تمام طيب دلوقتي انا لو جيت لك هنا على الويتس وقلت لك مثلا انا عاوز ان الويتس بتاع البراجراف يكون 100 بكسل ايه اللي هيحصل هيكون عندك 100 بكسل سواء بقى انت كبرت المتصفح صغرته مش هيفرق لان انا قلت لك ان الكسل هي قيمه ثابته طيب لو انا كتبت عندك هنا في الم لو انا كتبت عندك هنا في الم معنى ال في الم ان انا بقوللك 100% من مساحه او من عرض الاب مش من عرض البراوزر لا من عرض الاب فلو الاب عندك هنا تعال كده لو الاب عندك هنا مثلا العرض بتاعه 200 بكسل وانا قلت لك ان انا عاوز ان عرض الابن اللي جوه يكون 100% فهيكون 100% من عرض الاب لو قلت لك ان هو هيكون 50% فهيكون 50% من عرض الاب زي ما موجود قدامك هنا طيب لو بدلت ال 50% دي وخليتها في دبليو ايه اللي هيحصل ببساطه كلمه في دبليو تعال كده لما نشوف كلمه في دبليو هي اختصار للويس اوف ذا فيو بورت او خلينا نقول ان الفي اختصار لكلمه فيو بورت اما الدبليو هي اختصار لكلمه ويتس طيب يعني ايه الكلام ده يعني دلوقتي انا لما اقول لك ان انا عاوز 100 في دبليو يعني جيب لي 100% من الفيو بورت بتاع العرض يعني 100% من العرض بتاع الشاشه المتاح قدامك كلمه في دبليو لما اقول لك دلوقتي 100 في دبليو يعني هيجيب لك العرض بتاع الشاشه ك لها لما اقول لك دلوقتي 50 في دبليو يعني 50% من عرض الشاشه اللي قدامك تمام طيب لو قلتلك دلوقتي ان انا عاوز الطول تعال كده تعال بس لما نجيبها عندنا هنا لو قلتلك دلوقتي ان انا عاوز الطول يكون مثلا 100 في اتش في اتش هنا بتعبر عن الطول اللي موجود قدامك كلمه في يعني فيو بورت وش يعني هايت فلما اقول لك 100 في اتتش مع معناها ان انت هتجيب لي 100% من طول الشاشه اللي متاحه قدامك لما اقوللك مثلا 50 في اتش فهيج لك دلوقتي 50% من طول الشاشه اللي قدامك تمام طيب حلو جدا جدا الكلام ده طيب عندنا حاجه تانيه اسمها الكلك ودي من خلالها انت ممكن ان انت تعمل عمليه حسابيه زي مثلا ان انا اقول لك عاوز ان العرض يكون 100% ناقص مثلا 50 بكسل مثلا يعني فهو دلوقتي هيجيب لك 100% من عرض الاب بتاعك وينقص منها 50 بيكسل ممكن بقى تنقص 50 بيكسل تنقص 100 بيكسل اللي انت عاوزه تمام انت هنا بتعمل عمليه حسابيه وبراحتك اعمل اللي انت عاوزه هنتكلم النهارده ان شاء الله عن السودو كلاسس السودو كلاسس هي الحالات اللي من خلالها انت بتبدا ان انت تضيف التنسيق بتاعك هتقول لي انا مش فاهمك هقول لك دلوقتي انا عندي ديف بالمنظر اللي قدامك ده عاوز اقول لك ان انا لو وقفت عليه بالماوس ايه اللي يحصل ممكن ان انت تعمل اللي انت عاوزه انا مثلا هنا حطيت صوره فاول ما بقف مثلا بالماوس على الدف ده في صوره بدات ان هي تظهر تمام كمان برض انا لو ضغطت على الدف ده اللون بتاعه بيتغير فدي برض حاله ثانيه تمام فانت من خلال السودو كلاسس بتبدا ان انت تحط التنسيقات بتاعتك من خلال الحالات اللي انت عاوزها وتعال دلوقتي لما نشوف مع بعض هنعمل عندنا هنا ديف وهنروح عندنا في السي اس اس هندي شويه تنسيقات للديف ده وليكن مثلا طول وعرض طول مثلا 100 بيكسل ومثلا عرض 200 بيكسل وهندي لله دلوقتي باك جراوند كر مثلا باللون الاسود او اي لون انت عاوزه طيب انا دلوقتي عاوز اقول لك ان انا عاوز لو وقفت على الدف ده ده بالماوس اي حاجه انا عاوزها مثلا ان هي تحصل عاوز دلوقتي ان انا اغير اللون عاوز دلوقتي ان انا اغير الطول والعرض عاوز ان انا مثلا اضيف تنسيق جديد عاوز اعمل اللي انا عاوز اعمله طيب الكلام ده بعمله من خلال ان انا بجيب العنصر وبعمل عندك نقطتين اللي هما الكولون وبقول لك هنا هوفر هوفر دي معناها ان انا لو عملت هوفر على العنصر ده لو وقفت عليه بالماوس ايه اللي يحصل اكتب اللي انت عاوزه انا مثلا ممكن اقول لك ان انا عاوز الباك جراوند تكون باللون الاحمر فلو وقفت عليه الباك جراوند هتكون باللون الاحمر ممكن اقول لك ان انا عاوز لو وقفت عليه مثلا الطول بتاعه يكون 50 بيكسل بدل ما يكون 100 بيكسل فدلوقتي انا لو وقفت لك عليه بص الطول بتاعه بقى 50 بيكسل بدل 100 بيكسل ممكن ان انت تتحكم في الطول والعرض او ان انت تضيف عندك تنسيقات ثانيه مختلفه تعال كده لما نتحكم عندنا في الطول والعرض بص بالمنظر اللي قدامك ده طيب تعال دلوقتي لما نضيف عندنا صوره هقول لك دلوقتي انا عاوز ان انا لو وقفت على العنصر ده اضيف مثلا صوره معينه وليكن الصوره دي طبعا انا لو وقفت على العنصر ده الصوره بالفعل هيتم اضافتها ولكن السايز بتاعها ممكن يكون بايظ عندك بالمنظر ده فممكن ان انا اروح مثلا للديف نفسه واقول لك ان انا مثلا هديلك باك جراوند سايز تكون كونتين تمام بحيث ان اي صوره يتم اضافتها السايز بتاعها يكون كونتين على قد محتوى بالظبط فدلوقتي انا لو وقفت عليها الصوره بدات ان هي تظهر عندك بالمنظر ده انت نفسك ممكن كنت تبقى حاطط عندك مثلا هنا صوره تمام بالمنظر ده وتقول لي ان انا عاوز ان انا في البدايه اصلا يكون عندي صوره وليكن الصوره دي ده في البدايه اصلا وعاوز ان انا لو وقفت على العنصر ده الصوره تتغير تمام ف براحتك اعمل اللي انت عاوزه فدي الحاله بتاعتنا وهي الهوفر طيب عندنا حاله تانيه وهي ان انا لما بضغط ضغطه مطوله على العنصر ودي اسمها الاكتيف فانا ممكن ان انا مثلا اجيل لك هنا واقول لك دلوقتي انا عاوز الديف ده لو عملت اكتيف لو وقفت او ضغطت ضغطه مطوله على العنصر ده ممكن اعمل اللي انا عاوزه ممكن مثلا ان انا اغير اللون مثلا واخليه باللون اللي انا عاوزه او اعمل او اضيف التنسيق اللي انا عاوز ان انا اضيفه فدلوقتي انا لو ضغطت ضغطه مطوله مش اي ضغطه وخلاص ضغطه مطوله على العنصر ده فهيبقى التنسيقات اللي انا حطيتها هنا هتبدا ان هي تظهر طيب كمان برضو انا عندي حاجه تانيه وهي الام تي ودي معناها ان انا بقول لك عاوز لو اي عنصر يكون فاضي من جوه وما فيهوش اي شيلدرن ابدا دلوقتي ان انا اضيف عليه التنسيقات اللي انا عاوزها فدي انا بعملها من خلال تعال كده لما نشيل كل الكلام ده انا بعملها من خلال ان انا بقول لك عاوز دلوقتي اي ديف يكون فاضي يعني يكون عندك هنا امتي فاضي يعني ما فيش اي حاجه جواه حتى مثلا مافيش جواه هنا ابناء طيب لو عندك ديف فاضي هتعمل في ايه هقول لك مثلا عاوز ان الباك جراوند بتاعته تكون باللون الاخضر ده لو هو فاضي طيب دلوقتي انا لو عندي مثلا ديف تاني هيعمل لك فيه نفس الموضوع بالظبط طيب لو الديف الثاني ده مثلا ما كانش فاضي كان مثلا جواه عندك هنا براجراف حتى لو البراجراف مافيش جواه حاجه المهم ان يكون في ابناء جوه الديف فبما ان الديف اصبح دلوقتي جواه ابناء فالف ده ما بقاش فاضي فمش هيطبق عليه امتي تمام طيب تعال دلوقتي لما نتكلم على اللينكات انا هعمل لك هنا لينك ومش مهم بقى اللينك ايا يكن يعني وهكتب لك هنا مثلا جوجل وهعمل لك لينك تاني مثلا ككتب لك فيه هنا مثلا فيس بوك واغير هنا بس اي حاجه علشان بس يكون ده لينك مختلف عندها طبعا اكتب هنا اللي انت عاوزه او ضيف هنا اللينك اللي انت عاوزه وضيف هنا اللينك اللي انت عاوزه طيب هو في البدايه بيكون حاطط لك شويه تنسيقات بالمنظر اللي قدامك ده بيكون حاطط لك هنا الاكتيف بيكون باللون الاحمر وبيكون اللون الاساسي بتاع الانكور اللي هو العنصر ده بيكون باللون الازرق وبيكون حاطط لك تكست ديكوريشن او الخط اللي بيكون تحت بالمنظر ده طيب انا ممكن ان انا اقول لك هنا انا عاوز مثلا اللون بشكل مبدائي ايه يكون باللون الاسود تمام وعاوز اشيل التكست ديكوريشن فخليها لي تكون ن اللي هو الخط اللي تحت ده وعاوز مثلا الفونت سايز بتاعها يكبر شويه مثلا يكون 30 بيكسل ده بشكل مبدئي بدون اي استخدام لسودو كلاسس انا برضو ممكن ان انا استخدم عندك الهوفر تمام فممكن ان انا اقوللك هنا جيبلي الاي وعاوز دلوقتي ان انا لو وقفت عليها بالماوس يبدا مثلا اللون يكون تعال كده يبدا مثلا اللون يكون باللون اي لون في العالم ممكن مثلا اللون الاحمر تمام فهقولك دلوقتي ان انا عاوز لو وقفت عليها بالماوس اللون يكون باللون الاحمر طيب انا برض عندي حاله الفيزيت تمام طيب يعني ايه فيزيد دلوقتي انا عاوز ان انا لو زرت اللينك ده يعني دلوقتي لو المستخدم ضغط على اللينك ده وزر اللينك ده يبدا يضيف لي هنا مثلا تنسيقات معينه فعاوز اقول لك مثلا ان انا لو زرت اللينك ده يكون مثلا اللون بتاعه باللون الاصفر اي لون في العالم تمام تعالى دلوقتي لما نضغط هنا على اي لينك نزوره بس نعمل هنا فيزت فدلوقتي بما ان انا زرت اللينك ده فسواء بقى انت عملت لي هنا ريلود عملت اللي انت عملته هو كده خلاص عرف ان المستخدم زار اللينك ده زار الموقع ده فبما ان هو زاره انت ممكن ان انت تحدد تنسيق معين تبدا ان انت تضيفه للينكات اللي تم زيارتها كمان برض انت عندك عكس الفيد عندك هنا اللينك انا بقول لك ان اللينكات اللي انا ما زرتها قبل كده ضف لي ليها مثلا تنسيق معين وليكن مثلا اللون يكون مثلا ب وليكن اللون ده تمام فلينك هي عكس الزد اللينك معناها ان اللينكات او العناصر اللي انا ما زرتها قبل كده ابدا ان انت تضيف ليها التنسيق ده طيب لو انا زرت اللينك ده خلاص بقى التنسيق ده مش هيشتغل ت تمام طبعا انت ممكن ان انت تستخدم عندك الاكتف اللي اتكلمنا عليها من شويه فهقولك ان انا لو ضغطت ضغطه مطوله على العنصر ده عاوز مثلا ان الباك جراوند بتاعته تكون باللون الاحمر فدلوقتي انا لو ضغطت ضغطه مطوله العنصر ده الباك جراوند بتاعته بقت باللون الاحمر طيب تعال دلوقتي لما نتكلم على الانبوت احنا عندنا خاصيه اسمها الانبوت تمام اللي انا كتبته ده شيل الكلام ده انا لو ضغطت عندك هنا ده كده معناه ان انا عملت فوكس على الانبوت عملت فوكس علشان ابدا ان انا اكتب كلام جوه الانبوت طيب الحاله دي انا ممكن ان انا استغلها فممكن ان انا اقول لك مثلا الانبوت ده لو انا عملت فوكس عليه عاوزه مثلا ان انا اضيف اي تنسيق انا عاوزه فممكن مثلا ان انا اضيف باك جراوند باللون الاحمر فدلوقتي الباك جراوند ده مش هيشتغل غير لما اعمل هنا ف فوكس بص اول ما بعمل عندك فوكس علشان طبعا ابدا ان انا اكتب ف بيبدا التنسيق اللي انا كتبته ده يبدا ان هو يشتغل طبعا انت ممكن ان انت تضيف عندك باك جراوند ممكن ان انت تشيل عندك الاوت لاين تخليه ن الاوت لاين اللي تعال كده اوريك تعال بس الاول كده شيل الكلام ده الاوت لاين هو اللي بيظهر عندك باللون الاخضر ده انا ممكن ان انا مثلا اشيله اقوللك الاوت لاين ده يكون نان لما اعمل فوكس فدلوقتي انا لو عملت فوكس مافيش اي اوت لاين انا عملته هنا ن طيب انت برض عندك حاله تانيه وهي حاله الديسيبل انت ممكن ان انت مثلا تدي لاي عنصر عندك ديسيبل بحيث ان مافيش حد يقدر ان هو يفتح انبوت ده انا برضو ممكن ان انا استغل الحاله دي واقوللك ان انا عاوز الانبوت لو كان في حاله البلد ابدا مثلا ان انا اضيف له تنسيق معين وليكن مثلا باك جراوند باللون الاحمر التنسيق ده مش هيشتغل غير في حاله ان الانبوت ده كان في حاله ال ديسيبل يعني انا لو شلتلك ال ديسيبل من العنصر ده فالتنسيق بتاعك اللي انت اضفته ده مش هيشتغل هيشتغل لو العنصر ده كان في حاله البلد طبعا عكسها تماما عندك حاله تانيه وهي البلد فممكن ان انا اقول لك مثلا عاوز ان انا اضيف تنسيق في حاله ان العنصر ده يكون انيبل مثلا الباك جراوند هتكون باللون الاخضر لو الانبوت كان في حاله الانبل يعني ما كانش ديسبل يبقى اللون هيكون باللون الاخضر هتقوللي انا مش فاهم هقوللك ان انا لو شلت الديسبل يبقى العنصر ده في حاله البلد اصلا تمام فبما ان هو في حاله البلد يعني التنسيق اللي انت اضفته ده هيشتغل عندك دلوقتي بالمنظر ده طيب لو رجعتها لو رجعتها هتبدا ديسبل هتشتغل فالتنسيق ده هو اللي هيشتغل عندك حاله تانيه وهي الريك وايرد برضو انا ممكن ان انا استغلها فممكن اقوللك دلوقتي انا عاوز الانبوت ده لو كان في حاله ريك وايرد ابدا مثلا ان انا اضيف له تنسيق معين وليكن مثلا باك جراوند باللون الاحمر فالباك جراوند اللي باللون الاحمر ده مش هيشتغل على الانبوت غير لما الانبوت ده يكون في حاله الريك وايرد يعني ان انت تكون حاطط عندك هنا ريكوير للعنصر ده لو انا شلتها يبقى التنسيق ده مش هيشتغل طيب اهم حاجه بقى في الانبوت انت مثلا عندك هنا الايميل دلوقتي انا لما بكون مثلا عامل عندك هنا انبوت وال انبوت ده من نوع ايميل يعني انا مستني ايميل من المستخدم طيب دلوقتي لو المستخدم ما دخلش ايميل دخل مثلا اي حاجه في العالم وما دخلش ايميل فدي قيمه خاطئه قيمه انفاليد انا ممكن ان انا استغل الحاله دي ممكن ان انا اقوللك مثلا لو القيمه بتاعه الانبوت كانت انفاليد خلي بالك دي مهمه جدا لو كانت انفاليد انا مثلا عاوز الباك جراوند يكون باللون الاحمر يبقى دي مش هتشتغل غير لما البيانات اللي جوه تكون انفاليد طيب تعال دلوقتي لما نجرب دلوقتي مع بعض هنكتب عندنا هنا مثلا كلمه وهنحاول ان احنا نخليها ايميل يعني دلوقتي الايميل ده مظبوط تعال كده نخلي الايميل ده مش مظبوط هنمسح عندنا العلامه دي فكده طبعا ده مش ايميل فقال لك ان هو ده كده غلط فبما ان هو غلط يعني انفاليد يعني اللي انت عملته هنا او التنسيق اللي انت كتبته هنا هو اللي هيشتغل طيب لو انا مثلا رجعتها تاني فكده البيانات عندك فالد يعني البيانات عندك صحيحه فهو كده مش انفاليد يعني الكلام ده مش هيشتغل عكسها برض عكس الانفاليد عندك هنا الالد يعني انا برض ممكن ان انا اجيلك هنا واقول لك دلوقتي لو الانبوت ده فالد انا عاوز ان الباك جراوند مثلا يكون ب اللون الاخضر او تعال كده لما نضيف مثلا حاجات يعني يكون التنسيق بتاعها حلو شويه نخفف اللون شويه وبرده هنا في اللون الاحمر نحاول ان احنا نخفف اللون شويه بحيث بس ان التنسيق يكون افضل شويه تمام تعال كده لما نجرب دلوقتي مع بعض هنكتب عندنا هنا مثلا اي كلمه طبعا ده مش ايميل فعامل لك التنسيق بتاع الانفاليد طيب هنكتب عندنا او هنخليه دلوقتي بيانات صحيحه فبشكل ده اصبح عندك باللون الاخضر او تم تنفيز اللي موجود عندك في الالد طيب هنشيل عندنا العلامه دي فاصبح عندك باللون الاحمر وتقدر ان انت تعمل اللي انت عاوزه طيب اخيرا تعال كده لما نتكلم على التشيك بوكس انا عندي هنا في الانبوت حاجه اسمها تشيك بوكس اللي هو المربع ده تمام المربع اللي انت بتعلم عليه بالمنظر ده انا ممكن ان انا اقوللك مثلا لو الانبوت ده كان اشكد يعني كان متعلم عليه بالمنظر ده لو هو كان اشكد انا ممكن ان انا مثلا اعمل حاجه معينه فممكن مثلا ان انا قل العنصر ده للجنب اليمين طبعا انت ممكن ان انت تعمل ايه اللي انت عاوزه فممكن ان انا اقوللك مثلا عاوز اعمل بوزيشن ابسليوت واوديه في اليمين تمام اخلي الرايت يكون زيرو ده امتى ده في حاله ان الانبوت كان تكد طيب تعال دلوقتي لما نجرب هضغط عليه هنا فبما ان هو تشيك فراح عندك في الرايت زي تعال كده لما نشيل عندنا اليكد فرجع زي ما كان هنحط اليكد التاثير اللي انت عملته ده هو اللي هيظهر ودي ببساطه هي السودو كلاسس هنتكلم النهارده عن السودو المنتس هطلب منك دلوقتي طلب هقول لك اعمل لي براجراف واكتب لي مثلا في 20 كلمه ومثلا انا بطلب منك ان ا ان انت توصل لاول سطر في البرجراف وتلونه انا مش عاوزك ان انت تلون كل الكلام اللي جوه البراجراف انا عاوزك ان انت توصل لاول سطر بس في البرجراف هتقول لي والله انا ممكن ان انا مثلا احدد اول سطر واخده مثلا كات واحطه في سبان وابدا مثلا ان انا اشتغل على السبان في السي اس اس هقول لك ماشي ممكن ولكن ده مش حل ذكي ومش حل سريع الحل الذكي والسريع هو ان انت تستخدم السودو المنتس وهي ان انا اقول لك انا عاوز دلوقتي البراجراف ده اعمل له دبل كولون دبل كولون دي بتوصلني لل سودو المنتس الكولون الواحده بتوصلني لسودو كلاس زي ما اتكلمنا في الفيديو اللي فات انا عاوز اقول لك خلي بالك ان انت ممكن ان انت تكتب واحده بس كولون واحده بس لو انت عاوز توصل لل سودو كلاسس او ان انت توصل لسودو المنتس ولكن كنوع من التنظيم بس مش اكتر فاحنا بنفرق ما بين الكلاس بان احنا بنحط لها كولون واحده بس والنت بان احنا بنحط لها دبل كولون طيب انا عاوز اوصل لاول سطر في البرجراف فبكت عندك هنا فرست لاين ومن اسمها انا بقول لك عاوز اوصل لاول سطر في العنصر بتاعي ده اللي هو البراجراف واعمل فيه اللي انا عاوزه ممكن مثلا ان انا الونه باللون الاحمر ممكن مثلا ان انا احط له باك جراوند براحتك ممكن برض ان انا مثلا احط له فونت سايز ب مثلا 30 بيكسل براحتك اعمل اللي انت عاوزه والتنسيقات اللي انت عملتها دي هيتم تطبيقها على اول سطر ايا يكن طول السطر ده فدلوقتي لو السطر عندك طويل بالشكل ده فهيت تطبيق التنسيقات دي عليه ولو هو قصير حتى لو هو كلمه واحده بس هيتم تطبيق التنسيقات دي على اول سطر الكلام ده انت ما كنتش هتقدر تعمله لو انت خدت عدد كلمات معروفه وحطيتها في سبان ما كانتش هتبقى بالذكاء بتاعه الفيرست لاين اللي هي بتتكيف معاك مع اي عدد كلمات ممكنه في اول سطر كذلك برضو انت ممكن ان انت توصل وصل لاول حرف بس مش اول سطر وده انت بتعمله من خلال الفيرست ليتر انا بقول لك ان انا عاوز اوصل للفيرست ليتر يعني عاوز اوصل لاول حرف في العنصر بتاعي ده واضيف لها التنسيقات دي فبالفعل هو عمل لك الكلام ده على اول حرف بس كمان انت ممكن ان انت تتحكم في شكل التحديد او السلكشن دلوقتي انا لما بعمل تحديد على الكلام بتاعي او بعمل دلوقتي سلكشن فالبراز بيعمل لك الشكل ده في الباك جراوند بتاع السلكشن علشان يعرفك ان انت عملت تحديد على الكلام ده انت ممكن ان انت تتحكم في شكل السلكشن وده انا بعمله من خلال ان انا بقول لك جيب لي البراجراف وعاوز لما اعمل سلكشن عليها يكون مثلا شكل السلكشن الباك جراوند بتاعته تكون باللون الاحمر تمام فدلوقتي لو انت عملت تحديد هيكون باللون الاحمر ممكن ان انت مثلا تخلي الكلام اللي جوه هو مثلا يكون باللون الازرق براحتك تمام فدلوقتي هيكون باللون الاحمر الباك جراوند والكلام اللي جوه باللون الازرق انت بقى تخليه بقى باللون الابيض تخليه بالشكل اللي انت عاوزه والتنسيق ده هيطبق على السلكشن في البرجراف بس انت ممكن ان انت تطبقه على كل عناصر الموقع وده من خلال ان انت بتسيبها فاضيه بالمنظر ده وده معناه ان انت بتقول لي انا عاوز اروح لكل عناصر الموقع ووقت ما عمل لها سلكشن يكون ده شكل السلكشن فدلوقتي انت لو عندك براجراف او حتى عندك اتش 1 تمام بالمنظر ده وانا عملت سلكشن على البراجراف او عملت سلكشن على الاتش 1 او على اي عنصر ف انا بالمنظر ده طبقت السلكشن على كل عناصر الموقع طيب هندخل دلوقتي في الافتر وال بيفور وصدقني هي دي اهم حاجه في الدرس بتاع النهارده طيب انا دلوقتي مثلا عندي هنا برجراف هكتب لك مثلا في هنا اي كلمه انت ممكن من خلال السي اس اس ان انت تضيف على العنصر ده حاجات قبله او بعده الحاجات دي ممكن تكون كلمه او ممكن تكون شكل معين طيب الكلام ده انت بتعمله من خلال ان انا بقول لك عاوز البرجراف اضيف مثلا حاجه بعده من خلال كلمه افتر او ان انا اضيف حاجه قبله من خلال كلمه بي فور الحاجه دي لازم تكون مستخدم فيها ال الكونتنت علشان تشغل البي فور او الافتر لازم تكون كاتب عندك الكونتنت لازم الخاصيه دي الكونتنت تكون موجوده علشان البي فور والافتر يشتغلوا طيب انا ممكن ان انا اجيلك هنا في علامتين التنصيص ما بينهم واضيف مثلا كلمه معينه فالكلمه دي هتضاف اهو قبل بيفور قبل البراجراف ممكن بقى ان انا الون الكلمه دي واضيف ليها كل التنسيقات اللي انا عاوزها ممكن ان انا الونها واضيف لها مثلا باك جراوند ومثلا اضيف لها برض فونت سايز تمام 25 بيكسل مثلا او برضو ان انا اضيف لها كل التنسيقات اللي انا عاوزها طيب ايه فايده حاجه زي كده هقول لك انا ممكن يكون عندي مثلا 1000 برجراف في الموقع تمام فانا من خلال كلمه واحده بس انا بكتبها عندك هنا في الكونتنت كلمه واحده اكل الكلمه دي وليكن احمد مثلا فالكلمه دي هيتم تطبيقها انا كتبتها مره واحده هيتم تطبيقها على كل العناصر اللي موجوده في الموقع بتاعك سواء قبل او حتى انا ممكن ان انا اخليها بعد من خلال كلمه افتر طيب طبعا انا لو عاوز ان انا احط مسافه ممكن ان انا مثلا احط مسافه هنا تمام اعمل دلوقتي سبيس علشان الابيس ده يبدا ان هو يتطبق عندك بالمنظر ده او حتى لو هي مثلا بي ف ممكن بدل ما يكونوا شبكين في بعض كده ممكن ان انا احط سبيس بالمنظر ده فهيكون في مسافه عندك هنا بالمنظر ده طيب ده بالنسبه للكلام انا دلوقتي مش عاوز ان انا اضيف كلمه قبل العنصر بتاعي انا دلوقتي مثلا عاوز ان انا اضيف شكل معين عاوز دلوقتي ان انا اضيف مربع ما مثلا قبل العنصر بتاعي دلوقتي انا لو شلت الكلمه دي فالمعده هيختفي المربع سيبك بقى من الفونت سايز وسيبك دلوقتي من الكر المربع اللي انا كنت عامله ب الباك جراوند هيختفي هو طبعا تعال كده لما نلونه عندنا باي لون هو بيظهر طالما في محتوى جوه عندك في الكونتنت طالما في محتوى يبقى الباك جراوند هيظهر المربع ده هيظهر طيب انا مثلا عاوز ان انا اظهره وركز عاوز دلوقتي ان انا اظهره بدون ما يكون فيه كونتنت اولا لازم الخاصيه دي تفضل موجوده حتى لو انت مش هتكتب فيها اي حاجه تمام لازم تكون موجوده علشان البي فور او الافتر يشتغلوا طيب انا برده عاوز ان انا اظهر المربع علشان تظهر المربع انت بتعمل خطوتين وركز لان الحته دي لو انت فهمتها البي فور والافتر هيكونوا اسهل حاجه بالنسبه لك اول خطوه تعالى كده حتى لما نعملها عندنا في تعليق اول خطوه هو ان انت تحدد عندك الطول والعرض الطول والعرض اللي هما الهايت والوتس دي اول خطوه بما ان مافيش محتوى فانت لازم تعمل ابعاد طول وعرض علشان المربع ده يظهر تاني خطوه ان انت تحدد موقع المربع بتاعك او الشكل بتاعك ان انت تحدد البوز بتاع المربع بتاعك لو ما عملتش الخطوتين دول فال المربع بتاعك مش هيظهر وتعال دلوقتي لما نعمل مثال نظهر من خلاله المربع ده هنعمل دلوقتي عندنا هنا برجراف فاضي مش هنكتب جواه دلوقتي اي حاجه وهجيلك هنا مثلا على البراجراف نفسه البراجراف ركز وهدي لله طول وعرض مثلا وليكن طول 50 بيكسل ومثلا الويتس هسيبه 100% وهدي لله مثلا باك راوند باي لون ايا يكن تعال كده لما نعمل مثلا اللون ده تمام ايا يكن اللون ده طيب انا دلوقتي محتاج ان انا اضيف عندك مربع يكون عندك في شمال البراجراف عاوز دلوقتي ان انا اضيف مربع من خلال البي فور يكون على شمال البراجراف طيب المربع هيكون باللون اللي قدامك ده تمام طيب اول خطوه علشان اظهر عندك المربع ده ان انا احدد الابعاد بتاعته اللي هما الطول والعرض طيب انا عاوز الطول يكون طول البرجراف فهقولك انا عاوز ان الطول ركز يكون 100% طيب والعرض انا عاوز مثلا ان العرض يكون وليكن 10 بكسل ايا يكن يعني اعمل اللي انت عاوزه طيب هل هيظهر لا مش هيظهر ليه لان انت ما عملتش تاني خطوه وهو ان انت تحدد الموقع بتاع المربع ده فانا هقوللك ان انا عاوز ان انا استخدم البوزيشن وليكن ابسليوت علشان من خلالها احدد مكان المربع ده وطبعا انا عارف ان الابسليوت بتتحرك بناء على الاب بتاعها والاب بتاع البي فور هو البي هو العنصر نفسه فانا ممكن ان انا مثلا ادي للعنصر نفسه بوزيشن ريليف علشان الابسليوت يتحرك بناء على العنصر ده فاقدروا ان انا احطه في المكان اللي انا عاوزه ممكن مثلا احطه في اليمين عندك هنا في المكان ده فخليه مثلا في التوب زرو وفي الرايت تمام الرايت 0 تمام فهحس ده ممكن مثلا ان انا اخليه يرجع تاني عندك في المكان ده بان انا اخليه في الفت زيرو تمام ممكن ان انا اخلي الشريط ده يكون فوق عندك هنا في المكان ده طبعا ده انت بتعمله من خلال ان انت بتغير الابعاد ان انا مثلا عاوز العرض عرض البي فور يكون بعرض البرجراف كله انا عاوز ان هي تكون بالعرض كله فخلي ان العرض يكون 100 في طيب والطول الطول مثلا هيكون 10 بيكسل او 20 بيكسل او ايا يكن فهتكون عندك في المكان ده وتقدر مثلا ان انت يكون عندك 1000 برجراف في الموقع وهيتم تطبيق الكلام ده عليها بالمنظر ده الكلام ده انت تقدر ان انت تطبقه على البي ف او الافتر ما فيش اي مشكله اتكلمنا عن السلكتور في بدايه الدوره دي وعرفنا من خلال السلكتور ازاي بنحدد او بنختار عناصر الاتش تي ام ال من خلال السي اس اس النهارده هنتكلم عن السلكتور ولكن هنتكلم عن جزء متقدم من السلكتور وانا تعمدت ان انا اخليل لك الجزء ده في مرحله متاخره من الدوره دي علشان دماغك تكون مؤهله وتقدر تستوعب الكلام اللي هيتقال فما تقلقش انا عامل حسابي لكل كلمه هتتقال ان شاء الله في الدوره دي طيب بهدوء شديد النهارده ان شاء الله هنتكلم عن نوعين من السلكتور وهما الاسن سبلنج سلكتور او الاخوه المجاورين وهشرح لك ان شاء الله كل حاجه ما تقلقش وهنعرف الفرق ما بين النوع ده وما بين نوع تاني اسمه الجنرال سبلين سلكتور كلمه سبلين هي الاخوه طيب يعني ايه اخوه احنا عرفنا الفرق ما بين الاباء والابناء فدلوقتي انا لو عندي هنا ديف خلي بالك الكلام اللي انا هقوله ده هبين عليه كل حاجه فركز لو سمحت فلو عملنا هنا برجراف وكتبنا فيه كلمه ايتم 1 وعملتلك هنا براجراف تاني في ايتم ت وهنا ايتم 3 فاحنا اتعلمنا ان التلاته دول هم ابناء للديف ده فالف ده هو اب كبير للثلاثه دول ولكن ايه علاقه البرجراف الاول بالتاني بالثالث ببساطه البرجراف ده هو اخ او سبلنج للبرجراف ده وده هو اخ او سبلنج للبرجراف ده الثلاثه دول هم اخوه لبعض لانهم محطوطين في نفس السكوب محطوطين جوه الديف لو انت عندك هنا بره هنا بره السكوب ده برجراف مثلا مكتوب فيه اي كلمه ايتم فور مثلا في البرجراف ده مش اخ لدول ليه لان ده مش في نفس السكوب بتاعهم كمان برض لو انت عندك هنا ديف والدف ده جواه هنا برجراف مكتوب فيه مثلا اي كلمه تمام فالبرج ده مش اخ لدول لان ده مش في نفس السكوب بتاعهم ده البرجراف ده هو ابن للدف ده لكن الثلاثه دول هم ابناء للدف ده فالثلاث دول هم اخوه ولكن مالهمش علاقه بالبرا ده وصلت طيب انت عاوز تقول لنا ايه انا دلوقتي عاوز اقوللك ان انا لو عندي هنا اتش 2 جواها مثلا اي كلمه وليكن تايتل انا بكتب لك اي كلمه اكتب انت الكلمه اللي انت عاوزها وعندي هنا مثلا براجراف مكتوب فيه مثلا ذا بي ايا يكن وانا دلوقتي عاوز من خلال السي اس اس ان انا اوصل للبرجراف ده من خلال ايه بقى من خلال الاتش 2 من خلال العنصر اللي قبله اه ده غريب قوي احنا علمنا قبل كده ان احنا نوصل للعنصر من خلال مره كنا بنوصل له من خلال التاج او الكلاس او الاي دي او طرق ثانيه كتير اتكلمنا عليها ولكن ايه موضوع ان انا اوصل له من العنصر اللي قبله كتير بنحتاج لحاجه زي كده يعني انا ممكن مثلا اقول لك دلوقتي لو في اكشن حصل على العنصر ده الون لي العنصر اللي بعده باللون الاحمر او امسحه لي مثلا يعني مثلا لو في مستخدم اشترى منتج من الموقع بتاعي وفي اكشن حصل على عنصر معين خلي لي العنصر اللي بع ده يتمسح او يكبر او يصغر او لونه يتغير او حاجات كتيره انت بتبقى عاوز ان انت تعملها فانت كتير بتكون عاوز ان انت تعدل العنصر اللي بعد العنصر اللي معاك شرط طبعا ان هو يكون اخ طيب ازاي بنعمل كده ازاي دلوقتي اوصل للعنصر ده من خلال العنصر ده هروح لك هنا واقول لك دلوقتي انا معايا العنصر الاول اللي هو الاتش 2 تمام العنصر ده عاوز دلوقتي اوصل لاخوه فاجي لك هنا واعمل لك علامه الزائد واكتب لك الاخ بتاعه تمام وحط بقى التنسيق اللي انت عاوزه التنسيق اللي انت تكتبه هنا هيتعمل على البي تمام ولكن مش اي بي في الموقع البي اللي هو الاد جيسن سبلين الشقيق المجاور للعنصر ده تعالى دلوقتي لما نختبر الموضوع ده دلوقتي مع بعض تعال كده لما نعمل عندنا هنا ريلود قبل بس ما نكتب اي حاجه وتعال هنا لما نكتب عندنا هنا مثلا اي خاصيه وليكن اللون الاحمر هعمل لك هنا ريلود تلون عندك البراجراف ده خلي بالك انت لو عندك هنا كذا برجراف مافيش حد فيهم هيتغير غير ده بس لان انا بقوللك الشقيق المجاور فلو عملتلك هنا ريلود ده بس اللي اتغير ليه لان هو ده اللي بعد الاتش 2 على طول خلي بالك هو لو ما كانش بعد الاتش 2 على طول ما كانش التاثير ده هيحصل عليه فلو انا جيت لك هنا وعملت لك ديف او عملتلك حتى اي عنصر تاني اتش 3 مثلا وكتبت جواها اي كلمه فدلوقتي البي مش بعد الاتش ت يبقى التاثير ده مش هيحصل فلو عملت لك هنا ريلود مافيش حاجه حصلت ليه لان دلوقتي البي ده ما اصبحش دلوقتي اجيس انتت سبلين وكلمه اجسن سبلين هي ترجمه لكلمه الشقيق المجاور المجاور يعني لازم يكون جنبك على طول طيب تعال كده لما نفهم برض دلوقتي مع بعض تمام لو عملت لك هنا ريلود شغاله معاك لو البي ده ما كانش في نفس السكوب اه هنا برض التاثير ده مش هيحصل لان البي ما اصبحت دلوقتي شقيق للاتش 2 فلو عملتلك هنا ريلود مافيش حاجه هتشتغل كمان برض لو البي تعال كده لما ناخده كات ونحطه عندك هنا في ديف جوه هنا برضو عندك مش هيشتغل ليه مش هيشتغل لان ده مش في نفس السكوب يعني مش اخ لتش ت وصلت طيب دلوقتي احنا عندنا حاجه تانيه وهي الجنرال سبلين سلكتور الطريقه دي اسمها اجسن سبلين سلكتور الطريقه دي بتجيبلك عندك برجراف واحد بس من الاخوه دول اللي هو البرجراف الاول اللي بعد العنصر على طول عندي علامه تانيه وهي تعال كده العلامه دي العلامه دي موجوده عندي عند حرف الزال بتكتب عندك فت ثم حرف الزال فبيعمل لك العلامه دي العلامه دي اسمها جنرال سبلين سلكتور ودي بتجيب لك كل البراجرافات السيبل اللي بعد العنصر ده ومش شرط يكونوا مجاورين لان ما قلتلكش اجسن انا بقوللك جين سكتور يعني كل الاخوه اللي بعد الاتش ت فلو عملتلك هنا ريلود جابهم لك كلهم طب لو انا فصلت ما بينهم مثلا بش 3 مثلا تست برضو هيجيبهم لان ما قلتلكش اجسن فاهم جابهم لك برضو كلهم جابلك كل البرجرافات اللي بعد الاتش 2 طيب لو ما كانوش اخوه لا لو ما كانوش اخوه مش هيجيبهم فلو انا جيتلك هنا وحطيتهم لك في سكوب مختلف و قلتلك هنا ريلود ما جابهم التاثير ده ما حصلش ليه ما حصلش لان اسمها جينرال سبلين وبلين معناها اخوه طيب لو كانوا عندك تعال كده ناخدهم كت ونعمل لك هنا ديف احنا بنجرب مع بعض تمام طيب هل دلوقتي البرجرافات دي هي اخوه للاتش 2 الاجابه لا طبعا فلو عملتلك هنا ريلود ماجوش برضو مش هيجوا عندك غير لما يكونوا عندك اخوه يعني في نفس السكوب فلو عملت لك هنا ريلود دلوقتي لانهم في نفس السكوب تمام وصلت الموضوع سهل اظن مش صعب والفكره اظن وصلت النهارده هنوصل ان شاء الله للعنصر من خلال الاتربيوت بتاعه يعني ايه الكلام ده تعالوا دلوقتي لما نشوف مع بعض انا هعمل لك هنا مثلا انبوت هديله مثلا طايب تكست وهمي بس بالبلس هولدر هكتب بس فييه كلمه تكست علشان يظهر عندك بس بالشكل ده طيب هجيلك هنا وهعمل لك دلوقتي عنصر مختلف بياخد عندك الاتربيوت ده الاتربيوت اللي اسمه طايب ايه هو العنصر ده انا عندي هنا البوتون بياخد عندي نفس الاتربيوت اللي اسمه تايب ممكن اخليه مثلا سبمت ايا يكن وهكتب لك هنا كليك انا دلوقتي عاوز اوصل للعنصر ده من خلال الاتربيوت بتاعه يعني انا دلوقتي عاوز اجيلك هنا واقوللك اي عنصر واخد الاتربيوت اللي اسمه تايب جيبه لي لو سمحت طيب بنعمل الكلام ده ازاي علشان توصل عندك لاي عنصر واخد اتربيوت بتكتب عندك القوسين المربعين اللي قدامك دول اللي هم اسمهم السكوير براكتس وبتكتب هنا اسم الخاصيه او اسم الاتربيوت تمام طيب اللي انت عملته ده معناه ايه اللي انا عملته ده معناه ان انا بقول لك روح لي في صفحه الاتش تي ام ال دور لي على اي عنصر واخد عندك الاتربيوت اللي اسمه تايب لو سمحت جيبه لي علشان تضيف لي التنسيق اللي هحطه لك دلوقتي فهو هنا هيروح لاي عنصر واخد عندك الاتربيوت اللي اسمه تايب ويضيف له مثلا تعال كده لما نضيف لك هنا باك جراوند ريد على سبيل المثال مش اكتر طيب هو هنا يعمل ايه هو هنا هيعمل لك الباك جراوند ريد للعنصر اللي هو الانبوت والعنصر اللي اسمه بوتون ليه لان الاتنين واخدين عندك نفس الاتربيوت بالظبط طيب لو انا قلت لك تعال كده لما نجيب البليس هولدر ونقول لك دلوقتي روح لاي عنصر واخد عندك الاتربيوت اللي اسمه بليس هول وضيف له التنسيق ده يبقى دلوقتي الانبوت بس اللي هيتم اضافه ل التنسيق ده لان الانبوت بس هو اللي واخد عندك الاتربيوت ده فتعال كده لما نكتب الكلام ده قدامنا في تعليق انت علشان تعمل تعليق في السي اس اس بتكتب عندك اين دبل سلاش وبتكتب ما بينهم النجمتين دول وما بينهم بتحط التعليق بتاعك طيب اول طريقه عندنا تعال كده لما نكتب مع بعض اول طريقه ان انت بتكتب عندك اسم الاتربيوت بالشكل ده طيب تاني طريقه تعال كده تاني طريقه ان انت بتحدد النت اللي انت عاوزه يعني ايه الكلام ده يعني انا هقول لك بدل ما تروح لاي عنصر واخد عندك الاتربيوت ده لا روح لي لاي انبوت واخد عندك الاتربيوت ده انا هنا بحدد الاليمنت اللي انا عاوزه يبقى هو هنا مش هيروح لاي عنصر وخلاص لا هو هنا هيروح لاي انبوت يشوف هل هو واخد عندك الاتربيوت ده ولا لا فلو انا جيت لك هنا وعملت لك دلوقتي ريلود جابلك فعلا الانبوت ده ولو انت عملت عندك 1000 انبوت واخد عندك الاتربيوت ده لو عملتلك هنا ريلود هيجيبهم لك طب لو هو مش واخد الاتربيوت ده لا مش هيجيبه ك فلو عملتلك هنا ريلود التاني ده ما جابوش ليه ما جابوش لانه ببساطه مش واخد عندك الاتربيوت ده تمام تمام جدا جدا تعال كده لما نعمل هنا ريلود ونرجع هنا نكتب الكلمه دي فتاني طريقه ان انت بتجيب عندك النت وبتكتب عندك اسم الاتربيوت بالشكل ده بيكون الموضوع عندك اكثر تحديد طيب تت طريقه معانا تعال كده التت طريقه ان انت بتكتب عندك اسم الاتربيوت وكمان بتكتب عندك الفالو بتاعه الموضوع عندك بيكون اكثر تحديد يعني ايه الكلام ده يعني انا ممكن دلوقتي اقوللك روحلي لاي عنصر واخد عندك الاتربيوت ده ولكن شرط ان الاتربيوت ده يكون واخد عندك فو اسمه تكست مثلا فهو هنا هيعمل ايه هنا هو روح لك دلوقتي في صفحه الاتش تي ام ال يدور لك هنا على اي عنصر واخد عندك الاتربيوت ده ولكن شرط ان قيمه الاتربيوت تكون تكست فلو جيت لك هنا وعملتلك دلوقتي ريلود جاب لك العنصر ده طب لو انت عندك 1000 عنصر مديله نفس الاتر بيوت وواخد عندك نفس الفالو فبرضه هيجيبه لك طيب لو مثلا انت عندك هنا عنصر واخد نفس الاتربيوت ولكن القيمه بتاعته مثلا باسورد مثلا هو واخد نفس الاتربيوت ولكن مش نفس القيمه اللي انت كتبتها هنا في الحاله دي هو مش هيجيبلك العنصر ده مش هيجيبلك العنصر التاني لان مش نفس الفالو طيب لو انا كتبتلك هنا بمت تعال كده لما ناخد سبمت ونحطها لك هنا في الفالو فلو جيتلك هنا جابلك العنصر ده لان الزر بس هو اللي واخد عندك الاتربيوت اللي اسمه تايب وكانت القيمه بتاعته سبمت تمام طبعا برضو انت ممكن تحدد يعني ممكن اجيلك هنا في الطريقه الرابعه واكتبلك هنا النت ثم الاتربيوت والفو بتاعه يعني ممكن اقوللك دلوقتي بدل ما تروح لاي عنصر لا روحلي لاي انبوت تمام او روحلي لاي بوتن حدد انت العنصر اللي انت عاوزه دلوقتي احنا هنبدا نتكلم عن السيرش ان انت تبحث جوه الو دي تمام الطريقه دي بتقوللك ان انت بتكتب عندك هنا الاتي وبتعمل عندك العلامه دي اللي هي رقم او شت 6 وبتكتب عندك الفالو عادي جدا هشرحلك كل حاجه ما تقلقش طيب دي معناها ايه دي معناها ستارت وز يعني انا دلوقتي بقوللك لو انا كتبتلك العلامه دي لو سمحت ابحث لي عن فو بيبدا بالكلمه اللي انا هكتبها لك هنا فتعالوا كده لما ناخد مثال بسيط مع بعض تعالوا كده لما نيجي عندنا هنا وناخد بس مثال منطقي هنكتب عندنا هنا هو اسم الاي وهنكتب هنا الاتش ار اي اف وهنكتب مثلا مثلا ww فيسبوك دوت ك انا بكتبلك كلمه كبيره علشان بس ايه الموضوع يكون مفهوم مش اكتر هكتبلك هنا فيس بوك لو عملتلك هنا ريلود هي دي الكلمه اللي ظهرت قدامك طيب انا دلوقتي عاوز اقوللك اوصلي تعال كده اوصلي دلوقتي لاي عنصر واخد عندك اتربيوت اسمه اتش ار اي اف ولكن لو سمحت يكون بيبدا بالكلمه اللي انا هكتبها لك هنا ممكن ككتب لك هنا دبليو دبليو دبليو العنصر ده في الاتربيوت ده هو بيبدا بكلمه دبليو دبليو دبليو ايوه فلو عملت لك هنا ريلود تطبق عليه الخاصيه اللي انت حطيتها هنا ممكن نغيرها مثلا نخليها هنا كر مش مهم الخاصيه احنا دلوقتي بنركز بس على السلكتور فدلوقتي العلامه دي معناها ستارت وز لو انت كتبت عندك حرف واحد حتى بالشكل ده هيجيبه لك تمام طيب لو انا دلوقتي غيرتلك الكلمه دي باي حاجه تانيه 3ه اس مثلا ما كانش نفس الكلمه اللي انت كاتبها هنا فلا الكلام ده ما ينفعش الكلمه اللي انت بتكتبها هنا هي الكلمه اللي بيبدا بيه الفالو اللي محطوط هنا حلو جدا جدا الكلام ده فدي معناها الستارت وز عكسها تماما تعال كده لما ناخد دي كبي ونحطها عندنا هنا المفروض ان انا كنت اكتب هنا خمسه يلا مش مشكله واكتبلك هنا 6 طيب عكسها تماما علامه الدولار ساين الدولار ساين معناها اند يعني لازم ال اللي انت بتكتبه هنا في حاله ان انت طبعا كتبت عندك الدولار ساين لازم ال ده يكون بينتهي بال مكتوب عندك في الاتي فلو انا كتبتلك هنا دبي دبلي دبليو بالشكل ده هل الكلام ده منطقي لا الكلام ده مش منطقي فلو عملتلك هنا ريلود مش هيجيبه ولكن لو كتبتلك هنا ك هيجيبلك على طول فلو عملتلك ريلود هيجيبه ك ليه لان ال ده ده نتهي بكلمه كوم لو انت خدتها كلها كوبي وحطيتها عندك هنا هيجيبها لك برضو فاهم لان الفالو اللي هناك بينتهي كله بالكلمه دي انت كتبتها بشكل مظبوط حطيتها هنا كلها بشكل مظبوط ف علامه الدولار ساين معناها اند وز الموضوع سهل لحد دلوقتي سهل جدا تعال لما نكمل دلوقتي مع بعض هناخد دي كوبي مكملين متقلقش يعني فعندنا دلوقتي علامه تانيه وهي علامه النجمه ودي معناها تعال كده لما نفتح دي معناها كونتين اسبيس فايد val ركز قوي على كلمه فو اه ايه الكلام ده دلوقتي علامه النجمه دي معناها ان الكلمه اللي انت بتكتبها هنا لازم تكون موجوده جوه الفالو مش مهم في البدايه مش مهم في النهايه مش مهم فين بالظبط المهم انها تكون كونتيننت كون محتوى موجود جوه الفالو تمام فلو انا كتبتلك هنا هنا دبليو او بلاش دبليو تعال كده لما نكتب هنا فيس بوك طيب هل فيسبوك موجوده هنا اه موجوده فلو انا جيتلك هنا وعملتلك علامه النجمه وجيتلك هنا وعملتلك دلوقتي ريلود جابها لك ليه لانها كونتين موجوده لو انا حتى كتبتلك حرف الاف بس تعال كده لو كتبتلك هنا حرف الاف بس هيجيبها لك برضو ريلود جابها لك ف علامه النجمه دي معناها ان لازم الكلمه اللي انت بتكتبها هنا تكون تكون موجوده جوه المحتوى مش هتفرق في الاخر مش هتفرق في الاول مش هتفرق فين بالظبط في حاجه زيها بالظبط ولكن في اختلاف ما بينها تعال كده لما نفهمها دلوقتي مع بعض وهي العلامه دي العلامه دي بتلاقيها عندك على حرف الزال بتكتب عندك شيفت ثم حرف الزال العلامه دي الاختلاف ما بينها وما بين علامه النجمه ان انت بدل ما بتبحث عن فو بتبحث عندك عن وورد كونتين سيفاد وورد يعني لازم اللي انت بتكتب اتبه هنا يكون كلمه مستقله يعني ايه كلمه مستقله تعال كده لما نكتب عندنا حرف الاف زي ما هي ولكن نعمل عندنا العلامه دي ونعمل هنا ريلود مش هيجيبها لك الله هو انت مش بتقول لي كونتين انا بقول لك اه كونتين ولكن انا بقول لك لازم تكون كلمه يعني لازم تكون مفصوله فلو انا جيت لك هنا وعملت لك كلمه مفصوله لوحدها مثلا مثلا كلمه اي تست اي حاجه يعني تمام فالكلمه دي هي كلمه مفصوله يعني في سبيس اهو فلو انا جيت لك هنا وعملت لك دلوقتي كلمه تست هيجيبها لك فلو عملت لك هنا ريلود جاب لك الكلمه دي لكن لو انا ماكنتش عامل سبيس دي كده ما بقتش كلمه فاهم فلو عملت لك هنا ريلود ما جتش اه طب اهد بقى كده عليا وفهمني الموضوع ده بالظبط دلوقتي علامه النجمه انا كنت ببحث عن فالو يعني ممكن ابحث لك عن مجموعه حروف مثلا فيس فيس دي اللي هي ايه اللي هي بدايه كلمه فيسبوك اللي هي الكلمه دي ما فيش هنا بقى ولا مسافات ولا لا دي كلمه لوحدها ولا اي حاجه انت دلوقتي بتبحث عندك عن فو اللي انت بتكتبه هنا دي مجرد حروف انت بتبحث عليها فكده هيجيبها لك لو عملت لك ريلود هيجيبها لك لكن لما انت بتبحث عندك بالعلامه دي انت هنا بتبحث عن كلمه مستقله فلو انا جيت لك هنا وعملت لك دلوقتي ريلود مش هيجيبها لك لازم تكون كلمه مستقله بالشكل ده يكون عندك سبيس هنا وسبيس هنا يعني كلمه مستقله فلو عملت لك هنا ريلود هيجيبها لك فهمتوا الفرق الموضوع سهل جدا طيب اخر حاجه بقى عندنا وهي برض مش صعبه الموضوع سهل جدا رقم 9 بينطبق عليها كل اللي فات ده باستثناء بس ان انت بتحط عندك حرف الاي يعني ممكن تستخدم دي او دي او دي او دي او حتى اي حاجه في دول ولكن بتيجي عندك هنا وبتكتب حرف الاي ايوه يعني ايه الكلام ده انا مش فاهم حاجه طيب الاي ببساطه وبهدوء بتلغي حساسيه الحروف يعني ايه الكلام ده يعني بتلغي حاجه اسمها الكيس سينسيتيف اه يعني ايه حساسيه الحروف او يعني ايه الكيس سنستيف دلوقتي انت لما بتكتب عندك فو في الاتربيوت لو انت كتبت الفالو ده بحروف لور كيس يبقى لازم تيجي عندك هنا وتكتبه حروف لور كيس طيب تعال كده لما ناخد مثال علشان الموضوع يكون مفهوم عندنا اكتر لو انا جيتلك هنا وكتبتلك دلوقتي الاتربيوت اللي اسمه كلاس وكتبتلك فيه مثلا تست هتقوللي ايه ده هو انت هتستخدم الكلاس كاتيو هقوللك هو مش ده كده يا معلم اسمه اتربيوت سواء الكلاس او حتى الاي دي هو مش ده اتربيوت وده اتربيوت طيب انت ممكن دلوقتي تيجي عندك هنا وتنادي دلوقتي على العنصر ده من خلال الاتربيوت اللي اسمه كلاس وتقوللي هو كان واخد عندك فو الو ده اسمه ست نفس الموضوع بالظبط ده يا معلم اتربيوت تمام طيب دلوقتي طالما انت كاتب عندك هنا الو بحروف لور كيس او حروف صغيره يبقى لازم تيجي عندك هنا وتنادي عليها بحروف كيس او حروف صغيره ما ينفعش تكتب عندك حروف كابيتال تمام فبت جي عندك هنا وبتستخدم دلوقتي الحروف اللور كيس لو انا جيتلك هنا وعملت لك ريلود شغاله معاك لكن لو انا كنت كتبتها هنا بحروف كابيتال هيقوللك لا الكلام ده ما ينفعش طيب لو انا بقى جيت لك هنا وعملت لك حرف الاي حرف الاي بيلغي لك حساسيه الحروف فلو انا عملت لك هنا ريلود قال لك تمام مافيش عندي مشاكل اكتبها انت هنا بقى بحروف كابيتال حروف سمول تعال كده اكتب هنا سول حرف سمول وبعد كده حرف كابيتال وبعد كده حرف سمول وبعد كده حرف كابيتال عادي شغاله معاك مافيش اي مشكله طالما انت كتبت هنا حرف الاي شغاله معاك ومافيش مشاكل طيب الكلام ده بينطبق عندك على دي وعلى دي وعلى اي حاجه في دول فلو انا حد استخدمت لك مثلا الستارت وز بالشكل ده وعملتلك هنا ريلود شغاله معاك ومافيش مشاكل تمام فالاي بتلغي لك الكيس سنيف الترانس فورم فكره بسيطه جدا ولكن لو انت فهمتها هتفتح لنفسك افكار عظيمه جدا الترانس فورم بتعني التحويل فكره ان انت بتحول العنصر بتاعك من حاله معينه لحاله تانيه وتعال دلوقتي لما نشوف الموضوع ده بنفسنا هنعمل ديف وهنكتب فيه مثلا هنا اي كلمه للتجربه بس مش اكتر وهنروح عندنا في السي اس اس وهندي له طول وعرض وليكن طول مثلا 80 بيكسل وعرض وليكن برض 80 بيكسل طبعا اكتب انت الطول والعرض اللي انت عاوزه وكمان برض احط عندك هنا باك جراوند باللون الاصفر مثلا كل الكلام ده متاح ان انت تغيره براحتك هنبدا دلوقتي نتكلم على الترانس فورم الترانس فورم بتقبل منك عده قيم هنبدا نتكلم على اول قيمه عندنا وهي الترانس ترانس ليت الترانسليت بتسمح لك ان انت تحرك العنصر بتاعك ده على محور الاكس وعلى محور الواي ممكن ان احنا نكتب عندنا كده شويه ملاحظات عندنا هنا علشان الموضوع يكون سهل على الناس كلها الترانسليت بتعني ببساطه ان انت مثلا بتعمل موف للعنصر بتاعك على محور الاكس وعلى محور الواي ببساطه شديده تعال دلوقتي لما نشوف الكلام ده مع بعض دلوقتي انت بتكتب عندك هنا قيمه الاكس وقيمه الواي طبعا الكلام ده في حاله الو دي ان شاء الله بعد كده لما نشرح الثري دي هنبدا ان شاء الله نشوف عندنا قيمه تانيه وهي قيمه الزد ولكن خلينا دلوقتي في الحركه التو دي دلوقتي انا بكتب هنا قيمه الاكس وبكتب هنا قيمه الواي دلوقتي لو انا عاوز ان انا احرك العنصر ده على محور الاكس بمقدار 100 بكسل فهحخ الاكس وهكتب عندك 100 بكسل الموضوع بسيط جدا تمام طيب خد بالك ان انت لما بتكتب عندك قيمه ايجابيه فالعنصر بيتحرك عندك في اتجاه اليمين لكن لو كتبت قيمه بالسالب بيتحرك العكس يعني لو انا مثلا جيت لك هنا وقلتلك ان انا مثلا هحرك بمقدار سالب 20 بكسل فهو هيرجع لورا طبعا كل ما بكبر الرقم اكتر كل ما هيرجع لورا اكتر نفس الفكره دي تقدر ان انت تعملها عندك في محور الواي فلو قلت لك مثلا 100 بكسل هينزل لتحت بمقدار 100 بكسل لو انا عاوز ان انا ارفعه لفوق بكتب عندك رقم بالسالب وليكن مثلا هكتب لك سالب 40 بكسل فهي طلع لفوق طيب انا هنا بكتب عندك قيمتين يحصل ايه لو انا كتبت عندك قيمه واحده بس لو انت كتبت عندك قيمه واحده بس فهو بيعتبرها ان هي قيمه الاكس بس يعني لو انا كتبت لك هنا 100 بيكسل هو بيعتبرها كده ببساطه كانك كاتب له هنا 100 بكسل في الاكس وصفر في الواي هو بيعتبرها بالمنظر ده طيب تعال دلوقتي لما نتكلم على الترانسليت اكس والترانس ليت واي يعني ايه الكلام ده يعني تقدر ان انت تتحكم عندك في محور الواي بس او في محور الاكس بس ممكن ان انا اكتب لك مثلا 100 بكسل فده هيشتغل على على محور الواي بس او ان انا اخليها اكس فهي الشغل على محور الاكس بس طيب ده بالنسبه للترانس ليت عندك حاجه تانيه وهي السكيل السكيل ببساطه بتعني ان انت بتتحكم في الحجم بتاعك تقدر ان انت تكبر العنصر بتاعك او تقدر ان انت تصغره القيمه الافتراضيه بتاعته هي واحد ممكن ان انت مثلا تكتب عندك هنا اثنين فالعنصر بتاعك هيكبر طبعا كل ما تكبر الرقم ده كل ما العنصر بتاعك هيكبر اكتر واكتر فممكن ان انت تشبه عندك الاسكيل مثلا بزوم ان و الزوم اوت ده تشبيه بس مش اكترر وطبعا بنشتغل على محور الاكس وعلى محور الواي نفس الفكره بالظبط طبعا هنتكلم على النقطه دي ولكن بس خلينا دلوقتي نركز في الاكيل كل ما بتكبر الرقم كل ما العنصر بتاعك بيكبر طبعا انا قلت لك ان القيمه الافتراضيه هي واحد وواحد ده هو حجم العنصر الاصلي لو انت انت عاوز ان انت تصغر العنصر ده قلل الرقم ده عن واحد يعني اكتب مثلا 07 من مثلا فالعنصر بتاعك هيصر اكتب مثلا نص فالعنصر بتاعك هيصر اكتر واكتر كل ما بتصغر الرقم كل ما العنصر بتاعك هيصر اكتر واكتر طيب يحصل ايه لو انا كتبت رقم بالسالب لو انت كتبت عندك رقم بالسالب فالعنصر بتاعك ده بيتقلب بيعمل فليب فدلوقتي انا لو كتبت لك رقم بالسالب فالعنصر بتاعك اتقلب بالمنظر اللي قدامك ده طيب عندك برض السكيل اكس وال سكيل واي والاثنين القيمه الافتراضيه بتاعتهم هي واحد لو انت عاوز ان انت تكبر العنصر ده بتزود الرقم ولو انت عاوز ان انت تقلله بتصغر الرقم طبعا الاسكيل اكس بتتحكم عندك في الويتس العرض بتتحكم عندك في ان انت تكبر العنصر او تصغره من العرض فدلوقتي انا لو كبرت الرقم ده وخليته مثلا لاثه فالعنصر بتاعك ده هيكبر من الويتس من العرض تمام وطبعا العكس بتاعها هو ال واي فلو انت اتحكمت فيه هيكبر عندك من الواي او اتجاه الواي او اتجاه الهايت خلينا نقول ان احنا بنكبر الطول يعني عشان بس الناس تفهم و كده او ان انت تصغره ممكن ان انا اكتب لك مثلا نص فالعنصر بتاعك هيصر من اتجاه الواي ولو انا كتبت لك هنا الاكيل اكس فهي اغر من اتجاه الاكس او العرض طيب واحد دلوقتي هيسال ني ويقول لي ليه انا اتحكم في العرض بالاسكيل اكس وانا اصلا عندي العرض انا دلوقتي عندي الويتس هقول لك لا السكيل اكس بتتحكم عندك في العرض بتاع العنصر والمحتوى اللي جوه يعني لو انت كبرت العرض خليته مثلا اربعه مثلا فدف بتاعك هيكبر والمحتوى اللي جوه بيتشد عندك برض وبيكبر كذلك برض لو انت حبيت ان انت تصغره مثلا خليتها 04 من ف الديف هيصر والمحتوى اللي جوه هيصر الكلام ده ما بيحصلش في الويتس فدلوقتي الويتس لو انا مثلا خليتها لك 100% 100 تمام فدف بالفعل العرض بتاعه اصبح 100% ولكن المحتوى اللي جوه فضل زي ما هو تمام فده الفرق ما بين الويتس تمام او الفرق ما بين السكيل طبعا انت لو كتبت عندك قيمه بالسالب في السكيل اكس هيعمل لك فليب من اتجاه الاكس يعني بص دلوقتي على الكلام هتلاقي دلوقتي ان الكلام بتاعك اتقلب تمام الكلمه اللي انت كتبتها اتقلبت عندك وده معناه ان العنصر بتاعك عمل فليب من على محور الاكسس لذلك لو انت كتبت عندك هنا رقم بالسالب ل الاسكيل واي فهعمل فليب ولكن من اتجاه الواي وصلت طيب ده بالنسبه للسكي عندك كمان حاجه تانيه وهي الروتيت ومن اسمها انت بتعمل دوران للعنصر بتاعك فدلوقتي انا لو كتبت لك 30 درجه تمام فهعمل لك دوران للعنصر بتاعك بقيمه 30 درجه لو انت عاوز ان انت تكبر فبتكون هنعمل هنا انسبكت وتعال دلوقتي لما نجيبها من تحت واوريلك دلوقتي وانا بتحكم في الروتيت هتلاقي دلوقتي ان العنصر بتاعك بيدور كبر او صغر القيمه هتلاقي دلوقتي ان العنصر بتاعك بيلف او بيدور بالشكل ده تمام كذلك برض عندك الروتيت اكس والروت واي ودي بتعمل لك دوران ولكن بشكل مختلف فالروتين تعال كده لما نعمل عندنا هنا ريلود ونبدا دلوقتي ان احنا نتحكم عندنا في القيمه بتاعه الروتيت اكس دلوقتي انا لو زودت او قللت القيمه بص بيعمل لك دوران بيعمل لك روتيت ولكن من على محور الاكس فقط بص خلي بالك اهو بيعمل لك دوران وهتلاحظ دلوقتي ان الكلام عندك بيتقلب بيدور تمام فبيعمل لك دوران من على محور الاكس ده الروتيت اكس وخلي بالك ان انت لو خليتها 90 درجه العنصر بتاعك هيختفي تمام 90 درجه العنصر بتاعك هيختفي او حتى 270 40 درجه برض العنصر بتاعك هيختفي تمام طيب ده بالنسبه للروت اكس عندك كمان الروتيت واي نفس الفكره هو بيدور عندك من على محور الواي فدلوقتي انا لو اتحكمت في القيمه دي بيدور عندك من على محور الواي بالشكل ده بص اهو عمال بيدور عندك حتى الكلام اللي جوه اهو عمال بيتقلب عندك بالشكل ده وبرده نفس الموضوع لو انت خليتها 90 درجه العنصر بتاعك هيختفي تمام ولو انت خليتها 270 درجه برده العنصر بتاعك هيختفي طيب ده بالنسبه للروتي عندنا حاجه ثانيه وهي الاكيو او الانحراف دلوقتي الاسكيو بتقبل منك قيمه الاكس وقيمه الواي تمام بتقبل منك الاكس وبتقبل منك الواي فدلوقتي انا لو قلت لك ان انا عاوز اعمل انحراف للعنصر ده بقيمه 10 ديجري من على محور الاكس ومثلا 20 ديجري من على محور الواي فده الشكل اللي هيظهر لك ولو انا جيت لك هنا علشان اتحكم في الاكيو اتحكم في القيم بتاعتهم رحت لك مثلا على قيمه الاكس وحبيت دلوقتي ان انا ازود او اقلل القيمه دي بص شوف ايه اللي بيحصل للعنصر وانا بتحكم في الاسكيو اكس بتاعته كذلك لو انا رحت هنا للسكي واي وحبيت دلوقتي ان انا اتحكم فيه فبص تحس كده ان الحركه الري دي شويه بالمنظر اللي قدامك ده طيب ده بالنسبه لقيمه الاكس وقيمه الواي يحصل ايه لو انا كتبت قيمه واحده بس لو انت كتبت عندك قيمه واحده بس هو بيعتبرها ان هي قيمه الاكس يعني دلوقتي انت لو كتبت 10 ديجري هو بيعتبرها كانك كاتبها بالمنظر ده كانك كاتب له 10 درجه من على محور الاكس وصفر من على محور الواي تمام وخلي بالك في الحته دي في سؤال ممكن يتسال لك في الانترفيو ولا في اي حاجه هيقول لك دلوقتي لو انا كتبتلك هنا 10 ديجري على محور الاكس و10 ديجري على محور الواي هل دي هل الكود ده بيساوي بالظبط الكود اللي قدامك ده ولا لا هل ده بيساوي ده فترد عليه وتقول له لا ده مش بيساوي ده الكود الاول بيساوي 10 درجه من على محور الاكس و10 درجه من على محور الواي لكن الثاني بيساوي بالظبط 10 درجه من على محور الاكس وصفر من على محور الواي لازم ان انت تفهم النقطه دي فدلوقتي التاثير اللي قدامك ده مش هو نفس التاثير بتاع الكود الاول طيب كذلك برض انت تقدر ان انت تتحكم عندك في الاكيو اكس بس تمام او الاكيو واي بس نفس الفكره اللي اتكلمنا عنها في كل الحاجات اللي اتكلمنا عنها قبل كده اخيرا عندنا حاجه اسمها الماتركس والماتركس يعني لازم ان انت تفهمها شويه الماتركس بتقبل منك ست قيم اول قيمه بتقبلها منك هي قيمه الاكيل اكس اهد وفهمك دلوقتي كل حاجه وتاني قيمه بتقبلها منك هي قيمه الاسكيو او الانحراف الاسكيو واي وتاني قيمه بتقبلها منك هي الاسكيو اكس والقيمه اللي بعد كده اللي بتقبلها منك هي قيمه الاكيل واي تمام فهن كتب هنا سكيل واي واتقال انا هفهمك دلوقتي كل حاجه وبعد كده بنكتب عندنا هنا الترانس ليت اكس الترانس تمام الترانسليت اكس واخيرا بنكتب عندنا الترانس ليت واي طيب ببساطه عشان بس نكون فاهمين الماتركس من خلالها انت تقدر ان انت تضيف عندك كل القيم دي على سطر واحد وبتضيفي بدون ما بتكتب عندك بيكسل ولا ديجري ولا اي حاجه طيب يعني ايه الكلام ده تعال دلوقتي لما نشوف هنعمل عندنا هنا الماتركس انا قلت لك ان انت بتضيف عندك القيم دي في الماتركس فتعال دلوقتي نضيف عندنا القيم الافتراضيه لكل واحده فيهم انا عارف ان الاسكيل اكس القيمه الافتراضيه بتاعتها بتكون واحد فهن كتب عندنا هنا واحد وال سكيو طبعا القيمه الافتراضيه بتاعتها صفر فهتكون صفر في الواي وصفر في الاكس طيب وا سكيل واي القيمه اللي بعد كده الاكيل واي طبعا الاسكيل واي القيمه الافتراضيه بتاعتها زي الاكيل اكس بتكون واحد وال ترانسليت بتكون صفر في الاكس وصفر في الواي فاللي قدامك ده هي القيمه الافتراضيه او شكل العنصر بدون اي تغيير تمام بدون اي حاجه ده بيكون شكل العنصر طيب تعالى دلوقتي لما نختبر الموضوع ده مع بعض انا الاول كنت بقوللك ان انا من خلال الترانس فورم لو كتبت عندك ترانسليت اقدر ان انا اتحكم في العنصر ده واخليه يتحرك 100 بكسل من على محور الاكس وصفر مثلا من على محور الواي ده الحاجه اللي انا كنت اتعلمتها قبل كده طيب هل اقدر ان انا اعمل كده من خلال الماتركس تعال دلوقتي لما نشوف فين عندنا قيمه الترانسليت اككس انا قلتلك ان هي القيمه دي تمام اللي هي القيمه عندك رقم خم ادي واح ا 3 4 5 دي الترانسليت اكس فلو انا كتبتلك فيها 100 طبعا انت ما بتكتبش بيكسل ولا بتكتب اي حاجه انت بتكتب الرقم زي ما هو فالكود ده بيساوي بالظبط الكود ده تعال دلوقتي لما نشوف لو انا جيتلك هنا وشلت لك الكود ده وعملت له ديليت هل في اي حاجه هتحصل لا هو هو نفس التاثير بالظبط تعال دلوقتي لما نخليه مثلا يتحرك بمقدار 30 بيكسل فهن كتب عندنا هنا في الترانسليت 30 بالمنظر ده طيب انا عاوز ان انا انزله من محور الواي على الترانسليت واي فهن عندنا في القيمه الاخيره انا قلتلك ان الترانسليت واي تعال كده الترانسليت واي هي القيمه الاخيره اللي هو الرقم ده انا هقوللك مثلا ان انا هركه بمقدار 100 يعني 100 بيكسل فهينم عندك من على محور الواي طيب تعال دلوقتي نشوف عندنا السكيل انا في الاكيل اكس ممكن ان انا طبعا اول قيمه عندك هي قيمه الاسكيل اكس ممكن ان انا ازوده م مثلا واخليه واحد ونص فهيك ابر عندك من الاسكيل اكس من الويتس بمقدار واح ونص ممكن ان انا اكبره برض من الاسكيل واي بمقدار مثلا اثنين فهيك ابر عندك من الواي الاسكيل واي بمقدار اننين الرقم ده هو رقم السكيل واي وهنا الاسكيو ممكن مثلا ان انا اكتب لك اي رقم وليكن مثلا 1.4 الرقم اللي انت عاوزه اكتب انت القيم اللي انت عاوزها وبراحتك الموضوع ده حريتك انت تقدر ان انت تجرب و تحط القيم اللي انت عاوزها تمام احنا كنا عرفنا خاصيه اسمها الترانس فورم وعرفنا ان احنا بنستخدم عندنا قيمه اسمها ترانسليت الترانسليت ببساطه بتحرك العنصر بتاعك على محور الاكس وعلى محور الواي فانت بتكتب عندك هنا قيمه الاكس وبعد كده كوما وبعد كده قيمه الواي فلو انا عاوز ان انا احرك العنصر ده من على محور الاكس بمقدار 100 بكسل فبكت لك هنا في الاكس 100 100 بيكسل ولو انا عاوز ان انا احركه من على محور الواي بمقدار 100 بيكسل فب اكتب لك هنا 100 بيكسل الموضوع بسيط جدا طيب انا عاوز اقوللك ان احنا مش هنستخدم الكود ده كتير ليه الكلام ده لان ببساطه ظهرت عندنا خاصيه اسمها ترانسليت بشكل مباشر بدون بقى ما تكتب عندك ترانس فورم ترانسليت واقواس والكلام ده كله لا احنا بنكتب عندنا ترانسليت وبنكتب عندنا قيمه الاكس وقيمه الواي بشكل مباشر فلو انا عاوز ان انا احرك العنصر بتاعي ده من على محور الاكس بمقدار 100 بيكسل فبروح عندك على قيمه الاكس اللي هي اول قيمه وبكتب فيها 100 بيكسل ببساطه شديده لو عاوز ان انا احركه من على محور الواي بمقدار 100 بيكسل ف بكتب لك هنا 100 بيكسل تمام هي هي ولكن الموضوع بقى اسهل بكتير طيب كمان برضو احنا كنا خدنا خاصيه اسمها ترانس فورم سكيل عرفت عرفنا ان الخاصيه دي بتكبر او بتصغر العنصر بتاعك فلو انا عاوز ان انا اكبره بكتب لك هنا رقم اكبر من الواحد لو عاوز ان انا اصغره فبكت لك رقم اقل من الواحد وليكن نص طيب انا عاوز اقول لك ان احنا برض عندنا خاصيه تانيه اسمها سكيل بتكتبها بشكل مباشر وهنا انت بتكتب عندك الرقم اللي انت عاوزه لو كتبت رقم اكبر من الواحد يعني مثلا لو كتبت لك لاثه فالعنصر بتاعك هيكبر هي هي نفس الفكره ولو كتبت لك رقم اقل فالعنصر بتاعك هيبدا ان هو يصغر هي هي نفس الفكره طبعا القيمه الافتراضيه هي واحد ولو كتبت لك رقم بالسالب هيعمل لك فليب كل الحاجات اللي اتكلمنا عنها في السكيل او الترانس فورم سكيل هي اللي بنتكلم عليها عن السكيل فقط كذلك برض انت ممكن ان انت تكتب عندك قيمه الاكس وبعد كده مسافه وبعد كده قيمه الواي فممكن ان انا اقول لك اعمل لي سكيل بمقدار واحد و2 من على محور الاكس ومن على محور الواي مثلا خليه لي اثنين مثلا يعني فهيكون عندك من الاكس 1.2 ومن على الواي اين زي ما انا كتبت هنا كمان برض كنا اتكلمنا على خاصيه اسمها ترانس فورم روتيت تمام الروتيت بتعمل لك دوران زي ما تعلمناها فلو كتبت لك 20 او 30 درجه هيعمل لك دوران بمقدار 30 درجه نفس الموضوع ده موجود عندك هنا في خاصيه اسمها روتيت بشكل مباشر فانت بتكتب عندك هنا الرقم اللي انت عاوز العنصر بتاعك يدور بيه تمام لو انت عاوز ان انت تدور العنصر بتاعك او تلفه فبتكون لو انت كتبت 30 درجه بتكون دي القيمه لو كتبت 60 درجه بتكون دي القيمه بتاعتك فببساطة بتعني الانتقال من حاله لحاله تانيه بانمي شن بحركه وهي دي الفايده من الترانزيشن وعلشان تفهم انا بقوللك ايه هنعمل دلوقتي مع بعض هنا عنصر وهنكتب مثلا هنا جواه اي حاجه فعملنا عندنا ديف وكتبنا جوه الكلمه دي وهنروح عندنا في السي اس اس هنحدد دلوقتي العنصر ده وهندي لله طول وعرض وليك مثلا طول 30 بيكسل ايا يكن يعني ومثلا تيتس 80 بكسل اي حاجه وهندي لله مثلا باك جراوند هنسيبه حتى باللون الاسود وعلشان بس نظهر الكلام اللي جوه هنخليه عندنا باللون الابيض طيب انا دلوقتي عاوز اقوللك ان انا لو عملت هوفر على العنصر ده ينتقل مثلا من وس 80 بيكسل لوتس 100% فهقولك دلوقتي انا لو عملت هوفر كل ده احنا لسه ما استخدمنا الترانزيشن احنا بس ايه بنبدا كده نفهم مع بعض هقوللك انا دلوقتي لو عملت هوفر على العنصر ده عاوزك ان انت تنتقل من ويتس 80 بيكسل لوتس 100% طيب لو انا عملت هوفر بالفعل ينتقل ولكن انتقل بسرعه بدون اي حركه بدون اي انيميشن فاهم طيب ازاي دلوقتي ان انا اعمل عندك انيميشن علشان تعمل عندك الحركه هقوللك انا دلوقتي هستخدم الترانزيشن الترانزيشن لو انا كتبت عندك هنا واحد ثانيه واحد اس دي يعني واحد ثانيه يعني هينتقم من ويتس 80 بيكسل لوتس 100% في 1 ثانيه فلو عملت عندك هوفر انتقل عندك بانمي مشن بحركه بعكس ما انت ما كنتش كاتب عندك الترانزيشن فبالفعل هو كان بينتقل عندك من ويتس 80 بيكسل لوتس 100% ولكن بدون اي حركه ولكن بال ترانزيشن هو انتقل عندك بحركه والحركه دي مدتها واحد ثانيه ممكن تكتب عندك ثانيه تكتب عندك اربع ثواني تكتب اللي انت عاوزه الزمن اللي انت بتكتبه هو اللي بيتم فيه الحركه بتاعتك ممكن الحركه دي تتم مثلا على الويتس ممكن تتم برض على الهايت اقول لك مثلا انا عاوز ان الهايت يكون 400 بيكسل كمان مثلا يكون على الباك جراوند يكون باللون الاحمر كمان برض يكون على الكر تمام كل اللي انت عاوزه ممكن ان انت تكتبه فاقول لك مثلا انا عاوز ان الكر يكون باللون الازرق اي حاجه يعني مش مشكله فكل الكلام او كل الخصائص اللي انت ك بتاعي دي هتتم عندك في اربع ثواني فانا لو عملت لك هنا هوفر بص في اربع ثواني كل الخصائص اللي انت كتبتها عندك في الهوفر اشتغلت عندك على العنصر ده بص بالمنظر اللي قدامك ده طيب انا عاوز افهمك ان انت في الترانزيشن مش بس بتكتب عندك الديوري شن مش بس بتكتب عندك الزمن انت بتكتب عندك اربع خصائص ثانيه اول حاجه انت بتكتبها عندك هي الخاصيه اللي انت عاوز ان انت تعمل عليها عل ترانزيشن فانا دلوقتي لما عملت الانتقال الانتقال ده تم على كل الخصائص اللي عندك على الويس والهات والباك جراوند والكر لو انت عاوز ان انت تقول انا عاوز الترانزيشن ده او الانتقال ده يتم على الويتس فقط فبتكون الكلام ده ببساطه معناه ان الترانزيشن ده هيتم فقط على الويتس طيب والباق ايه الباقي هيشتغل بدون اي ترانزيشن يعني انا دلوقتي لو وقفت لك هنا على العنصر ده كل الخصائص اللي عندك سواء الهايت او الباك جراوند او الكر اشتغلت على طول الوحيده اللي هتاخد عندك اربع ثواني هي الويتس بص اهو كله اشتغل الا الويتس الويتس الوحيده هي اللي بتتحرك عندك في اربع ثواني بص الويتس هي الوحيده اللي بتتحرك عندك في اربع ثواني طيب لو انت عاوز ان كل العناصر يتم عليها الترانزيشن فبتكون واول هي القيمه الديفولت اللي سواء انت كتبتها او ما كتبتها كده كده هي الترانزيشن بتشتغل على اول يعني على كل العناصر اللي عندك او كل الخصائص اللي موجوده عندك فانا لو كتبت لك هنا اول وعملت لك هنا هوفر الترانزيشن هيشتغل على كل العناصر اللي عندك وهي هي لو انا ما كتبتها برض الترانزيشن هيشتغل على كل العناصر اللي عندك طيب دلوقتي افرد انا مثلا عاوز ان الترانزيشن يتم على الويس مثلا في اربع ثواني لكن الهايت يكون في ثانيتين والباج مثلا يكون في ثانيه مثلا يعني اعمل الكلام ده ازاي ببساطه هكتب لك هنا مثلا ان الويتس انا عاوز ان هو يتم في اربع ثواني طيب والهات هتعمل عندك هنا كوما وهتكتب عندك الهايت مثلا بيتم عندك مثلا في ثانيتين وهكذا بقى اعمل عندك كوما واكتب الباك جراوند بيتم في ثانيه والكر يتم في اللي انت عاوزه كل خاصيه بتعمل عندك كوه وبتكتب الزمن اللي انت عاوزه طيب لو انا دلوقتي وقفت لك على العنصر ال جراوند والكر مش هيتعمل لهم ترانزيشن واللي هيتعمل لهم ترانزيشن هما الويتس والهات الويتس في اربع ثواني والهات في ثانيتين فهتلاقي ان الهايت اسرع بص هتلاقي دلوقتي ان الهايت اسرع لكن اللي بتاخد عندك وقت هي الويتس بص اللي بتاخد عندك وقت هي الويتس لان الويتس بتتم عندك في اربع ثواني طيب انا تعال كده لما نرجع تاني هنا انا عاوز اقول لك ان انت ممكن تكتب عندك الزمن كواحد اس يعني واحد ثانيه او ممكن ان انت تكتبه 1000 ملي سكند 1000 ملي سكند بتعني واحد ثانيه هي هي فال 1000 ملي سكند ببساطه بتعني ببساطه كده واحد ثانيه طيب هي هي نفس التاثير بالظبط فتعلمنا ان الترانزيشن بتقبل منك الفالو اللي هي الخاصيه اللي انت بتشتغل عليها وممكن ان انت تكتب عندك هنا اول تمام فهي تشتغل على كل الخصائص اللي موجوده عندك وبعد كده بتكتب عندك الترانزيشن ديوريشن او الزمن طيب التت قيمه بتقبلها منك هي التايمن فانكشن التايمن فانكشن هي شكل الحركه بتاعتك فتعال كده لما نشوف مع بعض الكتشن بتقول لنا ايه على التايمنج فانكشن هتلاقي ان انت عندك الترانزيشن تايمين فانكشن بتوصف لك الحركه بتاعه الانيميشن بتاعك الحركه اللي قدامك دي تمام طيب الحركه دي بتقوللك شكلها هيكون عامل ازاي الترانزيشن تايمين فانكشن بتقبل منك عده قيم بتقبل منك الايز واللين واز ان واز اوت والاز ان اوت وهشرح لك ان شاء الله كل حاجه وما تقلقش طيب القيمه الافتراضيه عندك هي الاز ودي بتقول لك ان الحركه بتبدا عندك بطيئه وبعد كده بتكون عندك سريعه وبعد كده بتنتهي عندك ببطء شويه تمام لو انت مركز هتلاقي دلوقتي ان هو بيبدا عندك بطيء وبعد كده بيكون سريع وبعد كده بينتهي بطيء ممكن ان انت تلاحظ الموضوع ده اكتر لو انا خليت ان الحركه تكون عندك ابطا شويه وليكن لاث ثواني وخليتها مثلا على الويتس بس علشان تقدر ان انت تركز فلو جيتلك هنا وكتبتلك هنا اي ايز ببساطه هي القيمه الافتراضيه اللي سواء انت كتبتها او ما كتبتها كده كده الحركه بتبدا عندك بطيئه وبعد كده بتكون عندك سريعه وبعد كده بتنتهي عندك بطيئه طيب بعد كده عندك حاجه اسمها از ان الاز ان ببساطه بتبدا عندك بطيئه وبعد كده بتنتهي لسرعه عاديه بص كده تعال كده لما نشوف هو كاتب لك ايه هتلاقي دلوقتي كاتب لك هنا في الايز ان ان هي بتكون اسلو ستارت بتبدا عندك بسرعه بطيئه ولكن بعد كده ما بتكونش سريعه خلي بالك ان الايز بتبدا بطيئه وبعد كده بتكون سريعه وبعد كده بتكون عندك بطيئه ولكن الاز ان بتبدا بطيئه وبتنتهي لسرعه عاديه هي اه بتكون اسرع من السرعه البطيئه ولكن بتكون سرعه عاديه مش سريعه تمام سرعه عاديه زي اللي هنشوفها بعد كده ان شاء الله في اللينر طب تعال دلوقتي لما نشوف الكلام ده مع بعض لو انا جيت لك هنا على الايز ان وبصيت عليها هتلاقيه دلوقتي ان هو بيبدا بسرعه ابطا وبعد كده بينتهي السرعه عاديه هتلاقي ان السرعه اللي بعد كده اصبحت سرعه عاديه مش سريعه ولكن هي سرعه عاديه ولكن في الاول بيبدا عندك بسرعه بطيئه تمام طيب الايز اوت عكسها الايز اوت بتبدا عندك بسرعه عاديه وبتنتف او بتنتهي لسرعه بطيئه فدلوقتي انا لو وقفت على العنصر ده بدا بسرعه عاديه ولكن في النهايه السرعه بتاعته بقت ابطا بص بيبدا عندك بسرعه عاديه ولكن في النهايه السرعه بتاعته هتكون ابطا اهو هيروح في النهايه والسرعه بتاعته هتكون ابطا ده الاز اوت الاز ان اوت تمام الاز ان اوت بيبدا بسرعه بطيئه وبينتهي بسرعه بطيئه طيب واللي في النص اللي في النص بيكون سرعه عاديه وده الفرق ما بين الايز الفرق ما بين الاز والاز ان اوت فالز والاز ان اوت بيشتركوا ان البدايه بتاعتهم بتكون بطيئه عندك هنا سلو ستارت وعندك هنا برض في الايز ان اوت ان انت برض بيكون عندك سلو ستارت فالبدايه بتكون بطيئه في الايز والبدايه بتكون بطيئه في الايز ان اوت وبرضو النهايه بتكون عندك بطيئه عندك النهايه بتكون بطيئه اهي في الايز والنهايه برض بتكون عندك بطيئه في ايز ان اوت ولكن الفرق ان الايز في النص بيكون سريع لكن عندك الايز ان اوت في النص بتكون سرعه عاديه زيها زي اللينير اللي هنتكلم عليها شويه كده فتعال دلوقتي لما نشوف مع بعض الايز ان اوت بتبدا بسرعه بطيئه وبتنتهي بسرعه بطيئه لكن اللي في النص بتكون سرعه عاديه بص بالمنظر اللي قدامك ده طيب بعد كده عندنا اللينر اللينر هي السرعه العاديه اللي زي ما بتبتدي زي ما بتنتهي سرعه ثابته فدلوقتي انا لو وقفت لك على العنصر ده سرعه ثابته زي ما بتبتدي زي ما بتنتهي وما فيش اي يعني تدرج في السرعه تمام سرعه ثابته طيب عندك بعد كده حاجه ثانيه اسمها ستيبس ركز الاستبس ببساطه لو انت كتبت فيها واحد دي معناها ان الحركه بتاعتك هتتم عندك في خطوه واحده لو كتبت اثنين او كتبت عندك لاثه فهتمك في ثلاث خطوات فدلوقتي انا لو وقفت لك على العنصر ده الحركه هتتم عندك في خطوه الثانيه الثالثه لو انا كتبت لك هنا مثلا خمسه ووقفت على العنصر ده ادي خطوه الثانيه ثه رابعه خمسه ف ببساطه الاستبس بتتم عندك في خطوات الخطوات دي انت بتكتبها عندك هنا لو هتكتب عندك واحد خطوه ف هتتم عندك في خطوه واحده بس تمام لو انت وقفت عليها هتنتظر عندك الثلاث ثواني وبعد كده هتعمل عندك خطوه واحده بس وده لان انت كتبت عندك هنا واحد طيب عندك حاجه اسمها ستيب اند وستيب ستارت الستيب اند معناها ان انت لما بتقف على العنصر ده ده هينتصر عندك لاث ثواني وبعد كده هينط يعمل خطوه واحده وينتهي عندك الانيميشن فدلوقتي انا لو وقفت عليه هينتصر عندك الثلاث ثواني او المده اللي انت كتبتها وبعد كده بيعمل عندك ستيب اند الاند يعني بعد نهايه المده اللي انت كتبتها هنا وعندك حاجه تانيه اسمها ستيب ستارت يعني بيبدا عندك ينفذ الحركه بتاعتك قبل اي حاجه يعني اول ما هتقف هتلاقي دلوقتي ان الحركه عندك اشتغلت الستيب او الخطوه بدات عندك في الاول تمام طيب هنرجع عندنا تاني هنا هنخليها ايز اللي هي طبعا القيمه الافتراضيه وهنتكلم على اخر حاجه وهي الديلاي او التاخير دلوقتي انا لما بقف على العنصر ده الانيميشن بيشتغل بشكل مباشر انا عاوز اقوللك ان لا انا عاوز ان انا اخخر العمليه شويه عاوز دلوقتي انا لو وقفت على العنصر ده ينتظر مثلا ثانيتين وبعد كده يتم الانيميشن فبتكون لك ان انا عاوز مثلا ان التاخير يكون ثانيتين اكتب بقى ثانيتين ثانيه نص ثانيه 10 ثواني اكتب اللي انت عاوزه فدلوقتي انا لو وقفت على العنصر ده هينتر ثانيتين وبعد كده هيتم عندك الانيميشن طيب حلو جدا جدا انا عاوز اقوللك بقى ان الترانزيشن هي شورت هاند لكل الخصائص دي فال الترانزيشن هي شورت هاند للترانزيت تمام وال ترانزيشن ديوريشن وال ترانزيشن تايمين فانكشن وال ترانزيشن ديلاي طيب يعني ايه الكلام ده يعني انت ممكن ان انت ما تكتبش عندك السطر ده او ما تكتبش عندك الخصائص دي كلها على نفس السطر وتيجي عندك هنا وتقوللي ان انا عاوز ان الترانزيشن بروبيرتي اللي هي اول حاجه عندك انت عاوز ان الترانزيشن ده يشتغل على اي خاصيه بالظبط الهايت ولا الويس ولا الباك جراوند ولا ممكن ان انت تكتب عندك اول اكتب اللي انت عاوزه وبعد كده وبعد كده بتكتب عندك هنا الترانزيشن تاني حاجه وهي الديوري شن الديوري شن هو الزمن فممكن ان انا اكتب لك هنا لاث ثواني تمام بالشكل ده انت ممكن ان انت تتم عندك الحركه تمام فدلوقتي انا لو عملت لك هنا هوفر الحركه تمت عندك لان انت عندك هنا الوقت وعندك هنا الخصائص اللي انت ممكن ان انت تشتغل عليها ممكن ان انت تكتب عندك هنا الويتس وكوما وتكتب عندك الهايت تمام وتنزل تحت هنا تدي مثلا الوقت للوتس وليكن مثلا ل وكوما ومثلا واحد ثانيه لليت تمام وطبعا لازم تكتب عندك هنا قيمه الهايت وليكن مثلا مثلا يعني 500 بكسل ا يكن فدلوقتي انا لو عملتلك هوفر الهايت هتاخد عندك ثانيه والس هتاخد عندك ثانيتين بعد كده عندك هنا الترانزيشن تايمين فانكشن اللي انت ممكن تكتب فيها اي وممكن ان انت تكتب فيها ان اوت واز ان وين وكل الحاجات اللي اتكلمنا عنها من شويه واخيرا عندك هنا الترانزيشن ديلاي الترانزيشن ديلاي هي التاخير فممكن ان انا اكتب لك هنا تاخير ثانيتين فلو وقفت على العنصر ده هيعمل ديلاي ثانيتين وبعد كده ينفذ عندك الترانزيشن هنتكلم النهارده عن الانيميشن او الحركه في السي اس اس هنشرح ان شاء الله النهارده كل حاجه خاصه بالانيميشن من خلال الم اللي قدامكم ده وكمان هناخد برض المثال ده والمثال دول هيكون فيهم تطبيقات كتيره جدا وحاجات كتيره جدا وحركات هتفهم فكره الانيميشن بسهوله شديده طيب الانيميشن او التحريك في السي اس اس فكرته بسيطه جدا وهي عباره عن ان انت بتحرك عنصر معين من النقطه a للنقطه b في زمن معين وعلشان نفهم الكلام ده هناخد دلوقتي مثال مع بعض هنعمل هنا ديف هنسيبه فاضي بالشكل ده وهنروح عندنا في السي اس اس الاول انا هخلي الباك جراوند هديله خلفيه مثلا بلون غامق شويه متح ان انت تعمل كده او ما تعملش براحتك وهنروح عندنا على الديف هديله دلوقتي طول وعرض وليكن طول 100 بكسل وعرض برضو 100 بكسل وهدي لله مثلا باك جراوند باللون الاحمر بشكل مبدئي طيب انا دلوقتي محتاج ان انا احرك الف ده محتاج ان انا اعمل له انيميشن علشان تعمل انيميشن ليه اي عنصر بتنزل عندك هنا وبتكتب عندك اد وبتستخدم عندك الكي فريمز بص يا معلم الموضوع مش صعب انت علشان تحرك العنصر ده من النقطه a للنقطه b فانت بتمر بعده فريمات زي الفيديو الفيديو علشان يتحرك فهو بيمر عندك بكذا فريم فانت علشان تحرك اي عنصر فانت بتخليه يمر بكذا فريم هنشرح الكلام ده دلوقتي مع بعض طيب انا دلوقتي بقول لك ان الكي فريمز بتحرك اي اي عنصر ممكن ان هي تحرك الديف ممكن ان هي تحرك عندك مثلا براجراف اتش 1 ايا يكن طيب علشان اقول للكي فريمز دي ان انت هتحرك الدف ده تحديدا علشان تفهم ان هي تشتغل على الف ده فانا محتاج ان انا اسمي الديف ده اسم معين وادي الاسم ده للكي فريم وعلشان اعمل كده بجيل لك هنا وبقول لك انا محتاج ان انا استخدم الانيميشن نيم ممكن الاسم ده يكون اي حاجه في الدنيا ممكن يكون حمات ده براحتك يعني ممكن يكون اكس ممكن يكون اي حاجه في الدنيا انا هسميه مثلا سكوير والاسم اللي انت هتكتبه هنا اكتب الاسم اللي انت عاوزه الاسم اللي انت هتكتبه هنا هو اللي انت هتكتبه عندك هنا في المكان ده تمام لو انت كتبت عندك هنا اكس يبقى هتكتب عندك هنا اكس لو كتبت عندك هنا سكوير يبقى هتكتب عندك هنا سكوير بالشكل ده فالكي فريمز عرفت ان انت هتشتغل عندك على العنصر ده يعني انت محتاج ان انت تحرك الديف ده طيب انا بقول لك ان انت انت بتحرك العنصر ده من النقطه a للنقطه b يعني انا هقول لك ان انت هتحرك العنصر ده فروم النقطه دي ليه يعني تو النقطه دي بس كده دي نقطه البدايه ودي نقطه النهايه هنا انت بتحط التنسيق اللي انت عاوز الانيميشن يبدا بيه وهنا انت بتحط التنسيق اللي انت عاوز الانيميشن ينتهي بيه طيب انا ممكن مثلا اقول لك ان انا عاوز اعمل انيميشن بيبتدي باللون الاحمر كخلفيه طبعا وينتهي باللون الازرق فهو ققول لك ان انا عاوزه يبتدي باللون الاحمر كخلفيه وينتهي عندك باللون الازرق الموضوع بسيط جدا ولكن انت علشان تحرك اي عنصر من نقطه معينه لنقطه ثانيه فانت محتاج لزمن الزمن اللي من خلاله بتتم الحركه دي والزمن ده انا بعمله من خلال الانيميشن ديوريشن بتكتب هنا الزمن اللي انت عاوزه ممكن ان انا مثلا اكتب لك خمس ثواني فهو هينتقم عندك من اللون الاحمر للون الازرق في خمس ثواني ممكن ان انت تكتب عندك ثانيتين تكتب انت الوقت اللي انت عاوزه في الوقت ده هو هينتقم من النقطه دي للنقطه دي ممكن هنا ان انت تحط التنسيق اللي انت عاوزه ممكن مثلا ان انا اكتب لك ويتس ان هو هيبدا بعرض يعني انا دلوقتي محتاج ان الديف ده يبدا من عرض صفر وينتهي عند عرض 100% فهقولك ان الويتس هينتهي عند عرض 100% فهيكون عندك بالشكل ده الحركه دي تمت عندك في ثانيتين ممكن ان انت تخليها تتم عندك في اربع ثواني فهو ستغرق عندك اربع ثواني علشان ينتقل من النقطه دي للنقطه دي انت ممكن ان انت تبدل عندك روم وتو لمثلات في وهي هي دي النقطه صفر يعني الستارت ودي النقطه 100 يعني الاند دي النهايه وبالمنطق انا طالما عندي صفر في 100 و 100% فانا ممكن مثلا احط في النص 50% احط في النص 25 20 15 اللي انا عاوزه فانا ممكن احط اكت من فريم يعني مثلا انا ممكن اقول لك ان في النقطه صفر يعني البدايه هتكون عندك بالتنسيق ده ومثلا هاجي لك هنا واحط لك 50% واقول لك اول ما توصل لل 50% مثلا يكون الباك جراوند باللون الاخضر فاول ما هيوصل لل 50% هيكون باللون الاخضر وبعد كده هينتهي باللون الازرق طبعا هو بيبدا باللون الاحمر تمام بالشكل ده وبعد كده بينتقل للون الاخضر وبعد كده بينتهي باللون الازرق ممكن ان انت تحط اكتر من فريم طيب نرجع تاني علشان بس الموضوع يكون بسيط شويه دلوقتي انا لما بعمل ريلود بلاقيه ان هو بيبدا بسرعه وعلشان هو بيبدا بسرعه فتحس كده ان هو بياكل حته من الانيميشن فبص هتلاقي كده تحس ان هو بيبدا من هنا فالكلام ده انا مش عاوزه انا عاوز ان انا اقول له لا انا مش عاوز ان انت ت دا بمجرد ما انا اعمل ريلود انا عاوز ان الانيميشن يبدا مثلا بعد ثانيتين من اني مثلا اعمل ريلود فعلشان اعمل التاخير ده ف بكتب عندك هنا انيميشن ديلاي محتاج دلوقتي ان انا اعمل تاخير علشان الانيميشن يظهر بشكل كامل فانا مثلا هقول لك ان انا عاوز اعمل تاخير مثلا ثانيتين تمام او الوقت اللي انت عاوزه طبعا فاول ما هتعمل عندك ريلود ادي ثانيه الثانيه بعد كده يبدا ان هو يشتغل تاني ثانيه الثانيه وبعد كده هيبدا ان هو يشتغل ممكن ان انت تحط اللي انت عاوزه او الوقت اللي انت عاوزه ده الوقت اللي بيحصل فيه تاخير قبل ما الانميشن يبدا ان هو يشتغل طيب علشان نشرح بقيه الخصائص اللي موجوده عندنا في الانيميشن هنكمل المثال ده ولكن من خلال الشكل اللي قدامنا ده يعني انا دلوقتي محتاج ان انا يكون عندي اكتر من فريم خلي بالك الشكل اللي قدامك ده بينتقل من نقطه معينه لنقطه ثانيه يعني عندك اثنين فريم ولكن الشكل الثاني ده فيه اكتر من فريم انا الشكل عندي ده بيبدا من النقطه دي وبعد كده بيروح عندك للنقطه دي وبعد كده بيروح عندك للنقطه الثالثه دي وبعد كده بيروح عندك للنقطه الرابعه دي وفي النهايه بيوصل عندك هنا يعني خمسه فريم خمس نقط يعني خمسه فريم تعالى دلوقتي لما نجرب الموضوع ده مع بعض انا هقول لك بص بالراحه وبهدوء الموضوع بسيط جدا انا دلوقتي محتاج ان انا في النقطه صفر محتاج مثلا ان انا احرك العنصر ده ممكن ان انت تحركه بالشكل اللي انت عاوزه فانا هقول لك ان انا هركه من خلال الترانسليت الترانسليت بتقبل منك اكس وواي يعني بتقبل منك القيمه اكس والقيمه واي انا عاوز ان هو في البدايه يكون عندك في الاكس في المكان صفر وفي الواي في المكان صفر يعني يفضل عندك ثابت في المكان ده دي نقطه البدايه طيب تعال كده لما نكتب عندنا هنا 255% النقطه اللي بعدها انا محتاج ان انا انزله انزله يعني هتحكم عندك في المحور واي المحور واي يعني انا مش محتاج ان انا اجي جنب المحور اكس يعني المحور اكس هيكون عندك صفر ولكن المحور واي مثلا انا هنزله بمقدار مثلا مثلا 500 بيكسل ايا يكن يعني تمام اكتب انت الرقم اللي انت عاوز ان انت تنزل العنصر ده من خلاله طيب وبعد كده وبعد كده في النقطه 50 تعال دلوقتي في الفريم 50 50% محتاج ان انا انقله من المكان ده للمكان ده يعني محتاج ان انا امشي على محور الاكس فهقولك بص انا محتاج ان المحور واي يفضل زي ما هو اللي هو 500 بيكسل انا محتاج ان هو يمشي على نفس الخط فانا هحرك بس من المحور ا اكس مثلا بمقدار 400 بيكسل ايا يكن تمام فهينم عندك هنا عند ال 25 وبعد كده روح عندك هنا على ال 50 ويرجع تاني في مكانه تعالى كده بقى لما نكمل عندنا ال 75 75 ده الفريم الرابع هقول لك انا محتاج ان انا ارفعه ارفعه يعني هتحرك على المحور واي طيب هقوللك جيبها لي كده جيبلي الترانسليت ومثلا حركه لي على المحور واي يعني المحور ده محتاج ان انا ارجعه تاني لفوق يعني ارفعه عند النقطه صفر زي ما كان بادئ عندك هنا في المكان ده ولكن على المحور واي فقط تمام واخيرا ال 100% هرجعه تاني عند النقطه صفر في الاكس وفي الواي وطبعا بكتب لك هنا 100% و لو عملتلك ريلود هتلاقيه دلوقتي ان هو بيعمل ديلاي وبعد كده بينزل هنا عند الخ 25 وهنا عند ال 50 وهنا 75 ويرجع تاني هنا عند ال 100 ممكن في الفريمات اللي قدامك دي ان انت تحط اللي انت عاوزه ممكن ان انت مثلا تغير الخلفيه تبدا عندك مثلا بباك جراوند مثلا باللون الاكوا مثلا ايا يكن اللون ده وممكن ان انت تحط في الفريم الثاني مثلا لون تاني وليكن اللون الاصفر تمام وفي الفريم الثالث ممكن ان انت تحط مثلا اللون الاخضر وفي الفريم الرابع مثلا ممكن ان انت ت حط اللون الازرق وفي الفريم الاخير مثلا ممكن ان انت تحط اي لون انت عاوزه وليكن مثلا اللون الدارك جراي فدلوقتي ممكن نشوفه دلوقتي مع بعض فهتلاقي دلوقتي ان هو بيتحرك وكمان بيغير الالوان بتاعته طيب انت برض ممكن ان انت تعمل اللي انت عاوزه فممكن مثلا ان انا ادوره اخليه دلوقتي ان هو يلف ودي انا بعملها من خلال الروتيت طبعا الروتيت انت لو اديت لها مثلا قمه مثلا وليكن صفر فده معناها ان الروتيت ما بيدش بيفضل ثابت زي ما هو طيب دي النقطه صفر فانا هقول لك مثلا في النقطه 25 انتقلي من الروتيت صفر ل الروتيت 90 درجه يعني 90 ديجري فهو كده هيدور عندك لحد 90 درجه واقول لك في النقطه مثلا 50 دور مثلا او لف مثلا بمقدار وليكن 180 درجه وفي النقطه 75 هقول لك دور مثلا لحد 270 درجه انا عاوز ان هو يلف لفه كامله واخيرا مثلا هخليه ان هو يدور لحد مثلا 360 درجه وبكده هو هيلف عندك لفه كامله تعال دلوقتي لما نشوف مع بعض بص بيلف عندك لفه كامله طبعا انت حط التنسيقات اللي انت عاوزها انا بس بديلك فكره مش اكترر تعال بقى دلوقتي لما نكمل عندنا بقيه خصائص الانيميشن دلوقتي اول خاصيه هناخدها دلوقتي هو ان انا لما بعمل الحركه دي فهي بتتحرك مره واحده وبتقف انا مثلا عاوز ان انا احركها مرتين او ثلاثه او الى ما لا نهايه علشان اعمل عندك الحركه دي فبستن عندك الانيميشن اتشن كاونت لو كتبت عندك واحد يبقى هي هتتحرك مره واحده لو كتبت عندك اثنين تعال دلوقتي لما نشوف مع بعض هنستنا دلوقتي ادي كده هيتحرك عندك مره تمام وهيت حرك عندك مره تانيه وبعد كده هيقف اول ما هيوصل عندك هنا هيقف هيقف لان انا قلت له ان انت هتتحرك مرتين بس ممكن كمان ان انا اقول له ان انت هتتحرك بشكل انفينت يعني الى ما لا نهايه فدلوقتي انا علشان اوضحها لك اكتر تعال كده لما نقلل عندنا التاخير مثلا نخليه نص ثانيه وال ديوريشن هنخليها مثلا ثانيتين بحيث ان هو يدور بسرعه علشان بس اعرفك ان انا خليته يلف بشكل ل انفينت او الى ما لا نهايه طيب هو دلوقتي بيلف عندك بالشكل ده انا ممكن ان انا اعكس اللفه دي فممكن مثلا ان انا اجيلك هنا واقول لك مثلا انا محتاج ان الانيميشن دايركشن الاتجاه بتاعه طبعا هي بتقبل عندك القيمه الديفولت اللي هي نورمال يعني انت بتمشي بشكل طبيعي من اول فريم لاخر فريم زي ما انا قلت لك انا بقى ممكن ان انا اعكس حاجه زي كده واخليها عندك ريفيرس يعني بدل ما هتنزل عندك هنا لا هتشتغل عند عندك العكس ودي بالظبط بدات من اخر فريم لاول فريم كمان برض الدايركشن بتقبل عندك حاجه اسمها الترنت الالترنيتور معينه وترد تاني بص هتوصل وترد تاني هتيجي عندك هنا وترد تاني بص عماله بترد تاني بالشكل ده ما بتكملش لفه كامله عماله بترد تاني دي الالترنيتور اول ما بتبدا بتبدا معاك صح بتبدا في الاتجاه الصحيح اللي انت عامل من الفريمات بتاعتك انا ممكن ان انا اعمل الترنت ولكن تبدا بالريس الترنت ريفيرس بالشكل ده تعال كده لما نبص الترنت ريفيس فدي معناها ان هي بترد كل حاجه ولكن اول ما هتبدا هتبدا عندك بالعكس في الاتجاه العكس او بتبدا عندك من ال 100% لحد الصفر تمام العكس زي ما قلتلك طيب هنرجع عندنا هنا نورمال بالشكل ده نورمال طيب هنتكلم عن الانيميشن تايمين فانكشن لو انت ملاحظ تعال كده لما نزود الوقت شويه علشان تفهم لو انت ملاحظ هتلاقي ان هو بيبدا عندك بسرعه ويجي عند الركن ويبقى الحركه بطيئه يبدا عندك بسرعه ويجي عند الركن تبقى الحركه بطيئه انا ممكن ان انا اتحكم في حاجه زي كده من خلال الانميشن تايمين فانكشن ودي انا بعملها تعال كده حتى لما نعملها عندنا في المكان ده دي انا بعملها من خلال الانميشن تايمين فانكشن الانميشن بتاخد عندك اي ايز هي القيمه الافتراضيه اصلا للتامين فانكشن ودي معناها ان السرعه بتبدا بسرعه عندك بالشكل ده وتنتهي لسرعه ابطا تمام زي ما شفنا عندك هنا طيب لو انا مش عاوز كده وعاوز ان السرعه تكون ثابته فبكت عندك لينير لينير معناها ان السرعه ثابته مش هتيجي عندك عند الركن والسرعه تكون ابطل طيب هنتكلم دلوقتي على الانيميشن في المود هنيجي عندنا هنا وهنعمل عندنا انيميشن فيل المود طيب الانيميشن في المود بتتحكم عندك في ان التنسيق بتاعك قبل الانيميشن شكله هيكون عامل ازاي وبعد الانيميشن شكله هيكون عامل ازاي تعال دلوقتي لما نخلي الانيميشن ده بدل ما يتحرك بشكل انفينت نخليه مثلا ان هو يتحرك مره واحده طيب قبل ما الانيميشن يبدا بيكون شكله بالتنسيق اللي قدامك ده بيكون الباك جراوند عندك باللون الاحمر قبل ما الانيميشن يبدا برغم ان انا قلت لك ان اول الفريم هيكون الباك جراوند عندك باللون الاكوا ولكن ده اول ما الانيميشن يشتغل قبل ما الانيميشن يشتغل بيكون عندك ب التنسيق الاصلي اللي هو الطول اللي انا حطيته والعرض والباك جراوند وكل التنسيقات اللي انت بتحطها بشكل افتراضي عندك هنا ل العنصر ده الكلام ده بيحصل بشكل افتراضي قبل ما الانيميشن يشتغل وبعد ما الانيميشن يبدا ان هو يخلص بيرجع تاني برده للوضع الاصلي بتاعك زي ما موجود عندك هنا برغم ان اخ اخر فريم كان ايه بقى كان الباك جراوند عندك دارك جراي ده المفروض ان هو اخر فريم ولكن هي بترجع لوضعها الاصلي ده الشكل الافتراضي للفيل مود اللي هي القيمه اللي بتكون نان النان دي هي بتعمل لك كل الكلام اللي انا قلته لك من شويه لو انا مش عاوز كده لو انا مثلا عاوز ان هو اول ما الانيميشن يخلص يثبت عندك عند اخر فريم زي ما انا كاتب لك التنسيقات اللي انا كاتبها لك هنا علشان اعمل حاجه زي كده ف ببدل عندك ال نان بالفور ووردز الفور وردز بتقوللك بص انت هتتحرك ولكن اول ما هتثبت مش هتثبت على وضعك الاصلي هتثبت على اخر فريم التنسيقات اللي هتكون في اخر فريم سواء بقى طول عرض باك جراوند ايا يكن هي اللي هتثبت وبدليل ان الباك جراوند الدارك جراي هو اللي ثبت عندك في الاخر تمام الكلام ده بعد الانيميشن طبعا قبل الانيميشن ما يشتغل تعال كده حتى لما نعمل عندنا تاخير علشان نشوف هنخلي مثلا التاخير يكون ثلاث ثواني قبل ما الانيميشن بيشتغل بيكون الوضع الاصلي هو اللي موجود لو انا بقى عاوز قبل ما الانيميشن يشتغل يكون الوضع الاصلي هو اول فريم فببد ل عندك الفور ووردز بالباك ووردز فلو انا عملت لك هنا ريلود قبل ما الانيميشن يشتغل بيكون اول فريم هو التاثير او التنسيق بتاعه هو اللي بيكون موجود تعالى كده لما نشوف مع بعض هنعمل هنا ريلود قبل ما الانيميشن يشتغل بيكون هو ده الوضع الاصلي التنسيقات اللي انت كتبتها دي هي اللي بتشتغل كشكل افتراضي للعنصر بتاعك وطبعا لما بينتهي بيرجع تاني لوضعه الاصلي لان دي هي الباك ووردز بس طب لو انت عاوز ان انت تشغل الباك ووردز والفور ووردز مع بعض يعني عاوز ان هو يبدا عندك قبل الانيميشن باول فريم وينتهي عندك بعد ما يخلص الانيميشن باخر فريم فانت بتكتب عندك هنا بوس بالشكل اللي قدامك ده فهو هيبدا عندك بالتنسيقات اللي موجوده في اول فريم وهين انتهي عندك بالتنسيقات اللي موجوده في اخر فريم هينتهي عندك بالتنسيقات اللي موجو عندك هنا مش الوضع الاصلي والكلام ده انت بتعمله من خلال الانيميشن في المود طيب كمان برضو انا او اخيرا يعني ان شاء الله هنتكلم على الانيميشن بلاي ستيت طيب هي بتاخد منك قيمتين يا اما رانينج يعني ان انت بتشغل عندك الانيميشن يا اما ان انت بتقول له لا انا مش عاوز ان انا اشغله فانا هعمل له هنا بوزد بوزد يعني وقف لي الانيميشن طيب واحد دلوقتي هيقول لك هل يعني في حد مجنون مثلا هيعمل انيميشن ويجي هنا يوقفه طب ما انا ماعملوش اصلا هقول لك لا الموضوع ده ليه فايده مهمه جدا وهي ان انا مثلا عاوز اقول لك انا عاوز الانيميشن يفضل شغال ولكن مثلا لو المستخدم واقف على الماوس او واقف بالماوس على العنصر ده عمل هوفر مثلا عليه عاوز دلوقتي ان الانيميشن ده يقف تمام تعال دلوقتي حتى لما نعمل الموضوع ده علشان نفهم دلوقتي مع بعض انا هقوللك شايف الديف ده اول ما تعمل هوفر عليه محتاج ان انت تعمل لي حاجه اسمها انيميشن بلاي ستيت ومحتاج ان انت توقفه تعمل لله بوزد الكلام ده بيحصل امتى اول ما بعمل هوفر على العنصر تعال دلوقتي لما نشوف مع بعض اول ما هعمل هوفر على العنصر بص العنصر ايه بيقف اول ما بعمل هوفر بيقف عندك هنا تاني كده تعال دلوقتي لما نشوف اول ما يشتغل بص او اول ما بقف بالماوس عليه تعال كده اقف اول ما بقف بالماوس عليه بيبدا ان هو يعمل له بوز يعني بيقف الانيميشن بيقف والحركه دي مهمه جدا ممكن ان انت تعملها لو انت احتاجت لفكره زي كده كمان برض انا ممكن ان انا اتحكم في شكل الماوس وهو بيقف على العنصر ده فالكسر بتتحكم لك في شكل الماوس عندك طبعا اشكال كتيره جدا ممكن ان انت تختارها انا هختار مثلا شكل الايد وهو البوينتر محتاج ان الماوس يكون بشكل البوينتر او شكل الايد اول ما يقف على العنصر بالشكل اللي قدامك ده فبقت عندك بالمنظر ده تمام طيب تعالى دلوقتي بقى لما نشير الكلام ده كله ونتكلم على الشورت هاند الاختصار انا دلوقتي محتاج ان انا اختصر كل الخصائص دي في خاصيه واحده بس او في سطر واحد بس والكلام ده انت بتعمله تعال كده لما نلغي كل الكلام ده ونعمله من خلال الانيميشن فقط لا غير الانيميشن دي من خلالها انت ممكن ان انت حط كل القيم دي على نفس السطر وطبعا كمان برض قيمه البلاي ستيت هنشوف برض الكلام ده دلوقتي مع بعض فانت بتكتب عندك اول قيمه عندك هنا هي قيمه انيميشن نيم فكتب لك هنا السكوير او طبعا الاسم اللي انت عاوز ان انت تكتبه عندك هنا وبعد كده انت بتكتب عندك قيمه ال انيميشن ديوريشن اللي هي القيمه الثانيه اللي عندك هنا او الزمن اللي بتتحرك فيه او بيتحرك فيه العنصر بتاعك وبعد كده بتكتب عندك الانيميشن تايمين فانكشن فهكذا بتكتب عندك الانيميشن ديلاي فهقولك مثلا انا عاوزها ان هي تكون لات ثواني وبعد كده بتكتب عندك الانيميشن اتشن كونت فانا هقوللك عدد اللفات مثلا انا عاوز ان هي تكون لفه واحده او اكتب مثلا انفينت او اللي انت عاوزه وبعد كده هكتبلك هنا في الدايركشن او الانميشن دايركشن على كده حتى لما نفتح عندنا الشاشه بالكامل كتبلك هنا في الانيميشن دايركشن نورمال الدايركشن هو الاتجاه الاتجاه اللي انت ممكن تكتب فيه ريفيرس او نورمال او اللي انت عاوزه وبعد كده بتكتب عندك قيمه الانيميشن في المود فانا مثلا هكتب لك هنا بوس وب كده اخيرا يعني طبعا بتكتب الانيميشن بلاي ستيت فانا هكتب لك هنا رانينج يعني شغل الانيميشن تعال دلوقتي لما نشوف مع بعض هنلاقي دلوقتي ان احنا بسطر واحد بس بسطر واحد بس قدرنا ان احنا نشغل عندنا الانيميشن طبعا انا عامل كومنت لكل دول ممكن ان انا امسحهم عادي جدا وبطر واحد بس قدرت ان انا اشغل الانيميشن بتاعي انا من بدايه الدوره وانا بحاول ان انا اركز على ان انت تفهم الفرق ما بين العنصر البلوك والعنصر الان لاين دي واحده من اكتر الحاجات اللي انا حاولت ان انا اركز عليها النهارده الموضوع ده هيتج وهنفض الفكره كلها لان النهارده ان شاء ان شاء الله هنشرح خاصيه الديسبلاي بلوك والديس بلاي ان لاين وكمان هندرس الديسبلاي ان لاين بلوك فباختيارك النهارده مش بس هنعرف ايه هو العنصر البلوك والان لاين في الاتش تي ام ال احنا كمان هنقدر ان احنا نحول ما بينهم يعني لو انت عندك عنصر بلوك هتقدر ان انت تخليه عنصر ان لاين والعكس تمام طيب دلوقتي انا مثلا عندي هنا عنصر تعال كده نتكلم بالراحه وبهدوء شديد انا عندي هنا عنصر والعنصر ده طبعا احنا عارفين انبي هو عنصر بلوك ولكن افترض ان انا معارفش انا دلوقتي عندي عنصر ومش عارف العنصر ده بلوك ولا ان لاين ازاي اعرف علشان تعرف عندك لات حاجات تعال كده عندك لات حاجات هتقدر ان انت تفرق ما بين العنصر البلوك والعنصر الان لاين من خلالهم اول حاجه هي الفولت تس او العرض الافتراضي اللي بياخد العنصر بتاعك تاني حاجه هل الع صر ده بيعمل نيو لاين ولا لا التت حاجه هل العنصر ده تقدر ان انت تديله تس وهات ولا لا طيب تعال دلوقتي نشوف الكلام ده مع بعض العنصر البلوك الفولت ت بتاعه بيكون عندك 100% اوف بيرنت تس يعني بياخد عندك 100% من عرض الاب بتاعه وما تقوليش ان هو بياخد عندك 100% من عرض البراوزر لا هو بياخد عندك 100% من عرض الاب بتاعه وهنشوف الكلام ده دلوقتي مع بعض اما العنصر الان لاين فهو العرض بتاعه بيكون فيت كونتنت يعني ايه الكلام ده تعال دلوقتي لما نشوف الكلام ده مع بعض هنعمل دلوقتي عندنا عنصر بلوك وهنعمل عنصر ان لاين ونشوف الكلام ده دلوقتي مع بعض هنعمل عندنا عنصر بلوك وهو البي وهنكتب دلوقتي جواه هنا اي كلمه ايا يكن انا دلوقتي هفترض ان انا معارفش العنصر ده هو بلوك ولا ان لاين هنكرر بس عندنا كده لاث م وهنعمل عندنا عنصر ان لاين وليكن الابان اعمل انت سبان او ايه او اللي انت عاوزه هنعمل عندنا سبان وهنكتب فيه نفس الكلمه بالظبط وهنعمل عندنا لات جمل منهم طيب تعال دلوقتي نطبق عندنا نفس الكلام اللي احنا قلناه من شويه اول حاجه انا علشان اشوف بس العنصر بتاعي بالكامل هبدا ان انا ادي باك جراوند للسبان ولبي الاثنين هدي لهم باك جراوند بنفس اللون وتعال دلوقتي نختبر عندنا الديفولت ويتس انا قلت لك ان العنصر البلوك بياخد عندك 100% من عرض الاب بتاعه طيب مين عندك هنا اللي خد عندك 100% من عرض الاب طبعا عرض الاب ايا يكن عرض الاب ده سواء عرض الاب كان عندك كبير هو ياخد عندك 100% كان عندك صغير هياخد عندك 100% فهو كده كده بياخد عندك 100% من عرض الاب فاللي خد عندك 100% هو العنصر ده وده وده اللي هو ايه اللي هو البرجراف الاول الاول والثاني والثالث اذا البراجراف خد عندك 100% من عرض الاب طيب والسبان السبان كان عندك فيت كونتنت يعني على قد المحتوى اللي جوه يعني لو المحتوى اللي جوه عندك كبير فالعرض بتاعك هيكبر بالشكل اللي قدامك ده العرض بتاعك بيكبر لو المحتوى اللي جوه كبير طيب لو المحتوى اللي جوه عندك كان صغير فالعرض بتاعك هيكون صغير العرض بيكون على حسب المحتوى اللي جوه طيب الكلام ده بينطبق على كل العناصر الان لاين فباختيارك العناصر البلوك ايا كانت بتاخد عندك 100% من عرض الاب بتاعها اما العناصر الان لاين فهي بتكون عندك العرض الافتراضي بتاعها بيكون عندك فيت كونتنت طيب تعال دلوقتي ندخل عندنا في تاني حاجه دلوقتي هل العنصر ده بيعمل نيو لاين ولا لا فباختيارك العنصر البلوك بيعمل عندك نيو لاين وهشرح لك الموضوع ده دلوقتي اما العنصر الان لاين فهو ما بيعملش عندك نيو لاين طيب يعني ايه نيو لاين دلوقتي العنصر البي خد عندك السطر كامل لوحده وبعد كده وبعد كده بقيه العناصر اللي بعده نزلت عندك في نيو لاين في سطر جديد معنى الكلام ده ان العنصر بتاعك ده عمل عندك حاجه اسمها بريك لاين نزل كل العناصر اللي بعده على سطر جديد هتقول لي لا هو نزل عندك كل العناصر اللي اللي بعده على سطر جديد لان هو خد عندك 100% من عرض الاب يعني باختصار شديد هو دلوقتي خد عندك 100% فبما ان هو خد عندك عرض 100% فبالتالي ومنطقيا كل العناصر اللي بعده هتيجي عندك على سطر جديد هقول لك لا مش عشان كده بدليل ان انا لو جيت لك هنا على البي واديت له عرض اقل من ال 100% وليكن مثلا 20% فهو هنا هيكون عندك العرض بتاعه 20% ومع ذلك عمل عندك لاين يعني مع ذلك كل العناصر اللي بعد البي نزلت عندك في سطر جديد يبقى دلوقتي باختصار شديد العنصر البلوك بيعمل عندك بريك لاين بينزل العناصر اللي بعده على سطر جديد وطبعا مش محتاج اقوللك ان العناصر الان لاين ما بتعملش كده فعناصر الان لاين كلها بتكون على سطر واحد بالشكل ده او بتكون عندك ان لاين من اسمها طيب تعال دلوقتي ندخل عندنا في تالت حاجه وهي هل انت تقدر ان انت تدي عندك ويتس وطول للعنصر البلوك ولا لا ف ببساطه العنصر البلوك ريسبكت يعني بيحترم الطول والعرض تقدر ان انت تديله عندك طول وعرض عادي جدا اما العنصر الان لاين فهو باختصار شديد بيكون نو ريسبكت ما بيحترم الطول والعرض طيب تعال دلوقتي نشوف الكلام ده مع بعض دلوقتي انا قلتلك ان العنصر البلوك سبيكت الطول والعرض تقدر ان انت تديله عندك عرض وتقدر ان انت تديله عندك طول تمام تعال كده لما نجيب دي عندنا هنا طيب تعال نجرب الموضوع ده انا عندي هنا عنصر بلوك اقدر دلوقتي ان انا اقدي له العرض اللي انا عاوزه وليكن 200 بيكسل عادي جدا تقدر ان انت تديله عندك عرض 200 100 اللي انت عاوزه كمان برض تقدر ان انت تديله عندك طول ممكن اقول لك الطول هيكون 100 بيكسل تمام 100 بيكسل بقى 200 بيكسل اللي انت عاوزه فهتي له طول هتدي له عرض هيشتغل معاك بدون اي مشاكل ولكن لو انت اديت عندك الطول والعرض لعنصر ان لاين فهو مش هيشتغل فدلوقتي انا لو جيت لك هنا وقلت لك ان الطول والعرض دول انا هديهم للسبان فباختيارك هو مش هيشتغل لان ببساطه السبان العنصر الان لاين مش بيسبك الطول والعرض يعني انت ما تقدرش ان انت تدي له عندك طول والعرض فلو قلت لك ان الطول مثلا هيكون 400 برده مش هيشتغل الويس مثلا هيكون عند عندك اي حاجه في العالم 200 300 400 مش هيشتغل فال السبان ببساطه مش بت ريسبكت الطول ولا العرض كمان في عندك خاصيه تانيه وهي المارجن فدلوقتي انا مثلا عندي هنا البي البي دلوقتي اقدر ان انا اديله عندك هنا مارجن براحتك وليكن مثلا مارجين 20 بيكسل فهي شغل عندك بدون اي مشاكل لو انا جيت لك هنا كليك يمين على انسبكت وفتحت لك دلوقتي الصفحه بتاعتك ونزلنا عندنا هنا تعال دلوقتي كده لما نكبر ونزلنا عندنا هنا على المارجن هتلاقيه دلوقتي ان هو خد عندك مارجن 20 بيكسل من كل الاتجاهات تمام من كل الاتجاهات طيب العنصر الان لاين بياخد عندك مارجن ولكن مش من كل الاتجاهات طيب يعني ايه الكلام ده يعني انا دلوقتي لو اديت المارجن ده للسبان فباختيارك هو هسبك المارجن في اتجاهات معينه اللي هي الفت والرات تعال دلوقتي لما نشوف الكلام ده مع بعض لو انا دلوقتي وقفت لك هنا على الاسبان ووقفت هنا على المارجن هتلاقي دلوقتي ان المارجن عندك فين في الشمال واليمين فقط تمام في الشمال واليمين فقط مش من فوق ولا من تحت ولو كبرت عندك 100 سنه بص من اليمين ومن الشمال فقط لا غير تمام وده ببساطه لان ده عنصر ان لاين طيب تعال دلوقتي بقى لما ندخل في اهم حاجه في الدرس بتاعنا دلوقتي انا عندي هنا تعال كده لما نميزه انا دلوقتي عندي هنا البراجراف هدي له هنا باك جراوند بلون مختلف تمام علشان بس نقدر ان احنا نميزه والسبان هديلها لون مختلف اللي هو اللون الاحمر علشان تقدر بس ان انت تفرق ما بين البي وما بين الابان طيب انا دلوقتي عارف ان البي هو عنصر بلوك والسبان هو عنصر ان لاين هل دلوقتي انا اقدر ان انا احول ما بينهم يعني هل دلوقتي انا اقدر ان انا اخلي البي هو عنصر ان لاين والاسبان يكون عنصر بلوك هقوللك ايوه تقدر ان انت تعمل كده ده من خلال خاصيه الديسبلاي لو انت كتبت عندك بلوك فالعنصر ده هيكون عندك بلوك وطبعا البي هو عنصر بلوك اصلا بشكل افتراضي فدلوقتي انا عاوز ان انا احوله لعنصر ان لاين فهيك تب لك هنا ان لاين ف باختصار شديد البي اصبح عندك عنصر ان لاين فبالتالي ما تقدرش ان انت تديله عندك ولا ويتس لو قلت لك دلوقتي الويتس 200 بيكسل مش هيشتغل لو قلت لك دلوقتي الهايت هيكون اي حاجه في الدنيا وليكن 400 بيكسل فبرضه مش هيشتغل لان ببساطه البي اصبح عندك دلوقتي هو عنصر ان لاين وبما ان هو كمان ان لاين فاصبح عندك دلوقتي على نفس السطر طيب دلوقتي انا عاوز ان انا اخلي السبان يكون عنصر بلوك فهتك تب عندك هنا ديسبلاي بلوك بالشكل ده فدلوقتي هو اصبح عندك عنصر بلوك تقدر ان انت تيجي عندك هنا وتكتب عندك الطول اللي انت عاوزه وليكن طول 100 بيكسل هيشتغل تقدر ان انت تكتب عندك العرض اللي انت عاوزه وليكن عرض 200 بيكسل هيشتغل ما فيش اي مشاكل كمان حتى عندك المارجن تقدر ان انت تكتب عندك مارجن في كل الاتجاهات سواء فوق تحت يمين شمال اللي انت عاوزه طيب انا دلوقتي حليت عندي مشكله قدرت دلوقتي ان انا اجيب عندي العنصر البلوك على سطر واحد ودي انا ممكن ان انا احتاجها في حاجات كتيره جدا ولكن ظهرت عندي مشكله ان انا مش قادر ان انا اتحكم في العنصر بتاعي يعني بعيدا دلوقتي على السبان انا دلوقتي ل عندي هنا العنصر البلوك ده قدرت ان انا اجيبه على نفس السطر ودي حاجه انا كتير بكون محتاجها طيب انا كمان برده بحتاج ان انا اتحكم في العنصر ده يعني انا مثلا لسبب ما حابب دلوقتي ان انا اخلي العرض بتاع العنصر ده يكون مثلا 200 بيكسل طيب بالطريقه دي انا مش هقدر لان لو انت اديت له عندك عرض او طول فهو مش هيشتغل طيب نعمل ايه قال لك في الحاله دي انت بتكتب عندك هنا بدل كلمه ان لاين ف بتكتب عندك ان لاين بلوك طبعا كلمه ان لاين طيب الان لاين بلوك ببساطه بتجيب لك العناصر بتاعتك ان لاين على نفس السطر فهي خلت لك العناصر البي اللي هي البرجرافات اللي قدامك دي تيجي عندك على نفس السطر ولكن مع مميزات العناصر البلوك يعني تقدر ان انت تديلها عندك طول وعرض ومارين واللي انت عاوزه فدلوقتي انا لو جيت لك هنا واديت لك مثلا عرض وليكن 200 بكسل فهي اشتغل تعال كده لما نشوف هيشتغل دلوقتي وهم ان لاين هم دلوقتي عناصر ان لاين ولكن تقدر دلوقتي ان انت تديلهم عندك طول وعرض واللي انت عاوزه تعال دلوقتي لما نجرب عندنا الطول الاول بس هنقل العرض شويه نخليه 100 تمام والطول هخليه مثلا وليكن 100 بكسل فهو برض هيشتغل ممكن برض ان انت تديله عندك مارجن من كل الاتجاهات فهو شغل معاك وم م والدنيا اتصلحت عندك وتقدر ان انت تشتغل زي ما انت عاوز من خلال الان لاين بلوك فالان لاين بلوك بتجيبهم لك او بتجيب لك العناصر بتاعتك ان لاين على نفس السطر ولكن مع مميزات البلوك فهي بتاخد الحلو من هنا على الحلو من هنا هنتكلم النهارده عن ثلاث طرق ممكنه تقدر من خلالهم ان انت تخفي اي عنصر من الصفحه بتاعتك وتعالوا دلوقتي لما نعمل مع بعض ديف وندي له كلا اسمه مثلا فيرست انت لما بتكتب عندك دوت وبعد كده اي حاجه انت بتكتبها فبيعمل لك دلوقتي ديف وطالما انت عملت دوت يعني بيعملك كلاس بالحاجه اللي انت كتبتها فلما تقوله دوت فيرست يعني يعملك ديف واخد كلاس اسمه فيرست طيب تعال دلوقتي لما نكتب عندنا هنا كلمه فيرست ونعمل عندنا ديف تاني هنسميه مثلا سكند ونكتب جواه كلمه سكند تمام طيب تعال دلوقتي لما ننادي عندنا على اول ديف اللي واخد عندك كلاس اسمه فرست وندي له دلوقتي مثلا باك جراوند باللون الاحمر وننادي على تاني ديف اللي واخد عندك كلاس اسمه سكند وندي لله دلوقتي باج جراوند باللون الازرق تمام طيب انت عاوز تقول ايه انا دلوقتي عاوز اتكلم على طريقه ان انت تخفي العنصر بتاعك ولكن فرق ما بين ثلاث حاجات او ثلاث مصطلحات فرق ما بين ان انا اقول لك عاوز ان انا اخف في اعمل هايد للعنصر او اني اقول لك ان انا عاوز اعمل ديليت للعنصر او اني عاوز ان انا اتحكم في الشفافيه بتاعه العنصر ده تمام في فرق ما بين ان انا اتحكم في الاخفاء او ان انا امسحه او ان انا اقلل الشفافيه بتاعته تعال الاول لما نتكلم على الاخفاء لو انا جيت لك هنا واستخدمت عندك خاصيه اسمها فيزيبلي الخاصيه دي مسؤوله عن ظهور او اخفاء اي عنصر لو انا استخدمت عندي فيزيبل ده القيمه الديفولت اللي هي كده كده بتكون موجوده اللي معناها ان العنصر ده ظاهر عندك طب لو انا عاوز اخفيه فبستانك خاصيه اسمها هيدن هيدن معناها ان انت بتخفي العنصر بتاعك فالعنصر اللي باللون الاحمر اختفى ولكن مكانه لسه محجوز يعني العنصر اللي باللون الازرق ده ماطلعش فوقيه ماخدش المكان بتاعه المكان بتاعه لسه موجود ف الفيز ابيلتي هيدن بتخفي العنصر فقط ولكن مكانه بيفضل موجود بعكس حاجه تانيه اسمها ديسبلاي نان ديسبلاي نان بتحذف العنصر فلو انا مش مستخدمها تعال كده لو انا مش مستخدمها العنصر بيكون موجود لو انا استخدمتها العنصر بيتحذف ومكانه بيتاخد المكان بتاعه مش بيكون محجوز تمام فالديس بلاي نون معناها ان انت بتمسح العنصر خلي بالك ان انا لما كنت مستخدم الفيز ابيلتي هيدن كان العنصر بتاعك بيختفي ولكن مكانه اهو بيكون موجود فالملخص ان الزبيلي هيدن لو خدناها كده دي معناها ان انت بتخفي تعال كده لما نحطها حتى بين قوسين دي معناها ان انت بتخفي بتعمل هايد للعنصر بتاعك اما ديسبلاي نون دي معناها ببساطه ان انت بتمسح العنصر بتاعك تعال كده لما ناخدها ونحطها عندنا هنا علشان تكون ف فاهم وتشوفها وانت بتذاكر وما تتلخبطش طيب بالنسبه للشفافيه عندنا حاجه اسمها اوباسي دي بتتحكم في شفافيه اي عنصر لو انت اديت لها واحد ده معناها ان العنصر ده مش شفاف وظاهر عندك بالكامل لو انت عاوز ان العنصر ده يكون شفاف فقلل قيمه الواحد دي يعني خليها مثلا 0 من 8 07 من تمام لو عملت لك ريلود العنصر ده يعني الشفافيه بتاعته شويه لو انا عاوز ازودها اكتر ممكن ان انا اقول لك مثلا خ5 من فهت ازيد شويه تمام لو انا عاوزها مثلا تكون شفافه اكتر فمثلا هخليها 02 تمام بالمنظر ده ممكن ان انا اخليها تكون شفافه خالص بان انا مثلا اقول لك ان هي هتكون صفر تمام فلو عملت لك ريلود هتكون شفافه خالص وبكده الاوبا سيتي دي معناها ببساطه كده ان انت بتتحكم في شفافيه العنصر بتاعك وده الفرق ببساطه هنبدا النهارده ان شاء الله نتكلم على واحده من اهم واكتر الخصائص اللي انت مش هتقدر تستغنى عنها وهي الفيليكس بوكس الفيليكس بوكس ببساطه بتنظم لك او بتوزع لك العناصر بتاعتك في الصفحه بتاعتك طيب يعني ايه الكلام ده يعني دلوقتي انت لو عندك مجموعه من العناصر وعاوز تجيب مثلا عنصر على اليمين من فوق وعنصر تاني على الشمال عنصر من تحت عنصر من فوق وتوزع العناصر بتاعتك فواحده من اسهل الخصائص اللي هتعمل لك ده هي الفليكس بوكس تمام طيب انا عاوز برده افهم يا عبد الرحمن علشان انا مش فاهمك هقول لك بص يا معلم هتدخل على اللينك اللي قدامك ده ده واحد من اهم الحاجات اللي هتفهمك الفيليكس بوكس في الصفحه دي هتلاقي عندك كل حاجه كل حاجه حرفيا هتلاقي عندك هنا في الاول كده لعبه اللعبه دي ببساطه كده بتختبر مستواك في الفيلكس بوكس اللعبه دي ان شاء الله هنلعبها في نهايه الدرس بتاعنا النهارده النهارده لما نكون فهمنا الفليكس بوكس هنيجي هنا ونختبر المستوى بتاعنا عندنا هنا 25 مستوى في اللعبه دي وكمان تقدر تلعبها باللغه العربيه وتقدر ان انت تظبط فيها وتختبر فيها مستواك زي ما انت عاوز ولكن سيبنا من اللعبه دي لان اللعبه دي في نهايه الدرس بتاعنا انا عاوز افهم يعني ايه فليكس بوكس ببساطه الفليكس بوكس بتوزع لك العناصر بتاعتك في الصفحه بتاعتك وبتشتغل على الاباء والابناء طيب يعني الاباء ويعني الابناء ببساطه انت لما بتعمل عندك ديف في الصفحه بتاعتك لو انا عندي دلوقتي هنا ديف والدف ده مثلا جواه هنا مجموعه من البرجرافات دلوقتي ايه علاقه البرجرافات دول بالدف ده ببساطه البرجرافات دول بما انهم جوه الديف فهم ابناء للديف ده فالف هنا هو البيرنت اما البراجرافات دول هم الابناء بتوع الديف ده حلو الكلام حلو الكلام طيب دلوقتي في ال بوكس انت علشان توزع العناصر بتاعتك تقدر ان انت تشتغل عندك على الاباء وتقدر تشتغل عندك على الابناء طيب انا عارف ان انت مش فاهم فسيبك كده من كل الكلام ده وتعال نشتغل بشكل عملي دلوقتي انا هعمل لك هنا ديف وهدي له كلاس اسميه بيرنت ده الاب بتاعي وهعمل لك هنا مجموعه من الابناء هيكون مثلا اول ابن هديله كلاس هسميه ايتم 1 وهكتب جواه برض كلمه ايتم 1 وهعمل لك هنا مثلا بتاع 3لا اربعه كده ولا حاجه وكل واحد هيدي له كلاس مختلف ايتم ت وهنا ايتم 3 وهنا ايتم 4 وبرضو هكتب جواهم هنا للدلاله بس مش اكترر وهنا لاه وهنا اين طيب حلو الكلام ده حلو الكلام ده هندخل عندنا في السي اس اس هندي لهم بس شويه تنسيقات كده ندلعهم بس مش اكتر هنمسك عندنا البيرنت اللي هو الاب بتاعنا هنديله بس كده باك جراوند علشان بس نبدا نشوفه باك جراوند باللون الجولد مثلا وبرضو هديله مثلا بادين وليكن 10 بكسل وهمسك عندي كل الفات اللي جوه البيرنت هروح عندك لكل الفات اللي جوه البيرنت بالشكل اللي انا كاتبه ده وهدي لهم بادين و مارجن وليكن هنا 10 بيكسل وبرضو مارجن 10 بيكسل تمام علشان بس ابدا ان انا اوزع بالشكل ده كل ده انا لسه ماستخدمتش الفليكس بوكس طيب هروح هنا على كل ايتم وهدي لله لون مختلف علشان نبدا نفهم مع بعض اول واحد مثلا هديله باك جراوند باللون الاخضر وثاني واحد اللي هو الايتم 2 هديله مثلا باك جراوند باللون الاحمر وثالث واحد الايتم 3 هديله هنا باك جراوند باللون الازرق مثلا اي لون واخر واحد هديله باك جراوند باللون مثلا الفولت مثلا اي حاجه يعني مش مشكله تعالى كده بس لما نطلعه عندنا هنا وبس كده في واحد عندنا اتكتب غلط الايتم 2 تمام جدا جدا جدا انا دلوقتي لسه ما اشتغلتش في الفيليكس بوكس فكل التنسيقات اللي قدامك دي تقدر ان انت تعملها او ما تعملهاش براحتك المهم تركز معايا في الكلام اللي انا هبدا اقولهلك دلوقتي طيب انا دلوقتي محتاج ان انا اشتغل على الفيليكس بوكس فايه اول خطوه اول خطوه ان انت تروح عندك للاب بتاع العناصر دي وتبدا ان انت تديله عندك ديسبلاي فليكس طيب خد بالك كده من ترتيب العناصر قبل ما نستخدم الفليكس بوكس هنروح عندنا هنا على البيرنت الاب بتاعنا وهندي لله هنا ديسبلاي فيليكس بسم الله الرحمن الرحيم هتلاقي دلوقتي ان العناصر بتاعتك جت عندك بشكل عرضي طيب عاوز تفهم اكتر روح عندنا على الصفحه بتاعتنا اللي سبتلك اللينك بتاعها ويروح عندك هنا على الخصائص اللي انت بتديها عندك للبنت وابدا شوف عندك الفرق ما بين الديسبلاي فيليكس اهو والبلوك البلوك ده اللي هو العادي الطبيعي بتاعنا تمام فهت شوف عندك الفرق ما بين البلوك والفيلكس فالفليكسات لك العناصر بتاعتك بشكل عرضي رو عباره عن صف اما البلوج بيجيبهم لك فوق بعض بالشكل ده في كمان برض ملاحظه مهمه جدا هتلاقي دلوقتي ان البيرنت مكمل عندك من بعد العناصر بتاعتك يعني دلوقتي العناصر بتاعتك وقفت عند المكان ده ولكن يرن بما ان لسه في عرض فهو مكمل لو انت مش عاوز حاجه زي كده فعندك حاجه تانيه اسمها ديسبلاي ان لاين فيليكس فبص الفرق هتلاقي دلوقتي ان الانلاين فيليكس جابلك البيرنت خل لك العرض بتاعه او المحيط بتاعه على قد العناصر اللي جوه فلو العناصر اللي جوه مثلا كتيره تعال كده لما نكتها فهتلاقي دلوقتي ان العرض اصبح على قد العناصر بتاعتك بالظبط تمام دي هي ايه بقى دي هي الان ين فيليكس اما الفيليكس بس تمام تعال كده الفيليكس بس فلا الفيليكس البيرنت العرض بتاعه بيكمل عندك ليه نهايه الصفحه ومالوش دعوه هو باي حاجه طيب هنشتغل عندنا على الفليكس وهنرجع عندنا هنا ال عناصر بتاعتنا نخليهم اربعه بالشكل ده وهنبدا نشتغل على بقيه العناصر بتاعتنا عاوزك تفهم ودي حاجه مهمه جدا ان العناصر بتاعتنا مش هينفع تشتغل غير لما البيرنت يكون واخد عندك ديسبلاي فيليكس فانت لو مسحت عندك الخاصيه دي كل اللي هيجي بعد كده مش هيشتغل معاك تمام فلازم دي تكون موجوده طيب هنبدا نشتغل على الفيليكس دايركشن هي بتاخد عندك رو الرو ده هو الديفولت فسواء انت كتبتها او ما كتبتها كده كده بتكون عندك رو طيب عاوزك تفهم ان العناصر بتاعتك بتترتب عندك على حسب الدايركشن بتاع الصفحه بتاعتك طيب يعني ايه الكلام ده يعني دلوقتي العناصر بتاعتك جت على شمال الصفحه اهو بالمنظر اللي قدامك ده جت على الشمال ليه بقى الكلام ده لان ببساطه هي بتروح عندك على الدايركشن بتاع الصفحه فلو الصفحه بتاعتك كان الدايركشن بتاعها مثلا من اليمين يعني ار تي ال ف ببساطه كانت هتروح عندك فين كانت هتروح عندك في يمين الصفحه فببساطة لو الاتجاه ده مثلا كان هو ال تي ار فهي هتروح عندك من ال تي ار يعني من الفت تو رايت تمام طيب نشيل عندنا الكلام ده هي كده كده بتروح عندك من الشمال لليمين طيب عندنا حاجه تانيه اسمها رو ريفيرس بتعكس لك اتجاه العناصر بتاعتك فلو اتجاه الصفحه عندك من الشمال هي لما انت بتديلها رو ريفيرس بتحطهم لك رو يعني صف ولكن ريفيرس معكوس فبيكون على يمين الصفحه بتاعتك كمان تقدر ان انت تخليهم عندك هنا على شكل عمود كولوم بالشكل اللي قدامك ده او ان انت تخليهم عمود معكوس كولوم ريفيرس يعني بيكون عندك 4 3 2 واحد ولو انت عاوز تختبر الموضوع ده بتروح عندك على الصفحه بتاعتنا على خاصيه الفيليكس دايركشن وتقدر ان انت تخليها عندك رو وركز عندك هنا انا لما كتبت رو جم على اليمين ليه على يمين الصفحه لان ببساطه موقع نوفل هو موقع عربي يعني الدايركشن بتاعه بيكون عندك من على اليمين ف ببساطه انت لما بتكتب رو بتروح عندك على الدايركشن بتاع الصفحه لكن لما بتكتب عندك رو ريفيرس بتعكس الدايركشن فراحت عندك المره دي على الشمال فهمت الفكره طيب كمان تقدر ان انت تخليها كولوم يعني 1 2 3 4 او كولوم معكوس كولوم ريفيرس يعني 4 3 ا 1 طيب هندخل بعد كده في الفليكس راب كل ده احنا لسه بنشتغل على الخصائص اللي احنا بنديها للبرنت طيب تعال نيجي عندنا هنا و نبدا ان احنا تعال كده نبدا دلوقتي ان احنا نرجع الفليكس دايركشن ونخليها رو وهنروح عندنا هنا وهنزل وقتي العناصر دي نزود لنا كده بتاع لاث اربع عناصر علشان نشوف في مشكله مهمه هتحصل معانا دلوقتي دلوقتي لما العناصر اللي جوه تكون اقل من عرض البيرنت فمافيش مشكله بتحصل لكن لما بتكون اكبر من عرض البيرنت فبص اللي بيحصل العناصر بتاعتك بتطلع بره بتطلع بره لان مافيش مكان تكون جواه طيب هل ده صح لا ده مش صح فبن استخدم عندنا هنا حاجه اسمها فيليكس اي راب فيليكس راب ببساطه بتاخد عندك نو راب يعني انا مش عاوز يحصل اي التفاف والعناصر تكمل عندك تطلع بره البيرنت بتاعها اما لو انت عاوز ان انت تعمل راب فبتكون راب فبيتهم لك راب او التفاف طيب يعني ايه الكلام ده تعال دلوقتي لما نشوف دلوقتي البيرنت لما العرض بتاعه بيكون اكبر من العناصر اللي جوه مافيش اي مشكله بتحصل لكن لما بص العرض بيكون اقل بيتعمل لك هنا راب بص راب بالشكل اللي قدامك ده فالصفحه بتاعتك ما بتبصش وما بيحصلش فيها اي مشكله والعناصر ببساطه بتنزل عندك لتحت شايف بتنزل عندك لتحت عندك حاجه تانيه اسمها راب ريفيرس العناصر بتطلع عندك لفوق بيعني ايه الكلام ده يعني ببساطه لو البيرنت العرض بتاعه كان اقل فالعناصر بيتعمل لها راب ولكن لفوق راب ريفيرس بص بالمنظر اللي قدامك ده وتقدر طبعا ان انت تيجي عندك هنا وتجرب عندك الكلام ده كله ده النو راب العنصر رقم اربعه ده طلع بره عندك هنا لو انت عاوز تعمل له راب فبينزل اللي عندك هنا لو انت عاوز تعمل له راب ريفيرس فبيطلع عندك فوق لان ده هو الراب المعكوس طيب عندك خاصيه برض مهمه جدا وهي الفيليكس فلو ببساطه بتجمع لك الاثنين دول في بعض فدلوقتي عندك هنا الفيليكس فلو تقدر من خلالها ان انت ما تكتبش عندك الاثنين دول وتحط القيم بتاعتهم هنا ببساطه شديده فممكن دلوقتي ان انا اقول لك هنا رو وكمان اقول لك هنا ان انا هعمل لك هنا مثلا راب فتقدر ان انت تكتب عندك هنا الفيليكس دايركشن وتقدر ان انت تكتب عندك هنا الفيليكس راب زي ما هو موضح لك عندك هنا الفيلكس دايركشن وهنا الفيليكس راب طيب دلوقتي هنتعلم ازاي نرتب العناصر بتاعتنا ونتحكم في الماقع بتاعهم يعني انا دلوقتي مثلا محتاج ان انا اجيب العناصر دي في شمال الصفحه او في يمين الصفحه او فوق او تحت او في النص او في المكان اللي انا عاوزه علشان تعمل كده تعالى كده بس نقلل شويه هنخليه عندنا هنا اربع عناصر وهنفتح عندنا الصفحه بس علشان نشوف كل الشغل بتاعنا نشوفه بشكل مظبوط يعني تمام وهنستخدم عندنا حاجه اسمها جاست فاي كونتنت وبسم الله الرحمن الرحيم كده هي بتاخد عندك القيمه الافتراضيه بتاعتها هي الفيليكس ستارت تعال كده لما نكتب فيليكس ستارت بس بالشكل ده طيب يعني ايه فليكس ستارت ويعني ايه اصلا جست فاي كونتنت الجست فاي كونتنت بتتحكم عندك في موقع العناصر على المحور الرئيسي طيب يعني ايه المحور الرئيسي دلوقتي انا عامل العناصر بتاعتي دي عباره عن صف وبما ان عمل العناصر بتاعتي عباره عن صف فالجس فاي كونتنت بتتحكم عندك في موقع العنصر بتاعك على اتجاه السينات او على محور السينات اللي هو المحور اكس يعني من الشمال لليمين ببساطه شديده كده تقدر ان انت تخلي العناصر عندك على شمال الصفحه او في النص او في اليمين او توزع بتاعهم زي ما انت عاوز ده امتى الكلام ده لو العناصر بتاعتك كانت عباره عن صف طيب لما اقوللك فيليكس ستارت يعني انا بحطلك العناصر بتاعتك في بدايه في ستارت اهو في بدايه الدايركشن لكن لما اقوللك هنا اند يعني بحطهم لك في نهايه الدايركشن طيب يعني ايه الكلام ده يعني دلوقتي لو الدايركشن بتاعك هنا الدايركشن بتاع الصفحه مثلا كان من اليمين يعني قلتلك ار تي ال افهم هوضح لك دلوقتي كل حاجه ان شاء الله والله ببساطه شديده لو كان عندك اتجاه الصفحه من اليمين وجيت لك هنا وقلتلك فيليكس ستارت ده معنا ايه معناه ان هي هتكون في بدايه الدايركشن يعني هتكون عندك في اليمين لكن لما اقوللك فيليكس اند يعني هتروح في نهايه الدايركشن يعني هتروح عندك في الشمال والعكس عندك لو كان الدايركشن عندك هنا ال تي ار لو انا كتبتلك هنا فيليكس ستارت يعني هتروح فين هتروح في بدايه الدايركشن يعني في الشمال انا قلت لك ال تي ار هتروح عندك في بدايه الدايركشن لو كتبت لك هنا اند مش محتاج تفهم ان هي تروح عندك في الرايت كمان تقدر ان انت تستغنى عندك عن الدايركشن وتكتب عندك هنا ليفت بشكل مباشر فهي هتروح عندك هنا في الليت بغض النظر عن الدايركشن يعني لو كان عندك ار تي ال هي مش هتسمع كلامك انت قلت لها هتروح عندك في الشمال يعني في الشمال لو انا كتبت لك هنا رايت فهي هتروح عندك في الرايت يعني الرايت طيب لو عاوز اوديها في النص فهتك تب عندك هنا سنتر سنتر هتروح عندك في النص بالشكل اللي قدامك ده حلو الكلام حلو الكلام كل الشغل اللي احنا عملناه ده على اساس ان الفيليكس دايركشن كانت رو طيب لو كانت كولوم لا الكلام هنا بيختلف تعال كده نشيل عندنا الكلام ده كده كله ونسيبها عندنا هنا كولوم ونكبر عندنا الطول بتاع البيرنت هنخليه مثلا وليكن 400 بيكسل دلوقتي لو العناصر بتاعتك كانت الدايركشن بتاعها كولوم ف الجست فاي كونتنت بيتحكم لك في اتجاه العناصر بتاعتك على محور الواي لما كانت عندك رو تمام لما كانت عندك رو كنت تقدر تتحكم عندك في العناصر بتاعتك على محور الاكس يعني من الشمال لليمين لكن لما بتكون عندك هنا كولوم يعني بتتحكم فيها على محور الواي يعني فوق او في النص او تحت طيب يعني ايه الكلام ده يعني لو كتبت لك هنا فيليكس ستارت معنى فيليكس ستارت يعني انت هتحط لي العناصر بتاعتك فوق طب لو فيليكس اند يعني هتحط لي العناصر بتاعتك تحت ممكن تكبر عندك طول الصفحه علشان تفهم عندك اكتر هخليها مثلا 700 بيكسل فنزلت عندك تحت هنا بالشكل ده نزلت تحت ليه لان انت كتبت عندك فليكس اند طب لو انت عاوز تحطها في النص بتكتب عندك هنا سنتر فسنتر هتجيبها لك في النص تعال حت كده لما نرجعها عندنا تاني وليك 500 بيكسل فجت عندك في النص في النص فين على محور الواي ليه الواي لان انت كتبت عندك هنا كولوم طيب تعال دلوقتي نرجعها عندنا هنا لرو ونبدا نتكلم على حاجه مهمه جدا في عندك لات قيم وهم سبيس الراوند وسبيس بتوين وسبيس ايلي طيب يعني ايه الكلام ده هنتكلم دلوقتي على سبيس بتوين سبيس بتوين ببساطه معناها ان انت بتحط عندك مسافات في النص تعال كده لما نشيل عندنا الطول بالشكل ده واوريها لك بالشكل اللي قدامك ده سبيس بتوين معناها انها عملتلك سبيس اهو مسافات بتوين ما بين العناصر بتاعتك فجت ما بين العناصر بتاعتك وحطت عندك سبيس ودي ببساطه هي السبيس بتوين عندك حاجه تانيه اسمها سبيس اروند يعني هتعملك مسافات حول العناصر بتاعتك في مسافات ظهرت عندك من الجنب ده ليه لان السبيس اصبحت اراوند حوالين العناصر بتاعتك ففي عندك سبيس عندك في المكان ده وفي عندك سبيس عندك هنا في المكان ده وفي عندك سبيس عندك هنا تبع العنصر ده وهكذا بقيه العناصر بتاعتك ففي عندك مسافات حوالين العناصر بتاعتك طيب واخر واحده اخر واحده معناها سبيس ايفين لي طيب ايه الايفن لي دي ببساطه دي معناها مسافات بالتساوي فهتلاقي دلوقتي ان المسافه دي قد المسافه دي قد المسافه دي قد المسافه دي قد المسافه دي واللي ما بينهم هم العناصر يعني دلوقتي هو وزع لك المسافات وحط العناصر ما بينهم تمام لو انت عاوز تفهم اكتر بتيجي عندك هنا على الجاست فاي كونتنت على الصفحه بتاعتنا وبتروح عندك تجرب عندك الستارت هتلاقيها راحت عندك فين في الدايركشن بتاع الصفحه طيب والاند هتروح عندك في النهايه طيب والسنتر راحت عندك في النص طيب وال سبيس بتوين عمل لك مسافات بتوين ما بينهم طيب والارد عمل لك مسافات حواليهم ولكن المسافات دي مش قد بعض المسافات اللي في النص دي هي عباره عن مسافه العنصر ده زائد مسافه العنصر ده طب لو انت عاوز تخلي المسافات كلها قد بعض بتروح عندك هنا على السبيس ايفيلي فهتلاقي هنا ان المسافه دي قد المسافه دي قد المسافه دي قد المسافه دي قد المسافه دي واللي ما بينهم هم العناصر بتاعتك وصلت الفكره حلوه جدا طيب هندخل دلوقتي في خاصيه هي عكس الجاست فاي كونتنت والموضوع سهل وبسيط وهنشرح بطريقه كده يعني بالبلدي كده خلينا نقول ايه بالهجايص كده زي ما بيقولوا تمام بالراحه كده وببساطه انا دلوقتي علشان كده نفهم مع بعض وما حدش فينا يتلخبط دلوقتي لو الفيليكس دايركشن كانت رو فالست فاي كونتنت بتشتغل على محور الاكس يعني دلوقتي لو الفيليكس دايركشن كانت رو بالراحه كده وبهدوء كانت رو ف ببساطه الجست فاي كونتنت زي ما اتفقنا كونتنت زي ما اتفقنا بتشتغل على المحور اكس طيب لو بقى كانت تعال كده لو بقى كانت فيليكس دايركشن كولوم لو كانت كولوم فالست فاي كونتنت هتشتغل على محور الواي حلو الكلام ده وشرحنا ومافيش فيه اي مشاكل طيب انا عندي خاصيه وهي اللاين ايتمز وكمان عندي خاصيه تانيه وهي الالين كونتنت بالراحه كده وبهدوء الاتنين دول ببساطه هم عكس الجست فاي كونتنت فلما الفيلكس دايركشن بتكون عندك رو فالست فاي كونتنت بتشتغل على محور الاكس اما الالين ايتمز في الحاله دي بتشتغل على محور الواي وكذلك الالين كونتنت وهشرح لك كل حاجه ما تقلقش برضو بتشتغل على محور الواي والعكس عندك لما بتكون الفيلكس دايركشن كولوم فببساطة يعني ايه الكلام ده تعال دلوقتي بقى لما نطبق الكلام ده بشكل عملي دلوقتي لو كان الفيلكس دايركشن رو فلو انا كتبتلك هنا الاين ايتمز فببساطة استرتش يعني العنصر بتاعك بيتمط بيتمط او بيمت على حسب طول البيرنت يعني دلوقتي لو البيرنت مثلا 100 بكسل فالعناصر اللي جوه هتمت طولها يمتد على حسب طول البيرنت طيب لو كان مثلا 200 بيكسل فهيم تد عندك هيتعمل له ستريتش تمام لو كانت 400 لو كانت 500 كده كده هيتعمل العنصر بتاعك سترتش القيمه دي هي القيمه الافتراضيه اللي سواء انت كتبتها او ما كتبتها كده كده بتطبق نفس الفكره دي انا قلتلك ان هي موجوده في الانلاين ايتمز كذلك برضو موجوده في الانلاين كونتنت فلو انا كتبتلك هنا الاين كونتنت نفس الفكره بالظبط بتاخد عندك القيمه الافتراضيه بتاعتها سترتش فالاتنين بيكونوا سترتش والاتنين في الحاله دي طالما الفيلكس دايركشن رو فهي بتشتغل على محور الواي يعني من فوق لتحت طيب لو الفيلكس دايركشن كانت كولوم يبقى هيشتغلوا فين بقى يا معلم هيتعمل لهم سترتش ولكن من الشمال لليمين تعال كده لما نخلي نشيل الدايركشن اللي عندنا هنا ونرجع عندنا هنا في الحاله دي طالما الفيليكس دايركشن كانت كولوم يبقى هم بيشتغلوا الاتنين دول الالين كونتنت والالين ايتمز هيشتغلوا على محور الكس طيب تعال دلوقتي نشوف الكلام ده لو انا كتبتلك هنا بقى فيليكس ستارت كتبتها لمين كتبتها للين كونتنت راحت عندك فين راحت عندك في الستارت في بدايه محور الاكس ليه محور الاكس لان هي كولون طيب لو كانت فيليكس اند فهت عندك في نهايه محور الاكس انا قلتلك طول ما هي كولون ايه اللي بيحصل طول ما هي كولون فالين كونتنت ببساطه طول ما هي كولون بتتحرك على محور الاكس بالمنظر ده فلو انت كتبت ستارت هتكون في بدايه محور الاكس لو كتبت اند هتكون في نهايه محور الاكس لو كتبت سنتر فهتكون في منتصف محور الاكس نفس الكلام ده بالضبط او نفس الفكره دي بالضبط بتنطبق على الالين ايتمز فالاثنين شبه بعض طبعا في بينهم اختلافات هنشرح شويه كده ولكن المجمل الاثنين شبه بعض فلو انا كاتب لك هنا الاين ايتمز فطول ما هي كولون يبقى هتتحرك على محور الاكس فلو انت كتبت عندك هنا سنتر يبقى في منتصف محور الاكس لو كتبت عندك هنا فيليكس ستارت هتروح عندك في بدايه محور الاكس لو كتبت عندك هنا اند هتروح عندك في نهايه محور الاكس تمام الكلام ده امتى الكلام ده طول ما هي كولون طول ما هي كولون ف الاثنين دول بيشتغلوا على محور الاكس العكس بتاعهم لو كانوا عندك هنا رو ف ببساطه كده لو انت كتبت عندك هنا فيليكس ستارت لالين ايتمز فهتكون عندك في بدايه محور الواي الواي اهو طول ما هي رو بتكون عندك في او بتتحرك عندك على المحور واي سواء الايتمز او الكونتنت فلو انت كتبت عندك فيلكس ستارت هتكون عندك في البدايه لو كتبت عندك هنا اند هتنزل عندك تحت المحور واي يعني فوق او في النص او تحت لو كتبت عندك هنا سنتر لو كتبت عندك هنا سنتر هتيجي عندك في منتصف المحور واي ونفس الكلام ده تقدر ان انت تطبقه عندك هنا على الالين كونتنت اللي لو انت كتبت عندك هنا سنتر هتكون عندك في منتصف المحور واي لو كتبت عندك هنا فيليكس ستارت الموضوع مش صعب على فكره لو كتبت عندك فيليكس ستارت هتكون عندك في بدايه المحور واي لو كتبت عندك هنا اند فهتكون عندك في نهايه المحور واي ده التشابه ما بين الانلاين ايتمز واللاين كونتنت ببساطه شديده فانت لو فهمت الفكره اللي قدامك دي صدقني انت يعني هتكون فهمت جزء كبير جدا من الانلاين ايتمز واللاين كونتنت طيب ايه الفرق ما بين الانلاين كونتنت واللاين ايتمز بص يا معلم عشان تشغل الاونلاين كونتنت لازم تكون عامل عندك الراب لو انت مش عامل عندك الراب مش هتشتغل عندك يعني لو انت جيت هنا وكتبت لي فيليكس ستارت مش هتشتغل فيليكس اند برضو مش هتشتغل لو كتبتلك عندك هنا مثلا سنتر برضو مش هتشتغل ليه لان الانلاين كونتنت علشان تشتغل لازم ان انت تكون جاي عندك هنا وكاتب عندك راب تمام تكون عامل عندك الفيليكس راب وكاتب عندك راب في الحاله دي تبدا الاونلاين كونتنت تشتغل الكلام ده مش موجود في الاونلاين ايتمز يعني تقدر ان انت تشغل عندك الاونلاين ايتمز بدون ما تستخدم عندك الراب بالمنظر اللي قدامك ده تكتب عندك سنتر او تكتب عندك فيليكس اند هتشتغل معاك تكتب عندك فيليكس ستارت هتشتغل معاك بدون اي مشاكل طيب ده اول فرق تاني فرق بقى هو اهم فرق علشان نفهم الفرق ما بين الاونلاين ايتمز والاونلاين كونتنت هنروح عندنا هنا ونزود بس شويه عناصر عندنا ابناء جوه البيرنت تمام فهيكون عندنا عناصر كتيره جدا وعلشان العناصر دي تيجي جنب بعض المفروض ان احنا نعمل لها راب زي ما اتفقنا قبل كده انا محتاج دلوقتي ان انا انزل العناصر دي فروح هنا وهرجع عندك هنا ال راب هنرجع عندنا هنا الراب تمام لما رجعنا الراب وانا مستخدم عندك الاونلاين ايتمز انا قلت لك هنا روح عندك فوق فيليكس ستارت فهو بالفعل راح عندك فوق ولكن في مسافه كده ما بينهم المسافه دي خلي بالك دلوقتي منها هنركز عليها دلوقتي ولكن ايه خلينا كده نمشي واحده واحده هقول لك دلوقتي فيليكس اند ايه اللي هيحصل اللي هيحصل انهم بالفعل هينزلوا ولكن مازالت المسافه دي موجوده طيب هقوللك هنا روح في النص يعني سنتر هيروح عندك في النص ولكن المسافه دي هتفضل برض موجوده طيب الكلام ده مش هيحصل في الكونتنت لو قلت لك انلاين كونتنت المسافه اللي ما بينهم راحت فالان لاين كونتنت بتشتغل على الكونتنت كله انا بقول لك روح جيب لي الكونتنت كله وحطه لي في النص او حطه لي فوق يبقى فيليكس ستارت يعني هيروح عندك فوق او نزله لي تحت يعني فليكس اند هينزل عندك تحت اللي بينزل المحتوى كله المحتوى كله بكل اللي فيه بينزل عندك تحت طبعا دي مش هتشتغل لو ما كانتش موجوده عندك هنا الراب طيب ايه تاني فرق تاني فرق ان الالين كونتنت تقدر ان انت تكتب فيها سبيس بتوين وسبيس اراوند لكن الالين ايتم لا فالين ايتم انت بتديلها فيلكس ستارت او فيلكس اند او سنتر او سترتش اما اللاين كونتنت فتقدر تعال كده اللاين كونتنت اللي عشان تشتغل بيه بالمناسبه لازم طبعا ان انت زي ما اتفقنا تكتب عندك هنا راب فتقدر ان انت تكتب عندك سبيس بتوين او سبيس اراوند ولكن مش هيشتغلوا غير لما تطبق حاجه معينه فلو انا كتبتلك هنا سبيس بتوين هل في فرق هيحصل مافيش فرق حصل طيب ليه ما فيش فرق حصل هو مش المفروض دلوقتي ان هو يحط لك مسافات على محور الواي هقول لك بالضبط انا دلوقتي الفيلكس دايركشن بتاعتي رو ولما بتكون رو انا بشتغل على المحور واي يعني المفروض المسافات دلوقتي دي تكون على المحور واي يعني من فوق ومن تحت وانا لما اقول لك دلوقتي سبيس بتوين يعني اعمل لي مسافات ما بين العناصر على محور الواي طيب هل في عناصر ثانيه تحت العنصر ده لا ما فيش فمش هيعمل لك مسافات طيب تعال دلوقتي نزود عندنا العناصر بتاعتنا بحيث ان يتعمل لهم راب وينزلوا تحت فيكون عندك في عناصر تحت الصف بتاعك ده فدلوقتي في عناصر عندك على الصف الاول وفي عناصر عندك على الصف الثاني طيب شيل دلوقتي الابيس بتوين علشان نفهم دلوقتي مع بعض الفكره بتمشي ازاي هنكتب عندنا هنا سنتر ونفهم كده مع بعض دلوقتي انا عندي هنا الصف الاول وعندي هنا الصف الثاني هنفهم ما تقلقش وعندي مسافات ما بينهم فطالما في مسافات على المحور واي يبقى اقدر دلوقتي ان انا اجيلك هنا واقول لك ان انا عاوز تكون سبيس اراوند يعني مسافات من حول العنصر بتاعي او ان انا اعمل عندك سبيس بتوين يعني مسافات ما بين العناصر بتاعتي فين الكلام ده على المحور واي طيب لو انا كنت كاتب لك هنا مثلا كولوم فايه اللي بيحصل المسافات بتكون على المحور اكس فلو انا كتبتلك هنا سبيس اروند فبيس اروند هتكون فين على المحور اكس فهمتوا الفكره يا شباب تعال كده لما نرجع عندنا هنا ونخلي دي رو تمام تكون رو عندك بالمنظر ده فعلشان نفهم كده مع بعض لو مافيش عندنا عناصر تانيه تحت العنصر بتاعي فانت مش هتلاحظ عندك السبيس بتوين اللي احنا عاملينها عندنا هنا بالمنظر ده طيب انا حاسس ان انا اتلخبطت يعني انا حاسس دلوقتي ان الموضوع صعب شويه هقول لك يا عم ولا يهمك انسى كده كل الكلام ده وتعال دلوقتي لما اسالك سؤال كده دلوقتي انا عاوز اوسن العناصر دي في النص بالظبط على محور الاكس وعلى محور الواي يبقى بالراحه وبهدوء دلوقتي العناصر دي واخده عندك فيليكس دايركشن رو يبقى هنروح عندنا على الجاست فاي كونتنت اللي في حاله الرو بيشتغل على محور الاكس اهو في حاله الرو بيشتغل على محور الاكس يبقى هنرجع عندنا هنا هنقول لك ان انا عاوزك دلوقتي تروح عندك فين تروح عندك في السنتر فراح عندك في السنتر طيب وبعد كده وبعد كده هنختار مثلا الالين ايتمز هقولك ان انا عاوزك تروح على السنتر بتاعه مين بقى بتاعه الواي فدلوقتي العناصر دي جت في النص بالظبط من على محور الواي من خلال الالين ايتمز ومن على محور الاكس من خلال الجست فاي ك خلي بالك احنا كل اللي فات ده احنا كنا بنكتب عندنا الخصائص فين كنا بنكتبها عندنا في البيرنت فاحنا مكتبناش دلوقتي حاجه جوه الايتمز او جوه الابناء اللي جوه العناصر بتاعتك احنا كل ده بنشتغل على البيرنت فقط طيب انا عاوز اقوللك ان الفيليكس بوكس فيها خصائص انت بتديها عندك للبرنت وفيها خصائص انت بتديها عندك للايتم او الابناء بتاعتك وده دلوقتي دور العناصر او دور الخصائص اللي انت بتكتبها عندك للاب تعال دلوقتي لما نبدا عندنا باللاين سيلف هنمسح عندنا كل حاجه في الخصائص اللي انت كتبتها عندك للبرنت وهنسيب فقط الديسبلاي فيليكس ده اهم حاجه ف سيبه وتعال دلوقتي ندخل عندنا في الايتمز او الابناء طبعا انت بتختار عندك اي ابن انت عاوزه وبتبدا ان انت تشتغل عليه هنبدا مثلا نشتغل عندنا على الايتم 1 وهنبدا دلوقتي نشتغل عندنا على الانلاين سيلف الالين سلف تشتغل زي الانلاين ايتمز اللي في البيرنت ولكن الانلاين ايتمز انت بتديها للبرنت اما اللاين سيلف انت بتديها ليه العنصر نفسه اسمها سيلف طبعا هي برض بتاخد عندك استرتش كقيمه افتراضيه وممكن بقى ان انت تكتب عندك هنا فيليكس ستارت برضو فهت خيلك العنصر ده نفسه في البدايه او ان انت تخليه عندك فيلكس اند في النهايه او او ان انت تخليه عندك مثلا هنا سنتر في النص او تعمل اللي انت عاوزه طبق الكلام ده على كل العناصر اللي بعده تعال هنا واكتب عندك هنا الاين سيلف واكتب بقى اللي انت عاوزه وليكن مثلا فيليكس ستارت اعمل اللي انت عاوزه ولو انت ما فهمتهاش هي موجوده عندك هنا تقدر ان انت تطبقها عندك بالشكل اللي قدامك ده الالين سيلف تقدر ان انت تتحكم فيها زي ما انت عاوز وبالشكل اللي انت عاوزه تمام طيب تعال دلوقتي بقى ندخل عندنا في الاوردر او ترتيب العناصر بتاعتك دلوقتي انا كتبت العناصر بتاعتي في الاتش تي ام ال العنصر رقم واحد بعد العنصر رقم انين بعد العنصر رقم لاه وبعد العنصر رقم عه فظهروا عندك في الصفحه بتاعتك بالترتيب اللي انت حطيته انا ممكن ان انا اغير في الترتيب ده بالفيلكس بوكس ممكن ان انا اخلي العنصر رقم واحد ده يكون هو العنصر الاخير او الثالت او التاني او اللي انا عاوزه الكلام ده بعمله بان انا بروح للعنصر نفسه وبديله عندك خاصيه اسمها اوردر الاوردر مبدئيا كده بتاخد عندك صفر يعني دي القيمه الافتراضيه لكل العناصر دي يعني ده واخد عندك صفر وده صفر وده صفر وده صفر عاوز تجيب العنصر ده اخر عنصر زود الرقم يعني ممكن دلوقتي ان انا ازود الرقم ده واخليه واحد فاصبح العنصر اللي هو الاي 1 بدل ما كان هو اول عنصر اصبح عندك اخر عنصر طيب انا ممكن اروح دلوقتي على العنصر ايتم 2 اللي هو العنصر اللي باللون الاحمر ده واكتب لك فيه مثلا هنا اوردر مثلا اين اين يعني انا زودت الرقم فبما ان ده اين يعني رقم اكبر من ده فالعنصر الاحمر اصبح عندك بعد العنصر ده لو انت عاوز تجيب العنصر الاخضر بعده زود عندك الرقم خليه عندك لاته تمام فهمت تعال كده بس لما نخليه عندنا واحد ونرجع عندنا هنا للعنصر رقم لاثه هكتب لك في هنا مثلا اوردر وليكن لاثه فاصبح عندك الرقم ده اكبر من الاثنين دول فاصبح ده بعدهم وهكذا بقى اكتب هنا بقى اربعه اكتب اللي انت عاوزه لو كتبت لك هنا اوردر اربعه في العنصر الاخير ده اصبح عندك بالشكل ده طيب لو كلهم عندك بنفس الترتيب يعني لو كلهم عندك هنا واحد واحد واحد ايه اللي بيحصل اللي بيحصل لو كل العناصر عندك خده عندك الاوردر بتاعها بنفس الرقم يبقى الترتيب بيكون على حسب الترتيب اللي انت حطيته عندك في الاتش تي ام ال وطبعا تقدر ان انت تيجي عندك هنا وتجرب عندك الاوردر ممكن ان انت تيجي مثلا على العنصر رقم واحد وتزود بس عندك الرقم تمام فاصبح عندك هو العنصر الاخير ولو انت عاوز ان انت ترجع عنصر معين ورا فقلل الرقم بتاعه عن الصفر فممكن دلوقتي ان انا اروح للعنصر رقم اربعه اللي هو العنصر اللي قدامك ده واخليه مثلا سالب واحد فهير جع عندك لورا وصلت الفكره وبراحتك اعمل اللي انت عاوزه طيب هندخل دلوقتي عندنا في الثلاث خصائص دول وهم الفيليكس جرو والفيلكس شرينج والفيلكس بيزس طيب تعال دلوقتي ندخل عندنا في الكلام ده امسح عندك دلوقتي الاوردر وهنبدا دلوقتي ندخل عندنا في خاصيه مهمه جدا وهي الفيليكس جرو دلوقتي انا عندي هنا مساحه متبق ق المساحه دي بص بالشكل اللي قدامك ده طيب انا ممكن اقول لك بص شايف العنصر رقم اربعه ده لو انا رحت للعنصر ده وكتبت فيه فيليكس جرو واحد شوف ايه اللي هيحصل العنصر ده هيتعمل له جرو هيتعمل له نمو والمساحه اللي كانت موجوده هتبدا ان هي تروح عندك للعنصر ده لا لا انا مش فاهم بص يا معلم الفيليكس جروك كده بسم الله الرحمن الرحيم بتاخد عندك قيمه افتراضيه وهي صفر فكل العناصر دول واخدين عندك فيليكس جرو صفر طيب لو انا كتبت عندك هنا واحد واحد ده معناها ان المساحه المتبقيه هتروح عندك ل العنصر ده طيب لو انا كتبت عندك هنا برضو فيليكس جرو واحد للعنصر ده فايه اللي هيحصل اللي هيحصل ببساطه ان المساحه المتبقيه هتتقسم عندك على العنصر ده وعلى العنصر ده طيب لو انا كتبتلك هنا فيليكس جرو واحد برض فالمساحات هتتقسم عندك على الثلاثه دول ولو انا كتبت لك هنا فيليكس جرو واحد يبقى المساحه المتبقيه هتتقسم عندك على الاربع عناصر ايا كانت المساحه دي سواء مساحه كبيره او مساحه صغيره طيب يحصل ايه لو انا مثلا كتبت هنا فيليكس جرو اثنين مثلا ايه اللي هيحصل ببساطه العنصر ده هيكون العنصر رقم عه ده هيكون هو اكبر من العناصر دي ولكن اكبر بقد ايه تعال دلوقتي لما اشرح لك الموضوع ده دلوقتي لو انا شلت عندك كل الفليكس جرو شيل عندك كل الكلام ده علشان دلوقتي نفهم الكلام ده كده مع بعض بشكل ابسط تمام طيب دلوقتي لو انا هفترض ان المساحه المتبقيه دي هي 100 بيكسل تمام افترض ان المساحه المتبقيه دي هي 100 بيكسل فلو انا جيت لك هنا وقلت لك ان انت هتاخد فيليكس جرو للعنصر رقم اربعه وكتبت لك واحد فال 10000 بكسل كلهم هيتم اضافتهم على العرض الاصلي بتاع العنصر ده بما ان مافيش ولا اي عنصر تاني واخد عندك فيليكس جرو ولكن لو انا رحتلك على عنصر تاني وكتبت لك عندك فيليكس جرو واحد فال 10000 بكسل هيتم تقسيمهم على العنصرين دول ده هياخد 50 بكسل هيضاف على العرض الاصلي وده ياخد عندك 50 بيكسل هيضاف على العرض الاصلي طيب لو انا كتبتلك هنا 2 لو انا كتبتلك هنا 2 فال 10000 بكسل هيتقسط ده العنصر رقم 4 هياخد عندك مثلا 66 بكسل طبعا ال 66 بيكسل بيضاف على العرض الاصلي والعنصر رقم 3 هياخد عندك 33 وهكذا لو انا مثلا جيت لك هنا وكتبتلك 3ه فالعنصر رقم 4 هياخد عندك 75 والعنصر رقم 3 هيضاف على العرض الاصلي بتاعه 25 تمام وصلت طيب الكلام ده في حاله ان في اصلا مساحه متبقيه طيب لو ما فيش لو ما فيش عندك مساحه متبقيه ف الفيليكس جرو مالهاش اي لازمه يعني انا دلوقتي لو ما فيش عندي مساحه متبقيه بالشكل اللي قدامك ده ففيلكس جرو اصلا مش هتشتغل بص هي بتشتغل لما بيكون في مساحه متبقيه لكن لو ما فيش لو ما فيش بص اهي زي قلتها كانها مش شغاله عندك فالفيلسوف لو في مساحه متبقيه بتعمل نمو للعناصر بتاعتك وصلت وصلت تعالى دلوقتي بقى لما نرجع هنا طبعا انت ممكن برض ان انت تيجي عندك هنا وتجرب عندك الفيليكس جرو براحتك تيجي عندك هنا لو انت رحت عندك للعنصر رقم واحد وكتبت عندك واحد هاخد عندك كل المساحه المتبقيه لو انت رحت على العنصر رقم اين وكتبت عندك واحد هنا وواحد عندك هنا المتبقيه هتتقسم عندك على العنصر ده والعنصر ده وصلت وجرب انت براحتك واعمل اللي انت عاوزه هندخل عندنا في الفيليكس شرينك او الانكماش بص يا معلم دلوقتي تعال كده نشيل عندنا الفيليكس جرو ونشيل عندنا الفلكس جرو من هنا دلوقتي لو انا رحت لك على كل الابناء واديت لهم مثلا وليكن ويتس 150 بيكسل علشان بس اوصل لك الفكره بتاعتي دلوقتي طول ما فييه مساحه طول ما في عندك هنا مساحه موجوده يبقى كل عنصر بيحافظ على العرض بتاعه ولكن لو المساحه دي ما بقتش موجوده تعال دلوقتي نشوف ايه اللي بيحصل بص للعناصر بتاعتك بيتعمل لها انكماش العرض بتاعها بيقل بص بيقل لحد ما يوصل عند عرض معين والانكماش بيقف عندك طيب دلوقتي انا لو مش عاوز ان انا اعمل انكماش او عاوز ان انا اتحكم في الموضوع ده بتتحكم في الموضوع ده من خلال حاجه اسمها فليكس شرينك فدلوقتي انا لو جيت لك هنا على العنصر رقم واحد وكتبتلك فيه فيليكس شرينك طبعا القيمه الافتراضيه هي واحد طيب لو انا مش عاوز ان انا اعمل شرينج فبكت عندك هنا صفر صفر دي معناها ان العنصر رقم واحد مش هيتعمل له انكماش فدلوقتي انا لو جيت لك هنا بص على كل العناصر بيتعملها انكماش الا العنصر رقم واحد العنصر رقم واحد حافظ على العرض بتاعه كذلك لو انا جيت لك هنا وكتبت لك عندك هنا فيليكس شرينك للعنصر رقم اثنين وكتبت لك فيه صفر فالعنصر ده برده مش هيتعمل له انكماش بص بالشكل اللي قدامك ده تمام طيب دلوقتي انا لو كبرت الرقم يعني انا دلوقتي لو جيت لك هنا وبدل ما اكتب صفر كتبت لك مثلا لاه ايه اللي هيحصل اللي هيحصل طول ما الرقم ده كبير كل ما الرقم ده بيكبر كل ما العنصر ده بيكون له الاولويه ان هو ينكمش يعني بيكون هو اول عنصر بينكم طيب يعني ايه الكلام ده يعني ببساطه العنصر رقم واحد ده هو اول عنصر هينش لو انا جيتلك هنا بص ركز هو اول عنصر بينكم عندك هو العنصر رقم واحد بص ركز لحد ما بنوصل عند حد معين وبقيه العناصر عندك بتنكش ليه الكلام ده لان العنصر رقم واحد خد عندك فيليكس شرينك برقم اكبر من كل الباقيين طيب لو انا جيت لك على العنصر رقم 3 مثلا وكتبت لك فيه فيليكس شرينك مثلا 5 ايه اللي هيحصل تعال نشوف لو انا جيت لك هنا المفروض دلوقتي ان العنصر رقم لاه ده واخد عندك فيليكس شرينك خمس يعني هو اول عنصر هيتعمل له انكماش فلو انا جيت لك هنا وبدات ان انا اقلل العرض اول عنصر بيتعمل له انكماش هو العنصر الازرق ده وبعده العنصر الاخضر ده بص وركز هما الاتنين دول تمام ركز هما الاتنين دول بيبدا عندك بالازرق وبعد كده بيبدا يدخل عندك هنا في الاخضر تمام وبعد كده بيكمل عندك زي ما انت عاوز فالملخص لو انت كتبت عندك في الفيلكس شرينك صفر يبقى العنصر ده مش هيتعمل له انكماش لو انت كبرت عندك الرقم كل ما الرقم بيكون اكبر كل ما العنصر ده بيكون له الاولويه ان هو ينكمش وتقدر ان انت تجرب عندك الموضوع ده عندك هنا في الموقع بتاعنا طيب هندخل دلوقتي في الفيليكس بيزس الفيلكس بيزس بتقبل عندك البكسل وبتقبل عندك كل الوحدات اللي انت ممكن تديها عندك للويس والهات فتعال دلوقتي نشوف عندنا كل الكلام ده شيل عندك كل الكلام ده كده وتال دلوقتي نشيل عندنا برض الويتس من كل الابناء ونجي عندنا هنا مثلا للايتم 1 ونديله عندنا هنا فيليكس بيزس لو انا كتبتلك هنا 200 بكسل ايه اللي هيحصل اللي هيحصل ببساطه ان العنصر ده العرض بتاعه هيكون عندك 200 بيكسل هتقول لي انا مش مصدقك هقول لك انت ممكن ان انت تيجي عندك هنا وتبدل دي بويتس 200 بيكسل وهو هو نفس الافكت مافيش اي تغيير هيحصل طيب واحد هيقول لي انا ليه استخدم الفيليكس بيزس ما انا ممكن استخدم الويتس هقول لك لا الفيليكس بيزس تعالى كده الفيليكس بيزس ببساطه بتتحكم عندك في العرض طول ما الفيليكس دايركشن تعال كده بتكون رو طبعا هو الديفولت اصلا ان هي رو يعني هي رو سواء انت كتبتها او ما كتبتها تمام كده كده بتكون عندك رو طيب طول ما هي رو طول ما الفيليكس دايركشن رو يبقى الفيليكس بيزس بتتحكم عندك في الويتس طيب لو كانت عندك هنا كولوم لو كانت عندك هنا كولوم يبقى هتتحكم عندك في الهايت ركز تعالى كده لما اوريك لو هي مثلا 50 بكسل فالطول هيكون 50 لو انا مثلا خليتها 100 فالطول هيكون عندك 100 ممكن ان انا مثلا اخليها 200 فالطول هيكون 200 خلي بالك دي لو انت بدلتها عندك بالهات هتكون هي هي بالظبط لو انا قلت لك هايت 200 بيكسل فهي هي بالظبط ف باختصار شديد الفيليكس بيزس لو كانت الفيلكس دايركشن رو فهي ببساطه بتشتغل على الو اما لو كانت الفيلكس دايركشن كولوم فهي بتشتغل عندك على الهايت طيب اخر حاجه ان شاء الله هنبدا ان احنا نتكلم عليها وهي الاختصار الفيلكس الشورت هاند فدلوقتي انت بدل ما تكتب عندك هنا مثلا فيليكس جرو تقوللي مثلا واحد وتجيلي بعد كده وتقوللي فيليكس مثلا شرينك وتقوللي مثلا صفر مش عاوز ان هو يتعمله شرينك وتجيلي بعد كده تقوللي فيليكس مثلا بيزس 200 كسل بدل ما تفضل تكتب عندك الثلاث سطور دول انت ممكن تكتب عندك القيم دي كلها على سطر واحد وده انت بتعمله من خلال الفيليكس فقط ودي شورت هاند او اختصار للثلاث قيم دول فاول قيمه انت بتكتبها هي قيمه الجرو فانا ممكن اكتب لك واحد اللي هي قيمه الفيليكس جرو وبعد كده بعمل مسافه وبكتب عندك الفيليكس شرينك وبعد كده بعمل مسافه وبكتب عندك الفيليكس بيزس و كده اقدر اني استغنى عن الثلاث سطور دول واكتب سطر واحد بس وتقدر طبعا ان انت تشوف عندك الكلام ده لو الفيليكس دايركشن رو او كولون او ايا يكن كده كده هيطبق عندك نفس الكلام ده طالما انت كتبته عندك في الفيليكس اللي هي الشورت هاند طيب اخيرا هنتكلم على الجاب الجاب دي هي قيمه انت بتكتبها عندك ل البيرنت علشان تتحكم عندك في الفراغات او المساحات اللي بين كل العناصر بتاعتك فانا ممكن دلوقتي استغنى عندك عن المارجن وبدل ما اكتب عندك مارجن والجو ده انا ممكن ان انا اجي لك هنا في البيرنت واقول لك انا عاوز دلوقتي ان انا اعمل جاب بين كل العناصر بمقدار مثلا 30 بيكسل ايا يكن اكتب 30 بيكسل اكتب 10 بيكسل اكتب اللي انت عاوزه طيب احنا دلوقتي خلصنا كل حاجه في الفليكس بوكس ممكن دلوقتي تدخل عندك على الاختبار بتاعنا اللي هو الويدنج سي اس اس جيم وده اختبار بسيط عباره عن ان انت بتوجه عندك العريس او الراجل ده لعروسته اللي موجود عندك هنا في المكان ده عندك مستويات كتير في اللعبه دي وتقدر ان انت تقرا عندك التعليمات بتاعه كل مستوى هنا انت بتقرا ايه المطلوب منك بالظبط وباختصار شديد هو طالب منك ان انت في المرحله دي ان انت توجه عندك الراجل ده لعروسته ازاي توجه عندك العنصر ده ليمين الصفحه ببساطه انا ممكن اعمل كده من خلال الجاست فاي كونتنت انا هساعدك في سؤالين بس وانت مع نفسك انت الباقي علشان ايه انا عاوزك ان انت اللي تحل بنفسك طيب انا دلوقتي ممكن ان انا اوجه العريس او الراجل ده من خلال الجاست فاي كونتنت اوجهه لليمين من خلال مثلا الفيليكس اند تمام هو دلوقتي راح عندك لليمين ولقى عروسته 100 م وبما ان انت حليتها صح فال الزرار ده نور عندك باللون الاخضر فلو ضغط طط عليه هينقلك للسؤال اللي بعد كده وهعرفك ان انت حليت عندك المرحله دي حل انت بقيه العناصر انا ممكن كمان احل معاك السؤال ده هو دلوقتي طالب منك ان انت توجه الراجلين دول للنص علشان يقابلوا العروستين بتوعهم ازاي اوجه العناصر في النص برضو من خلال الجست فاي كونتنت ولكن هنا سنتر طبعا انا بكتب هنا جستي فاي بالشكل ده نص تمام وبتضغط عندك على التالي وبتكمل عندك زي ما انت عاوز اقرا عندك التعليمات بتاعه كل مستوى وحل عندك كل الاسئله وتمنى يا رب ان انتم تكونوا فهمتوا هنتكلم النهارده ان شاء الله عن الجريد الجريد واحده من اهم الخصائص اللي انت هتتعلم ان شاء الله في السي اس اس واحده من اهم وسهل الخصائص ان شاء الله النهارده هنشرح كل حاجه ف كوبايه القهوه بتاعتك لان الدرس ده هيكون مهم جدا جدا طيب يعني ايه جريد وبنستر في ايه يعني ايه جريد هي بتعني شبكه او بتعني تيبل طيب بنستخدمها في ايه بنستخدمها في تخطيط الموقع بتاعنا انت بتخطط الموقع بتاعك كشبكه او كتيب يعني انت ببساطه بتتعامل مع الموقع بتاعك او الصفحه بتاعتك كجدول جدول بيكون فيه صفوف واعمده طيب انا عارف ان الكلام مبهم دلوقتي ولكن ان شاء الله هبسط لك الامور كده واحنا بنشرح في الفيديو اللي فات لما شرحتلك الفيلكس بوكس قلت لك ان انت بتستخدمها علشان تخطط الموقع بتاعك طيب ايه الفرق بين الفيليكس بوكس وبين الجريد ما هو انت قلتلي ان الاتنين بيخططوا الموقع بتاعي هقوللك بص يا معلم الفيليكس بوكس انت بتستخدمها علشان تخطط موقع تصميمه بسيط شويه او بمعنى اوضح تصميمه بيكون عباره عن بعد واحد بس بعد واحد يعني التصميم عباره عن صف فقط او عمود فقط التصميم ما ينفعش يكون صف وعمود مع بعض لو انت عندك تصميم في صفوف واعمده وحاجات كتيره متداخله في بعض فواحده من اسهل وحط تحت اسهل دي مليون خط واحده من اسهل الخصائص اللي بتعمل لك كده هي الجريد فالجري احنا بنستخدمها علشان نخطط تصميم في صفوف واعمده وحاجات كتيره متداخله في بعض فالجري هنا بتكون هي الاسهل طيب تعال دلوقتي ندخل في الشرح بشكل مباشر علشان نفهم دلوقتي مع بعض الجريد ببساطه زي الفليكس بوكس بتشتغل على الاباء وبتشتغل على الابناء يعني في خصائص انت بتستخدمها للاب وفي خصائص انت بتستخدمها للابناء تعال دلوقتي لما نعمل عندنا ديف ونديله كلاس هنسميه بيرنت هيكون هو الاب بتاعنا وتعال نعمل عندنا 10 ابناء فنعمل عندنا هنا ديف هنديله كلاس هسميه هنا ايتم 1 وهكتب جواه برض هنا كلمه ايتم 1 وهنعمل هنا ا 3 4 5 6 7 8 9 10 فدلوقتي انا عندي هنا 10 ابناء تعال كده لما نغير دلوقتي الاسم بتاعهم او الكلاس بتاعهم هنا ايتم ت ايتم 3 ايتم 4 يبقى انا دلوقتي عندي هنا اب وعندي جواه هنا 10 ابناء تمام تعال كده لما نشوفهم عندنا بالشكل ده وهنروح عندنا في السي اس اس هنبدا ان احنا ندي لهم شويه تنسيقات علشان نبدا ان احنا نظهرها طيب هنبدا دلوقتي ندخل على البيرنت وهندي لله مثلا باك جراوند وليكن باللون الاحمر وهندي لله مثلا بادين 10 بيكسل مثلا تمام وهندخل دلوقتي على كل الابناء او كل الايتمز اللي جوه البيرنت كل الدفات اللي جوه عندك هنا هنبدا دلوقتي ان احنا ندخل على البيرنت ونقول له جيب لي كل الدفات اللي جوه وادي لهم مثلا باك جراوند باللون الجولد مثلا علشان نبدا نشوفهم ونشوف الشغل بتاعنا ايه اللي هيحصل فيه بالظبط طيب مبدئيا كده علشان تستخدم خاصيه الجريد فلازم تروح عندك هنا للبرنت وتدي له ديسبلاي جريد لازم تروح عندك للاب وتدي لله ديسبلاي جريد بدون الخاصيه دي فال الجريد مش هتشتغل معاك طيب يبقى هنيجي عندنا هنا وهنكتب عندنا ديس بلاي وهتكتب عندك جريد طبعا مش هيحصل اي حاجه ولكن احنا دلوقتي شغلنا عندنا الجريد يعني انا دلوقتي اقدر ان انا اتحكم عندي في الاعمده والصفوف بتاعه الشكل اللي قدامي ده وطبعا في كل خصائص الجريد طيب اول حاجه هنتكلم عليها هي التحكم في الاعمده بتاعه الشكل اللي قدامنا ده علشان تتحكم عندك في الاعمده بتروح عندك للبرنت وبتكتب عندك في خاصيه اسمها جريد تمبليت كولونز تمام جريد تمبلت كولونز طيب الخاصيه دي بتتحكم عندك في عدد الاعمده وعرض كل عمود فلو كتبت عندك قيمه واحده بس هيعمل لك عمود واحد بس بالعرض اللي انت كتبته هنا فهعمل لك عمود واحد بس بعرض 100 بكسل ولو انت عاوز تتاكد هتيجي عندك هنا كليك يمين ثم انسبكت وتضغط على العلامه دي وتقف عندك هنا على اي واحد فيهم هيظهر لك كل المعلومات بتاعته فهنا العرض وهنا الطول فقال لك ان العرض هنا 100 بكسل طيب لو انا عاوز ان انا اعمل عندي عمود تاني فهتك تب عندك هنا قيمه ثانيه بالعرض بتاع العمود الثاني يعني مثلا ممكن ان انا اكتب 200 بكسل فهو عمل لك هنا عمودين اول واحد 100 بكسل وتاني واحد 200 بيكسل ولو انت وقفت عليهم هتيجي هنا هيقول لك ان ده عرضه 100 بيكسل اما ده عرضه 200 بيكسل ف ببساطه انت كل ما بتكتب عندك قيمه هو بيزود لك عمود فلو انا عاوز ان انا اعمل عندك عمود ثالث فبكت عندك قيمه ثالثه بعرض العمود الالث فمثلا هكتب لك هنا 70 بكسل فهعمل لك عمود ثالث اهو عمود ثالث العمود الثالث ده اهو عرضه 70 بيكسل ممكن تعمل انت بقى عمود رابع عمود خامس اللي انت عاوزه كل ما بتزود عندك قيمه باختصار شديد فبيعمل لك بالقيمه دي عمود بالقيمه اللي انت كتبتها هنا القيمه دي بتكون هي عرض العمود اللي هو هيعمله لك طيب احنا دلوقتي خدنا البكسل كطريقه لتكوين عندنا عمود ممكن ان انت تعمل عندك عمود بالبيكسل او بالفي الم فممكن اقول لك دلوقتي اعمل لي عمودين كل واحد فيهم 50% فانا لو جيت لك هنا ووقفت لك على اول عمود هتلاقي دلوقتي ان عرض العمود ده هو بالظبط نفس عرض العمود ده تمام ولو كان العرض عندي مثلا لو الوتس عندك هنا 400 بكسل فهتلاقي ان اول عمود عندك هنا 200 بيكسل وثاني عمود عندك هنا 200 بيكسل ممكن ان انت تعمل مثلا عندك هنا ثلاث اعمده اول عمود 30% وتاني عمود مثلا 50% وثالث عمود مثلا 20% فاول عمود عرضه 120 بكسل وتاني عمود عرضه 200 بكسل وثالث عمود عندك هنا عرضه 80 بيكسل فال 400 اتقسمت عليهم بالشكل اللي انت كتبته عندك هنا كمان برضو انت ممكن ان انت تستخدم عندك الاوتو لو انا كتبتلك هنا اوتو مره واحده بس فهي قسم لك العرض كله على عمود واحد بس اما لو انا كتبت لك هنا اوتو مرتين فهي قسم لك العرض بشكل اوتوماتيك على العمودين لو انا كتبت لك هنا اوتو ثالث فهي قسم لك العرض على ثلاث عمدان بالمنظر اللي قدامك ده ادي عمود الثاني الثالث طيب كمان برض انت ممكن تزود عندك رابع تمام خامس اللي انت عاوزه كل ما بتزود عندك القيمه كل ما بيعمل لك عمود جديد طيب هنتكلم دلوقتي على حاجه ثانيه وهي الفراكشن وعلشان نفهم الفراكشن هنسال نفسنا السؤال السؤال ده دلوقتي انا لو جيت لك هنا وقلت لك انا عاوز ان انا اقسم عندك ال 400 بيكسل بتوع عرض الاب دول على ثلاث اعمده كل عمود ياخد قد التاني بالظبط هنا انت هتعمل ايه هتقول لي والله انا هقسم ال 400 دي على 3ه فمثلا 400 على 3 بتدي لنا 133 بو تات كتير كده تمام فممكن ان احنا نكتب 133 بيكسل 133 بيكسل 100 33 بيكسل وكده بالفعل انا قسمت العرض بتاعي على لاث اعمده ولكن افرد جالك حد وقال لك خلي ال 400 دي 500 هنا انت هتعمل ايه هل هتروح وتقسم ال 500 دي على 3 وتفضل تستخدم الاله الحاسبه يعني الموضوع صعب شويه فلا ده مش حل هتقول لي طيب انا ممكن استخدم عندك ال ممكن اكتب 33% اول عمود 33% تاني عمود 3 30% ثالث عمود هقول لك خلي بالك ان ده مش العرض المضبوط لان العرض المضبوط هو 33.33 3 3ه وتث كتيره جدا جدا فلو انت عاوز تقسم العرض ده بالظبط على الثلاثه فالطريقه دي برض مش اصح حاجه طيب امال نعمل ايه قال لك انت عندك حاجه اسمها 1 اف ار يعني 1 فراكشن فممكن اقول لك 1 اف ار 1 اف ار 1 اف ار طيب يعني ايه و اف ار الان اف ار اختصار لكلمه فراكشن يعني نسبه يعني بالبلدي كده انا بقول لك انا عاوز نسبه اول عمود تكون قد نسبه اني عمود تكون قد نسبه ثالث عمود يعني برده بالبلدي اكترر انا عندي هنا العرض 500 فقمت مقسم ال 500 دي ثلاث حتت احنا بنتكلم بالبلدي اهو قسمت ال 500 ثلاث حتت اديت حته لاول عمود والحته دي كانت قد الحته اللي اديتها لثاني عمود وكانت قد نفس الحته اللي اديتها لثالث عمود يعني اول واحده قد تاني واحده قد ثالث واحده قدهم بالظبط وده اختصار لكلمه فراكشن فالفراش هي افضل حل ليا في الطريقه اللي انا قلتها لك دي طيب لو انت كتبت عندك واحد فراكشن فقط واحد فراكشن فقط معناه ان هو خد لك ال 500 دي كلها وقسمها لك على عمود واحد بس طيب لو انا كتبت لك واحد فراكشن وواحد فراكشن ده معناها ان هو خد ال 500 دي وقسمها عندك على عمودين ادى الاول عمود 200 50 تعالى كده لما نشوف اد اول عمود اهو 250 وتاني عمود اداله 250 طيب لو انا كتبت لك هنا اثنين فراكشن وفي العمود الثاني واحد فراكشن ده معناه ان اول عمود كان ضعف ثاني عمود او بالبلدي اول عمود خد عندك حتتين وتاني عمود خد عندك حته واحده بس فلو بصيت عندك على اول عمود هتلاقي خد عندك 333.33 بيكسل ولو انت بصيت على ثاني عمود من غير حتى نبص هتلاقيه 166 اهو 166 والكسور بتاعته وبكده اول عمود كان ضعف ثاني عمود طيب كمان برض انت ممكن تستخدم عندك البكسل مع الفراكشن فلو انا قلت لك ان اول عمود كان 100 بيكسل وتاني عمود كان واحد فراكشن ده معناها باختصار ان اول عمود خد عندك 100 بيكسل والباقي اضاف لتاني عمود يعني بالبلدي كده هو خد عندك 100 بيكسل ضافه لاول عمود والربع الثانيين حطهم لثاني عمود ولو انا رحت قستها هتلاقي دلوقتي ان التاني عرضه 400 بكسل ولو انا كتبت لك هنا واحد فراكشن تاني واحد ها واحد فراكشن ف ببساطه هو حط لك اول عمود خلاه 100 بيكسل بغض النظر عن اي حاجه تانيه والعمود اللي بعدهم قسم لك ال 400 المتبقيه عليهم كل واحد عندك خد 200 بيكسل فلو انت بصيت هنا هتلاقي ان ده عرضه 200 والتاني ده عرضه 200 زي ما مكتوب عندك هنا في الجدول اللي قدامك ده طبعا انت ممكن ان انت تكتب عندك بالبكسل او ممكن ان انت تضيف عندك بال في الم فممكن اقول لك 50% لاول عمود والمساحه المتبقيه قسمها لي على ثاني عمود وثالث عمود يعني ايه الكلام ده يعني هو خد لك 50% بشكل مباشر ضافه لك لاول عمود فاول عمود كان 250 بيكسل اللي ههم النص بتوع البيرنت والعمود اللي بعد كده قسمهم على بعض ده 125 20 وده 125 اهو ده 125 وده 125 طيب بالنسبه للفرق بين الاوتو والفراكشنال الثنين فيهم شبه كبير من بعض لما انا بكتب عندك هنا اوتو المساحه الموجوده كلها بتروح عندك للعمود بتاعك كذلك برض الون فراكشن لما بنكتب عندنا 1 اف ار المساحه الموجوده بتاعتنا كلها بتروح ل العمود بتاعنا ولكن انا لو قلت لك اول عمود خليه لي اوتو وتاني عمود خليه لي 1 اف ار هتلاحظ الفرق بين الاوتو وبين الون فراكشن فالا اوتو لو في مساحه بتاخدها لو ما فيش مساحه بتقول لك لا انا بشتغل بشكل اوتوماتيك انا في الحاله دي هكون فيت كونتنت العرض بتاعي هيكون على قد المحتوى بالظبط لو المحتوى اللي جوه كبير تعالى كده لو المحتوى اللي جوه عندك هنا كبير فانا العرض بتاعي هيكبر العرض بتاع العمود بتاعي هيكبر اما لو العرض بتاع المحتوى ب بتاعي قليل انا هكون على قد المحتوى بالظبط ده بالنسبه للاوتو وعلشان ما تتلخبطش فصدقني الاوتو زي الفراكشن ولكن تقدر تشبه الفراكشن بالراجل البلطجي اما الاوتو بالراجل الطيب فالاثنين زي بعض يعني لو انت عندك مثلا اول عمود كان واخد عندك 100 بيكسل ورحت لثاني عمود خليته عندك هنا اوتو فببساطة هتلاقي ان العمود الثاني هنا 400 بيكسل كذلك عندك الفراكشن لو انا كتبت لك هنا الون فراكشن ف ببساطه العمود الثاني هياخد المساحه المتبقيه زي الاوتو بالظبط اللي هي هتكون عندنا هنا 400 بيكسل ولكن لو اجتمع عندنا ال 1 اف ار مع الاوتو فببساطة المساحه اللي تقدر ان هي تظهر بيه قدامك هنا اما الون اف ار ف بتاخد هي كل حاجه او بتاخد الجمل بما حمل فده باختصار شديد هنتكلم دلوقتي على الريبيت او التكرار والتكرار ده انت بتستخدمه لما بتكون عاوز ان انت تكرر حاجه معينه زي مثلا ان انا اقول لك عاوزك ان انت تعمل لي اربع اعمده كل واحد فيهم 100 بيكسل فبدل ما تفضل تكرر ال 100 بيكسل اربع مرات وتقول لي 100 بيكسل و100 بيكسل و100 بيكسل و اخيرا عندك هنا 100 بيكسل الموضوع بيكون مرهق جدا فبدل ما تكرر عندك كل ده انت بتستخدم عندك حاجه اسمها ريبيت وهي التكرار فممكن ان انا اقول لك اعمل لي اربع اعمده كل واحد 100 بكسل فهي ببساطه بتاخد عندك قيمتين اول قيمه عندك هنا بتكون قيمه الاعمده اللي انت عاوز تعملها او عدد الاعمده اللي انت عاوز تعملها وبعد كده بتعمل عندك هنا كوما وبعد كده بتقول عاوز كل عمود يكون كام بالظبط فممكن ان انا اعمل عندك خمس اعمده كل عمود 100 بيكسل او عرض كل عمود 100 بيكسل ممكن ان انا اعمل عندك عمودين براحتي ممكن اعمل مثلا سبع اعمده اعمل اللي انت عاوزه فانت هنا بتكتب عندك عدد الاعمده وهنا بتكتب عندك هنا عرض كل عمود فممكن ان انا اكتب لك اربعه فهعمل لك اربع اعمده وهنا انت ممكن تقول لي ان انا عاوز عرض كل عمود يكون 100 بيكسل او مثلا يكون 1 اف ار يعني عرض كل عمود هيكون قد التاني بالظبط طيب ده بالنسبه للجريد تمبلت كولمز او التحكم في الاعمده كمان برضو عندنا التحكم في الصفوف ودي برضو انا بعملها من خلال الجريد تمبليت روز الجريد تمبلت روز بتحدد عندك طول كل صف فلو انت كتبت عندك قيمه واحده بس هتحدد عندك طول اول صف فقط لو كتبت عندك قيمتين هتحدد عندك طول اول صفين هكذا فلو انا قلت لك 100 بيكسل فقط هتروح عندك لاول صف وتخليه عندك 100 بيكسل لو انا كتبت لك هنا قيمه ثانيه وليكن مثلا 50 بكسل هتروح لك لتاني صف وتخليه عندك 50 بكسل تعالى كده لما ننزل عندنا المربع ده ونيجي عندنا هنا ونشوف عندنا ثاني مربع هتلاقي دلوقتي ان الطول بتاعه 50 بيكسل طيب لو انا عاوز ان انا اتحكم عندك في ثالث صف فبروح عند عندك هنا وبكتب عندك قيمه ثالثه بالطول اللي انا عاوزه فممكن ان انا مثلا اقول لك 200 بيكسل فلو وقفت عندك هنا هتلاقيه دلوقتي بيقول لك ان الطول بتاع تاني صف هو 200 بيكسل وممكن ان انا ازود عندك صف كمان صف رابع بان انا اكتب عندك القيمه بتاعته فممكن اقول لك مثلا 50 بيكسل فهيج لك هنا ويزود لك صف حتى لو ما كنتش انت عملته طيب هل ينفع استخدم عندك الفراكشن هقول لك ايوه ممكن استخدم عندك الفراكشن والاوتو ولكن لو انت استخدمت عندك الفراكشن قلت لك مثلا واحد فراكشن واحد فراكشن واحد فراكشن فهو مش هيعمل حاجه كذلك الاوتو تمام كذلك هنا الاوتو اوتو اوتو اوتو برض مش هيعمل حاجه ليه مش هيعمل لان انا ببساطه بقول لك قسم لي طول البيرنت على الثلاث صفوف دول كل صف يكون قد التاني بالظبط طيب هل انت محدد الطول اصلا لا انا محددتش طول البيرنت خلاص يبقى هيقسموك انتتت علشان الاوتو او الفراكشن يشتغلوا فلو انا جيت لك هنا وركز لو انا جيت لك هنا وقلت لك ان الطول مثلا هيكون اي حاجه وليكن 500 بيكسل فبكده هو هيقسموك هنا اوتو في اول صف واوتو في تاني صف واوتو في ثالث صف هيقسموك الطول بتاع البيرنت على الثلاثه دول سواء الاوتو او حتى شن لو انا كتبت لك و اف ار 1 اف ار 1 اف ار فهي قسم لك الطول بتاع البيرنت على الثلاث صفوف دول كل صف هياخد قد التاني بالظبط الكلام ده لو انت محدد الطول لو انت مش كاتب عندك هنا طول فهو مش هيشتغل تمام طيب في حاله ان انت مش كاتب عندك طول ممكن ان انت تروح عندك لكل صف وتدي له الطول عندك هنا بشكل مباشر تقوللي ان الطول مثلا هيكون 100 بيكسل لاول صف ومثلا 200 بيكسل لتاني صف ومثلا اي حاجه يعني 50 بيكسل او 60 بيكسل لثالث صف تمام كذلك برضو انت ممكن ان انت تستخدم عندك الريبيت فممكن اقول لك دلوقتي مثلا اعمل لي ريبيت ثلاث صفوف كل صف مثلا هيكون 100 بيكسل براحتك اعمل اللي انت عاوزه طيب هنتكلم دلوقتي على المين ماكس والمين ماكس فكرتها بسيطه جدا وهي بدل ما تكتب عندك هنا قيمه ثابته سواء مثلا هنا 100 بكسل للاعمده او حتى للصفوف بدل ما تكتب عندك هنا قيمه ثابته لا انت بتكتب عندك قيمه بتتراوح عندك ما بين قيمتين قيمه قليله اللي هي المين وقيمه كبيره اللي هي الماكس طيب يعني ايه الكلام ده يعني بدل ما اكتب عندك هنا قيمه ثابته اللي هي 100 بيكسل او 200 بيكسل او ايا يكن لا انا بقول لك ان انا عاوز ان العمود ده العرض بتاعه يكون اقل حاجه ليه 100 بيكسل لكن لو في مساحه متوفره خلي لي مثلا العرض ده اقصى حاجه ليه يكون 200 بيكسل فعلشان اعمل كده بكتب عندك من ماكس والمن ماكس بتاخد عندك قيمتين قيمه المن وقيمه الماكس فهكذا طيب يعني ايه اللي انا كتبته ده انا هنا عارف ان عرض البيرنت عندك هنا هو 500 بيكسل فانا رحتلك هنا على الاعمده وخليت لك دلوقتي اول عمود عندك هنا اقل عرض ليه هو 100 بكسل او الرقم اللي انت بتكتبه هنا واقصى عرض ليه هو 200 بيكسل طيب يعني ايه السطر اللي انا كتبته ده دلوقتي انا بقول لك ان اقل عرض هو 100 يعني ما ينفعش العرض ده يقل عن 100 يعني ممكن يكون 110 ممكن يكون 100 ممكن يكون 120 ممكن يكون 180 لكن ما ينفعش يزيد عن الرقم اللي هو ال 200 ما ينفعش يزيد عن رقم الماكس ف ببساطه هو ما ينفعش يقل عن الرقم ده وما ينفعش يزيد عن الرقم ده طبعا لو في مساحه متوفره فهو بيوصل عندك لل 200 وطبعا هو دلوقتي عندك 500 يعني في عندك مساحه متوفره فلو جيت دلوقتي علشان اقيس عندك العرض هلاقي دلوقتي ان العرض عندك هنا 200 لكن لو انا مثلا خليت ان تاني عمود مثلا العرض بتاعه يكون مثلا 350 بيكسل انا عارف ان عرض البيرنت كله تعال كده انا عارف ان عرض البيرنت كله هو 500 فلما خلي تان عمود العرض بتاعه يكون مثلا 350 بيكسل يعني في لسه عندك 150 بيكسل متوفرين فقط فلو رحت عندك هنا وشفت عندك اول عمود هلاقي دلوقتي ان اول عمود عندك هو العرض بتاعه 150 ليه 150 لان ما فيش عندك ال 200 بيكسل المتوفرين اللي انت ممكن ان انت تاخدهم فانا قلت له ان اقل حاجه عندك هنا 100 واقصى حاجه عندك هنا 200 فقال لك طيب انا متوفر عندي 150 فانا هاخدهم و1 100 طيب لو انا جيت لك هنا على تاني عمود وخليته 250 يعني في عندك 250 عندك متوفرين فعندك 250 ولكن انا قلت لك ان اقصى حاجه انت ممكن ان انت تاخدها هي 200 فلو انا رحت دلوقتي علشان اشوف اول عمود عندك هنا بالمنظر ده هلاقي دلوقتي ان اول عمود عندك هنا هو 200 بكسل فقط برغم ان في عندك مساحه متوفره ولكن انا قلت له ان اقصى حاجه انت ممكن ان انت توصل لها هي 200 بيكسل طيب لو انا رحت عندك على العمود الثاني ده وخليته عندك 450 يعني المفروض المساحه المتبقيه عندك هنا من ال 500 هي 50 بيكسل فقط ولكن انا قلت لك ان انت ما ينفعش تقل عن الرقم ده فتعال دلوقتي نشوف ايه اللي هيحصل لو رحنا دلوقتي علشان نشوف عندنا عرض اول عمود هلاقي دلوقتي ان العرض عندك هنا هو 100 بيكسل برغم ان المتبقي فقط هو 50 طيب ايه اللي حصل اللي حصل ان اللي انت قلت له ان اقل عرض عندك هنا هو 100 طيب واللي بعد كده العمود اللي بعد كده 450 فقال لك ال 50 اللي بعد كده هتطلع بره ليه هتطلع بره لان ما ينفعش تاخد عندك من العرض بتاع اول عمود لان انا قلت لك ان اقل عرض لاول عمود هو 100 بيكسل وما ينفعش يقل عن العرض ده فده ببساطه فكره المن ماكس وطبعا تقدر ان انت تستخدمها عندك في الاعمده وفي الصفوف فتعال كده نرجع عندنا الاعمده مثلا ليها اربع اعمده كل عمود مثلا ا 1 اف ار وتعال دلوقتي نجربها عندنا في الروز علشان نجرب المين ماكس عندنا هنا هنشوف مشكله دلوقتي هتحصل و هنحلها دلوقتي بالمين ماكس هنروح دلوقتي على الثلاث صفوف تمام وهن خيه كلهم 100 بيكسل فدلوقتي اول صف عندك طوله 100 بيكسل وتاني صف 100 بيكسل وثالث صف عندك هنا 100 بيكسل لو انا رحت لك دلوقتي هنا على اول ايتم وكبرت المحتوى بتاعه يعني مثلا حطيت فيه مثلا عدد كلمات كبير وليكن مثلا 40 كلمه لو ضغطت دلوقتي على انتر هو دلوقتي هيعمل لك هنا اهو 40 كلمه فدلوقتي اصبح عندك هنا عدد كلمات كبير بص تعال كده عندك عدد كلمات كبير اكبر من طول الصف بتاعك خلي بالك ان انت لو ما كنتش محدد عندك طول الصف تعال كده انت لو ما كنتش محدد عندك طول الصف بتاعك فبص ده المفروض الطول الطبيعي للصف بتاعك لان المحتوى اللي جوه عندك هو محتوى كبير ولكن لما انت جيت هنا وحددت ان طول الصف عندك هيكون 100 بيكسل فالدنيا باظت عندك بالشكل ده بيجي بقى عندك هنا دور المن ماكس فانا ممكن اقول لك ان انا عاوز اخر صفين يكونوا 100 بيكسل زي ما هم ولكن اول صف هستخدم فيه المن ماكس المن ماكس عاوز دلوقتي ان انا اقول لك لو ما فيش محتوى انا دلوقتي مثلا مش عارف اذا كان في محتوى ولا ما فيش محتوى عاوز دلوقتي اقول لك ان اقل طول هيكون 100 بيكسل ولكن لو في محتوى فانا مثلا عاوز ان اقصى طول مثلا يكون 400 بيكسل مثلا يعني او اي حاجه يعني تعال نشيل عندنا الكلام ده كده عشان بس نوسع الدنيا وتعال على الاقل نصغر الكلام اللي جوه شويه نخليه مثلا 30 كلمه علشان ايه الدنيا تكون واضحه شويه طيب انا دلوقتي عندي هنا 30 كلمه تمام فده المحتوى اللي موجود عندي انا هنا بقول لك ان انا عاوز اقل طول عندك يكون 100 بكسل واقصى طول عندك يكون 400 بيكسل ولكن لو انا ملاحظ هلاقي دلوقتي ان في عندك طول زياده الطول ده هو اطول من المحتوى نفسه طيب ما انا برض مش عاوز كده انا عاوز دلوقتي لو في محتوى يكون الطول بتاع الصف ده على قد المحتوى بالظبط طيب ما انا ممكن اعمل كده بالاوتو الاوتو بتعمل لك الطول على قد المحتوى بالظبط على قد المحتوى بالظبط فلو المحت المحتوى اللي عندك هنا كان اقل شويه لو انا شلت لك دلوقتي مثلا ا سطر ولا حاجه مثلا زي كده تمام ف برض الطول هيقل على حسب المحتوى لو انت كترت عندك تعال كده لو انت كترت عندك الطول هيكبر على قد المحتوى وده ببساطه هو الاوتو زي ما اتكلمنا عنه قبل كده ف ببساطه لو ما فيش عندك محتوى فالطول عندك اقل حاجه هيكون 100 بيكسل لو في عندك محتوى الطول هيكون على قد المحتوى بالظبط فتعال نشيل كل الكلام اللي جوه تمام فبما ان ما فيش عندنا محتوى فطول الصف ده تعالى كده طول الصف ده اهو 100 بيكسل لكن لو انت عندك محتوى فالطول عندك هيكون اوتو على حسب المحتوى اللي موجود فالاوتوبيس وطبعا هنا المين ماكس حلت لنا مشكله كبيره جدا طيب تعال دلوقتي نشوف مشكله ثانيه بتحلها لنا المين ماكس ولكن هنشوفها في ال ال كولمز او في الاعمده دلوقتي انا عندي هنا تعال كده لما نرجع عندنا برض المحتوى هنا نخليه ايتم 1 زي ما كان انا دلوقتي عاوز ان انا اخلي عدد الاعمده عندي تكون متجاوبه يعني مثلا لو عرض الشاشه عندي كان قليل فيكون عندي مثلا عمودين فقط اما مثلا لو العرض عندك يكون كبير فيكون ثلاث اعمده كل ما العرض بتاعك يكبر كل ما عدد الاعمده عندك يكبر بشكل تلقائي ومتجاوب طيب ازاي بنعمل كده انا كل ما اكبر او بصغر هم الاربعه اللي انا كاتبهم ما بيتغيرو سواء العرض بتاعك هنا كان مش موجود يعني حتى لو العرض عندك هنا اتشال برض هي هي الاربعه عندك وسواء كانت فراكشن او 100 بيكسل او ايا يكن فكده كده هتكون عندك اربع اعمده لان انت كده كده كاتبهم بشكل مباشر علشان تغير عندك الموضوع ده بيتبدل عندك الاربعه دي بكلمه اوتو وركز اوتو فيل يعني انا بقول لك دلوقتي عاوز الامتلاء عندي يكون بشكل اوتوماتيك كل ما بكبر العرض كل ما عدد الاعمده عندك بيزيد وكل ما بقلل عندك العرض كل ما عدد الاعمده عندك بيقل بص كل ده بيحصل بشكل اوتوماتيك انا ما قلتش ان هم يكونوا عندك 10 اعمده هو اللي عمل كده بشكل اوتوماتيك وانا ما قلتش هنا ان هم يكونوا ثمانيه او سبعه او سته انا ما قلتش الكلام ده هو اللي عمل الكلام ده ولكن في مشكله ظهرت عندي وهو ان في عندك مساحه هنا ما استغلها والمساحه دي ممكن ان هي تظهر عندك هنا او هنا او هنا بص بالشكل ده طيب ليه الكلام ده لان انا بقوللك ان عاوز كل عمود يكون 100 بيكسل وانا لو رحت هنا علشان اقيس مساحه البيرنت هلاقي دلوقتي ان عرض البيرنت عندك هنا هو 556 بيكسل يعني في عندك هنا 56 بيكسل غير مستغله طيب انا عاوز ان انا استغل المساحه دي طيب ما انا ممكن استغلها بالمين ماكس يعني ممكن دلوقتي اقول لك ان اقل عرض هيكون 100 بكسل ولكن لو في مساحه مت وفره فكبر لي المساحه بتاعتي يعني خلي لي الماكس عندك مثلا يكون اوتو اوتو او فركشن اوتو او فراكشن يعني بياخد عندك المساحه كلها فممكن اجيلك هنا وركز ممكن اجيلك هنا اقول لك ان المين ماكس اقل عرض هيكون م بيكسل زي ما انا عاوز تعال كده حتى لما نكبر علشان تكون شايف الشاشه كلها المد بيكسل هي اقل عرض طيب واقصى عرض عندك يا اما تكتب عندك اوتو يا اما تكتب عندك فراكشن والاوتو او الفراكشن بياخد عندك كل العرض المتوفر يعني كده كده كل المساحه عندك هيتم استغلالها بالشكل اللي قدامك ده بص اهو كل المساحه تم استغلالها سواء انت كتبت عندك هنا اوتو او حتى كتبت عندك هنا 1 اف ار هي هي بالظبط تمام فاقل عرض هيكون عندك 100 بيكسل واقصى عرض عندك اللي هو الفراكشن يعني هيستغرب هنتكلم بعد كده على الجاب او المسافات ما بين الصفوف والاعمده اول حاجه عندنا هي الرو جاب او المسافات ما بين الصفوف لاحظ ان احنا زمان كان عندنا حاجه اسمها جريد رو جاب هو دلوقتي شاطب عليها لان احنا ما بقيناش بنستخدمها وبقينا بنستخدم الرو جاب هنا انت ممكن تكتب المسافه اللي انت عاوز ان انت تعملها ما بين كل صف فهو هنا يعمل لك مسافه 10 بيكسل ما بين كل صف عندك ممكن ان انت تخليها 10 بيكسل 20 بيكسل اللي انت عاوزه كمان برض عندك حاجه ثانيه اسمها كول جاب كولون جاب ودي بتعمل لك مسافات ما بين الاعمده ممكن برض ان انت تزودها او تقللها او تعمل اللي انت عاوزه كمان برضو عندك اختصار وهو الجاب تمام عندك هنا الجاب ممكن ان انت تكتب عندك قيمه الصفوف والاعمده فاول قيمه انت بتكتبها هي قيمه الرو جاب وتاني قيمه انت بتكتبها هي قيمه الكولون جاب ف القيمه اللي عندك هنا هي قيمه المسافات ما بين الصفوف فلو انا زودتها عندك مثلا وخليت ل 20 فهعمل لك مسافه ما بين كل صف بمقدار 20 ممكن ان انا اوضحها لك اكتر بان انا اخليها 100 بيكسل فهعمل لك مسافه ما بين الصفوف بمقدار 100 بيكسل اما الثانيه هي المسافه ما بين الاعمده فممكن ان انا اخليها مثلا هنا 20 علشان تفهم فهي ازود لك المسافه هنا ما بين كل عمود عندك هنا بمقدار 20 بيكسل ولو انت كتبت عندك قيمه واحده هيعملها للصفوف والاعمده زي ما انا بكتب لك هنا 10 بيكسل فهعمل لك 10 بيكسل للصفوف والاعمده في نفس الوقت طيب هنتكلم دلوقتي على الجست فاي كونتنت والانين كونتنت الجست فاي كونتنت واللاين كونتنت كنا اتكلمنا عنهم في الفيليكس بوكس ولكن هم هنا اسهل بكتير من الفليكس بوكس فالجا فاي كونتنت هنا بتشتغل على محور الاكس فقط في الفليكس بوكس كان في حالات بتشتغل فيها على الاكس وفي حالات تانيه بتشتغل فيها على الواي والعبك اللي اتكلمنا عنها في الفليكس بوكس هنا لا لا هنا الجاست فاي كونتنت بتشتغل على محور الاكس فقط فببساطة اعمل عندك هنا اربع اعمده تمام كل عمود مثلا 1 اف ار يعني ايه الكلام ده يعني كل عمود هيمل المساحه بتاعته فلو انا جيت لك هنا وقلت لك ان انا عاوز احط العناصر بتاعتي دي كلها في النص خلي بالك ان الجست فاي كونتنت بتتحكم في ان العناصر بتاعتك يا اما تكون عندك على الشمال يا اما تكون في النص يا اما تكون في اليمين يا اما توزعهم وهنتكلم عن الموضوع ده دلوقتي لو انا كتبت عندك هنا اي قيمه سواء سنتر او فيليكس اند او فيليكس ستارت او ايا كان فمش هتشتغل ليه مش هتشتغل لان ما فيش مساحه تتحرك فيها يعني انت هتجيبه في النص فين بالظبط وانت بتقول لي ان انا عاوز الاربع اعمده ياخدوا المساحه كلها فالجس فاي كونتنت حط قاعده كده في دماغك انها مش هتشتغل طول ما انت كاتب عندك هنا فراكشن لو انت كتبت عندك هنا اوتو الموضوع عندك بيتحول وهنا ده فرق ما بين الاوتو والفراكشنال دي لما انت بتشغل عندك الجاست فاي كونتنت تعال كده لما نمسحها بص لما نمسحها الاوتو عندك بتاخد عندك المساحه كلها لكن لما بتشغل عندك الجاست فاي كونتنت الاوتو عندك بتتحول ان العرض بتاعها بيكون هو على قد المحتوى بالظبط فكده انا ممكن اخلي المحتوى بتاعي كله في النص او ان انا اخليه في البدايه بان انا اقول لك هنا ستارت ستارت هتجيبه لك في البدايه عندك هنا ممكن ان انا اخليها عندك في النهايه ممكن ان انا اخليه عندك في النص زي ما اتكلمنا من شويه طيب الكلام ده لو انت كنت كاتب عندك هنا 1 اف ار مش هيشتغل مش هيشتغل لان مافيش مساحه يتحرك فيها انت ممكن ان انت تخلق المساحه دي بنفسك بان انت مثلا تكتب عندك 100 بيكسل او مثلا تعال كده لما نصغر شويه نخلي كل عمود مثلا 60 بيكسل بحيث ان يكون عندنا مساحه عندنا هنا وفي مساحه عندنا هنا فنقدر دلوقتي ان احنا نتحرك في المساحه دي فممكن اقول لك ستارت فيروح عندك هنا في مساحه اهو هو يقدر ان هو يتحرك فيها يقدر يروح في الاستارت يقدر يروح في الاند يقدر يروح في المكان اللي هو عاوزه والاوتو هنا هي افضل حاجه بتشتغل عندك في الموضوع ده لان الاوتو في الحاله دي بيكون العرض بتاعها هو فيت كونتنت كمان ممكن ان انت توزع من خلال السبيس ممكن ان انت تستخدم عندك السبيس بتوين ودي ببساطه بتعمل لك سبيس بتوين او مسافه ما بين يعني مسافه ما بين العناصر بتاعتك خلي بالك ان هو مسافه ما بين مش قبل ما فيش مسافه قبل هنا اهو المسافه ما بين العناصر بتاعتك عندك حاجه تانيه وهي السبيس اراوند ودي بيعمل لك مسافه حول العناصر بتاعتك يعني في عندك مسافه هنا وفي عندك مسافه حول العنصر ده مسافه على يمينه ومسافه على شماله والمسافه اللي في النص دي هي مسافه العنصر الاول زائد مسافه العنصر الثاني تمام تلا ان المسافه دي هي ضعف المسافه دي لان في مسافه حول كل عنصر عندك ولكن عندك حاجه ثانيه اسمها سبيس ايفيلي يعني مسافات متساويه وهنا هو بيوزع المسافات بتكون كلها بالتساوي يعني المسافه دي بتكون قد المسافه دي بتكون قد المسافه دي بتكون قد المسافه دي بتكون قد المسافه دي تمام ده بالنسبه للجوست فاي كونتنت اما الالين كونتنت عندنا حاجه تانيه اسمها الالين كونتنت الالين كونتنت بحرك العناصر بتاعتك على محور الواي يعني يا اما فوق يا اما في النص يا اما تحت او انها توزعهم على محور الواي ولكن انا قلت لك ان الجست فاي كونتنت ما بتشتغلش لما انت بتكون كاتب عندك هنا و اف ار او ان ما يكونش في مساحه الجست فاي كونتنت تتحرك فيها كذلك الانلاين كونتنت الانلاين كونتنت في حاجه ما بتخليها تشتغل وهو ان ما بيكونش في مساحه ان انت تتحرك فيها والمساحه دي هي طول البير بتاعك فلو البيرنت بتاعك ما كانش واخد عندك طول فانا ما اقدرش اقول لك ان انت هتروح عندك فوق او في النص او تحت لان ما فيش مساحه انت تتحرك فيها لكن لما اجيلك هنا مثلا واخلي لك الطول مثلا وليكن 400 بكسل ركز لما اخلي الطول عندك 400 بيكسل اقدر دلوقتي ان انا اجيل لك هنا واخلي العناصر بتاعتك دي تكون فوق بان انا اكتب لك هنا ستارت هتكون عندك فوق في البدايه او ان انا اخليها اند ان ان انا اخليها في النهايه او ان انا احطها في النص بان انا اكتب لك هنا سنتر ان انا اكتب لك الين كونتنت سنتر بان انا احطها في النص او ان انا اوزعها بان انا اقول لك هنا سبيس بتوين يعني عمل لي مسافات في النص مسافات ما بين كل العناصر او ان انا اعمل لك مسافات حول العناصر بتاعتك فيعمل لك مسافه من فوق ومسافه من تحت بالمنظر اللي اتكلمنا عنه من شويه طيب احنا كل ده بنتكلم على الخصائص اللي انت بتكتبها جوه البيرنت لحد دلوقتي احنا ما اتكلمناش على الخصائص اللي احنا بنكتبها جوه الابناء بتوعنا وده دور ان احنا نتحكم في الابناء بتوعنا فتعال دلوقتي لما نبدا ان احنا نتحكم فيهم تعال كده بس الاول لما نشيل عندنا الجاست فاي كونتنت والاونلاين كونتنت وتعال نجيب عندنا مثلا اول ابن وهو الابن اللي واخد عندك كلاس اسمه ايتم 1 فتعال كده لما ندخل عندنا هنا ونبدا ان احنا نجيب عندنا البيرنت ونقول له ان انت عندك هنا اول ابن عندك اللي واخد عندك كلاس اسمه ايتم 1 انا دلوقتي ممكن ان انا اتحكم عندك في الابن ده بان انا اتحكم في المساحه بتاعته دلوقتي الابن ده واخد عندك مربع واحد بس انا ممكن ان انا اخليه ياخد عندك مساحه مربعين او مساحه ثلاث مربعات او مساحه الصف كله او مساحه العمود بتاعك كله ممكن ان انا اعمل اللي انا عاوزه وتعال الاول كده علشان قبل ما نشتغل عليه لما نبدا ان احنا نلونه بلون مختلف علشان تبدا تشوف تاثير الشغل عليه السطر ده ممكن ان انت تكتبه او ما تكتبو اللي انت عاوزه علشان تبدا ان انت تتحكم عندك في عدد الاعمده اللي بياخدها عندك الايتم ده فبتكون الخاصيه دي هي اختصار لخاصيه اسمها جريت كولون ستارت وجريت كولون اند فانت بتكتب عندك هنا الستارت والاند يعني ببساطه انت بتقول لي انا عاوز الايتم ده يبدا فين وينتهي فين طيب لازم تفهم ان انت بتتحرك بناء على اللاين اللي قدامك دي فده اللاين رقم واحد وده اللاين رقم انين وده اللاين رقم 3 وده اللاين رقم 4 وده اللاين رقم خ لاحظ ان انت بتبدا عندك هنا واح 2 3 4 5 فلو انا عاوز دلوقتي الايتم ده يبدا عندك من اللاين 1 وينتهي عندك عند اللاين لاثه يعني ياخد عندك المربعين دول فهتك تب عندك هنا واحد على او الشرطه دي او السلاش دي لاه يبقى هو هنا هياخد عندك مربعين او خلي بالك انت بتتحرك هنا بناء على اللاينات هو بدا عندك من اللاين واحد وانتهى عند اللاين لاثه طيب لو انا عاوز ان هو ياخد عندك الثلاث مربعات يعني يوصل عندك عند اللاين رقم 4 فتكتب عندك هنا ان هو هيبدا من واحد وينتهي هنا عند 4 فهيا اخد عندك الثلاث مربعات طب لو انا عاوز ان هو ياخد عندك الصف كله فخليه يوصل عندك هنا عند اللاين خمسه فهتك تب عندك هنا من واحد لخ طيب انا عاوز مثلا ان هو يبدا عندك من اللاين رقم انين وينتهي عند اللاين رقم 4 فهيك تب لك هنا هيبتدي عند اللاين رقم انين وهين انتهي عند اللاين رقم اربعه فهيكون عندك بالشكل اللي قدامك ده وتقدر تتحكم فيه زي ما انت عاوز خلي بالك ان الخاصيه اللي قدامك دي هي اختصار لخاصيه اسمها جريد كولون ستارت وجريد كولون اند تمام جريت كولون ستارت وجريت كولون اند هنا انت بتكتب الستارت الاثنين وهنا انت بتكتب الاند اللي هي الاربعه وممكن ان انت تمسح دي فدي هي دي بالظبط الاثنين هيدولك نفس التاثير فممكن اكتب لك هنا واحد يعني هيبدا عندك هنا من اللاين رقم واحد وهين انتهي عند اللاين الاخير اللي هو اللاين رقم خمسه خلي بالك ان اللاين الاخير ده برض اسمه اللاين سالب واحد يعني لو انا مثلا عاوز عنصر يوصل عندك من البدايه للنهايه فممكن اكتب لك هنا سالب واحد وكده كده هيوصل عندك لاخر لاين عندك الحركه دي انت ممكن تعملها لو انت مش عارف عدد اللاينات بتوعك تمام ودي بالظبط هي لما تكتبها عندك بالشكل ده واح على سالب واح هي هي بالظبط والاتنين هيدولك نفس التاثير بالظبط الكلام ده طبعا انت ممكن ان انت تطبقه على اي واحد فيهم يعني ممكن اجيب لك دلوقتي الايتم 2 تعال كده ممكن دلوقتي اجيب لك هنا تعال كده لما ندخل عندنا هنا على البيرنت ونجيب عندنا هنا الايتم 2 ونبدا دلوقتي برض ان احنا نتحكم فيها من خلال ان انا اقوللك الجريد كولون انا عاوز دلوقتي الايتم 2 اللي قدامك دي تبدا عندك من اللاين رقم 1 تعال كده وتنتهي عندك عند اللاين رقم 3 فهتا اخد عندك ايه هتاخد عندك مربعين طب انا عاوز ان هي تنتهي عند اللاين رقم اعه فتكتب عندك هنا اربعه وهكذا عيش براحتك هنمسك عندنا دلوقتي الايتم 1 وهقول لك انا دلوقتي ممكن ان انا اتحكم عندك في الجريد رو والجريد رو هي اختصار لجريد رو ستارت وجريد رو اند يعني انت بتكتب عندك البدايه والنهايه بدايه اللاين ونهايه اللاين انا عندي هنا ده اللاين رقم 1 وده اللاين رقم 2 وده اللاين رقم 3 وده اللاين رقم 4 فممكن ان انا اقوللك انا عاوز الايتم 1 ده يبدا من اللاين رقم واحد وينتهي عند اللاين رقم 3ه فهو كده هياخد عندك مربعين ممكن ان انا اخليه يبدا من اللاين رقم واحد وينتهي عند اللاين رقم 4 فاخد عندك الثلاث مربعات ممكن ان انا اتحكم في الجريد كولون والجريد رو مع بعض فممكن ان انا اخلي الايتم 1 ده ياخد عندك مربعين من الاعمده ومربعين من الصفوف فاقول لك ان انت هتاخد عندك من الجريد كولون هتبدا عندك من اللاين رقم واحد وهتنتهي عند اللاين رقم 3 ده من ناحيه العمود وبرضو من ناحيه الصفوف هتبدا عندك من اللاين رقم واحد وهتنتهي عند اللاين رقم لاه وبراحتك اعمل اللي انت عاوزه طيب تيجي تفهم يعني تحب ان انت تفهم تعال د دوقتي لما نبدا ان احنا نفهم بابسط طريقه ممكنه انا عارف ان الموضوع ممكن يكون صعب شويه ولكن صدقني انا هبسط لك كل كلمه فتعال لما نمسح عندنا كل حاجه عندنا هنا وبرده هنمسح كل حاجه عندنا في الاتش تي ام ال ونبدا دلوقتي نشوف شكل معين ونحاول ان احنا نعمله بالحاجات اللي احنا اتعلمناها علشان نبدا نطبق كل كلمه اتعلمناها دلوقتي فالشكل اللي قدامك ده هو الشكل اللي احنا هنحاول ان احنا نعمله دلوقتي مع مع بعض ده شكل عباره عن عندك هنا هيدر وعندك هنا ناف بار وعندك في النص هنا مين كونتنت وعندك هنا سايد بار وفي الاخر عندك هنا فوتر فده شكل قريب شويه من اشكال المواقع تمام فتعال نحاول ان احنا نقلد عندنا الشكل ده مبدئيا كده احنا عندنا مربع 2 3 4 5 فتعال نروح عندنا في الاتش تي ام ال نعمل عندنا هنا خمس مربعات فالاول كده هنعمل عندنا هنا اب هنعمل عندنا هنا بيرنت ده الاب بتاعي اللي هيكون شايل عندي كل حاجه وهنعمل عندنا هيدر ده اول مربع عندي هكتب فيه كلمه هيدر وهنعمل عندنا خمسه زي ما قلنا 3 4 5 تمام تاني واحد هو الناف زي ما هو كان كاتب عندك هنا ناف ومين كونتنت وسايد بار فتعال كده لما نعملهم دلوقتي مع بعض عندنا هنا ناف ومين نكتب عندنا هنا مين وهنكتب عندنا هنا مين كونتنت وهنكتب عندنا هنا سايد بار وبرضو هندي لها نفس الكلاس بالظبط وهنكتب عندنا اخيرا هنا فوتر وهاخدها هنا واحطها في الكلاس هنا تمام وبكده انا عملت عندي الخمس مربعات دول بالاتش تي ام ال فقط تعال ندخل عندنا في السي اس اس ونبدا ان احنا نظبطه هندخل عندنا هنا هم الالوان انت ممكن تكتب اللون اللي انت عاوزه فانا هديله مثلا باك جراوند باللون الاحمر وهدخل على كل ابن جوه البيرنت وهتكتب عندك هنا ديف وهتدي لله مثلا لون وليكن لون جولد طبعا اكتب انت الالوان اللي انت عاوزها الموضوع ده حريتك الخاصه طيب علشان اشغل الجريد ايه اللي انا بعمله اول حاجه انت بتعملها ان انت بتروح عندك للبرنت وبتكتب فيه ديسبلاي جريد بدون الامر ده فانت مش هتع تعرف تشغل الجريد طيب بعد كده وبعد كده انت بتحدد عندك عدد الاعمده وعدد الصفوف فانا هقول لك مثلا عاوز عدد الاعمده مثلا تكون وليكن لاث اعمده مثلا تمام ممكن ان انت تعملها اكتر من كده زي ما انت عاوز فانا هقول لك ان انا عاوز الجريد تمبلت كولون تكون مثلا لات اعمده كل عمود مثلا 1 اف ار طبعا اكتب اللي انت عاوزه طيب وعدد الصفوف هو عمل عندك هنا صف واتنين لاثه هو دمج الاتنين دول مع بعض فممكن يقول ان هم صفين يبقى كده لاثه وعمل عندك هنا صف اخير يعني اربعه فممكن اقوللك هنا جريد تمبلت رو اعمل لي اربع صفوف كل واحد مثلا 100 بيكسل طبعا اكتب عندك 100 بيكسل 200 بيكسل اكتب عندك هنا و فراكشن اللي انت عاوزه الموضوع ده حريتك الخاصه وكمان تعال لما نعمل عندنا هنا جاب 10 بيكسل علشان بس ايه نظبط مع بعض طيب طيب ايه اول حاجه هنعملها اول حاجه هتعملها ان انت هتروح عندك للهيدر اللي هو اول مربع عندك وتبدا ان انت تظبطه بالشكل ده هو خلاه يبدا عندك من اللاين رقم واحد لحد اخر لاين فتعال دلوقتي نعمل زيه بالظبط او نطبق اللي اتكلمنا عنه بشكل عملي فهقولك انا دلوقتي محتاج ان الجريد كولون تبدا عندك من اللاين رقم واحد لحد اللاين سالب واح وبكده هو خد عندك كل المساحه كلها طيب وبعد كده بعد كده الناف الناف اللي قدامك دي قاللك انا هتحكم في الجريد رو هبدا عندك من اللاين رقم انين وبعد كده لاه وبعد كده اربعه يعني من اننين لحد اربعه كذلك المين كذلك السايد بار يعني التلاته دول ممكن اكتب لهم نفس الكود فقط مش لازم ان انا اكرره فممكن ان انا اجيلك هنا واقوللك جيبلي دلوقتي الناف تعال كده كنت مديله هنا كلاس اسمه ناف فجيب لي هنا ال وقوللي ان الجريد ارو هتبدا عندك من اللاين رقم انين لحد اللاين رقم 4 كذلك برضو المين هتبدا عندك من الجريد رو من اللاين رقم انين لحد اللاين رقم 4 وكذلك السايد بار هتبدا عندك من تعال كده السايد بار هتبدا عندك من اللاين رقم انين لحد اللاين رقم اعه وممكن تختصر كل دول في سط واحد علشان ما تفضلش تكتب كتير يعني ممكن اقول لك دلوقتي هنا هيكون المين طبعا بكتب دوت و هنا بعمل كوما وبكتب عندك دوت وبكتب عندك سايد بار علشان اقوللك ان التلاته دول هياخده عندك نفس الكود اللي هو جريد رو هبدا عندك من اللاين رقم انين لحد اللاين رقم اربعه واخيرا الفوتر عندك هنا واخد عندك المساحه عندك كلها على الجريد كولون فممكن برض بدل ما تكتب كتبها يعني ممكن ان انا اروح عندك هنا واكتبها عندك هنا واقول لك الفوتر هيبدا عندك من او هكتب عندك هنا جريد كولون اللاين رقم واحد لحد اللاين سالب واحد ممكن ان انا اختصر عندك كل ده بان انا اقول لك الهيدر اعمل لي قومه هنا واكتب لي هنا الفوتر ليه لان هو هو نفس الكود بالظبط فبدل ما تكتب عندك كتير انت ممكن ان انت تختصر عندك الكود وتوصل في النهايه لنفس الشكل اللي هو وصل له عندك هنا انا قلت اكتب انت الالوان اللي انت عاوزها او اعمل الالوان اللي انت عاوزها مش شغلتنا شغلتي هو ان انا انظم لك الجريد واوصله لنفس الشكل اللي هو عمله طيب دي اول طريقه لازم تفهم ان في طريقه تانيه لعمل الجريد والطريقه الثانيه دي ما فيهاش ولا جريد كولون ولا جريد رو هي معتمده على الجريد اريا وببساطه علشان تفهم الجريد اريا معتمد على ان انت بتسمي كل عنصر عندك يعني بتسمي عندك الهيدر وتسمي عندك الناف وتسمي عندك المين وتسمي عندك السايد بار وتسمى عندك الفوتر وتبدا ان انت توزعهم في الايريا او في المكان اللي انت عاوزه الموضوع اشبه ما يكون بان انت بتوزع فريق كوره مثلا فمثلا انت عاوز ان انت يكون عندك ثلاث مهاجمين وفي النص عاوز ان انت يكون عندك اربعه خط نص وعاوز ان انت يكون عندك ثلاث مدافعين او الشكل اللي انت عاوزه نفس الفكره دي بالظبط في الجريد فانت بتسمع عندك كل عنصر وتبدا ان انت توزعهم في الايريا او في المكان اللي انت عاوزه طيب بنعمل الكلام ده ازاي الموضوع بيمشي على خطوتين بتسمي عندك كل عنصر دي الخطوه الاولى وبعد كده بتروح توزعهم فتعال نسمي عندنا كل عنصر هنمسك عندنا الهيدر تعال كده لما نمسك عندنا الهيدر كده في الاول ونبدا ان احنا نسميه علشان تسميه بتستخدم عندك خاصيه اسمها جريد اريا وبتسمي بالاسم اللي انت عاوزه ممكن تسميه هيدر ممكن تسميه حماده تمام يعني ممكن اسميه هيدر ممكن اسميه اكس ممكن اسميه هيد بس ممكن اسميه بالاسم اللي انا عاوزه وممكن بعد كده ادخل عندك هنا على الناف وابدا ان انا اسميه اتقل هشرحلك دلوقتي كل حاجه ممكن اسميه دلوقتي ناف وممكن ادخل بعد كده هنا على مين وابدا دلوقتي ان انا اسميها مثلا مين وممكن ادخل هنا على السايد بار هسميها مثلا هكتب هنا جريد اريا هسميها سايد بار واخيرا الفوتر هاجي هنا على الفوتر هسميها مثلا هكتب هنا جريد اريا مثلا هسميها فوت فقط تمام وبكده انا سميت عندي كل عنصر ودي الخطوه الاولى بعد ما بتسمي عندك كل عنصر بتروح عندك للبنت بتروح عندك للاب وبتعمل ايه بتست دعي عندك خاصيه اسمها جريد تمبليت ارياز تمام جريد تمبلت ارياز وبتبدا توزع العناصر اللي انت سميتها كل صف انت بتحطه عندك هنا في دبل كوتيشن بالمنظر اللي قدامك ده تمام ده كده صف وده كده صف وده كده صف وده كده صف هشرحلك دلوقتي كل حاجه ولكن خلينا كده نمشي واحده واحده هنمسك عندنا كده اول صف تمام الصف اللي فوق ده انت عاوز تعمل ايه انا عاوز في اول صف عندي الهيدر ياخد عندك الصف كله يعني انا عندي هنا لاث اعمده المفروض ان الهيدر ياخد عندك اول عمود وتاني عمود وثالث عمود فهتك تب عندك هنا ان الهيدر هياخد عندك اول عمود انا طبعا مميه هيد فبتكون لو انت كاتب عندك هنا اكس ف بتتكتب عندك هنا اكس طيب انا كاتب عندي هنا هيد فهاك تب عندي هنا هيد طيب انا عاوز ان الهيد ياخد عندك اول عمود وبرده تاني عمود فبتعمل عندك مسافه وبتكتب عندك هنا هيد وعاوز ان هو ياخد عندك ثالث عمود طيب والصف اللي بعده تعال كده لما نشوف الصف اللي بعده انا عاوز ان الناف تاخد عمود والمين تاخد عمود والسايق عمود فهني جي عندنا هنا وهقول لك عاوز الناف تاخد عمود والمين تاخد عمود والايد بار تاخد عمود الكلام ده انا عاوز ان هو يتكرر في صفين ورا بعض لان انا عندي هنا السايد بار واخده عندي ص ادي صف واتنين كذلك المين وكذلك الناف فانا عاوز ان السطر ده يتكرر عندي مرتين تمام فكرره عندي هنا مرتين بالمنظر ده واخيرا اخيرا انا عاوز ان الفوتر ياخد عندي الصف كله يعني ياخد عندك العمود الاول تعال كده ياخد عندك العمود الاول انا مسميه فوت خلي بالك اهو انا مسميه فوت العمود الاول وياخد عندك العمود التاني وياخد عندك العمود التالت وبكده انا وصلت لنفس الشكل بطريقه تانيه خلي بالك ان انت لو جيت عندك هنا وبدلت الهيد بنقطه النقطه دي يعني مسافه فاضيه النقطه او الدوت بتعمل مسافه فاضيه فانا ممكن مثلا اجيلك هنا في المين يعني في المكان ده لو انا مش عاوز ان انا احط عندك هنا حاجه وعاوز ان انا اسيب المكان ده فاضي فبكت عندك هنا دوت بالمنظر اللي قدامك ده فالمكان ده يكون عندك فاضي طيب لو انا عاوز الناف هنا يكون فاضي يبقى هروح عندك هنا في الناف في المكان ده واكتب عندك هنا دوت طيب لو انا عاوز مثلا صف كامل فاضي تعال كده بس الاول لما نكتب عندنا هنا مين لو انا عاوز صف كامل يكون فاضي ممكن مثلا اجيلك هنا واقوللك انا عاوز دلوقتي ان الصف ده اول عمود يكون فاضي وتاني عمود يكون فاضي وثالث عمود يكون فاضي فكده الصف ده بالكامل اصبح عندك فاضي بالمنظر ده الريسبونس بتعني التجاوب يعني فكره ان التصميم بتاعك او الموقع بتاعك يكون متجاوب يعني ان هو يتفتح على كل الشاشات بمقاساتها المختلفه زي ان هو يتفتح على موبايل او ان هو يتفتح على تابلت او ان هو يتفتح على بي سي او لاب توب او شاشه مقاسها كبير او ايا يكن مقاس الشاشه فالتصميم بتاعك مش هيضرب التصميم بتاعك مش هيبوظ بل ان هو هيكون متجاوب وهي دي فكره الريسبونس زي مثلا تصميم اكاديميه نوفل فالتصميم اللي قدامك ده هو تصميم ريسبونسيف تصميم تقدر ان انت تفتحه على شاشات كبيره زي اللاب توب او البي سي او كمان تقدر ان انت تفتحه على شاشات متوسطه زي التابلت او شاشات صغيره زي الموبايل طيب تعال دلوقتي نجرب ده شكل التصميم بتاعنا لما بنفتحه على شاشه العرض بتاع كبير طيب دلوقتي مثلا انا لو صغرت عرض الشاشه دلوقتي انا عندي هنا ادي ايتم اين لاه عندي هنا لاثه ايتمز لو صغرت عندك عرض الشاشه على اساس ان هي تتفتح على تابلت فلي حصل ايه بقى اللي حصل ان الثلاثه ايتمز دول اصبحوا عندك هنا ايتم واحده فقط على اساس ان هي تتجاوب وتتفتح عندك على تابلت بالمنظر اللي قدامك ده وفوق عندك هنا في عندك هنا اثنين ايتم طيب ليه لان الشاشه هنا عض ها اقل طيب تعال كده نقلل عندنا العرض بحيث ان احنا نفتحه على موبايل فقال لك على الموبايل بيكون ده المنظر اللي قدامك بالمنظر اللي قدامك بالشكل ده ايتم واحده فقط فالملخص ان ده تصميم ريسبونسيف او تصميم متجاوب طيب دلوقتي انا عندي هنا تصميم مش متجاوب التصميم اللي قدامك ده عباره عن ست ايتمز دلوقتي انا لو صغرت عندك الشاشه بص الايتمز بتطلع بره طلعت بره عن عندك هنا اهو في محتوى خرج عندك بره الشاشه بتاعتك ولو انا مثلا فتحته عندك على موبايل فاللي هيظهر لك من الست ايتمز هم ايتم ونص تقريبا فالتصميم ده مش متجاوب طيب انا حولت التصميم ده لتصميم ريسبونسيف او تصميم متجاوب فدلوقتي انا لو صغرت عرض الشاشه زي كده مثلا فاصبح عندك ريسبونسيف بدل ما كان بيعرض عندك ست ايتمز قال لك لا في التابلت انا هعرض لك اثنين فقط طيب وفي الموبايل قال لك في الموبايل انا هعرض لك ايتم واحده فقط طيب هل هو عمل كده من نفسه لا انا اللي عملت كده طيب ازاي بنعمل كده او ازاي بنتعلم الريسبونس علشان تفهم ازاي بتتعلم الريسبونس لازم تفهم حاجه كده اسمها الميديا لو انت فهمت الميديا ان شاء الله هتفهم الريسبونس ف فتعال نشوف بتتكتب ازاي وبنعمل بها ايه وبعد كده ان شاء الله هناخد مثال وهنفض كل حاجه عن الريسبونس دلوقتي انت علشان تستخدم عندك الريسبونس ف بتستخدم عندك حاجه اسمها ميديا فبتكون عندنا هنا مكان العرض هفهمك كلكل حاجه ما تقلقش ولكن خلينا نمشي واحده واحده طيب وبعد كده وبعد كده بتفتح عندك كيرل براكتس وجوه الكيرل براكتس بتكتب عندك كود سي اس اس فهني عندنا هنا وهنكتب عندنا كود سي اس اس كود عادي جدا زي الكود اللي انت بتكتبه في اي مكان عندك في الصفحه بتاعتك فدي تركيبه الميديا تعال دلوقتي لما نمسح كل ده ونبدا نشتغل كده على نظافه دلوقتي انا هقول لك اهو انا عاوز دلوقتي البادي مثلا بشكل مبدئي يكون الباك جراوند بتاعته مثلا باللون الاسود زي ما هو طيب وبعد كده دلوقتي الكود اللي انا كتبته ده بيشتغل امتى بيشتغل في كل وقت سواء انت فتحت الموقع بتاعك ده على موبايل على تابلت على ايا يكن فهو بيشتغل عندك في كل الاوقات طيب انا دلوقتي عاوز ان انا اعمل مثلا كود سي اس اس يشتغل فقط على الموبايل او على التابلت او على مقاس معين فنعمل الكلام ده ازاي بتيجي عندك هنا وبتعمل عندك الميديا وبعد كده بتكتب عندك السايز بتاعك فنفت عندنا هنا قوسين وهقول قول لك الكود اللي انا عاوز ان انا اكتبه يكون موجود على شاشه اقصى عرض ليها الماكس ويتس مثلا اقصى عرض ليها مثلا 600 بيكسل طيب يعني ايه الماكس ويتس 600 بيكسل معنى ماكس ويتس 600 بيكسل يعني الشاشات اللي بتبدا من صفر بيكسل لحد تعال كده لحد 600 بيكسل كلمه ماكس ويس يعني اقصى عرض لما اقول لك ان اقصى عرض 600 يعني ممكن الكود اللي انا هكتبه هنا يشتغل على شاشه مثلا 400 على شاشه 500 على شاشه 300 لكن ما ينفعش يشتغل على شاشه اكتر من ال 600 فهمت فهنا من 600 فما اقل طيب هتعمل ايه هقول لك انا هنا طبعا احنا اتفقنا ان احنا جوه الكيرل براكتس بنكتب كود سي اس اس كود زي الكود اللي قدامك ده فممكن ان انا اقول لك جيب لي البادي وخلي لي الباك جراوند بتاعته باللون الاحمر طيب الكود ده هيشتغل امتى الكود ده هيشتغل على الشاشات اللي عرضها اقل من 600 فتعال دلوقتي لما نختبر الموضوع ده هنجيب عندنا الشاشه عندنا بالمنظر ده وهنفتح عندنا الانسبيك علشان نعرف عرض الشاشه بتاعتنا ركز عندك في المكان ده هتلاقيه دلوقتي بيحدد لك هنا العرض اهو بالمنظر اللي قدامك هنا هتلاقيه دلوقتي بيقول لك ان العرض عندك هنا 900 تعال كده نقلل عن ال 600 اول ما هينزل بص اهو اول ما نزل عند ال 600 وبقى اقل من ال 600 اهو دلوقتي 500 وهنا 400 وهنا 300 فاهم وهنا 200 فاهم فكل ما بيقل عن ال 600 كل ما الكود اللي انت عملته تعال كده كل ما الكود اللي انت عملته هنا بيشتغل ف ببساطه انت دلوقتي بتحدد عندك الشاشه او مقاس الشاشه اللي انت عاوز الكود ده يشتغل فيها وهنا انت بتكتب كود عادي جدا زي اي كود انت ممكن ان انت تكتبه طيب لو انت عديت العرض بتاع ال 600 يعني دلوقتي انا عندي هنا 200 300 400 500 اول ما هعدي ال 600 مش هيشتغل اول ما تعدي ال 600 الكود اللي انت كتبته هنا مش هيشتغل فالكود ده مش هيشتغل غير في الشاشات اللي عرضها اقل من 600 طيب هل ينفع ان انا اعمل ميديا تانيه هقوللك ايوه ممكن ان انت تيجي عندك هنا وتحدد لي مقاس شاشه تانيه وليكن مثلا هكتب لك هنا ان الماكس ت مثلا بتاعها هيكون مثلا 800 بيكسل هقوللك الشاشات اللي عرضها اقل من 800 بيكسل خليلي مثلا ان البادي يكون الباك جراوند بتاعه مثلا باللون الازرق طيب يعني ايه ماكس ويتس 800 بيكسل دي ببساطه معناها ان الشاشات اللي عرضها بيبدا من صفر لحد 800 بيكسل زي ما اتفقنا انا قلتلك ان الماكس تيس يعني اقصى عرض طيب ما كده ده بديه ان هو هيعمل اوفر رايت على ده يعني بالمنطق كده انا بقول لك ان ده من صفر لحد 800 وده من صفر لحد 600 لكن ده اللي اتكتب تحت فبدايه ان الاول ده كده مش هيشتغل تعال دلوقتي نشوف المشكله دي ونشوف ازاي بنحلها دلوقتي مع بعض تعال كده لما نجيب عندنا الشاشه هنا بالمنظر ده ونبدا ان احنا نشوف عندنا العرض انا عندي هنا العرض كام انا عندي هنا العرض 1100 تعال كده نقلل لحد ما نوصل عندنا عند 8800 اول ما هيوصل عند 800 اهو 800 هيبدا دلوقتي ان الكود اللي انت كتبته عندك هنا هيبدا ان هو يتنفذ طيب وبعد كده وبعد كده هيفضل يتنفذ لحد الصفر بص اهو بيتنفذ عندك اهو بص لحد العرض صفر طيب والاول ده ما تنفذ ليه لان ببساطه ده اللي اتكتب في الاخر طيب نحل المشكله دي ازاي انا دلوقتي مش عاوز اقول له ان الكود ده يشتغل في الشاشات اللي عرضها بيبدا من صفر ل 800 انا عاوز اقوله ان الكود ده يشتغل في الشاشات اللي عرضها بيبدا من 601 لحد 800 فهنا هزود عندك شرط تاني يبقى هنعمل عندنا هنا قوسين شرط تاني ركز الموضوع بسيط جدا انا عاوز اقوللك ان انت هتبدا من الشاشات اللي عرضها بيبدا من 60 و1 اللي هو بعد الشاشات اللي قدامك دي لحد 800 فكتب لك هنا المن تس المين وس اقل عرض اقل عرض مثلا 601 انا عارف ان انت مش فاهم ولكن اصبر انا هفهمك دلوقتي كل حاجه انا عاوز اقوللك ان انت هتبدا من الشاشات اللي عرضها 601 بكسل ولازم ان انت تفصلهم بكلمه اند بين المين تس والماكس تس بتكتب عندك هنا كلمه اند طيب ده معناه ايه ده معناه ببساطه ان الكود اللي قدامك ده هيشتغل في الشاشات اللي بتبدا من 601 بيكسل لحد ببساطه 800 بيكسل ببساطه شديده تمام طيب تعالى دلوقتي نجرب ونشوف الكلام ده هيشتغل ولا لا هنيجي عندنا هنا وهنزله دلوقتي عند 800 اهو اول ما هيوصل عند 800 هيبدا اهو بالمنظر ده ان هو يشتغل عندك ايه اللي اشتغل عندك ببساطه هو الكود اللي قدامك ده تعالى دلوقتي ننزله عندنا عند 600 اهو بص اول ما نزل عندي عندي 600 بدا الكود الاول اللي هو اللي قدامك ده هو اللي يشتغل تمام بالمنظر اللي قدامك ده اهو بالمنظر اللي قدامك ده طيب قبل ما ندخل في مثال عملي فهمنا الفكره كلها في شويه حاجات المفروض ان انت تكون عارفهم عن الميديا فتعال دلوقتي لما نعمل عندنا هنا مثلا اتش و ونكتب ف هنا مثلا اي كلمه ونيجي عندنا هنا بص يا معلم دلوقتي انت في البراوزر بتاعك تعال كده لما نقفل عندنا هنا كل حاجه دلوقتي في البراوزر بتاعك في عندك حاجه اسمها برينت البرنت دي تعال كده انت بتجيبها من الكنترول بي او في الماك اسمها الكوماند بي تمام بتجيب لك هنا البرنت انت ممكن من خلال الميديا تتحكم في شكل العناصر بتاعتك اللي هتظهر في البرنت يعني مثلا دلوقتي الكلمه اللي قدامك هنا لونها اسود انا ممكن اقوللك انا عاوز ان لون هيكون احمر في البرنت فقط مش في الصفحه بتاعتي لا في البرنت فقط ف باجيلك هنا وبكتب عندك هنا ميديا وبقول لك في البرنت تمام في البرنت اللي هيحصل بتفتح عندك اقواس وبتكتب عندك الكود اللي انت عاوزه ممكن اقول لك دلوقتي عاوز ان الاتش 1 مثلا يكون الكلر بتاعها مثلا باللون الاحمر مثلا يعني فتعال دلوقتي لما نبدا ان احنا نشوف الكلام ده هنيجي عندنا هنا وهنعمل عندنا ريلود هل لونها احمر لا لونها مش احمر امال هيظهر فين اللون الاحمر اللون الاحمر هيظهر عندك هنا في البرنت لما بتفتح عندك البرنت بتلاقي عندك ان التنسيق اللي انت كتبته ظهر عندك هنا فقط ف ببساطه انت بتكتب عندك ميديا وبتكتب عندك برنت وبتكتب عندك التنسيقات اللي انت عاوزها تظهر عندك في البرنت ولكن خلي بالك انت لما بتكتب عندك مقاس المقاس اللي انت بتكتبه ده مثلا وليكن ماكس ويتس زي ما عملنا من شويه لما قلتلك من شويه ان الماكس ويتس 600 بيكسل دي كان معناها ايه دي كان معناها ان التنسيق ده هيظهر عندك في كل مكان عرضه 600 بيكسل سواء بقى المكان ده كان شاشه او كان برنت او ايا يكن اه طيب يعني ايه الكلام ده يعني دلوقتي انا لو جيت لك هنا مثلا وعملت لك ريلود والشاشه نفسها كان عرضها اقل من 600 فهيبقى التنسيق ده ان هو يظهر عندك ظهر عندك فين ظهر عندك في الشاشه طيب تعال دلوقتي لما نفتح عندنا البرنت اول ما هتفتح البرنت البرنت عندك هنا العرض بتاعها اقل من 600 فظهر برض عليها التنسيق بتاعك ليه لان انت محددتش ان التنسيق اللي انت عاوزه ده انت عاوز ان هو يظهر في الشاشات فقط ولا في البرنت فقط فعلشان تحدد انت ممكن ان انت تيجي عندك هنا وتكتب عندك كلمه سكرين يعني شاشه وطبعا بتفصلها بكلمه اند طيب يعني ايه السطر اللي انا كتبته ده انا بقول لك ان انا عاوز التنسيق ده يظهر في الشاشات اللي عرضها اقل من 600 طيب تعال دلوقتي نشوف هنحاول ان احنا نقلل الشاشه عندنا اقل من 600 فهن الاقي ان التنسيق ده ظهر عندنا ظهر فين ظهر في السكرين طيب تعال دلوقتي نجرب عندنا في البرنت ونفتح عندنا هنا البرنت فمش هنلاقيها ظهرت ليه مش هنلاقيها ظهرت لان انا محدد هنا ان هي سكرين طيب لو انا بدلتها مثلا بكلمه برنت لو انا جيت عندك هنا وبدات ان انا اصغر مش هتظهر عندك برغم ان العرض اللي قدامك هنا ده اقل من 600 ولكن هي ماظهرتش لان انا محدد ان هي برنت طيب تعال دلوقتي لما نفتح عندنا البرنت هنفتح عندنا دلوقتي البرنت هنلاقيها دلوقتي ان هي ظهرت عندك ليه ظهرت لان ببساطه انت محدد ان هي برنت طيب حلو جدا جدا الكلام ده طيب هنبدا دلوقتي ان شاء الله نعمل مثال عملي يفهمنا الفكره كلها المثال ده هيكون عباره عن تصميم بسيط بيكون له شكل معين لو اتفتح على لاب توب وشكله بيتغير لو اتفتح على تابلت وشكله بيتغير اكتر لو اتفتح على موبايل طيب الاول كده ازاي اعرف مقاسات الموبايل ومقاسات التابلت ومقاسات اللاب توب ومقاسات كل الشاشات بتاعتي ببساطه انت ممكن ان انت تبحث او ان انت تروح على اللينك اللي انا هسيبه لك ده ان شاء الله ف هو هنا بيقول لك ان انت لما بتكتب عندك ماكس ويتس 600 بيكسل دي معناها الفونز او الموبايلات او الشاشات اللي عرضها اقل من 600 طيب وبالنسبه للتابلت قال لك ان التابلت بتكون 768 طبعا على فكره في موبايلات عرضها بيكون اقل من ال 600 وفي عندك تابلت عرضها بيكون اقل من ال 768 او اكثر هو هنا بيجيب لك المتوسط تمام وعندك هنا الشاشات الصغيره شويه زي اللاب توب والحاجات دي بيكون العرض بتاعها 992 وعندك هنا الشاشات الكبيره تمامك تكون 1200 وطبعا عندك الشاشات على فكره 1400 بيكسل وعندك حاجات ثانيه ومقاسات ثانيه مختلفه ممكن على فكره ان انت تجيب المقاسات دي بنفسك عندك من البراوزر بتاعك بان انت تيجي عندك هنا كليك يمين ثم انسبكت وتيجي عندك هنا على العلامه دي تعال كده بس لما نوسع الدنيا شويه وتيجي عندك هنا هي هتكون عندك هنا على ريسبونسيف مممكن ان انت مثلا تجرب الايفون 12 برو فهقولك هنا ده العرض بتاعها 300 190 وممكن ان انت مثلا تجرب الجلاكسي فولد مثلا فهتلاقي 280 ممكن ان انت تجرب عندك كل الاجهزه اللي انت عاوزها ممكن ان انت تجرب مثلا شاشه كبيره شويه تمام وبراحتك جرب الشاشات اللي انت عاوزها واشتغل براحتك تمام طيب تعال دلوقتي لما نعمل عندنا تصميم بسيط هنيجي عندنا هنا وهنعمل عندنا ديف هندي لله كلاس هنسميه بيرنت وجوه الدف ده هنعمل عندنا مجموعه من الدفات هيكونوا ابناء ل الديف ده فكل واحد فيهم هياخد عندك كلاس هنسميه ايتم وهنكتب جواه مثلا كلمه ايتم تمام وكرره مثلا بتاع دول لاثه ا اربعه خمسه سته يبقى انا دلوقتي عندي هنا ست ابناء وكلهم جوه الاب بتاعهم ده هنيجي عندنا هنا وتعال كده بس الاول لما نفتح عندنا الكلام ده كده هنجيب دلوقتي البيرنت الاب بتاعهم وهقول لك انا محتاج ان انا ادي له ديسبلاي فيليكس علشان يجوا جنب بعض وكمان هعمل ما بينهم مسافات يبقى هجيب الجاب واديله مثلا 10 بكسل جاب وممكن نجيبهم في النص فهقولك دلوقتي جاست فاي كونتنت سنتر ممكن تعمل الكلام ده او ما تعملوش على فكره يعني كل الكلام ده براحتك طيب هنجيب دلوقتي الايتم وهقولك الايتم ده اللي هو ايه اللي هو كل الابناء اللي جوه عندك هندي لهم دلوقتي باك جراوند مثلا باللون الاحمر تمام علشان نشوفهم وهدي لهم دلوقتي طول وعرض وليكن طول مثلا 200 بيكسل ومثلا عرض تعال كده لما نكتب عندنا عرض مثلا 150 بيكسل بالمناسبه انا ممكن ما استخدم الويتس وممكن استخدم الفيليكس بيزس ولكن علشان في ناس ناسيه الفيليكس بيزس وانا مش عاوز اصعب الدنيا وعاوز ان انا اركز على الريسبونس ف فقط تمام طيب دلوقتي ده الشكل بتاعي اللي هيظهر فين هيظهر في كل مكان انا عاوز دلوقتي ان انا لما افتح الشكل بتاعي على اللاب توب يظهر عندك هنا ست ايتمز بالمنظر اللي قدامك ده لكن لو فتحته مثلا على تابلت ها لو فتحته على تابلت عاوز مثلا ان يظهر عندي مربعين بدل ما يكون عندك سته بالمنظر ده لا يكونوا مربعين مربعين وفي الموبايل مثلا هيكون عندك مربع واحد فقط تمام طيب هنبدا دلوقتي بالموبايل افضل سيناريو ان انت تبدا عندك بالمقاس الصغير فما اكبر فما اكبر تمام طيب هنمسك عندنا دلوقتي الميديا وهقول لك دلوقتي جيب لي اصغر شاشه فهقولك دلوقتي جيب لي ماكس ويتس مثلا 600 بيكسل بالمناسبه انت ممكن ان انت تستهدف شاشه اصغر من كده ده براحتك تمام طيب انا هقول لك جيب لي الشاشات اللي اقل من 600 وعاوز بدل ما العناصر تكون جنب بعض كارو كصف بالمنظر ده لا انا عاوزهم ان هم يكونوا فوق بعض يعني الفيليكس دايركشن بتاعهم هيتحول من كونو رو ل كونو كولون شرحنا على فكره الموضوع ده قبل كده فهقولك دلوقتي جيب لي البيرنت لو انت مش فاهم ركز وهفهم ك هقول لك دلوقتي جيب لي البيرنت وبعد كده هقول لك جيب لي الفيليكس فيليكس اهو الفيليكس دايركشن وبعد كده الفيلكس دايركشن اصلا بتكون واخده عندك رو يعني كانك دلوقتي كاتب عندك هنا فيليكس دايركشن رو هي كده كده بتاخد عندك رو فسواء انا كتبتها او ما كتبتها هي كده كده بتاخد عندك رو طيب انا هجيل لك هنا واخليها عندك كولون يعني عمود يعني بدل ما تكون عندك صف جنب بعض لا هتكون عندك فوق بعض طيب دلوقتي انا جبتهم فوق بعض وبعد كده وبعد كده عاوز دلوقتي ان عرض كل ايتم في حاله الموبايل يكون 100% ياخد عندك 100% من عرض الشاشه بتاعتك فجي لك هنا على الايتم واقول لك دلوقتي خدي ويتس 100% طيب تعال دلوقتي نشوف ايه اللي حصل انا دلوقتي رحت على البيرنت وحولت الفيليكس دايركشن بتاعه من كونرو خلي بالك هو المفروض ان الديفولت بتاعه الفيلكس دايركشن المفروض ان هي بتكون رو فسواء انت كتبتها او مكتبتهاش هي كده كده بتكون رو رو يعني صف الصف ده بيظهر امتى الصف ده بيظهر في كل الحالات انا جيتلك هنا وقلتلك ان انا عاوز حاله الموبايل فقط يتحول عندك البيرنت من كونو فيلكس دايركشن رو ل كونو فيليكس دايركشن كولون فين في الموبايل فقط وبعد كده وبعد كده روحلي على كل الايتمز وخليلي العرض بتاعهم من ويتس 150 بيكسل لا خليه لي هنا ويتس 100% ده هيتنفذ امتى ده هيتنفذ في الموبايل فقط يعني بص في الموبايل فقط اهو في الموبايل فقط غير كده الكود ده مش هيتنفذ اهو غير كده الكود بتاعك ده اهو مش هيتنفذ طيب تعال دلوقتي نجيب عندنا التابلت فهقولك دلوقتي جيب لي المين ويتس اقل عرض المين ويتس المين ويتس عاوزها تبدا من بعد ال 600 فهقولك دلوقتي ال 600 وواحد بيكسل طيب لحد ايه هنكتب عندنا هنا اند وهقول لك مثلا مثلا ان الماكس دس 992 بكسل بالمناسبه انا ممكن استهدف الشاشات الاصغر شويه اللي هي 768 ولكن انا عاوز استهدف الشاشات اللي هي بعرض 992 طيب هتعمل فيهم ايه هقول لك لا انا مش عاوز ان انا اعمل الكلام ده يعني انا مش عاوز ان الفيليكس دايركشن يكون كولون لا انا هخليه رو زي ما هو تمام تعالى كده هخليه رو زي ما هو ولكن بدل ما يعرضلك عندك هنا الست ايتمز لا انا عاوزهم يكونوا اتنين فقط طيب احنا عندنا حاجه اسمها راب عندنا حاجه في الفيليكس اسمها راب الراب دي انت لما بتديها عندك هنا للبرنت بتخلي العناصر دي تعمل راب او تعمل التفاف فتنزل عندك تحت فتعال كده لما نيجي عندنا هنا كل الكلام ده انا شرحته على فكره قبل كده في درس الفليكس بوكس هقوللك دلوقتي جيبلي البيرنت وخليلي الفيلكس راب تكون راب يعني تنزل او يتعمل لها التفاف بالشكل ده يبقى دلوقتي العناصر دي هتنزل عندك هنا ولكن انا عاوز ان هم يكونوا عنصرين فقط فتيجي عندك هنا على الايتم وتخلي العرض بتاعه 50% ممكن ان احنا مثلا نخليه 49 علشان المسافات وكده ف 49% بالمنظر اللي قدامك ده الكلام ده امتى الكلام ده في التابلت يعني ده في الشاشات الكبيره وهنا التابلت وهنا الموبايل بص متجاوب دلوقتي انا عندي هنا التصميم بتاعي متجاوب ده الموبايل بالمنظر اللي قدامك ده وده التابلت تمام بقى عندك هنا اثنين وعندك هنا الشاشات الكبيره براحتك اعمل فيها اللي انت عاوزه وبس كده اتمنى يا رب ان انتم تكونوا فهمتوا واشوفكم ان شاء الله في فيديو جديد وسلام عليكم