کد css برای تغییر رنگ متن + نکات کلیدی و کد های مهم

1401-04-25
ارسال شده توسط
برنامه نویسی، CSS
کد css برای تغییر رنگ متن | مداد سبز

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

کد css برای تغییر رنگ متن - مداد سبز

ممکن این سؤال برای شما ایجاد شده باشد که تغییر رنگ متن در css چگونه است؟ یا  کد color property در css چیست؟ برای پاسخ دادن به این سؤالات و برای تسلط بر کد css برای تغییر رنگ متن پیشنهاد می‌کنیم این مطلب را تا انتها مطالعه کنید و تغییر رنگ متن در css را یاد بگیرید. بدین ترتیب می‌توانیم با ارائه کردن نمونه کد css برای تغییر رنگ نوشته و متن شیوه استفاده از کد‌نویسی css برای تغییر رنگ متن را به شما آموزش داده و کد color property در css را به طور کامل به شما معرفی کنیم. برای مطالعه مقالات بیشتر در حوزه برنامه نویسی میتوانید از قسمت مقالات آموزش برنامه نویسی استفاده کنید.

css چیست؟

اگر از خود می پرسید که css چیست باید بگوییم که سی اس اس (css) یک زبان طراحی صفحات وب است که برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت استفاده می‌شود. css مخفف عبارت Cascading Style Sheet بوده و یکی از رایج‌ترین و محبوب‌ترین ابزار‌ها برای طراحی وب سایت است. Css توسط زبان HTML یا XHTML نوشته می‌شود و قابلیت پشتیبانی از زبان‌های اسکریپت دیگری از جمله plain، SVG، XML و XUL را دارا می‌باشد. شما می‌توانید با استفاده از css در کدنویسی تغییراتی را در رنگ، فونت، تصاویر پس زمینه و به طور کلی استایل سایت خود ایجاد کنید.

مطالعه مقاله
10 مورد از مزایای برنامه نویسی وب با پایتون را بدانید

css چیست - مداد سبز

color property در css

برای تغییر رنگ متن در css ، باید از دستور color استفاده کنید. تغییر رنگ متن با استفاده از کد css با وارد کردن کدهای اچ تی ام ال (HTML) زیر در ویرایشگر متن انجام می‌شود.

<!DOCTYPE html>

<html> 

   <head>

       <meta charset=\”utf-8\”>

       <title>Netshahr</title>

       <link type=\”text/css\” rel=\”stylesheet\” href=\”css/main.css\”>

   </head> 

   <body data-rsssl=1>

       <p>This is a paragraph.</p>

   </body>

</html>

همچنین برای اینکه بتوانید رنگ پاراگراف خود را در داخل تگ body تغییر دهید می‌توانید از کدهای سی اس اس (Css) زیر استفاده کنید.

P {

   color:red;

}

کاربرد color property در css

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

کاربرد color property در css -مداد سبز

توسط خاصیت color می‌توان رنگ متن را در یک تگ HTML تعیین کرد و یکی از کاربرد‌های color property در css ترکیب کردن یک رنگ پس زمینه مناسب با یک رنگ متن مناسب است تا بدین وسیله بتوان در خروجی مرورگر، راحت‌تر متن را مطالعه کرد.

مقدار color name در css

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

مقدار color name در css - مداد سبز

کد رنگ نارنجی یا Orange در css: #FFA500

کد رنگ گوجه‌ای یا Tomato در css: #FF6347

کد رنگ سبز دریایی درجه متوسط یا MediumSeaGreen در css: #3CB371

کد رنگ آبی میانه یا DodgerBlue در css: #1E90FF

کد رنگ ورقه سنگ آبی یا SlateBlue در css: #6A5ACD

کد رنگ طوسی یا Gray در css: #808080

کد رنگ طوسی کم‌رنگ یا Lightgray در css: #778899

کد رنگ بنفش یا Violet در css: #EE82EE

مقادیر تغییر رنگ در css

برای تعیین کردن رنگی خاص برای متن یا محتوای متنی می‌توان خاصیت color را با مقدار color در یک تگ HTML برابر قرار داد. این رنگ می‌تواند هرکدام از رنگ‌های رایج rgb ،HSL، هگزادسیمال و… باشد. در غیر این صورت مقادیری که می‌توانند در Property در نظر گرفته شوند رنگ‌های از پیش تعریف شده در سی اس اس از جمله blue ،red و… هستند. برای اینکه بتوانید تأثیر کد‌های سی اس اس (css) را مشاهده کنید می‌توانید پس از اعمال تغییرات مورد نظر، فایل خود را در داخل مرورگر به اجرا در‌آورید.

