چگونه رنگ پس‌زمینه‌ی HTML را تنظیم کنیم

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

روش 1
روش 1 از 4:

آماده‌ شدن برای ویرایش HTML

  1. How.com.vn فارسی: Step 1 رنگ پس‌زمینه‌ را مشخص کن.
    رنگ‌های HTML توسط یک کد مبتنی بر سایه‌بندی مشخص شده‌اند. می‌توانی کد رنگ‌(های) موردنظرت را با استفاده از انتخاب کننده رایگان رنگ W3Schools HTML پیدا کنی:
    • در مرورگر وب کامپیوتر به آدرس https://www.w3schools.com/colors/colors_picker.asp برو.
    • در بخش "Pick a Color" (انتخاب رنگ)، روی رنگ پایه‌ای که می‌خواهی از آن استفاده کنی کلیک کن.
    • در سمت راست صفحه، سایه‌ی مورد‌نظرت را انتخاب کن.
    • کد عددی که در سمت راست سایه نوشته شده است را یادداشت کن.
  2. How.com.vn فارسی: Step 2 فایل HTML مورد‌نظر را در یکی از ویرایشگر‌هایی که دوست داری باز کن.
    ویژگی‌ <bgcolor> از نسخه‌ی پنجم HTML به بعد، دیگر پشتیبانی نمی‌شود. رنگ پس‌زمینه و سایر ویژگی‌های شکل صفحه باید با استفاده از CSS تعریف شوند.[۱]
    • ویرایش‌ مورد‌نظرت را در‌صورت استفاده از کامپیوتر ویندوز می‌توانی با برنامه‌ی ++Notepad یا Notepad و در صورتی‌که از مک استفاده می‌کنی با استفاده از TextEdit یا BBEdit انجام بدهی.
  3. Step 3  تگ header (سربرگ) "html" را به سند اضافه کن.
    تمام اطلاعات مربوط به سبک‌ و ویژگی‌های صفحه (شامل رنگ پس‌زمینه) باید بین تگ‌های <style></style> قرار بگیرند:
      <!DOCTYPE html><html><head><style></style> </head></html>
  4. Step 4 یک خط خالی بین تگ‌های "style" (سبک) ایجاد کن.
    باید یک خط خالی زیر تگ <style> و بالای تگ <style/> داشته باشی تا بتوانی اطلاعات مورد‌نظرت را وارد کنی.
  5. Step 5 عنصر "body" (بدنه) را اضافه کن.
    کد‌های زیر را بین تگ‌های <style></style> اضافه کن:
      body { }
    • هر تغییری که در عنصر "body" (بدنه) در CSS ایجاد بکنی، در کل صفحه تاثیر خواهد گذاشت.
    • اگر می‌خواهی طرح گرادیانی ایجاد بکنی، نیازی به این مرحله نداری.
روش 2
روش 2 از 4:

