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

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

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

نحوه تغییر رنگ صفحات وب قبل از HTML5

قبل از ظهور «HTML5»، تغییر رنگ متن با استفاده از تگ fontبه دست می‌آمد که به ویژگی رنگ یا colorاجازه می‌داد رنگ متن را با استفاده از نام یا کد هگزادسیمال مشخص کند.

مثال زیر برای بیان این هدف است:

خروجی مثال بالا به صورت زیر است:

با این حال، با معرفی HTML5، تگfontمنسوخ شد. این کار حرکتی منطقی بود، زیرا زبان HTML در درجه اول به عنوان نوعی زبان نشانه‌گذاری عمل می‌کند نه زبان شیوه‌نامه و سبک دهی به عناصر. برای اهداف سبک و استایل بخصی، CSS (Cascading Style Sheets) رویکرد توصیه شده است. در واقعیت هم برای تغییر رنگ متن در توسعه وب مدرن، CSS روش ترجیحی اغلب کاربران بوده که مثال زیر برای بیان این هدف است:

در ادامه نحوه تغییر رنگ در HTML را با جزئیات بیشتری مورد بررسی قرار خواهیم داد.

نحوه تغییر رنگ متن در HTML

برای تنظیم رنگ متن در HTML، از ویژگی colorدر CSS استفاده می‌شود. این ویژگی به کاربر امکان می‌دهد مقادیر رنگی مختلفی مانند کدهای هگزادسیمال، «RGB» ،«HSL» یا نام رنگ‌ها را مشخص کند. برای مثال، اگر کاربری بخواهد رنگ متن را روی آبی آسمانی تنظیم کند، می‌تواند از نام « skyblue»، کد هگز «#87CEEB»، کد اعشاری RGB (135,206,235)» یا HSL با مقدار درصد (197, 71, 73) استفاده کند.

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

تغییر رنگ متنون با استفاده از استایل درون خطی

CSS درون‌خطی به کاربر این امکان را می‌دهد که با ترکیب CSS در خود تگ HTML، استایل‌ها را مستقیم به عناصر HTML اعمال کند. برای رسیدن به این هدف، از ویژگی styleدر تگ HTML استفاده می‌شود که شامل سبک‌های مورد نظر است. مثال زیر به خوبی این موضوع را بیان می‌کند:

برای تغییر رنگ متن، از ویژگی رنگ CSS به همراه مقدار رنگ انتخابی خود استفاده می‌شود:

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

تغییر رنگ متن با تگ font در HTML ساده

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

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

مرحله ۲: در این مرحله باید مکان نمای ماوس خود را در ابتدای متنی که مایل به تغییر رنگ آن هستیم قرار بدهیم و تگ fontرا در آن بنویسیم.

مرحله ۳: در این بخش باید تگ بسته شدن تگfont، یعنی/fontرا در آخر متنی که می‌خواهیم قرار دهیم، بگذاریم. مانند مثال زیر:

مرحله ۴: در این مرحله باید ویژگی تگ فونت که نام آنcolorاست را اضافه کنیم. برای این هدف باید ویژگی colorرا در تگ fontقرار داد و سپس باید رنگی انتخابی دلخوه را روی متن استفاده کرد. مثال زیر به روز شده کدهای اولیه فوق بوده و برای هر متنی رنگ خاصی در نظر گرفته است:

خروجی کدهای بالا برای نشان دادن نحوه تغییر رنگ متن در HTML به صورت زیر است:

تغییر رنگ متن در HTML با CSS داخلی و خارجی

همان‌طور که گفته شد برای تغییر رنگ متن در HTML، می‌توان از استایل CSS داخلی یا خارجی استفاده کرد. برای استایل داخلی، باید کدهای CSS را با استفاده از تگ styleداخل تگ headفایل HTML خود قرار داد.

فیلم آموزش طراحی صفحات ریسپانسیو یا واکنشگرا با HTML و CSS + گواهینامه در فرادرس

کلیک کنید

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

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

می‌توان از روش‌های مختلفی برای انتخاب عناصر استفاده کرد. مثلاً با نام تگ (مانند p)، کلاس (با استفاده از یک نقطه به دنبال نام کلاس)، یا ID (با استفاده از هش به دنبال نام شناسه).

با استفاده از کلاس به صورت زیر است:

همچنین با استفاده از ID به صورت زیر است:

می‌توان رنگ‌ها را با استفاده از نام رنگ‌ها، کدهای هگزادسیمال، مقادیر RGB یا مقادیر HSL در استایل داخلی و خارجی مشخص کرد.

مثالی برای تغییر رنگ متن با استایل درون خطی

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

