14 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="./images/plant1.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
يمكن أن يكون مزج خصائص التمركز (هناك تمركز ثابت، نسبي، ثابت، مطلق، ولزج) أمرًا صعبًا بعض الشيء، ولكن عند القيام به بشكل صحيح فإنه يمنحك تحكمًا جيدًا في العناصر على صفحاتك.
العناصر المتمركزة بشكل مطلق يتم تمركزها بالنسبة إلى أقرب أسلاف متمركز، وإذا لم يكن هناك أي منها، يتم تمركزها وفقًا لجسم المستند.
العناصر المتمركزة بشكل نسبي يتم تمركزها بناءً على توجيهات CSS لضبط موضعها بعيدًا عن موضعها الأولي.
في مثالنا، يتم تمركز plant-holder بشكل نسبي داخل حاوية متمركزة بشكل مطلق. السلوك الناتج هو أن الحاويات الجانبية مثبتة على اليسار واليمين، ويتم وضع حامل النبات بشكل متداخل، مما يضبط نفسه داخل الحاويات الجانبية، مما يترك مساحة للنباتات لتوضع في صف عمودي.
يتم أيضًا تمركز
plantنفسه بشكل مطلق، وهو ضروري لجعله قابلًا للسحب، كما ستكتشف في الدرس التالي.
✅ جرب تبديل أنواع التمركز للحاويات الجانبية وحامل النبات. ماذا يحدث؟
تخطيطات 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.
✅ جرب تغيير ألوان الجرة وشفافيتها مقابل تلك الخاصة بالتراب. ماذا يحدث؟ لماذا؟
🚀التحدي
أضف لمعانًا يشبه الفقاعة إلى المنطقة السفلية اليسرى من الجرة لجعلها تبدو أكثر زجاجية. ستقوم بتصميم .jar-glossy-long و .jar-glossy-short لتبدو وكأنها لمعان منعكس. إليك كيف ستبدو:
لإكمال اختبار ما بعد المحاضرة، قم بزيارة هذا الوحدة التعليمية: صمم تطبيق HTML الخاص بك باستخدام CSS
اختبار ما بعد المحاضرة
المراجعة والدراسة الذاتية
يبدو CSS بسيطًا بشكل خادع، ولكن هناك العديد من التحديات عند محاولة تصميم تطبيق بشكل مثالي لجميع المتصفحات وجميع أحجام الشاشات. تم تطوير أدوات مثل CSS-Grid و Flexbox لجعل المهمة أكثر تنظيمًا وأكثر موثوقية. تعرف على هذه الأدوات من خلال لعب Flexbox Froggy و Grid Garden.
الواجب
إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.