lecrture8

يعطيكم العافيه. اليوم حناخذ من أهم خصائص السي اس اس. حنتعرف على أهم خصائص السي اس اس. هل أي عنصر سي اس اس أنا بنشئه، سواء بي اتش 1، اتش 2، بتتذكروا اللي فاتت لما كنا الديف مثلا نعطيه هاي وباك جراوند كر، كان يظهر معي بشكل صندوق صح ولا لا؟ يعني لو أنا اجيت عملت مثلا ديف وحطيت بداخله جملة "لورم إيبسوم". ولما أجي هون على السي اس اس وأحكي له ديف أعطيه مثلا هاي 100 بكسل و 100 بكسل وباك جراوند كر مثلا هذا اللون. تمام؟ هل بمجرد ما أعطي اللون خصائص الهاي والويت والباك جراوند كر بيظهر معي بهذا الشكل؟ اللي هي مربع. هذا المربع تبع العنصر بنحكي عنه بوكس. سايزين. أي عنصر سي اس اس بيكون له بوكس سايزين. شو فكرة البوكس سايزين؟ بتحكي لي إنه أنا بقدر من خلال هذه الخصائص، فيها فيها مجموعة من الخصائص، من خلالها أنا بقدر أتحكم في العنصر نفسه، أتحكم في المحتوى اللي موجود بداخل هذا العنصر، أتحكم في المسافات ما بين العنصر والعنصر الثاني. تمام؟

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

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

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

نحن لاحظنا إنه أي عنصر أنا بنشئه. سواء بي، سواء ديد، اتش 1، اتش 2، ال. الزوايا اللي موجودين عندي عبارة عن مربع. صح ولا لا؟ طيب كثير بنشوف أشكال لكارد أو شكل لصورة مثلا مربع ولكن لها الحواف تبعتها مستديرة شوية. فهون بتيجي خاصية اسمها بوردر ريديس. بتخلي خليني أتحكم في الحواف اللي موجودين معي. بوردر ريديس. بوردر ريديس بتحكي لي نفس الشيء. لو أنت قلتي له اثنين بكسل، أربعة بكسل. هذه إيش معناتها؟ من التوب ومن البوتوم اثنين بكسل. ومن الليفت ومن الرايت أربعة بكسل. فتعال نعمل ريفريش. شفتوا إيش صار؟ هذه الحافة مختلفة عن هذه الحافة قيمتها. صح؟ لأنه أخذ على حسب الترتيب اللي موجود معي. لو أنا ضفت قيمة ثانية. قلت له 10 بكسل. حيصير معناتها توب اثنين، رايت أربعة، بوتوم 10. طب بضل الليفت بياخذها نفس قيمة الرايت اللي هي أربعة. فتعال نعمل ريفريش بهذا الشكل. شفتوا هذه اختلفت أكبر صارت واضحة. هذه النقطة. إذا بوردر ريديس بستخدمها عشان أعمل انحراف أو إنه يصير عندي شكل الزوايا شوية مسترة. شغلة مهمة جدا. بحكي لي كل ما كبرت قيمة البيكسلات في البوردر ريديس بيكبر معي الانحراف. وهي لاحظتوا هان قلت له 10 بكسل. فهي عندي هان قيمة الزاوية صارت أكبر من هان ومن هان. صح ولا لا؟ كثير بنشوف أشكال بتكون عبارة عن شكل دائرة مثلا. إيج معروضة بشكل دائرة. لو أنا اجيت قلت له هان هيج. حطيت أي صورة من اللي موجودين. تمام؟ وجيت وصلت للسوق. طبعا حتشوفوا إنه الوضع الافتراضي تبعتها حتظهر معي بالطول والحجم الافتراضي تبعهم. ه هيك. فأنا بدي أروح أصغرها. فحصل هان للامج وأحكي له هاي مثلا 150 بكسل. في وجه مثلا 100 بكسل. تعال نعمل ريفريش. هي الهاي والويث لها اختلفوا معي. تمام؟ هلقت بحكي لي لو أنت في عندك شكل معين سواء ديف، صورة، بوتن، أي شكل من الأشكال اللي نحن أخذناهم أو أي عنصر من العناصر اللي أخذناهم. وبدك يكون شكل دائرة. لازم تعملي شغلتين. أول حاجة تعطيه بوردر الريديس 50%. شغلة ثانية إنه يكون الهاي والويث لهم نفس القيمة. عشان يطلع نص القطر بالضبط زيه. لأنه لو كانوا القيم مختلفين حيطيني شكل بيضاوي مش شكل دائرة. تمام؟ فحاجي هنا أحكي له بوردر ريديس 50%. هلا بدي أخليهم الهاي 150 والوث 100. وشوفوا كيف الشكل حيكون بهذا الشكل. هي شكل بيضاوي. لكن لو خليته نفس القيمة. لو قلت له هون 150. تمام؟ هلقت حيعطيني شكل دائرة بالضبط بهذا الشكل. إذا أي شكل بتشوفوه بهذا الشكل دائرة. سواء صورة أو ديف أو بوتن أو أي حاجة. بيكون عن طريق خاصية بوردر ريديس 50%. وبشرط إنه الهاي والويت يكون عندي نفس القيمة. إذا أنتم بدكم إياه بشكل بيضاوي. ساعتها بتكون الهاي ولوت مختلفة. تمام؟ لحتى الآن خاصية البوردر والبوردر ريديس. هذول الشغلتين بيعتمدوا على مبدأ التوب، رايت، بوتوم، ليفت. ومبدأ الاتجاهات. تمام؟ ممتاز جدا.

