ویژگی های CSS با واحدهای مختلفی تعریف میشوند مانند اینچ(in) ، سانتی متر(cm) ، پیکسل و هر ویژگی مورد استفاده در CSS دارای یک نوع مقدار است که مجموعه ای از مقادیر مجاز برای آن ویژگی رامشخص میکند. واحدهای اندازه گیری برای بیان یک عنصر یا محتوای آن تعریف میشود.به عنوان مثال برای margin می توان از پیکسل(px) استفاده کرد.
{ margin : 10px; }
ارتباط بین واحدها و مقادیر اندازه ها در خروجی صفحه نمایش در دستگاهها است و هیچ محدودیتی در استفاده از واحد های اندازه گیری وجود ندارد ، می تواند هرجایی استفاده شود. اگر یک ویژگی با پیکسل تعریف مقدار داده میشود همان ویژگی را می توان با درصد مقدار دهی کنیم.
میشود از مقادیر منفی برای بعضی ویژگی ها استفاده کرد، اما توجه داشته باشید که نمی توان بین مقدار و واحد اندازه فضای خالی داشته باشیم مگر برای مقدار صفر(0).
{ margin : 0; }
{ padding : -5px;}
واحد اندازه گیری
دو نوع واحد اندازه گیری مطلق و نسبی در CSS داریم:
اندازه گیری مطلق (Absolute Lengths): اندازه ثابتی است که برای توصیف مقدار دقیق سایز در صفحه نمایش استفاده میشود. توصیه میشود از Absolute برای سایتهای ریسپانسیو استفاده نشود به دلیل اینکه اندازه دقیق در صفحه نمایش در دستگاههای مختلف متفاوت است .از این واحد می توان در خروجی های مشخص استفاده کرد مانند چاپ. جدول زیر شامل واحدهای اندازه مطلق است:
اندازه گیری نسبی (Relative Lengths): این نوع واحد ها برای طراحی های واکنش گرا مناسب هستند به دلیل اینکه می توان مقادیر را نسبت به اندازه صفحه نمایش تعیین کرد و اندازه ها به نسبت مشخص میشوند. بسته به نوع دستگاههای مورد استفاده اگر اندازه صفحه نمایش تفاوت زیادی داشته باشد بهترین حالت استاندارد را بین مدیاهای مختلف تعریف میکند. جدول زیر شامل واحدهای اندازه نسبی است:
می توانیم به صورت پیش فرض از Relative Lengths استفاده کنیم برای طراحی سایت های واکنش گرا به دلیل اینکه از بهم ریختگی طرح ها برای اندازه های مختلف صفحه نمایش جلوگیری میکند.
اعداد(Number)
بعضی از ویژگی ها بدون اینکه واحدی داشته باشند مقداردهی میشوند، مانند opacity که مقدار شفافیت را تعیین میکند، می تواند 0(مات) یا 1(شفاف) باشد.
رنگ (Color)
راههای مختلفی برای تعیین رنگ ها در CSS وجود دارد.در کامپیوترها سیستم تشخیص استاندارد رنگها 24 بیت است که حدود 16 میلیون رنگ در صفحه نمایش را متمایز میکند. رنگ ها به روش های زیر تعیین می شوند:
Hexadecimal Value:
نوعی از مقدار دهی رنگها شبیه کدهای هگزادسیمال و هرمقدار را با نماد(#) تعریف میشود. این مقادیر کمی پیچیده هستند و یادگیری آنها آسان نیست. برای مثال رنگ سفید با ffffff# تعریف میشود.
RGB and RGBA Value:
مقدار RGB شامل سه پارامتر است که مقادیری از رنگهای اصلی (قرمز، سبز، آبی) را میگیرد. تعریف این رنگ
(2,121,139)rgb است.
همچنین میتوان از RGBA استفاده کرد، مانند rgb است با این تفاوت که با تعریف چهارمین مقدار میزان opacity رنگ را مشخص کنیم.
HSL and HSLA Value:
HSL شامل یه پارامتر است (hue , saturation , lightness) است که برای تمایز 16 میلیون رنگ استفاده میشود و تعریف آن به این صورت است (%28, %97, 188)hsl.
Hue (رنگ): پایه ای ترین حالت رنگ که عددی است بین 0 تا 360 که مقدار رنگ را ارائه می دهد.
Saturation (اشباع): مقداریست بین 0 تا 100٪ که 0 یعنی بدون رنگ (یک سایه خاکستری است) و 100٪ اشباع رنگ کامل است.
Lightness (وضوح): مقداریست بین 0 تا 100٪ که 0 یعنی کدر (یک زمینه مشکی) و 100٪ شفافیت بالاست (یک زمینه سفید).
HSLA هم با گرفتن چهارمین پارامتر مقدار شفافیت رنگ را تعیین میکند.
