خانه/آموزش طراحی سایت/آموزش HTML‌ برای طراحی صفحات سایت

نحوه استفاده از رنگ‌ها Colors در HTML

در این مقاله آموزشی هر آنچه درباره رنگ‌ها در html باید بدانید را خواهید آموخت. رنگ‌ها به شکل رنگ متن color، رنگ پس زمینه backgroun-color و رنگ حاشیه border-color و انواع استانداردهای رنگ در Html مثل هگزیمال و rgb و...

پنجشنبه، 16 دی 1400 |

رنگ‌ها در HTML به چند روش تنظیم می‌شود. یا با استفاده از نام‌های رنگ که حدود ۱۴۰ نام استاندارد مطابق یک قرارداد جهانی از پیش تنظیم شده از رنگ‌ها استفاده کرد و یا با مقادیر RGB، HEX، HSL، RGBA یا HSLA مشخص می‌شوند. در ادامه به معرفی این موارد می‌پردازیم.

نام رنگ ها

در HTML، یک رنگ را می توان با استفاده از یک نام رنگ مشخص کرد. در صفحه مرجع رنگ‌های html می‌توانید ۱۴۰ رنگ نام‌گذاری شده را مشاهده نمایید:

مثال برای درک بهتر آموزش اسناد HTML:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

کد HTML را آزمایش کنید
تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!

رنگ پس زمینه در HTML

شما می‌توانید با استفاده از ویژگی style که شامل مجموعه ویژگی‌های CSS برای کدهای HTML می‌باشد از background-color برای ایجاد رنگ برای پس‌زمینه استفاده نمایید:

</>

<h1 style="background-color:DodgerBlue;">این یک عنوان نوع ۱ با پس‌زمینه آبی است</h1>
<p style="background-color:Tomato;">این یک پاراگراف متن برای نمایش رنگ گوجه‌ای در پس‌زمینه این متن است. شما می‌توانید با تغییر مقدار نام رنگ پس‌زمینه، از رنگی جدید استفاده نمایید.</p>

کد HTML را آزمایش کنید
تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!

رنگ متن در HTML

هر آنچه به ظاهر و سبک نمایش محتوای درون تگ‌های HTML مربوط می‌شود با استفاده از دستورات CSS که در اینجا با استفاده از ویژگی style به روش In-Line یا اختصاصی برای یک تگ اعمال می‌شود استفاده نمایید. در این مورد نیز برای تغییر رنگ یک متن می‌توانید از color در ویژگی style برای تعیین رنگ متن استفاده نمایید:

</>

<h1 style="color:Red;">این یک عنوان نوع ۱ با رنگ متن قرمز است</h1>
<p style="color:MediumSeaGreen;">این یک پاراگراف متن برای نمایش رنگ سبز ملایم برای متن است. شما می‌توانید با تغییر مقدار نام رنگ، از رنگی جدید برای متن خود استفاده نمایید.</p>

کد HTML را آزمایش کنید
تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!

رنگ حاشیه در HTML

علاوه بر امکان تغییر رنگ پس‌زمینه و رنگ متن، رنگ حاشیه یا لبه هر تگ HTML را نیز می‌توانید با استفاده از دستورات CSS که با ویژگی style اعمال می‌شود تغییر دهید. برای تغییر رنگ حاشیه می‌توانید از border‌ یا border-color در ویژگی style استفاده نمایید:

</>

<h1 style="border:2px solid Orange;">این یک عنوان نوع ۱ با رنگ حاشیه یک دست نارنجی است</h1>
<p style="border:2px dotted Violet;">این یک پاراگراف متن برای نمایش رنگ حاشیه نقطه چین و بنفش در اطراف متن است. شما می‌توانید با تغییر مقدار نام رنگ، از رنگی جدید برای متن خود استفاده نمایید.</p>

کد HTML را آزمایش کنید
تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!

مقادیر یا کد رنگ در HTML

در HTML، رنگ ها را می توان با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA نیز مشخص کرد. در مثال زیر با استفاده از سه تگ <div> یک رنگ پس‌زمینه مشخص را به سه روش مختلف RGB، HEX و HSL مقداردهی کرده‌ایم. سپس دو تگ آخر را با استفاده از RGBA و HSLA به صورتی کههمین رنگ‌ها مثل شیشه شفاف شده و زیر آنها دیده شود را با تغییر مقدار Alpha که عددی بین 0 تا 1 است را تا ۵۰٪ شفاف کرده‌ایم. یعنی از عدد 0.5 برای مقدار A استفاده کرده‌ایم:

مثال برای درک بهتر آموزش اسناد HTML:

Tomato

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

کد HTML را آزمایش کنید
تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!

درس بعد

درس قبل

معرفی برخی خدمات مرتبط با راه اندازی کسب و کار آنلاین کارگزاران تجارت الکترونیک ایران

در صورتی که مایل به معرفی خدمات طراحی سایت ما به دوستان خود هستید لطفا این صفحه را برای ایشان به اشتراک بگذارید. همچنین می‌توانید اطلاعات بیشتری درباره خدمات ما در زمینه طراحی سایت فروشگاهی همچون طراحی سایت عطر، طراحی سایت شخصی، طراحی سایت شرکتی، طراحی سایت سازمانی با ورود به این صفحات به دست آورید. این که وب سایت مورد نظر شما از چه نوعی باشد را به ما بسپارید. بسته به امکانات و نیاز شما بهترین را برای شما انتخاب می‌کنیم. چه از نوع طراحی سایت با دی ان ان DNN (دات نت نیوک) باشد و چه از نوع طراحی سایت با وردپرس Wordpress می‌توانید از طریق صفحات مربوط به آن اطلاعات بیشتری کسب کرده و همه خدمات خود را از میزبانی وب و خرید هاست گرفته تا طراحی اپلیکیشن موبایل و آموزش طراحی سایت و سئو سایت SEO، آن را با خیال راحت به ما بسپارید. نکته قابل توجه این است که ما با هدف افزایش درآمد و رساندن شما به اهدافی که مد نظر دارید این کار را انجام می‌دهیم و این موضوع بسیار متفاوت است با این که بخواهید فقط یک سایت داشته باشید! چون هر طراحی سایتی شما را به اهداف‌تان نمی‌رساند. تخصص ما تجارت الکترونیک و راه اندازی کسب و کار آنلاین است و طراحی سایت تنها بخشی از این خدمات محسوب می‌شود. عکاسی 360 درجه از محصول و طراحی سیستم اختصاصی یکپارچه ERP و راهبری و چگونگی انجام کار برای رسیدن به درآمد آنلاین چیزی است که بسیاری از طراحان سایت نمی‌دانند. این در حالی است که هدف ما از طراحی سایت تمرکز روی به نتیجه رسیدن اهداف شما است نه طراحی سایت! کارگزار خدمات فناوری اطلاعات خود را به درستی و با دقت انتخاب کنید.