رنگ های HTML

رنگ های HTML


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

روش های مختلفی برای اعمال استایل ها را به یک سند HTML در جلسه قبل آموختیم. برخی از نمونه های جلسه قبل شامل اضافه کردن رنگ ب سند بود. دیدن رنگ به عنوان یکی از بخش های اصلی طراحی هر وب سایت است. بیایید نگاه دقیقتر به درخواست رنگ دریک صفحه وب داشته باشیم.

رنگ پیش زمینه

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

رنگ پیشین در مثال ما قرمز است.

مثال:

<h3 style="color:red;">رنگ های اچ تی ام ال</h3>

برای مشاهده نتیجه اینجا کلیک کنید.

رنگ پیش زمینه نیز (به طور غیرمستقیم) بر رنگ سایر قسمتهای عنصر، از جمله حاشیه آن اثر می گذارد.

در گاهی مواقع نیازی به ایجاد حاشیه نیست و تنها با انتخاب رنگ پیش زمینه کار ما راه می افتد، در در برخی مواقع اگر رنگ حاشیه را مشخص نکنید حاشیه هم رنگ عنصر می شود.

امتحانی دیگر

در زیر مثالی آورده ایم که رنگ حاشیه آن نیز مشخص شده است.

اگر شما border-color:black; را حذف کنید، رنگ حاشیه هم قرمز می شود. برهمین اساس در فوق بیان شد که رنگ پیش زمینه به طور غیرمستقیم برسایر قسمت های عنصر اثر می گذارد. شما می توانید این تمرین را از طریق لینک زیر جدول انجام دهید.

<h3 style="color:red;border-width:7px;border-style:solid;border-color:black;">رنگ های اچ تی ام ال</h3>

برای مشاهده نتیجه اینجا کلیک کنید.

رنگ پس زمینه

رنگ پس زمینه به شرح مقابل است: background-color:blue;

برای مثال:

<h2 style="background-color:blue;">من رنگ پس زمینه آبی دارم</h2>

برای مشاهده نتیجه اینجا کلیک کنید.

رنگ حاشیه

ما قبلا یک مثال از مشخص کردن رنگ برای حاشیه عنصر بالا را دیدیم. این یکی از راه های مشخص کردن ویژگی های حاشیه مختلف.

شما همچنین می توانید به جای جداکردن اعلان های مختلف چندین ویژگی حاشیه را با یک حرکت مشخص کنید. می توانید این کار را با استفاده از ویژگی میانبر border انجام دهید، که به شما اجازه می دهد، عرض، استایل، و رنگ حاشیه را در یک مکان مشخص کنید.

مثال:

<h2 style="border:1px dashed orange;">من رنگ حاشیه نارنجی دارم</h2>

برای مشاهده نتیجه اینجا کلیک کنید.

استایل های جاساز و خارجی

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

نام رنگ ها