نيجي هل نحن تو قلنا إنه أي عنصر أنا بعمله. هي خلصنا من قصة البوردر. حدود العنصر. نيجي نفوت هالقطعة لجوا. حكينا إنه المسافة ما بين المحتوى والبوردر بنحكي عنها بادين. هوامش داخلية. تمام؟ إيش يعني؟ لو أنا جيت أطلعت على الف اللي موجود هان. هي الديف الموجود هون. إذا بتلاحظوا إنه الكلام ملزق بالضبط في البوردر. ما في أي سبيس. صح ولا لا؟ طبعا هذا الشكل مزعج بالنسبة لي. مش مرتب ومش التنسيق اللي أنا بدي إياه. فبيحكي لي بتقدرِ إنك تعملي مسافات ما بين المحتوى وما بين الحدود عن طريق خاصية اسمها بادين. يعني لو أنا اجيت على الديف هان وحكيت له بادين. البادين حتستنى مني إنه أنا يا إما أعطيها قيمة واحدة. يا إما أحدد الاتجاهات زي ما تو قلت. هلا لو أنا قلت له بادين 20 بكسل. هذه معنا تعمل لي 20 بكسل من كل الاتجاهات. تعال نعمل ريفريش. شايفين إيش صار؟ هي هذه المسافة 20 بكسل. وهي هذه المسافة 20 بكسل. وهي هذه المسافة 20 بكسل. حدا لاحظ شيء؟ >> إيه؟ >> يعني من تحت مقاص؟ >> لا. >> لا. زاد؟ >> ممتاز جدا. زاد الحجم اللي موجود معنا. عندنا حنوضح هذه النقطة. وهذا الشيء مش صح. إنه أنا لما أعطيه بادن بيزيد عندي العنصر عن الحجم تبعه. صح ولا لا؟ لأنه حيصير تداخل مع العنصر اللي بعده. وعناصر حتدخل على بعض. عناصر مش حتبين. يعني تخيلوا لو أنتم عندكم بوتون صغير هنا. وأنا عملت هذه النقطة. مش حيبين. حيغطي عليه. صح ولا لا؟ حنحكي في هي الشغلة. اللي بدنا نحكيه هلقت إنه البادين هي مسافات داخلية. بس أنا بدي هالقد تشوف إنه صار عندي مسافة ما بين المحتوى وما بين الحدود. شفتوها؟ اللي هي هذه المسافة. هذه 20 بكسل. هلقت أنا لما قلت له بادين 20 بكسل. قلنا هذه عبارة عن البادين من كل الاتجاهات. لو أنا بدي من اتجاه معين. بحكي لي في عندي بادين توب. بتقدرِ تعطيه القيمة اللي بدك إياها. في بادين رايت. هي شايفين؟ بادين توب، بادين رايت، بادين بوت، بادين ليفت. عندي أربع اتجاهات. ها متى بستخدمها؟ في حال أنا بدي اللي من التوب قيمة. من الرايت قيمة. من البوتوم قيمة. من الليفت قيمة. فبستخدم الخاصية المختصرة لهم. إذا أنا بدي إياهم كلهم من اتجاه واحد. بنحكي بادين. تمام؟ يعني لو أنا قلت له بادين 20 بكسل من كله. كمان بحكي لي لو أنت ضفتي زي هيك. بادين 20 بكسل، 40 بكسل. إيش بحكي لك؟ نحن تو قلنا التوب، رايت، بوتوم، ليفت. هذه معناتها إنه من التوب ومن البوتوم 20. ومن الليفت ومن الرايت 40. لو ضفت قيمة ثانية. 50 مثلا. هذه إيش حيصير معناتها؟ التوب 20. الرايت 40. البوتوم 50. طب بضل الليفت. بياخذها نفس قيمة الرايت اللي هي 40. واضحة؟ هي بالنسبة للبادلين. هوامش داخلية. اللي هي المسافات ما بين الحدود وما بين الكونتن. نيجي للمارجن. مارجن هوامش خارجية. شو يعني هوامش خارجية؟ يعني المسافة ما بين كل عنصر والعنصر الثاني. سواء كان هذا العنصر جنبه أو تحته. نيجي هلقيت حكينا للمارجن. قلنا المارجن هوامش خارجية. شو يعني هوامش خارجية؟ اللي هي المسافة ما بين كل عنصر والعنصر الثاني. سواء كان العنصر جنبه أو كان تحته. هلقت أنا عندي هون عملت اثنتين ديف تحت بعض. زي ما أنتم شايفين. تمام؟ لو أنا اجيت قلت له مارجن. بنفس المبدأ اللي تو حكيناه. إنه هذه المارجن اختصار لمارجن توب، مارجن رايت، مارجن بوتوم، مارجن ليفت. لو أنا استخدمت الخاصية المختصرة. قلت له مارجن خمسة. أو خليها 25 بكسل. شو يعني 25 بكسل؟ يعني من كل الاتجاهات 25. فتعال نعمل ريفريش. شفتوا إيش صار؟ هي أخذ من الليفت هذا 25. اللي من الليفت. وهي أخذ من البوتوم. وهي أخذ من الرايت. بس عشان في سكرول مش مبين. هيه عفوا من التوب. طبعا اللي بضل عندي هان لأنه عندي المساحة كلها فاضية. لأنه الديف بلوك المنت زي ما أنتم عارفين. فهي ماخذة المساحة كلها. فعشان ك المساحة هون أكبر من باقي الاتجاهات. تمام؟ إذا هذه المسافة بين تو شفتوا كانوا العناصر ملزقين في بعض. صح ولا لا؟ بمجرد ما قلت له مارجن راح عمل لي المسافات هذه. اللي هي مسافة ما بين العناصر. لو أنا اجيت عملت بوتون. لأنه أنتم عارفين إنه البوتون ان لاين المنت. صح ولا لا؟ بدي أحكي له هي بتون موجود بداخله محتوى مثلا سنت. هي وهي كلمة سنت. تمام؟ وبدي أجي أكررهم زي ما متفقين. شفت الت السهم لتحت. هي ثلاثة بتون. كلنا عارفين إنه البوتون لاين المنت. حيجوا معي على نفس السطر بهذا الشكل. ممتاز. هيت هذه هي المسافة الافتراضية اللي ما بين كل بتون وبوتون ثاني. عشان أتحكم فيها بقدر أصل للبوتون وأحكي له مارجن. هلقت لو أنا بدي بس مسافة ما بين البوتون هذا والبوت هذا. بديش إياه من فوق ومن تحت. إيش أقول له؟ يا مارجن ليفت يا مارجن رايت. ممتاز. هي مثلا قلت له مارجن ليفت 30 بكسل. وتعال نعمل ريفريش. زي ما أنتم شايفين توسع المسافات. مين يحكي لي ليش نزل الزر لتحت؟ >> ممتاز. لأنه الصورة مع الام مع البوتون جايين معي على نفس السطر. هم لأنهم كلهم عناصر ان لاين. فعشان نزل المسافة هذه اللي أنا عملتها. هي هذه المارجن ليفت اللي ما بين العناصر الموجودين معاي. لحتى الآن الأمور تمام بالنسبة للبوردر والبادين والمارجن. تمام؟

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

