রং

This translation is incomplete. Please help translate this article from English.

এটা হচ্ছে  যেভাবে শুরু করবেন 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;

 

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

  1. আপনার CSS ফাইল সম্পাদন করুন।
  2. এখানে মোটা করে যেগুলো দেখানো হয়েছে সেগুলো পরিবর্তন করুন, যাতে করে আপনি আদি অক্ষরগুলো কে একটি বর্ণহীন নীল রং দিতে পারেন। ( যে বিন্যাসগুলো এবং মন্তব্যগুলো আপনার ফাইলে দেখানো হয়েছে সেগুলো সম্ভবত দেখানো ফাইলগুলো হতে ভিন্ন।এই বিন্যাস এবং উক্তিগুলো আপনার মত করে সেভ করে রাখুন।)
    /*** 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;}
    
  3. ফাইলটি সেভ করুন এবং আপনার ব্রাউজার টিকে রিফ্রেশ করুন যাতে করে আপনি ফলাফলটি দেখতে পারেন।
Cascading Style Sheets
Cascading Style Sheets

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

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

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

এরপর কি?


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

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

ট্যাগ: 
 Contributors to this page: Saki336, Maliha81
 সর্বশেষ হালনাগাদ করেছেন: Saki336,