CSS দিয়ে ওয়েবসাইট ফন্ট কালার কিভাবে পরিবর্তন করবেন

ভাল প্রামাণিক নকশা একটি সফল ওয়েবসাইটের একটি গুরুত্বপূর্ণ অংশ। CSS ওয়েব পৃষ্ঠায় আপনার তৈরি করা ওয়েব পৃষ্ঠাগুলিতে টেক্সট প্রদর্শিত হওয়ার উপর আপনাকে অনেক নিয়ন্ত্রণ দেয়। এর মধ্যে আপনার ব্যবহার করা যেকোনো ফন্টের রং পরিবর্তন করার ক্ষমতা রয়েছে।

একটি বহিঃস্থ শৈলী শীট , একটি অভ্যন্তরীণ শৈলী শীট ব্যবহার করে ফন্ট রং পরিবর্তন করা যায়, অথবা এটি HTML ডকুমেন্টের মধ্যে ইনলাইন স্টাইলিং ব্যবহার করে পরিবর্তিত হতে পারে। সেরা অভ্যাসগুলি নির্দেশ করে যে আপনি আপনার CSS স্টাইলের জন্য একটি বাহ্যিক শৈলী শীট ব্যবহার করা উচিত। একটি অভ্যন্তরীণ স্টাইল শীট, যা আপনার নথির "শিরোনাম" এ সরাসরি লিখিত শৈলীগুলি সাধারণত সাধারণত ছোট, এক পৃষ্ঠা সাইটগুলির জন্য ব্যবহৃত হয়। ইনলাইন শৈলীগুলি এড়ানো উচিত কারণ তারা বহু বছর ধরে আমরা যে পুরানো "ফন্ট" ট্যাগগুলির অনুরূপ ছিলাম। যে ইনলাইন শৈলীগুলি ফন্ট শৈলী পরিচালনার জন্য এটি অত্যন্ত কঠিন করে তোলে তাই আপনাকে তাদের ইনলাইন স্টাইলের প্রতিটি ক্ষেত্রে পরিবর্তন করতে হবে।

এই প্রবন্ধে, আপনি শিখবেন কিভাবে একটি বহিরাগত স্টাইল শীট ব্যবহার করে ফন্টের রঙ পরিবর্তন করা যায় এবং একটি অনুচ্ছেদ ট্যাগের মধ্যে ব্যবহৃত একটি শৈলী। আপনি ট্যাগসহ পাঠ্যকে ঘিরে যেকোন ট্যাগের ফন্টের রং পরিবর্তন করতে একই শৈলীের সম্পত্তি প্রয়োগ করতে পারেন।

ফন্ট রঙ পরিবর্তন শৈলী যোগ করা

এই উদাহরণের জন্য, আপনার পৃষ্ঠার মার্কআপের জন্য একটি HTML ডকুমেন্ট থাকতে হবে এবং একটি পৃথক CSS ফাইলটি সেই দস্তাবেজের সাথে সংযুক্ত থাকবে। এইচটিএমএল ডকুমেন্ট সম্ভবত এর মধ্যে কিছু সংখ্যক উপাদান তৈরি করবে। আমরা এই নিবন্ধের উদ্দেশ্য জন্য সংশ্লিষ্ট যে এক অনুচ্ছেদ উপাদান।

এখানে আপনার বাহ্যিক স্টাইল শীট ব্যবহার করে অনুচ্ছেদ ট্যাগগুলির মধ্যে ফন্টের ফন্টের রঙ কিভাবে পরিবর্তন করা যায়।

রঙের মানগুলি রঙ কীওয়ার্ড, আরজিবি কালার নম্বর, বা হেক্সাডেসিমাল কালার নম্বর হিসাবে প্রকাশ করা যেতে পারে।

1. অনুচ্ছেদ ট্যাগের জন্য শৈলী অ্যাট্রিবিউট যোগ করুন:
   1. পি {}
2. শৈলী রঙ সম্পত্তি রাখুন সম্পত্তি পরে একটি কোলন স্থাপন করুন:
   1. পি {রঙ:}
3. তারপর সম্পত্তি পরে আপনার রঙ মান যোগ করুন একটি আধা কোলন সঙ্গে যে মান শেষ নিশ্চিত করুন:
   1. পি {রঙ: কালো;}

আপনার পৃষ্ঠার অনুচ্ছেদ এখন কালো হবে।