مطالعه مقاله
زبان ماشین چیست؟ آشنایی با زبان‌های سطح پایین و سخت‌افزار

مقدار HEX در css

در طراحی صفحات وب، بیشتر رنگ‌ها تعریف شده توسط کد رنگ HEX هستند. این کد رنگ تشکیل شده از ۶ رقم است. ۲ رقم اول باعث تعیین مقدار رنگ قرمز، ۲ رقم دوم باعث تعیین مقدار رنگ سبز و ۲ رقم آخر باعث تعیین مقدار رنگ آبی می‌شوند. در این کد رنگ، اعداد مبنای ۱۶ استفاده می‌شوند که می‌توانند از ۰۰ تا FF باشند و با کم و زیاد کردن آن‌ها یک رنگ جدید ایجاد می‌شود. بر اساس محاسبات انجام شده استفاده از کد رنگ Hex باعث ایجاد بیش از ۱۶میلیون رنگ می‌شود. با جستجو کردن عبارت color picker در گوگل می‌توان برای دریافت کد رنگ HEX، جعبه انتخاب رنگ گوگل را مورد استفاده قرار داد.

مقدار RGB در css

نحوه عملکرد کد رنگ RGB به کد رنگ HEX شباهت زیادی دارد و میان آن‌ها تنها یک تفاوت وجود دارد. در کد رنگ RGB اعداد مبنای ۱۰ جایگزین اعداد مبنای ۱۶ شده‌اند و بر این اساس می‌توان به هر رنگ یک عدد را از صفر تا ۲۵۵ اختصاص داد. سیستم RGB در CSS به صورت یک تابع طراحی شده است و با دریافت سه پارامتر مقادیر رنگ‌ها را تعیین می‌کند. به طوری که پارامتر اول مقدار رنگ قرمز، پارامتر دوم مقدار رنگ سبز و پارامتر سوم مقدار رنگ آبی را مشخص می‌کند. هر رنگ انتخابی در color picker‌های مختلف با مشخص کردن مقدار RGB باعث می‌شود تا بتوان از آن استفاده کرد.

مقدار RGB در css | مداد سبز

نمونه کد css برای تغییر رنگ متن

آشنایی با نمونه کد css برای تغییر رنگ نوشته و متن می‌تواند در تفهمیم این مطالب و افزایش قدرت یادگیری شما مؤثر باشد. بنابراین پیشنهاد می‌کنیم نمونه کد زیر را بررسی کرده و آن را برای تمرین کردن مورد استفاده قرار دهید. برای اعمال تغییرات رنگ متن بر روی نمونه کد زیر می‌توانید از ویژگی color استفاده کرده و رنگ دلخواه خود (برای مثال قرمز) را برای متن مشخص کنید. بدین ترتیب تمام متن‌های نوشته شده با تگ p با این رنگ مشخص می‌شوند.

<!doctype html>

<html>

<head>

    <style>

        h1 {background-color:purple;}

         p {color:red;}

    </style>

</head>

<body dir=”rtl”>

    <h1>مجموعه آموزشی مداد سبز </h1>

    <p>به وب سایت ما وارد شدید، یک مجموعه آموزش برنامه‌نویسی هستیم.</p>

    <h2>شما یکی از قسمت‌های آموزش را مشاهده می‌کنید.</h2>

    <p>امکان تغییر این متن در ویرایشگر شما وجود دارد.</p>

</body>

</html>

سخن پایانی

در این مقاله کاربرد کد css برای تغییر رنگ متن را به طور کامل بررسی کردیم و تغییر رنگ متن در css را به شما آموزش دادیم و این مقاله پاسخ کاملی برای سؤال چطور با css رنگ متن را تغییر بدیم؟ محسوب می‌شود. شما می‌توانید به طور کامل با استفاده از کد‌ css برای تغییر رنگ متن آشنا شوید و بر کد color property در css مسلط شوید. بدون شک یادگیری این زبان در برنامه‌نویسی از اهمیت بالایی برخوردار بوده و کاربرد بسیار زیادی دارد. بنابراین پیشنهاد می‌کنیم در این زمینه به تسلط کافی برسید و رنگ متن و استایل صفحات وب خود را بر اساس سلیقه شخصی خود تغییر دهید. بدون شک استفاده از تغییر رنگ متن در css انتخاب بسیار مناسبی برای افزایش جلوه‌های بصری صفحات وب سایت است و می‌تواند جذابیت آن را به طرز قابل توجهی افزایش دهید.

دیدگاهتان را بنویسید