آموزش CSS - واحدهای اندازه گیری

واحدهای اندازه گیری یکی از جنبه های مهم CSS هستند.برای تنظیم اندازه، موقعیت و فاصله عناصر در یک صفحه وب مورد استفاده قرار میگیرد. در CSS دو نوع واحد اندازه گیری وجود دارد: مطلق(Absolute) و نسبی(Relative).

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

واحدهای مطلق واحدهای ثابتی هستند که بر اساس اندازه viewportیا عنصر والد تغییر نمی کنند. نمونه هایی از واحدهای مطلق عبارتند از:

پیکسل (px): پیکسل یک نقطه روی صفحه است. این واحد معمولاً برای تنظیم اندازه های ثابت برای عناصر استفاده می شود.
اینچ (in): اینچ یک واحد فیزیکی اندازه گیری است. این واحد معمولا برای سبک های چاپ استفاده می شود.
سانتی متر (سانتی متر): یک سانتی متر نیز یک واحد فیزیکی اندازه گیری است. این واحد معمولا برای سبک های چاپ استفاده می شود.
میلی متر (mm): میلی متر یکی دیگر از واحدهای اندازه گیری فیزیکی است. این دستگاه معمولاً برای سبک های چاپ نیز استفاده می شود.
نقاط (pt): یک نقطه واحد اندازه گیری است که معمولاً در تایپوگرافی استفاده می شود. یک نقطه برابر است با 1/72 اینچ.

در مثال زیر، ما یک عنصر <div> با عرض و ارتفاع ثابت 200 پیکسل با استفاده از واحد px ایجاد کردیم. همچنین با استفاده از واحد px رنگ پس زمینه را آبی، رنگ متن را سفید و اندازه فونت را 16 پیکسل قرار دادیم. ما با استفاده از واحد px و یک حاشیه 2 پیکسلی با رنگ مشکی، پدینگ (padding)20 پیکسلی را اضافه کردیم.

:HTML

<div class="box">
  <p>این جعبه دارای عرض و ارتفاع ثابت 200 پیکسل است.</p>
</div>

:CSS

.box {
  width: 200px; /* عرض روی 200 پیکسل تنظیم شده است */
  height: 200px; /* ارتفاع روی 200 پیکسل تنظیم شده است */
  background-color: blue; /* رنگ پس زمینه آبی */
  color: white; /* متن سفید رنگی*/
  font-size: 16px; /* اندازه فونت بر روی 16 پیکسل تنظیم شده است */
  padding: 20px; /*  روی 20 پیکسل تنظیم شده است padding*/
  border: 2px solid black; /* حاشیه با رنگ مشکی روی 2 پیکسل تنظیم شده است */
}

استفاده از واحدهای اندازه‌گیری مطلق در این مثال تضمین می‌کند که اندازه box، اندازه قلم، padding و حاشیه بدون در نظر گرفتن اندازه viewport یا اندازه عنصر والد ثابت می‌مانند. این می تواند هنگام ایجاد طرح هایی که نیاز به اندازه گیری دقیق و ثابت دارند مفید باشد.

واحدهای نسبی بر اساس اندازه صفحه نمایش یا عنصر والد اندازه گیری میشوند. نمونه هایی از واحدهای نسبی عبارتند از:

درصدها (%): درصد واحد اندازه گیری است که بر اساس اندازه عنصر اصلی است. به عنوان مثال، تنظیم عرض یک عنصر بر روی 50٪، عرض عنصر را نصف عنصر اصلی می کند.
Em (em): em یک واحد اندازه گیری نسبی است که بر اساس اندازه فونت یک عنصر است. به عنوان مثال، تنظیم اندازه فونت یک عنصر بر روی 2em، فونت را دو برابر اندازه قلم عنصر والد می کند.
Rem (rem): rem یک واحد اندازه گیری نسبی است که بر اساس اندازه فونت عنصر ریشه است. این واحد برای ایجاد طرح‌بندی‌های مقیاس‌پذیر که با اندازه نمای درت تنظیم می‌شوند مفید است.
واحدهای Viewport (vw,vh,vmin,vmax): واحدهای Viewport واحدهای نسبی هستند که بر اساس اندازه ویوپورت هستند. به عنوان مثال، تنظیم عرض یک عنصر بر روی 50vw باعث می شود که عرض عنصر نصف شود.

در مثال زیر، ما یک عنصر <div> با عرض 80% با استفاده از واحد % ایجاد کردیم. این بدان معناست که عرض عنصر <div>دیو 80% عرض عنصر والد آن خواهد بود. همچنین اندازه قلم عنصر <p> را 1.2em قرار دادیم، به این معنی که اندازه قلم 1.2 برابر اندازه قلم عنصر اصلی آن خواهد بود.

:html

<div class="container">
  <p>این کانتینر دارای عرض 80 درصد و اندازه قلم 1.2em است</p>
</div>

CSS:

.container {
  width: 80%; /* عرض روی 80 درصد عرض عنصر والد تنظیم شده است */
}

p {
  font-size: 1.2em; /*اندازه قلم 1.2 برابر اندازه قلم عنصر اصلی تنظیم شده است */
}

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

جایگاه تعریف در css - درس قبلی

درس بعدی - رنگ ها