وب

مقدار ها و واحد ها در CSS – بخش اول، مقادیر عددی

مقدار ها و واحد ها در CSS – بخش اول، مقادیر عددی

انواع مختلفی از مقدار ها در CSS وجود دارد، از مقادیر عددی گرفته تا رنگ ها و توابع. برخی از آن ها برای مشخص کردن مقادیر دقیق به واحد ها متکی هستند. آیا می خواهید باکس خود را به اندازه ی ۳۰ پیکسل قرار دهید، یا ۳۰ سانتی متر، و یا em30؟ در این مقاله به مقادیر رایج مانند طول، رنگ، و عملکرد های ساده نگاه می کنیم، همچنین به بررسی برخی از واحد های کمتر رایج مانند درجه ها و حتی مقادیر عددی بدون واحد می پردازیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

مقدار ها و واحد ها در CSS

پیش نیازها: سواد رایانه ای پایه، نرم افزار اساسی نصب شده، دانش پایه در کار با فایل ها، مبانی HTML و ایده ی چگونگی کارکرد CSS.

هدف: یادگیری انواع رایج مقدار ها در CSS و واحد های مرتبط.

برای کسب اطلاعات بیشتر در زمینه ی کار با CSS، به دیگر مقاله های ما مراجعه کنید.

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

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

مقادیر عددی در CSS

مقدار ها و واحد ها در CSS

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

آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3

طول و اندازه در CSS

از واحد های طول / اندازه همیشه در کد های CSS استفاده می شود: برای طرح بندی، تایپوگرافی و موارد دیگر، از طول استفاده می شود. بیایید به مثال ساده ای نگاه کنیم – ابتدا کد HTML زیر را در نظر بگیرید:

و اکنون کد های CSS:

نتیجه به صورت زیر است:

مقدار ها و واحد ها در CSS

بنابراین در این کد CSS موارد زیر را انجام می دهیم:

  • تنظیم حاشیه، padding و عرض کادر هر پاراگراف به ترتیب به اندازه ی ۵ پیکسل، ۱۰ پیکسل و ۲ پیکسل. یک مقدار برای margin / padding بدین معناست که تمام چهار طرف به همان مقدار تنظیم می شوند. عرض کادر به عنوان بخشی از مقدار های مربوط به کادر تعیین می شود.
  • تنظیم عرض هر سه پاراگراف به مقادیر پیکسل های بزرگتر و بزرگتر، به این معنی که باکس ها هر چه پایین تر می روید، عریض تر می شوند.
  • تنظیم اندازه ی قلم در هر سه پاراگراف به مقادیر پیکسل بزرگتر و بزرگتر، به این معنی که هر چه بیشتر به سمت پایین بروید، متن بزرگ تر می شود. اندازه ی فونت به ارتفاع هر یک از گلیف اشاره دارد.

پیکسل ها (px) به عنوان واحد های مطلق نامیده می شوند، زیرا همیشه بدون توجه به تنظیمات مرتبط، یکسان خواهند بود.

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

  • یک چهارم میلی متر q، میلی متر mm، سانتی متر cm، اینچ in
  • pt، pc: نقاط (۷۲۱/ اینچ) یا پیکاس (۱۲ نقطه).

احتمالا از هیچ کدام از این موارد به جز پیکسل استفاده نمی کنید.

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

  • ۱em: em همان اندازه ی فونت عنصر فعلی است. اندازه ی قلم پیش فرض که توسط مرورگر های وب، به صفحات وب داده می شود، قبل از اعمال استایل CSS، ۱۶ پیکسل است، به این معنی که مقدار محاسبه شده از em1 به طور پیش فرض برای یک عنصر ۱۶ پیکسل است. اما اندازه ی فونت توسط عناصر از والدین آن ها به ارث برده می شود، بنابراین اگر اندازه ی فونت های مختلف بر روی عناصر اصلی تنظیم شده باشد، معادلۀ پیکسل em ممکن است پیچیده شود. em رایج ترین واحد نسبی است که در توسعه ی وب استفاده می کنید.
  • ex، ch: به ترتیب ارتفاع حرف کوچک x و عرض عدد ۰ است. این واحد ها به طور معمول استفاده نمی شود و یا به خوبیِ em پشتیبانی نمی شوند.
  • rem: رم (root em) دقیقا همانند em عمل می کند، به جز آن که همیشه، برابر با اندازه ی فونت پایه پیش فرض است؛ اندازه فونت ارثی هیچ تاثیری ندارد، بنابراین به نظر می رسد که این واحد، گزینه ی بسیار بهتری از em است، اگر چه rem ها در نسخه های قدیمی تر اینترنت اکسپلورر کار نمی کنند.
  • vw، vh: این واحد ها به ترتیب ۱/۱۰۰ از عرض نمایش و ۱/۱۰۰ th از ارتفاع نمایش هستند. این واحد ها نیز به طور گسترده ای پشتیبانی نمی شوند.

استفاده از واحد های نسبی بسیار مفید است؛ می توانید عناصر HTML خود را نسبت به فونت خود و یا اندازه ی viewport، اندازه بندی کنید.

مقدار های بدون واحد در CSS

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

ارتفاع خط بدون واحد در CSS

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

و CSS زیر:

نتیجه ی خروجی به صورت زیر خواهد بود:

مقدار ها و واحد ها در CSS

در اینجا اندازه ی فونت ۱۶ پیکسل است؛ ارتفاع خط۱٫۵  برابر و یا ۲۴ پیکسل خواهد بود.

تعداد انیمیشن ها

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

کد CSS کمی پیچیده تر است:

در اینجا می توانید تعدادی از واحد های جالب CSS را مشاهده کنید که در این مقاله به طور صریح درباره ی آن ها صحبت نشد:

در بخش های بعدی مقاله، به مقادیر دیگر CSS خواهیم پرداخت.

نوشته های مشابه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا