یک صفحهٔ HTML ساده بسازید و با استفاده از متغیرهای CSS (custom properties) در :root رنگ‌های اصلی و ثانویه را تعریف کرده و این متغیرها را با تابع var() در استایل عناصر مختلف (مثل body، header و دکمه‌ها) اعمال کنید و برای یکی از متغیرها مقدار جایگزین (fallback) تعیین کنید.

3.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:34

0.0

برای حل این سوال از CSS و متغیرهای سفارشی استفاده کنید: در بخش :root متغیرها را با نام‌هایی مثل --primary-color و --secondary-color تعریف کنید، سپس در قوانین CSS از var(--primary-color) برای قرار دادن مقدار در color یا background استفاده کنید. برای مقدار جایگزین از ساختار var(--unknown, #ff0000) استفاده کنید تا اگر متغیر تعریف نشده بود مقدار پیش‌فرض اعمال شود. نکته‌ها: متغیرها به صورت ارثی و با دامنهٔ بلوکی عمل می‌کنند، می‌توانید با افزودن کلاس (مثلاً .dark) مقادیر متغیر را برای تم تاریک بازنویسی کنید و با ابزار توسعه‌دهنده مرورگر مقدار محاسبه‌شده را بررسی کنید.

توسط پژوهشگر در 221 روز قبل ساعت 01:34
دسته بندی ها: CSS CSS for beginner
reyhaneh در 221 روز قبل ساعت 12:46

برای استفاده از رنگ‌ها، متغیرهای CSS را در :root تعریف کرده و با var(--primary-color) و var(--secondary-color) به عناصر مانند body و header اعمال کنید. از ساختار var(--نام, مقدار-پیش‌فرض) برای مقدار جایگزین بهره ببرید تا در صورت نامرعی بودن یا نامعتبر بودن متغیر، مقدار فشرده‌شده استفاده شود. با افزودن کلاس .dark می‌توانید مقادیر متغیرها را برای تم تاریک بازنویسی کنید و به راحتی بین تم‌ها سوئیچ کنید. در عمل، با ابزارهای توسعه‌دهنده مقدار محاسبه‌شده را بررسی کنید تا از صحت ارث‌بری و دامنهٔ بلوکی مطمئن شوید.

گزارش

1 پاسخ

جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من

در حال بارگیری...
ورود به حساب کاربری