رنگ متن و پس زمینه را تغییر دهید. چگونه رنگ پس زمینه و متن را در یک صفحه وب تنظیم کنیم؟ نحوه تنظیم رنگ پس زمینه در html

در فصل های قبلی، ما یک قالب اولیه برای اسناد HTML گردآوری کردیم، مشخص کردیم که تگ های HTML چیست، نحوه ذخیره و ویرایش فایل های HTML را یاد گرفتیم و در این فصل ما بیایید با ویژگی های برچسب آشنا شویمو رنگ متن و پس زمینه صفحه را تغییر دهید.

ما را باز کنیم index.html، برای ویرایش: من مدیریت کردم!!! و بیایید کمی آن را تغییر دهیم، ویژگی ها را اضافه کنیم: text="#000000" bgcolor="#ffffff"> انجامش دادم!!! صفتیک پارامتر برچسب است که به عنوان یک "جفت" در تگ درج می شود (نام پارامتر + مقدار پارامتر).
مقادیر ویژگی تگ درج شده است:
1) text=#000000 بدون نقل قول;
2) text="#000000" در نقل قول;
3) text="#000000" در دو گیومه.
هر کدام از این گزینه ها صحیح است، اما اگر به اخلاق کد اهمیت می دهید، بهتر است مانند مثال بالا از دو نقل قول استفاده کنید.

صفت "متن"رنگ متن را در کل صفحه کنترل می کند و "bgcolor"رنگ پس زمینه صفحه را کنترل می کند.

اکنون پیشنهاد می کنم در مورد رنگ ها برای اسناد HTML صحبت کنیم. رنگ تنظیم شده است:
1) متن "طلا"- کلمات در زبان انگلیسی، به عنوان مثال: طلایی (طلایی)، قرمز (قرمز)، سبز (سبز) و غیره...
اما یک رنگ می تواند تنها از یک کلمه تشکیل شده باشد، به عنوان مثال "قرمز"، اما اگر "سبز-قرمز" را بنویسید، مرورگر آن را درک نمی کند و به سادگی آن را نادیده می گیرد.
2) text="#000000"- طرح رنگ RBG (قرمز سبز آبی). "#" این نماد نشان می دهد که این یک عدد رنگ است، دو علامت اول (صفر در مثال من) به ما می گویند که چند رنگ "قرمز" گرفته ایم، دومی سبز و دو علامت آخر آبی است.
هر رنگ از 00 تا FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F) مشخص شده است، به عنوان مثال #000000-مشکی، #ffffff-سفید، #ff0000-قرمز، # 00ff00- سبز #0000ff-آبی

به عنوان یک امتیاز از سایت، پیشنهاد می کنم پالت رنگ (2 کیلوبایت) را که در تصویر بالا نشان داده شده است، دانلود کنید. باید آرشیو را باز کرده و فایل را اجرا کنید color.html، سپس در قسمت بزرگ، نشانگر ماوس را روی رنگ مورد نیاز خود قرار دهید که در یک پنجره کوچک نشان داده می شود و اگر در این زمان روی ماوس کلیک کنید، کد رنگ در پنجره کوچک سمت راست ظاهر می شود.

حالا بیایید به پرونده خودمان برگردیم index.htmlو آن را به عنوان ذخیره کنید tsvet.html، حالا بیایید ببینیم چه اتفاقی افتاده است. او چگونه بود و چگونه باقی مانده است؟ و کاملا حق با شماست، زیرا رنگ سفید برای پس زمینه و سیاه برای متن رنگ پیش فرض است. برای مشاهده تفاوت، بیایید مقادیر ویژگی را تغییر دهیم:

text=gold" bgcolor="#0900b8"> انجامش دادم!!! بیایید ذخیره و تماشا کنیم (در یک برگه جدید باز می شود)

راه های دیگری برای تنظیم متن در فایل های HTML وجود دارد، اما این دو روش اصلی در نظر گرفته می شوند.

در فصل بعدی یاد خواهیم گرفت که چگونه متن را با تگ های BR دستکاری کرده و متن را در خط دیگری قرار دهیم.

شما می توانید به راحتی وبلاگ یا وب سایت خود را به طور کامل شخصی سازی کنید. این مقاله به شما نشان می دهد که چقدر آسان است که فونت هدر و تصویر پس زمینه صفحه خود را تغییر دهید.

