آشنایی با واحدهای اندازه گیری در زبان سی اس اس یا واحد در CSS Units 

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم به معرفی واحدهای اندازه گیری در زبان css بپردازیم.

جهت تعیین اندازه برخی ویژگی های طولی و عرضی در تگ های HTML ، واحدهای اندازه گیری زیادی در زبان طراحی CSS وجود دارد.

به عنوان مثال برای تعیین اندازه ویژگی های سی اس اسی همچون width ، height ، padding ، margin ، font-size و… بایستی از CSS Units یا واحدهای اندازه گیری تعریف شده در زبان CSS استفاده نماییم.

برای تعیین اندازه ها از یک عدد و واحد اندازه گیری استفاده می شود. مثال: ۵px ، ۳em و..

واحدهای اندازه گیری یا css units واحد در سی اس اس آموزش طراحی سایت - سایت آموزی

نکات مهم

۱- هرگز بین عدد و واحد ا ندازه گیری CSS فاصله نگذارید؛ چرا که یک خطای سینتکسی خواهد بود. به عنوان مثال مقادیر ۵ em و یا ۲۰ % که بین عدد و واحد اندازه گیری فاصله افتاده اشتباه است. و حالت صحیح آن ۵em و %۲۰ است.

۲- در صورتی که مقدار ۰ را برای ویژگی CSS مربوطه در نظر گرفتید، نیاز به استفاده از CSS Units یا واحدهای اندازه گیری ندارید.

۳- در برخی ویژگی های CSS شما اجازه استفاده اندازه های منفی یا negative را دارید. ولی در برخی ویژگی های دیگر CSS اجازه استفاده اندازه های منفی یا negative را ندارید. که در زمان تدریس هر ویژگی توضیح خواهیم داد.

۴- واحدهای اندازه گیری در CSS به دو بخش کلی تقسیم می شوند. که شامل واحدهای مطلق و نسبی می باشند.

تقسیم بندی کلی واحدهای اندازه گیری یا CSS Units

۱- واحدهای اندازه گیری مطلق یا Absolute Lengths

۲- واحدهای اندازه گیری نسبی یا Relative Lengths

واحدهای اندازه گیری مطلق یا Absolute Lengths

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

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

و در صورت نیاز بایستی به مقدار کم استفاده شوند؛ زیرا اینگونه واحدها برای هماهنگ شدن از نظر اندازه در دستگاه ها با رزولوشن های مختلف چندان مناسب نیستند.

اما می توانند جهت لایه بندی صفحه پرینت همچون چاپ بنرهای تبلیغاتی و… مناسب واقع شوند.

در بین واحد های اندازه گیری مطلق واحد اندازه گیری px کاربرد متداول تری دارد.

و سایر واحدهای مطلق یا Absolute Lengths معمولا استفاده کمتری در صفحات وب دارند.

واحدهای اندازه گیری در زبان سی اس اس یا CSS Units

۲- واحدها ی اندازه گیری نسبی یا Relative Lengths

واحدهای اندازه گیری نسبی را برای هر تگ اچ تی ام ال نسبت به یک تگ HTML دیگر و یا نسبت به واحد اندازه گیری دیگر تعیین می کنند.

نکات تکمیلی در مورد واحد های اندازه گیری نسبی زبان CSS

۱- بهترین واحدهای اندازه گیری نسبی جهت طراحی وبسایت های ریسپانسیو ، em و rem هستند.

۲- واحدهای اندازه گیری vw ، vh ، vmin و vmax به عنوان واحدهای نسبی وابسته به viewport هستند.

۳- واحدهای vw ، vh ، vmin و vmax در طراحی سایت های مقیاس پذیر یا واکنشگرا موثر خواهد بود.

بهترین واحدهای اندازه گیری مورد تایید W3C در طراحی وب ریسپانسیو

واحد اندازه گیری px ، em و rem به عنوان بهترین واحدهای اندازه گیری در طراحی سایت واکنشگرا هستند.

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 پروژه محور

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

آشنایی با واحدهای اندازه گیری در زبان سی اس اس یا واحد در CSS Units – اختصاصی سایت آموزی