طيب نرجع حكينا خطوة للي كنا بدنا نحكي فيه تو. لاحظنا إنه أنا الديف معطياها هاي ووتوي معينين 100%. صح ولا لا؟ وجيت ضفت عليه البادين. طبعا أنا حضيف للكل عشان نعمل خطوة بخطوة. بدي أميز الدف الأولى عن الدف الثانية. ركزوا معي عشان توضحكم السورة. هي عندي اثنتين ديف. تمام؟ الأولى بدي أعطيها كلاس. بدي أسميه ديف 1. والثانية بدي أعطيها كلاس. أسميه ديف 2. وحاجي هون كستايل أحكي له دوت ديف 1. هاي 100 و 100 وباك جراوند هذا اللون. والديد الثانية بدي أحكي له دوت دي 2. أحكي لها هاي نفس الحاجة 100 و وباك جراوند كر. تمام؟ وعارفين على شانهم دب حيجوا معي تحت بعض بهذا الشكل. ممتاز. هلقت نحن تو اتفقنا. بس خليني أكبرها شوية. ولا خليهم زي ما هم. مش مشكلة. اتفقنا على إنه المسافة بين الحدود وما بين ال المحتوى عبارة عن شو؟ >> بادين. صح ولا لا؟ بدي أعطيه بادين 15 بكسل. وبدي أعطي الديف بالثانية برضه بادين نفس الحاجة 15 بكسل. تعال نعملش. بهذا الشكل. شفتوا إيش صار؟ >> استنى. أنا استني. ما طبقت اثنتين. لازم يكبر الحجم تبعهم بهذا الشكل. اللي لاحظناه إنه العنصر بطل 100 بكسل في 100 بكسل. لما أعطيته البال. صح ولا لا؟ كبر الحجم اللي موجود معي. وحكينا إنه هذا الشيء مش صح. لأنه لو أنا كل عنصر بدي أعمله وأعطيه قيمة بادين وزي هيك يكبر الحجم تبعه. بالتالي العناصر حتدخل على بعض. في عناصر حتختفي. عناصر حتيجي فوق عناصر. صح ولا لا؟ فعشان هيك اجت عندي خاصية اسمها بوكس سايزين. حدا بيعرف شو ها الخاصية بتعمل أو إيش القيم اللي بتاخذها؟ طيب تمام. البوك بتحكي لي أنا معاي قيمتين. بوكس سايز معي قيمتين. قيمة افتراضية الي اسمي كونتنت بوكس. يعني لما أعمل ريفريش ولا حيصير أي حاجة. لأنه هي القيمة الافتراضية تبعتها. تمام؟ إيش فكرتها؟ بتحكي لي لما أنا العنصر هو باي ديفولت كل العناصر قيمة البوكس سايزين فيهم كونتنت بوكس. بمعنى لما تضيفي بادين أو بوردر. يعني لو أنا جيت ضفت هان بوردر. قلت له اثنين بكسل من نوع سوليد لون أحمر مثلا. تعال نعمل ريفريش. شفتوا إيش صار؟ كبر كمان شوية. اللي هم الاثنين بكسل اللي أنا ضفتهم على البوردر. فبحكي لي إنه البوكس سايزين القيمة الافتراضية لأنها كونتنت بوكس لكل العناصر. بمعنى إنه العنصر الهاي والويت اللي أنا معطيه إياه. لما أجي أضيف عليه بادل وأضيف بوردر. بخلي الهاي والويت زي ما هم. وبروح بضيف عليهم قيمة البوردر وقيمة البادين اللي أنا أعطيته إياه. طيب ليش ما حكيت مارجن؟ أنا قلت بادين وبوردر. برايكم المارجن من ضمنه ولا لا؟ وليش؟ >> لا. ليش؟ لأنه خارج العنصر. ممتاز. لأنه المارجن خارج العنصر. فما بتأثر في قيمة البوكس ساجن. وهي نقطة كثير مهمة. إذا البوكس ساجن بس بتأثر في قيمة البادين والبوردر. القيمة الافتراضية أو الوضع الافتراضي للعناصر قيمتها كونتنت بوكس. بمعنى إنه إيش أنت بتعطيه بوردر أو بادين. بروح بضيفهم على الهاي والو. فبالتالي بيكبر عندي العنصر. تمام؟ طبعا لما بيكبر العنصر. قديش بكبر؟ هلا أنا حكيت له هدين 15. هل هو كبر بس 15؟ شوفوا إيش اللي صار. عشان أوضح لكم إياها. هلقت نفرض عندي. هي عندي العنصر. تمام؟ الهاي تبعه 100 والوي تبعه 100. اللي هو الكود اللي نحن كتبناه. هيه هاي 100 وت 100. اجيت قلت له بادين 15. هلقت فعليا إيش اللي صار؟ مش بس 15. ضاف صح ولا يفترض 30؟ ليش 30؟ لأنه من الاتجاهين. أنا بضيف. هلقت مش هذا هو الويت؟ ومش هذا هو الهاي؟ وأنا تو حكيت إنه الاتجاهات عندي توب، رايت، ليفت. عفوا. وهي عندي هان رايد. وهي عندي هان بوت. لما حكيت له بوردر 15 بكسل. بادل 15 بكسل. قلنا 15 يعني من كل الاتجاهات. صح ولا لا؟ فالوي بدل ما صار 100 كم صار؟ >> 130. والهاي نفس الشيء صار 130. ليش؟ لأنه الوي حياخذ قيمة البوتوم وقيمة التوب 15 15. والهاي حياخذ قيمة الليفت وقيمة الرايت. فالعنصر أضاعف الحجم تبعه. زاد الحجم. فبالتالي هذا الشيء قلنا مش صح. ليش؟ لأنه حيكبر عندي العنصر ويصير تداخل على عناصر. عشان هيك اجت خاصية اسمها بوكس سايزين. اللي بتحكي لي في عندي لها قيمة اسمها بوردر بوكس. هيها. بدل الكود كونتنت بوكس. في عننا قيمة اسمها بوردر بوكس. وتعال نعمل ريش. إيش صار عندي؟ ظل العنصر الوضع. هي لاحظوا. الأولى والثانية. الثانية بدون ك. بدون بوردر بوكس. ماخذة الوضع الافتراضي اللي هو كونتنت بوكس. الأولى بوك ساز بوردر بوكس. بمعنى خلي لي الهاي والوث زي ما هم. وايش في قيم للباد وللبوردر. احسبهم من الهاي والوث. فانا هون بضمن إنه الهاي والوث يضلوا زي ما هم. أحافظ على الحجم تبع العنصر من ناحية الطول والعرض. واضحة لكم هي النقطة؟ الأولى معها بوكس سايزن بوردر بوكس. الثانية معها شيء؟ بما إنه معها شيء يبقى هي ماخذة القيمة الافتراضية اللي هي كونتنت بوكس. بمعنى إنه كونتنت بوكس. ضف لي البوردر والبادين على الطول والعرض تبع العنصر. الأولى لما حكيت له بوكس سايزين بوردر بوكس. بمعنى خلي لي الطول والعرض زي ما هو. واضحة؟

