آموزش CSS

آموزش CSS - واحدها

واحدها برای مشخص کردن مقدار طول غیر صفر در خصوصیت های CSS به کار می رود.

درک واحدهای CSS:

واحدی که طول توسط آن اندازه گیری می شود می تواند به صورت پیکسل، نقطه یا سایر موارد باشد. همچنین این واحد ممکن است نسبی  همچون استفاده از درصد و واحد Em باشد. مشخص کردن واحد در زبان برنامه نویسی CSS برای مقادیر غیر صفر ضروی و اجباری است زیرا هیچ مقدار پیش فرضی برای این موارد وجود ندارد. از دست دادن یا نادیده گرفتن واحد به عنوان خطا در نظر گرفته می شود. با اینحال اگر  مقدار صفر باشد، می توان واحد را حذف کرد.

نکته: طول به اندازه گیری مسافت اطلاق می شود. طول اندازه گیری شامل یک مقدار عددی و واحدی همچون 10 پیکسل است. فضاهای سفید نمی تواند بین عدد و واحد ظاهر شود.

واحد طول نسبی:

واحد طول نسبی، طول مرتبط به خصوصیت  length را مشخص می کند. واحدهای نسبی عبارتند از:

واحد

توضیح

em

اندازه فونت فعلی

ex

ارتفاع X فونت فعلی

واحد های em و Ex به اندازه فونتی که بر روی المان اعمال شده است بستگی دارد.

استفاده از واحد em:

اندازه  1em معادل مقدار محاسبه شده خصوصیت font-size المان است که مورد استفاده قرار می گیرد. این مقدار ممکن است برای اندازه گیری افقی یا عمودی استفاده شود. به عنوان مثال اگر اندازه فونت المان بر روی 16 پیکسل و ارتفاع خط بر روی 2.5 em تنظیم شده باشد پس مقدار محاسبه شده ارتفاع خط در واحد پیکسل به صورت زیر خواهد بود.

2.5 x 16px = 40px.

P {
    font-size: 16px;
    line-height: 2.5em;
}

این قانون یک استنثا  دارد و آن هم زمانی است که em در مقدار خودِ خصوصیت، اندازه فونت مشخص شده باشد. در چنین شرایطی این مقدار به اندازه وفنت المان والد اشاره دارد. بنابراین زمانی که اندازه فونت در واحد em مشخص می شود، 1em معادل اندازه فونت به ارث برده خواهد بود.

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;
}

اندازه پیش فرض برای فونت ها در مرورگرهای مدرن حدود 16 پیکسل است. اولین مرحله ای که پیش رو دارید کاهش این اندازه برای کل سند است. اینکار با تنظیم اندازه فونت بدنه به 62.5 درصد انجام می شود.

استفاده از واحد ex:

واحد ex معادل با ارتفاع x فونت فعلی است. ارتفاع x اغلب معادل ارتفاع x با حرف کوچک است. با اینحال، ex حتی برای فونت هایی که در برگیرنده x نیستند هم تعریف می شود.

x height

واحد طول مطلق:

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

واحد

توضیح

in

اینچ – یک اینچ معادل 2.54 سانتی متر است

cm

سانتی متر

mm

میلی متر

pt

نقطه: در زبان برنامه نویسی CSS، یک نقطه به صورت 1/72 اینچ تعریف می شود

pc

پیکاس – یک پیکاس 12 نقطه است.

px

واحد پیکسل – نقطه است0.75 یک پیکسل معادل

واحدهای فیزیکی مطلق همچون in, cm, mm و غیره باید برای رسانه های چاپی  و دستگاه هایی با رزولوشون بالا مورد استفاده قرار گیرد.  برای دستگاه هایی همچون دسکتاپ و دستگاه هایی با رزولوشون پایین بهتر است از واحد پیکسل یا em استفاده کنید.

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 و درصد استفاده می کنند می توانند خود را با محیط خروجی مقیاس بندی نمایند.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...