درس 7. رنگ متن و پس زمینه در HTML.

تاریخ: 2008-12-05

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

به طور پیش فرض، رنگ متن و به طور کلی هر فونت در صفحات وب همیشه است سیاه (#000000 ). اما ما همیشه می توانیم مطلقاً هر رنگی را که دوست داریم و مناسب یا مناسب تر برای طراحی یک سایت خاص به نظر می رسد، ست کنیم.

رنگ متن را تنظیم کنید

در HTML، رنگ متن، فونت، پس‌زمینه و سایر عناصر را می‌توان به دو روش تنظیم کرد:

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

نظرات در مورد این مقاله (درس):

آندری! چه سایت فوق العاده ای دارید! هفته دوم است که به طور منظم از آن استفاده می کنم: درس ها و فیلم های آموزشی شما را مطالعه می کنم. من ادبیات شما را می خوانم و برنامه ها را دانلود می کنم. من اولین قدم هایم را در برنامه نویسی وب برمی دارم! و مهمتر از همه، من می توانم آن را انجام دهم!!! و من اصلاً فیزیکدان نیستم، بلکه یک غزل سرا هستم! و هر کسی که از سایت ادبی من بازدید می کند می تواند این را متقاعد کند: "شعرهای اولگ گوز" مشخصات من: ایمیل: [ایمیل محافظت شده]وب سایت: http://sites.google.com/site/stihiolegguz/

کد را با دقت بررسی کنید

من سعی کردم رنگ پس زمینه رو تغییر بدم ولی درست نشد! چگونه رنگ پس زمینه را تغییر دهیم؟

نحوه تغییر رنگ فونت در html

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

برچسب هایی در html وجود دارند که به شما اجازه می دهند جلوه های خاصی را روی متن اعمال کنید، اما باید قبول کنید که ایجاد صدها برچسب برای هر سایه کاملاً منطقی نیست. در css، شما می توانید این را بسیار راحت تر کنترل کنید. به عنوان مثال، به این ترتیب می توانید رنگ فونت عنصر بدنه html را تنظیم کنید، یعنی برچسبی که شامل تمام محتوای صفحه نمایش داده شده در صفحه است.

بدنه (رنگ: قرمز؛ )

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

فرمت های ضبط رنگ

شاید دانش کمی در زمینه طراحی وب داشته باشید؟ در این مورد باید توجه داشته باشید که حالت های رنگی متفاوتی وجود دارد. به عنوان مثال، rgb، rgba، hsl، hex و غیره. البته، ساده ترین راه برای تنظیم رنگ، نوشتن یک کلمه کلیدی است. ما دقیقاً این کار را در مثال بالا انجام دادیم که قرمز حروف را قرمز می کند، آبی آنها را آبی و قهوه ای آنها را قهوه ای می کند. اینها فقط نام رنگ ها در انگلیسی هستند.

تنها چیزی که در این مورد باید بدانید نام رنگ مورد نظر است. می توانید آنها را در اینترنت در هر جدولی جستجو کنید. روش محبوب بعدی برای تعیین یک رنگ، نوشتن کد هگزادسیمال آن است. این به اصطلاح فرمت هگز است. مثال ها:

p( color: #000; ) /* متن پاراگراف ها مشکی خواهد بود. */ table( color: #fff; ) /* محتوای جداول سفید خواهد بود. */

همانطور که می بینید، باید شبکه را یادداشت کنید، پس از آن کد رنگ را بنویسید. چگونه او را بشناسیم؟ به عنوان مثال، می توانید فتوشاپ یا هر ویرایشگر گرافیکی دیگری را که کد هگز آن را هنگام انتخاب رنگ نمایش می دهد، باز کنید. همچنین می توانید از خدمات آنلاین استفاده کنید.

Rgb یکی دیگر از فرمت های ضبط محبوب است. این مخفف به سادگی - قرمز، سبز، آبی است. رنگ در این فرمت به صورت زیر تنظیم می شود:

#footer(رنگ: rgb(234، 22، 56)؛ )

عنصر با پاورقی id رنگ مشخص شده را دریافت می کند. نسبت قرمز 234، سبز - 22، آبی - 56 خواهد بود. این مقادیر را می توان از 0 تا 255 نوشت. بر این اساس، سایه ما به قرمز نزدیکتر می شود. در Paint، می‌توانید با تغییر میزان اشباع سه رنگ اصلی، رنگ‌ها را به پالت اضافه کنید.

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

Rgba - متن شفاف!

بله، این یک حالت ضبط جدید است که برای مدت طولانی در ویرایشگرهای گرافیکی وجود داشته است، اما نسبتاً اخیراً در طراحی وب ظاهر شده است. اینگونه نوشته شده است:

a( rgba(255، 12، 22، 0.5)؛ )

آخرین عدد در ورودی، شفافیت را مشخص می کند. می توان آن را از 0 تا 1 نوشت، جایی که 1 متن کاملاً مات است، که رفتار پیش فرض است. در این صورت همه لینک ها قرمز می شوند اما به دلیل شفافیت، روشنایی رنگ بسیار کمتر می شود و اگر پس زمینه یا عنصر دیگری در زیر لینک وجود داشته باشد، قابل مشاهده خواهد بود.

روش اشتباه برای تنظیم رنگ

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

نحوه تعریف رنگ برای یک قطعه دلخواه

خوب، ما در مورد رنگ فونت برای پاراگراف ها، پیوندها و جداول صحبت می کنیم، اما اینها عناصر جامد هستند، اما اگر بخواهید رنگی را برای یک جمله، یک کلمه، یک حرف تعریف کنید، چه؟

ما به سادگی قطعه مورد نظر را در تگ های span قرار می دهیم. ما صفت class را در داخل تگ می نویسیم که یک مقدار دلخواه اما قابل فهم برای آن تعیین می کنیم. به عنوان مثال، مانند این:

همه چیز، در حال حاضر تنها به مراجعه به انتخابگر در css باقی مانده است.

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

یک ویژگی سبک متن درون خطی را تنظیم کنید

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

برای تغییر رنگ متن کافی است در قسمت انتخابی فیلد متن داخل تگ باز، کلمه style="" را وارد کنید. در داخل این ویژگی، می توانید مقادیر پارامترهای مختلفی را تعیین کنید - مقدار ویژگی رنگ مسئول تغییر سایه رنگ متن است. با تعیین این پارامتر، پس از علامت دو نقطه، باید رنگی را مشخص کنید که تمام کاراکترهای این فیلد با آن رنگ آمیزی شوند. در همان زمان، هنگام تعریف یک رنگ، می توانید یک مقدار رنگ صریح، به عنوان مثال، قرمز یا زرد، یا مقدار هگزادسیمال آن، یا rgb را مشخص کنید.

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

1.

متن

2.

متن

3.

متن

تغییر رنگ با استفاده از CSS

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

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