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

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

در این کد ما فونت عنصر h1 را سایز ۱۲ پیکسل را قرار دادیم. عدد و واحد اندازه گیری بدون فاصله در کنار یکدیگر قرار می گیرند، در ضمن بعد از ختم دستور شما باید از علامت ; استفاده نماید. اما اگر شما تنها یک properties درج کرده باشید ضرورت به این علامت نیست.

رنگ ها درCSS

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

Hexadecimal colors
RGB colors
RGBA colors
HSL colors
HSLA colors
color names

Hexadecimal Colors : این نوع رنگ یعنی رنگ های هگزادسیمال در تمامی مرورگر ها پشتیبانی می شود. این کد رنگ از رنگ های مکمل RRGGBB# تشکیل می شود. RR یعنی رنگ سرخ به اصطلاح انگلیسی RED.

GG یعنی رنگ سبز به اصطلاح انگلیسی یعنی GREEN.

BB رنگ آبی و به اصطلاح انگلیسی BLUE و بصورت زیر استفاده می شود :

RGB Color : رنگ های RGB در تمامی مرورگر ها پشتیبانی می شود. کد رنگ RGB هم از رنگ های مکمل تشکیل می شود و بصورت rgb(red, green, blue نمایش داده می شود و بصورت زیر استفاده می شود :

RGBA Color : این رنگ ها شبیه به رنگ های RGB هستند با این تفاوت که در این رنگ ها شما می توانید میزان شفافیت (Opacity) رنگ را تعیین کنید. نحوه ی نوشتن این کد رنگ بصورت زیر است.

برای تغییر میزان شفافیت عدد ۰٫۳ را می توانید تنظیم کنید. هر چقدر عدد ۳ بیشتر شود شفافیت بیشتر می شود و هر چقدر که کمتر شود شفافیت هم کمتر می شود.

نوت: رنگ های RGB در مرورگر های IE9+, Firefox 3+, Chrome, Safari, Opera پشتیبانی می شود.

HSL Color : این رنگ زمانی استفاده می شود که اگر شما خواسته باشید که یک رنگ را پر رنگ و کم رنگ کنید. قاعده نوشتن این کدها بصورت (hue, saturation, lightness) است.

HUE یک درجه رنگی روی چرخه ی رنگه که از ۰ تا ۳۶۰ قابل تنظیم است. عدد ۰ تا ۳۶۰ تعریف کننده رنگ سرخ است، عدد ۱۲۰ نشان تعریف کننده رنگ سبز است و عدد ۲۴۰ هم نشان دهنده رنگ آبی است.

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

Lightness بصورت درصدی تعیین می شود و رنگ را متمایل به رنگ سیاه و یا سفید تبدیل می کند. هرچه این عدد کمتر باشد رنگ تیره تر می شود و به رنگ سیاه متمایل می شود و هرچه این عدد بیشتر باشد رنگ سفید بیشتری با رنگ اصلی ترکیب می شود و رنگ را روشن می کند.

نحوه ی استفاده از این کد بصورت زیر است:

نوت: رنگ های HSL در مرورگر های IE9+, Firefox, Chrome, Safari, Opera10 پشتیبانی می شود.

HSLA Color : این نوع رنگ دقیقا شبیه به رنگ های عمل می کنند با این تفاوت که می توانید میزان شفافیت رنگ ها را تنظیم کنید. این کد بصورت زیر نوشته می شود:

Name : نوعی رنگی دیگری که شما می توانید استفاده کنید کدهای رنگی از نام استاندارد رنگ ها می باشد.

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