کد رنگ در Css

کد رنگ در Css,کدهای رنگ در Css,کد رنگ Css,کد رنگ متن در Css,کد رنگ فونت در Css,کد تغییر رنگ نوشته در Css,رنگ گرادیانت در Css,رنگ شیشه ای در Css

آرشیو آموزش برنامه نویسی آرشیو آموزش css مشاهده تمام دروس css

درود به دتامی های عزیز

css

توی این فصل از آموزش css میخواییم درباره رنگ ها در css صحبت کنیم

شما رو با رنگ ها در css آشنا میکنیم و همچنین تغییر دادن رنگ بک گراند و متن رو بهتون آموزش میدیم

با دتام همراه باشید.

کد رنگ در Css

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

نام رنگ در css ( کد رنگ در Css )

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

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

بیشتر بخوانید : کد رنگ ها در HTML

رنگ پس زمینه در CSS ( کد رنگ در Css )

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

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

Hello World

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.

بیشتر بخوانید : عناصر در HTML

رنگ متن در CSS ( کد رنگ در Css )

شما می توانید رنگ متن را تنظیم کنید:

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

Hello World

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.

بیشتر بخوانید : آموزش فتوشاپ

رنگ دور متن ( کادر یا قاب نوشته ) ( کد رنگ در Css )

شما می توانید رنگ مرزها را تنظیم کنید:

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

Hello World

بیشتر بخوانید : آموزش لینوکس

ارزش رنگ ها در CSS ( کد رنگ در Css )

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

همانند نام رنگ “گوجه فرنگی”:

<!DOCTYPE html>
<html>
<body>
<p>Same as color name “Tomato”:</p>
<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>

Same as color name “Tomato”:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

همانند نام رنگ “گوجه فرنگی”، اما 50٪ شفاف:

<!DOCTYPE html>
<html>
<body>
<p>Same as color name “Tomato”:</p>
<p>Same as color name “Tomato”, but 50% transparent:</p>
<h1 style=”background-color:rgba(255, 99, 71, 0.5);”>rgba(255, 99, 71, 0.5)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>hsla(9, 100%, 64%, 0.5)</h1>
</body>
</html>

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

بیشتر بخوانید : آموزش ورد

ارزش 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>
<p>In HTML, you can specify colors using RGB values.</p>
</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)

سایه خاکستری اغلب با استفاده از مقادیر برابر برای تمام 3 منبع نور تعریف می شود:

<!DOCTYPE html>
<html>
<body>
<h1 style=”background-color:rgb(0, 0, 0);”>rgb(0, 0, 0)</h1>
<h1 style=”background-color:rgb(60, 60, 60);”>rgb(60, 60, 60)</h1>
<h1 style=”background-color:rgb(120, 120, 120);”>rgb(120, 120, 120)</h1>
<h1 style=”background-color:rgb(180, 180, 180);”>rgb(180, 180, 180)</h1>
<h1 style=”background-color:rgb(240, 240, 240);”>rgb(240, 240, 240)</h1>
<h1 style=”background-color:rgb(255, 255, 255);”>rgb(255, 255, 255)</h1>
<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>
</body>
</html>

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

بیشتر بخوانید : آموزش شبکه ( CCNA )

ارزش HSL

در HTML، رنگ را می توان با استفاده از رنگ، اشباع و سبک (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>
<p>In HTML, you can specify colors using HSL values.</p>
</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%)

بیشتر بخوانید : آموزش وردپرس

اشباع

اشباع را می توان به عنوان شدت یک رنگ توصیف کرد.

100٪ رنگ خالص است، بدون سایه خاکستری
50٪ خاکستری 50٪ است، اما شما هنوز هم می توانید رنگ را ببینید.
0٪ به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.
<!DOCTYPE html>
<html>
<body>
<h1 style=”background-color:hsl(0, 100%, 50%);”>hsl(0, 100%, 50%)</h1>
<h1 style=”background-color:hsl(0, 80%, 50%);”>hsl(0, 80%, 50%)</h1>
<h1 style=”background-color:hsl(0, 60%, 50%);”>hsl(0, 60%, 50%)</h1>
<h1 style=”background-color:hsl(0, 40%, 50%);”>hsl(0, 40%, 50%)</h1>
<h1 style=”background-color:hsl(0, 20%, 50%);”>hsl(0, 20%, 50%)</h1>
<h1 style=”background-color:hsl(0, 0%, 50%);”>hsl(0, 0%, 50%)</h1>
</body>
</html>

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

