• آموزش html
  • تهران کد

رنگ ها در html

سپتامبر 22, 2017adminskآموزش html1 دیدگاه

در html می‌توان به ۴ طریق رنگ را به متن، کادر یا پس زمینه بخشید:

  • استفاده از نام رنگ مانند: blue
  • استفاده از کد رنگ rgb مانند:  (۰,۰,۲۵۵) کد رنگ آبی در rgb
  • استفاده از سیستم هگزادسیمال  ۰۰۰۰ff# کد رنک آبی در hexadecimal
  • استفاده از hsl برای رنگ دهی : hsl(240, 100%, 50%) کد رنگ آبی در hsl

رنگ دهی با استفاده از نام رنگ:

نام چند رنگ را در زیر مشاهده می نمایید:

رنگ ها در html

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue">تیتر با بک گراند آبی</h1>
<p style="background-color:Tomato;">
متن با بک گراند قرمز گوجه ای
</p>
<p style="color:MediumSeaGreen">پاراگراف با رنگ متن سبز</p>
<h1 style="border: 2px solid DodgerBlue;">تیتر با کادر آبی</h1>
</body>
</html>

خروجی کد بالا:

نام رنگ در html

html از ۱۴۰ نام رنگ استاندارد پشتیبانی مینماید. مشاهده

رنگ دهی با مقادیر RGB

مقادیر rgb شامل ۳ مولفه بوده که هر کدام از مولفه ها مقداری بین ۰ تا ۲۵۵ میتوانند داشته باشند به این ترتیب امکان تولید بیش از ۱۶ میلیون رنگ میسر می‌گردد مولفه اول مربوط به رنگ قرمز، مولفه دوم مربوط به رنگ سبز و مولفه آخر مربوط به رنگ آبی میباشد همچنین یک مولفه آلفا در انتها میتوان در نظر گرفت که مقداری بین ۰ تا ۱ را به خود می گیرد و میزان شفافیت را میتواند تعیین کند. قطعه کد زیر به چگونگی نحوه رنگ دهی با مقادیر rgb میپردازد.

<!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 در html

رنگ دهی با مقادیر hex

در این مقدار دهی ۶ مولفه هستند که مقادیری بین ۰ تا f را میگیرند(اعداد در مبنای ۱۶ پس از ۹ بجای ۱۰ ، ۱۱ ، … a,b,c,d,e,f  میشوند) مقدار دهی hex همانند rgb بوده با این تفاوت که ما از  هر مولفه rgb دو عدد داریم و مقادیر بجای مبنای ۱۰ در مبنای ۱۶ هستند. به این شکل: rrggbb#  به قطعه کد زیر با رنگ دهی به مقادیر hex توجه نمایید:

<!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>
<p>In HTML, you can specify colors using Hex values.</p>
</body>
</html>

خروجی کد بالا:

hex

1 دیدگاه. ثبت دیدگاه

خدمات رنگ جهان
آوریل 13, 2018 1:36 ب.ظ

مطلب مفیدی بود
سپاسگذاریم

پاسخ

دیدگاهتان را بنویسید لغو پاسخ

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

بخش بندی آموزش HTML

  • آموزش html مقدمه
  • شروع کار با HTML در رایانه شخصی
  • مفاهیم پایه‌ای HTML
  • المان های HTML
  • صفت یا اتریبیوت ها در HTML
  • تگ های عنوان در HTML
  • پاراگراف ها در HTML
  • استایل دهی مستقیم به تگ ها
  • فرمت دهی به متن در HTML
  • نقل قول و عناصر استنادی در HTML
  • رنگ ها در html
  • css در HTML
  • لینک ها در HTML
  • عکس ها در HTML
  • جدول ها در HTML
  • لیست ها در html
  • المان های block و inline
  • تگ iframe در html
  • تگ script در HTML
  • تگ head در html
  • صفحه چینی در html
  • HTML واکنشگرا
  • کاراکتر های رزرو شده
  • فرم ها در HTML
  • سایر تگ ها در فرم
  • input type های مختلف در فرم
  • اتریبیوت های فرم
  • ویدیو در HTML
  • پخش صدا در html