مرحباً، جميعاً. في مراجعة درس اليوم،
سنتحدث عن عمل التقويم. لأن كل ما يروق لي حقًا في هذه التقويمات
هو وجود كافة هذه الأشياء الصغيرة، أشياء دقيقة للغاية ينبغي عليك التفكير بها
لتجعل صفحتك حقًا تبدو احترافية. إن ما أعرضه الاّن هنا على الشاشة، هو تقويم بسيط للغاية، حيث يمكنك أن ترى لدى كافة أيام الشهر. في بعض الأيام، ليس لدى أيضًا مواعيد كثيرة. لذا سأتناول الغذاء من والدتي، أو سأقابل العميد،
أو سأقدم مساعدات بالمكتبة. وفي الحادي والثلاثين، سيكون عيد الهلع ، يا إلهي! ما ينبغي علينا فعله للحصول على هذه المعلومات، هذا المحتوى خاص ب HTMLS5،
ونريد تحويله لشيء ممتع حقًا؟ حسنًا، فلنلقي نظرة على ما فعلته في هذا الصدد. لقد استخدمت هنا CSS لإنشاء تقويم يحتوي على العديد الأشياء المختلفة. بدايةً، لقد مضيت قدمًا وقمت بتصميمه بشكل جيد. وقمت بإدخال بعض الأشياء مثل أنصاف أقطار الإطارات،
كما تم تسليط الضوء على هذه الأيام هنا. أعرف أنه من الصعب حقًا رؤيتها على الشاشة الاّن، لكنني في الواقع لدى صورة خلفية لها لجعلها تبدو مختلفة بعض الشيء. إن الشيء الاّخر الذي أضفته هو أنه فى تلك الأيام
التي بها علاة النجمة الصغيرة، إذا قمت بالنقر عليها، سيظهر لك الموعد الفعلي. لذا كما تروون، سأتعامل مع العديد من عناصر CSS المختلفة. وسوف أقوم بالمرور على درس البرمجة ببطيء لكي أعطيكم فكرة عما يحدث. الاّن قد يكون من المستحيل عليك أن تتابع معي هذا الدرس و وتعرف بالضبط ماذا أفعل. ومع ذلك، سأقوم بإعطائه لك كمصدر تنهل منه و وتفهم أجزاءه المختلفة حسب احتياجك و وكما تريد لإدراجها في صفحتك. لذا دعونا نلقى نظرة على CSS. يمكنك أن ترى أن هذه الصفحة مليئة جدًا بالعناصر. لذا استرخي فقط قليلاً و يمكنك الانصات إلىً وأنا أتحدث عن العناصر المختلفة
بدلاً من محاولة قراءة قراءة درس البرمجة. لقد مضيت قُدمًا وأردت عمل إطار لطيف لذا كان هناك شيء ما تقريبًا في الجزء العلوي. هذا الشيء هو الجدول نفسه, هو في الحقيقة هذا الجزء فقط. هذا ليس شرحًا. لذا ما فعلته هو أنني مضيت قدمًا و وقلت، لا تقلق بشأن الزاويتين العلويتين هنا وهنا. منحنى الزاوية السفلية فقط، حيًا. كيف يمكنني التوصل إلى هذه الفكرة الرائعة المتعلقة
بالتغيير بين اللون الرمادي الفاتح و وهذا اللون والمرور ذهابًا وإيابًا؟ حسنًا، يمكنك المضي قدمًا والقيام باستخدام العناصر الزائفة (pseudo elements) المختلفة. لذا مضيت قدمًا في هذه الحالة. وهذا ليس أنا. إنه المتصفح يقول "أهلا" سألقي نظرة
على كافة صفوف الجداول المختلفة. في أى وقت أرى طفلاً غريبًا سأقوم بتلوينه بلون واحد، وفي أى وقت أرى فيه طفلاً حتى وإن كان عاديًا،
سأقوم بتلوينه بلون اّخر. فهذا أجمل بكثير من الذهاب إلى جدولك و وضع الصف يساوي حتى ، صنف يساوي شاذ ، صنف يساوي حتى ، وخصوصًا إذا قررت فيما بعد إضافة المزيد من المعلومات
وأفسدت صفوف جدولك. هذا حقًا شيء فعال وعليك الاستفادة منه. ماذا وإن حاولت أن تجعل صفحتك تبدو حقًا أكثر احترافية ومتداخلة العناصر؟ لذا فأنا هنا في واقع الأمر أنظر إلى الجدول وصف الجدول و وعنصر الجدول. كان علىً المضي قدمًا والتفكير في كل منها والتفكير في أشياء مثل ال hm في اّخر صف من الجدول الخاص بي،
وفي اّخر عنصر من الجدول، والذي يكون منحناه مختلفًا عن الطفل الأول. لذا فامضِ قدمًا، وقم بتحميل الفيديو الخاص بالبرمجة
وألق نظرة عليه وتعامل معه. ماذا يحدث إن علقت عليه؟ ماذا سيحدث؟ حسنًا، فلدى شرح بسيط لحد ما لتوضيح ذلك، وقد استكملت وقمت بإضافة أنصاف أقطار إطارات للتو وألوانًا. ما أريد أن أعرضه عليكم حقًا هو
الفكرة الكاملة عندا تريد إخفاء الأشياء. فلنعد إلى HTML. وضعت كافة العناصر داخل علامة الترميز span. لذا فهنا حصلت على مساعد حاوية الترميز Span. اّمل أن تفكر الاّن وتستمر لماذا لم تظهر هذه العناصر عندما ألقيت أول نظرة على التقويم؟ لماذا لم تكن موجودة؟ حسنًا، قد يكون السبب افتراضيًا هو أنني سوف أقوم بإخفاء كافة المواعيد المختلفة. سأمضي قدمًا قائلاً بأنه تم إخفاء إمكانية رؤيتها. وهذا يختلف الاّن عن خاصية عدم العرض. إذا لم أعرض أى شيء فسوف يختفي هذا المربع بأكمله، ولن يظهر هنا. يمكن أن نقول أن الرؤية مخفية، أريد أن أترك كل هذه المساحة، ولكن لا أريد أن أظهر ما بداخلها. هذا شيء بسيط جدًا، وهذا هو بالتحديد سبب ذكر هذا المثال حتى يمكنك أن ترى الفارق، حسنًا، فالاّن قد اختفت. ولكن بمجرد أن أقوم بجعلها "نشطة"، وجعلها نشطة يعني مجرد النقر عليها، يمكنني تغيير حالة الرؤية من "خفي" إلى "مرئي". لذا هيا ننقر فوقها، ويمكنك أن يظهر لك هذا الغذاء مع والدتي. ومساعد المكتبة وأيضًا هنا في الهالوين (عيد الهلع)، لقد تلقيت رسالة صغيرة هنا. لذا فهناك كثير ما يحدث يتعلق ب CSS. ولا أريد أن أتعمق في كل سطر فيه، وأنتم لا تريدوني أن أفعل ذلك أيضًا. سيكون مملاً للغاية. ومع ذلك اّمل أن أكون قد قمت بتوضيح بعض الطرق التي تجعل هذه العناصر والفئات الزائفة pseudo-classes, pseudo-elements تعمل بها معًا في حالاتها المختلفة من أجل إنشاء صفحة تبدو أفضل بكثير من مجرد كونها صفحة HTML عادية. لذا اّمل أن تستفيد من درس البرمجة هذا وتصمم شيئًا رائعًا لنفسك. حظ سعيد.