چگونه رنگ متن را در CSS تغییر دهید؟
طراحی تایپی خوب بخش مهمی از وب سایت موفق است. CSS به شما امکان کنترل ظاهری متن در صفحات وب شما را می دهد. این شامل توانایی تغییر رنگ هر فونت هایی است که شما استفاده می کنید.
در زیر، ما به تغییر رنگ فونت با استفاده از یک ورق سبک خارجی و یک سبک که در برچسب پاراگراف استفاده می شود نگاه می کنیم. شما می توانید همان ویژگی سبک را برای تغییر رنگ فونت در هر تگ که متن را احاطه کرده است، از جمله برچسب <body> تغییر دهید.
اضافه کردن سبک ها برای تغییر رنگ قلم
برای این مثال، شما باید یک سند HTML برای دیدن تغییرات CSS و یک فایل CSS جداگانه که به آن سند متصل است. ما قصد داریم به طور خاص به عنصر پاراگراف نگاه کنیم.
برای تغییر رنگ متن برای هر پاراگراف در فایل HTML خود، به ورقه سبک خارجی بروید و نوع p {} را بزنید. خصوصیات رنگ را در سبک قرار دهید و پس از یک کولون، مانند p {color:} قرار دهید. سپس، مقدار رنگی خود را بعد از ویژگی اضافه کنید، و آن را با یک نقطه عطفی به پایان برساند: p {color: black؛}.
مقادیر رنگ را می توان به عنوان کلمات کلیدی رنگ، اعداد رنگ RGB یا اعداد رنگ شانزده رنگ بیان کرد. در مثال ما، متن پاراگراف به رنگ سیاه تبدیل می شود.
با این حال، اگر میخواهید رنگ متن را به سبز، آبی، قرمز و غیره تغییر دهید، با استفاده از کلیدواژههای رنگی، انعطافپذیری را که ممکن است بخواهید سایههای مختلف ایجاد کنید، به شما ارائه نخواهند داد. این همان جایی است که مقادیر هگزادسیمال برای بازی وجود دارد.
p {color: # 000000؛ }
این شیوه CSS را می توان برای رنگ آمیزی پاراگراف های سیاه خود استفاده کرد زیرا کد 00000 # به سیاه تبدیل می شود. شما حتی می توانید با استفاده از مقادیر شش وجهی آن را به عنوان # 000 با همان نتایج بنویسید.
p {رنگ: # 2f5687؛ }
همانطور که در بالا ذکر شد، مقادیر هگز به خوبی کار می کنند زمانی که شما نیاز به رنگی دارید که به سادگی سیاه یا سفید نیست. مقدار Hex CSS بالا CSS پاراگراف را به یک رنگ آبی تنظیم می کند، اما بر خلاف کلمه "blue"، این کد هگزا قادر به تنظیم یک سایه بسیار خاص از آبی، یک میانه، آبی رنگ مانند در این مورد .
p {رنگ: rgba (47،86،135،1)؛ }
در نهایت، می توانید از مقدار رنگ RGBA برای رنگ فونت نیز استفاده کنید. RGCA در تمام مرورگرهای مدرن پشتیبانی می شود، بنابراین شما می توانید از این ارزش ها با اعتماد به نفس استفاده کنید که برای اکثر بینندگان کار می کند، اما شما همچنین می توانید جایگزین آسان را تنظیم کنید.
این مقدار RGBA همان رنگ آبی رنگ آبی است که قبل از آن مشخص شده است. سه مقیاس اول ارزش های قرمز، سبز و آبی را تنظیم می کنند و تعداد نهایی تنظیم آلفای شفافیت است. تنظیم آلفا به 1 به معنای 100 درصد تنظیم شده است، بنابراین این رنگ شفافیت ندارد. اگر شما این مقدار را به یک عدد دهدهی، مانند .85، آن را به درصد 85٪ تبدیل کنید و رنگ کمی شفاف باشد.
پ {
رنگ: # 2f5687؛
رنگ: rgba (47،86،135،1)؛
}
اگر میخواهید مقادیر رنگ خود را گلولهدار کنید، کد فوق CSS را تقلید کنید. این نحو ابتدا کد هگزا را تنظیم می کند و سپس آن را با شماره RGBA رونویسی می کند. این به این معنی است که هر مرورگر قدیمی که از RGBA پشتیبانی نمی کند اولین مقدار را دریافت می کند و دوم را نادیده می گیرد.
راه های دیگر به سبک یک صفحه HTML
رنگ قلم را می توان با یک ورق سبک خارجی، یک ورق سبک داخلی یا یک درخشان درون سند HTML تغییر داد. با این حال، بهترین شیوه ها اعمال می شود که شما باید از سبک سبک خارجی برای سبک های CSS خود استفاده کنید.
یک ورق سبک داخلی، که به طور مستقل در "سر" سند شما نوشته شده است، معمولا فقط برای وب سایت های کوچکی یک صفحه استفاده می شود. سبک های درون خطی باید اجتناب شود، زیرا آنها به تگ های قدیمی "فونت" معروف هستند که ما با چندین سال پیش آن را مورد بررسی قرار دادیم. این سبک های درونی باعث می شود که سبک مدیریت فونت بسیار دشوار باشد چون شما باید هر بار که بخواهید سبک آن را تغییر دهید.