وبلاگ نویسان و صاحبان وب سایت ها معمولاً پس زمینه را تغییر می دهند تا وب سایت خود را از نظر بصری برای بازدیدکنندگان جذاب تر کنند. با این حال، تصویر پس‌زمینه‌ای که به اشتباه اضافه می‌شود، می‌تواند بازدیدکننده را گیج کند و حتی باعث شود که به سایت یا وبلاگ شما اعتماد نداشته باشد و دیگر تمایلی به بازدید از آن نداشته باشد. برای افزودن صحیح پس زمینه، استفاده از کدهای HTML مناسب مهم است.

فقط چند راه ساده وجود دارد که می توانید ظاهر وب سایت موجود خود را تغییر دهید. بسیاری از کاربران حتی متوجه نیستند که چقدر ساده است.

نحوه سفارشی سازی فونت

اول از همه، شما باید چهار متا تگ را در هر جایی اضافه کنید< head >. شما به سادگی می توانید نمادهای زیر را کپی کنید و آنها را در منبع خود قرار دهید و ابتدا فاصله ها را حذف کنید.

نحوه سفارشی کردن رنگ پس زمینه

صفحه HTML وبلاگ یا وب سایت خود را باز کنید. هنگام ویرایش یک صفحه، می‌توانید آن را در Dreamweaver باز کنید تا کارتان آسان‌تر شود. اگر سایت شما با استفاده از سازنده وب سایت ایجاد شده است، برخی از سرویس ها به شما اجازه می دهند تا تنظیمات HTML را به صورت آنلاین با رفتن به صفحه «طراحی» و انتخاب برگه «ویرایش HTML» تغییر دهید. در هر صورت، باید بتوانید به کدهای HTML وبلاگ یا وب سایت خود دسترسی داشته باشید. بسته به اینکه چه خدماتی در دسترس شما است و از چه موتوری استفاده می کنید، فرآیند راه اندازی می تواند بسیار متفاوت باشد.

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

به راحتی می توانید نمودارهای رنگی HTML را در نشریات تخصصی پیدا کنید. هر رنگ در نشانه گذاری به عنوان یک کد شش رقمی نمایش داده می شود. به عنوان مثال، پس زمینه سفید به عنوان #FFFFFF نشان داده شده است.

بنابراین، کد رنگی را که می خواهید در سایت شما به عنوان رنگ پس زمینه نمایش داده شود، پیدا کنید. در نشانه گذاری به این صورت خواهد بود:

background-color:#XXXXXX; (

هنگامی که رنگ پس زمینه را در HTML ذخیره کردید، خواهید دید که ظاهر صفحه شما تغییر کرده است.

افزودن تصویر پس زمینه

تصویری را که می خواهید به عنوان پس زمینه اضافه کنید انتخاب کنید. سایت های زیادی وجود دارند که به شما امکان دانلود چنین پس زمینه هایی را می دهند. یا می توانید از عکسی استفاده کنید که قبلاً در رایانه شما ذخیره شده است.

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

کد را برای اضافه کردن یک تصویر به عنوان پس‌زمینه جای‌گذاری کنید. در HTML به شکل زیر است:

background-image: url(image URL);

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

با این حال، به یاد داشته باشید که بارگذاری تصاویر بسیار بزرگ ممکن است زمان زیادی طول بکشد، که برای بسیاری از بازدیدکنندگان ناخوشایند خواهد بود. به همین دلیل سعی کنید تصاویر کوچکی را برای این منظور انتخاب کنید.

در این آموزش شما یاد خواهید گرفت که چگونه پس زمینه و رنگ متن هر عنصر را در صفحه HTML تغییر دهید. به طور کلی، در زبان HTML، برخی از تگ ها دارای ویژگی های خاصی هستند که تغییر رنگ می دهند، به عنوان مثال bgcolor (رنگ پس زمینه). اما، اولا، این ویژگی‌ها منسوخ شده‌اند (فکر می‌کنم معنی آن را به خاطر دارید)، و ثانیا، همانطور که قبلاً گفتم، همه برچسب‌ها آنها را ندارند. بنابراین، فرض کنید می‌خواهید رنگ پس‌زمینه یک پاراگراف متن را تغییر دهید. و چگونه این کار را انجام خواهید داد، زیرا برچسب

