রং - CSS

Go to Previous Section:
Text stylesএটা হচ্ছে যেভাবে শুরু করবেন CSS টিউটোরিয়ালের ৮ম বিভাগ; এটা ব্যাখ্যা করবে কিভাবে আপনি CSS এ রং উল্লেখ করবেন. আপনি আপনার নমুনা স্টাইলশিট এ পরিচিত হবেন background রং এর সাথে।

তথ্য: রং (color)

এই টিউটোরিয়ালে এখন পর্যন্ত ,আপনি ব্যবহার করেছেন একটি নির্দিষ্ট সংখ্যক রং এর নাম . CSS 2 সর্বোপরি ১৭ টি রং এর নাম বহন করে। কিছু নাম হয় তো সেগুলো, যেগুলো আপনি আশা করেন না।

black

gray

silver

white

primaries

red

lime

blue

secondaries

yellow

aqua

fuchsia

maroon

orange

olive

purple

green

navy

teal

বিস্তারিত

আপনার browser হয়ত আরও অনেক রং এর নাম বহন করতে পারে, যেমনঃ

dodgerblue

peachpuff

tan

firebrick

aquamarine

এই প্রসারিত তালিকার আরও বিস্তারিত জানার জন্য দেখুন: SVG color keywords CSS 3 এর রং এর মডিউল এ। সতর্ক থাকুন ওই সব রং এর নাম ব্যবহারে যেগুলো আপনার পাঠকের browsers এ হয়ত বহন করে না।

