جلسه 3: نام و کد رنگ ها در CSS

خواندن این مطلب 5 دقیقه زمان میبرد

برای به کارگیری رنگ ها در دستورات CSS میتوان از نام های از پیش تعریف شده رنگ ها یا کد رنگ های RGB, HEX, HSL, RGBA HSLA استفاده نمود.

استفاده از نام رنگ ها در CSS

به عنوان اولین راهکار، برای اعمال رنگ به عناصر می توانید از نام های از پیش تعریف شده رنگ ها استفاده کنید، همانند مثال زیر:

<!DOCTYPE html>
<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>

با نوشتن دستورات فوق، نتیجه به شکل زیر خواهد بود.

همانطور که میبینید، هر رنگ با نام از پیش تعریف شده خود مشخص شده است:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

رنگ پس زمینه

برای اعمال رنگ پس زمینه به عناصر، کافیست از خاصیت “background-color” استفاده کنید.

تبلیغات

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">مثبت 1</h1>

<p style="background-color:Tomato;">
آموزش پیشرفته css - رنگ ها در css - اعمال رنگ به پس زمینه
</p>

</body>
</html>

نتیجه دستورات فوق بصورت زیر است:

مثبت 1

آموزش پیشرفته css – رنگ ها در css – اعمال رنگ به پس زمینه

رنگ متن

برای اعمال رنگ به متن ها، کافیست از خاصیت “color” استفاده کنید.

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">مثبت 1</h3>

<p style="color:DodgerBlue;">دنیای علم و فناوری</p>

<p style="color:MediumSeaGreen;">آموزش پیشرفته CSS</p>

</body>
</html>

نتیجه دستورات فوق بصورت زیر است:

مثبت 1

دنیای علم و فناوری

تبلیغات

آموزش پیشرفته CSS

اعمال رنگ به border

برای اعمال رنگ به border یا حاشیه، ابتدا بایستی از خاصیت “border” استفاده کنید.

خاصیت حاشیه 3 مقدار دارد که عبارتند از:

عرض حاشیه: با پیکسل مشخص می شود.
سبک حاشیه: عبارت است از نوع حاشیه انتخابی که میتواند شامل: dotted(نقطه نقطه)، dashed(قطعه قطعه)، solid(توپر) و غیره باشد.
رنگ حاشیه: رنگ انتخابی مورد نظر

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">مثبت 1</h1>

<h1 style="border: 2px solid DodgerBlue;">دنیای علم و فناوری</h1>

<h1 style="border: 2px solid Violet;">آموزش پیشرفته CSS</h1>

</body>
</html>

نتیجه دستورات فوق به صورت زیر است:

مثبت 1

دنیای علم و فناوری

آموزش پیشرفته CSS

در CSS، رنگ ها نیز می توانند با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA مشخص شوند.

تبلیغات

مقادیر زیر با نام رنگ “Tomato” برابری می کنند:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

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

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

</body>
</html>

کد رنگ RGB

در CSS، برای تعریف رنگ ها می توان از مقادیر RGB، با استفاده از فرمول زیر به کار برد:

rgb (قرمز، سبز، آبی)

هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین رینج 0 تا 255 مشخص می کند.

تبلیغات

به عنوان مثال، (rgb (255، 0، 0، رنگ قرمز را نمایش خواهد داد، چرا که میزان رنگ قرمز، در بالاترین میزان آن یعنی (255) و مابقی 0 است.

برای نمایش رنگ سیاه، کافیست تمام پارامترها با مقدار 0 تنظیم شوند، مانند: (rgb (0، 0، 0.

برای نمایش رنگ سفید، تمام پارامترهای رنگ باید با 255 تنظیم شوند، مانند: (rgb (255، 255، 255.

به مثال های زیر دقت کنید:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

</body>
</html>

نتایج دستورات فوق بصورت زیر است:

تبلیغات

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

کد رنگ HEX

در CSS، همچنین می توانید برای انتخاب رنگ از مقادیر HEX یا هگزا دسیمال استفاده کنید.

فرمت کدهای رنگ HEX بصورت زیر است:

#rrggbb

rr (قرمز)، gg (سبز) و bb (آبی)، مقادیر هگزا دسیمال بین پایین ترین میزان یعنی (00) و بالاترین میزان یعنی (ff) هستند.

به عنوان مثال، کد رنگ ff0000# به صورت قرمز نمایش داده می شود، زیرا قرمز در بالاترین مقدار (ff) و مابقی در پایین ترین مقدار خود یعنی (00) تنظیم شده اند.

تبلیغات

به مثال های زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

</body>
</html>

نتیجه دستورات فوق به صورت زیر است:

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

کد رنگ HSL

در CSS، همچنین می توان از کد رنگ HSL برای انتخاب رنگ استفاده نمود.

فرمت HSL به صورت زیر است:

hsl (رنگ، اشباع، روشنایی)

در کد رنگ HSL، رنگ به صورت درجه ای از 0 تا 360 مشخص می شود. 0 رنگ قرمز، 120 رنگ سبز و 240 میزان رنگ آبی را مشخص می کند.

اشباع یک درصد است، 0٪ رنگ خاکستری(یا سیاه و سفید) و 100٪ رنگ کامل است.

روشنایی نیز با درصد مشخص می شود، 0٪ سیاه، 50٪ حد میانه و 100٪ سفید است.

به مثال های زیر دقت کنید:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

</body>
</html>

نتیجه دستورات فوق به صورت زیر است:

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

کد رنگ RGBA

کد رنگ RGBA تقریبا همانند کد رنگ RGB است، با این تفاوت که در این کد رنگ، آلفا یا میزان شفافیت نیز به آن اضافه شده است.

فرمت RGBA به صورت زیر است:

rgba (قرمز، سبز، آبی، آلفا)

پارامتر alpha یک عدد بین 0.0 (کاملا شفاف) و 1.0 (کاملا کدر) است.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

</body>
</html>

نتیجه دستورات فوق به صورت زیر است:

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

کد رنگ HSLA

کد رنگ HSLA تقریبا همانند کد رنگ HSL است، با این تفاوت که در این کد رنگ، آلفا یا میزان شفافیت نیز به آن اضافه شده است.

فرمت HSLA به صورت زیر است:

HSLA (رنگ، اشباع، روشنایی، آلفا)

پارامتر alpha یک عدد بین 0.0 (کاملا شفاف) و 1.0 (کاملا کدر) است.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

</body>
</html>