آیا چنین ویژگی وجود ندارد؟ بنابراین، مانند درس های قبلی، از styles (CSS) یعنی ویژگی سبک جهانی استفاده می کنیم که به ما امکان می دهد رنگ را در هر کجا که بخواهیم تغییر دهیم.

چگونه می توان یک رنگ را مشخص کرد؟

رنگ ها در HTML (و CSS) را می توان به روش های مختلفی مشخص کرد، من محبوب ترین و رایج ترین آنها را به شما نشان می دهم:

• نام رنگ- HTML فهرست بزرگی دارد و برای نشان دادن یک رنگ کافی است نام آن را به انگلیسی بنویسید مثلا: قرمز، سبز، آبی.
• کد رنگ HEX- مطلقاً هر رنگی را می توان با مخلوط کردن سه رنگ اصلی به نسبت های مختلف - قرمز، سبز و آبی به دست آورد. کد HEX سه جفت مقدار هگزادسیمال است که مسئول تعداد این رنگ ها در هر رنگ است. قبل از کد رنگ باید علامت هش (#) باشد، به عنوان مثال: #FF8C00، #CC3300 و غیره.

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

چگونه رنگ متن را تغییر دهیم؟

برای تغییر رنگ متن در هر عنصر از صفحه HTML، باید ویژگی style را در داخل تگ مشخص کنید. نحو کلی به شرح زیر است:

<тег style= "color:color name" >... - تعیین رنگ متن با نام.

<тег style= "color:#HEX code" >... - تعیین رنگ متن با کد.

و طبق معمول، برای تغییر رنگ متن در کل صفحه، فقط ویژگی style را در تگ مشخص کنید . و اگر نیاز به تغییر رنگ فونت برای یک قطعه متن دارید، آن را در یک برچسب قرار دهید و صفت را به آن اعمال کنید.

نمونه ای از تغییر رنگ متن

متن عنوان قرمز

متن پاراگراف آبی.

مورب سبز. متن قرمز.

نتیجه در مرورگر

چگونه رنگ پس زمینه را تغییر دهیم؟

رنگ پس زمینه هر عنصر صفحه را نیز می توان با استفاده از ویژگی style تغییر داد. نحو کلی عبارت است از:

<тег سبک= "پس زمینه: نام رنگ">... - تعیین رنگ پس زمینه با نام.

<тег style= "background:#HEX code" >... - تعیین رنگ پس زمینه توسط کد.

نمونه ای از تغییر رنگ پس زمینه

عنوان.

پاراگراف

بند انگشتی. متن ساده

نتیجه در مرورگر

عنوان.

پاراگراف

بند انگشتی.متن ساده

هنگامی که رنگ پس‌زمینه عناصر را تغییر می‌دهید، کاملاً مشخص می‌شود که هر یک از آنها در واقع چقدر گسترده هستند. همانطور که می بینید، عناصر بلوک مانند پاراگراف ها و سرفصل ها عموماً کل عرض موجود را اشغال می کنند، حتی اگر متن بسیار کمی داشته باشند، اما تگ های درون خطی به اندازه محتوای آنها عرض دارند. به هر حال، آخرین پاراگراف در مثال نیز کل عرض را اشغال می کند، فقط پس زمینه آن شفاف است، بنابراین پس زمینه صفحه از طریق آن قابل مشاهده است. به طور کلی، پس‌زمینه همه عناصر در صفحه‌ای که در آن به صراحت نشان داده نشده است، شفاف است، همین.

مشق شب.

1. یک عنوان برای مقاله و دو بخش آن ایجاد کنید. در ابتدای مقاله و هر بخش یک پاراگراف بنویسید.
2. اندازه فونت Courier را روی 16 پیکسل در کل صفحه، 22 پیکسل برای عنوان مقاله و 19 پیکسل برای عنوان های فرعی تنظیم کنید.
3. اجازه دهید عنوان مقاله دارای رنگ متن #0000CC باشد و عنوان‌های فرعی دارای رنگ متن #CC3366 باشند.
4. از رنگ پس زمینه #66CC33 برای برجسته کردن دو کلمه در پاراگراف دوم استفاده کنید. و در پاراگراف سوم به همین رنگ اما با یک کلمه خط کشیده.
5. فراموش نکنید که می توانید مقادیر ویژگی style را با قرار دادن نقطه ویرگول (;) بین آنها گروه بندی کنید.

پس زمینه یک سایت HTML را می توان با استفاده از هر دو ویژگی تگ تغییر داد بدن، و استفاده از سبک های CSS نیز روی تگ اعمال می شود بدن. بیایید هر دو گزینه را برای ایجاد پس زمینه برای یک وب سایت در نظر بگیریم.

تغییر رنگ پس زمینه با استفاده از HTML

برچسب بزنید بدنتقریباً مانند هر تگ HTML، ویژگی های خاص خود را دارد. برای برچسب گذاری ویژگی ها بدنمربوط بودن:

• bgcolor- رنگ پس زمینه صفحه را مشخص می کند.
• زمینه- به شما امکان می دهد یک تصویر را به عنوان پس زمینه یک صفحه وب تنظیم کنید (این موضوع به طور مفصل در مقاله مورد بحث قرار گرفته است:)
• طومار- نمایش نوار اسکرول صفحه را کنترل می کند.
• متن- رنگ پایه متنی که در صفحه وب نمایش داده می شود را تنظیم می کند.
• bgproperties- نشان می دهد که آیا پس زمینه همراه با صفحه حرکت می کند یا خیر.
• ارتباط دادن- رنگ پیش فرض لینک ها را در صفحه کنترل می کند.
• پیوند- رنگ پیوند فعال را تنظیم می کند.
• vlink- رنگ پیوند بازدید شده در صفحه را مشخص می کند.
• حاشیه چپ/حاشیه راست- تورفتگی محتوا را از لبه چپ یا راست پنجره مرورگر تنظیم می کند.
• topmargin/bottommargin- تورفتگی محتوا را از لبه بالا یا پایین پنجره مرورگر تنظیم می کند.

برای تغییر رنگ پس زمینه با استفاده از HTML، از ویژگی استفاده می کنیم bgcolor:

این نمونه ای از متن سفید است که با استفاده از ویژگی text تگ body مشخص شده است.

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

تغییر رنگ پس زمینه صفحه با استفاده از CSS

این نمونه ای از مجموعه متن سفید با استفاده از CSS پس زمینه است. پس زمینه صفحه نیز با استفاده از CSS تنظیم می شود.

در سازنده وب‌سایت Nubex، برای هر وب‌سایتی می‌توانید یک پس‌زمینه آماده از یک کتابخانه بزرگ از تصاویر انتخاب کنید، یا خودتان آن را اضافه کنید.

در آخرین مقاله در مورد چگونگی تغییر رنگ پس زمینه در یک وب سایت با استفاده از ویژگی های برچسب صحبت کردیم بدنو سبک های CSS: . این مقاله در مورد استفاده از تصاویر به عنوان پس‌زمینه در یک وب‌سایت، نحوه کشش پس‌زمینه به عرض کامل صفحه و رفع آن صحبت خواهد کرد.

تصویر به عنوان پس زمینه صفحه - HTML

بیایید ابتدا نحوه تنظیم یک تصویر پس زمینه در یک سایت با استفاده از ویژگی را در نظر بگیریم زمینهبرچسب زدن بدن:

در اینجا تصویر پس زمینه با استفاده از ویژگی پس زمینه تگ body تنظیم می شود.

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

توجه داشته باشید:توصیه می شود تصویر پس زمینه و رنگ پس زمینه را با استفاده از CSS به جای HTML تنظیم کنید. در این صورت کد معتبر و صحیح تر خواهد بود.

تصویر به عنوان پس زمینه صفحه - CSS

در CSS، رنگ پس زمینه و تصویر پس زمینه را می توان در یک ویژگی تنظیم کرد زمینه:

در اینجا تصویر پس زمینه با استفاده از ویژگی پس زمینه CSS تنظیم می شود.

در اینجا با استفاده از ملک پس زمینه-پیوستپس زمینه صفحه ثابت است و با استفاده از ویژگی پس زمینه-تکرارتکرار افقی تصویر تنظیم شده است. اما شایان ذکر است که تصویر پس زمینه باید به خوبی در اطراف لبه ها "دوخته" شود.

اگر می خواهید تصویر پس زمینه را به اندازه کامل پنجره مرورگر بکشید، از ویژگی استفاده کنید پس زمینه اندازه: 100%;

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