একটি বৃহৎ palette এর জন্য, যে রং গুলো আপনি চান সেগুলোর লাল (red), সবুজ(green) এবং নীল( blue) উপাদানগুলো উল্লেখ করুন হ্যাশট্যাগ (#) দিয়ে এবং ৩টি হেক্সাডেসিমাল(hexadecimal) সংখ্যা যাদের শ্রেণী 0 - 9 , a – f. a – f অক্ষরগুলো দিয়ে 10 – 15 এর মান বুঝায়:

black		`#000`
pure red		`#f00`
pure green		`#0f0`
pure blue		`#00f`
white		`#fff`

সম্পূর্ণ palette এর জন্য, প্রতিটি উপাদানের ক্ষেত্রে উল্লেখ করুন দুইটি হেক্সাডেসিমাল সংখ্য:

black		`#000000`
pure red		`#ff0000`
pure green		`#00ff00`
pure blue		`#0000ff`
white		`#ffffff`

আপনি সচারচর এই ৬ সংখ্যার হেক্সাডেসিমাল কোড গুলো আপনার গ্রাফিক্স প্রোগ্রাম অথবা অন্য কোন টুলস থেকে পেতে পারেন।

উদাহরণ

সামান্য প্র্যাকটিস করে, আপনি তিন সংখ্যার রং গুলো আপনার বেশিরভাগ কাজের জন্য সুবিন্যস্ত করতে পারবেনঃ

শুরু লাল এর সাথে:		`#f00`
একে হাল্কা করার জন্য, কিছু সবুজ এবং নীল যোগ করুনঃ		`#f77`
একে আরও কমলা করার জন্য, সামান্য একটু এক্সট্রা সবুজ যোগ করুনঃ		`#fa7`
আরও ডার্ক করার জন্য, এর সব উপাদান মুছে ফেলুন:		`#c74`
এর সম্পৃক্তি দূর করার জন্য, এর উপাদান গুলো কে আরও সমান করুনঃ		`#c98`
আপনি যদি একদম সমান করেন তাহলে আপনি পাবেন ধুুসরঃ		`#ccc`

একটি মোমের মত শেডের জন্য যেমন বর্ণহীন নীলঃ

শুরু একদম শুভ্র সাদা থেকে:		`#fff`
অন্যান্য উপাদানগুলো সামান্য কমান:		`#eef`

আরও বিস্তারিত

আপনি আরও উল্লেখ করতে পারেন একতি রং এর ডেসিমাল RGB মানগনগুলো যাদের শ্রেণী 0 – 25 অথবা percentages.

উদাহরণস্বরূপ ,মেরুন (dark red):

rgb(128, 0, 0)

কিভাবে রং উল্লেখ করা যায় তার আরও বিস্তারিত জানার জন্য দেখুনঃ রং CSS সুনির্দিষ্টকরণে এ। ম্যাচিং সিস্টেম রং যেমন মেনু এবং ThreeDFace, দেখুন: CSS2 System Colors CSS সুনির্দিষ্টকরণে এ।

আপনি ইতিমধ্যে color প্রপার্টি text এ ব্যবহার করেছেন ।

আপনি চাইলে আরও ব্যবহার করতে পারেন background-color প্রপার্টি টি যাতে করে আপনি উপাদানগুলোর ব্যাকগ্রাউন্ড পরিবর্তন করতে পারেন।

ব্যাকগ্রাউন্ড টি আপনি সেট করতে পারেন স্বচ্ছ ভাবে যাতে করে আপনি স্পষ্টভাবে যে কোন রং মুছে ফেলতে পারেন, মূল উপাদানের ব্যাকগ্রাউন্ড প্রকাশ করে।

উদাহরণ

এই টিউটোরিয়ালে উদাহরণ বাক্সগুলোতে বর্ণহীন হলুদ ব্যাকগ্রাউন্ড ব্যবহার করা হয়েছে:

background-color: #fffff4;

আরও বিস্তারিত বাক্সগুলো এই বর্ণহীন ধূসর ব্যবহার করেছেঃ

background-color: #f4f4f4;

কাজ: কালার কোড এর ব্যবহার

আপনার CSS ফাইল সম্পাদন করুন।
এখানে মোটা করে যেগুলো দেখানো হয়েছে সেগুলো পরিবর্তন করুন, যাতে করে আপনি আদি অক্ষরগুলো কে একটি বর্ণহীন নীল রং দিতে পারেন। ( যে বিন্যাসগুলো এবং মন্তব্যগুলো আপনার ফাইলে দেখানো হয়েছে সেগুলো সম্ভবত দেখানো ফাইলগুলো হতে ভিন্ন।এই বিন্যাস এবং উক্তিগুলো আপনার মত করে সেভ করে রাখুন।)
```
/*** CSS Tutorial: Color page ***/

/* page font */
body {font: 16px "Comic Sans MS", cursive;}

/* paragraphs */
p {color: blue;}
#first {font-style: italic;}

/* initial letters */
strong {
  color: red;
  background-color: #ddf;
  font: 200% serif;
  }

.carrot {color: red;}
.spinach {color: green;}
```
ফাইলটি সেভ করুন এবং আপনার ব্রাউজার টিকে রিফ্রেশ করুন যাতে করে আপনি ফলাফলটি দেখতে পারেন।

Cascading Style Sheets

প্রতিদন্দিতাঃ
আপনার CSS ফাইলে ,সব গুলো কালারের নাম পরিবর্তন করে 3 ডিজিট এর কালার কোড এ পরিবর্তন করুন ফলাফলে কোন প্রভাব না ফেলে।

(এটা হয়ত একদম সঠিক ভাবে হবে না, কিন্তু আপনি কাছাকাছি যেতে পারবেন। একদম সঠিক ভাবে করার জন্য আপনার প্রয়োজন 6 ডিজিট এর কোডসমূহ, এবং প্রয়োজন CSS সুনির্দিষ্টকরন দেখা অথবা ব্যবহার করুন একটি গ্রাফিক্স টুল যাতে করে কালার গুলো মিল করাতে পারেন।)

প্রতিদ্বন্দ্বিতার জন্য সমাধান দেখুন।

এরপর কি?

Go to Next Section:
Contentআপনার নমুনা ডকুমেন্ট এবং আপনার নমুনা stylesheet এর থেকে সম্পূর্ণভাবে আলাদা। এর পরে পরবর্তী বিভাগ ব্যাখ্যা করবে কেমন করে আপনি এই সম্পূর্ণ আলাদা জিনিস থেকে ভিন্ন কিছু তৈরি করবেন।

রং

তথ্য: রং (color)

কাজ: কালার কোড এর ব্যবহার

এরপর কি?

ডকুমেন্ট ট্যাগ এবং অবদানকারী