در مثال بالا، ما نام رنگ ها را برای مشخص کردن رنگ ها استفاده کردیم. شما می توانید رنگ را با نام آن (مثلا blue برای آبی) مقدار هگزادسیمال (مانند #0000ff)، مقدار RGB (مانند 0,0,255) یا مقدار HSL آن (مانند 240,100%,100%) را انتخاب نمایید.

مبتدیان برای مشخص کردن رنگ ها معمولا از نام رنگ استفاده می کنند، زیرا خیلی راحتتر از گزینه های دیگر است. اگرچه نام های رنگ ها به راحتی قابل حفظ کردن هستند، امّا با نمادهای هگزادسیمال، RGB و HSL گزینه های رنگ بسیار بیشتری در اختیار خواهید داشت.

کد رنگ هگزادسیمال ترکیبی از حروف و اعداد است. اعداد از 0 تا 9 و حروف از A تا F انتخاب می شوند. هنگام استفاده از مقادیر رنگ هگزادسیمال در HTML/CSS شما، مقدار را با هش (#) قبل از آن قرار می دهید. اگرچه مقادیر هگزادسیمال ممکن است در ابتدا کمی عجیب و غریب باشند، امّا خیلی زود می توانید آنها فرا بگیرید.

اگر از نرم افزارهای گرافیکی مثل ادوبی فتوشاپ یا GIMP استفاده کرده باشید، احتمالا با روش RGB یا HSL استفاده نموده اید. نمودار زیر برخی از نمونه های نام رنگ همراه با مقادیر هگزادسیمال و RGB مربوطه را نشان می دهد.

نام رنگ

کد رنگ

کدرنگ اعشاری

مشکی

000000

0,0,0

نقره ای

C0C0C0

192,192,192

خاکستری

808080

128,128,128

سفید

FFFFFF

255,255,255

خرمایی مایل به قرمز

800000

128,0,0

قرمز

FF0000

255,0,0

بنفش

800080

128,0,128

سرخ آبی

FF00FF

255,0,255

سبز

008000

0,128,0

لیمویی

00FF00

0,255,0

زیتونی

808000

128,128,0

زرد

FFFF00

255,255,0

آبی دریایی

000080

0,0,128

آبی

0000FF

0,0,255

آبی مایل به خاکستری

008080

0,128,128

فیروزه ای

00FFFFF

0,255,255

این جدول یک نمونه کوچک از طیف گسترده ای از رنگ های موجود HTML است.

شما می توانید رنگ های خودتان را با ورود به هر مقدار 6رقمی (قبل از یک #) بسازید.

در مثال زیر ما یک رنگ را با استفاده از سه روش مختلف برای تیترهای درجه دوم مشخص می کنیم و نتیجه به صورت یکسان نمایش داده می شود.

<h2 style="color:red">نام رنگ</h2>

<h2 style="color:#FF0000">هگزادسیمال</h2>

<h2 style="color:rgb(255,0,0)">مقدار RGB</h2>

 برای مشاهده نتیجه اینجا کلیک کنید.

اگر بخواهیم کمی آن را مایل به تیر کنیم می توانیم مقدار را کمی به رنگ Maroon تغییر دهیم:

<h2 style="color:maroon">نام رنگ</h2>

<h2 style="color:#800000">هگزادسیمال</h2>

<h2 style="color:rgb(128,0,0)">مقدار RGB</h2>

برای مشاهده نتیجه اینجا کلیک کنید.

شفافیت

شما همچنین می توانید با استفاده از آلفا برای مشخص کردن سطح کدر که باید رنگ داشته باشد استفاده کنید. این امکان فقط در نمادهای RGB و HSL موجود است. برای انجام اینکار، علامت “a” را به نماد عملکرد اضافه کنید (به عنوان مثال HSLA و RGBA). برای نمونه، rgba(0,0,144,0.5) به یک رنگ آبی نیمه شفاف منجر می شود. در مقدار دیگر نیز می توان از hsla(240,100%,50%,0.5) استفاده کرد.

در اینجا یک مثال استفاده از RGBA برای تغییر شفافیت رنگ آورده شده است:

<h2 style="background-color:rgba(0,0,255,1)">بدون شفافیت</h2>

<h2 style="background-color:rgba(0,0,255,0.5)">نیم شفاف</h2>

<h2 style="background-color:rgba(0,0,255,0.1)">شفافیت زیادRGB</h2>

برای مشاهده نتیجه اینجا کلیک کنید.

در اینجا یک نمونه از استفاده HSLA برای تغییر شفافیت را آماده کردیم:

<h2 style="background-color:hsla(240, 100%, 50%, 1)">بدون شفافیت</h2>

<h2 style="background-color:hsla(240, 100%, 50%, 0.5)">نیم شفاف</h2>

<h2 style="background-color:hsla(240, 100%, 50%, 0.1)">شفافیت زیادRGB</h2>

برای مشاهده نتیجه اینجا کلیک کنید.

راه آسان انتخاب رنگ

با استفاده از نماد هگزادسیمال، RGB و HSL می توانید 16میلیون رنگ مختلف در اختیار داشته باشید. به عنوان مثال، می توانید #000000شروع کنید و با افزایش یک مقدار پیش بروید تا به مقدار #FFFFFF برسید، هربار که یک حرف یا عدد را عوض کنید رنگ کمی متفاوت تر مشاهده می کنید.

امّا نگران نباشید شما نباید همه ی مقادیر رنگ هگزادسیمال را به یادداشته باشید! انتخابگر رنگ و نمودار رنگ HTML موجود در اینترنت کار شما را بسیار راحتتر می کند. همچنین افزونه هایی برای مرورگری مثل کروم وجود دارد که می تواند در انتخاب رنگ کار شما را بسیار راحت کند مانند ColorZilla.

در جلسه بعد بیشتر در مورد لینک ها (پیوندها) در زبان HTML صحبت می کنیم.

جلسه قبل | جلسه بعد

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی