رنگ ها را در html می توان با نام رنگ، کد Hex، کد RGB، کد HSL و RGBA یا HSLA تعریف کرد.
استفاده از رنگ ها با استفاده از نام رنگ
شما می توانید از نام رنگهای مشخص شده برای تخصیص رنگ به تگ های خود استفاده کنید.
هر رنگ در html دارای نام مختص به خود است و تعداد آنها حدود ۱۴۰ تا است.برای پیدا کردن رنگ می توانید در گوگل رنگ خود را جستجو کنید.عیب این نوع رنگ دادن این است که نمی توانید از رنگ های دلخواه استفاده کنید و باید از همان رنگی که به رنگ شما نزدیک است استفاده نمایید.
برخی از نام رنگ ها عبارتند از:
- Tomato
- Orange
- DodgerBlue
- MediumSeaGreen
- ….
تعریف رنگ پس زمینه یا background-color
شما می توانید برای المنت های خود رنگ پس زمینه در نظر بگیرید.
برای رنگ می توانید نام رنگ را در قالب خصوصیت style به تگ های خود اضافه نمایید.
مثال:
|
1 |
<h1 style="background-color:DodgerBlue;">Hello World</h1> |
رنگ متن
در کنار اینکه می توانید رنگ پس زمینه المنت خود را تغییر بدهید میتوانید رنگ متن تگ خود را عوض کنید. برای اینکار از دستور css به نام color در قالب خصوصیت style استفاده نمایید. برای رنگ نیز از نام رنگ استفاده کنید.
مثال:
|
1 |
<h1 style="color:Tomato;">Hello World</h1> |
رنگ خط دور المنت یا border
شما میتوانید با استفاده از خصوصیت style برای المنت ها border با رنگ موردنظر انتخاب کنید.
مثال:
|
1 |
<h1 style="border:2px solid Tomato;">Hello World</h1> |
مقادیر مربوط به رنگ
همانطور که گفته شد رنگ ها را در html می توان با نام رنگ، کد Hex، کد RGB، کد HSL و RGBA یا HSLA تعریف کرد.
در زیر نمونه یک رنگ را مشاهده می کنید که به سه روش rgb, Hex و hsl تعریف شده است.
مثال:
|
1 2 3 |
rgb(255, 99, 71) #ff6347 hsl(9, 100%, 64%) |
نمونه همان رنگ ها با استفاده از روش RGBA و HSLA
در این رنگ ها از ویژگی Alpha برای حالت شفافیت و کم رنگ کردن و شیشه ای کردن رنگ با مقدار ۵۰ درصد استفاده شده است.
مثال:
|
1 2 |
rgba(255, 99, 71, 0.5) hsla(9, 100%, 64%, 0.5) |
