کد رنگ در html

بهاره حسنیبهاره حسنی
526 بازدید
colors

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

با روشهایی مثل اسم رنگ ، RGB ، HEX ، HSL ، RGBA ، مقادیر HSAL میتوان به عناصر رنگ داد.

با سلام خدمت کاربران عزیز وبسایت پرنیان طرح

در این آموزش با رنگ های html آشنا میشوید.

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

رنگ دادن با نام رنگ:

این راهکار ساده ترین روش رنگ دادن در html است.

نام رنگ را در المانی که میخواهیم به آن رنگ بدهیم مینویسیم.

مثال زیر را ببینید:

[php]

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

</body>
</html>

[/php]

رنگ دادن به background:

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

[php]

<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.
</p>

</body>

[/php]

رنگ دادن به متن:

برای رنگی کردن متن ها باید در صفت استایل ، color را مقدار رنگی که میخواهیم قرار دهیم.

مثال:

[php]

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

[/php]

رنگ دادن به border:

برای رنگی کردن حاشیه متن باید به border در صفت استایل رنگ بدهیم.

مثال:

[php]

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

[/php]

رنگ دادن به روش RGB:

در این روش یک رنگ توسط مقادیر RGB مشخص میشود .

(RED ,  GREEN , BLUE) مقادیر قرمز سبز و آبی هستند.

برای مثال (۰ ,  ۰ , ۲۵۵) برای نمایش رنگ قرمز است زیرا قرمز در بالاترین مقدار خودش تنظیم شده است.

رنگ های سبز و آبی مقدار صفر دارند.

برای به بدست آوردن رنگ های دیگر باید مقدار رنگ های اصلی را تغییر دهیم تا با ترکیب رنگ ها رنگ مورد نظر را داشته باشیم.

برای نمایش رنگ سیاه همه ی مقادیر رنگی باید مقدارشان صفر باشد rgb(0, 0, 0).

برای نمایش رنگ سفید مقدار همه ی رنگ ها باید ۲۵۵ باشد rgb(255, 255, 255).

مثال:

[php]

<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(238, 130, 238);”>rgb(238, 130, 238)</h1>

</body>

[/php]

به روش HEX:

برای مشخص کردن یک رنگ در HTML میتوان با روش هگزادسیمال کد رنگ دلخواه را تعیین کنیم.

این روش در مورد اعداد مبنای ۱۶ است که از ترکیب اعداد ۰،۱،۲،۳،۴،۵،۶،۷،۸،۹ و حروف A ,B,C,D,E,F بدست می آید.

#rrggbb در این اینجا rr قرمز gg سبز و bb رنگ آبی است و به جای این حروف کد هگزا رنگ را مشخص خواهد کرد.

برای مثال کد #ff0000 برای نمایش رنگ قرمز است.

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

[php]

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

[/php]

به روش HSL:

تعیین رنگ با روش HSL برگرفنه از وازگان (huesaturationlightness) است که HUE رنگ را از یک عدد از ۰ تا ۳۶۰ درجه قرار دارد مشخص میکند.

saturation غلظت رنگ را از ۰ تا ۱۰۰ به صورت درصدی تعیین میکند.

درصد صفر غلظت رنگ زیاد است و هر چه به درصد ۱۰۰ پیش میرویم رنگ روشن تر و به رنگ سفید نزدیک تر میشویم.

مثال:

[php]

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

</body>

[/php]

منبع : www.w3schools.com

دسته بندی آموزش html
اشتراک گذاری

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

30+ محصولات
420+ سفارشات تکمیل شده
2352+ کاربران
398+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت