16 KiB
پروژه تراریوم بخش ۲: معرفی CSS
طراحی توسط Tomomi Imura
آزمون پیش از درس
مقدمه
CSS یا Cascading Style Sheets یک مشکل مهم در توسعه وب را حل می‌کند: چگونه وب‌سایت خود را زیبا کنید. استایل‌دهی به اپلیکیشن‌ها باعث می‌شود که آن‌ها قابل استفاده‌تر و زیباتر شوند؛ همچنین می‌توانید از CSS برای ایجاد طراحی واکنش‌گرا (Responsive Web Design - RWD) استفاده کنید - به طوری که اپلیکیشن‌های شما در هر اندازه صفحه نمایش خوب به نظر برسند. CSS فقط برای زیبا کردن اپلیکیشن شما نیست؛ مشخصات آن شامل انیمیشن‌ها و تغییراتی است که می‌توانند تعاملات پیچیده‌ای را برای اپلیکیشن‌های شما ممکن کنند. گروه کاری CSS به حفظ مشخصات فعلی CSS کمک می‌کند؛ می‌توانید کار آن‌ها را در سایت کنسرسیوم جهانی وب دنبال کنید.
توجه داشته باشید، CSS زبانی است که مانند همه چیز در وب تکامل می‌یابد و همه مرورگرها از بخش‌های جدیدتر مشخصات پشتیبانی نمی‌کنند. همیشه پیاده‌سازی‌های خود را با مراجعه به CanIUse.com بررسی کنید.
در این درس، ما قصد داریم به تراریوم آنلاین خود استایل بدهیم و بیشتر با چند مفهوم CSS آشنا شویم: آبشار، وراثت، استفاده از انتخابگرها، موقعیت‌دهی و استفاده از CSS برای ساخت چیدمان‌ها. در این فرآیند، تراریوم را چیدمان کرده و خود تراریوم را ایجاد خواهیم کرد.
پیش‌نیاز
شما باید HTML تراریوم خود را ساخته و آماده استایل‌دهی کرده باشید.
مشاهده ویدیو
وظیفه
در پوشه تراریوم خود، یک فایل جدید به نام style.css ایجاد کنید. این فایل را در بخش <head> وارد کنید:
<link rel="stylesheet" href="./style.css" />
آبشار
Cascading Style Sheets مفهوم آبشار را در بر می‌گیرد، به طوری که اعمال یک استایل بر اساس اولویت آن هدایت می‌شود. استایل‌هایی که توسط نویسنده وب‌سایت تنظیم شده‌اند، نسبت به استایل‌هایی که توسط مرورگر تنظیم شده‌اند، اولویت دارند. استایل‌هایی که به صورت "inline" تنظیم شده‌اند، نسبت به استایل‌هایی که در یک فایل استایل خارجی تنظیم شده‌اند، اولویت دارند.
وظیفه
استایل "color: red" را به تگ <h1> خود اضافه کنید:
<h1 style="color: red">My Terrarium</h1>
سپس کد زیر را به فایل style.css خود اضافه کنید:
h1 {
color: blue;
}
✅ کدام رنگ در اپلیکیشن وب شما نمایش داده می‌شود؟ چرا؟ آیا می‌توانید راهی برای لغو استایل‌ها پیدا کنید؟ چه زمانی ممکن است بخواهید این کار را انجام دهید یا چرا نباید این کار را انجام دهید؟
وراثت
استایل‌ها از یک سبک اجدادی به یک سبک فرزند منتقل می‌شوند، به طوری که عناصر تو در تو استایل‌های والدین خود را به ارث می‌برند.
وظیفه
فونت بدنه را به یک فونت خاص تنظیم کنید و بررسی کنید که فونت یک عنصر تو در تو چگونه است:
body {
font-family: helvetica, arial, sans-serif;
}
کنسول مرورگر خود را به تب 'Elements' باز کنید و فونت H1 را مشاهده کنید. این فونت از بدنه به ارث می‌رسد، همانطور که در مرورگر مشخص شده است:
✅ آیا می‌توانید یک سبک تو در تو را وادار کنید که یک ویژگی متفاوت را به ارث ببرد؟
انتخابگرهای CSS
تگ‌ها
تا اینجا، فایل style.css شما فقط چند تگ استایل داده شده دارد و اپلیکیشن ظاهر عجیبی دارد:
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
این روش استایل‌دهی به یک تگ به شما کنترل بر عناصر منحصر به فرد می‌دهد، اما شما نیاز دارید که استایل‌های بسیاری از گیاهان در تراریوم خود را کنترل کنید. برای این کار باید از انتخابگرهای CSS استفاده کنید.
شناسه‌ها (Ids)
به چیدمان کانتینرهای چپ و راست استایل اضافه کنید. از آنجا که فقط یک کانتینر چپ و یک کانتینر راست وجود دارد، آن‌ها در مارک‌آپ شناسه داده شده‌اند. برای استایل‌دهی به آن‌ها از # استفاده کنید:
#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" (Don't Repeat Yourself) نیست؛ آیا می‌توانید راه بهتری برای استایل‌دهی به این شناسه‌ها پیدا کنید، شاید با استفاده از یک شناسه و یک کلاس؟ شما نیاز دارید که مارک‌آپ را تغییر داده و CSS را بازنویسی کنید:
<div id="left-container" class="container"></div>
کلاس‌ها
در مثال بالا، شما دو عنصر منحصر به فرد روی صفحه را استایل داده‌اید. اگر بخواهید استایل‌ها به بسیاری از عناصر روی صفحه اعمال شوند، می‌توانید از کلاس‌های CSS استفاده کنید. این کار را برای چیدمان گیاهان در کانتینرهای چپ و راست انجام دهید.
توجه کنید که هر گیاه در مارک‌آپ HTML ترکیبی از شناسه‌ها و کلاس‌ها دارد. شناسه‌ها در اینجا توسط جاوااسکریپت که بعداً اضافه خواهید کرد برای دستکاری مکان‌گذاری گیاهان تراریوم استفاده می‌شوند. کلاس‌ها اما به همه گیاهان یک استایل خاص می‌دهند.
<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;
}
نکته قابل توجه در این قطعه کد، ترکیب موقعیت‌دهی نسبی و مطلق است که در بخش بعدی به آن خواهیم پرداخت. به نحوه مدیریت ارتفاع‌ها با درصدها توجه کنید:
شما ارتفاع نگهدارنده گیاه را به ۱۳٪ تنظیم کرده‌اید، عددی مناسب برای اطمینان از اینکه همه گیاهان در هر کانتینر عمودی بدون نیاز به اسکرول نمایش داده شوند.
نگهدارنده گیاه را به سمت چپ حرکت داده‌اید تا گیاهان در کانتینر خود بیشتر در مرکز قرار گیرند. تصاویر دارای مقدار زیادی پس‌زمینه شفاف هستند تا قابل کشیدن باشند، بنابراین نیاز دارند به سمت چپ حرکت کنند تا بهتر در صفحه قرار گیرند.
سپس، خود گیاه حداکثر عرض ۱۵۰٪ داده شده است. این اجازه می‌دهد که با کوچک شدن مرورگر، گیاهان نیز کوچک شوند. مرورگر خود را تغییر اندازه دهید؛ گیاهان در کانتینرهای خود باقی می‌مانند اما کوچک می‌شوند تا جا شوند.
همچنین قابل توجه است استفاده از z-index، که ارتفاع نسبی یک عنصر را کنترل می‌کند (به طوری که گیاهان روی کانتینر قرار می‌گیرند و به نظر می‌رسد داخل تراریوم قرار دارند).
✅ چرا به هر دو انتخابگر CSS نگهدارنده گیاه و گیاه نیاز دارید؟
موقعیت‌دهی CSS
ترکیب ویژگی‌های موقعیت‌دهی (موقعیت‌های ثابت، نسبی، ثابت، مطلق و چسبنده) ممکن است کمی پیچیده باشد، اما وقتی به درستی انجام شود، کنترل خوبی بر عناصر صفحات شما می‌دهد.
عناصر با موقعیت‌دهی مطلق نسبت به نزدیک‌ترین اجداد موقعیت‌دهی شده خود قرار می‌گیرند، و اگر هیچ‌کدام وجود نداشته باشد، نسبت به بدنه سند قرار می‌گیرند.
عناصر با موقعیت‌دهی نسبی بر اساس دستورالعمل‌های CSS برای تنظیم مکان آن‌ها از موقعیت اولیه خود قرار می‌گیرند.
در نمونه ما، plant-holder یک عنصر با موقعیت‌دهی نسبی است که در یک کانتینر با موقعیت‌دهی مطلق قرار گرفته است. رفتار حاصل این است که کانتینرهای نوار کناری به چپ و راست چسبیده‌اند، و plant-holder تو در تو شده است، خود را در نوارهای کناری تنظیم می‌کند و فضای لازم برای قرار دادن گیاهان در یک ردیف عمودی را فراهم می‌کند.
خود
plantنیز موقعیت‌دهی مطلق دارد، که برای قابل کشیدن بودن آن ضروری است، همانطور که در درس بعدی خواهید دید.
✅ با تغییر انواع موقعیت‌دهی کانتینرهای کناری و 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 بخوانید.
✅ سعی کنید رنگ‌های شیشه و کدورت آن‌ها را در مقابل خاک تغییر دهید. چه اتفاقی می‌افتد؟ چرا؟
🚀چالش
یک درخشش حبابی به قسمت پایین سمت چپ شیشه اضافه کنید تا شیشه بیشتر شبیه به شیشه به نظر برسد. شما باید .jar-glossy-long و .jar-glossy-short را استایل دهید تا شبیه به یک درخشش بازتابی شوند. اینجا ظاهر آن است:
برای تکمیل آزمون پس از درس، این ماژول یادگیری را مرور کنید: استایل‌دهی اپلیکیشن HTML خود با CSS
آزمون پس از درس
مرور و مطالعه شخصی
CSS به نظر ساده می‌آید، اما چالش‌های زیادی هنگام تلاش برای استایل‌دهی کامل یک اپلیکیشن برای همه مرورگرها و همه اندازه‌های صفحه وجود دارد. CSS-Grid و Flexbox ابزارهایی هستند که برای ساختاردهی و قابل اعتمادتر کردن کار توسعه داده شده‌اند. درباره این ابزارها با بازی کردن Flexbox Froggy و Grid Garden یاد بگیرید.
تکلیف
سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه انسانی حرفه‌ای استفاده کنید. ما هیچ مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.