بیشتر بخوانید : آموزش وردپرس

نور یا روشنایی رنگ در css

نور در css به شکل زیر میباشد :

0٪ به معنای هیچ نور (سیاه و سفید)
50٪ به معنای 50٪ نور (نه تاریک و نه نور)
100٪ به معنی نور کامل (سفید)
<!DOCTYPE html>
<html>
<body>
<h1 style=”background-color:hsl(0, 100%, 0%);”>hsl(0, 100%, 0%)</h1>
<h1 style=”background-color:hsl(0, 100%, 25%);”>hsl(0, 100%, 25%)</h1>
<h1 style=”background-color:hsl(0, 100%, 50%);”>hsl(0, 100%, 50%)</h1>
<h1 style=”background-color:hsl(0, 100%, 75%);”>hsl(0, 100%, 75%)</h1>
<h1 style=”background-color:hsl(0, 100%, 90%);”>hsl(0, 100%, 90%)</h1>
<h1 style=”background-color:hsl(0, 100%, 100%);”>hsl(0, 100%, 100%)</h1>
</body>
</html>

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

سایه خاکستری اغلب با تنظیم رنگ و اشباع به 0 و تنظیم نور از 0٪ به 100٪ برای گرفتن سایه های تیره تر / روشن تر تعریف می شود:

<!DOCTYPE html>
<html>
<body>
<h1 style=”background-color:hsl(0, 0%, 0%);”>hsl(0, 0%, 0%)</h1>
<h1 style=”background-color:hsl(0, 0%, 24%);”>hsl(0, 0%, 24%)</h1>
<h1 style=”background-color:hsl(0, 0%, 47%);”>hsl(0, 0%, 47%)</h1>
<h1 style=”background-color:hsl(0, 0%, 71%);”>hsl(0, 0%, 71%)</h1>
<h1 style=”background-color:hsl(0, 0%, 94%);”>hsl(0, 0%, 94%)</h1>
<h1 style=”background-color:hsl(0, 0%, 100%);”>hsl(0, 0%, 100%)</h1>
</body>
</html>

hsl(0, 0%, 0%)

hsl(0, 0%, 24%)

hsl(0, 0%, 47%)

hsl(0, 0%, 71%)

hsl(0, 0%, 94%)

hsl(0, 0%, 100%)

بیشتر بخوانید : آموزش برنامه نویسی جاوا

ارزش 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>
<p>You can make transparent colors by using the RGBA color value.</p>
</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)

بیشتر بخوانید : آموزش برنامه نویسی ++C

ارزش 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.4)</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>
<p>You can make transparent colors by using the HSLA color value.</p>
</body>
</html>

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

You can make transparent colors by using the HSLA color value.

منبع : www.w3schools.com

ترجمه توسط دتام

جعبه دانلود

منبع :

ترجمه

درباره نویسنده

detam

detam 151 نوشته در دتام دارد . مشاهده تمام نوشته های detam

نوشته های مشابه

تگ input در html و کاردبرد آن

تگ form در HTML | آموزش کاربردی تگ فرم در html

آموزش تنظیم پس زمینه Background در CSS – دتام

آموزش کامل و جامع ساخت فرم در html

نماد های html

کاراکتر در Html – موجودیت در HTML

دیدگاههای کاربران

۱ دیدگاه

پاسخ

سعیدی

ژانویه 4, 2019 در 7:07 ب.ظ

ممنون از راهنمایی تون عالی بود

ثبت دیدگاه

دیدگاه های ارسال شده توسط شما، پس از تایید توسط تیم مدیریت در وب منتشر خواهد شد.
پیام هایی که حاوی تهمت یا افترا باشد منتشر نخواهد شد.
پیام هایی که به غیر از زبان فارسی یا غیر مرتبط باشد منتشر نخواهد شد.

مطالب بر اساس

آخرین تصادفی ویژه