X
این مقاله توسط تیم آموزشدیدهی ویراستاران و پژوهشگرانی که صحت و جامعیت آن را تأیید کردهاند، بهطور مشارکتی نوشته شده است.
این مقاله ۲٬۶۰۲بار مشاهده شده است.
این ویکیهاو به تو یاد میدهد که چگونه رنگ پسزمینهی صفحهی وب را با ویرایش کردن HTML تغییر بدهی.
مراحل
روش 1
روش 1 از 4:
آماده شدن برای ویرایش HTML
- رنگ پسزمینه را مشخص کن. رنگهای HTML توسط یک کد مبتنی بر سایهبندی مشخص شدهاند. میتوانی کد رنگ(های) موردنظرت را با استفاده از انتخاب کننده رایگان رنگ W3Schools HTML پیدا کنی:
- در مرورگر وب کامپیوتر به آدرس https://www.w3schools.com/colors/colors_picker.asp برو.
- در بخش "Pick a Color" (انتخاب رنگ)، روی رنگ پایهای که میخواهی از آن استفاده کنی کلیک کن.
- در سمت راست صفحه، سایهی موردنظرت را انتخاب کن.
- کد عددی که در سمت راست سایه نوشته شده است را یادداشت کن.
- فایل HTML موردنظر را در یکی از ویرایشگرهایی که دوست داری باز کن. ویژگی <bgcolor> از نسخهی پنجم HTML به بعد، دیگر پشتیبانی نمیشود. رنگ پسزمینه و سایر ویژگیهای شکل صفحه باید با استفاده از CSS تعریف شوند.[۱]
- ویرایش موردنظرت را درصورت استفاده از کامپیوتر ویندوز میتوانی با برنامهی ++Notepad یا Notepad و در صورتیکه از مک استفاده میکنی با استفاده از TextEdit یا BBEdit انجام بدهی.
- تگ header (سربرگ) "html" را به سند اضافه کن. تمام اطلاعات مربوط به سبک و ویژگیهای صفحه (شامل رنگ پسزمینه) باید بین تگهای
<style></style>
قرار بگیرند:<!DOCTYPE html><html><head><style></style> </head></html>
- یک خط خالی بین تگهای "style" (سبک) ایجاد کن. باید یک خط خالی زیر تگ
<style>
و بالای تگ<style/>
داشته باشی تا بتوانی اطلاعات موردنظرت را وارد کنی. - عنصر "body" (بدنه) را اضافه کن. کدهای زیر را بین تگهای
<style></style>
اضافه کن:- هر تغییری که در عنصر "body" (بدنه) در CSS ایجاد بکنی، در کل صفحه تاثیر خواهد گذاشت.
- اگر میخواهی طرح گرادیانی ایجاد بکنی، نیازی به این مرحله نداری.
body { }
روش 2
روش 2 از 4:
پسزمینهی تکرنگ
- Header (سربرگ) فایل "html" را پیدا کن. این Header (سربرگ) باید در قسمت بالای سند قرار داشته باشد.
- ویژگی "background-color" (رنگ پسزمینه) را به بخش "body" (بدنه) اضافه کن. عبارت
:background-color
رابین دو آکولاد body (بدنه) تایپ کن. باید عناصر زیر را در قسمت "body" (بدنهی) داشته باشی:- در این متن باید color به شکل "color" نوشته شود تا بهدرستی کار کند، نباید آن را با املای "colour" بنویسی.
body { background-color: }
- رنگ موردنظرت را به "background-color" (رنگ پسزمینه) اضافه کن. برای این کار، کد عددی رنگ موردنظر را بههمراه یک نقطه ویرگول جلوی ":background-color" (رنگ پسزمینه) بنویس. به عنوان مثال، برای رنگ پسزمینهی صورتی کد به شکل زیر نوشته میشود:
body { background-color: #d24dff;}
- اطلاعات "style" (سبک) را مرور کن. Header (سربرگ) سند HTML تو در این مرحله باید بهشکل زیر باشد:
<!DOCTYPE html><html><head><style>body {background-color: #d24dff}</style></head></html>
- از ویژگی "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:
ایجاد پسزمینهی گرادیانی
- Header (سربرگ) سند "html" را پیدا کن. این Header (سربرگ) باید در قسمت بالای سند قرار داشته باشد.
- با نحوهی نوشتن کد آشنا شو. وقتی در حال ساخت پسزمینهی گرادیانی هستی، به دو بخش اطلاعات نیاز داری: نقطه/ زاویهی شروع و رنگهایی که قرار است گرادیان بین آنها جابهجا شود. میتوانی رنگهای مختلفی را برای گرادیان انتخاب کرده و همچنین برای گرادیان جهت حرکت و زاویه تنظیم کنی.[۳]
background: linear-gradient(direction/angle, color1, color2, color3, etc.);
- یک گرادیان عمودی درست کن. اگر برای گرادیان جهت تعیین نکنی، جهت حرکت آن بهصورت پیشفرض از بالا به پایین خواهد بود. برای ساختن گرادیان، کدهای زیر را بین تگهای
<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; }
- یک گرادیان جهتدار ایجاد کن. اگر میخواهی گرادیانی ایجاد کنی که کاملاً عمودی نباشد، میتوانی با اضافه کردن جهت به گرادیان، نحوهی نمایش تغییر رنگ آن را تغییر بدهی. برای انجام این کار باید کدهای زیر را بین تگهای:
<style> </style>
بنویسی:[۴]- میتوانی با تگهای "left" (چپ) و "right" (راست) بازی کنی و تغییر جهتهای مختلف گرادیان را امتحان کنی.
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; }
- از ویژگیهای دیگر تنظیم گرادیان استفاده کن. کارهای بسیاری هست که میتوانی با گرادیانها انجام بدهی.
- به عنوان مثال، نهتنها میتوانی برای گرادیان بیش از دورنگ تعریف کنی، بلکه امکان تعریف درصد در کنار هریک از رنگها را نیز داری. با انجام این کار میتوانی مقدار فضایی که میخواهی هریک از رنگها داشته باشند را تنظیم کنی. مثال زیر نمونهای از یک گرادیان است که با استفاده از این ویژگیها ایجاد شده است:
background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
- به عنوان مثال، نهتنها میتوانی برای گرادیان بیش از دورنگ تعریف کنی، بلکه امکان تعریف درصد در کنار هریک از رنگها را نیز داری. با انجام این کار میتوانی مقدار فضایی که میخواهی هریک از رنگها داشته باشند را تنظیم کنی. مثال زیر نمونهای از یک گرادیان است که با استفاده از این ویژگیها ایجاد شده است:
- 6به رنگهای گرادیان شفافیت اضافه کن. این کار باعث ایجاد حالت محو شدن در رنگ میشود. از همان رنگ استفاده کن تا طیفی از خود رنگ به سمت بیرنگی ایجاد شود. میتوانی برای تعیین شفافیت رنگ از ویژگی rgba() استفاده کنی. مقدار انتهایی در این کد، عدد شفافیت را نمایش میهد: 0 برای رنگ یکدست و 1 برای بدون رنگ و شفاف استفاده میشود.
background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
- کدهای تکمیل شده را مرور کن. کدهایی که برای ایجاد رنگ گرادیانی پسزمینهی وبسایتت استفاده میکنی باید شبیه به کدهای زیر نوشته شده باشد:
<!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:
ایجاد پسزمینهی متغییر
- Header (سربرگ) سند "html" را پیدا کن. این Header (سربرگ) باید در قسمت بالای سند قرار داشته باشد.
- ویژگی انیمیشن را به عنصر "body" (بدنه) اضافه کن. کدهای زیر را در فاصلهای که زیر آکولاد باز"}body " و بالای آکولاد بسته قرار دارد وارد کن:[۵]
- خط بالایی این نوشته برای مرورگرهای مبتنی بر کروم و نوشتهی پایینی مختص مرورگرهای دیگر است.
-webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite;
- رنگهای موردنظرت را به انیمیشن اضافه کن. حالا میتوانی از دستور keyframes@ برای تنظیم رنگ پسزمینه استفاده کنی با این کار، ضمن اینکه رنگها در صفحه حرکت میکنند، میتوانی مدتزمان نمایش هر رنگ در صفحه را نیز تنظیم کنی. اینجا هم باید برای مرورگرهای مختلف، اطلاعات و کدهای مختلفی را بنویسی. کدهای زیر را در زیر آکولادی که عنصر "body" (بدنه) را میبندد بنویس: [۶]
- درنظر داشته باش که دو دستور (-webkit-keyframes@ وkeyframes@ رنگ و درصد پسزمینهی یکسانی را دارند. اگر میخواهی خروجی کار در تمام مرورگرها یکسان باشد باید این دو یکسان باقی بمانند.
- درصدهای (0%، 25% و غیره) نشاندهندهی درصدی از کل طول زمان انیمیشن (60s) هستند. وقتی صفحه بارگذاری شد، پسزمینه به رنگی که با کد 0% (#33FFF3) تنظیم شده دیده خواهد شد. وقتی ۲۵٪ از ۶۰ ثانیه انیمیشن اجرا شود، رنگ پسزمینه به 7821F# تغییر کرده و بههمین صورت ادامه پیدا میکند.
- میتوانی زمان و رنگهای مورد نمایش را به دلخواه خودت ویرایش کنی.
@-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;}}
- کدهایت را مرور کن. کدهای نوشته شده برای تغییر رنگ پسزمینه باید شبیه به نمونهی زیر باشد:
<!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 یک عکس را به عنوان پسزمینهی وبسایت انتخاب کنی.
هشدارها
- قبل از انتشار آنلاین وبسایت، تمامی تغییرات انجام شده را بررسی و مرور کن.
منابع
در مورد ویکیهاو
به زبانهای دیگر
English:Set Background Color in HTML
Bahasa Indonesia:Memasang Warna Latar Belakang HTML
Русский:задать цвет фона в HTML
Português:Configurar Cores de Fundo em HTML
Nederlands:De achtergrondkleur in HTML aanpassen
Tiếng Việt:Thiết lập màu nền trong HTML
日本語:HTMLで背景色を指定する
한국어:HTML 배경색 바꾸는 방법
از این صفحه ۲٬۶۰۲بار بازدید شدهاست.