طيب مين يذكرنا مين أخذنا عنصر بقدر من خلاله أصل لكل عناصر الصفحة؟ ممتاز جدا. لأنه يفترض كل عنصر أنا بنشئه وبدي أعمل عليه بادين وبوردر. أضيف عليه خاصية البوكس سايزين بوردر بوكس. صح ولا لا؟ كل عنصر عشان ما يزيد عندي الطول والعرض. فبيحكي لي بدل ما أنت تصلي لكل عنصر بشكل مباشر وتزيدي سطر من الكود في كل واحد فيه. بتقدري تسهلي على حالك وتصلي لمين؟ لليونيفرسال. صح ولا لا؟ مش اخذنا اليونيفرسال اللي هي النجمة. اللي هي عبارة عن كل عناصر الصفحة. صح ولا لا؟ يعني أنا لما بحكي له هيك يونيفرسال. أنا واصلة للبي. وللامج. وللبوتن. ولكل شيء. فعشان هيك بحكي لي قاعدة عامة. أول ما تمسكي تصممي الويب تبعنا. باجي بحكي له بوكس سازن بوردر بوكس. ليش؟ يعني كل عنصر في الصفحة تبعتي خلي لي له البوكس هازين بوردر بوكس. بمعنى احسب الباد والرجن من ضمن القيم تبعت الهايدين والبوردر. من ضمن الهاي وال تبع هذا العنصر. تمام؟ كمان شغلة مهمة جدا. بحكي لي إنه في عندي بعض العناصر زي مين؟ خليكم معي. قبل ما أحكي هذه المعلومة. ما أخذنا قبل هيك يو ال؟ كنت أعمل ال اي. تمام؟ وعلى السريع بس أحط أي. هي الثلاثة ال اي. تعال نبلش. إيش بتلاحظوا؟ إيش الفرق بينها وبين باقي العناصر؟ العناصر اللي فوق بادله معي بالضبط من اليسار لليمين بدون أي سبيس. صح ولا لا؟ ال اي سيب لي المسافة هذه اللي بادية. وبعدين بادية. طبعا مش منطق إنه أنا صفحة الويب تبعتي ناس بادية من اليسار وناس فراغ. صح ولا لا؟ >> فعشان هيك بحكي لي إنه في عندك بعض العناصر ماخذة بادين وماجن باي ديفولت. القيمة الافتراضية. لأنه في معها شوية بادين وشوية مارجن. عشان تشيلي هذا الكلام. أعملي بادين صفر ومارجن صفر. وين؟ في اليونيفرسال. بادين صفر ومارجن صفر. إيش يعني بادين صفر ومارجن صفر؟ يعني خلي لي العناصر كلهم بدون بادين وبدون مارجن. لما أنا بدي بادين وماجن بروح بصل للعنصر نفسه. بعطيه قيمة البادل والمارجن اللي أنا بدي إياه. عشان هيك هذا الكود حيكون ثابت معي في كل مشروع أنا بشتغله. تمام؟ في عننا لقدام حناخذ كثير أكواد تكون ثابتة معي في كل مشروع. فبيحكي لي بدل ما أنت في كل مرة تكتبي الأكواد هذه تتكرر معك في كل مشروع. زي مثلا مجلد الامج. صح؟ في كل مشروع أنا حأنشئ مجلد إيج. في كل مشروع حأنشئ مجلد اسمه اتش تي ام ال بيجز. في كل مشروع حأنشئ مجلد اسمه سي اس اس. موجود بداخله ملف الستايل. واستدعي لينك ريل ستايل شيت في صفحات الأش. صح ولا لا؟ فعشان هيك بحكي لي عشان مش بحكي هو. إحنا هي نن خطوة بنعملها. إنه الأشياء اللي بتتكرر معي. يعني أي شيء بناخذه منه لاخر الكورس وبحكي لكم أشياء بتتكرر معنا. جهزوا ملف لها وحطوه بداخل هذا الملف. عاده الاسم المتعارف عليه ما بين المبرمجين اسمه ستارتر. عليكم مجلد اسمه ستارتر. تمام؟ أورجيكم إياه على السريع. هي تمام؟ هيه مجلد اسمه ستانتر. لو اجيتوا أنتم فتحتوه. حتلاقوا في أغلب الملفات اللي بتتكرر معي في كل مشروع. يعني هذول مشاريع. يعني نحن أوريدي مشتغلين فيها. مثلا هذا المشروع هيه. إنه أنا في عندي مجلد الفونت. مجلد السي اس اس. مجلد الويب فونت. عن حنأخذه تبع الأيقونات. مجلد الاتش تي ام ال بيج. فبدل في كل مرة ما أنا أكتب هذا الكود. بحكي لي جاهزية في ملف اسمه ستارتر. بصير أي مشروع أنا بنشاه. آخذ هذا المجلد كوبي بيست. وبعدين أكمل عليه باقي خطوة. زي مثلا الهيدر. الهيدر وجزئية الناف اللي موجودة بداخله. واليو ال والال اي. هذول حنشرحهم اللقاء الجاي. ثابتين معي تقريبا في كل مشروع. شكل الهيدر ثابت معي تقريبا في كل مشروع. بس بيكون بيكتب التنسيق تبعه. قد إيش عدد اللينكات. الأمور. فبدل ما أنا في كل مرة أكتب هذا الكود. لا بجهزه في ملف ستارتر. بأخذه كوبي. بس. نفس الحاجة. فكرة اليونيفرسال هذه ثابتة معي في كل مشروع أنا بدي أشتغله. فعشان هيك من اليوم جهزوا ملف اسمه ستارتر. بده يكون موجود فيه مجلد الاتش تي ام ال بيجز. مجلد الامجز. مجلد السي اس اس اللي موجود بداخله ملف الستايل. والملفات الثانية اللي حنتعرف عليهم. مجلد للفونت للخطوط. تمام؟ بتصيروا أي مشروع بدكم تشتغلوه. تاخذوا كوبي بيست للاشياء اللي موجودة بداخل هذا المشروع. وتكملوا عليها. بدل ما صراحة تجهيز بيئة المشروع ممكن تاخذ من وقتكم ساعة أو ساعتين. فأنتم بتوفروا على حالكم. بتكون أوريدي جاهزة عندكم في ملف الستار. لحتى الآن تمام؟ إذا وضحت أي خاصية البوكس سايزن. البادين. المارجن. البوردر. والبوردر ريديس. مين عنده أي سؤال فيهم؟ تمام؟

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

