واحدهای اندازه گیری CSS Units
آشنایی با واحدهای اندازه گیری در زبان سی اس اس یا واحد در CSS Units
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم به معرفی واحدهای اندازه گیری در زبان css بپردازیم.
جهت تعیین اندازه برخی ویژگی های طولی و عرضی در تگ های HTML ، واحدهای اندازه گیری زیادی در زبان طراحی CSS وجود دارد.
به عنوان مثال برای تعیین اندازه ویژگی های سی اس اسی همچون width ، height ، padding ، margin ، font-size و… بایستی از CSS Units یا واحدهای اندازه گیری تعریف شده در زبان CSS استفاده نماییم.
برای تعیین اندازه ها از یک عدد و واحد اندازه گیری استفاده می شود. مثال: 5px ، 3em و..
نکات مهم
1- هرگز بین عدد و واحد ا ندازه گیری CSS فاصله نگذارید؛ چرا که یک خطای سینتکسی خواهد بود. به عنوان مثال مقادیر 5 em و یا 20 % که بین عدد و واحد اندازه گیری فاصله افتاده اشتباه است. و حالت صحیح آن 5em و %20 است.
2- در صورتی که مقدار 0 را برای ویژگی CSS مربوطه در نظر گرفتید، نیاز به استفاده از CSS Units یا واحدهای اندازه گیری ندارید.
3- در برخی ویژگی های CSS شما اجازه استفاده اندازه های منفی یا negative را دارید. ولی در برخی ویژگی های دیگر CSS اجازه استفاده اندازه های منفی یا negative را ندارید. که در زمان تدریس هر ویژگی توضیح خواهیم داد.
4- واحدهای اندازه گیری در CSS به دو بخش کلی تقسیم می شوند. که شامل واحدهای مطلق و نسبی می باشند.
تقسیم بندی کلی واحدهای اندازه گیری یا CSS Units
1- واحدهای اندازه گیری مطلق یا Absolute Lengths
2- واحدهای اندازه گیری نسبی یا Relative Lengths
واحدهای اندازه گیری مطلق یا Absolute Lengths
واحدهای اندازه گیری مطلق یک مقدار ثابت دارند. یعنی عددی که همراه واحد مربوطه می آید، دقیقا همان اندازه ای است که صفحه وب ظاهر می شود.
واحدهای اندازه گیری مطلق برای استفاده در صفحات وب خیلی توصیه نمی شوند.
و در صورت نیاز بایستی به مقدار کم استفاده شوند؛ زیرا اینگونه واحدها برای هماهنگ شدن از نظر اندازه در دستگاه ها با رزولوشن های مختلف چندان مناسب نیستند.
اما می توانند جهت لایه بندی صفحه پرینت همچون چاپ بنرهای تبلیغاتی و… مناسب واقع شوند.
در بین واحد های اندازه گیری مطلق واحد اندازه گیری px کاربرد متداول تری دارد.
و سایر واحدهای مطلق یا Absolute Lengths معمولا استفاده کمتری در صفحات وب دارند.
واحدهای اندازه گیری در زبان سی اس اس یا CSS Units
2- واحدها ی اندازه گیری نسبی یا Relative Lengths
واحدهای اندازه گیری نسبی را برای هر تگ اچ تی ام ال نسبت به یک تگ HTML دیگر و یا نسبت به واحد اندازه گیری دیگر تعیین می کنند.
نکات تکمیلی در مورد واحد های اندازه گیری نسبی زبان CSS
1- بهترین واحدهای اندازه گیری نسبی جهت طراحی وبسایت های ریسپانسیو ، em و rem هستند.
2- واحدهای اندازه گیری vw ، vh ، vmin و vmax به عنوان واحدهای نسبی وابسته به viewport هستند.
3- واحدهای vw ، vh ، vmin و vmax در طراحی سایت های مقیاس پذیر یا واکنشگرا موثر خواهد بود.
بهترین واحدهای اندازه گیری مورد تایید W3C در طراحی وب ریسپانسیو
واحد اندازه گیری px ، em و rem به عنوان بهترین واحدهای اندازه گیری در طراحی سایت واکنشگرا هستند.
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 پروژه محور
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
آشنایی با واحدهای اندازه گیری در زبان سی اس اس یا واحد در CSS Units – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید