واحدهای CSS
- صفحه قبلی طرح‌بندی وب‌سایت CSS
- صفحه بعدی ویژگی‌های خاص CSS
واحدهای CSS
CSS چندین واحد طول مختلف را ارائه می‌دهد.
بسیاری از ویژگی‌های CSS از مقدار "طول" پذیرفته می‌شوند، مانند widthوmarginوpaddingوfont-size و غیره.
طول یک عدد است که با یک واحد طول دنبال می‌شود، مانند 10pxو2em و غیره.
مثال
تنظیم طول‌های مختلف با استفاده از px (پیکسل):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
فضای خالی بین عدد و واحد نباید وجود داشته باشد. اما اگر مقدار 0 باشد، می‌توان واحد را حذف کرد.
برای برخی از ویژگی‌های CSS، استفاده از اندازه منفی مجاز است.
واحدهای طول دو نوع دارند:واحدهای مطلقوواحدهای نسبی.
طول مطلق
واحدهای طول مطلق ثابت هستند و طول نشان‌دهنده با هر یک از واحدهای طول مطلق دقیقاً به اندازه نشان داده می‌شود.
استفاده از واحدهای طول مطلق در صفحه نمایش توصیه نمی‌شود زیرا اندازه صفحه نمایش بسیار متغیر است. اما اگر رسانه خروجی معلوم باشد، می‌توان از آنها استفاده کرد، به عنوان مثال برای طرح چاپ (print layout).
| واحد | توضیحات | TIY |
|---|---|---|
| cm | سانتیمتر | آزمایش کنید |
| mm | میلی‌متر | آزمایش کنید |
| in | اینچ (1in = 96px = 2.54cm) | آزمایش کنید |
| px * | پیکسل (1px = 1/96 از 1 اینچ) | آزمایش کنید |
| pt | نقطه (1pt = 1/72 از 1 اینچ) | آزمایش کنید |
| pc | پایکال (1pc = 12 pt) | آزمایش کنید |
* پیکسل (px) نسبت به دستگاه مشاهده است. برای دستگاه‌های dpi پایین، 1px یک پیکسل دستگاه (نقطه) است. برای چاپگرها و صفحه‌نمایش‌های با رزولوشن بالا، 1px چندین پیکسل دستگاه را نشان می‌دهد.
طول نسبی
واحد طول نسبی تعریف می‌کند طول نسبت به یک طول دیگر. واحدهای طول نسبی در بین رسانه‌های مختلف رندر بهتر مقیاس‌پذیر هستند.
| واحد | توضیحات | TIY |
|---|---|---|
| em | اندازه فونت (font-size) نسبت به عنصر (2em به معنای دو برابر اندازه فونت جاری) | آزمایش کنید |
| ex | نسبت به x-height (ارتفاع حرف x) فونت جاری (استفاده بسیار کم) | آزمایش کنید |
| ch | عرض نسبت به "0" (صفر) | آزمایش کنید |
| rem | اندازه فونت (font-size) نسبت به عنصر ریشه | آزمایش کنید |
| vw | درصدی که نسبت به عرض * ویدئوپورتال 1% | آزمایش کنید |
| vh | درصدی که نسبت به ارتفاع * ویدئوپورتال 1% | آزمایش کنید |
| vmin | درصدی که نسبت به اندازه کوچک‌تر * ویدئوپورتال 1% | آزمایش کنید |
| vmax | 1% بزرگتر از اندازه بزرگتر视پورت | آزمایش کنید |
| % | مقایسه با عنصر والد | آزمایش کنید |
نکته:واحدهای em و rem می‌توانند برای ایجاد طرح‌های قابل انعطاف کامل استفاده شوند!
* 视پورت (Viewport) = اندازه پنجره مرورگر. اگر视پورت 50 سانتیمتر عرض داشته باشد، 1vw = 0.5 سانتیمتر.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این واحد طول هستند.
| واحدهای طول | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
- صفحه قبلی طرح‌بندی وب‌سایت CSS
- صفحه بعدی ویژگی‌های خاص CSS
