در HTML CSS از مقادیر رنگ برای تعیین رنگ استفاده می کند. شما می توانید رنگها را در قالب های مختلف مانند مقادیر RGB ، HEX ، HSL ، RGBA و HSLA تعیین کنید.
جدول زیر به شما در درک فرمت رنگ CSS کمک می کند.
| فرومات | نحو | مثال |
|---|---|---|
| کد هگز | #800000 | پ[color: #800000;} |
| Short Hex Code | #RGB | p{color:#6A7;} |
| RGB % | rgb(rrr%,ggg %,bbb%) | p{color:rgb(50%, 50%, 50%); } |
| Keyword | red, black etc. | p{color:green;} |
Text color
If you want to change the color of text then set the color of the text.
|
<html> <body> <h1 style=“backgroundcolor:red;color:#6A7;”>Hello CSS</h1> <p style=“background-color:#800000;”>We are learning CSS</p> </body> </html> |
|
<!DOCTYPE html> <html> <بدن> <h1 سبک=“حاشیه: 2 پیکسل قرمز جامد”>سلام CSS</h1> <h2 سبک=“حاشیه: 2 پیکسل آبی جامد”>حاشیه رنگ</h2> </بدن> </html> |
CSS Colors- کدهای Hex
در کدهای Hex 6 رقم برای نشان دادن رنگ وجود دارد. هر کد هگزا دسیمال در علامت هش##استفاده می شود.
مقدار 6 رقمی زیر Hex Code به تفصیل وجود دارد.
- دو رقم اول نشان دهنده مقدار قرمز (RR) است.
- دو رقم دوم نشان دهنده مقدار سبز (GG) است.
- دو رقم سوم نشان دهنده مقدار آبی (BB) است.
جدول زیر به شما در پیاده سازی علامت هگزادسیمال کمک می کند:
| نام رنگ | رنگ شش ضلعی |
|---|---|
| سیاه | #000000 |
| قرمز | #FF0000 |
| سبز | #00FF00 |
| آبی | #0000FF |
اجازه دهید نمونه ای از کدهای CSS رنگ هگز را مشاهده کنیم:
|
<!DOCTYPE html> <html> <سر> <سبک> سیاه h1{ رنگ: #0000ff؛} H2{رنگ: #FF0000؛}
</سر> <بدن><h1>هگزا کد CSS مثال 1</h1> <h2>هگزا کد CSS مثال 2</h2> </بدن> </html> |
CSS Colors- ارزش RGB
در CSS Color ، مقادیر RGB با نشان داده می شود rgb() ویژگی. سه مقدار قرمز ، سبز و آبی را می گیرد. مقدار می تواند یک عدد صحیح بین 0 تا 225 یا درصد باشد.
توجه داشته باشید: مرورگرهای مختلفی وجود دارد که در آنها پشتیبانی نمی شود rgb() خاصیت رنگ
جدول زیر به شما در پیاده سازی علامت هگزادسیمال کمک می کند:
| نام رنگ | ارزش RGB |
|---|---|
| سیاه | rgb (0،0،0) |
| قرمز | rgb (255،0،0) |
| سبز | rgb (0،225،0) |
| آبی | rgb (0،0225) و غیره |
اجازه دهید نمونه ای از مقادیر CSS color-RGB را مشاهده کنیم:
|
<!DOCTYPE html> <html> <سر> <سبک> div { رنگ پس زمینه: rgb(0 ، 191 ، 255)؛ رنگ: rgb(255 ، 0 ، 0)؛
</سر> <بدن> <div> <h1>RGB ارزش CSS مثال 1</h1> <h2>RGB ارزش CSS مثال 2</h2> </div> </بدن> </html> |
