# مشروع التيراريوم الجزء الثاني: مقدمة في CSS
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
## اختبار ما قبل المحاضرة
[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/17)
### المقدمة
CSS، أو أوراق الأنماط المتتالية، تحل مشكلة مهمة في تطوير الويب: كيفية جعل موقعك يبدو جميلاً. إضافة الأنماط إلى تطبيقاتك يجعلها أكثر سهولة في الاستخدام وأكثر جاذبية؛ يمكنك أيضًا استخدام CSS لإنشاء تصميم ويب متجاوب (RWD) - مما يسمح لتطبيقاتك بالظهور بشكل جيد بغض النظر عن حجم الشاشة التي يتم عرضها عليها. CSS لا يقتصر فقط على تحسين مظهر تطبيقك؛ بل يتضمن مواصفات للرسوم المتحركة والتحولات التي تمكن من إنشاء تفاعلات متقدمة لتطبيقاتك. تساعد مجموعة عمل CSS في الحفاظ على المواصفات الحالية لـ CSS؛ يمكنك متابعة عملهم على [موقع اتحاد شبكة الويب العالمية](https://www.w3.org/Style/CSS/members).
> ملاحظة، CSS هي لغة تتطور باستمرار، مثل كل شيء على الويب، وليس كل المتصفحات تدعم الأجزاء الأحدث من المواصفات. تحقق دائمًا من تطبيقاتك من خلال استشارة [CanIUse.com](https://caniuse.com).
في هذه الدرس، سنضيف أنماطًا إلى التيراريوم الخاص بنا عبر الإنترنت ونتعلم المزيد عن عدة مفاهيم في CSS: التتابع، الوراثة، واستخدام المحددات، التمركز، واستخدام CSS لبناء التخطيطات. خلال العملية، سنقوم بتخطيط التيراريوم وإنشاء التيراريوم نفسه.
### المتطلبات الأساسية
يجب أن يكون لديك ملف HTML الخاص بالتيراريوم جاهزًا ومعدًا لإضافة الأنماط.
> شاهد الفيديو
>
> [](https://www.youtube.com/watch?v=6yIdOIV9p1I)
### المهمة
في مجلد التيراريوم الخاص بك، قم بإنشاء ملف جديد يسمى `style.css`. قم باستيراد هذا الملف في قسم ``:
```html
```
---
## التتابع
تتضمن أوراق الأنماط المتتالية فكرة أن الأنماط "تتتابع" بحيث يتم تطبيق النمط بناءً على أولويته. الأنماط التي يحددها مؤلف الموقع تأخذ الأولوية على تلك التي يحددها المتصفح. الأنماط المحددة "داخليًا" تأخذ الأولوية على تلك المحددة في ورقة أنماط خارجية.
### المهمة
أضف النمط الداخلي "color: red" إلى علامة `
` الخاصة بك:
```HTML
My Terrarium
```
ثم، أضف الكود التالي إلى ملف `style.css` الخاص بك:
```CSS
h1 {
color: blue;
}
```
✅ ما اللون الذي يظهر في تطبيق الويب الخاص بك؟ لماذا؟ هل يمكنك إيجاد طريقة لتجاوز الأنماط؟ متى قد ترغب في القيام بذلك، أو لماذا لا؟
---
## الوراثة
تُورث الأنماط من النمط الرئيسي إلى النمط الفرعي، بحيث ترث العناصر المتداخلة أنماط الآباء.
### المهمة
قم بتعيين خط النص للجسم إلى خط معين، وتحقق من خط عنصر متداخل:
```CSS
body {
font-family: helvetica, arial, sans-serif;
}
```
افتح وحدة التحكم في المتصفح وانتقل إلى علامة التبويب "العناصر" ولاحظ خط `
`. سترى أنه يرث خطه من الجسم، كما هو مذكور داخل المتصفح:
✅ هل يمكنك جعل نمط متداخل يرث خاصية مختلفة؟
---
## محددات CSS
### العلامات
حتى الآن، يحتوي ملف `style.css` الخاص بك على عدد قليل فقط من العلامات ذات الأنماط، ويبدو التطبيق غريبًا:
```CSS
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
```
هذه الطريقة لتنسيق العلامة تمنحك التحكم في عناصر فريدة، ولكنك تحتاج إلى التحكم في أنماط العديد من النباتات في التيراريوم الخاص بك. للقيام بذلك، تحتاج إلى الاستفادة من محددات CSS.
### المعرفات
أضف بعض الأنماط لتخطيط الحاويات اليسرى واليمنى. نظرًا لوجود حاوية يسرى واحدة فقط وحاوية يمنى واحدة فقط، يتم إعطاؤها معرفات في التعليمات البرمجية. لتنسيقها، استخدم `#`:
```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:
```html
```
### الفئات
في المثال أعلاه، قمت بتنسيق عنصرين فريدين على الشاشة. إذا كنت تريد تطبيق الأنماط على العديد من العناصر على الشاشة، يمكنك استخدام فئات CSS. قم بذلك لتخطيط النباتات في الحاويات اليسرى واليمنى.
لاحظ أن كل نبات في التعليمات البرمجية HTML يحتوي على مجموعة من المعرفات والفئات. تُستخدم المعرفات هنا بواسطة JavaScript الذي ستضيفه لاحقًا للتعامل مع وضع النباتات في التيراريوم. ومع ذلك، تمنح الفئات جميع النباتات نمطًا معينًا.
```html
```
أضف الكود التالي إلى ملف `style.css` الخاص بك:
```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!
أولاً، قم بتنسيق العناصر الفرعية لـ `.terrarium` كأشكال مستطيلة مستديرة باستخدام CSS:
```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](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
✅ جرب تغيير ألوان الجرة والشفافية مقابل تلك الخاصة بالتربة. ماذا يحدث؟ لماذا؟
---
## 🚀التحدي
أضف لمعانًا يشبه الفقاعة إلى المنطقة السفلية اليسرى من الجرة لجعلها تبدو أشبه بالزجاج. ستقوم بتنسيق `.jar-glossy-long` و`.jar-glossy-short` لتبدو وكأنها لمعان منعكس. هكذا ستبدو:
لإكمال اختبار ما بعد المحاضرة، انتقل عبر هذا الوحدة التعليمية: [تنسيق تطبيق HTML الخاص بك باستخدام CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
## اختبار ما بعد المحاضرة
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/18)
## المراجعة والدراسة الذاتية
يبدو CSS بسيطًا بشكل خادع، ولكن هناك العديد من التحديات عند محاولة تنسيق تطبيق بشكل مثالي لجميع المتصفحات وجميع أحجام الشاشات. CSS-Grid وFlexbox هما أداتان تم تطويرهما لجعل المهمة أكثر تنظيمًا وأكثر موثوقية. تعرف على هذه الأدوات من خلال لعب [Flexbox Froggy](https://flexboxfroggy.com/) و[Grid Garden](https://codepip.com/games/grid-garden/).
## الواجب
[إعادة هيكلة CSS](assignment.md)
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
```
أضف الكود التالي إلى ملف `style.css` الخاص بك:
```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!
أولاً، قم بتنسيق العناصر الفرعية لـ `.terrarium` كأشكال مستطيلة مستديرة باستخدام CSS:
```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](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
✅ جرب تغيير ألوان الجرة والشفافية مقابل تلك الخاصة بالتربة. ماذا يحدث؟ لماذا؟
---
## 🚀التحدي
أضف لمعانًا يشبه الفقاعة إلى المنطقة السفلية اليسرى من الجرة لجعلها تبدو أشبه بالزجاج. ستقوم بتنسيق `.jar-glossy-long` و`.jar-glossy-short` لتبدو وكأنها لمعان منعكس. هكذا ستبدو:
لإكمال اختبار ما بعد المحاضرة، انتقل عبر هذا الوحدة التعليمية: [تنسيق تطبيق HTML الخاص بك باستخدام CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
## اختبار ما بعد المحاضرة
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/18)
## المراجعة والدراسة الذاتية
يبدو CSS بسيطًا بشكل خادع، ولكن هناك العديد من التحديات عند محاولة تنسيق تطبيق بشكل مثالي لجميع المتصفحات وجميع أحجام الشاشات. CSS-Grid وFlexbox هما أداتان تم تطويرهما لجعل المهمة أكثر تنظيمًا وأكثر موثوقية. تعرف على هذه الأدوات من خلال لعب [Flexbox Froggy](https://flexboxfroggy.com/) و[Grid Garden](https://codepip.com/games/grid-garden/).
## الواجب
[إعادة هيكلة CSS](assignment.md)
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.