زوپیرنت

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

p{
color:purple;
}

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

۲)در مبنای ۱۰: می توان رنگ را که از سه قسمت قرمز، سبز و آبی تشکیل شده تعریف کنیم. فرمت نوشتن این حالت، به صورت زیر است:

color:rgb(127,0,255);

مقدار هر قسمت، از ۰ تا ۲۵۵ متغیر است.r یا red معرف قرمز، g یا green معرف سبز و b یا blue هم معرف رنگ آبی است. روش دیگری که برای این حالت استفاده می شود، استفاده از درصد به جای عددهای ۰ تا ۲۵۵ است، که می تواند به حالت زیر استفاده شود:

color:rgb(50%,0%,100%)

می توانید در شکل زیر، رنگ هایی که با کد rgb مشخص شده، ببینید (نرم افزار فوتوشاپ هم می تواند برای مشخص شدن رنگ از نوع rgb، به شما کمک کند)

در CSS3، دو نوع رنگ دیگر هم می توان استفاده کرد (هر چند که در مبحث CSS3 باز هم این مطالب را مرور خواهیم کرد ).
rgba: که مانند rgb است با این تفاوت که آیتم a مخفف alpha، برای تعیین شفافیت رنگ است و از ۰ تا ۱ متغیر است. مانند مثال زیر

color:rgba(127,0,255,.4);

روش دیگر برای مشخص کردن رنگ در سی اس اس ۳، hsl و hsla است. معمولا این روش رنگ دهی را در فوتوشاپ می بینیم.

دو مثال زیر نمونه ای برای رنگ دهی به روش hsl و hsla آمده.

color:hsl(127,10%,60%);
color:hsla(127,10%,60%,0.4);

۳) در مبنای ۱۶: روش دیگر برای مشخص کردن رنگ، استفاده از مقدارها در مبنای ۱۶ است. در مبنای ۱۶، ارقام از ۰ تا ۹ و حروف از a تا f وجود دارند. ابتدا با علامت # شروع میکنیم، ولی ترتیب رنگ ها مانند rgb است. یعنی اول قرمز، بعد سبز و سپس آبی. مثال زیر می تواند برای رنگ دهی در این روش استفاده شود:

color:#3faa13

در عکس زیر می توانید نمونه ای از رنگ ها که به صورت hex مشخص شده اند را ببینید.

۴) در این روش، از رنگ های سیستم عامل کاربری که قرار است صفحه وب سایت ما را ببیند، استفاده می کنیم. معمولا از این روش خیلی کم استفاده می شود (به دلیل این که رنگ ها در هر سیستم عاملی متفاوت خواهد بود)، ولی برای این که بدانید چنین روشی هم می تواند استفاده شود، خوب است.
ActiveBorder
Active window border.
ActiveCaption
Active window caption.
AppWorkspace
Background color of multiple document interface.
Background
Desktop background.
ButtonFace
The face background color for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonHighlight
The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonShadow
The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonText
Text on push buttons.
CaptionText
Text in caption, size box, and scrollbar arrow box.
GrayText
Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
Highlight
Item(s) selected in a control.
HighlightText
Text of item(s) selected in a control.
InactiveBorder
Inactive window border.
InactiveCaption
Inactive window caption.
InactiveCaptionText
Color of text in an inactive caption.
InfoBackground
Background color for tooltip controls.
InfoText
Text color for tooltip controls.
Menu
Menu background.
MenuText
Text in menus.
Scrollbar
Scroll bar gray area.
ThreeDDarkShadow
The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDFace
The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDHighlight
The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDLightShadow
The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDShadow
The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
Window
Window background.
WindowFrame
Window frame.
WindowText
Text in windows.
مثلا در آیتم چهارم که مقدار Background نوشته شده، منظور این است که از رنگ desktop استفاده شود.

color:background