در جلسه قبل از آموزش CSS با نحوه تنظیم ابعاد در CSS آشنا شدید. در این بخش قصد داریم شما را با واحد اندازه گیری در CSS آشنا کنیم.
درک واحد اندازه گیری در CSS :
واحدی که طول توسط آن اندازه گیری می شود می تواند به صورت پیکسل، نقطه یا سایر موارد باشد. همچنین این واحد ممکن است نسبی (relative) همچون استفاده از درصد و واحد Em باشد.
مشخص کردن واحد اندازه گیری در CSS برای مقادیر غیر صفر ضروی و اجباری است زیرا هیچ مقدار پیش فرضی برای این موارد وجود ندارد.
از دست دادن یا نادیده گرفتن واحد به عنوان خطا در نظر گرفته می شود. با این حال اگر مقدار صفر باشد، می توان واحد را حذف کرد.
نکته: طول به اندازه گیری مسافت اطلاق می شود. طول اندازه گیری شامل یک مقدار عددی و واحدی همچون ۱۰ پیکسل است. فضاهای سفید نمی تواند بین عدد و واحد ظاهر شود.
واحد طول نسبی:
واحد طول نسبی، طول مرتبط به خصوصیت length را مشخص می کند. واحدهای نسبی عبارتند از:
| واحد | توضیح |
| em | اندازه فونت فعلی |
| ex | ارتفاع X فونت فعلی |
واحد های em و Ex به اندازه فونتی که بر روی المان اعمال شده است بستگی دارد.
استفاده از واحد em:
اندازه ۱em معادل مقدار محاسبه شده خصوصیت font-size المان است که مورد استفاده قرار می گیرد. این مقدار ممکن است برای اندازه گیری افقی یا عمودی استفاده شود. به عنوان مثال اگر اندازه فونت المان بر روی ۱۶ پیکسل و ارتفاع خط بر روی ۲٫۵ em تنظیم شده باشد پس مقدار محاسبه شده ارتفاع خط در واحد پیکسل به صورت زیر خواهد بود.
۲٫۵ * ۱۶px = ۴۰px
|
1 2 3 4 |
P { font-size: 16px; line-height: 2.5em; } |
این قانون یک استنثا دارد و آن هم زمانی است که em در مقدار خودِ خصوصیت، اندازه فونت مشخص شده باشد. در چنین شرایطی این مقدار به اندازه وفنت المان والد اشاره دارد.
بنابراین زمانی که اندازه فونت در واحد em مشخص می شود، ۱em معادل اندازه فونت به ارث برده خواهد بود.
|
1 2 3 4 5 6 7 8 9 10 11 |
body { font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; } p { font-size: 1.6em; } p:firt-letter { font-size: 3em; font-weight: bold; } |
اندازه پیش فرض برای فونت ها در مرورگرهای مدرن حدود ۱۶ پیکسل است. اولین مرحله ای که پیش رو دارید کاهش این اندازه برای کل سند است. اینکار با تنظیم اندازه فونت بدنه به ۶۲٫۵ درصد انجام می شود.
استفاده از واحد ex:
واحد ex معادل با ارتفاع x فونت فعلی است. ارتفاع x اغلب معادل ارتفاع x با حرف کوچک است. با اینحال، ex حتی برای فونت هایی که در برگیرنده x نیستند هم تعریف می شود.
واحد طول مطلق:
واحد طول مطلق در ارتباط با یکدیگر ثابت هستند. آن ها به خروجی وابسته اند و عمدتا زمانی مورد استفاده قرار می گیرند و مفید خواهند بود که دیوایس شناخته شده باشد.
واحد مطلق در برگیرنده واحدهای فیزیکی و واحد px است.
| واحد | توضیح |
| in | اینچ – یک اینچ معادل ۲٫۵۴ سانتی متر است |
| cm | سانتی متر |
| mm | میلی متر |
| pt | نقطه: در زبان برنامه نویسی CSS، یک نقطه به صورت ۱/۷۲ اینچ تعریف می شود |
| pc | پیکاس – یک پیکاس ۱۲ نقطه است. |
| px | واحد پیکسل – نقطه است۰٫۷۵ یک پیکسل معادل |
واحدهای فیزیکی مطلق همچون in, cm, mm و غیره باید برای رسانه های چاپی و دستگاه هایی با رزولوشون بالا مورد استفاده قرار گیرد.
برای دستگاه هایی همچون دسکتاپ و دستگاه هایی با رزولوشون پایین بهتر است از واحد پیکسل یا em استفاده کنید.
|
1 2 3 4 5 6 |
h1 { margin: 0.5in; } /* inches */ h2 { line-height: 3cm; } /* centimeters */ h3 { word-spacing: 4mm; } /* millimeters */ h4 { font-size: 12pt; } /* points */ h5 { font-size: 1pc; } /* picas */ h6 { font-size: 12px; } /* picas */ |
نکته: استایل هایی که از واحدهای نسبی همچون em و درصد استفاده می کنند می توانند خود را با دیوایس خروجی مقیاس بندی نمایند.
امیدوارم در این بخش آموزش CSS, از واحد اندازه گیری در CSS نهایت استفاده را برده باشید.
در بخش بعدی با فرمت بندی بصری در CSS آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
