واحد های اندازه گیری در CSS

زمان مطالعه: 6 دقیقه

هنگامی که درباره طراحی وبسایت صحبت می کنیم از جمله کلماتی که زیاد به گوشمان میخورد CSS است و اصولا این سوال برای ما پیش می آید که CSS چیست؟

واحد های اندازه گیری در CSS چه هستند؟

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

یکی از این زبان‌ها CSS می‌باشد که می‌تواند کمک شایانی در این زمینه به شما بکند.

CSS چه اهمیت و ویژگی ای دارد؟

با استفاده از CSS چه کارهایی را می توان انجام داد؟

CSS چه واحد های اندازه گیری دارد؟

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

CSS چیست؟

CSS چیست؟

سی اس اس مخفف کلمه Cascading Style Sheet می باشد. CSS یک زبان برای ایجاد نمودن ویژگی های ظاهری اسناد و اطلاعات وبسایت می باشد.

سی اس اس از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و XHTML می باشد علاوه بر این از زبان های اسکریپت دیگری مانند plain XML، SVG و XUL نیز به خوبی پشتیبانی می نماید.

شما قادر هستید با استفاده از CSS استایل سایت را مانند رنگ، فونت، صفحات مختلف (صفحه اصلی، صفحه درگاه پرداخت در وردپرس و…) را براساس طرح مورد نظر خود تغییر دهید.

کاربرد های CSS

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

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

ویژگی های بارز CSS

  1. سازگاری و هماهنگی بیشتر در طراحی وبسایت
  2. گزینه های قالب و تم بیشتر
  3. جلوگیری از کدنویسی غیراصولی
  4. بهبود سرعت بارگیری
  5. امکان افزودن جلوه های بصری جذاب و انیمیشن
  6. بهینه سازی موتور جستجو
  7. دسترسی بهتر و آسان تر به کدها

معرفی واحد های اندازه گیری در CSS

واحد های اندازه گیری در CSS

واحد های مختلفی در CSS برای مشخص نمودن اندازه های مختلف وجود داره اما به صورت کلی ما واحد ها را به دو دسته:

  • مستقل (absolute)
  • وابسته (Relative)

واحد های مستقل (absolute)

واحد هایی می باشند که اندازه آنها در هر حالتی ثابت باقی خواهد ماند.

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

واحد های مستقل عبارت اند از:

پیکسل (PX)

 عمومی ترین واحد مورد استفاده در CSS محسوب می شود.

در حالت پیشفرض، اندازه پیکسل ها در دستگاه و سیستم های مختلف، می تواند تفاوت داشته باشد، اما CSS این مشکل را با در نظر گرفتن اندازه یک پیکسل در دستگاهی با تراکم پیکسل 96DPI (نقطه در اینچ) برطرف نمود.

با توجه به نامتغیر بودن واحد اندازه گیری اینچ، ابعاد یک پیکسل در تمامی دستگاه ها یکسان خواهد بود.

به بیان ساده تر در CSS، اندازه پیکسل به این شرح است: 1px = 1/96 in

نقطه (PT)

واحد نقطه، تشابه زیادی به واحد پیکسل دارد.

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

اندازه واحد نقطه بدین شکل مشخص می گردد:  1pt = 1/72 in

پیکا (Pc)

واحد پیکا، به اندازه دو واحد قبلی یعنی PT و PX  مورد استفاده قرار نمی گیرد.

البته اندازه آن مقدار بسیار کمی نامتغیر می باشد و بر این اساس مشخص می‌ گردد: 1pc = 1/6 in

سانتی متر(Cm)، میلی متر(mm) و اینچ (in)

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

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

رابطه بین سانتی متر، میلی متر و اینچ بدین شکل می باشد. 1 in = 2.54 cm 25.4 mm

واحد های وابسته (Relative)

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

از جمله ی این واحد ها می توان به موارد زیر اشاره نمود:

درصد (%)

درصد عمومی ترین واحد وابسته ای است که در CSS مورد استفاده قرار می‌گیرد.

یک عنصر div با کد div {width: 90%;} همواره دارای عرضی برابر با نود درصد عرض عنصر پدر خود خواهد بود.در صورت ایجاد هر نوع تغییر عرض عنصر پدر، عرض عنصر div هم به تناسب تغییر خواهد نمود اما همیشه نود درصد عنصر پدر را حفظ خواهد کرد.

VH و VW

این واحد ها، مخفف و کوتاه شده عبارات Viewport Height و  Viewport Width می باشند.

Viewport، به بخشی از صفحه وبسایت گفته می شود که پیش روی ما قرار دارد.

این دو واحد، همانند واحد درصد عمل می‌کنند، فقط با این تفاوت که اندازه آنها، به اندازه عنصر پدر بستگی ندارد، بلکه مستقیما به طول و عرض Viewport  وبسایت ما ارتباط دارد.

EM

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

Rem

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

بر اساس همین دلیل، به این واحد rem یا  root EM(مرتبط به عنصر ریشه وبسایت یا html) گفته می‌شود.

*به این نکته نیز توجه کنید که بر خلاف واحد EM، توسط واحد rem، عرض عنصر child به اندازه ۶۰ پیکسل تنظیم می شود.

پشتیبانی مرورگرها از واحد های اندازه گیری

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

به صورت کلی تمام واحدهای مطلق نظیر px، pt، pc، cm و mm در همه مرورگرها پشتیبانی می‌شوند. البته استثنا هم وجود دارد وem  در برخی از مرورگر ها پشتیبانی نمی‌شود.

واحد rem نیز از مرورگر نسخه Internet Explorer 8 به پایین پشتیبانی ندارد. حتی در IE9 و IE10 استفاده از آن با چالش هایی روبرو است.

واحدهای vh,vw کمترین پشتیبانی را دارند.

محدودیت های زبان CSS

نبود قابلیت انتخاب گزینه والد

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

کنترل نامناسب صفحه بندی های انعطاف پذیر

هرچند نسخه جدید CSS 3 امکانات زیادی نظیر فونت ها، رنگ ها، حاشیه ها و… را ارائه داده است اما محدودیت هایی در زمینه طراحی صفحات یعنی بلوک ها، سایز فرم ها و جای گذاری نیز ایجاد کرده است.

نبود توضیحات کافی در زبان CSS

متاسفانه هیچ نوع توضیحی حتی به صورت کوتاه در رابطه با قابلیت های موجود در زبان css وجود ندارد. توضیحاتی نظیر: Margin-left : 10 – ۳em + 4px . به کاربران کمک های بسیاری می کند. هرچند Internet Explorer در نسخه های ۵ تا ۷ خود، توضیحاتی در این رابطه را اضافه کرده بود، اما در نسخه ۸ این مرورگر، این توضیحات حذف شده است و علت این کار را دلایل امنیتی بیان کرده است.

وجود محدودیت در کنترل فرم های عمودی

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

وجود مشکل در ساخت ستون

با وجود قابلیت های زیاد CSS 3 نظیر ماژول Column – count برای صفحه بندی سایت، گاهی اوقات نمایش این ستون ها در مرورگر ها و یا مانیتور های مختلف با سایز های متفاوت با مشکل روبرو می شود.

و در آخر

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

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

متاتگ ها وظیفه صحبت با موتور جستجو را دارند دقیقا مانند محتوا که وظیفه صحبت با کاربران را دارد پس برای پیشرفت وب سایت و گرفتن رتبه های برتر در گوگل آموزش استفاده از Meta tag را از دست ندهید.

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

وان دا  ، b2n

5/5 (1 نظر)
این مطالب را از دست ندهید
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها