رنگ ها (Colors)
در CSS، «رنگ (Color)» ظاهر صفحه را زنده می کند. می توانی با «نام ازپیش تعریف شده»، یا «مقادیر عددی» مثل RGB/HEX/HSL و نسخه های شفاف شان RGBA/HSLA رنگ بدهی. اینجا کوتاه و کاربردی می بینی.
نام های رنگ در CSS
نام های آماده مثل Tomato و DodgerBlue راحت اند. سریع می نویسی و می بینی.
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
رنگ پس زمینه (Background)
ویژگی background-color رنگ پشت عنصر را تعیین می کند. مثل برگه دفتر رنگی.
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
رنگ متن (Text)
ویژگی color رنگ نوشته را می سازد. مثل رنگ خودکار در کلاس.
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
رنگ کادر (Border)
می توانی رنگ خط دور عنصر را تعیین کنی. مثل قاب عکس.
<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>
مقادیر رنگ: RGB، HEX، HSL، RGBA، HSLA
می خواهی دقیق باشی؟ از مقادیر عددی استفاده کن. شفافیت در RGBA/HSLA است.
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
گام های عملی سریع
- یک نام رنگ ساده امتحان کن.
- سپس نسخه RGB یا HEX را تست کن.
- در آخر شفافیت با RGBA/HSLA بساز.
نکته: برای درک بهتر «رنگ های CSS»، فصل های RGB و HSL را ببین. همچنین اگر خطایی دیدی، صفحه خطاها کمک می کند. برای قواعد دقیق تر هم نحو نگارش را مرور کن.
جمع بندی سریع
- نام ها سریع و ساده اند.
- RGB/HEX/HSL دقیق و قابل کنترل اند.
- RGBA/HSLA شفافیت می دهند.
- پس زمینه، متن، کادر را جدا تنظیم کن.
- زود تست کن و نتیجه را ببین.