آموزش واحد ها - units در CSS | آموزش کامل + نمونه کد

قبلی بعدی

واحد های اندازه گیری در CSS

برای مقدار دهی به ویژگی هایی مانند width - margin، باید از مقدار عددی به همراه واحد یا یکا استفاده کنیم.

واحد ها در CSS به دو نوع تقسیم می شوند:

واحدهای ثابت: سانتی متر، میلی متر، اینچ و ...
واحدهای نسبی: درصد، vw و ...

واحد های ثابت در CSS

واحدهای ثابت، به واحد هایی گفته می شود که با اندازه ی ثابت نمایش داده می شوند و نسبت به شرایط مختلف تغییر نمی کنند.

واحد	توضیح	مثال
cm	سانتی متر	آزمایشگاه
mm	میلی متر	آزمایشگاه
Q	ربع (میلی متر)	آزمایشگاه
in	اینچ (1in = 96px = 2.54cm)	آزمایشگاه
px	پیکسل (1px = ¹⁄₉₆in)	آزمایشگاه
pt	پوینت (1pt = ¹⁄₇₂in = 1.333px)	آزمایشگاه
pc	پیکاس (1pc = 12pt = 16px)	آزمایشگاه

نکته: واحد پیکسل علاوه بر ثابت بودن، نسبی هم است. اندازه ی هر پیکسل، در دستگاه های مختلف متفاوت است.

واحد های نسبی در CSS

واحدهای نسبی، به واحد هایی گفته می شود که با اندازه ی غیر ثابت نمایش داده می شوند و نسبت به شرایط خاص اندازه ی آن واحد، قابل تغییر است.

واحد	توضیح	مثال
em	برابر اندازه ی ویژگی font-size همان المان است. اگر در font-size استفاده شود، برابر با اندازه ی font-size المان والد می شود.	آزمایشگاه
rem	برابر اندازه ی ویژگی font-size المان root (المان html) است. (پیش فرض، 16 پیکسل است.)	آزمایشگاه
vh	100vh، برابر کل ارتفاع پورت نمایشی (viewport) است.	آزمایشگاه
vw	100vw، برابر کل عرض پورت نمایشی (viewport) است.	آزمایشگاه
%	بر اساس درصد عرض و ارتفاع المان است.	آزمایشگاه

نکته: viewport به معنی پورت نمایشی است. پورت نمایشی به بخشی از مرورگر گفته می شود که صفحه وب را نمایش می دهد. پورت نمایشی شامل نوار آدرس و ... نمی شود. صرفا بخش قابل نمایش سایت را شامل می شود.

خلاصه درس

در این درس با واحد ها (Units) در CSS:

واحد های ثابت
واحد های نسبی

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی