جهت مشاهده نتایج و تست کدها از ادیتور آنلاین استفاده کنید (کلیک کنید).

CSSرنگ ها در

در css برای استفاده از رنگ ها در تنظیمات عناصر مختلف میتوان از نام لاتین رنگ ها استفاده کرد.

مثال:

<html> <body>

<h1 style=“background-color:Tomato;”>Tomato</h1> <h1 style=“background-color:Orange;”>Orange</h1> <h1 style=“background-color:DodgerBlue;”>DodgerBlue</h1> <h1 style=“background-color:MediumSeaGreen;”>MediumSeaGreen</h1> <h1 style=“background-color:Gray;”>Gray</h1> <h1 style=“background-color:SlateBlue;”>SlateBlue</h1> <h1 style=“background-color:Violet;”>Violet</h1> <h1 style=“background-color:LightGray;”>LightGray</h1>

</body> </html>

تعیین رنگ پس زمینه

در css میتوانیم برای پس زمینه عناصر html رنگ زمینه مشخص کنیم. در مثال زیر برای پس زمینه محتوای تیتر اول (h1) رنگ آبی کاربنی و برای پس زمینه محتوای پاراگراف (p) رنگ گوجه ای اعمال کردیم.

<h1 style=”background-color:DodgerBlue;”>this is a header</h1> <p style=”background-color:Tomato;”>this is a paragraph</p>

تعیین رنگ متن

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

مثال:

<h1 style=”color:Tomato;”>This is a header</h1> <p style=”color:DodgerBlue;”>This is a paragraph</p>

تعیین رنگ حاشیه

میتوان با استفاده از css برای نوشته ها یک حاشیه (border) رنگی با رنگ دلخواه ایجاد کرد. در مثال پیش رو برای تیترها ابتدا حاشیه ای با ضخامت 2 پیکسل ایجاده کرده و درنهایت رنگ دلخواهمان را روی حاشیه ایجاد شده اعمال کردیم.

<h1 style=”border:2px solid Tomato;”>This is a header</h1> <h1 style=”border:2px solid DodgerBlue;”>This is a header</h1>

  • نکته قابل توجه درمورد تعیین رنگ اجزای html در css این است که میتوان بجای استفاده از نام رنگ ها کد رنگ ها را با فرمت های RGB, RGBA, HEX, HSL و HSLA تعیین کرد. در این حالت میتوان میزان شفافیت رنگ (transparency) را نیز تعیین کرد.
Scroll to Top