100% کامل شده تا
به‌روزرسانی شده در: ۲۸ روز پیش

رنگ‌ها در اچ‌تی‌ام‌ال (HTML Colors)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial(تغییرمسیر از رنگ کادر در html)
پرش به ناوبری پرش به جستجو


رنگ‌های HTML با استفاده از نام رنگ‌های از پیش تعیین شده، یا با مقادیر RGB ,HEX ,HSL ,RGBA ,HSLA مشخص می‌شوند.[۱]


نام رنگ‌ها (Color Names)

در اچ‌تی‌ام‌ال، رنگ را می‌توان با استفاده از نام یک رنگ تعیین کرد:

Responsive demo.svg


اچ‌تی‌ام‌ال از ۱۴۰ نام رنگ استاندارد پشتیبانی می‌کند.


رنگ پیش‌زمینه (Background Color)

می‌توانید برای عناصر HTML رنگ پس زمینه تعیین کنید:

Responsive demo.svg


مثال

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

مثال

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>


رنگ متن (Text Color)

می‌توانید رنگ متن را مشخص کنید:

Responsive demo.svg


مثال

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

مثال

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>


رنگ کادر (Border Color)

می‌توانید رنگ کادرها را مشخص کنید:

Responsive demo.svg


مثال

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

مثال

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>


مقادیر رنگ (Color Values)

در HTML، رنگ‌ها را می‌توان با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA نیز تعیین کرد.

سه عنصر <div> زیر رنگ پس زمینه خود را با مقادیر RGB , HEX و HSL تنظیم کرده‌اند:

Responsive demo.svg


دو عنصر <div> زیر دارای رنگ زمینه با مقادیر RGBA و HSLA هستند که یک کانال آلفا را به رنگ اضافه می‌کند (در اینجا ۵۰٪ شفافیت داریم):

Responsive demo.svg


دربارهٔ ارزش‌های رنگ بیشتر بیاموزید

در فصل‌های بعدی اطلاعات بیشتری در مورد RGB ,HEX و HSL کسب خواهید کرد.

منابع آموزشی