এই উদাহরণটি একটি রঙের কীওয়ার্ড ব্যবহার করে - "কালো" এটি সিএসএস এ রঙ যোগ করার এক উপায়, কিন্তু এটি খুব সীমিত। "কালো" এবং "সাদা" এর জন্য কীওয়ার্ডগুলি ব্যবহার করা সহজ, কারণ এই দুটি রং খুবই নির্দিষ্ট, কিন্তু যদি আপনি "লাল", "নীল" বা "সবুজ" কীওয়ার্ডগুলি ব্যবহার করেন তাহলে কী হবে? ঠিক কি লাল, নীল, বা সবুজ আপনি ছায়া পাবেন? আপনি কীওয়ার্ডগুলির সাথে কোন রঙ শেড চান তা নির্দিষ্ট করতে পারবেন না। এই কারণে হেক্সাডেসিমেল মানগুলি প্রায়ই রঙ কীওয়ার্ডের জায়গায় ব্যবহৃত হয়।

পি {রঙ: # 000000; }

এই সিএসএস শৈলীটি আপনার অনুচ্ছেদগুলির রঙটি কালো হিসাবে সেট করবে, কারণ 000000 এর হেক্স কোডটি কালো থেকে অনুবাদ করে। আপনি এমনকি হেক্স মান সহ শরীয়তপুর্ণ ব্যবহার করতে পারেন এবং এটি মাত্র # 000 হিসাবে লিখুন এবং আপনি একই জিনিস পাবেন।

আমরা ইতিমধ্যে উল্লিখিত হিসাবে, হেক্স মান ভাল কাজ যখন আপনি একটি রঙ যা কেবল কালো বা সাদা না প্রয়োজন এখানে একটি উদাহরণ:

পি {color: # 2f5687; }

এই হেক্স মান একটি নীল রঙে অনুচ্ছেদের সেট করবে, কিন্তু "নীল" শব্দটির বিপরীতে, এই হেক্স কোডটি আপনাকে নীল রঙের একটি নির্দিষ্ট নির্দিষ্ট ছায়া সেট করার ক্ষমতা প্রদান করে - সম্ভবত যে ডিজাইনার তখন ইন্টারফেস তৈরি করার সময় বেছে নিতেন এই ওয়েবসাইট. এই ক্ষেত্রে, রঙ একটি মধ্য পরিসীমা হবে, স্লেট মত নীল।

অবশেষে, আপনি ফন্ট রংগুলির জন্য RGBA রঙের মানগুলিও ব্যবহার করতে পারেন। RGCA এখন সমস্ত আধুনিক ব্রাউজারগুলিতে সমর্থিত, তাই আপনি এই মানগুলি সামান্য উদ্বেগের সাথে ব্যবহার করতে পারেন যে এটি একটি ওয়েব ব্রাউজারে সমর্থিত হবে না, তবে আপনি একটি সহজ ফাঁকফোকও সেট করতে পারেন।

পি {রঙ: RGBA (47,86,135,1); }

এই RGBA মান একই আগে স্লেট নীল রঙ হিসাবে বর্ণিত। প্রথম 3 টি মানগুলি লাল, সবুজ এবং নীল মূল্য নির্ধারণ করে এবং চূড়ান্ত সংখ্যা হল আলফা সেটিং। এটি "1" -এ সেট করা হয়েছে, যার অর্থ "100%", তাই এই রঙটির কোনও স্বচ্ছতা থাকবে না। যদি আপনি এটি দশমিক সংখ্যার হিসাবে সেট করেন, যেমন .85, এটি 85% অপাসিটিতে অনুবাদ করবে এবং রঙটি সামান্য স্বচ্ছ হবে।

আপনি যদি আপনার রঙের মূল্য বুলেটপ্রুফ করতে চান, তাহলে আপনি এটি করবেন:

পি {
রঙ: # 2f5687;
রঙ: rgba (47,86,135,1);
}

এই সিনট্যাক্সটি হেক্স কোডটি প্রথম সেট করে। এটি তখন RGBA নম্বরের সাথে সেই মানটিকে মুছে ফেলে। এর মানে যে RGBA সমর্থন করে না এমন কোন পুরোনো ব্রাউজারটি প্রথম মান পাবে এবং দ্বিতীয়টি উপেক্ষা করবে। আধুনিক ব্রাউজারগুলি CSS cascade প্রতি দ্বিতীয় ব্যবহার করবে।