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

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

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

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

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

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

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

1<font color="#9900FF"> به مجله فرادرس خوش آمدید </font>
2
3-----یا----- 
4
5<font color="green"> به مجله فرادرس خوش آمدید </font>

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

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

1// Using inline CSS
2<h1 style="color: value;"> به مجله فرادرس خوش آمدید </h1>
3
4// Using internal/external CSS
5selector {
6    color: value;
7}

در ادامه نحوه تغییر رنگ در 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 استفاده می‌شود که شامل سبک‌های مورد نظر است. مثال زیر به خوبی این موضوع را بیان می‌کند:

1<p style="...">به مجله فرادرس خوش آمدید</p>

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

1<!-- Using Color Name Value -->
2<p style="color: skyblue">به مجله فرادرس خوش آمدید</p>
3
4<!-- Using Hex Value -->
5<p style="color: #87CEEB">به مجله فرادرس خوش آمدید</p>
6
7<!-- Using RGB Value -->
8<p style="color: rgb(135,206,235)">به مجله فرادرس خوش آمدید</p>
9
10<!-- Using HSL Value -->
11<p style="color: hsl(197, 71%, 73%)">به مجله فرادرس خوش آمدید</p>

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

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

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

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

1<!Doctype Html>  
2<Html>     
3  <html dir="rtl">     
4
5<Head>      
6<Title>     
7Change the text color Using HTML tag  
8</Title>  
9</Head>  
10<Body>   
11مجله فرادرس  <br>  
12آموزش اچ تی ام ال   <br>  
13بررسی نحوه تغییر رنگ با تگ‌های اچ تی  ام ل</Body>  
14</Html>  

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

1<font>متنی که می‌خواهیم رنگ آن را تغییر بدهیم

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

1<font> متنی که می‌خواهیم رنگ آن را تغییر بدهیم </font>  

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

1<!Doctype Html>  
2<Html>     
3  <html dir="rtl">     
4
5<Head>      
6<Title>     
7Change the text color Using HTML tag  
8</Title>  
9</Head>  
10<Body>  
11  <font color="blue">  
12مجله فرادرس  <br>  
13    </font>  
14<font color="green">  
15آموزش اچ تی ام ال   <br>  
16بررسی نحوه تغییر رنگ با تگ‌های اچ تی  ام ل
17  </font>  
18</Body>  
19</Html>  

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

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

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

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

کلیک کنید

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

1<!DOCTYPE html>
2<html>
3  <head>
4    <style>
5      selector {
6        color: value;
7      }
8    </style>
9  </head>
10  <body>
11    <!-- Your HTML content -->
12  </body>
13</html>

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

1selector {
2  color: value;
3}

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

1<!-- HTML -->
2<p> Welcome to our website! </p>
3
4<!-- CSS -->
5p {
6  color: skyblue;
7}

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

1<!-- HTML -->
2<p> Welcome to our website! </p>
3
4<!-- CSS -->
5p {
6  color: skyblue;
7}

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

1<!-- HTML -->
2<p id="my-paragraph"> Welcome to our website! </p>
3
4<!-- CSS -->
5#my-paragraph {
6  color: skyblue;
7}

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

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

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

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

1<!Doctype Html>  
2<Html>     
3<html dir="rtl">     
4<!Doctype Html>  
5    
6<Head>      
7<Title>     
8Change color using style attribute  
9</Title>  
10</Head>  
11<Body>   
12این یک صفحه وب ساده برای نشان دادن نحوه تغییر رنگ متن با استایل درون خطی است.
13</Body>  
14</Html>  

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

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

1<p style="color: ; ">متن دلخواه

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

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

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

1<p style="color :red; ">متن دلخواه </p>  

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

1<!Doctype Html>  
2<Html>     
3<html dir="rtl">     
4<!Doctype Html>  
5    
6<Head>      
7<Title>     
8Change color using style attribute  
9</Title>  
10</Head>  
11<Body>   
12<p style="color :red;">  
13
14این یک صفحه وب ساده برای نشان دادن نحوه تغییر رنگ متن با استایل درون خطی است.
15</p>  
16
17</Body>  
18</Html>  

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

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

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

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

1<!Doctype Html>  
2<Html>     
3<html dir="rtl">     
4<!Doctype Html>  
5    
6<Head>      
7<Title>     
8Change color using style attribute  
9</Title>  
10</Head>  
11<Body>   
12این یک مثال ساده برای نشان دادن نحوه تغییر رنگ متن با استفاده از سی اس اس داخلی است. 
13
14</Body>  
15</Html>  

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

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

1<Head>  
2<style>  
3Body  
4{  
5color:orange;  
6}  
7p  
8{  
9color:green;  
10}  
11</style>  
12</Head>  

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

1<!Doctype Html>  
2<Html>     
3<html dir="rtl">     
4<!Doctype Html>      
5<Head>      
6<Title>     
7Change color using Internal CSS  
8</Title>  
9<style>  
10Body  
11{  
12color:orange;  
13}  
14p  
15{  
16color:green;  
17}  
18</style>  
19</Head>   
20<Body>   
21این یک مثال ساده برای نشان دادن نحوه تغییر رنگ متن با استفاده از سی اس اس داخلی است. 
22
23</Body>  
24</Html>  

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

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

فیلم آموزش رنگ ها در طراحی وب با 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 نیز توضیحاتی همراه با مثال ارائه شد.