16 KiB
پروژه تراریوم بخش ۲: مقدمه‌ای بر CSS
طراحی توسط Tomomi Imura
آزمون پیش از درس
مقدمه
CSS یا Cascading Style Sheets یک مشکل مهم در توسعه وب را حل می‌کند: چگونه وب‌سایت خود را زیبا کنید. استایل‌دهی به اپلیکیشن‌هایتان باعث می‌شود که هم کاربردی‌تر و هم زیباتر به نظر برسند؛ همچنین می‌توانید از CSS برای ایجاد طراحی وب واکنش‌گرا (Responsive Web Design) استفاده کنید - به طوری که اپلیکیشن‌هایتان در هر اندازه صفحه‌نمایشی خوب به نظر برسند. CSS فقط برای زیبا کردن اپلیکیشن شما نیست؛ مشخصات آن شامل انیمیشن‌ها و تغییراتی است که می‌توانند تعاملات پیشرفته‌ای را برای اپلیکیشن‌هایتان ممکن کنند. گروه کاری CSS به حفظ مشخصات فعلی CSS کمک می‌کند؛ می‌توانید کارهای آن‌ها را در سایت کنسرسیوم جهانی وب دنبال کنید.
توجه داشته باشید که CSS زبانی است که مانند همه چیز در وب تکامل می‌یابد و همه مرورگرها از بخش‌های جدیدتر مشخصات پشتیبانی نمی‌کنند. همیشه پیاده‌سازی‌های خود را با مراجعه به CanIUse.com بررسی کنید.
در این درس، ما به تراریوم آنلاین خود استایل اضافه می‌کنیم و درباره چند مفهوم CSS بیشتر یاد می‌گیریم: آبشار (cascade)، وراثت (inheritance)، استفاده از انتخابگرها (selectors)، موقعیت‌دهی (positioning) و استفاده از CSS برای ساخت چیدمان‌ها. در این فرآیند، تراریوم را چیدمان کرده و خود تراریوم را ایجاد خواهیم کرد.
پیش‌نیاز
شما باید HTML تراریوم خود را ساخته و آماده استایل‌دهی داشته باشید.
مشاهده ویدیو
وظیفه
در پوشه تراریوم خود، یک فایل جدید به نام style.css ایجاد کنید. این فایل را در بخش <head> وارد کنید:
<link rel="stylesheet" href="./style.css" />
آبشار (Cascade)
Cascading Style Sheets ایده‌ای را در بر می‌گیرد که استایل‌ها به صورت "آبشاری" اعمال می‌شوند، به طوری که اعمال یک استایل با اولویت آن هدایت می‌شود. استایل‌هایی که توسط نویسنده وب‌سایت تنظیم شده‌اند، نسبت به استایل‌های تنظیم‌شده توسط مرورگر اولویت دارند. استایل‌هایی که به صورت "inline" تنظیم شده‌اند، نسبت به استایل‌های تنظیم‌شده در یک فایل استایل خارجی اولویت دارند.
وظیفه
استایل "color: red" را به صورت inline به تگ <h1> خود اضافه کنید:
<h1 style="color: red">My Terrarium</h1>
سپس کد زیر را به فایل style.css خود اضافه کنید:
h1 {
color: blue;
}
✅ چه رنگی در اپلیکیشن وب شما نمایش داده می‌شود؟ چرا؟ آیا می‌توانید راهی برای لغو استایل‌ها پیدا کنید؟ چه زمانی ممکن است بخواهید این کار را انجام دهید یا چرا نباید این کار را انجام دهید؟
وراثت (Inheritance)
استایل‌ها از یک استایل اجدادی به یک استایل فرزندی به ارث می‌رسند، به طوری که عناصر تو در تو استایل‌های والدین خود را به ارث می‌برند.
وظیفه
فونت بدنه را به یک فونت خاص تنظیم کنید و بررسی کنید که آیا فونت یک عنصر تو در تو تغییر می‌کند:
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>
کلاس‌ها (Classes)
در مثال بالا، شما دو عنصر منحصربه‌فرد روی صفحه را استایل دادید. اگر بخواهید استایل‌ها به بسیاری از عناصر روی صفحه اعمال شوند، می‌توانید از کلاس‌های 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
ترکیب ویژگی‌های موقعیت‌دهی (موقعیت‌های static، relative، fixed، absolute و sticky) ممکن است کمی پیچیده باشد، اما اگر به درستی انجام شود، کنترل خوبی بر عناصر صفحات شما می‌دهد.
عناصر با موقعیت‌دهی مطلق نسبت به نزدیک‌ترین اجداد موقعیت‌دهی‌شده خود موقعیت‌دهی می‌شوند و اگر وجود نداشته باشند، نسبت به بدنه سند موقعیت‌دهی می‌شوند.
عناصر با موقعیت‌دهی نسبی بر اساس دستورالعمل‌های 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 برای border-radius استفاده می‌کنیم، یک طول نسبی به فونت. درباره این نوع اندازه‌گیری نسبی بیشتر در مشخصات CSS بخوانید.
✅ سعی کنید رنگ‌ها و شفافیت شیشه را در مقابل خاک تغییر دهید. چه اتفاقی می‌افتد؟ چرا؟
🚀چالش
یک درخشش حبابی به قسمت پایین سمت چپ شیشه اضافه کنید تا شیشه شبیه‌تر به شیشه به نظر برسد. شما باید .jar-glossy-long و .jar-glossy-short را طوری استایل دهید که شبیه یک درخشش بازتابی به نظر برسند. اینجا نتیجه نهایی است:
برای تکمیل آزمون پس از درس، این ماژول Learn را مرور کنید: استایل‌دهی به اپلیکیشن HTML خود با CSS
آزمون پس از درس
مرور و مطالعه شخصی
CSS به ظاهر ساده به نظر می‌رسد، اما هنگام تلاش برای استایل‌دهی کامل یک اپلیکیشن برای همه مرورگرها و همه اندازه‌های صفحه‌نمایش، چالش‌های زیادی وجود دارد. CSS-Grid و Flexbox ابزارهایی هستند که برای ساختارمندتر و قابل‌اعتمادتر کردن این کار توسعه یافته‌اند. درباره این ابزارها با بازی کردن Flexbox Froggy و Grid Garden یاد بگیرید.
تکلیف
سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده کنید. ما مسئولیتی در قبال سوء تفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.