آموزش css – قسمت چهارم(رنگ ها)
سلام
با چهارمین قسمت از آموزش های CSS در خدمتتون هستیم، در این مقاله می پردازیم به شیوه مقدار دهی رنگ ها در CSS، در ادامه با بپرسم همراه باشید.
آموزش:
- برای رنگ دهی به عناصر HTML توسط Css از شیوه های زیر می توانیم استفاده کنیم:
- به کار بردن نام رنگ، مثل blue
- نوشتن مقدار هگزادسیمال(HEX)، مثل ff0000
- نوشتن مقدار RGB، مثل RGB(255,0,0)
- به کار بردن نام رنگ
همانطور که اشاره کردیم؛ یکی از شیوه های رنگ دهی به عناصر به کار بردن نام رنگ هست، خیلی راحت می تونیم نام رنگ رو بنویسیم تا اعمال بشه، برای مثال به کدهای زیر توجه کنید:
کدهای زیر را در یک فایل HTML ذخیره کنید و نتیجه را مشاهده کنید.
Red
Green
Blue
Orange
Yellow
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
<h2 style="background-color:red">نام رنگ: red</h2> <h2 style="background-color:green">beporsam@gmail.com</h2> <h2 style="background-color:blue;color:white">@beporsam</h2> <h2 style="background-color:orange">بپرسم، مکانی برای آموزش و رفع مشکلات</h2> <h2 style="background-color:yellow">بپرسم</h2> |
تفاوتی بین RED و red وجود ندارد، نوشتن نام رنگ با حروف کوچک و بزرگ تفاوتی ندارد.
- نوشتن مقدار هگزادسیمال(HEX)
مقادیر RGB که مخفف سه رنگ Red Green Blue می باشد را می توانیم توسط مقادیر هگزادسیمال که در قالبی شبیه RRGGBB مشخص می شود، تعریف کنیم.
که در آن RR(قرمز)، GG(سبز) و BB(آبی) است؛ که به جای RRGGBB مقادیر هگزادسیمال که بین ۰۰ و FF(که همان اعداد اعشاری بین ۲۵۵-۰) می باشد.
توسط این نوع شیوه رنگ دهی می توانیم رنگ های متنوعی خلق کنیم.
مثال: به عنوان نمونه مقدار FF0000 رنگ قرمز است، چون مقادیر رنگ قرمز را مشخص کردیم و به مقادیر سبز و آبی رنگی اختصاص ندادیم.
حال به مثال های بیشتری که در زیر آوردیم توجه کنید:
FF0000
۰۰FF00
۰۰۰۰FF
FFA500
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ |
<h2 style="background-color:#FF0000">www.beporsam.ir</h2> <h2 style="background-color:#00FF00">beporsam@gmail.com</h2> <h2 style="background-color:#0000FF">@beporsam</h2> <h2 style="background-color:#FFA500">بپرسم، مکانی برای آموزش و رفع مشکلات</h2> |
تفاوتی بین FF0000 و ff0000 وجود ندارد، نوشتن نام رنگ با حروف کوچک و بزرگ تفاوتی ندارد.
- نوشتن مقدار RGB
RGB(قرمز،سبز،آبی): مقدار رنگ RGB با اعداد بین ۲۵۵-۰ مشخص می شود.
مثال: به عنوان نمونه مقدار RGB(255,0,0) رنگ قرمز است.
حال توسط ابزاری که قبلا در این مطلب قرار دادیم، رنگ دلخواه خود را ساخته و استفاده نمایید.
پس از ساخت کد رنگ، به صورت زیر می توانیم از آن استفاده کنیم:
|
۱ |
<h3 style="background-color:rgb(255, 0, 0)"> Beporsam </h3> |
این بخش از آموزش نیز به پایان رسید، امیدوارم مفید بوده باشه:)
هرگونه سوالی یا مشکلی در رابطه با مطلب فوق داشتید؛ در سایت بپرسید، پاسخگوی سوالات شما هستیم، برای پرسیدن سوال کلیک کنید.
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید