نحوه تغییر رنگ فونت های وب با CSS

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

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

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

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

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

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

مقادیر رنگ را می توان به عنوان کلمات کلیدی رنگ، اعداد رنگ RGB یا اعداد رنگ هگزادسیمال بیان کرد.

1. ویژگی سبک را برای برچسب پاراگراف اضافه کنید:
   1. پ { }
2. ملک رنگ را در سبک قرار دهید. پس از آن ملکول کولون قرار دهید:
   1. p {color:}
3. سپس مقدار رنگی خود را بعد از مالکیت اضافه کنید. اطمینان حاصل کنید که این مقدار را با نیمه کولون به پایان برسانید:
   1. p {رنگ: سیاه؛}

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

این مثال از کلمه کلیدی رنگی - "سیاه" استفاده می کند. این یک راه برای اضافه کردن رنگ در CSS است، اما بسیار محدود است. استفاده از کلمات کلیدی برای "سیاه" و "سفید" بسیار ساده است، زیرا این دو رنگ بسیار مشخص هستند، اما اگر از کلمات کلیدی مانند "قرمز"، "آبی" یا "سبز" استفاده کنید، چه اتفاقی می افتد؟ دقیقا چه رنگ سایه ای از قرمز، آبی یا سبز شما نمیتوانید دقیقا مشخص کنید که چه رنگی را با کلمات کلیدی می خواهید. به همین دلیل است که ارزش های هگزادسیمال اغلب به جای کلمات کلیدی رنگ استفاده می شود.

p {color: # 000000؛ }

این سبک CSS همچنین می تواند رنگ پاراگراف های خود را به سیاه، چرا که کد هگزا # 000000 به سیاه است. شما حتی می توانید با استفاده از مقادیر شانزده استفاده کنید و آن را فقط به عنوان # 000 بنویسید و همین کار را می کنید.

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

p {رنگ: # 2f5687؛ }

این مقدار هگز، پاراگراف ها را به رنگ آبی تنظیم می کند، اما بر خلاف کلمه "آبی"، این کد هگزا قادر به تنظیم یک سایه بسیار خاص آبی - به احتمال زیاد آن چیزی است که طراح هنگام ایجاد رابط کاربری برای آن انتخاب می کند این وب سایت در این مورد، رنگ یک میانه محدوده ای است، مانند آبی رنگ.

در نهایت، می توانید از مقدار رنگ RGBA برای رنگ فونت نیز استفاده کنید. RGCA در حال حاضر در تمام مرورگرهای مدرن پشتیبانی می شود، بنابراین شما می توانید از این ارزش ها با نگرانی کمی استفاده کنید که در مرورگر وب پشتیبانی نمی شود، اما شما همچنین می توانید جایگزین آسان را تنظیم کنید.

p {رنگ: rgba (47،86،135،1)؛ }

این مقدار RGBA مشابه رنگ آبی است که قبل از آن مشخص شده است. اولین مقادیر 3 ارزش های قرمز، سبز و آبی را تنظیم می کنند و تعداد نهایی تنظیم آلفا است. این برای "1" تنظیم شده است که به معنی "100٪" است، بنابراین این رنگ هیچ شفافیتی ندارد. اگر شما آن را به یک عدد دهدهی، مانند .85، آن را به opacity 85٪ ترجمه کنید و رنگ کمی شفاف باشد.

اگر میخواهید مقادیر رنگ خود را گلولهدار کنید، این کار را انجام دهید:

پ {
رنگ: # 2f5687؛
رنگ: rgba (47،86،135،1)؛
}

این نحو ابتدا کد هگز را تنظیم می کند. سپس ارزش آن را با شماره RGBA رونویسی می کند. این به این معنی است که هر مرورگر قدیمی که از RGBA پشتیبانی نمی کند اولین مقدار را دریافت می کند و دوم را نادیده می گیرد. مرورگرهای مدرن از دومین در هر آبشار CSS استفاده می کنند.