این پست با مسیر متخصص HTML مرتبط است. مشاهده مسیر (Roadmap)
در HTML می توانیم رنگ ها را به صورت نام رنگ، کد HEX و مقادیر RGB ،RGBA ،HSL و HSLA بیان کرد. در ادامه به بررسی هر یک از این مقادیر می پردازیم. پس تا انتهای آموزش رنگ ها در HTML همراه ما باشید.
در HTML شما می توانید از 140 نوع رنگی که مشخص شده استفاده کنید و ذکر نام یکی از رنگ ها، آن رنگ توسط کد های HTML شناسایی شده و به نمایش در خواهد آمد. لیست 140 رنگی که توسط HTML ساپورت می شود را می توانید از اینجا مشاهده کنید.
رنگ ها در HTML : تغییر رنگ پس زمینه در HTML
با کمک کدهای زیر شما می توانید رنگ پس زمینه را به رنگ دلخواه خودتان تغییر دهید:
<!DOCTYPE html> <html> <body> <p style="background-color:Red;"> Lorem ipsum... </p> </body> </html>
خروجی کد بالا به شکل زیر خواهید بود:
رنگ پس زمینه به قرمز تغییر خواهد یافت. ما می توانیم بجای Red از نام 140 رنگ دیگر که در بالا بیان شد استفاده کنید.
دوستان سئو کار پیشنهادشان این است که از این شیوه رنگ دهی حتی‌الامکان استفاده نکنید و از سایر روشهای رنگ دهی استفاده کنید که در ادامه به بررسی آنها می پردازیم.
تغییر رنگ متن در HTML
به صورت دیفالت رنگ نوشته ها در HTML بصورت مشکی است. در مثال بالا رنگ پس زمینه را به قرمز تغییر دادیم. برای تغییر رنگ متن و سفید کردن آن از دستور زیر استفاده می کنیم:
<!DOCTYPE html> <html> <body> <p style="background-color:Red;color:white;"> Lorem ipsum... </p> </body> </html>
در استایل این پاراگراف بجای رنگ white می توانیم در نام دیگر رنگ ها نیز استفاده کنیم تا متن ما به آن رنگ تغییر کند. بالاتر هم ذکر کردیم که برای سئو بهتر است از روش های دیگر برای تغییر رنگ استفاده کنید.
برای مثال می توانیم قسمت استایل تگ بالا را به شکل زیر بازنویسی کنیم:
<p style="background-color:Red;color:#ffffff;"> Lorem ipsum... </p>
رنگ دهی به شیوه HEX(هگزادسیمال)
در مثال بالا بجای نام رنگ سفید ما از کد هگزادسیمال اون یعنی #ffffff استفاده کرده ایم. دوستانی که با فتوشاپ کار کرده اند حتما با این شیوه و این کد ها آشناییت دارند. برای رنگ قرمز پس زمینه نیز می توانیم از کد #ff0000 استفاده کنیم.
رنگ هگزادسیمال به صورت #RRGGBB مشخص می شود. دو حرف ابتدایی یعنی RR مشخص کننده میزان رنگ قرمز (RED) به صورت کد هگز هستند و دو حرف بعدی یعنی GG مشخص کننده رنگ سبز (GREEN) و دو حرف آخر نیز مشخص کننده میزان رنگ آبی (BLUE) می باشد.
تغییر رنگ border
Border یکی از ویژگی های CSS می باشد که یک حاشیه دور عنصر ما ایجاد می کند.
<!DOCTYPE html> <html> <body> <h1 style="border: 2px solid #0000ff;"> TUTSXEN ACADEMY </h1> </body> </html>
با توجه به کدهای بالا در خروجی عبارت تاتژن آکادمی چاپ شده و یک حاشیه آبی رنگ خواهد داشت:
در مقاله ی بعدش درباره مقادیر RGB، RGBA ، HSL و HSLA صحبت خواهیم کرد.
به پایان آموزش “رنگ ها در HTML” رسیدیم. امید است مورد رضایت شما واقع شده باشد. اگر ابهام یا سوالی داشتید، در بخش نظرات مطرح نمایید.
مهندس محسن صادق نژاد
دبیر | مهندس نرم افزار دانشگاه شهید رجایی