مرحله ۱: ابتدا باید کدهای HTML را در هر ویرایشگر متنی دلخواه تایپ کرده یا فایل HTML موجود را در ویرایشگر متنی که در آن می‌خواهیم از ویژگی styleبرای تغییر رنگ متن استفاده کرده، باز کنیم. برای قدم اول فرض بر این است که قطعه کد زیر را داریم:

خروجی اولیه این مثال، متنی با رنگ مشکی است.

مرحله ۲: در این مرحله باید مکان‌نمای ماوس را در ابتدای متن مدنظر قرار داده و سپس، ویژگی سبک درون‌خطی را در عنصر مدنظر نوشت. برای مثال در این مثال از تگ p(پاراگراف) استفاده خواهیم کرد. به صورت زیر:

مرحله ۳: در این مرحله باید نام رنگ را به عنوان مقدار آن در نظر گرفت. می‌توان نام رنگ را به سه شکل در نظر گرفت:

• تایپ نام رنگ به انگلیسی
• استفاده از مقدار RGB رنگ مدنظر
• استفاده مقدار هگزادسیمال رنگ مدنظر

مرحله ۴: در این مرحله باید تگ بسته شدن عنصر مد نظر را در آخر متنی که قصد تغییر رنگ آن را داریم قرار بدهیم. مانند مثال زیر:

حال کل فرایندهای تغییر رنگ متن با استفاده از استایل درون خطی برای مثال اولیه به صورت زیر است:

خروجی این مرحله از نحوه تغییر رنگ با استایل یا سبک درون خطی، متنی به رنگ قرمز خواهد بود.

مثالی برای تغییر رنگ در HTML با CSS داخلی

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

مرحله ۱: دوباره مانند مثال قبل باید ابتدا کدهای HTML مدنظر را در هر ویرایشگر متنی تایپ کرده یا فایل HTML موجود را باز کنیم. فرض بر این است که ابتدا کدهای HTML زیر را داریم:

خروجی اولیه این مثال، متنی با رنگ سیاه است.

مرحله ۲: در این مرحله ابیدباید مکان نمای ماوس در را در زیر تگ headسند HTML قرار دادو سپس استایل‌ها را در داخل تگ styleمطابق بلوک زیر تعریف کرده و در نهایت ویژگی یا همان صفت رنگ را در انتخابگر عنصر نوشت.

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

سوالات متداول برای نحوه تغییر رنگ متن در اچ تی ام ال

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

فیلم آموزش رنگ ها در طراحی وب با HTML (رایگان) در فرادرس

کلیک کنید

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

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

نحوه تغییر رنگ متن در صفحات وب با CSS چگونه است؟

برای این هدف می‌توان از «سی اس اس داخلی» (Internal CSS) یا «سی اس اس خارجی» (External CSS) استفاده کرد. برای Internal CSS، می‌توان کدهای CSS را درون تگ «<style>» در بخش «<head>» از سند HTML قرار داد. همچنین برای External CSS، می‌توان فایل CSS جداگانه ایجاد کرده و آن را به سند HTML خود پیوند داد.

 برای تغییر رنگ متن استایل درون خطی بهتر است یا رویکرد CSS داخلی و خارجی؟

«Inline style» ممکن است برای تغییرات سریع و کوچک مفید باشد اما استفاده از رویکرد CSS داخلی و خارجی به کاربر امکان می‌دهد تا قالب‌ها و استایل‌ها را به صورت جداگانه مدیریت کرده و از تکرار کدها جلوگیری کند. توجه به این نکته مهم است که استایل دادن به عناصر HTML با CSS داخلی یا خارجی در مقایسه با استایل درون‌خطی کار بهتری است و انعطاف‌پذیری بیشتری را ارائه می‌دهد. به عنوان مثال، به جای تکرار همان سبک‌های درون‌خطی برای هر تگ «<p>،» می‌توان از یک کلاس CSS برای همه آن‌ها استفاده کرد. استایل یا سبک‌های درون‌خطی توصیه نمی‌شوند زیرا منجر به تکرار و افزایش حجم کد می‌شوند و نمی‌توان به راحتی در جاهای دیگر دوباره از آن‌ها استفاده کرد.

چگونه می‌ توان با استفاده از استایل درون خطی رنگ متن را در HTML تغییر دهیم؟

برای تغییر رنگ متن در HTML با استفاده از استایل درون خطی، می‌توان ویژگی «style» را مستقیماً در تگ HTML مورد نظر اضافه کرد.

سخن پایانی

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

فیلم مجموعه آموزش HTML و CSS برای طراحی سایت – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در این مطلب از مجله فرادرس، نحوه تغییر رنگ متن در HTML با استفاده از CSS به صورت درون خطی، داخلی و خارجی مورد بررسی قرار گرفت. همچنین در مورد روش‌های قدیمی‌تر مانند استفاده از تگ fontو همچنین این قابلیت در HTML5 نیز توضیحاتی همراه با مثال ارائه شد.