diff options
Diffstat (limited to 'files/bn/learn/css/building_blocks')
| -rw-r--r-- | files/bn/learn/css/building_blocks/selectors/index.html | 355 | ||||
| -rw-r--r-- | files/bn/learn/css/building_blocks/values_and_units/index.html | 281 |
2 files changed, 636 insertions, 0 deletions
diff --git a/files/bn/learn/css/building_blocks/selectors/index.html b/files/bn/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..ab2f05fae5 --- /dev/null +++ b/files/bn/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,355 @@ +--- +title: নির্বাচক সমুহ +slug: Web/CSS/Getting_Started/নই +tags: + - Beginner + - CSS + - CSS Selector + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span class="seoSummary">এটি <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> টিউটোরিয়াল এর ৫ম অংশ; এটি ব্যাখ্যা করে আপনি কিভাবে স্টাইল সমুহ নির্বাচিতভাবে প্রয়োগ করবেন, এবং কিভাবে বিভিন্ন প্রকার নির্বাচক সমুহ বিভিন্ন প্রাধান্য পায়। আপনি আপনার নমুনা নিবন্ধে কিছু এট্রিবিউট যোগ করতে পারেন, এবং আপনি সেসব এট্রিবিউটগুলো আপনার নমুনা স্টাইলশীটে ব্যবহার করতে পারেন ।</span></p> +<h2 class="clearLeft" id="তথ্যঃ_নির্বাচকসমুহ">তথ্যঃ নির্বাচকসমুহ</h2> +<p>সি এস এস ভাষা ব্যাখ্যা করার জন্য সি এস এস এর নিজস্ব পারিভাষিক শব্দ আছে। এই টিউটোরিয়াল এর পূর্বে, আপনি একটি লাইন তৈরি করুন যেমনঃ</p> +<pre class="brush: css">strong { + color: red; +} +</pre> +<p>সি এস এস পারিভাষিক শব্দে, এই সমগ্র লাইন হল নিয়ম। এই নিয়ম শুরু হ্য়<code> strong</code> দিয়ে, যেটা একটা নির্বাচক। এটা নির্বাচন করে কোন উপাদানগুলো DOM-এ আছে কোন নিয়ম প্রয়োগ করা আছে ।</p> +<p>আরো বিস্তারিত</p> +<p>বাকা বন্ধনীর ভেতরের অংশে প্রকাশিত হয়।</p> +<div class="tuto_details"> + <p>মূলশব্দ <code>color</code> হল একটি বৈশিষ্ট্য এবং <code>red</code> হল একটি মান।</p> + <p>একই প্রকাশিত অংশে বৈশিষ্ট্যের জোড়া মানের পর সেমিকোলন দিয়ে অন্য বৈশিষ্ট্যের জোড়া মান থেকে আলাদা করা হয়।</p> + <p>এই টিউটোরিয়াল এ নির্বাচক যেমন <code>strong</code> উল্লেখ করা হয় ট্যাগ নির্বাচক হিসেবে। সি এস এস সুনির্দিষ্টভাবে এটিকে টাইপ নির্বাচক হিসেবে উল্লেখ করে।</p> +</div> +<p>নির্বাচকসমুহ যেগুলো আপনি সি এস এস নিয়মে ব্যবহার করতে পারেন এই টিউটোরিয়ালের পাতা সেগুলো সম্পর্কে আরো বেশি ব্যাখ্যা করে।</p> +<p>ট্যাগ নামের সাথে আপনি এট্রিবিউট এর মান নির্বাচকসমুহে ব্যবহার করতে পারেন।এটি আপনার নিয়মকে আরো সুনির্দিষ্ট করতে অনুমোদন করে।</p> +<p>সি এস এস এর দুইটি এট্রিবিউট এর বিশেষ অবস্থা আছে। তারা হল <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> এবং <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> +<h3 id="নির্বচকসমুহের_ক্লাস">নির্বচকসমুহের ক্লাস</h3> +<p><a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> এট্রিবিউট একটি উপাদানকে নামকৃত ক্লাস এ বরাদ্দ করার জন্য ব্যবহার করা হয়। আপনি আপনার ক্লাস এর জন্য কোন নাম পছন্দ করবেন এটা আপনার উপর। একটা নিবন্ধে বিভিন্ন উপাদান একই নামের হতে পারে।</p> +<p>আপনার স্টাইলশীটে, ক্লাস নামের পূর্বে আপনি যখন একটি নির্বাচকে ব্যবহার করবেন তখন দাড়ি লিখুন(period) ।</p> +<h3 id="নির্বাচকসমুহের_আইডি">নির্বাচকসমুহের আইডি</h3> +<p><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> এট্রিবিউট একটি উপাদানকে একটি আইডিতে বরাদ্দ করার জন্য ব্যবহৃত হয়। আপনি আইডিটার জন্যে কি নাম পছন্দ করবেন এটি আপনার উপর। নিবন্ধটিতে আইডি নাম অবশ্যই একটি এবং অনন্য হতে হবে।</p> +<p>আপনার স্টাইলশীটে, আপনি যখন নির্বাচকে ব্যবহার করবেন আইডির পূর্বে একটি নাম্বার সাইন(hash) লিখুন।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + এই এইচ টি এম এল ট্যাগের একটি <code>class</code> এট্রিবিউট এবং একটি <code>id</code> এট্রিবিউট আছেঃ<br> + <pre class="brush: html"><p class="key" id="principal"> +</pre> + <p>নিবন্ধে আইডি মান, মূল, অবশ্যই এক এবং অনন্য হতে হবে, কিন্তু অন্য ট্যাগসমুহে একই ক্লাস নাম, মূল থাকতে পারে।</p> + <p>একটি সি এস এস স্টাইলশীটে, এই নিয়ম সকল উপাদানকে একই ক্লাস <code>key</code> green এর অন্তর্ভূক্ত করেছে। (তারা সবাই {{ HTMLElement("p") }} এর উপাদান নাও হতে পারে)</p> + <pre class="brush: css">.key { + color: green; +} +</pre> + <p>এই নিয়ম একটি উপাদানকে <strong>id</strong> <code>principal</code> বোল্ড করে :</p> + <pre class="brush: css">#principal { + font-weight: bolder; +} +</pre> +</div> +<p>যদি একটির বেশি নিয়ম একটি উপাদান এ প্রয়োগ করা হয় এবং একই বৈশিষ্ট্য উল্লেখ করা হয়, তাহলে সি এস এস নিয়মের উপর প্রাধান্য দেয় যেটা আরো বেশি সুনির্দষ্ট নির্বাচক। একটি আইডি নির্বাচক ক্লাস নির্বাচক এর চেয়ে আরো সুনির্দিষ্ট, যেটা পর্যায়ক্রমে একটি ট্যাগ নির্বাচক এর চেয়ে আরো বেশি সুনির্র্দিষ্ট।</p> +<div class="tuto_details"> + <div class="tuto_type"> + আরো বিস্তারিত</div> + <p>আপনি নির্বাচকসমুহকে একত্রিত করতে পারেন, নির্বাচককে আরো বেশি সুনির্দিষ্ট করার জন্যে।</p> + <p>উদাহরণ স্বরুপ, নির্বাচক <code>.key</code> <code>ক্লাস নাম key যুক্ত </code>সকল উপাদানকে নির্বাচন করে। নির্বাচক <code>p.key</code> ক্লাস নাম <code>key যুক্ত উপাদানকে </code>শুধুমাত্র {{ HTMLElement("p") }} নির্বাচন করে ।</p> + <p>আপনি দুইটি বিশেষ এট্রিবিউট <code>class</code> এবং <code>id দ্বারা নিয়ন্ত্রিত নন</code>। আপনি অন্য এট্রিবিউট সুনির্দিষ্ট করতে পারেন স্কয়ার বন্ধনী ব্যবহার করে। যেমন, নির্বাচক <code>[type='button']</code><code>button মানের একটি </code><code>type এট্রিবিউট দ্বারা</code> সকল উপাদানকে নির্বাচিত করে ।</p> +</div> +<p>যদি স্টাইলশীটে নিয়মগুলো পরস্পর বিরোধী হ্য় এবং তারা সমানভাবে সুনির্দিষ্ট হয়, তাহলে তারা সি এস এস নিয়মকে প্রাধান্য দেয় যেটা স্টাইলশীটে পরের দিকে আছে।</p> +<p>যখন পরস্পর বিরোধী নিয়মের কারণে আপনার সমস্যা হবে, আরো সুনির্দিষ্ট কোন নিয়মের দ্বারা এটি সমাধান করার চেষ্টা করুন, তাহলে সেটাই প্রাধান্য পাবে। যদি আপনি সেটা করতে না পারেন, চেষ্টা করুন স্টাইলশীটের শেষের দিকের কোন নিয়মের কাছাকাছি যেতে তাহলে সেটিই প্রাধান্য পাবে।</p> +<h3 id="নকল_ক্লাসের_নির্বাচকসমূহ">নকল ক্লাসের নির্বাচকসমূহ</h3> +<p>একটি <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a> সি এস এস এর মূলশব্দ নির্বাচকের সাথে যুক্ত যেটা উপাদানের বিশেষ অবস্থা নির্বাচনের জন্য সুনির্দিষ্ট করে। উদাহরণ সরূপ, {{ Cssxref(":hover") }} একটা স্টাইল প্রয়োগ করা যাবে যখন কোন ব্যবহারকারী নির্বাচকের দ্বারা সুনির্দিষ্ট করে দেয়া উপাদানের উপর চলাচল করবে।</p> +<p>নকল ক্লাসসমুহ, নকল উপাদানগুলোর সাথে, আপনাকে একটি উপাদানের উপর শুধু স্টাইল প্রয়োগ করতে দেয়না, সেই সাথে বহিরাগত কারণের সাথে সংযোগ করে যেমন নেভিগেটরের ইতিহাস ({{ cssxref(":visited") }}, উদাহরণ স্বরূপ), এটার উপাদানের অবস্থা (যেমন {{ cssxref(":checked") }} কিছু উপাদানের গঠনের উপর), অথবা মাউসের অবস্থান (যেমন {{ cssxref(":hover") }} যেটা আপনাকে জানাবে মাউসটি উপাদানের উপর আছে নাকি নাই). একটি সম্পূর্ণ নির্বাচক সমুহের তালিকা, <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a> এখানে যান।</p> +<div class="tuto_example"> + <div class="tuto_type"> + Syntax</div> + <pre class="brush:css">selector:pseudo-class { + property: value; +} +</pre> +</div> +<h4 id="নকল_ক্লাসসমুহের_তালিকা">নকল ক্লাসসমুহের তালিকা</h4> +<ul> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":visited") }}</li> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":nth-child") }}</li> + <li>{{ Cssxref(":nth-last-child") }}</li> + <li>{{ Cssxref(":nth-of-type") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":disabled") }}</li> +</ul> +<h2 id="তথ্যঃ_সম্পর্কের_ভিত্তিতে_নির্বাচক_সমুহ">তথ্যঃ সম্পর্কের ভিত্তিতে নির্বাচক সমুহ</h2> +<p>উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের ভিত্তিতে উপাদান সমুহ নির্বাচন করার জন্য সি এস এস এর কিছু উপায় আছে। নির্বাচক সমুহকে আরো বেশি সুনির্দিষ্ট করার জন্যে আপনি এগুলো ব্যবহার করতে পারেন।</p> +<table id="relselectors"> + <caption> + সম্পর্কের ভিত্তিতে পরিচিত নির্বাচকসমুহ</caption> + <tbody> + <tr> + <td style="width: 10em;"><strong>নির্বাচক</strong></td> + <td><strong>নির্বাচিতসমুহ</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Any E element that is a child of an A element</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Any E element that is the first child of its parent</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td> + </tr> + </tbody> +</table> +<p>আপনি জটিল সম্পর্কগুলোকে প্রকাশ করার জন্যে এগুলো একত্রিত করতে পারেন।</p> +<p>আপনি <code>*</code> (asterisk) এই চিহ্নটি ব্যবহার করতে পারেন "যেকোনো উপাদান" বুঝানোর জন্যে।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>একটি এইচ টি এম এল টেবিলের একটি <code>id</code> এট্রিবিউট, কিন্তু এটির সারি এবং ছোট অংশগুলোর আলাদা আলাদা সনাক্তকারী থাকে নাঃ</p> + <pre class="brush: html"><table id="data-table-1"> +... +<tr> +<td>Prefix</td> +<td>0001</td> +<td>default</td> +</tr> +... +</pre> + <p>এই নিয়মগুলা সকল সারির প্রথম অংশকে বোল্ড করে, এবং দ্বিতীয় অংশকে মনোস্থানিক করে। তারা শুধু একটি সুনির্দিষ্ট টেবিলকে প্রভাবিত করেঃ</p> + <pre class="brush:css"> #data-table-1 td:first-child {font-weight: bolder;} + #data-table-1 td:first-child + td {font-family: monospace;} +</pre> + <p>ফলাফল এরূপ দেখায়ঃ</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table style="width: 18em; margin-right: 2em;"> + <tbody> + <tr> + <td><strong>Prefix</strong></td> + <td><code>0001</code></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + আরো বিস্তারিত</div> + <p>প্রচলিত উপায়ে, আপনি যদি একটি নির্বাচককে আরো সুনির্দিষ্ট করেন, তখন আপনি এটার প্রাধান্য বৃদ্ধি করতে পারবেন।</p> + <p>আপনি যদি পদ্ধতিগুলো ব্যবহার করেন, আপনার নিবন্ধে অনেকগুলো ট্যাগ-এর <code>class</code> অথবা <code>id এট্রিবিউটগুলোকে আপনি সুনির্দিষ্ট করার প্রয়োজন পরিহার করতে পারবেন। </code>তা ব্যতীত, সি এস এস কাজ করবে না।</p> + <p>অনেক বড় নকশার ক্ষেত্রে যেখানে গতি গুরুত্বপূর্ণ, আপনি আপনার স্টাইলশীটকে আরো নিপুণ করতে পারবেন জটিল নিয়মসমুহকে পরিহার করে যেটা উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের উপর নির্ভর করে।</p> + <p>টেবিল সম্পর্কে আরো বেশি উদাহরণ এর জন্যে, সি এস এস রেফারেন্স পাতায় <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables </a>দেখুন।</p> +</div> +<h2 id="কাজঃ_ক্লাস_এবং_আইডি_নির্বাচক_সমুহের_ব্যবহার">কাজঃ ক্লাস এবং আইডি নির্বাচক সমুহের ব্যবহার</h2> +<p style="margin-left: 40px;">১। আপনার এইচ টি এম এল ফাইলটি সম্পাদনা করুন, কপি এবং পেস্ট করার মাধ্যমে।</p> +<p style="margin-left: 40px;">২। তারপর প্রথম কপিতে আইডি এবং ক্লাস এট্রিবিউট ব্যবহার করুন এবং একটি আইডি এট্রিবিউট দ্বিতীয় কপিতে দিন যেমন নিচে দেখানো হয়েছে। বিকল্পরূপে, আবার সমগ্র ফাইলকে কপি এবং পেস্ট করুনঃ</p> +<ol> + <li> + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>এখন আপনি আপনার সি এস এস ফাইলটি সম্পাদনা করুন। সমগ্র বিষয় পুনঃস্থাপন করুনঃ<br> + <pre class="brush:css">strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; } +</pre> + </li> + <li>ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ<br> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + লাইনের ক্রম কোন প্রভাব ফেলে না এটি দেখানোর জন্য আপনি আপনার সি এস এস ফাইলে লাইনগুলো পুনরায় সাজানোর চেষ্টা করতে পারেন।<br> + <br> + <p>ক্লাস নির্বাচকসমুহ <code>.carrot</code> এবং <code>.spinach</code> ট্যাগ নির্বাচক <code>strong</code> এর উপরে প্রাধান্য পায়।</p> + <p>আইডি নির্বাচক <code>#first</code> ক্লাস এবং ট্যাগ নির্বাচকের উপরে প্রাধান্য পায়।</p> + </li> +</ol> +<div class="tuto_example"> + <div class="tuto_type"> + প্রতিদ্বন্দ্বিতাসমুহ</div> + <ol> + <li>আপনার এইচ টি এম এল ফাইল পরিবর্তন করা ছাড়া, আপনার সি এস এস ফাইলে একটি একক নিয়ম যোগ করুন যেটা সকল প্রথম অক্ষরকে একই রং এর করে রাখে যেমন এখন তারা আছে, কিন্তু দ্বিতীয় বর্ণনায় অন্য সকল টেক্সটকে নীল করে।<br> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>আপনি যে নিয়মটি এইমাত্র যোগ করেছেন তা এখন পরিবর্তন করে (অন্য কিছু পরিবর্তন না করে), প্রথম বর্ণনাকে নীল করার জন্যেঃ<br> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + </ol> + <div class="tuto_details" id="tutochallenge"> + <div class="tuto_type"> + Possible solution</div> + <ol> + <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: + <pre class="brush: css">#second { color: blue; } +</pre> + A more specific selector, <code>p#second</code> also works.</li> + <li>Change the selector of the new rule to be a tag selector using <code>p</code>: + <pre class="brush: css">p { color: blue; } +</pre> + </li> + </ol> + <a class="hideAnswer" href="#challenge">Hide solution</a></div> + <a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> +<h2 id="কাজঃ_নকল_ক্লাসের_নির্বাচকসমুহের_ব্যবহার">কাজঃ নকল ক্লাসের নির্বাচকসমুহের ব্যবহার</h2> +<ol> + <li>নিচের মত একটি এইচ টি এম এল ফাইল তৈরি করুনঃ</li> + <li> + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html> +</pre> + </li> + <li>এখন আপনার সি এস এস ফাইল সম্পাদনা করুন। সমগ্র বিষয়গুলো পুনঃস্থাপন করুনঃ<br> + <pre class="brush: css">a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +} +</pre> + </li> + <li>ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ (আপনার মাউসটি নিচের লিংকের উপর রাখুন প্রভাব দেখার জন্য): + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + </tbody> + </table> + </li> +</ol> +<h2 id="কাজঃ_সম্পর্ক_এবং_নকল_ক্লাসের_ভিত্তিতে_নির্বাচকসমুহের_ব্যবহার">কাজঃ সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহের ব্যবহার</h2> +<p>সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহ দ্বারা আপনি জটিল ক্যাসকেড এলগরিদম তৈরি করতে পারবেন।এটি ব্যবহার করার জন্য একটি সাধারণ কৌশল , উদাহরণ স্বরূপ, in order to create <strong>pure-CSS dropdown menus</strong> তৈরি করার জন্য (এটি শুধুমাত্র সি এস এস, <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript </a>ব্যতিরেকে). এই কৌশল এর সারাংশ হল নিম্নে বর্ণিত নিয়মের মত একটি নিয়ম তৈরি করাঃ</p> +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +}</pre> +<p>প্রয়োগ করার জন্য একটি এইচ টি এম এল গঠন নিম্নে দেয়া হলঃ</p> +<pre class="brush: html"><div class="menu-bar"> + <ul> + <li> + <a href="example.html">Menu</a> + <ul> + <li> + <a href="example.html">Link</a> + </li> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + </ul> + </li> + </ul> +</div> +</pre> +<p>আপনার সম্পূর্ণ <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> দেখুন একটি সম্ভব সংকেতের জন্য।</p> +<h2 id="পরবর্তীতে_কি">পরবর্তীতে কি?</h2> +<p>আপনার নমুনা স্টাইলশীট এখন এবং জটিল দেখাতে শুরু করেছে। পরবর্তী অংশ সি এস এসকে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a> করার উপায় বর্ণনা করে {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> diff --git a/files/bn/learn/css/building_blocks/values_and_units/index.html b/files/bn/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..715c208203 --- /dev/null +++ b/files/bn/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,281 @@ +--- +title: রং +slug: Web/CSS/Getting_Started/Color +tags: + - CSS + - Example + - Guide + - NeedsReview +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}এটা হচ্ছে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">যেভাবে শুরু করবেন CSS </a> টিউটোরিয়ালের ৮ম বিভাগ; এটা ব্যাখ্যা করবে কিভাবে আপনি CSS এ রং উল্লেখ করবেন. আপনি আপনার নমুনা স্টাইলশিট এ পরিচিত হবেন background রং এর সাথে।</p> +<h2 class="clearLeft" id="তথ্য_রং_(color)">তথ্য: রং (color)</h2> +<p>এই টিউটোরিয়ালে এখন পর্যন্ত ,আপনি ব্যবহার করেছেন একটি নির্দিষ্ট সংখ্যক রং এর নাম . CSS 2 সর্বোপরি ১৭ টি রং এর নাম বহন করে। কিছু নাম হয় তো সেগুলো, যেগুলো আপনি আশা করেন না।</p> +<table style="border: 0px; margin-left: 2em; text-align: right;"> + <tbody> + <tr> + <td> </td> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: black;"> </td> + <td>gray</td> + <td style="width: 2em; height: 2em; background-color: gray;"> </td> + <td>silver</td> + <td style="width: 2em; height: 2em; background-color: silver;"> </td> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> + </tr> + <tr> + <td>primaries</td> + <td>red</td> + <td style="width: 2em; height: 2em; background-color: red;"> </td> + <td>lime</td> + <td style="width: 2em; height: 2em; background-color: lime;"> </td> + <td>blue</td> + <td style="width: 2em; height: 2em; background-color: blue;"> </td> + </tr> + <tr> + <td>secondaries</td> + <td>yellow</td> + <td style="width: 2em; height: 2em; background-color: yellow;"> </td> + <td>aqua</td> + <td style="width: 2em; height: 2em; background-color: aqua;"> </td> + <td>fuchsia</td> + <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> + </tr> + <tr> + <td> </td> + <td>maroon</td> + <td style="width: 2em; height: 2em; background-color: maroon;"> </td> + <td>orange</td> + <td style="width: 2em; height: 2em; background-color: orange;"> </td> + <td>olive</td> + <td style="width: 2em; height: 2em; background-color: olive;"> </td> + <td>purple</td> + <td style="width: 2em; height: 2em; background-color: purple;"> </td> + <td>green</td> + <td style="width: 2em; height: 2em; background-color: green;"> </td> + <td>navy</td> + <td style="width: 2em; height: 2em; background-color: navy;"> </td> + <td>teal</td> + <td style="width: 2em; height: 2em; background-color: teal;"> </td> + </tr> + </tbody> +</table> +<p> </p> +<div class="tuto_details"> + <div class="tuto_type"> + বিস্তারিত</div> + <p>আপনার browser হয়ত আরও অনেক রং এর নাম বহন করতে পারে, যেমনঃ</p> + <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> + <tbody> + <tr> + <td>dodgerblue</td> + <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> + <td>peachpuff</td> + <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> + <td>tan</td> + <td style="width: 2em; height: 2em; background-color: tan;"> </td> + <td>firebrick</td> + <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> + <td>aquamarine</td> + <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> + </tr> + </tbody> + </table> + <p>এই প্রসারিত তালিকার আরও বিস্তারিত জানার জন্য দেখুন: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> CSS 3 এর রং এর মডিউল এ। সতর্ক থাকুন ওই সব রং এর নাম ব্যবহারে যেগুলো আপনার পাঠকের browsers এ হয়ত বহন করে না।</p> +</div> +<p>একটি বৃহৎ palette এর জন্য, যে রং গুলো আপনি চান সেগুলোর লাল (red), সবুজ(green) এবং নীল( blue) উপাদানগুলো উল্লেখ করুন হ্যাশট্যাগ (#) দিয়ে এবং ৩টি <em>হেক্সাডেসিমাল</em>(<em>hexadecimal)</em> সংখ্যা যাদের শ্রেণী 0 - 9 , a – f. a – f অক্ষরগুলো দিয়ে 10 – 15 এর মান বুঝায়:</p> +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000</code></td> + </tr> + <tr> + <td>pure red</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>pure green</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#0f0</code></td> + </tr> + <tr> + <td>pure blue</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#00f</code></td> + </tr> + <tr> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + </tbody> +</table> +<p>সম্পূর্ণ palette এর জন্য, প্রতিটি উপাদানের ক্ষেত্রে উল্লেখ করুন দুইটি হেক্সাডেসিমাল সংখ্য:</p> +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000000</code></td> + </tr> + <tr> + <td>pure red</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#ff0000</code></td> + </tr> + <tr> + <td>pure green</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#00ff00</code></td> + </tr> + <tr> + <td>pure blue</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#0000ff</code></td> + </tr> + <tr> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#ffffff</code></td> + </tr> + </tbody> +</table> +<p>আপনি সচারচর এই ৬ সংখ্যার হেক্সাডেসিমাল কোড গুলো আপনার গ্রাফিক্স প্রোগ্রাম অথবা অন্য কোন টুলস থেকে পেতে পারেন।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <div class="tuto_type"> + <strong>সামান্য প্র্যাকটিস করে, আপনি তিন সংখ্যার রং গুলো আপনার বেশিরভাগ কাজের জন্য সুবিন্যস্ত করতে পারবেনঃ</strong></div> + <div class="tuto_type"> + </div> + <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> + <tbody> + <tr> + <td>শুরু লাল এর সাথে:</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>একে হাল্কা করার জন্য, কিছু সবুজ এবং নীল যোগ করুনঃ</td> + <td style="width: 2em; height: 2em; background-color: #f77;"> </td> + <td><code>#f77</code></td> + </tr> + <tr> + <td>একে আরও কমলা করার জন্য, সামান্য একটু এক্সট্রা সবুজ যোগ করুনঃ</td> + <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> + <td><code>#fa7</code></td> + </tr> + <tr> + <td>আরও ডার্ক করার জন্য, এর সব উপাদান মুছে ফেলুন:</td> + <td style="width: 2em; height: 2em; background-color: #c74;"> </td> + <td><code>#c74</code></td> + </tr> + <tr> + <td>এর সম্পৃক্তি দূর করার জন্য, এর উপাদান গুলো কে আরও সমান করুনঃ</td> + <td style="width: 2em; height: 2em; background-color: #c98;"> </td> + <td><code>#c98</code></td> + </tr> + <tr> + <td>আপনি যদি একদম সমান করেন তাহলে আপনি পাবেন ধুুসরঃ</td> + <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> + <td><code>#ccc</code></td> + </tr> + </tbody> + </table> + <p>একটি মোমের মত শেডের জন্য যেমন বর্ণহীন নীলঃ</p> + <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> + <tbody> + <tr> + <td>শুরু একদম শুভ্র সাদা থেকে:</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + <tr> + <td>অন্যান্য উপাদানগুলো সামান্য কমান:</td> + <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> + <td><code>#eef</code></td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + আরও বিস্তারিত</div> + <p>আপনি আরও উল্লেখ করতে পারেন একতি রং এর ডেসিমাল RGB মানগনগুলো যাদের শ্রেণী 0 – 25 অথবা percentages.</p> + <p>উদাহরণস্বরূপ ,মেরুন (dark red):</p> + <pre class="brush:css language-css"><code class="language-css"><span class="token function">rgb</span>(128, 0, 0)</code></pre> + <p>কিভাবে রং উল্লেখ করা যায় তার আরও বিস্তারিত জানার জন্য দেখুনঃ <a class="external external-icon" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">রং</a> CSS সুনির্দিষ্টকরণে এ। ম্যাচিং সিস্টেম রং যেমন মেনু এবং ThreeDFace, দেখুন: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> CSS সুনির্দিষ্টকরণে এ।</p> +</div> +<p> </p> +<p>আপনি ইতিমধ্যে {{ cssxref("color") }} প্রপার্টি text এ ব্যবহার করেছেন ।</p> +<p>আপনি চাইলে আরও ব্যবহার করতে পারেন {{ cssxref("background-color") }} প্রপার্টি টি যাতে করে আপনি উপাদানগুলোর ব্যাকগ্রাউন্ড পরিবর্তন করতে পারেন।</p> +<p>ব্যাকগ্রাউন্ড টি আপনি সেট করতে পারেন স্বচ্ছ ভাবে যাতে করে আপনি স্পষ্টভাবে যে কোন রং মুছে ফেলতে পারেন, মূল উপাদানের ব্যাকগ্রাউন্ড প্রকাশ করে।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>এই টিউটোরিয়ালে <strong>উদাহরণ</strong> বাক্সগুলোতে বর্ণহীন হলুদ ব্যাকগ্রাউন্ড ব্যবহার করা হয়েছে:</p> + <pre class="brush:css">background-color: #fffff4; +</pre> + <p><strong>আরও বিস্তারিত</strong> বাক্সগুলো এই বর্ণহীন ধূসর ব্যবহার করেছেঃ</p> + <pre class="brush:css">background-color: #f4f4f4; +</pre> +</div> +<p> </p> +<h2 id="কাজ_কালার_কোড_এর_ব্যবহার">কাজ: কালার কোড এর ব্যবহার</h2> +<ol> + <li>আপনার CSS ফাইল সম্পাদন করুন।</li> + <li>এখানে মোটা করে যেগুলো দেখানো হয়েছে সেগুলো পরিবর্তন করুন, যাতে করে আপনি আদি অক্ষরগুলো কে একটি বর্ণহীন নীল রং দিতে পারেন। ( যে বিন্যাসগুলো এবং মন্তব্যগুলো আপনার ফাইলে দেখানো হয়েছে সেগুলো সম্ভবত দেখানো ফাইলগুলো হতে ভিন্ন।এই বিন্যাস এবং উক্তিগুলো আপনার মত করে সেভ করে রাখুন।)<br> + <pre class="brush:css;highlight:[13]">/*** 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;} +</pre> + </li> + <li>ফাইলটি সেভ করুন এবং আপনার ব্রাউজার টিকে রিফ্রেশ করুন যাতে করে আপনি ফলাফলটি দেখতে পারেন।</li> +</ol> +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> +<table class="standard-table"> + <tbody> + <tr> + <td> + <p><strong>প্রতিদন্দিতাঃ</strong><br> + আপনার CSS ফাইলে ,সব গুলো কালারের নাম পরিবর্তন করে 3 ডিজিট এর কালার কোড এ পরিবর্তন করুন ফলাফলে কোন প্রভাব না ফেলে।</p> + <p>(এটা হয়ত একদম সঠিক ভাবে হবে না, কিন্তু আপনি কাছাকাছি যেতে পারবেন। একদম সঠিক ভাবে করার জন্য আপনার প্রয়োজন 6 ডিজিট এর কোডসমূহ, এবং প্রয়োজন CSS সুনির্দিষ্টকরন দেখা অথবা ব্যবহার করুন একটি গ্রাফিক্স টুল যাতে করে কালার গুলো মিল করাতে পারেন।)</p> + <p> <a href="https://developer.mozilla.org/bn-BD/docs/Web/CSS/Getting_Started/Color$edit#tutochallenge">প্রতিদ্বন্দ্বিতার জন্য সমাধান দেখুন।</a></p> + </td> + </tr> + </tbody> +</table> +<h2 id="এরপর_কি"><strong>এরপর কি?</strong></h2> +<p><br> + {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}আপনার নমুনা ডকুমেন্ট এবং আপনার নমুনা stylesheet এর থেকে সম্পূর্ণভাবে আলাদা। এর পরে <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">পরবর্তী বিভাগ</a> ব্যাখ্যা করবে কেমন করে আপনি এই সম্পূর্ণ আলাদা জিনিস থেকে ভিন্ন কিছু তৈরি করবেন।<br> + </p> |