طيب حبعث هالايتا على الجروب. حابث على الجروب تاسك بسيط. معكم وقت 10 دقائق تعملوه. هيه عشان أتأكد إنه أمور البادنج والمارجن عندكم تمام. بعدين إن شاء الله نكمل. إن شاء الله. طيب نكمل. حيكون معكم المشروع الأول. حيكون معكم المشروع الأول عبارة عن ثلاث صفحات. هي الصفحة الأولى. تمام؟ هي الصفحة الثانية. الأباوت. هي الصفحة الثالثة. الكونتاكت. موجود >> تمام؟ حبعث لكم إياه كصور. أه. حنبدا نشتغل في كل جزئية لحال. تمام؟ بس مش حاشتغل فيه. يعني صراحة بكل التريكات اللي موجودة هنا. لا. أنا حأحكي الفكرة العامة. وإش الفكرة العامة والتريكات هذه أنتم حتشتغلوها. أول حاجة يفترض نعملها إنه نجهز مجلد المشروع تبعنا. صح ولا لا؟ اللي نحن أوريدي عارفينه. فحاجي هون على السريع بنفس ال المجلد. حأعمل مجلد جديد وأسميه. قلنا باسم المشروع. أوتيل. طبعا أنتم المفروض تجهزوا ملف الستارت وتاخذوه كوبي. بس أنا عشان أول مشروع حاخذه. حنشتغله مع بعض. حأشتغله معكم خطوة بخطوة. يفترض بداخل هذا المجلد. سريعا إيش أعمل؟ اللي هو المجلد. أول شيء اللي اسمه اتش تي ام ال بيجز. >> ممتاز. بعدين مجلد السي اس اس. بعدين مجلد الجي اس. مش حنستخدمه كثير. فخلص خليني أنا مش حستخدم. بس بدي أعمل الامجز. تمام؟ وإذا بدي أحتاج خطوط. بدي إياكم برضه في المشروع تستخدموه لنوع خط. كل واحد يختار النوع اللي بده إياه. فحأعمل هي المجلدات الأساسية. تمام؟ حاجي على السريع أفتح المشروع. إنك تعمل مسافات؟ >> لا. ما بينفعش أعمل مسافات بين؟ >> وين؟ >> مسافات هيك بين كل كلمة وكلمة. أه بينفع. أما مثلا إنه تصير مسافة كبيرة كثير. لا مش حيزبط. أصلا مش حيتسمى عندك الملف. حيعطيك إنه إعادة التسمية. أما بين كل كلمة وكلمة. هذه السباسز عادي. ما فيش فيها مشكلة. أما مسافة كبيرة اللي ما بزبط. هي عندي أوبن فولدر للمجلد اللي أنا شغالة فيه. هي اللي عملته أوتيل. تمام؟ هيني أنا بمشي خطوة بخطوة. عشان أول مشروع بس. حاجي هان يفترض إنه في الاتش تي ام ال بيجز. سريعا إيش أعمل؟ إندكس دوت أش تي أم أل. المشروع عندي مكون من ثلاث صفحات. يبقى حأنشئ مين كمان؟ >> أباوت دوت أش تي أم ال. بعدين كونتاكت دوت أش تي أم ال. ممتاز. على السي اس اس أحكي له ستايل دوت سي اس اس. لحتى الآن تمام؟ ممتاز. حاجي هلت على الاندكس. آخذ الكود العام اللي هو عبارة عن مع رقم واحد. هي جبنا الكود العام. بعد هيك إيش حنعمل؟ >> نربط الملف الاتش تي ام ال في السي اس اس. صح؟ هي اللينك ريل ست شيت. هي الاتش ريف في السي اس اس. في عندي هذا الملف. تمام؟ سريعا بدي أضيف شوية صور في هذا المجلد. برضه حبعث لكم صور للمشروع. طبعا أنا حبعث لكم صور. لكن أنتم بتقدروا تضيفوا الصور اللي بدكم إياها. من مواقع الصور اللي أخذناهم قبل هيك. بيكسا باي. بنترست. شتر ستوك. ريك. اللي بدكم إياه. هيني أنا حضيف شوية صور. تمام؟ هيك أنا جهزت المجلد. وحكينا تو إنه في عندي كود عام بستخدمه. اللي هو في اليونفرسال. أول شي خليني أحط بوكس بوردر بوكس. بادين صفر ومارجن صفر. تمام؟ لحتى الآن. طيب هلقيت بنبدأ نشتغل على خطوة بخطوة. نبدأ في صفحة الاندكس. كتحليل صفحة. إيش حأعمل؟ >> مين؟ فوتر. ممتاز. بداخل المين إيش أعمل؟ >> سكشن اثنين ثلاثة. صح ولا لا؟ فعلى السريع يفترض أجي على البدي أحكي له في عندي هيدر. والمين موجود بداخله ثلاثة سكشن. وبعد المين في عندي فوتر. وأصلا يفترض إنه الهيدر هذا مكرر معي في كل الصفحات. المفروض أجهزه وأخذه كوبي. بس في الثلاث صفحات صح ولا لا؟ طيب خليكم معي. حاجي هان على الهيدر. الهيدر اليوم مش حيطلع معي مرتب بهذا الشكل. إلا بس نفتح خاصية الديسبلاي. تمام؟ فإحنا حنأخذه في الأشياء اللي أخذناها لحتى الآن. ولما نشرح الخاصية بترجعوا للمشروع وبتضبطوا. يلا. إيش حنعمل في الهيدر؟ >> قبل يو اي؟ >> قبل؟ >> أنا بال أول لازم أقسم الهيدر عندي شيء على اليمين وشيء على اليسار. صح ولا لا؟ فحأعمل ديف يمين ودف يسار. حأشتغل فيف اليسار. إيش حيكون فيها؟ اطلع. اطلع كويس. فيها؟ >> أه. إيش هو حيكون؟ >> اتش. ليش؟ لأنه هذا اللوجو تاع الموقع. نحن قلنا اللوجو يا صورة يا محتوى. قلنا إذا كان محتوى لازم نضيفه اتش 1. متفقين؟ طيب الجزئية الثانية. دف باليمين. إيش حيكون في؟ >> يو ال. بداخلها ال اي. بداخلها الا a. صح ولا لا؟ لأنه هذول روابط. فحاجي هون على الهيدر أحكي له في عندي أول شيء اثنتين ديب. ديب أولى بدي أسميها الدب. بهذا الشكل. وديب ليش أعطيتها اسم كلاس؟ عشان تنسيقات هذه مختلفة عن تنسيقات هذه. فعشان أقدر أصل. هي ار ديف. الال ديف قلنا كان فيها لوجو عبارة عن اتش 1. وبدي أكتبها اتش بي اس. زي هيك. وكيف أخليها كابيتال؟ >> تكست ترانسفورم أبر كيس. تمام؟ نيجي على الار ديف. حكينا يو ال بداخلها الاي بداخلها اي. وبحط الكلام. هي هون. وحاجة على ال اي أكررها. في أباوت. في كونتاكت. صح؟ طيب تعال نعمل ريفريش هون على الموقع تبعنا. أه. أنا مش فاتحة. هي الاكس. هي اللغة. تمام؟ ظل علي جزئية. اطلعوا هنا. لما أنا في صفحة الهوم. الهوم ماخذة تنسيقات معينة. لما أروح على صفحة الأباوت. رابط الأباوت هو اللي ماخذ تنسيقات معينة. كيف أعمل عمل هذا الكلام؟ ركزوا معي. حأطبقه في الهوم. وأنتم بتطبقوه في الباقي. باجي هون على صفحة الهوم. نحن قلنا قبل هيك إنه لما أنا أكون في الصفحة. الاتشرف هان إيش حيكون؟ >> هاشتاج. ممتاز. وفي الأباوت هان إيش الاتشرف؟ >> اللي هو أباوت.