پس‌زمینه‌ی تک‌رنگ

  1. Step 1 Header (سربرگ)  فایل "html" را پیدا کن.
    این Header (سربرگ) باید در قسمت بالای سند قرار داشته باشد.
  2. Step 2 ویژگی "background-color" (رنگ پس‌زمینه) را به بخش "body" (بدنه‌‌) اضافه کن.
    عبارت :background-color رابین دو آکولاد body (بدنه) تایپ کن. باید عناصر زیر را در قسمت "body" (بدنه‌ی) داشته باشی:
      body {    background-color: }
    • در این متن باید color به شکل "color" نوشته شود تا به‌درستی کار کند، نباید آن را با املای "colour" بنویسی.
  3. Step 3 رنگ موردنظرت را به "background-color" (رنگ پس‌زمینه) اضافه کن.
    برای این کار، کد عددی رنگ موردنظر را به‌همراه یک نقطه ویرگول جلوی ":background-color" (رنگ پس‌زمینه) بنویس. به عنوان مثال، برای رنگ پس‌زمینه‌ی صورتی کد به شکل زیر نوشته می‌شود:
      body {    background-color: #d24dff;}
  4. Step 4 اطلاعات "style" (سبک) را مرور کن.
    Header (سربرگ) سند HTML تو در این مرحله باید به‌شکل زیر باشد:
      <!DOCTYPE html><html><head><style>body {background-color: #d24dff}</style></head></html>
  5. Step 5 از ویژگی "background-color"...
    از ویژگی "background-color" (رنگ پس‌زمینه) برای اضافه کردن رنگ پس‌زمینه به عناصر دیگر استفاده کن. همان طور که در عنصر body (بدنه) از "background-color" (رنگ پس‌زمینه) استفاده کردی، می‌توانی از آن برای تعیین رنگ پس‌زمینه‌ی عناصری مانند Header (سربرگ)، پاراگراف‌ها و نظیر این‌ها استفاده بکنی. به عنوان مثال برای اضافه کردن رنگ پس‌زمینه به Header (سربرگ) اصلی (<h1>) یا به یک پاراگراف (<p>)، کد‌ها به شکل زیر نوشته می‌شود:[۲]
      <!DOCTYPE html><html><head><style>body {    background-color: #216fdb;}h1 {    background-color: #00b33c;}p {    background-color: #FFFFFF);}</style></head><body><h1>Header with Green Background</h1><p>Paragraph with white background</p></body></html>
روش 3
روش 3 از 4:

ایجاد پس‌زمینه‌ی گرادیانی

  1. Step 1 Header (سربرگ) سند "html" را پیدا کن.
    این Header (سربرگ) باید در قسمت بالای سند قرار داشته باشد.
  2. How.com.vn فارسی: Step 2 با نحوه‌ی نوشتن کد آشنا شو.
    وقتی در حال ساخت پس‌زمینه‌ی گرادیانی هستی، به دو بخش اطلاعات نیاز داری: نقطه/ زاویه‌ی شروع و رنگ‌هایی که قرار است گرادیان بین آن‌ها جا‌به‌جا شود. می‌توانی رنگ‌های مختلفی را برای گرادیان انتخاب کرده و همچنین برای گرادیان جهت حرکت و زاویه تنظیم کنی.[۳]
      background: linear-gradient(direction/angle, color1, color2, color3, etc.);
  3. How.com.vn فارسی: Step 3 یک گرادیان عمودی درست کن.
    اگر برای گرادیان جهت تعیین نکنی، جهت حرکت آن به‌صورت پیش‌فرض از بالا به پایین خواهد بود. برای ساختن گرادیان، کد‌های زیر را بین تگ‌های <style></style> اضافه کن:
      html {    min-height: 100%; }body {    background: -webkit-linear-gradient(#216fdb, #C9DCB9);     background: -o-linear-gradient(#216fdb, #C9DCB9);     background: -moz-linear-gradient(#216fdb, #C9DCB9);     background: linear-gradient(#216fdb, #C9DCB9);     background-color: #216fdb; }
    • نحوه‌ی اجرا و عملکرد گرادیان در مرورگر‌های مختلف متفاوت است، بنابراین باید چند نسخه‌ی متفاوت از این کد را بنویسی.
  4. How.com.vn فارسی: Step 4 یک گرادیان جهت‌دار ایجاد کن.
    اگر می‌خواهی گرادیانی ایجاد کنی که کاملاً عمودی نباشد، می‌توانی با اضافه کردن جهت به گرادیان، نحوه‌ی نمایش تغییر رنگ آن را تغییر بدهی. برای انجام این کار باید کد‌های زیر را بین تگ‌های:<style> </style> بنویسی:[۴]
      html {    min-height: 100%;}body {    background: -webkit-linear-gradient(left, #216fdb, #C9DCB9);     background: -o-linear-gradient(right, #216fdb, #C9DCB9);     background: -moz-linear-gradient(right, #216fdb, #C9DCB9);     background: linear-gradient(to right, #216fdb, #C9DCB9);     background-color: #216fdb; }
    • می‌توانی با تگ‌های "left" (چپ) و "right" (راست) بازی کنی و تغییر جهت‌های مختلف گرادیان را امتحان کنی.
  5. How.com.vn فارسی: Step 5 از ویژگی‌های دیگر تنظیم گرادیان استفاده کن.
    کار‌های بسیاری هست که می‌توانی با گرادیان‌ها انجام بدهی.
    • به عنوان مثال، نه‌تنها می‌توانی برای گرادیان بیش از دورنگ تعریف کنی، بلکه امکان تعریف درصد در کنار هریک از رنگ‌ها را نیز داری. با انجام این کار می‌توانی مقدار فضایی که می‌خواهی هر‌یک از رنگ‌ها داشته باشند را تنظیم کنی. مثال زیر نمونه‌ای از یک گرادیان است که با استفاده از این ویژگی‌ها ایجاد شده است:
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
  6. 6
    به رنگ‌های گرادیان شفافیت اضافه کن. این کار باعث ایجاد حالت محو شدن در رنگ می‌شود. از همان رنگ استفاده کن تا طیفی از خود رنگ به سمت بی‌رنگی ایجاد شود. می‌توانی برای تعیین شفافیت رنگ از ویژگی rgba() استفاده کنی. مقدار انتهایی در این کد، عدد شفافیت را نمایش می‌هد: 0 برای رنگ یک‌دست و 1 برای بدون رنگ و شفاف استفاده می‌شود.
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
  7. How.com.vn فارسی: Step 7 کد‌های تکمیل شده‌ را مرور کن.
    کد‌هایی که برای ایجاد رنگ گرادیانی پس‌زمینه‌ی وب‌سایتت استفاده می‌کنی باید شبیه به کد‌های زیر نوشته شده باشد:
      <!DOCTYPE html><html><head><style>html {    min-height: 100%;} body {    background: -webkit-linear-gradient(left, #216fdb, #C9DCB9);     background: -o-linear-gradient(right, #216fdb, #C9DCB9);    background: -moz-linear-gradient(right, #216fdb, #C9DCB9);     background: linear-gradient(to right, #216fdb, #C9DCB9);     background-color: #216fdb; }</style></head><body></body></html>
روش 4
روش 4 از 4:

ایجاد پس‌زمینه‌ی متغییر

  1. Step 1 Header (سربرگ) سند "html" را پیدا کن.
    این Header (سربرگ) باید در قسمت بالای سند قرار داشته باشد.
  2. Step 2 ویژگی انیمیشن را به عنصر "body" (بدنه) اضافه کن.
    کد‌های زیر را در فاصله‌ای که زیر آکولاد باز"}body " و بالای آکولاد بسته قرار دارد وارد کن:[۵]
          -webkit-animation: colorchange 60s infinite;     animation: colorchange 60s infinite;
    • خط بالایی این نوشته برای مرورگر‌های مبتنی بر کروم و نوشته‌ی پایینی مختص مرورگر‌های دیگر است.
  3. How.com.vn فارسی: Step 3 رنگ‌های مورد‌نظرت را به انیمیشن اضافه کن.
    حالا می‌توانی از دستور keyframes@ برای تنظیم رنگ پس‌زمینه استفاده کنی با این کار، ضمن اینکه رنگ‌ها در صفحه حرکت می‌کنند، می‌توانی مدت‌زمان نمایش هر رنگ در صفحه را نیز تنظیم کنی. اینجا هم باید برای مرورگر‌های مختلف، اطلاعات و کد‌های مختلفی را بنویسی. کد‌های زیر را در زیر آکولادی که عنصر "body" (بدنه) را می‌بندد بنویس: [۶]
      @-webkit-keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}@keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}
    • درنظر داشته باش که دو دستور (-webkit-keyframes@ وkeyframes@ رنگ و درصد پس‌زمینه‌ی یکسانی را دارند. اگر می‌خواهی خروجی کار در تمام مرورگر‌ها یکسان باشد باید این دو یکسان باقی بمانند.
    • درصد‌های (0%، 25% و غیره) نشان‌دهنده‌ی درصدی از کل طول زمان انیمیشن (60s) هستند. وقتی صفحه بارگذاری شد، پس‌زمینه به رنگی که با کد‌ 0% (#33FFF3) تنظیم شده دیده خواهد شد. وقتی ۲۵٪ از ۶۰ ثانیه‌ انیمیشن اجرا شود، رنگ پس‌زمینه به 7821F# تغییر کرده و به‌همین صورت ادامه پیدا می‌کند.
    • می‌توانی زمان و رنگ‌های مورد نمایش را به دلخواه خودت ویرایش کنی.
  4. How.com.vn فارسی: Step 4 کد‌هایت را مرور کن.
    کد‌های نوشته شده برای تغییر رنگ پس‌زمینه باید شبیه به نمونه‌ی زیر باشد:
      <!DOCTYPE html><html><head><style>body {    -webkit-animation: colorchange 60s infinite;     animation: colorchange 60s infinite;}@-webkit-keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}@keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}   </style></head><body></body></html>

نکات

  • اگر می‌خواهی در کد‌های HTML از رنگ‌های پایه استفاده کنی، می‌توانی به‌جای استفاده از کد رنگ HTML، اسم رنگ مورد‌نظرت را بدون استفاده از علامت (#) بنویسی. به عنوان مثال: می‌توانی برای رنگ پس‌زمینه‌ی نارنجی، دستور را به صورت;background-color: orange تایپ کنی.
  • همچنین می‌توانی در HTML یک عکس را به عنوان پس‌زمینه‌ی وب‌سایت انتخاب کنی.

هشدارها

  • قبل از انتشار آنلاین وب‌سایت، تمامی تغییرات انجام شده را بررسی و مرور کن.

در مورد ویکی‌هاو

How.com.vn فارسی: Jessica Andzouana
به‌طور مشارکتی نوشته شده با همکاری:
Jessica Andzouana
این مقاله توسط تیم آموزش‌دیده‌ی ویراستاران و پژوهشگرانی که صحت و جامعیت آن را تأیید کرده‌اند، به‌طور مشارکتی نوشته شده است. این مقاله ۲٬۶۰۲بار مشاهده شده است.
از این صفحه ۲٬۶۰۲بار بازدید شده‌است.

آیا این مقاله کمکتان کرد؟