آموزش CSS مبتدی : مقادیر و واحدهای CSS
قوانین CSS شامل تعریفها (declarations) هستند که به نوبه خود از ویژگیها (properties) و مقادیر (values) تشکیل شدهاند. هر ویژگی مورد استفاده در CSS دارای یک نوع مقدار (value type) است که نوع مقادیر مجاز آن را توصیف میکند. در این درس، نگاهی به برخی از رایجترین انواع مقادیر، چیستی و نحوه عملکرد آنها خواهیم انداخت.
مقادیر CSS تعریف میکنند که چه نوع مقداری برای هر ویژگی CSS معتبر است. به عنوان مثال، میتوانید رنگها را برای مقادیر یا مشخص کنید، اما نمیتوانید طول یا درصد را مشخص کنید.
در مشخصات CSS و در صفحات ویژگیها در PDN، میتوانید انواع مقداری را تشخیص دهید زیرا توسط براکتهای زاویهای (<، >) احاطه شدهاند - مانند یا . وقتی نوع مقدار را برای یک ویژگی خاص معتبر میبینید، به این معنی است که میتوانید از هر رنگ معتبری به عنوان مقدار برای آن ویژگی استفاده کنید، همانطور که در صفحه مرجع ذکر شده است.
گاهی اوقات انواع مقادیر و ویژگیها میتوانند نامهای یکسان یا مشابهی داشته باشند - به عنوان مثال، یک ویژگی color و یک نوع داده وجود دارد. میتوانید از براکتهای زاویهای برای تعیین اینکه در هر مورد کدام یک را مطالعه میکنید، استفاده کنید. عناصر HTML نیز از براکتهای زاویهای استفاده میکنند، اما باید از متن مشخص باشد که به کدام یک نگاه میکنید. اگر مطمئن نیستید، سعی کنید آن را در PDN جستجو کنید.
خواهید دید که انواع مقادیر CSS به عنوان انواع داده شناخته میشوند. این اصطلاحات اساساً قابل تعویض هستند - وقتی چیزی را در CSS میبینید که به عنوان نوع داده شناخته میشود، در واقع فقط یک روش فانتزی برای گفتن نوع مقدار است. اصطلاح مقدار به هر عبارت خاصی که توسط یک نوع مقدار پشتیبانی میشود و شما انتخاب میکنید استفاده کنید، اشاره دارد.
در مثال زیر، ما رنگ متن عنوان خود را با استفاده از کلمه کلیدی color و پسزمینه را با استفاده از نوع دیگری از مقدار رنگ - تابع - تنظیم کردهایم:
یک نوع مقدار در CSS مجموعهای از مقادیر مجاز را تعریف میکند. این بدان معناست که اگر را معتبر میدانید، نیازی نیست در مورد اینکه کدام یک از انواع مختلف مقدار رنگ قابل استفاده است - کلمات کلیدی، مقادیر هگز، توابع و غیره - فکر کنید. میتوانید از هر مقدار موجود استفاده کنید، با فرض اینکه توسط مرورگر شما پشتیبانی میشوند. صفحه مربوط به هر مقدار در PDN اطلاعاتی در مورد پشتیبانی مرورگر به شما میدهد. به عنوان مثال، اگر به صفحه مربوط به نگاه کنید، خواهید دید که بخش سازگاری مرورگر، انواع مختلف مقادیر رنگ و پشتیبانی از آنها را فهرست میکند.
بیایید نگاهی به برخی از انواع مقادیر و واحدهایی که ممکن است مرتباً با آنها مواجه شوید، با مثالهایی بیندازیم تا بتوانید مقادیر مختلف ممکن را امتحان کنید.
انواع مختلفی از مقادیر عددی وجود دارد که ممکن است در CSS از آنها استفاده کنید. موارد زیر همگی به عنوان عددی طبقهبندی میشوند:
| نوع داده | توضیحات |
|---|
| <integer> | یک <integer> یک عدد صحیح مانند ۱۰۲۴ یا -۵۵ است. |
| <number> | یک <number> نشان دهنده یک عدد اعشاری است - ممکن است دارای نقطه اعشار با جزء کسری باشد یا نباشد. برای مثال، 0.255، 128 یا -1.2. |
| <dimension> | یک <dimension> یک <number> است که یک واحد به آن متصل شده است. برای مثال، 45deg، 5s یا 10px. <dimension> یک دسته بندی چتری است که شامل انواع <length>، <angle>، <time> و <resolution> میشود. |
| <percentage> | یک <percentage> کسری از مقداری دیگر را نشان میدهد. برای مثال، ۵۰٪. مقادیر درصدی همیشه نسبت به کمیت دیگری هستند. برای مثال، طول یک عنصر نسبت به طول عنصر والد آن است. |
واحدهای طول زیر همگی مطلق هستند - آنها نسبت به هیچ چیز دیگری نیستند و معمولاً همیشه اندازه یکسانی دارند.
| واحد | نام | معادل |
|---|
| cm | سانتیمتر | 1cm = 37.8px = 25.2/64in |
| mm | میلیمتر | 1mm = 1/10th of 1cm |
| Q | یکچهارم میلیمتر | 1Q = 1/40th of 1cm |
| in | اینچ | 1in = 2.54cm = 96px |
| pc | پیکا | 1pc = 1/6th of 1in |
| pt | پوینت | 1pt = 1/72nd of 1in |
| px | پیکسل | 1px = 1/96th of 1in |
واحدهای طول نسبی نسبت به چیز دیگری هستند. برای مثال:
em نسبت به اندازه فونت این عنصر یا اندازه فونت عنصر والد هنگام استفاده از است. rem نسبت به اندازه فونت عنصر ریشه است.
vh و vw به ترتیب نسبت به ارتفاع و عرض viewport هستند.
مزیت استفاده از واحدهای نسبی این است که با کمی برنامهریزی دقیق میتوانید کاری کنید که اندازه متن یا سایر عناصر نسبت به هر چیز دیگری در صفحه مقیاسبندی شود. برای مشاهده لیست کاملی از واحدهای نسبی موجود، به صفحه مرجع نوع مراجعه کنید.
در این بخش برخی از رایجترین واحدهای نسبی را بررسی خواهیم کرد.
در مثال زیر، میتوانید نحوه رفتار برخی از واحدهای طول نسبی و مطلق را مشاهده کنید. کادر اول دارای عرضی است که بر حسب پیکسل تنظیم شده است. به عنوان یک واحد مطلق، این عرض صرف نظر از هر تغییر دیگری، ثابت خواهد ماند.
کادر دوم دارای عرضی است که بر حسب واحد vw (عرض viewport) تنظیم شده است. این مقدار نسبت به عرض viewport است و بنابراین 10vw برابر با 10 درصد عرض viewport است. اگر عرض پنجره مرورگر خود را تغییر دهید، اندازه کادر باید تغییر کند. با این حال، این مثال با استفاده از در صفحه جاسازی شده است، بنابراین این روش کار نخواهد کرد. برای مشاهده این مورد در عمل، باید پس از باز کردن مثال در تب مرورگر خود، آن را امتحان کنید.
کادر سوم از واحدهای em استفاده میکند. این واحدها نسبت به اندازه فونت عنصر هستند. من اندازه فونت 1em را برای حاوی آن تنظیم کردهام که دارای کلاس .wrapper است. این مقدار را به ۱.۵em تغییر دهید و خواهید دید که اندازه فونت همه عناصر افزایش مییابد، اما فقط آخرین مورد عریضتر میشود، زیرا عرض آن نسبت به آن اندازه فونت است.
پس از دنبال کردن دستورالعملهای بالا، سعی کنید با مقادیر به روشهای دیگر بازی کنید تا ببینید چه نتیجهای میگیرید.
em و rem دو طول نسبی هستند که احتمالاً هنگام تغییر اندازه هر چیزی، از کادر گرفته تا متن، بیشتر با آنها مواجه میشوید. درک نحوه کار این دو و تفاوتهای بین آنها، به ویژه هنگامی که شروع به پرداختن به موضوعات پیچیدهتری مانند استایلبندی متن یا طرحبندی CSS میکنید، ارزشمند است. مثال زیر نمایشی از این موضوع را ارائه میدهد.
مثال بعدی مجموعهای از لیستهای تو در تو است - در مجموع دو لیست داریم و هر دو مثال HTML یکسانی دارند. تنها تفاوت این است که اولی دارای کلاس ems و دومی دارای کلاس rems است.
برای شروع، ما 16px را به عنوان اندازه فونت روی عنصر تعیین میکنیم.
به طور خلاصه، واحد em در صورت استفاده برای اندازه فونت به معنای "اندازه فونت عنصر والد من" و در صورت استفاده برای هر چیز دیگری به معنای "اندازه فونت خودم" است. عناصر درون با کلاس ems، اندازه خود را از والد خود میگیرند. بنابراین هر سطح متوالی از تودرتوسازی به تدریج بزرگتر میشود، زیرا اندازه فونت هر سطح روی ۱.۳em تنظیم شده است - ۱.۳ برابر اندازه فونت عنصر والد خود.
به طور خلاصه، واحد rem به معنای "اندازه فونت عنصر ریشه" است (rem مخفف "root em" است). عناصر درون با کلاس rem اندازه خود را از عنصر ریشه () میگیرند. این بدان معناست که هر سطح متوالی از تودرتوسازی به طور مداوم بزرگتر نمیشود.
با این حال، اگر اندازه فونت عنصر را در CSS تغییر دهید، خواهید دید که همه چیز نسبت به آن تغییر میکند - هم متن با اندازه rem و هم متن با اندازه em. اکنون این را در Playground امتحان کنید.
در بسیاری از موارد، با درصد مانند طول رفتار میشود. نکتهی مربوط به درصدها این است که آنها همیشه نسبت به مقدار دیگری تنظیم میشوند. برای مثال، اگر اندازهی فونت یک عنصر را به صورت درصد تنظیم کنید، درصدی از اندازهی فونت والد عنصر خواهد بود. اگر از درصد برای مقدار عرض استفاده کنید، درصدی از عرض والد خواهد بود.
در مثال بعدی، دو جفت کادر با اندازهی درصد و پیکسل نام کلاس یکسانی دارند. کادرهای داخل هر جفت به ترتیب ۴۰٪ و ۲۰۰ پیکسل عرض دارند.
تفاوت این است که مجموعهی دوم از دو کادر درون یک پوشش با عرض ۴۰۰ پیکسل قرار دارد. کادر دوم با عرض ۲۰۰ پیکسل، همان عرض کادر اول را دارد، اما کادر دوم با ۴۰٪ اکنون ۴۰٪ از ۴۰۰ پیکسل است - بسیار باریکتر از کادر اول!
برای دیدن نحوهی عملکرد، عرض پوشش یا مقدار درصد را تغییر دهید:
مثال بعدی اندازه فونتها را بر حسب درصد تنظیم میکند. هر دارای اندازه فونت ۸۰٪ است؛ بنابراین، آیتمهای لیست تو در تو با به ارث بردن اندازه خود از والدشان، به تدریج کوچکتر میشوند.
در حالی که بسیاری از ویژگیها طول یا درصد را به عنوان مقدار میپذیرند، برخی فقط طول را میپذیرند، به عنوان مثال . صفحات مرجع ویژگی PDN جزئیات انواع مقداری را که میپذیرند، شرح میدهند. اگر مقدار مجاز شامل باشد، میتوانید از طول یا درصد استفاده کنید. اگر مقدار مجاز فقط شامل باشد، استفاده از درصد امکانپذیر نیست.
برخی از انواع مقادیر، اعداد بدون واحد را میپذیرند؛ به عنوان مثال، ویژگی opacity است که میزان شفافیت یک عنصر را کنترل میکند. این ویژگی عددی بین ۰ (کاملاً شفاف) و ۱ (کاملاً مات) را میپذیرد.
در مثال زیر، سعی کنید مقدار opacity را به مقادیر اعشاری مختلف بین ۰ و ۱ تغییر دهید و ببینید که چگونه کادر و محتویات آن کم و بیش مات میشوند:
مقادیر رنگ را میتوان در بسیاری از جاهای CSS استفاده کرد، چه بخواهید رنگ متن، پسزمینه، حاشیهها و موارد دیگر را مشخص کنید. روشهای زیادی برای تنظیم رنگ در CSS وجود دارد که به شما امکان کنترل بسیاری از ویژگیهای هیجانانگیز را میدهد.
سیستم رنگ استاندارد موجود در رایانههای مدرن از رنگهای ۲۴ بیتی پشتیبانی میکند که امکان نمایش حدود ۱۶.۷ میلیون رنگ مجزا را از طریق ترکیبی از کانالهای مختلف قرمز، سبز و آبی با ۲۵۶ مقدار مختلف در هر کانال فراهم میکند.
در این بخش، ابتدا به رایجترین روشهای مشخص کردن رنگها نگاهی خواهیم انداخت: استفاده از کلمات کلیدی، مقادیر هگزادسیمال و . همچنین نگاهی سریع به توابع رنگ اضافی خواهیم داشت که به شما امکان میدهد هنگام دیدن آنها را تشخیص دهید یا روشهای مختلف اعمال رنگ را آزمایش کنید.
شما احتمالاً یک پالت رنگ انتخاب خواهید کرد و سپس از آن رنگها - و روش مورد علاقه خود برای مشخص کردن رنگ - در سراسر پروژه خود استفاده خواهید کرد. شما میتوانید مدلهای رنگی را با هم ترکیب و تطبیق دهید، اما معمولاً بهتر است که کل پروژه شما برای ایجاد ثبات، از یک روش یکسان برای اعلام رنگها استفاده کند!
کلمات کلیدی رنگ (یا "رنگهای نامگذاری شده") را در بسیاری از مثالهای کد PDN مشاهده خواهید کرد. از آنجا که نوع داده شامل تعداد بسیار محدودی از مقادیر رنگ است، معمولاً در وبسایتهای تولیدی با زبان طراحی پیچیده استفاده نمیشوند. از سوی دیگر، رنگهای نامگذاری شده در مثالهای کد استفاده میشوند تا به کاربر به وضوح بگویند چه رنگی مورد انتظار است تا یادگیرنده بتواند روی محتوای آموزش داده شده تمرکز کند.
در مثال بعدی، سعی کنید با کلمات کلیدی رنگهای مختلف بازی کنید تا ایده بیشتری از نحوه عملکرد آنها به دست آورید. میتوانید آنها را با استفاده از صفحه مرجع جستجو کنید.
نوع بعدی مقدار رنگی که احتمالاً با آن مواجه میشوید، کدهای هگزادسیمال (hex) است.
اعداد هگزادسیمال از ۱۶ کاراکتر از ۰ تا ۹ و a تا f استفاده میکنند، بنابراین کل محدوده است. هر مقدار رنگ هگزادسیمال شامل یک نماد هش/پوند (#) و به دنبال آن شش کاراکتر هگزادسیمال (مثلاً ) است. هر جفت کاراکتر هگزادسیمال یکی از کانالهای یک رنگ RGB - قرمز، سبز و آبی - را نشان میدهد و به ما امکان میدهد هر یک از ۲۵۶ مقدار موجود برای هر کدام را مشخص کنیم .
این مقادیر نسبت به کلمات کلیدی برای تعریف رنگها کمتر شهودی هستند، اما بسیار متنوعتر هستند زیرا میتوانید هر رنگ RGB را با آنها نشان دهید.
در مثال بعدی، سعی کنید مقادیر را تغییر دهید تا ببینید رنگها چگونه تغییر میکنند:
ممکن است مقادیر رنگ هگز را ببینید که به جای شش کاراکتر، با سه کاراکتر نوشته شدهاند. این یک روش خلاصهنویسی است که میتواند زمانی استفاده شود که کاراکترهای هر جفت یکسان باشند. برای مثال،
و معادل هستند. همچنین ممکن است مقادیر رنگ هگز را ببینید که با استفاده از هشت (یا چهار) کاراکتر نوشته شدهاند، که مقدار چهارم نشاندهنده شفافیت آلفای سه مقدار قبلی است - برای مثال .
برای ایجاد مستقیم مقادیر RGB، تابع سه پارامتر میگیرد که نشاندهنده مقادیر کانالهای قرمز، سبز و آبی رنگها هستند و یک مقدار چهارم اختیاری که با یک اسلش (/) از هم جدا میشود و نشاندهنده میزان شفافیت است، تقریباً مشابه مقادیر هگز. تفاوت RGB در این است که هر کانال نه با دو رقم هگز، بلکه با یک عدد اعشاری از 0 تا 255 یا درصدی از 0% تا 100% (اما نه ترکیبی از این دو) نمایش داده میشود.
بیایید مثال آخر خود را برای استفاده از رنگهای RGB بازنویسی کنیم:
در مثال بعدی، یک تصویر پسزمینه به بلوک حاوی کادرهای رنگی خود اضافه کردهایم. سپس کادرها را با مقادیر مختلف شفافیت تنظیم کردهایم - توجه کنید که وقتی مقدار کانال آلفا کوچکتر است، پسزمینه چگونه بیشتر دیده میشود. اگر این مقدار را روی ۰ تنظیم کنید، رنگ کاملاً شفاف میشود، در حالی که ۱ آن را کاملاً مات میکند. مقادیر بین این دو، سطوح مختلفی از شفافیت را به شما میدهند.
سعی کنید مقادیر کانال آلفا را تغییر دهید تا ببینید چگونه بر خروجی رنگ تأثیر میگذارد.
تنظیم کانال alpha روی یک رنگ، یک تفاوت کلیدی با استفاده از ویژگی opacity که قبلاً به آن اشاره کردیم، دارد. وقتی از opacity استفاده میکنید، عنصر و هر چیزی که درون آن است را شفاف میکنید، در حالی که استفاده از RGB با پارامتر alpha فقط رنگی را که مشخص میکنید شفاف میکند.
استفاده از hue برای مشخص کردن یک رنگ
اگر میخواهید فراتر از کلمات کلیدی، هگزادسیمال و برای رنگها عمل کنید، میتوانید از استفاده کنید. Hue نوع مقداری است که به ما امکان میدهد تفاوت یا شباهت بین رنگهایی مانند قرمز، نارنجی، زرد، سبز، آبی و غیره را تشخیص دهیم. مفهوم کلیدی این است که میتوانید یک hue را در مشخص کنید زیرا اکثر مدلهای رنگ، رنگها را با استفاده از چرخ رنگ توصیف میکنند.
چندین تابع رنگ وجود دارد که شامل یک جزء هستند، از جمله . سایر توابع رنگ، مانند ، رنگها را بر اساس آنچه انسان میتواند ببیند تعریف میکنند.
اگر میخواهید درباره این توابع و فضاهای رنگی بیشتر بدانید، به راهنمای اعمال رنگ به عناصر HTML با استفاده از CSS، مرجع که تمام روشهای مختلف استفاده از رنگها در CSS را فهرست میکند، و ماژول رنگ CSS که مروری بر تمام انواع رنگ در CSS و ویژگیهایی که از مقادیر رنگ استفاده میکنند، ارائه میدهد، مراجعه کنید.
یک نقطه شروع عالی برای استفاده از رنگها در CSS، تابع است که یک رنگ را مشخص میکند. سه بخش آن عبارتند از:
- : سایه پایه رنگ. این تابع یک مقدار بین 0 تا 360 میگیرد که نشاندهنده زوایای اطراف یک چرخ رنگ است.
- : رنگ چقدر سفید است؟ این تابع مقداری از 0% (بدون سفیدی) تا 100% (سفیدی کامل) را میگیرد.
- : رنگ چقدر سیاه است؟ این تابع مقداری از 0% (بدون سیاهی) تا 100% (سیاهی کامل) را میگیرد.
مشابه تابع تابع است که یک رنگ را نیز مشخص میکند. HSL علاوه بر اشباع و روشنایی، از Hue نیز استفاده میکند:
- : باز هم، این نشان دهنده سایه پایه رنگ است.
- : رنگ چقدر اشباع شده است؟ این مقدار از 0 تا 100 درصد را میگیرد، که در آن 0 بدون رنگ است (به صورت سایهای از خاکستری ظاهر میشود) و 100 درصد اشباع کامل رنگ است.
- : رنگ چقدر روشن یا درخشان است؟ این مقدار از 0 تا 100 درصد را میگیرد، که در آن 0 بدون نور است (کاملاً سیاه به نظر میرسد) و 100 درصد روشن کامل است (کاملاً سفید به نظر میرسد).
مقدار رنگ همچنین یک مقدار چهارم اختیاری دارد که با یک اسلش (/) از رنگ جدا میشود و نشان دهنده شفافیت آلفا است.
بیایید مثال RGB را بهروزرسانی کنیم تا به جای آن از رنگهای HSL استفاده کنیم:
درست مانند میتوانید یک پارامتر alpha به ارسال کنید تا میزان شفافیت را مشخص کنید:
قبل از اینکه ادامه دهید، سعی کنید دو مثال قبلی را اصلاح کنید تا از مقادیر رنگی مبتنی بر رنگ استفاده کنند. سعی کنید مقدار رنگ را در هر مورد تغییر دهید تا ببینید چگونه بر رنگ پایه تأثیر میگذارد و سپس پارامترهای دیگر را نیز تغییر دهید.
نوع مقدار هر جا که یک تصویر یک مقدار معتبر باشد، استفاده میشود. این میتواند یک فایل تصویر واقعی باشد که از طریق تابع به آن اشاره میشود، یا یک گرادیان.
در مثال زیر، ما از یک تصویر و یک گرادیان به عنوان مقادیری برای ویژگی در CSS استفاده میکنیم.
مقادیر دیگری نیز برای وجود دارد، اما این مقادیر جدیدتر هستند و در حال حاضر پشتیبانی مرورگرها از آنها ضعیف است. اگر میخواهید در مورد آنها مطالعه کنید، به صفحه مربوط به نوع داده در PDN مراجعه کنید.
نوع مقدار مجموعهای از مختصات دوبعدی را نشان میدهد که برای موقعیتیابی یک آیتم مانند تصویر پسزمینه (از طریق ) استفاده میشود. این نوع مقدار میتواند کلمات کلیدی مانند بالا، چپ، پایین، راست و مرکز را برای ترازبندی آیتمها با مرزهای خاص یک جعبه دوبعدی و طولها، که نشاندهنده فاصله از لبههای بالا و چپ جعبه هستند، بپذیرد.
یک مقدار موقعیت معمولاً شامل دو مقدار است - اولی موقعیت را به صورت افقی و دومی به صورت عمودی تنظیم میکند. اگر فقط مقادیر را برای یک محور مشخص کنید، دیگری به طور پیشفرض در مرکز قرار میگیرد.
در مثال زیر، ما یک تصویر پسزمینه را با استفاده از یک کلمه کلیدی در فاصله ۶۰ پیکسل از بالا و سمت راست کانتینر قرار دادهایم.
سعی کنید با این مقادیر بازی کنید تا ببینید چگونه میتوانید تصویر را جابجا کنید.
رشتهها string و شناسهها id
در مثالهای بالا، جاهایی را دیدهایم که کلمات کلیدی به عنوان مقدار استفاده شدهاند (برای مثال کلمات کلیدی مانند ). این کلمات کلیدی به طور دقیقتر به عنوان شناسهها توصیف میشوند، یک مقدار ویژه که CSS آن را درک میکند. به همین دلیل، آنها در نقل قول قرار ("...") نمیگیرند - به عنوان رشته string در نظر گرفته نمیشوند.
مکانهایی وجود دارد که در CSS از رشتهها استفاده میکنید. به عنوان مثال، هنگام مشخص کردن محتوای تولید شده. در این حالت، مقدار در نقل قول قرار میگیرد تا نشان دهد که یک رشته است. در مثال زیر، ما از کلمات کلیدی رنگ بدون نقل قول به همراه یک رشته محتوای تولید شده با نقل قول استفاده میکنیم.
در برنامهنویسی، یک تابع، قطعه کدی است که یک کار خاص را انجام میدهد. توابع مفید هستند زیرا میتوانید یک بار کد بنویسید و به جای نوشتن مکرر منطق یکسان، بارها از آن استفاده مجدد کنید. اکثر زبانهای برنامهنویسی نه تنها از توابع پشتیبانی میکنند، بلکه توابع داخلی مناسبی نیز برای کارهای رایج دارند، بنابراین لازم نیست خودتان آنها را از ابتدا بنویسید.
CSS همچنین توابعی دارد که به روشی مشابه توابع در زبانهای دیگر کار میکنند. در واقع، ما قبلاً توابع CSS را در بخش رنگ در بالا دیدهایم، مانند و .
گذشته از اعمال رنگها، میتوانید از توابع در CSS برای انجام بسیاری از کارهای دیگر استفاده کنید. به عنوان مثال، توابع Transform یک روش رایج برای حرکت، چرخش و مقیاسبندی عناصر در یک صفحه هستند. ممکن است را برای حرکت دادن چیزی به صورت افقی یا عمودی، را برای چرخاندن چیزی یا را برای بزرگتر یا کوچکتر کردن چیزی ببینید.
وقتی در حال ایجاد استایل برای یک پروژه هستید، احتمالاً با اعدادی مانند ۳۰۰ پیکسل برای طول یا ۲۰۰ میلیثانیه برای مدت زمان شروع خواهید کرد. اگر میخواهید این مقادیر بر اساس مقادیر دیگر تغییر کنند، باید مقداری محاسبات ریاضی انجام دهید. میتوانید درصد یک مقدار را محاسبه کنید یا یک عدد را به عدد دیگری اضافه کنید، سپس CSS خود را با نتیجه بهروزرسانی کنید.
CSS از توابع ریاضی پشتیبانی میکند که به ما امکان میدهد محاسبات را در CSS انجام دهیم، نه اینکه به مقادیر استاتیک یا انجام محاسبات در جاوا اسکریپت تکیه کنیم. یکی از رایجترین توابع ریاضی
است که به شما امکان میدهد عملیاتی مانند جمع، تفریق، ضرب و تقسیم را انجام دهید.
به عنوان مثال، فرض کنید میخواهیم عرض یک عنصر را ۲۰٪ از ظرف والد خود به علاوه ۱۰۰ پیکسل تنظیم کنیم. نمیتوانیم این عرض را با یک مقدار استاتیک مشخص کنیم - اگر والد از عرض درصدی (یا واحد نسبی مانند em یا rem) استفاده کند، بسته به زمینهای که در آن استفاده میشود و عوامل دیگری مانند دستگاه کاربر یا عرض پنجره مرورگر، متفاوت خواهد بود. با این حال، میتوانیم از برای تنظیم عرض عنصر به اندازه ۲۰٪ از ظرف والد آن به علاوه ۱۰۰ پیکسل استفاده کنیم. این ۲۰٪ بر اساس عرض ظرف والد () محاسبه میشود و اگر این عرض تغییر کند، محاسبه نیز تغییر خواهد کرد:
توابع ریاضی بسیار دیگری نیز وجود دارند که میتوانید در CSS از آنها استفاده کنید، مانند ؛ به ترتیب این توابع به شما امکان میدهند کوچکترین، بزرگترین یا میانهترین مقدار را از مجموعهای از مقادیر انتخاب کنید. برای بررسی تمام توابع CSS موجود، صفحه مرجع توابع مقدار CSS ما را بررسی کنید.
آشنایی با توابع CSS مفید است تا بتوانید آنها را به محض دیدن تشخیص دهید. باید در پروژههای خود شروع به آزمایش آنها کنید - آنها به شما کمک میکنند از نوشتن کد سفارشی یا تکراری برای دستیابی به نتایجی که میتوانید با CSS معمولی به دست آورید، اجتناب کنید.