اوت دوت اش تي ام ال وفي الكونتك ايش حيكون كونتاكت دوت اش تي ام ال مضبوط. طيب باجي هنا بحكي بما اني انا في صفحه الهوم ماخذه تنسيقات معينه فبدي اجي هون اضيف كلاس متعارف عليه انه اسمه اكتف. بقدر انا اسميه اكس واي زد اللي انا بدي اياه ولكن المتعارف عليه انه اسمه اكتف. وباجي هون في السي اس اس ايش بقول له دوت اكتيف يعني نشوف لي العنصر اللي معه الكلاس اللي اكتف ومثلا نعطيه كل لون اورنج كمثال اعطيه باك جراوند كل لونها جراي باك جراوند كلر جراي مثلا رماده وايش في تنسيقات ثانيه بعطيه اياها.

هلقيت تعالوا نعمل ريفريش شفتوا ايش صار هيني في صفحه الهوم الهوم اخذت هذه التنسيقات. هل يفترض ايش اعمل؟ امسك كود الهيدر هذا زي ما هو نحن عارفين انه انا قلت مش ح مش حاشتغله معكم كل خطوه بخطوه بقت منصقات انتم حتعملوها انا بس بدي اشرح الافكار العامه. بمسك الهيدر وباجي هون على الاباوت لانه نحن عارفين انه في الاباوت دوت اتش تي ام ال اول شيء نكتب الكود العام تمام وباجي هون اول شيء لازم اعمله انه اربط ملف السي اس اس لانه قلنا ملف واحد صح ولا لا. وباجي هون على البدي هي جزئيه الهيدر خلصت منها لكن بضل علي شو اعمل انه اول شيء الاباوت الاتش ريفت تبعها بطل اباوت دوت اش تي ام ال صح >> صار الهاش. طيب والهوم صارت اسمها هوم اندكس دوت اش تي ام ال وبشيل كلوس الاكتف وين بحطه في الاباوت. اخذت كنترول اكس وبضيفه وين هان في الاباوت بصير لما اروح على صفحه الاباوت الاقي هذا الكلام فيه. لو انا اجيت هان وهي صفحه الاباوت شفتوا ايش صار هي في صفحه الاباوت صارت الاباوت هي اللي عامله هذا الكلام وضح كلاس الاكتف لما يكون في هو عادي اي اسم بنسميه ولكن الاسم المتعارف عليه بيكون اسمه اكتف.

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

نيجي هلقيت نفوت على السكشن الاول حاجي هلت شغلي هان في الاندكس السكشن ايش متعارف انه بنعمل اي دي هيرو تمام حامسك السكشن اول شيء اشوف انا كاتش تي ام ال ايش بدي فيه كاتش تي ام ال ايش حيكون عندي >> لا غلط مش امج >> هذا المفروض باك جراوند امج في السي اس اس صح. انا حامسك هذا الكلام هذه كيف اعملها >> لا نحن عملنا اتش 1 الاتش بي اس ايش حنعمل هيصير >> اول شيء كتاج اتش تي ام ال ايش اعمل اتش2 ممتاز وكلمه جاي ايش اعمل فيها >> سبان صح فحامسك هذه والله حساكم مش مركزين مش حساكم يعني هو انا متاكده هي اتش2 تمام وبمسك كلمه انجوي وبحطها بداخل سبان مين عنده مشكله فيهم صعب. بعدين كان في عندي فقره ايش بعمل >> بي. طيب الاباوت اور اوت ايش حتكون >> بوتون بداخلها اي لانه لما اضغط عليها المفروض توديني على صفحه الاباوت صح ولا لا فحجمها حاحكي له عندي بي هي جمله لورين وبعد البي في عندي بوتون وهذا البوتون موجود بداخله تاجت اسمه اي تمام وانت يا الاتشرف الك مين ابا اوت دوت اش تي ام ال وباجي هون بكتب الكلمه اللي هي ابا اووت اور اوتال.

هلقيت بنيجي نعمل كتنسيقات انا صراحه دائما بفضل كل سكشن تعملوا له تاج اكس واعطو تنسقوا في السي اس اس تخلصوا منه وبعدين روحوا على السكشن الثاني في ناس بتروح بتكتب كل الاتش تي ام ال بالاول بعدين بالسي اس اس لا ما بفضل هذا الشيء. حاجي هان على السي اس اس اول شيء يفترض اصل للسكشن سكشن الهيرو تمام وهذا السكشن ماخذ باك جراوند ايمج زي ما انتم شايفين فاش احكي له >> باك جراوند ايج صح ولا لا بعدين يو ار ال واحكي حكي له في عندي في الامجز مثلا هذه الصوره. طيب تعال نعمل ريفريش هي الصورة ظهرت معي طبعا نحن عارفين ان الصورة حتظهر معي بس على قد المحتوى كيف اخليها جايه على كل فيو بارت >> اللي هو الهاي 100 في اتش صح ولا لا فححكي له هان انه خلي لي الهاي 100 في اتش. هان الصورة حجمها كبير فعشان هيك ما صارلها تكرار لكن لو صار عندكم تكرار ايش حتستخدموا باك جراوند ريبيت نو ريبيت ويفترض كمان اضيف باك جراوند سايز كفر صح ولا لا عشان اضمن انه تاخذ لي المساحه كامله وصراحه انا الصورة مش عاجباني فحغيرها ممكن هذ تكون تمام. بضل عليكم انتم هذه التنسيقات اعتقد سهله تكست الاين سنترك اللون تخلوه ابيض اذا بدكم تعملوا المسافه بين هذه وبين هذه شو حنعمل >> مارجن صح ولا لا طب لو مسافه بين البي هذه والبي هذا يعني هي نفس البي مسافه بين الاسطر >> لاين هاي ص لاي تنسيقات سي اس اس انتم بتعملوها تمام سهله ما فيش فيها صعوبه.

