در html میتوان به ۴ طریق رنگ را به متن، کادر یا پس زمینه بخشید:
- استفاده از نام رنگ مانند: blue
- استفاده از کد رنگ rgb مانند: (۰,۰,۲۵۵) کد رنگ آبی در rgb
- استفاده از سیستم هگزادسیمال ۰۰۰۰ff# کد رنک آبی در hexadecimal
- استفاده از hsl برای رنگ دهی : hsl(240, 100%, 50%) کد رنگ آبی در hsl
رنگ دهی با استفاده از نام رنگ:
نام چند رنگ را در زیر مشاهده می نمایید:
<!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 از ۱۴۰ نام رنگ استاندارد پشتیبانی مینماید. مشاهده
رنگ دهی با مقادیر 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>
خروجی کد بالا:
رنگ دهی با مقادیر 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>
خروجی کد بالا:
1 دیدگاه. ثبت دیدگاه
مطلب مفیدی بود
سپاسگذاریم