16 KiB
مشروع التيراريوم الجزء الثاني: مقدمة في CSS
رسم توضيحي بواسطة Tomomi Imura
اختبار ما قبل المحاضرة
المقدمة
CSS، أو أوراق الأنماط المتتالية، تحل مشكلة مهمة في تطوير الويب: كيفية جعل موقعك يبدو جذابًا. تصميم تطبيقاتك يجعلها أكثر سهولة في الاستخدام وجاذبية؛ يمكنك أيضًا استخدام CSS لإنشاء تصميم ويب متجاوب (RWD) - مما يسمح لتطبيقاتك بأن تبدو جيدة بغض النظر عن حجم الشاشة التي يتم عرضها عليها. CSS لا يقتصر فقط على جعل تطبيقك يبدو جميلًا؛ بل يتضمن مواصفات للرسوم المتحركة والتحويلات التي يمكن أن تمكن من تفاعلات متقدمة لتطبيقاتك. مجموعة عمل CSS تساعد في الحفاظ على مواصفات CSS الحالية؛ يمكنك متابعة عملهم على موقع اتحاد الشبكة العالمية.
ملاحظة، CSS هي لغة تتطور، مثل كل شيء على الويب، وليس كل المتصفحات تدعم الأجزاء الأحدث من المواصفات. تحقق دائمًا من تطبيقاتك من خلال استشارة CanIUse.com.
في هذه الدرس، سنضيف أنماطًا إلى التيراريوم الخاص بنا عبر الإنترنت ونتعلم المزيد عن عدة مفاهيم في CSS: التتابع، الوراثة، واستخدام المحددات، التمركز، واستخدام CSS لبناء التخطيطات. خلال العملية، سنقوم بتصميم التيراريوم وإنشاء التيراريوم نفسه.
المتطلبات الأساسية
يجب أن يكون لديك ملف HTML الخاص بالتيراريوم جاهزًا للتصميم.
شاهد الفيديو
المهمة
في مجلد التيراريوم الخاص بك، قم بإنشاء ملف جديد يسمى style.css. قم باستيراد هذا الملف في قسم <head>:
<link rel="stylesheet" href="./style.css" />
التتابع
أوراق الأنماط المتتالية تتضمن فكرة أن الأنماط "تتتابع" بحيث يتم تطبيق النمط بناءً على أولويته. الأنماط التي يحددها مؤلف الموقع تأخذ الأولوية على تلك التي يحددها المتصفح. الأنماط المحددة "داخل السطر" تأخذ الأولوية على تلك المحددة في ورقة أنماط خارجية.
المهمة
أضف النمط داخل السطر "color: red" إلى علامة <h1> الخاصة بك:
<h1 style="color: red">My Terrarium</h1>
ثم، أضف الكود التالي إلى ملف style.css الخاص بك:
h1 {
color: blue;
}
✅ ما اللون الذي يظهر في تطبيق الويب الخاص بك؟ لماذا؟ هل يمكنك إيجاد طريقة لتجاوز الأنماط؟ متى قد ترغب في القيام بذلك، أو لماذا لا؟
الوراثة
الأنماط تُورث من نمط السلف إلى النسل، بحيث ترث العناصر المتداخلة أنماط الآباء.
المهمة
قم بتعيين خط الجسم إلى خط معين، وتحقق من خط العنصر المتداخل:
body {
font-family: helvetica, arial, sans-serif;
}
افتح وحدة التحكم في المتصفح إلى علامة التبويب "العناصر" وراقب خط H1. إنه يرث خطه من الجسم، كما هو مذكور داخل المتصفح:
✅ هل يمكنك جعل نمط متداخل يرث خاصية مختلفة؟
محددات CSS
العلامات
حتى الآن، يحتوي ملف style.css الخاص بك على عدد قليل فقط من العلامات المصممة، ويبدو التطبيق غريبًا:
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
هذه الطريقة لتصميم العلامة تمنحك التحكم في العناصر الفريدة، ولكنك تحتاج إلى التحكم في أنماط العديد من النباتات في التيراريوم الخاص بك. للقيام بذلك، تحتاج إلى الاستفادة من محددات CSS.
المعرفات
أضف بعض الأنماط لتصميم الحاويات اليسرى واليمنى. نظرًا لوجود حاوية واحدة فقط على اليسار وحاوية واحدة فقط على اليمين، يتم إعطاؤها معرفات في الترميز. لتصميمها، استخدم #:
#left-container {
background-color: #eee;
width: 15%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
#right-container {
background-color: #eee;
width: 15%;
right: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
هنا، قمت بوضع هذه الحاويات باستخدام التمركز المطلق إلى أقصى اليسار واليمين من الشاشة، واستخدمت النسب المئوية لعرضها بحيث يمكنها التكيف مع شاشات الهواتف المحمولة الصغيرة.
✅ هذا الكود مكرر جدًا، وبالتالي ليس "DRY" (لا تكرر نفسك)؛ هل يمكنك إيجاد طريقة أفضل لتصميم هذه المعرفات، ربما باستخدام معرف وفئة؟ ستحتاج إلى تغيير الترميز وإعادة هيكلة CSS:
<div id="left-container" class="container"></div>
الفئات
في المثال أعلاه، قمت بتصميم عنصرين فريدين على الشاشة. إذا كنت تريد أن تنطبق الأنماط على العديد من العناصر على الشاشة، يمكنك استخدام فئات CSS. قم بذلك لتصميم النباتات في الحاويات اليسرى واليمنى.
لاحظ أن كل نبات في ترميز HTML يحتوي على مجموعة من المعرفات والفئات. يتم استخدام المعرفات هنا بواسطة JavaScript الذي ستضيفه لاحقًا للتعامل مع وضع النباتات في التيراريوم. أما الفئات، فتمنح جميع النباتات نمطًا معينًا.
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ar.png" />
</div>
أضف الكود التالي إلى ملف style.css الخاص بك:
.plant-holder {
position: relative;
height: 13%;
left: -10px;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
}
الملحوظ في هذا المقطع هو مزيج من التمركز النسبي والمطلق، والذي سنغطيه في القسم التالي. ألقِ نظرة على الطريقة التي يتم بها التعامل مع الارتفاعات بالنسب المئوية:
قمت بتعيين ارتفاع حامل النبات إلى 13%، وهو رقم جيد لضمان عرض جميع النباتات في كل حاوية عمودية دون الحاجة إلى التمرير.
قمت بتحريك حامل النبات إلى اليسار للسماح للنباتات بأن تكون أكثر تمركزًا داخل الحاوية. الصور تحتوي على كمية كبيرة من الخلفية الشفافة لجعلها أكثر قابلية للسحب، لذا تحتاج إلى دفعها إلى اليسار لتناسب الشاشة بشكل أفضل.
ثم، تم إعطاء النبات نفسه عرضًا أقصى يبلغ 150%. هذا يسمح له بالتقلص مع تقلص المتصفح. جرب تغيير حجم المتصفح؛ تبقى النباتات في حاوياتها ولكن تتقلص لتناسب.
أيضًا، الملحوظ هو استخدام z-index، الذي يتحكم في الارتفاع النسبي للعنصر (بحيث تجلس النباتات فوق الحاوية وتظهر وكأنها داخل التيراريوم).
✅ لماذا تحتاج إلى كل من حامل النبات ومحدد CSS للنبات؟
تمركز CSS
مزج خصائص التمركز (هناك تمركز ثابت، نسبي، ثابت، مطلق، ولزج) يمكن أن يكون صعبًا بعض الشيء، ولكن عندما يتم بشكل صحيح فإنه يمنحك تحكمًا جيدًا في العناصر على صفحاتك.
العناصر المتمركزة بشكل مطلق يتم تمركزها بالنسبة إلى أقرب الأسلاف المتمركزين، وإذا لم يكن هناك أي منها، يتم تمركزها وفقًا لجسم المستند.
العناصر المتمركزة بشكل نسبي يتم تمركزها بناءً على توجيهات CSS لضبط موضعها بعيدًا عن موضعها الأولي.
في مثالنا، plant-holder هو عنصر متمركز بشكل نسبي يتم تمركزه داخل حاوية متمركزة بشكل مطلق. السلوك الناتج هو أن الحاويات الجانبية مثبتة على اليسار واليمين، وplant-holder متداخل، ويضبط نفسه داخل الحاويات الجانبية، مما يتيح مساحة لوضع النباتات في صف عمودي.
النبات نفسه أيضًا لديه تمركز مطلق، وهو ضروري لجعله قابلًا للسحب، كما ستكتشف في الدرس التالي.
✅ جرب تبديل أنواع التمركز للحاويات الجانبية وplant-holder. ماذا يحدث؟
تخطيطات CSS
الآن ستستخدم ما تعلمته لبناء التيراريوم نفسه، كل ذلك باستخدام CSS!
أولاً، قم بتصميم الأطفال داخل div .terrarium كأشكال مستطيلة مستديرة باستخدام CSS:
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0%;
left: 25%;
opacity: 0.7;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
لاحظ استخدام النسب المئوية هنا. إذا قمت بتقليص المتصفح، يمكنك رؤية كيف يتقلص الجرة أيضًا. لاحظ أيضًا نسب العرض والارتفاع لعناصر الجرة وكيف يتم تمركز كل عنصر بشكل مطلق في المنتصف، مثبتًا في أسفل نافذة العرض.
نحن أيضًا نستخدم rem لنصف القطر الحدودي، وهو طول نسبي للخط. اقرأ المزيد عن هذا النوع من القياسات النسبية في مواصفات CSS.
✅ جرب تغيير ألوان الجرة وشفافيتها مقابل تلك الخاصة بالتراب. ماذا يحدث؟ لماذا؟
تحدي GitHub Copilot Agent 🚀
استخدم وضع الوكيل لإكمال التحدي التالي:
الوصف: قم بإنشاء رسوم متحركة CSS تجعل نباتات التيراريوم تتأرجح بلطف ذهابًا وإيابًا، مما يحاكي تأثير النسيم الطبيعي. سيساعدك هذا على ممارسة الرسوم المتحركة والتحويلات والإطارات الرئيسية في CSS مع تحسين الجاذبية البصرية للتيراريوم.
المهمة: أضف رسوم متحركة للإطارات الرئيسية في CSS لجعل النباتات في التيراريوم تتأرجح بلطف من جانب إلى آخر. قم بإنشاء حركة تأرجح تدور كل نبات قليلاً (2-3 درجات) إلى اليسار واليمين مع مدة تتراوح بين 3-4 ثوانٍ، وطبقها على الفئة .plant. تأكد من أن الرسوم المتحركة تتكرر بلا نهاية وتحتوي على وظيفة تخفيف للحركة الطبيعية.
🚀التحدي
أضف لمعانًا "فقاعيًا" إلى المنطقة السفلية اليسرى من الجرة لجعلها تبدو أكثر زجاجية. ستقوم بتصميم .jar-glossy-long و.jar-glossy-short لتبدو وكأنها لمعان منعكس. إليك كيف ستبدو:
لإكمال اختبار ما بعد المحاضرة، قم بزيارة وحدة التعلم هذه: صمم تطبيق HTML الخاص بك باستخدام CSS
اختبار ما بعد المحاضرة
المراجعة والدراسة الذاتية
CSS يبدو بسيطًا بشكل خادع، ولكن هناك العديد من التحديات عند محاولة تصميم تطبيق بشكل مثالي لجميع المتصفحات وجميع أحجام الشاشات. CSS-Grid وFlexbox هما أدوات تم تطويرها لجعل المهمة أكثر تنظيمًا وأكثر موثوقية. تعرف على هذه الأدوات من خلال لعب Flexbox Froggy وGrid Garden.
الواجب
إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.