نيجي هون ركزوا معي اول حاجه كاتش تي ام ال ايش ححكي له >> ممتاز جدا ديفين حاجي هان هي هذا السكشن اول شيء خليني اعطيه اي دي عشان اميزه هو قسمين مثلا وكانحكي فيه ذا هيستوري اوف اور اوتيل فممكن اسميه كاي دي هيستوري صح وانتم حكيتوا انه في عندي حيكون اثنين ديف هي ديف في اثنين تمام ديف على اليمين وديف على اليسار عادي لو اعطيته هان كلاس سميته ديف وعندي فوق كلاس اسمه الدف في مشكله ليش انا مشان بقدر اصل لهذا من خلال هاش هيستوري صار مختلف عن هاش اللي فوق صح فمش مشكله لو كان عندي الكلاسين وار لانه هذا وصولي اله في الاي دي تبع السكشن ولا انا ايش فايدت اصلا ان انا حطيت اي دي للسكشن صح ولا لا. نيجي للكلاس هذا بدي اسميه اردر تمام هي اليمين وهي اليسار في اليسار ايش في عندي >> امج صح ولا لا هان ايج مش باك جراوند ايج حاجي احكي له ايج وهي الاس ار سي بدي اضيف اي صوره خليني اضيف شوف هي السكشن هي الصورة اللي فيه ممتاز طيب الار ديف ايش حيكون فيها >> الاتش هذه يفترض تكون نفس الاتش هذه عشان ما تكرر كود السي اس اس فيهم صح ولا لا >> والبي هذه يفترض تكون نفس البي هي عشان ماكرر الريد مور لا مختلف فعلى السريع ذا هيستوري اوف اور ايش انا كنت عامله هون عشان نسهل عليكم في التنسيقات اتش2 بداخلها سبان صح فحاجي هان شغلي هالقد في الار ديب حاحكي له في عندي اتش2 موجود بداخلها باخذ اول شيء الكلمه هذه كلها بعدين بمسك ذا هيستوري وبحطها بداخل السام عشان تشوفوا فايده السبان حاجي هون في الستايل احكي له انه السبان الكلر لها مثلا اورنج تمام فتعال نعمل ريفريش بهذا الشكل طبعا لانه هذه ديب وهذه بلشوا يجوا معي تحت بعض على السريع بدي اعمل بي اي هي الاتش 2 فهي بي هي اللورم تمام وفي عندي بوتون موجود بداخله كلمه تريد مول ممتاز بهذا الشكل هي الاشياء بلشت تظهر معي.

هل تركزوا معي شويه انا بلاحظ انه ديف اليمين ودف اليسار جايين معي على نفس السطر صح ولا لا هذه حناخذها بس نشرح خاصيه الديسبلاي على السريع انا حنوه لها وحنشرحها في لقاء لحاله بيحكي لي لما يكون عندي عنصرين جايين معي على نفس السطر في خاصيه اسمها ديسبلاي بتعمل هذا الكلام الديسبلاي احد القيم اللي بتاخذها ديسبلاي فليكس في لها بلوك في لها ان لاين بلوك في لها ان لاين احنا كل شغلنا حيكون على ديسبلاي فليكس ديسبلاي فليكس هي اللي بتخلي لي العناصر هذول على نفس السطر بيحكي لي عشان تستخدمي خاصيه الديسبلاي فليكس روحي شوفي مين الاب تبع العناصر هذه ايش يعني الالديف والارديف مين الاب تبعهم السكشن صح ولا لا فبحكي لي اصلي لهذا السكشن باجي بطلع هي الالديف والارديف الالديف والارديف تمام مين الاب تبعهم اللي هو هذا السكشن اللي معه اي دي اسمه هيستوري صح فحامسكه زي هيك وحاجي هون على الستايل واحكي له هاش هيستوري بحكي لي روحي اعملي له ديسبلاي فليكس بمجرد ما تحكي له ديسبلاي فليكس بس حيجيب لك العناصر على نفس السطر هي ريفريش بهذا الشكل شفتوا ايش صار؟ جاب لي العناصر على نفس السطر. طيب انا بطلع هان بلاقي انه الال ديف والار ديف ماخذين نفس المساحه بالضبط اذا بتلاحظوا اذا هذا 100% هذه ماخذ 50 وهذه ماخذ 50 فيفترض انه كل ديف من هدول الوث لها يكون 50% صح ولا لا؟ كيف اصل لكل ديف عادي باجي بحكي له هاش هيستوري الدف اللي فيها اللي هم ال ديف والار ديف الوث لها 50% هلقيت لما اعمل هذا الكلام حيجي هون 50% وهان 50% شفتوا ايش صار؟ طبعا هذه المساحه الفاضيه هذه عشان الصورة عندي حجمها صغير لكن انا لو جت عملت هيك انسبكت وجت قشرت هون هي هذه كلها للالدف وهذه كلها للار فهي فعلا لها 50%.

