واحدها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

واحدهای CSS

CSS واحدهای متفاوتی برای نشان دادن طول دارد.[۱]

بسیاری از ویژگی‌های CSS مانند width ،margin،padding،font-size از مقادیر «طولی» استفاده می‌کنند.

طول، عددی است که همراه آن یک واحد طول نیز وجود دارد، مانند 10px, 2em و غیره…

بین عدد و واحد آن نباید فضای خالی وجود داشته باشد. اما، اگر مقدار آن ۰ است، می‌توان از نوشتن واحد صرف نظر کرد.

برای ویژگی‌های CSS، مقادیر منفی قابل استفاده هستند.

دو نوع واحد طولی وجود دارند: مطلق و نسبی.

مقادیر مطلق

مقادیر طول مطلق به صورت ثابت هستند و مقدار طولی که به وسیله این موارد مشخص شود دقیقاً به همان اندازه نمایش داده می‌شود.

توصیه شده‌است از مقادیر مطلق روی صفحه نمایش‌ها استفاده نشود، زیرا اندازه صفحه نمایش‌ها گستردگی زیادی دارد.

با این حال، اگر نوع رسانه خروجی مشخص باشد می توان از آنها استفاده کرد، همانند چیزی که برای نمای print وجود دارد.

واحد توضیحات مثال
cm سانتی‌متر مشاهدهٔ نتیجه
mm میلی‌متر مشاهدهٔ نتیجه
in (1in = 96px = 2.54cm) اینچ (به انگلیسی: inches) مشاهدهٔ نتیجه
px [* ۱] (1px = 1/96th of 1in) پیکسل (به انگلیسی: pixels) مشاهدهٔ نتیجه
pt (1pt = 1/72 of 1in) پوینت (به انگلیسی: points) مشاهدهٔ نتیجه
pc (1pc = 12 pt) picas مشاهدهٔ نتیجه

مقادیر نسبی

واحدهای طولی نسبی مقدار طول را با توجه به ویژگی length دیگری تنظیم می‌کند. واحدهای طولی نسبی در هنگام رندر در دستگاه‌های مختلف مقیاس پذیرتر هستند.

واحد توضیحات مثال
em با توجه به اندازه قلم عنصر (2em به معنای ۲ بار از اندازه جاری فونت است) مشاهدهٔ نتیجه
ex با توجه به ارتفاع محور x قلم جاری (بسیار کم استفاده می‌شود) مشاهدهٔ نتیجه
ch با توجه به عرض "۰" (صفر) مشاهدهٔ نتیجه
rem با توجه به اندازه قلم عنصر ریشه مشاهدهٔ نتیجه
vw با توجه به ۱٪ عرض [* ۲]viewport مشاهدهٔ نتیجه
vh با توجه به ۱٪ ارتفاع [* ۲]viewport مشاهدهٔ نتیجه
vmin با توجه به ۱٪ کوچکتر اندازه [* ۲]viewport مشاهدهٔ نتیجه
vmax با توجه به ۱٪ بزرگتر اندازه [* ۲]viewport مشاهدهٔ نتیجه
% با توجه به عنصر والد مشاهدهٔ نتیجه


میانبر:
الگو:اتب

[[رده:]]


نکته: واحدهای em و rem در ایجاد چیدمان کاملاٌ مقیاس پذیر کاربردی هستند!

viewport* = اندازه پنجره مرورگر. اگر عرض viewport برابر با 50cm باشد، 1vw=0.5cm می شود.

پشتیبانی از مرورگرها

اعداد موجود در جدول زیر نشانگر اولین نسخه از مرورگرهایی هستند که به طور کامل از واحد طول پشتیبانی می‌کنند.

واحد طول Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
em, ex, %, px, cm, mm, in, pt, pc ۱٫۰ ۳٫۰ ۱٫۰ ۱٫۰ ۳٫۵
ch ۲۷٫۰ ۹٫۰ ۱٫۰ ۷٫۰ ۲۰٫۰
rem ۴٫۰ ۹٫۰ ۳٫۶ ۴٫۱ ۱۱٫۶
vh, vw ۲۰٫۰ ۹٫۰ ۱۹٫۰ ۶٫۰ ۲۰٫۰
vmin ۲۰٫۰ ۹٫۰* ۱۹٫۰ ۶٫۰ ۲۰٫۰
vmax ۲۶٫۰ پشتیبانی نمی‌شود ۱۹٫۰ ۷٫۰ ۲۰٫۰


نکته: اینترنت اکسپلور ۹ از vmin با نام غیراستاندارد: vm پشتیبانی می‌کند.

توضیحات

  1. پیکسل‌ها (px) با توجه به دستگاه بازدید کننده است. برای دستگاه‌هایی با dpi پایین 1px، یک پیکسل دستگاه (نقطه) نمایش است. برای پرینترها و صفحه نمایش‌هایی با رزرلوشن بالا 1px به چندین پیکسل دستگاه تبدیل می‌شود.
  2. ۲٫۰ ۲٫۱ ۲٫۲ ۲٫۳
    نکته: واحدهای em و rem در ساخت یک layout قابل scale بسیار مهم هستند!
    Viewport = اندازهٔ پنجرهٔ مرورگر. اگر viewport برابر با 50cm پهنا داشته باشد، 1vm برابر با 0.5cm است.


منابع آموزشی