آموزش واحدها Units در Css

بازدید: 453 بازدید
آموزش واحدها در css

واحدها Units در css ، همانند واحدها در علم ریاضی هستند.

واحدها می توانند به منظورهای مختلفی در css و برای انجام کارهای متفاوتی مورد استفاده قرار بگیرند.

در css انواع مختلفی از واحدها وجود دارند.

در ادامه سری آموزش های css، امروز واحدها را با هم مرور خواهیم کرد.

همراه ما باشید.

با سلام خدمت شما همراهان گرامی سایت پرنیان طرح

واحدها Units در css ، همانند واحدها در علم ریاضی هستند.

واحدها می توانند به منظورهای مختلفی در css و برای انجام کارهای متفاوتی مورد استفاده قرار بگیرند.

در css انواع مختلفی از واحدها وجود دارند.

در آموزش امروز واحدها و نحوه استفاده و کدنویسی آنها را با هم مرور خواهیم کرد.

 

 

واحدها در css

css چندین واحد مختلف برای بیان اندازه طول دارد.

همانطور که در آموزش های قبل دیدید، بسیاری از ویژگی های موجود در css با طول و واحدهای آن ارتباط مستقیم دارند. از جمله این واحدها می توانیم به موارد زیر اشاره کنیم:

width

margin

padding

font-size و…

طول، عددی است که بعد از واحد طول و با مقادیری مانند 10px ، 2em و… می آید.

هنگامی که میخواهید طول را تعریف کنید، نمیتوانید بین واحد و عدد آن خط فاصله قرار دهید.

و مورد مهم دیگر این است که حتی اگر مقدار ورودی برای طول 0 باشد نیز نمی توانید آن را حذف کنید. (یعنی حتما باید آن 0 را هم تعریف کنید)

شما میتوانید برای برخی از ویژگی ها در css ، مقادیر منفی هم وارد کنید.

دو روش برای تعریف واحد طول وجود دارد:

1- مطلق Absolute

2-نسبی Relative

طول های مطلق

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

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

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

در ادامه ، چند واحدِ طول به همراه توضیحات و نمونه ی کدنویسی آنها آورده شده است.

1- cm     سانتی متر                    نمونه کدنویسی

2- mm    میلی متر                      نمونه کدنویسی

3- in       اینچ (= 96px=2.54cm)   نمونه کدنویسی

4- px      پیکسل(=1/96thاز1in)     نمونه کدنویسی

5- pt      پوینت(= 1/72 از1in)        نمونه کدنویسی

6- pc     پیکا (=12pt)                   نمونه کدنویسی

 

واحد پیکسل ، به صفحه نمایش دستگاه مورد استفاده بستگی دارد. برای دستگاه هایی که dpi آنها کم است ، 1px برابر با یک نقطه از صفحه نمایش دستگاه است. برای چاپگرها و صفحه نمایش هایی که وضوح بالاتری دارند، 1px برابر با چندین نقطه دستگاه است.

واحدهای نسبی

واحدهای نسبی طول، طول هنصر را نسبت به یک خاصیت طول دیگر ، تعریف می کنند. (یعنی طول یک عنصر، نسبت به طول یک عنصر دیگر، تعریف می شود.) یعنی بستگی به طول عنصر دیگر (معمولا عنصر والد) دارد.

واحدهای نسبی طول، مقیاس بهتری در دستگاه های ارائه دهنده ، دارند.

در زیر، واحدهای طول نسبی به همراه توضیح و نمونه کدنویسی آنها ارائه شده است:

1- em  بستگی به اندازه قلم عنصر دارد. (2em به معنای 2 برابر اندازه فعلی قلم است)    نمونه کدنویسی

2- ex  بستگی به طول افقی قلم فعلی دارد. ( به ندرت استفاده می شود)                    نمونه کدنویسی

3- ch  بستگی به عرض “0” دارد.                                                                          نمونه کدنویسی

4-  rem بستگی به اندازه قلم عنصر اصلی دارد.                                                       نمونه کدنویسی

5- vw  بستگی به 1% از عرض منظره دارد.                                                             نمونه کدنویسی

6- vh  بستگی به 1% از ارتفاع منظره دارد.                                                             نمونه کدنویسی

7- vmin بستگی به 1% از کوچکترین بُعد منظره دارد.                                                نمونه کدنویسی

8- vmax بستگی به 1% از بزرگترین بُعد منظره دارد.                                                 نمونه کدنویسی

9- %   بستگی به عنصر والد دارد.                                                                        نمونه کدنویسی

 

نکته!

واحدهای em و rem  در ایجاد و طراحی ، طرح ها و چیدمان های مقیاس پذیر کاربردی هستند.

مقایسه پشتیبانی انواع مرورگرها از واحدهای مختلف

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

جدول مقایسه پشتیبانی مرورگرها از واحدهای طول

نکته!

مرورگر IE9  ویژگی vmin را با نام غیر استاندارد vm پشتیبانی میکند.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.