بحكي لي لما يكون عندك عناصر مقسمه زي هيك على عرض الصفحه يعني لنفرض عننا في تحت في السكشن اللي بعده عندي ثلاث عناصر مقسمين على العرض يفترض ايش اقول له هذه 33.33 33 هي 33 بوينت صح ولا لا؟ فبحكي لي بدل ما تغلبي حالك في الحسبه ها ولما يكون عندك اربعه 25% 25% صح ولا لا؟ حكي لي في عندي فانكشن اسمها كلك تمام فانكشن اسمها كلك بستخدمها لما يكون العناصر زي هيك موزعه على عرض الصفحه بتيجي بتحكي لك الكل هذه المساحه كلها اللي عندك 100% كم عنصر بدك تعرضي اثنين فبحكي له 100% على اثنين لو بدي اعرض ثلاثه بحكي له 100% بدي اعرض اربعه بقول له 100% ليش عشان يسهل علي انت ما تحسبي الحسبه هو لحاله بيروح بيحسبها فهلقيت لما قلت له 100% واجي اعمل ريفريش زي ما انتم شايفين هي نفسها لما بحكي له انه الويت هذا له 50% واضحه فيفترض انكم تستخدموا الكل افضل في تعاملته. شغله مهمه باجي بطلع على الصورة هان ماخذه مساحه الدف ككل صح ولا لا؟ فبحكي لي في عندي خاصيه اسمها اوبجكت فيت نفس الباك جراوند ايج اللي اخذناها ولكن الفرق فيها انه الاوبجكت فيت بتعامل فيها مع الصور الباك جراوند بتعامل فيها مع الخلفيه يعني بدي اصل لهذا الديب انا كيف بصل له؟ افترض احكي له هاش هيستوري بدي اخذ المسار كامل اطلعوا هنا عشان اصل للايمج اللي موجوده فعليا ايش اقول له هاش ديف دوت ال ديف صح ولا لا واضح الامج اللي موجوده هذه معناتها جيب لي الصورة اللي موجودة في الالديف اللي موجودة في السكشن الهيستوري وبدي احكي له هان اوبجيكت فيت كفر بنستخدمها مع الصور بتاخذ قيمه كفر وبتاخذ قيمه كونتين نفس ما شرحنا في الباك جراوند الكونتين حتاخذ جزء من المساحة الكفر حت تغطي لي المساحة كامله تعال نعمل ريفريش عشان تشتغل معي بحكي لي لازم تعطيها هاي 100% ويت 100% ليش عشان تاخذ مساحه الضف كلها اللي هي ال 50% كلها تبعت العنصر فهي ريفريش شفتوا ايش صار غطت لي فعلا المساحه ال 50% ككل بشكل كامل فدائما لما نستخدم الاوبجكت في كفر حنستخدم معها هاي 100% وث ايش يعني هاي 100% وث 100% يعني 100% من مساحه العنصر ككل تمام هي بالنسبه للامج طبعا تنسيقات الار ديف حاسيبها عليكم سهله ما في فيها اي صعوبه تمام بتيجوا هون بتعطوها باك جراوند كر وباقي تنسقات.

نيجي على السكشن اللي بعده على السريع بدي اسميه باسم معين حاجي على هذا السكشن احكي له اي دي اسمه مثلا سيرفسز. طيب كاتش تي ام ال شو حيكون موجود بداخله >> ممتاز اول شيء انا بدي اشتغل في ديف واحده وازبطها بعدين نعملها كوبي بس افضل الديف ايش حيكون فيها عنوان مثلا اتش ف وبي صح ولا لا حامسك هي طبعا هذه الهوف اوفر لسه بس ناخذها بس قبل يفترض انه انا جهز الدفات كلها ككل واصل للديف الثانيه باسم كلاس مثلا اسميه ديف واعطيها الباك جراوندمج عشان اميزها عن باقي الدفات حاجي هون على هذا السكشن حنعمل ديف احكي له في داخل مثلا اتش ف هذا الكلام وفي عندي بي فيها لور مضبوط تمام. طيب ايه واللي بدي اعمله انه بدي اكرر الديف هذه ثلاث مرات هي مره هي مرتين هي ثلاثه على شانهم ديف حيجوا معي تحت بعض صح ولا لا هي الدفات حيجوا معي تحت بعض يبقى يفترض اجيبهم على نفس السطر بنفس طريقه توي كيف اجيبهم على نفس السطر بشوف مين الاب تبعهم هاش سيرفسز صح حاجي هان احكي هاش سيرفيسز ديسبلاي فليكس ديسبلاي فليكس بس عشان تجيب لي اياهم على نفس السطر >> لا عندنا حنحكي بحكي على الفلو الفلوت بس بستخدمها في حاله واحده عندنا بحكي فيها شفتوا ايش صار لما قتله ديسبليك جابتلي اياهم على نفس السطر لكن بلاحظ انه عندي ها المسافه مش زي هذه مش زي هذه فاش اقول كلك 100% على 3 عشان اوزعها لمين انا بعمل كلك 100% على >> للديف نفسها صح ولا لا مش للسكشن يعني حامسك هاش سيرفيسز الديف الموجوده بداخلها واحكي لها و كث عشان اضمن انه عندي يكون الثلاث عناصر لهم نفس القيم بهذا الشكل شايفين ايش اللي صار بضل عليكم انه انتم تعطوهم هاي وتعطوا باك جراوند امج للديفل.

اخر شيء الفوتر في اي صعوبه الفوتر حامسك هذه واحطها بداخل بي صح ممتاز هي الفوتر حامسكها مثلا احطها بداخل ب هي هذه هيك بهذا الشكل. طيب وهذه اشاره الكوبي رايت قلنا كيف بنعملها اند كوبي اند كوبي سيمي كولون صح ولا لا قلنا بتعطينا اشاره الكوبي رايت بهذا الشكل هي ريفريش بضل عليكم انه الفوتر تعطوه باك جراوند ايمج وتعطوه هي لطول معين تمام لحتى الان حدا عنده سؤال الامور تمام هلت فكره الفلوت اللي حكى عنها بستخدم الفلوت في حاله واحده هي فكره الفلوت انه يكون عندي عنصرين جايين على نفس السطر تمام عشان استخدمها استخدامها في الموقع تبعي مش كويس وبخرب الموقع تبعي بيحكي لي بتقدري تستخدميها عشان هيك اصلا اجت الفليكس واجت الجريد عشان تحل مشكله الفلوت بيحكي لي بقدر استخدم الفلوت بس في حاله واحده لما يكون عندي صوره ومحتوى على نفس السطر بعمل فلوت للصوره بتاخذ مني قيمه ليفت وبتاخذ مني قيمه رايت في هذه الجزئيه بعطيه فلوت رايت للصوره تمام لما يكون عندي محتوى وصوره على نفس السطر ولكن نحن لما ناخذ الديسبلاي وناخذ الفليكس والان لاين والان لاين بلوك حتصير الامور اسهل بالنسبه لكم تمام هي اجت عشان تحل هي المشكله انا لحتى الان حاوقف شرح المره الجايه ان شاء الله حنشرح باقي الصفحتين انتم بتقدروا تجربوا فيهم الصفحتين وتشغلوهم سهلين ما في في مشكله بس حنشرحهم المره الجايه وناخذ موضوع جديد تمام يعطيكم العافيه.