diff options
Diffstat (limited to 'files/bn/web/css/getting_started')
| -rw-r--r-- | files/bn/web/css/getting_started/color/index.html | 280 | ||||
| -rw-r--r-- | files/bn/web/css/getting_started/how_css_works/index.html | 126 | ||||
| -rw-r--r-- | files/bn/web/css/getting_started/index.html | 27 | ||||
| -rw-r--r-- | files/bn/web/css/getting_started/readable_css/index.html | 132 | ||||
| -rw-r--r-- | files/bn/web/css/getting_started/text_styles/index.html | 109 | ||||
| -rw-r--r-- | files/bn/web/css/getting_started/why_use_css/index.html | 103 | ||||
| -rw-r--r-- | files/bn/web/css/getting_started/নই/index.html | 354 | ||||
| -rw-r--r-- | files/bn/web/css/getting_started/লে-আউট/index.html | 301 |
8 files changed, 1432 insertions, 0 deletions
diff --git a/files/bn/web/css/getting_started/color/index.html b/files/bn/web/css/getting_started/color/index.html new file mode 100644 index 0000000000..fd6c5a64e4 --- /dev/null +++ b/files/bn/web/css/getting_started/color/index.html @@ -0,0 +1,280 @@ +--- +title: রং +slug: Web/CSS/Getting_Started/Color +tags: + - CSS + - Example + - Guide + - NeedsReview +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +<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> diff --git a/files/bn/web/css/getting_started/how_css_works/index.html b/files/bn/web/css/getting_started/how_css_works/index.html new file mode 100644 index 0000000000..652802841f --- /dev/null +++ b/files/bn/web/css/getting_started/how_css_works/index.html @@ -0,0 +1,126 @@ +--- +title: কিভাবে CSS কাজ করে +slug: Web/CSS/Getting_Started/How_CSS_works +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - NeedsReview + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}} এটি<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 class="short_text" id="result_box" lang="bn"><span class="hps">টিউটোরিয়াল</span> এর <span class="hps">তৃতীয়</span> <span class="hps">অধ্যায়</span></span>; <span id="result_box" lang="bn"><span class="hps">এটা</span> <span class="hps">আপনার ব্রাউজারে</span> CSS <span class="hps">কিভাবে কাজ করে</span> <span class="hps">ব্যাখ্যা করে</span></span>। <span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">বিশ্লেষণ করেন,<span id="result_box" lang="bn"><span class="hps">তার</span> <span class="alt-edited hps">স্টাইল</span> এর <span class="hps">বিবরণ</span> <span class="hps">প্রকাশের মধ্য দিয়ে।</span></span></span></span></span></p> + +<h2 class="clearLeft" id="তথ্য_CSS_কিভাবে_কাজ_করে">তথ্য: CSS কিভাবে কাজ করে</h2> + +<p>যখন একটি ব্রাউজার একটি ডকুমেন্ট প্রদর্শন করে, এটি অবশ্যই ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল তথ্য এর সমন্বয় ঘটায়।এটি ডকুমেন্ট টি কে দুই ধাপে প্রসেস করে থাকেঃ</p> + +<ol> + <li>ব্রাউজার টি মার্ক আপ লেঙ্গুয়েজ এবং সিএসেস একটি কাঠামোতে পরিবর্তন করে যেটির নাম <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (ডকুমেন্ট অবজেক্ট মডেল). The DOM কম্পিউটার এর মেমরি তে ডকুমেন্ট কে উপস্থাপন করে.এটি ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল এর সমন্বয় ঘটায়।</li> + <li>ব্রাউজার টি DOM এর কন্টেন্ট গুলো কে তুলে ধরে।</li> +</ol> + +<p>একটি মার্ক আপ ল্যাঙ্গুয়েজ <em>elements</em>ব্যাবহার করে ডকুমেন্ট এর গঠন ব্যাখ্যা দেয়ার জন্য। ট্যাগ ব্যাবহার করে আপনি একটি elementকে মার্ক করতে পারেন, এর মধ্যে আছে স্ট্রিং যেটা শুরু হয় '<' দিয়ে এবং শেষ হয় '<' দিয়ে। বেশির ভাগ এলিমেন্ট এর জোড়া ট্যাগ আছে।একটি স্টার্ট ট্যাগ আর এন্ড ট্যাগ। স্টার্ট এর ক্ষেত্রে, elementএর নাম, '<code>< ></code>' এর ভিতরে ।এন্ড ট্যাগ <code>এর ক্ষেত্রে element</code> এর নাম এর আগে ,'<' এর পরে '/' বসাতে হবে।</p> + +<p>মার্ক আপ ল্যাঙ্গুয়েজ এর উপর ভিত্তি করে, কিছু element এর শুধু মাত্র স্টার্ট ট্যাগ অথবা শুধুমাত্র সিঙ্গেল ট্যাগ থাকবে যেখানে '/' নাম এর পরে আসে।</p> + +<p>একটি element একটি পাত্র হতে পারে , স্টার্ট ট্যাগ এবং এন্ড ট্যাগ এর মাঝে অন্যান্য উপকরন নিএ।</p> + +<p>একটি DOM এর গাছ এর মত কাঠামো থাকে. মার্ক আপ ল্যাঙ্গুয়েজ এ প্রতিটি element and টেক্সট এর রান একটি <em>node</em> হিসেবে কাজ করে এই গাছ কাঠামোতে. DOM nodes গুলো পাত্র নয়। বরং, এগুলোকে শিশু node এর অভিভাবক ধরা যায়।</p> + +<div class="tuto_example"> +<div class="tuto_type">উদাহরনঃ</div> +আপনার সেম্পল উদাহরনে, <code><p></code> ট্যাগ এবং এর অ্যান্ড ট্যাগ <code></p></code> একটি পাত্র তৈরি করে + +<pre class="brush:html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<h2 id="বাস্তব_উদাহরণঃ">বাস্তব উদাহরণঃ</h2> + +<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> + +<p>DOM এ corresponding P node টি কে অভিভাবক ধরা হয় .এর শিশু node গুলো হল<small> </small>স্ট্রং nodes and টেক্সট nodes. স্ট্রং nodes গুলো নিজেরাই হল অভিভাবক, text nodes গুলোকে নিয়ে নিজেদের শিশু node হিসেবে ।</p> + +<pre><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">C</span>" +├─"<span style="color: black;">ascading</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +├─"<span style="color: black;">tyle</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +└─"<span style="color: black;">heets</span>"</pre> +</div> + +<p> DOM বোঝা আপনাকে সাহায্য করবে ডিজাইন করতে, debug করতে and আপনার CSS রক্ষণাবেক্ষণ করতে কারন DOM হল যেখানে আপনার CSS ডকুমেন্ট এর content মিলিত হয়.</p> + +<h2 id="কার্যকরণ_একটি_DOM_বিশ্লেষণ">কার্যকরণ: একটি DOM বিশ্লেষণ</h2> + +<h3 id="DOM_Inspector_ব্যাবহার">DOM Inspector ব্যাবহার</h3> + +<p>একটি DOM বিশ্লেষণ করতে হলে, আপনার প্রয়জনহবে স্পেশাল সফটওয়্যার এর.এখানে আপনি ব্যাবহার করবেন মোজিলার <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) add-on , একটি DOM বিশ্লেষণ এর জন্য। এই কাজ টি করার জন্য আপনাকে add-on টি ইন্সটল করতে হবে।</p> + +<ol> + <li>মোজিলা ব্রাউজার টি ব্যাবহার করুন আপনার স্যাম্পল HTML ডকুমেন্ট টি ওপেন করবার জন্য.</li> + <li>আপনার ব্রাউজার এর মেনু বার থেকে , <strong>বাছাই করুন Tools > DOM Inspector</strong>, অথবা এভাবে <strong>Tools > Web Development > DOM Inspector</strong>. + <div class="tuto_details"> + <div class="tuto_type">আরও</div> + + <p>যদি আপনার মোজিলা ব্রাউজার এ DOMi না থাকে, তাহলে এটি ব্যাবহার করতে পারেন <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">install it from the Add-ons site</a> এবং ব্রাউজার রি-স্টার্ট করতে হবে। তারপর ফিরে যাবেন টিউটোরিয়াল এ।</p> + + <p>যদি আপনি DOMi ইন্সটল করতে না চান ( অথবা আপনি নন- মোজিলা ব্রাউজার ব্যাবহার করেন), আপনি ব্যাবহার করতে পারেন Web X-Ray Goggles, যেভাবে বিবরন দেয়া আছে পরবর্তী সেকশন এ। অথবা আপনি সেকশন টি বাদ রেখে পরবর্তী পেজ এ চলে যেতে পারেন. সেকশন টি বাদ দিয়ে গেলে টিউটোরিয়াল এর বাকি অংশে কোন প্রভাব ফেলবে না।</p> + </div> + </li> + <li>DOMi এ, আপনার ডকুমেন্ট এর nodes গুলোকে বিস্তৃত করুন arrows এ ক্লিক করার মাধ্যমে। + <p><strong>দ্রষ্টব্য: </strong> আপনার HTML ফাইল এ স্পেসিং করলে হয়ত DOMi কিছু শুন্য text nodes দেখাতে পারে,যেগুলো আপনি উপেক্ষা করতে পারেন।</p> + + <p>রেসাল্ট এর অংশ হয়ত এরূপ দেখাবে যা নিরভর করছে আপনি কোন nodes গুলোকে বিস্তৃত করেছেন:</p> + + <pre>│ ▼╴<span style="color: black;">P</span> +│ │ │ ▼╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ ►╴<span style="color: black;">STRONG</span> +│ │</pre> + + <p>যখন আপনি একটি node সিলেক্ট করবেন, আপনিDOMi's এর ডান-হাত প্যান টি ব্যাবহার করতে পারেন আরও কিছু খুজে বের করার জন্য. উদাহরন সরূপ , আপনি যখন একটি text node সিলেক্ট করবেন, DOMi আপনাকে ডান-হাত প্যান এ টেক্সট টি দেখাবে.</p> + + <p>যখন আপনি একটি element node সিলেক্ট করবেন, DOMi সেটি বিশ্লেষণ করবে এবং ডান হাত প্যান এ অনেক তথ্য সরবরাহ করবে।স্টাইল তথ্য হল বিতরন করা তথ্য এর ই একটি অংশ।</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">চেলেঞ্জঃ<br> +DOMi তে, স্ট্রং node এ ক্লিক করুন।</div> + +<p>DOMi এর ডান হাত প্যান টি ব্যাবহার করুন খুজে বের করার জন্য কোথায় node এর রঙ লাল রাখা হয়েছে এবং কোথায় এটিকে সাধারন টেক্সট এর তুলনায় গাঢ় দেখান হয়েছে।</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> +<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> + +<h3 id="Web_X-Ray_Goggles_এর_বেবহারঃ"> Web X-Ray Goggles এর বেবহারঃ</h3> + +<p><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>, DOM Inspector এর তুলনায় কম তথ্য সরবরাহ করে কিন্তু এটি ব্যাবহার করা ও ইন্সটল করা সহজ।</p> + +<ol> + <li><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a> এর জন্য হোম পেজ এ যান।</li> + <li>পেজের bookmarklet এর লিংক টি কে টেনে ব্রাউজার টুলবার এ আনুন।</li> + <li>আপনার স্যাম্পল HTML ডকুমেন্ট টি খুলুন।</li> + <li>Web X-Ray Goggles কে এক্টিভেট করুন টুলবার এর bookmarklet এ ক্লিক করার মাধ্যমে।</li> + <li>আপনার কার্সর এর পয়েন্টআর টিকে, ডকুমেন্ট এর এলেমেন্ট দেখার জন্য ডকুমেন্ট এর উপর ঘোরান।</li> +</ol> + +<h2 id="পরবর্তীতে_কি_আছে">পরবর্তীতে কি আছে?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}যদি আপনি চ্যালেঞ্জ টি গ্রহন করে থাকেন,আপনি দেখতে পেয়েছেন যে একাধিক জায়গা থেকে স্টাইল তথ্য যোগাযোগ স্থাপন করে একটি এলেমেন্ট এর জন্য একটি ফাইনাল স্টাইল তৈরি করতে।<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">next page</a> এই সব যোগাযোগ স্থাপনের বেপারে আরও বিবরন দিবে।</p> diff --git a/files/bn/web/css/getting_started/index.html b/files/bn/web/css/getting_started/index.html new file mode 100644 index 0000000000..7b53c8c554 --- /dev/null +++ b/files/bn/web/css/getting_started/index.html @@ -0,0 +1,27 @@ +--- +title: যেভাবে শুরু করবেন (CSS টিউটোরিয়াল) +slug: Web/CSS/Getting_Started +translation_of: Learn/CSS/First_steps +--- +<p>সম্পূর্ণ নতুনদের জন্য লেখা এই CSS টিউটোরিয়াল আপনাকে <a href="/bn-BD/docs/CSS" title="/bn-BD/docs/CSS">Cascading Style Sheets</a> (<em>ক্যাসকেডিং স্টাইল শিট</em> বা CSS) এর সঙ্গে পরিচয় করিয়ে দেবে। এই গাইডটি ভাষাটির খুবই সাধারণ ফিচারগুলো সাথে উদাহরণসহ আপনাকে পরিচয় করিয়ে দেবে, যা আপনি নিজের ব্রাউজারে ঘরে বসেই চালিয়ে দেখতে পারবেন। এর ফলে আধুনিক ব্রাউজারগুলোতে CSS এর সাধারণ বিষয়গুলো আপনি সহজেই বুঝতে পারবেন।</p> +<p>CSS এ নতুন, এমন পাঠকদের জন্যই এই টিউটোরিয়াল লেখা হয়েছে, যদি আপনার CSS এর কিছু অতি সাধারণ বিষয় জানাশোনা তারপরেও আপনি এটি ব্যবহার করতে পারবেন। আপনি যদি CSS এ অভিজ্ঞ হয়ে থাকেন, তবে এই টিউটোরিয়ালটি আপনার বিশেষ একটা উপকার করতে পারবে না, CSS এর মূল পৃষ্ঠায় আরও এ্যাডভান্সড বিষয়ের <a href="/bn-BD/docs/CSS" title="/bn-BD/docs/CSS">তালিকা</a> রয়েছে।</p> +<nav class="fancyTOC"> + <a class="button" href="/bn-BD/docs/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">CSS কি</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">কেন CSS</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">CSS যেভাবে কাজ করে</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Cascading_and_inheritance" style="font-size: 19px;" title="Chapter 'Cascading and inheritance' of the CSS tutorial">ক্যাসকেডিং এবং ইনহেরিটেন্স</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">সিলেক্টর</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">সহজে পড়ার উপযোগী CSS</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">লেখার স্টাইল</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">রং</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Contbn-BDt" title="Chapter 'Contbn-BDt' of the CSS tutorial">কন্টেন্ট </a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">লিস্ট (তালিকা)</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">বক্স (বাক্স)</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">লেআউট</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">টেবিল</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">মিডিয়া</a></nav> +<h3 id="শুরু_করার_পূর্বে_আপনার_কি_করা_প্রয়োজন">শুরু করার পূর্বে আপনার কি করা প্রয়োজন?</h3> +<p>এই টিউটোরিয়ালটি ভালোভাবে অনুসরণ করতে চাইলে আপনার প্রয়োজন একটি টেক্সট এডিটর এবং একটি আধুনিক ব্রাউজার। কি করে এগুলো ব্যবহার করতে হয় - এ সংক্রান্ত বেসিক জানাশোনা থাকা ভালো।</p> +<p>আপনি যদি ফাইল নিয়ে ঘাঁটাঘাঁটি না করতে চান, তবে আপনি পুরো টিউটোরিয়ালটি শুধু পড়ে যেতে পারেন, এবং ছবিগুলোর দিকে চোখ বুলিয়ে যেতে পারেন, কিন্তু এ পদ্ধতিটি খুব একটা কার্যকর বা ভালো পদ্ধতি নয় বলে আমরা মনে করি।</p> +<p><strong>উল্লেখ্য: </strong>CSS এর সাহায্যে রং নিয়ে কাজ করা যায়, তাই এই টিউটোরিয়ালের কিছু অংশ রংয়ের ওপর নির্ভরশীল। আপনি এই অংশগুলো সহজেই কাজে লাগাতে পারবেন যদি আপনার একটি রঙিন মনিটর বা ডিসপ্লের পাশাপাশি স্বাভাবিক রং দেখায় কোন শারীরিক সমস্যা না থাকে।</p> +<h3 id="যেভাবে_টিউটোরিয়ালটি_ব্যবহার_করবেন">যেভাবে টিউটোরিয়ালটি ব্যবহার করবেন</h3> +<p>এই টিউটোরিয়ালটি ব্যবহারের জন্য প্রতিটা পৃষ্ঠা ভালোভাবে এবং ধারাবাহিকভাবে পড়ুন। যদি আপনি একটি পৃষ্ঠা বাদ দিয়ে ফেলেন, তাহলে পরবর্তী পৃষ্ঠাগুলো বোঝা আপনার জন্য অনেকটা কঠিন হতে পারে।</p> +<p>সিএসএস কিভাবে কাজ করে বোঝার জন্য প্রতিটি পৃষ্ঠার "<em>তথ্যাবলী</em>" অংশটি ভালো করে পড়ুন। "<em>হাতে-কলমে</em>" অংশগুলো পড়ে আপনার নিজের কম্পিউটারে CSS ব্যবহারের চেষ্টা করে দেখুন।</p> +<p>আপনি কতটুকু বুঝতে পেরেছেন, তা যাচাই করতে প্রতিটি পৃষ্ঠার শেষে থাকা "চ্যালেঞ্জ" গ্রহণ করুন। চ্যালেঞ্জের সমাধান কিন্তু চ্যানলেঞ্জের নিচেই লিংকের মাধ্যমে দেওয়া আছে, তাই ওগুলো খুব বেশি প্রয়োজন হলে না দেখাই ভালো! নিজে নিজে অবশ্যই চেষ্টা করতে হবে এবং যদি ব্যর্থ হন বারবার, তবে সামান্য একটু উঁকি মেরে দেখা দোষের কিছু না!</p> +<p>CSS আরও গভীরভাবে বুঝতে চাইলে "অতিরিক্ত তথ্য" লেখা বাক্সগুলোর তথ্য পড়ুন। লিংকগুলোর সাহায্যে CSS সংক্রান্ত আরও অনেক রেফারেন্স তথ্য খুঁজে বের করতে পারবেন।</p> +<h2 id="টিউটোরিয়াল_২য়_পর্ব">টিউটোরিয়াল ২য় পর্ব</h2> +<p>এই টিউটোরিয়ালের দ্বিতীয় পর্বে অন্যান্য ওয়েব ও মোজিলা প্রযুক্তির সাথে CSS ব্যবহারের কথা আলোচনা করা হয়েছে।</p> +<ol> + <li><strong><a href="/bn-BD/CSS/Getting_Started/JavaScript" title="bn-BD/CSS/Getting_Started/JavaScript">JavaScript (জাভাস্ক্রিপ্ট)</a></strong></li> + <li><strong><a href="/bn-BD/CSS/Getting_Started/SVG_graphics" title="bn-BD/CSS/Getting_Started/SVG_graphics">SVG গ্রাফিক্স</a></strong></li> + <li><strong><a href="/bn-BD/CSS/Getting_Started/XML_data" title="bn-BD/CSS/Getting_Started/XML_data">XML ডাটা</a></strong></li> + <li><strong><a href="/bn-BD/CSS/Getting_Started/XBL_bindings" title="bn-BD/CSS/Getting_Started/XBL_bindings">XBL বাইন্ডিং</a></strong></li> + <li><strong><a href="/bn-BD/CSS/Getting_Started/XUL_user_interfaces" title="bn-BD/CSS/Getting_Started/XUL_user_interfaces">XUL ইউজার ইন্টারফেস</a></strong></li> +</ol> diff --git a/files/bn/web/css/getting_started/readable_css/index.html b/files/bn/web/css/getting_started/readable_css/index.html new file mode 100644 index 0000000000..07801c10fa --- /dev/null +++ b/files/bn/web/css/getting_started/readable_css/index.html @@ -0,0 +1,132 @@ +--- +title: Readable CSS +slug: Web/CSS/Getting_Started/Readable_CSS +tags: + - NeedsReview +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">This is the 6th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.</span></p> +<h2 class="clearLeft" id="তথ্য_পাঠযোগ্য_CSS"><span class="short_text" id="result_box" lang="bn"><span class="hps">তথ্য</span></span>: <span class="short_text" id="result_box" lang="bn"><span class="hps">পাঠযোগ্য</span> </span>CSS</h2> +<p><span id="result_box" lang="bn"><span class="hps">আপনি এগুলো</span> <span class="hps">আরো পাঠযোগ্য</span> <span class="hps">করার জন্য আপনার</span> <span class="hps">স্টাইলশীট</span> এ <span class="hps">সাদা</span> <span class="hps">স্থান এবং</span> <span class="hps">মন্তব্য যুক্ত করতে পারেন</span></span>। <span id="result_box" lang="bn"><span class="hps">You can also group selectors together? যখন একই</span> <span class="hps">স্টাইল নিয়ম</span> <span class="hps">বিভিন্ন ভাবে</span> <span class="hps">নির্বাচিত</span> <span class="hps">উপাদানের উপর প্রয়োগ করা যায় </span>।</span></p> +<h3 id="সাদা_স্থান">সাদা স্থান</h3> +<p><span id="result_box" lang="bn"><span class="hps">হোয়াইট স্পেস</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">মানে </span></span>প্রকৃত</span> <span class="hps">স্পেস,</span> <span class="hps">ট্যাব ও</span> <span class="hps">নতুন লাইন</span> <span class="hps">.</span> <span class="hps">আপনি আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">আরো পাঠযোগ্য করতে</span> <span class="hps">সাদা স্থান</span> <span class="hps">যোগ করতে পারেন।</span></span></p> +<p>পৃষ্ঠা বিন্যাস এবং গঠন context এর মধ্যে <span id="result_box" lang="bn"><span class="hps">সাদা স্থান হচ্ছে পৃষ্ঠার </span></span><span id="result_box" lang="bn"><span class="hps">অচিহ্নিত </span></span><span id="result_box" lang="bn"><span class="hps">অংশ </span></span><span id="result_box" lang="bn"><span>: <span id="result_box" lang="bn"><span class="hps">কলাম</span> <span class="hps">এবং টাইপ</span> <span class="hps">লাইনের মধ্যে </span></span></span></span> <span id="result_box" lang="bn"><span class="hps">মার্জিন,</span> <span class="hps">gutters</span><span>, এবং স্থান</span></span>।</p> +<p><span id="result_box" lang="bn"> <span><span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="hps">সিএসএস ফাইল</span> <span class="hps">বর্তমানে</span> <span class="hps">এক</span> <span class="hps"><span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">নিয়ম <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">প্রতি</span></span></span></span> </span></span></span></span>লাইনে </span><span>এবং <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">প্রায়</span> <span class="hps">সর্বনিম্ন </span></span></span></span>সাদা</span> <span class="hps">স্থান</span> <span class="hps"> আছে।</span> <span class="hps">একটি জটিল</span> <span class="hps">স্টাইলশীটে</span> <span class="hps">এই</span> <span class="hps">বিন্যাস</span><span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps"> পড়া</span> <span class="hps">কঠিন হয়ে দাড়াবে এবং</span></span></span></span> <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">স্টাইলশীট</span> </span></span></span> <span class="hps">বজায় রাখা</span>ও <span class="hps">কঠিন হবে</span> <span class="hps">।</span> </span></span></span></p> +<p><span id="result_box" lang="bn"><span class="hps">আপনার নির্বাচিত</span> <span class="hps">বিন্যাস</span> <span class="hps">সাধারণত একটি</span> <span class="hps">ব্যক্তিগত পছন্দ</span><span>, কিন্তু আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">যদি</span> ভাগ <span class="hps">প্রকল্পের</span> <span class="hps">অংশ হয়</span><span>, তাহলে ঐসব</span> <span class="hps">প্রকল্পের</span> <span class="hps">তাদের নিজস্ব</span> <span class="hps">নিয়মাবলী</span> <span class="hps">থাকতে পারে।</span></span><br> + </p> +<div class="tuto_example"> + <div class="tuto_type"> + <span id="result_box" lang="bn"><span class="hps">উদাহরণ</span><br> + <br> + <span class="hps"><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ যেমন <span id="result_box" lang="bn"><span class="hps">কম্প্যাক্ট বিন্যাস </span></span></span></span>আমরা <span id="result_box" lang="bn"><span class="hps">ব্যবহার করছি</span></span> , <span id="result_box" lang="bn"><span class="hps">শুধুমাত্র</span> <span class="hps">একটি লাইন</span> <span class="hps">বিভাজন</span><span> <span id="result_box" lang="bn"><span class="hps">যখন</span></span></span></span> এটা</span> <span class="hps">খুব দীর্ঘ</span> <span class="hps">হয়ে</span> যায় <span>:</span></span></div> + <br> + <pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;} +</pre> + <p><span class="short_text" id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">প্রতি লাইনে একটি</span> <span class="hps">মান</span> <span class="hps">পছন্দ </span><span>করে :</span></span></p> + <pre class="brush: css">.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</pre> + <p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">indention ব্যবহার করে যেমন- দুই</span> <span class="hps">স্পেস,</span> <span class="hps">চার</span> <span class="hps">স্পেস</span> <span class="hps"> অথবা</span> <span class="hps">একটি ট্যাব</span> হচ্ছে <span class="hps">সাধারণ</span></span>:</p> + <pre class="brush: css">.carrot { + color: orange; + text-decoration: underline; + font-style: italic; +} +</pre> + <p><span id="result_box" lang="bn"> <span class="hps">কিছু মানুষ</span> <span class="hps">সবকিছু </span>ঊর্ধ্বাভাবে লাইনে লিখতে পছন্দ করে <span class="hps">(কিন্তু</span> <span class="hps">এর মত একটি</span> <span class="hps">বিন্যাস</span> <span class="hps">বজায় রাখা কঠিন</span><span>):</span></span></p> + <pre class="brush: css">.carrot + { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> + <p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">পাঠযোগ্যতা</span> <span class="hps">উন্নত করার লক্ষে্য </span> <span class="hps">মিশ্র</span> <span class="hps">হোয়াইটস্পেস</span> <span class="hps">ব্যবহার করে।</span></span></p> + <pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px } +.vegetable.carrot { color: orange; height: 90px; width: 10px } +.vegetable.spinach { color: darkgreen; height: 30px; width: 30px } +</pre> +</div> +<p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">বিন্যাসের</span> <span class="hps">জন্য ট্যাব</span> <span class="hps">ব্যবহার করেন ।</span> <span class="hps">কিছু মানুষ শুধুমাত্র</span> <span class="hps">ফাঁকা স্থান ব্যবহার</span><span> করেন।</span></span></p> +<h3 id="মন্তব্য"><span class="short_text" id="result_box" lang="bn"><span class="hps">মন্তব্য</span></span></h3> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">CSS এর মধ্যে</span> <span class="hps">মন্তব্য</span> <span class="hps">শুরু</span></span> <code>হয় /*</code> <span class="short_text" id="result_box" lang="bn"><span class="hps">এবং</span> <span class="hps">শেষ হয়</span></span> <code>*/</code> দিয়ে ।</p> +<p><span id="result_box" lang="bn"><span class="hps">আপনি <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> এ <span class="hps">প্রকৃত</span> <span class="hps">মন্তব্য</span> <span class="hps">করতে</span> <span class="hps">মন্তব্য ব্যবহার</span> <span class="hps">করতে পারেন, <span id="result_box" lang="bn"><span class="hps">এবং </span></span></span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">এছাড়াও</span> <span id="result_box" lang="bn"><span class="hps">সাময়িকভাবে</span> <span class="hps">উদ্দেশ্যে</span> <span class="hps">পরীক্ষার জন্য</span> </span><span class="hps"><span id="result_box" lang="bn"><span class="hps">একটা </span></span>অংশ</span> <span class="hps">মন্তব্য </span></span></span><span class="hps"> করতে</span> পারেন<span class="hps"> </span><span>।</span></span></p> +<p><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">স্টাইলশীট</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">মন্তব্য </span></span></span></span>অংশ</span> <span class="hps">আউট </span> <span class="hps">করার জন্য,</span></span></span><span> <span id="result_box" lang="bn"><span class="hps">সে অংশ</span></span> একটি</span> <span class="hps">একটি মন্তব্যে</span> <span class="hps">লিখুন <span id="result_box" lang="bn"><span>যাতে </span></span><span id="result_box" lang="bn"><span class="hps">ব্রাউজার এটি</span> <span class="hps">উপেক্ষা করে</span><span>। </span></span></span><span class="hps">আপনি <span id="result_box" lang="bn"><span class="hps">সতর্ক থাকুন </span></span><span id="result_box" lang="bn"><span class="hps">যেখানে</span></span> <span id="result_box" lang="bn"><span class="hps">মন্তব্য</span> <span class="hps"> </span></span>শুরু</span> <span class="hps">এবং </span><span class="hps">শেষ</span><span class="hps">।</span> <span id="result_box" lang="bn"><span class="hps">বাকি </span></span><span class="hps">স্টাইলশীট</span> এ <span class="hps">সঠিক স্যন</span></span><span lang="bn"><span class="hps">টেক্স</span> <span class="hps">থাকতে হবে।</span></span></p> +<div class="tuto_example"> + <div class="tuto_type"> + <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></div> + <pre class="brush: css">/* <span class="short_text" id="result_box" lang="bn"><span class="hps"><span class="short_text" id="result_box" lang="bn"><span class="hps">প্রথম</span> <span class="hps">অনুচ্ছেদে </span></span>প্রাথমিক</span> <span class="hps">অক্ষর C এর জন্য</span> <span class="hps">শৈলী </span></span> */ +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> +</div> +<h3 id="দলবদ্ধ_নির্বাচক"><span class="short_text" id="result_box" lang="bn"><span class="hps">দলবদ্ধ</span> <span class="hps">নির্বাচক</span></span></h3> +<p><span id="result_box" lang="bn"><span class="hps">যখন অনেক উপাদানের</span> <span class="hps">একই</span> <span class="hps">শৈলী</span> <span class="hps">থাকে, <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">আপনি </span></span>নির্বাচক</span> <span class="hps">একটি গ্রুপ</span> <span class="hps">উল্লেখ করে </span></span></span><span class="hps">কমা দিয়ে</span> <span class="hps">তাদের পৃথক<span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"> করতে পারেন</span></span></span>।</span></span> <span class="hps">ঘোষণা</span> <span class="hps">সমস্ত নির্বাচিত</span> <span class="hps">উপাদানের ক্ষেত্রে</span> <span class="hps">প্রযোজ্য।</span></span></p> +<p><span id="result_box" lang="bn"><span class="hps">অন্যত্র</span> <span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">আপনি আবার</span> <span class="hps">পৃথকভাবে</span> <span class="hps">একই</span> <span class="hps">নির্বাচক</span> <span class="hps">নির্দিষ্ট করতে পারেন</span>, <span class="hps">তাদের</span> <span class="hps">ব্যক্তিগত</span> <span class="hps">শৈলী নিয়ম</span> <span class="hps">প্রযোজ্য।</span></span></p> +<div class="tuto_example"> + <div class="tuto_type"> + <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></div> + <p><span class="short_text" id="result_box" lang="bn"><span class="hps">এই নিয়ম</span> </span> {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, এবং {{ HTMLElement("h3") }} <span class="short_text" id="result_box" lang="bn"><span class="hps">উপাদান</span> <span class="hps">একই রং</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">তৈরি করে</span></span>।</p> + <p><span class="short_text" id="result_box" lang="bn"><span class="hps"> শুধুমাত্র</span> <span class="hps">এক জায়গায়</span> <span class="hps">রঙ উল্লেখ</span> <span class="hps">করা সুবিধাজনক</span></span>,<span class="short_text" id="result_box" lang="bn"><span class="hps"> যদি না এটি</span> <span class="hps">পরিবর্তন করা</span> <span class="hps">হয়।</span></span></p> + <pre class="brush: css">/* color for headings */ +h1, h2, h3 {color: navy;} +</pre> +</div> +<h2 id="প্রক্রিয়া_মন্তব্য_যোগ_এবং_বিন্যাস_উন্নতি">প্রক্রিয়া: মন্তব্য যোগ এবং বিন্যাস উন্নতি</h2> +<ol> + <li>আপনার CSS ফাইল সম্পাদনা করুন, এবং এটি এই নিয়ম আছে কিনা তা নিশ্চিত করুন (in any order): + <pre class="brush: css">strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +#first {font-style: italic;} +p {color: blue;} +</pre> + </li> + <li><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">এটি আরো</span> <span class="hps">পাঠযোগ্য</span> <span class="hps">করুন <span id="result_box" lang="bn"><span class="hps">সাজানোর দ্বারা এমন <span id="result_box" lang="bn"><span class="hps">একটি উপায়ে </span></span></span></span></span></span><span id="result_box" lang="bn"><span class="hps">যে</span>ন <span id="result_box" lang="bn"><span class="hps">এটি</span></span> </span>আপনি যৌক্তিক</span> <span class="hps">খুঁজে</span> পান </span>, এবং <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">হোয়াইটস্পেস</span> <span class="hps">এবং মন্তব্য</span> <span class="hps">যুক্ত করে </span></span>যাই হোক না কেন</span> <span class="hps">যে উপায়</span> <span class="hps">আপনি</span> <span class="hps">সেরা</span> <span class="hps">মনে </span></span>করেন।</li> + <li><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span>আপনার ব্রাউজারে</span> <span class="hps">প্রদর্শন</span> <span class="hps">ফাইল সংরক্ষণ করুন</span> <span class="hps">এবং রিফ্রেশ করুন,</span></span>নিশ্চিত করুন যে </span></span>স্টাইলশীট</span> যে<span class="hps">ভাবে কাজ করে</span> <span class="hps">আপনার</span> <span class="hps">পরিবর্তন</span> তাকে <span class="hps">প্রভাবিত না করেঃ </span></span> + <table style="border: 2px outset #36b; padding: 1em;"> + <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"> + <div class="tuto_type"> + চ্যালেঞ্জ</div> + <p><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">অংশের</span> <span class="hps">আউট মন্তব্য</span></span>,<span id="result_box" lang="bn"> <span class="hps">অন্য কিছু</span> <span class="hps">পরিবর্তন ছাড়া</span></span>,<span id="result_box" lang="bn"><span class="hps"> আপনার নথির</span> <span class="hps">খুব প্রথম</span> <span class="hps">অক্ষর <span id="result_box" lang="bn"><span class="hps">লাল</span></span></span> <span class="hps">করা,</span></span></p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: red;">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> + <p>(<span class="short_text" id="result_box" lang="bn"><span class="hps">এই কাজ করতে</span> <span class="hps">একাধিক</span> <span class="hps">উপায় আছে </span></span>।)</p> + <div class="tuto_details" id="tutochallenge"> + <div class="tuto_type"> + Possible solution</div> + One way to do this is to put comment delimiters around the rule for <code>.carrot</code>: + <pre class="brush: css">/*.carrot { + color: orange; +}*/</pre> + <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="What_next">What next?</h2> +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">specify the appearance of text</a> in your document<strong>.</strong></p> diff --git a/files/bn/web/css/getting_started/text_styles/index.html b/files/bn/web/css/getting_started/text_styles/index.html new file mode 100644 index 0000000000..2906e46215 --- /dev/null +++ b/files/bn/web/css/getting_started/text_styles/index.html @@ -0,0 +1,109 @@ +--- +title: টেক্সট স্টাইল +slug: Web/CSS/Getting_Started/Text_styles +tags: + - Beginer + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsLiveSample + - Web +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}<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> এর ৭ম টীউটোরিয়াল, এখানে টক্সট স্টাইল এর অনেক উদাহরণ দেয়া আছে। একাহে বর্ণনা করা হয়েছে কিভাবে আপনি আপনার নমুনা stylesheet এ বিভিন্ন ফন্ট ব্যাবহার করবেন।</span></p> +<h2 class="clearLeft" id="তথ্য_টেক্সট_স্টাইল">তথ্য: টেক্সট স্টাইল</h2> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">সিএসএস</span> <span class="hps">স্টাইলিং</span> <span class="hps">লেখার জন্য</span> <span class="hps">বিভিন্ন</span> <span class="hps">ধরণ আছে।</span></span></p> +<p>এখানে {{ cssxref("font") }}আপনি আপনার লেখার বিভিন্ন দিক উল্লেখ করতে পারবেন,—যেমন:</p> +<ul> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">বোল্ড,</span> <span class="hps">ইটালিক,</span> <span class="hps">এবং ছোট</span> <span class="hps">হাতের অক্ষর</span></span> (<span class="short_text" id="result_box" lang="bn"><span class="hps"> ছোট</span> <span class="hps">হাতের অক্ষর</span></span>)</li> + <li>আকার</li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">লাইন উচ্চতা</span></span></li> + <li>ফন্টের বিভিন্ন ধরণ</li> +</ul> +<div class="tuto_example"> + <pre class="brush:css">উদাহরণ +p {font: italic 75%/125% "Comic Sans MS", cursive;} +</pre> + <p>এই নিয়মে বিভিন্ন ফন্টের ধরণ দেয়া আছে, <span id="result_box" lang="bn"><span>প্রতিটি</span> <span class="hps">অনুচ্ছেদ</span> এর লেখা হবে ইতালিক ফরমে।</span></p> + <p><span id="result_box" lang="bn"><span>প্রতিটি</span> <span class="hps">অনুচ্ছেদ</span> <span class="hps">এর মূল</span> <span class="hps">উপাদান</span> <span class="hps">আকার ফন্ট সাইজ <span id="result_box" lang="bn"><span class="hps">তিন চতুর্থাংশ</span> <span class="hps">সেট করা হয়েছে, <span id="result_box" lang="bn"><span>লাইন</span> <span class="hps">উচ্চতা</span> <span class="hps">১২৫%</span> <span class="hps">সেট করা হয়েছে।</span></span> </span></span></span></span>(<span id="result_box" lang="bn"><span>স্বাভাবিক তুলনায়</span> <span class="hps">একটু বেশি</span> <span class="hps">ব্যবধানযুক্ত</span></span>)।</p> + <p>Comic Sans MS এ,কিছু ফন্ট আকার সেট করা থাকে কিন্তু যদি তা গ্রহণ যোগ্য না হয় তবে ব্রাউজার ডিফল্ট কারসিভ (hand-written) আকার ব্যাবহার করতে পারবে।</p> + <p><span id="result_box" lang="bn"><span class="hps">এই নিয়মে</span> <span class="hps">বোল্ড এবং</span> <span class="hps">ছোট</span> <span class="hps">হাতের অক্ষরের</span></span> <span id="result_box" lang="bn"><span class="hps">পার্শ্ব প্রতিক্রিয়া</span> <span class="hps">আছে:</span></span>(setting them to <code>normal</code>):</p> +</div> +<h3 id="ফন্টের_আকার">ফন্টের আকার</h3> +<p>আপনি ভবিষৎ বানী করতে পারবেনা আপনার ডকুমেন্টি কোন ধরনের পাঠক পাবে। সুতরাং আপনি একটি উল্লেখযোগ্য ফন্টের আকার দিতে পারেন, সব থেকে ভাল হয় যদি আপনি পছন্দ অনুযায়ী একটি ফন্টের তালিকা দেন।</p> +<p>একটি ডিফল্ট আকার দিয়ে লিস্টটি শেষ করুনঃ <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p> +<p>ডকুমেন্ট এ যদি কিছু ফন্ট আকার সমর্থন না করে তবে ব্রাউজার এ আপনি ফন্ট আকার প্রতিস্থাপন করতে পারেন। ডকুমেন্ট এ সমর্থন করে না এমন বিশেষ অক্ষর থাকতে পারে। যদি ব্রাউজার ঐই অক্ষরের কোন ফন্ট আকার খুজে পায় তবে আপনি সেটি ব্যাবহার করতে পারেন।</p> +<p>তার <span id="result_box" lang="bn"><span class="hps">নিজস্ব ফন্ট আকার উল্লেখ করার</span></span> {{ cssxref("font-family") }}এটি ব্যাবহার করুণ।</p> +<h3 id="ফন্টের_মাপ">ফন্টের মাপ</h3> +<p>ব্রাউজার ব্যাবহারকারি <span id="result_box" lang="bn"><span class="hps">পৃষ্ঠাটি পড়ার সময় ডিফল্ট ফন্টরে মার অথবা লেখার আকার পরিবর্তন করতে পারেন,তাই সবথেকে ভাল যদি আপনি একটি আপেক্ষিক মাপ ব্যাবহার করতে পারেন।</span></span></p> +<p><span id="result_box" lang="bn"><span class="hps">আপনি ফন্টের ভাল মাপের</span> <span class="hps">জন্য</span> <span class="hps">কিছু বিল্ট ইন</span> <span class="hps">মান ব্যবহার করতে পারেন,যেম্ন-বড়,ছোট এবং মাঝারি</span></span>।<span class="_5yl5"><span class="null"> আপনি চাইলে ওই মান গুলো ব্যবহার করতে পারেন যেগুলো মূল উপাদানের ফন্টের আকারের সাথে সম্পর্কিত, যেমন ছোট বড় , ১৫০% অথবা ১.৫ em।<span class="_5yl5"><span class="null">একটি "em" হচ্ছে "m" অক্ষরের সমান প্রস্থের(মূল উপাদানের ফন্টের আকারের জন্য); এইভাবে ১.৫em হচ্ছে মূল উপাদানের এক এবং অর্ধ আকার।</span></span></span></span></p> +<p>প্রয়োজনে আপনি একটি নিদ্রিষ্ট আকার , যেমন: <code>14px</code> (14 pixels) <span id="result_box" lang="bn"><span class="hps">ডিসপ্লে ডিভাইস</span> এর জন্য</span> অথবা 14pt (14 points) প্রিন্টারের জন্য নির্ধারণ করতে পারেন। <span id="result_box" lang="bn"><span class="hps">এটা</span> <span class="hps">তাদের পরিবর্তন</span> <span class="hps">করার অনুমতি দেয় না</span><span>, কারণ এইটা impaired ব্যাবহারকারিদের</span></span> জন্য <span id="result_box" lang="bn"><span class="hps">অ্যাক্সেসযোগ্য হয় না</span></span>। <span id="result_box" lang="bn"> <span class="hps">আরো ভাল</span> <span class="hps">কৌশল</span> <span class="hps">ডকুমেন্টের</span> <span class="hps">উপরের</span> <span class="hps">স্তরের</span> এবং <span class="hps">মাঝারিতে</span> <span class="hps">একটি বিল্ট-ইন</span> <span class="hps">মান সেট</span> <span class="hps">করা হয়,</span></span><span id="result_box" lang="bn"><span class="hps">এবং তারপর</span> <span class="hps">তার সমস্ত</span> <span class="hps">descendent</span> <span class="hps">উপাদানের জন্য</span> <span class="hps">আপেক্ষিক</span> <span class="hps">মাপ সেট করা হয়</span><span>।</span></span></p> +<p><span id="result_box" lang="bn"><span class="hps">তার নিজস্ব একটি</span> <span class="hps">ফন্ট সাইজ</span> <span class="hps">উল্লেখ করার জন্য</span></span> {{ cssxref("font-size") }}ব্যাবহার করুন।</p> +<h3 id="লাইনের_উচ্চতা"><span class="short_text" id="result_box" lang="bn"><span class="hps">লাইনের</span> <span class="hps">উচ্চতা</span></span></h3> +<p>লাইনের উচ্চতা ২টা লাইনের মধ্যকার স্পেস উল্লেখ করে। আপনার ডকুমেন্টে দীর্ঘ লাইনের অনুচ্ছেদ থাক্লে,বিশেষ করে ফন্টের রাকার যদি ছোট হয় তবে পড়ার সুবিধারতে স্বাভাবিকের থেকে একটু বড় স্পেস দিন।</p> +<p><span id="result_box" lang="bn"><span class="hps">তার নিজস্ব একটি</span> <span class="hps">লাইন উচ্চতা</span> <span class="hps">উল্লেখ করার জন্য</span></span>{{ cssxref("line-height") }} ব্যাবহার করুণ।</p> +<h3 id="সজ্জা"><span class="short_text" id="result_box" lang="bn"><span class="hps">সজ্জা</span></span></h3> +<p>{{ cssxref("text-decoration") }}<code> ব্যাবহার করে আপনি আন্দার-লাইন অথবা অনন্য ডেকোরেশন করতে পারেন।</code> <code>আপনি স্পষ্টভাবে</code> ডেকোরেশন অপসরণ করতেও এটি ব্যাবহার করতে পারেন।</p> +<h3 id="অন্যান্য_বৈশিষ্ট্য"><span class="short_text" id="result_box" lang="bn"><span class="hps">অন্যান্য</span> <span class="hps">বৈশিষ্ট্য</span></span></h3> +<p>Italic জন্য ব্যাবহার করুন {{ cssxref("font-style") }}<code>: italic;</code><br> + Bold জন্য ব্যাবহার করুন <code>{{ cssxref("font-weight") }}: bold;</code><br> + Small capitals জন্য ব্যাবহার করুন <code>{{ cssxref("font-variant") }}: small-caps;</code></p> +<p><span id="result_box" lang="bn"><span class="hps">পৃথকভাবে এই</span> গুলো <span class="hps">বন্ধ</span> <span class="hps">করার জন্য, আপনি</span> <span class="hps">স্বাভাবিক</span> <span class="hps">মান</span> <span class="hps">সুনির্দিষ্টভাবে উল্লেখ করুন</span></span>।</p> +<div class="tuto_details"> + <div class="tuto_type"> + <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো বিস্তারিত</span></span></div> + <p><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">অন্য কোন উপায়ে</span>ও <span class="hps">বিভিন্ন</span> <span class="hps">টেক্সট স্টাইল</span> <span class="hps">নির্দিষ্ট করতে পারেন।</span></span></p> + <p><span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ, এখানে</span> <span class="hps">উল্লিখিত</span> <span class="hps">অন্য কিছু</span> মান আছে যা <span class="hps">আপনি ব্যবহার করতে পারেন</span>।</span></p> + <p>একটি জটিল স্টাইলশীট,shorthand <code>font</code> property এড়িয়ে চলে কারণ তার কিছু <span id="result_box" lang="bn"><span class="hps">পার্শ্ব প্রতিক্রিয়া আছে</span></span> (resetting other individual properties)।</p> + <p>আরো তথ্যের জন্য <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in the CSS Specification দেখতে পারেন। টেক্সট ডেকোরেশন এর আরো তথ্যের জন্য দেখুন <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>।</p> + <p><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">ব্যবহারকারীদের সিস্টেমে</span> <span class="hps">ইনস্টল</span> <span class="hps">আকারেরউপর নির্ভর</span> <span class="hps">করতে না ছাইলে</span><span>, আপনি</span> <span class="hps">ব্যবহার করতে পারেন</span></span>{{ cssxref("@font-face") }}এটি একটি অনলাইন ফন্ট উল্লেখ করে। যদিও এই নিয়ম সমর্থন করে ব্যাবহারকারিদের এমন একটি ব্রাউজার থাকা প্রয়োজন।</p> +</div> +<h2 id="কর্ম_উল্লেখ_ফন্ট"><span class="short_text" id="result_box" lang="bn"><span class="hps">কর্ম:</span> <span class="hps">উল্লেখ</span> <span class="hps">ফন্ট</span></span></h2> +<p>একটি সহজ ডকুমেন্ট এর জন্য {{ HTMLElement("body") }} তে আপনি ফন্ট এবং ডকুমেন্ট এর বাকি সেটিংস সেট করতে পারেন।</p> +<ol> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">সিএসএস ফাইল</span> <span class="hps">সম্পাদনা করুন.</span></span></li> + <li><span lang="bn"><span class="hps">ডকুমেন্ট জুড়ে</span> <span class="hps">ফন্ট পরিবর্তন করতে</span> <span class="hps">নিম্নলিখিত</span> <span class="hps">নিয়ম</span> <span class="hps">যোগ করুন.</span></span> <span id="result_box" lang="bn"><span class="hps">সিএসএস</span> <span class="hps">ফাইল উপরে</span> <span class="hps">এটি একটি</span> <span class="hps">লজিক্যাল</span> <span class="hps">জায়গা</span><span>, কিন্তু আপনি যখন এখানে রাখবেন সেখানেও তার</span> <span class="hps">একই প্রভাব</span> পরবে<span class="hps">:</span></span> + <pre class="eval">body {font: 16px "Comic Sans MS", cursive;} +</pre> + </li> + <li><span class="_5yl5"><span class="null">একটি মন্তব্য যোগ করুন যেটি নিয়ম ব্যাখ্যা করে এবং একটি স্পেস দিন যাতে করে আপনার পছন্দের বিন্যাসের সাথে এটি মিলে যায়।</span></span></li> + <li><span id="result_box" lang="bn"><span class="hps">ফাইল সংরক্ষণ করুন</span> <span class="hps">এবং ফলাফল</span> <span class="hps">দেখতে আপনার ব্রাউজার</span> <span class="hps">রিফ্রেশ করুন।</span></span> যদি আপনার Comic Sans MS এ থাকা আকার অথবা হাতে লেখা itlic আকার সমর্থন না করে ,তবে আপনার ব্রাউজার অন্নক্স কোন আকার পছন্দ করতে পারেঃ<br> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; 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>ব্রাউজার মেনুবার, <strong>View > Text Size > Increase</strong> (or <strong>View > Zoom > Zoom In</strong>) পছন্দ করতে পারে। <span id="result_box" lang="bn"><span class="hps">আপনি স্টাইল টি</span> <span class="hps">16</span> <span class="hps">পিক্সেল</span> <span class="hps">উল্লেখ</span> <span class="hps">যদিও</span><span>, ডকুমেন্ট</span> <span class="hps">পড়া</span> <span class="hps">একটি ব্যবহারকারী</span> <span class="hps">মাপ পরিবর্তন করতে পারেন</span></span>।</li> +</ol> +<div class="tuto_example"> + Challenge + <p>Without changing anything else, make all six initial letters twice the size in the browser's default serif font:</p> + <table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> + </table> + <div class="tuto_details" id="tutochallenge"> + <div class="tuto_type"> + Possible solution</div> + <p>Add the following style declaration to the <code>strong</code> rule:</p> + <pre class="brush: css"> font: 200% serif; +</pre> + If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. + <p> </p> + <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> +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}<span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="hps">ডকুমেন্ট</span> <span class="hps">ইতিমধ্যে</span> <span class="hps">বিভিন্ন</span> <span class="hps">নামে</span> <span class="hps">রং ব্যবহার করতে সক্ষম.</span></span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Color">The next section</a> দেয়া আছে রং এর তালিকা এবং কিভাবে আপনি রং প্রয়োগ করবেন।</p> diff --git a/files/bn/web/css/getting_started/why_use_css/index.html b/files/bn/web/css/getting_started/why_use_css/index.html new file mode 100644 index 0000000000..2fb9df45a8 --- /dev/null +++ b/files/bn/web/css/getting_started/why_use_css/index.html @@ -0,0 +1,103 @@ +--- +title: কেন CSS ব্যবহার করবেন ? +slug: Web/CSS/Getting_Started/Why_use_CSS +tags: + - NeedsReview +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/bn-BD/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}<span class="seoSummary"><span class="seoSummary">এটি <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> <span id="result_box" lang="bn"><span class="alt-edited hps">টিউটোরিয়ালের <span id="result_box" lang="bn"><span class="hps">দ্বিতীয়</span> <span class="alt-edited hps">অধ্যায়</span></span></span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">এবং ব্যাখ্যা করে কেন</span></span></span><span id="result_box" lang="bn"><span class="alt-edited hps"> ডকুমেন্ট</span> <span class="alt-edited hps">CSS</span> <span class="alt-edited hps">ব্যবহার করে।</span></span> আপনি CSS ব্যবহার করেন <span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">একটি</span> <span class="hps">স্টাইলশীট</span> <span class="hps">যুক্ত করতে।</span></span></span></p> + +<h2 class="clearLeft" id="তথ্য_CSS_কেন_ব্যবহার_করব">তথ্য: CSS কেন ব্যবহার করব ?</h2> + +<p>CSS <span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="alt-edited hps">ডকুমেন্টের</span> <span class="hps">তথ্য</span> <span class="alt-edited hps">সামগ্রী</span></span> সেটি কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শিত হবে তার <span id="result_box" lang="bn"><span class="hps">বিবরণ</span> <span class="hps">থেকে পৃথক রাখতে <span id="result_box" lang="bn"><span class="hps">সাহায্য করে। <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট </span></span></span></span></span></span></span></span>কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শিত হবে তার <span id="result_box" lang="bn"><span class="hps">বিবরণ <span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল</span> <span class="hps">হিসাবে পরিচিত। </span></span></span></span></span></span><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="alt-edited hps">কন্টেন্ট</span> <span class="hps">থেকে </span></span><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল </span></span></span></span></span></span>আলাদা রাখুন <span id="result_box" lang="bn"><span>যাতে আপনি পারেন </span></span>:</p> + +<ul> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">অনুলিপি</span> <span class="alt-edited hps">এড়াতে</span></span></li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">রক্ষণাবেক্ষণ</span> <span class="hps">সহজ</span> <span class="alt-edited hps">করে তুলতে</span></span></li> + <li><span id="result_box" lang="bn"><span class="alt-edited hps">বিভিন্ন উদ্দেশ্যে</span> <span class="hps">বিভিন্ন </span>স্টাইল এর <span class="hps">সঙ্গে একই</span> <span class="alt-edited hps">কন্টেন্ট</span> <span class="hps">ব্যবহার করতে</span></span></li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">উদাহরণ</div> + +<p><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">ওয়েব</span> <span class="hps">সাইটের <span id="result_box" lang="bn"><span class="hps">হাজার হাজার</span> <span id="result_box" lang="bn"><span class="hps">পৃষ্ঠা </span></span><span class="hps">থাকতে পারে</span></span></span></span> যারা <span id="result_box" lang="bn"><span class="alt-edited hps">অনুরূপ। <span id="result_box" lang="bn"><span class="hps">CSS এর</span> <span class="hps">ব্যবহার করে,<span id="result_box" lang="bn"><span class="alt-edited hps">আপনি একটি <span id="result_box" lang="bn"><span class="hps">সাধারণ</span> <span class="hps">ফাইলের মধ্যে</span> <span id="result_box" lang="bn"><span class="hps">তথ্য সংরক্ষণ করুন <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps">যা</span> </span></span></span></span></span></span></span></span></span></span>সকল পৃষ্ঠা</span> <span class="alt-edited hps">শেয়ার</span> </span></span></span></span></span></span></span></span></span></span>করে।</p> + +<p>যখন একজন ব্যবহারকারী একটি ওয়েব পেইজ <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শন করে,<span id="result_box" lang="bn"><span class="hps">ব্যবহারকারীর</span> <span class="hps">ব্রাউজার</span> <span class="hps">পৃষ্ঠার</span> <span class="hps">কন্টেন্টের</span> <span class="alt-edited hps">পাশাপাশি</span> <span class="alt-edited hps">স্টাইলের</span> <span class="hps">তথ্য</span> <span class="hps">লোড করে।</span></span></span></span></p> + +<p><span id="result_box" lang="bn"><span class="hps">যখন একজন ব্যবহারকারী</span> <span class="hps">একটি</span> <span class="hps">ওয়েব পেজ</span> <span class="alt-edited hps">প্রিন্ট করে</span><span>, আপনি</span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">বিভিন্ন</span> <span class="alt-edited hps">স্টাইলের</span> <span class="hps">তথ্য প্রদান করেন যা <span id="result_box" lang="bn"><span class="hps">মুদ্রিত</span> <span class="alt-edited hps">পৃষ্ঠা <span id="result_box" lang="bn"><span class="hps">পড়তে <span id="result_box" lang="bn"><span class="hps">সহজ করে তোলে।</span></span></span></span></span></span></span></span></p> +</div> + +<p><span id="result_box" lang="bn">HTML <span class="hps">দিয়ে</span> <span class="hps">সাধারণত </span><span class="hps">আপনি <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্টের</span> <span class="hps">তথ্য</span> <span class="alt-edited hps">সামগ্রী<span id="result_box" lang="bn"><span class="alt-edited hps"> বর্ণনা করেন</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষা</span> <span class="hps">ব্যবহার</span></span></span></span></span></span> করে,<span id="result_box" lang="bn"><span class="hps">তার</span> <span class="alt-edited hps">স্টাইল নয়।</span></span>আপনি CSS ব্যবহার করেন এর স্টাইল <span id="result_box" lang="bn"><span class="hps">নির্দিষ্ট করতে,<span id="result_box" lang="bn"><span class="hps">এর বিষয়বস্তু নয়</span></span></span></span> ।(<span id="result_box" lang="bn"><span class="hps">পরবর্তীতে</span> <span class="alt-edited hps">এই টিউটোরিয়ালে</span><span>, আপনি এই</span> <span class="hps">ব্যবস্থার</span> <span class="hps">কিছু</span> <span class="hps">ব্যতিক্রম</span> <span class="hps">দেখতে পাবেন।</span></span>)</p> + +<div class="tuto_details"> +<div class="tuto_type"><span class="short_text" id="result_box" lang="bn"><span class="hps">আরো তথ্য</span></span></div> + +<p><span id="result_box" lang="bn"><span class="hps">এছাড়াও <span id="result_box" lang="bn"><span class="alt-edited hps">HTML এর</span> <span class="hps">মত</span> <span class="hps">একটি</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষা <span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল</span> <span class="hps">নির্দিষ্ট করতে</span> <span class="hps">কিছু উপায়</span> <span class="hps">প্রদান করে।</span></span></span></span></span></span></p> + +<p><span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ,</span> <span class="hps">HTML এ</span> <span class="hps">আপনি টেক্সট</span> <span class="hps">গাঢ়</span> <span class="hps">করতে একটি</span> <span class="hps"><b></span> <span class="hps">ট্যাগ</span> <span class="hps">ব্যবহার করতে পারেন</span><span>, <span id="result_box" lang="bn"><span>এবং আপনি</span> <span class="hps">তার</span> <span class="hps"><body></span> <span class="hps">ট্যাগ</span>ে <span class="hps">একটি</span> <span class="hps">পৃষ্ঠার</span> <span class="alt-edited hps">ব্যাকগ্রাউন্ড রং</span> <span class="hps">নির্ধারণ করতে পারবেন</span></span></span></span>।</p> + +<p>আপনি যখন CSS ব্যবহার করেন,<span id="result_box" lang="bn"><span class="hps">আপনি সাধারণত</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষার</span> <span class="alt-edited hps">এই বৈশিষ্ট্যগুলি</span> <span class="hps">ব্যবহার</span> <span class="hps">এড়িয়ে যান যাতে করে <span id="result_box" lang="bn"><span class="hps">আপনার সকল</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="alt-edited hps">এর স্টাইল</span> <span class="alt-edited hps">সংক্রান্ত তথ্য</span> <span class="hps">এক জায়গায়</span> <span class="hps">হয়।</span></span></span></span></p> +</div> + +<h2 id="অ্যাকশন_একটি_স্টাইলশীট_তৈরি"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">অ্যাকশন</span><span>:</span> <span class="hps">একটি</span> <span class="hps">স্টাইলশীট</span> <span class="hps">তৈরি</span></span></h2> + +<ol> + <li><span id="result_box" lang="bn"><span class="alt-edited hps">পূর্বের</span> মত <span class="hps">একই ডিরেক্টরির মধ্যে</span> <span class="hps">আরেকটি</span> <span class="hps">টেক্সট ফাইল</span> <span class="hps">তৈরি করুন।</span> <span class="alt-edited hps">এই</span> <span class="hps">ফাইলটি</span> <span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">হবে.</span> <span class="alt-edited hps">এটির</span> <span class="hps">নাম দিন </span></span>: <code>style1.css</code></li> + <li><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="alt-edited hps">CSS</span> <span class="hps">ফাইলের</span> <span class="hps">মধ্যে,</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">এই এক</span> <span class="hps">লাইন </span></span>কপি</span> <span class="hps">এবং </span><span class="hps">পেস্ট করুন</span><span>, তারপর</span> <span class="alt-edited hps">ফাইলটি সংরক্ষণ করুন</span></span>: + <pre class="brush: css">strong {color: red;} +</pre> + </li> +</ol> + +<h3 id="আপনার_ডকুমেন্টের_সাথে_স্টাইলশীট_যুক্তকরণ"><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="alt-edited hps">ডকুমেন্টের সাথে <span class="short_text" id="result_box" lang="bn"><span class="hps">স্টাইলশীট <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">যুক্তকরণ</span></span></span></span></span></span></h3> + +<ol> + <li><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট এর সাথে <span id="result_box" lang="bn"><span class="hps">আপনার </span></span></span></span><span class="hps">স্টাইলশীট</span> <span class="hps">সংযুক্ত করতে,<span id="result_box" lang="bn"><span>আপনার</span> <span class="hps">HTML ফাইল</span> <span class="hps">সম্পাদনা করুন।<span id="result_box" lang="bn"><span class="hps"> এখানে</span> <span class="hps">হাইলাইট করা লাইনটি <span id="result_box" lang="bn"><span class="hps">যোগ করুন</span></span></span></span></span></span></span></span>: + + <pre class="brush: html; highlight:[6];"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li><span id="result_box" lang="bn"><span class="hps">ফাইলটি</span> <span class="hps">সংরক্ষণ করুন</span> <span class="hps">এবং আপনার</span> <span class="hps">ব্রাউজারের</span> <span class="alt-edited hps">ডিসপ্লে</span> <span class="hps">রিফ্রেশ করুন। <span id="result_box" lang="bn"><span class="hps">স্টাইলশীটটি <span id="result_box" lang="bn"><span class="alt-edited hps">প্রথম</span> <span class="hps">অক্ষরগুলোকে</span> <span class="hps">লাল</span> <span class="hps">করে তোলে, এভাবে</span></span></span></span></span></span>: + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_example" id="challenge"> +<div class="tuto_type"><span class="short_text" id="result_box" lang="bn"><span class="hps">চ্যালেঞ্জ</span></span></div> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">লাল</span> <span class="hps">ছাড়াও,</span> <span class="alt-edited hps">CSS</span> <span class="hps">কিছু অন্যান্য</span> <span class="hps">রং </span></span>এর নাম প্রদান করে।</p> + +<p><span id="result_box" lang="bn"><span class="hps">রেফারেন্স না দেখে, <span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps">আরো </span></span></span><span id="result_box" lang="bn"><span class="hps">পাঁচটি</span> <span class="alt-edited hps">রঙের</span> <span class="hps">নাম</span> <span class="hps">খুঁজে বের করুন যা <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="alt-edited hps">এ কাজ করে।</span></span></span></span></span></span></p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> +<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="পরবর্তীতে_কি"><span class="short_text" id="result_box" lang="bn"><span class="hps">পরবর্তী</span></span><span class="short_text" id="result_box" lang="bn"><span>তে কি?</span></span></h2> + +<p>{{nextPage("/bn-BD/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}<span id="result_box" lang="bn"><span class="alt-edited hps">এখন আপনার</span> <span class="hps">একটি পৃথক</span> <span class="hps">স্টাইলশীট</span> এর <span class="alt-edited hps">সাথে যুক্ত</span> <span class="hps">একটি নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">আছে</span><span>,</span></span> আপনি প্রস্তুত জানতে <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">learn more</a> কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">আপনার ব্রাউজার</span> <span class="hps">তাদের</span> <span class="alt-edited hps">সমন্বয় করে যখন এটি <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট</span> <span class="alt-edited hps">প্রদর্শন করে।</span></span></span></span></p> diff --git a/files/bn/web/css/getting_started/নই/index.html b/files/bn/web/css/getting_started/নই/index.html new file mode 100644 index 0000000000..54e48ada6a --- /dev/null +++ b/files/bn/web/css/getting_started/নই/index.html @@ -0,0 +1,354 @@ +--- +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 +--- +<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/web/css/getting_started/লে-আউট/index.html b/files/bn/web/css/getting_started/লে-আউট/index.html new file mode 100644 index 0000000000..40292c7e7e --- /dev/null +++ b/files/bn/web/css/getting_started/লে-আউট/index.html @@ -0,0 +1,301 @@ +--- +title: Layout +slug: Web/CSS/Getting_Started/লে-আউট +tags: + - CSS + - CSS Float + - CSS Text Align + - CSS Unit + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsLiveSample + - NeedsUpdate + - Web + - needs review +translation_of: Learn/CSS/CSS_layout +--- +<p style="margin-left: 40px;">{{ CSSTutorialTOC() }}</p> +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}} <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS শুরু করা</a>র ১২তম অধ্যায় এটি; আপনার ডকুমেন্টের লে-আউট কীভাবে adjust করা যায় তা রয়েছে এখানে। আপনার নমুনা ডকুমেন্টের লে-আউট আপনি পরিবর্তন করতে পারেন।</p> +<h2 class="clearLeft" id="তথ্যঃ_লে-আউট">তথ্যঃ লে-আউট</h2> +<p>বিভিন্ন দৃশ্যমান প্রভাব বিশেষায়িত করার জন্য আপনি CSS ব্যবহার করতে পারেন যা আপনার ডকুমেন্টের লে-আউট পরিবর্তন করে। লে-আউট বিশেষায়িত করার কিছু পদ্ধতি বেশ অগ্রসর এবং সেগুলো এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।</p> +<p>আপনি যখন একাধিক ব্রাউজারে প্রায় একইরকম দৃশ্যমান লে-আউট ডিজাইন করেন, তবে তা আপনার স্টাইলশীট ব্রাউজারের ডিফল্ট স্টাইলশীট এবং লে-আউট ইঞ্জিনের সাথে যেভাবে interact করে তা বেশ জটিল হতে পারে। এটিও একটি অগ্রসরমান বিষয়, এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।</p> +<p>এই পেজে আপনার চেষ্টা করে দেখার জন্য কিছু সহজ কৌশল বর্ণনা করা আছে।</p> +<h3 id="ডকুমেন্ট_স্ট্রাকচার">ডকুমেন্ট স্ট্রাকচার</h3> +<p>আপনি যদি আপনার ডকুমেন্টের লে-আউট নিয়ন্ত্রণ করতে চান তবে আপনাকে এর স্ট্রাকচার পরিবর্তন করতে হতে পারে।</p> +<p>আপনার ডকুমেন্টের মার্কআপ ল্যাংগুয়েজের খুব সম্ভবত স্ট্রাকচার তৈরি করার জন্য general-purpose ট্যাগ আছে। যেমন ধরুনঃ HTMLএ আপনি স্ট্রাকচার তৈরির জন্য {{ HTMLElement("div") }} এলিমেন্ট ব্যবহার করতে পারেন।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>নমুনা ডকুমেন্টে, দ্বিতীয় শিরোনামের আওতায় সংখ্যায়িত প্যারাগ্রাফে নিজস্ব কোন কন্টেইনার নেই।</p> + <p>আপনার স্টাইলশীট প্যারাগ্রাফগুলোর চারদিকে বর্ডার টানতে পারে না, কারণ এই সেক্টরটি বিশেষায়িত করার জন্য কোন এলিমেন্ট নাই।</p> + <p>স্ট্রাকচারের এই সমস্যা সমাধানের জন্য, আপনি প্যারাগ্রাফের চারদিকে একটি {{ HTMLElement("div") }} ট্যাগ যোগ করতে পারেন। এই ট্যাগটি ,তাই এটি নির্দিষ্ট করা যেতে পারে একটি <code>id</code> অ্যাট্রিবিউট দিয়েঃ</p> + <pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> +<div id="numbered"> + <p>Lorem ipsum</p> + <p>Dolor sit</p> + <p>Amet consectetuer</p> + <p>Magna aliquam</p> + <p>Autem veleum</p> +</div> +</pre> + <p>এখন আপনার স্টাইলশীট দুটি লিস্টের চারদিকে বর্ডার দেওয়ার জন্য একটি রুল ব্যবহার করতে পারেঃ</p> + <pre class="brush:css">ul, #numbered { + border: 1em solid #69b; + padding-right:1em; +} +</pre> + <p>এরকম দেখতে পাওয়ার কথাঃ</p> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="সাইজ_ইউনিট">সাইজ ইউনিট</h3> +<p>এত দূর পর্যন্ত এই টিউটোরিয়ালে আপনি pixel (<code>px</code>)এ সাইজ নির্ধারণ করেছেন। কম্পিউটার স্ক্রিনের মত কিছু কিছু ডিসপ্লে ডিভাইসের ক্ষেত্রের জন্য এটি যথাযথ। কিন্তু ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করে তখন আপনার লে-আউটে সমস্যা দেখা দিতে পারে।</p> +<p>অধিকাংশ ক্ষেত্রেই শতকরা হিসাবে অথবা ems (<code>em</code>)এ সাইজ নির্দিষ্ট করে দেওয়াই ভাল। em হল nominally চলমান ফন্টের (একটি m এর প্রসস্ততা) সাইজ। ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করেন, আপনার লে-আউট নিজে পরিবর্তন থেকেই হয়ে যায়।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>এই টেক্সটের বামদিকের বর্ডারের সাইজ পিক্সেলে নির্ধারিত।</p> + <p>ডানদিকের বর্ডারের সাইজ ems দিয়ে নির্ধারিত।</p> + <p>আপনার ব্রাউজারে, ফন্ট পরিবর্তন করে দেখতে পারেন কীভাবে ডানদিকের বর্ডার adjusts হয় কিন্তু বাঁদিকের বর্ডার হয় নাঃ</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div style=""> + আমার আকার পুনঃনিরধারণ করুন</div> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + বিস্তারিত</div> + <p>অন্যান্য ডিভাইসের ক্ষেত্রে, অন্যান্য দৈর্ঘ্য একক প্রযোজ্য।</p> + <p>এই টিউটোরিয়ালের পরবর্তী পেজে এ সংক্রান্ত আরো তথ্য আছে।</p> + <p>মান ও একক সংক্রান্ত বিস্তারিত জানার জন্য, CSS Specificationএ আপনি see <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> ব্যবহার করতে পারেন।</p> +</div> +<h3 id="টেক্সট_লে-আউট">টেক্সট লে-আউট</h3> +<p>কোন এলিমেন্টের একাধিক কন্টেন্ট কীভাবে এক লাইনে নিয়ে আসা যায় তা দুইটি প্রপার্টি দিয়ে নির্ধারিত হয়। সাধারণ লে-আউট adjustment এর জন্য আপনি সেগুলো ব্যবহার করতে পারেনঃ</p> +<dl> + <dt> + {{ cssxref("text-align") }}</dt> + <dd> + কন্টেন্ট এক লাইনে নিয়ে আসা। এই ভেল্যুগুলোর যেকোনটি ব্যবহার করেঃ <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd> + <dt> + {{ cssxref("text-indent") }}</dt> + <dd> + আপনার নির্ধারিত পরিমাণ অনুসারে কন্টেন্ট ইনডেন্ট করেঃ</dd> +</dl> +<p>শুধুমাত্র লেখাতেই না কোন এলিমেন্টের লেখা সদৃশ যেকোন কনটেন্টে এই প্রপার্টিগুলো প্রয়োগ করা যেতে পারে। খেয়াল রাখবেন, এগুলো এলিমেন্টের children দিয়ে inherited, তাই অবান্তর ফলাফল এড়াতে আপনাকে খুব সম্ভবত childrenএ সেগুলো বন্ধ করে নেওয়ার প্রয়োজন হতে পারে।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>শিরোনাম মাঝে আনতেঃ</p> + <pre class="brush:css">h3 { + border-top: 1px solid gray; + text-align: center; +} +</pre> + <p>ফলাফলঃ</p> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> + </td> + </tr> + </tbody> + </table> + <p>যে কোন HTML ডকুমেন্টে, শিরোনামের নিচে আপনি যে কনটেন্ট দেখেন তা গঠনগত ভাবে শিরোনামের আওতাধীন নয়। তাই আপনি যখন এরক্ম কোন শিরোনামকে এক লাইনে নিয়ে আসেন, তখন শিরোনামের নিচের ট্যাগগুলো ওই স্টাইলের অন্তর্ভুক্ত হয় না।</p> +</div> +<h3 id="Floats">Floats</h3> +<p>{{ cssxref("float") }} প্রপার্টি কোন এলিমেন্টকে ডানে-বামে সরায়। এলিমেন্টের অবস্থান ও আকার নির্ধারণের জন্য এটি একটি সহজ উপায়।</p> +<p>ডকুমেন্ট কনটেন্টের বাকি অংশ সাধারণত floated এলিমেন্টের চারদিকেই থাকে। অন্যান্য এলিমেন্টগুলোতে {{ cssxref("clear") }} প্রপার্টি ব্যবহার করে আপনি তাদের ফ্লট এর বাইরে থাকা নিয়ন্ত্রণ করতে পারেন।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>আপনার নমুনা ডকুমেন্টে, লিস্ট উইন্ডোতে ছড়িয়ে থাতে পারে। সেগুলোকে বাঁদিকে সরিয়ে আপনি তা রোধ করতে পারেন।</p> + <p>শিরোনামগুলোকে সঠিক স্থানে রাখার জন্য, আপনাকে অবশ্যই এটি নির্দিষ্ট করে দিতে হবে যেন সেগুলো ফ্লট মুক্ত থাকেঃ</p> + <pre class="brush:css">ul, #numbered {float: left;} +h3 {clear: left;} +</pre> +</div> +<p>এমন দেখতে পাওয়ার কথাঃ</p> +<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> +<p>(বক্সের ডানদিকে সামান্য padding দরকার, সেখানে বর্ডার লেখার খুবই কাছে হয়ে গিয়েছে।)</p> +<h3 id="অবস্থান_নির্ধারণ">অবস্থান নির্ধারণ</h3> +<p>চারটি উপায়ে আপনি কোন এলিমেন্টের অবস্থান নির্ধারণ করতে পারেন {{ cssxref("position") }} প্রপার্টি এবং নিচের যেকোন একটি ভেল্যু নির্দিষ্ট করে।</p> +<p>এগুলো এডভান্সড প্রপার্টি। সহজভাবেও এগুলো ব্যবহার করা যায় — সেজন্যই এই বেসিক টিউটোরিয়ালে এ সম্পর্কে বলা হয়েছে। তবে কমপ্লেক্স লে-আউটের জন্য এগুলো ব্যবহার করা কিছুটা জটিল হতে পারে।</p> +<dl> + <dt> + <code>relative</code></dt> + <dd> + এলিমেন্টের স্বাভাবিক অবস্থানের আপেক্ষিক পরিবর্তন করা হয়। Use this to shift an element by a specified amount. You can sometimes use the element's margin to achieve the same effect.</dd> + <dt> + <code>fixed</code></dt> + <dd> + এক্ষেত্রে এলিমেন্টের অবস্থান নির্দিষ্ট। এলিমেন্টের অবস্থান ডকুমেন্ট উইন্ডো অনুযায়ী নির্ধারণ করুন। বাকি ডেকুমেন্ট স্ক্রল করলেও এ ক্ষেত্রে এলিমেন্টটি স্থির থাকবে।</dd> + <dt> + <code>absolute</code></dt> + <dd> + parent এলিমেন্টের তুলনায় এলিমেন্টের অবস্থান স্থির থাকবে। শুধুমাত্র একটি parent যার নিজের অবস্থান <code>relative</code>, <code>fixed</code> অথবা <code>absolute</code> দিয়ে নির্ধারিত সেটি কাজ করবে। <code>position: relative নির্দিষ্ট করে আপনি যেকোন </code>parent<code> এলিমেন্টকেই এর জন্য প্রস্তুত করে নিতে পারেন;</code> এর জন্য কোন শিফট ব্যবহার না করেই।</dd> + <dt> + <code>static</code></dt> + <dd> + ডিফল্ট। অবস্থান নির্ধারণ করা সম্পূর্ণ বন্ধ করার প্রয়োজন হলে এই ভেল্যুটি ব্যবহার করুন।</dd> +</dl> +<p><code>position</code> প্রপার্টির এই ভেল্যুগুলোর সাথে সাথে (<code>static ব্যতীত</code>), আরো কিছু প্রপার্টি নির্দিষ্ট করুনঃ <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code>। আপনি কোথায় আপনার এলিমেন্টটি দেখতে পেতে চান তা এগুলো নির্দেশ করে এবং এর সাথে সাথে আকারও।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>দুইটি এলিমেন্ট একে অপরের উপর অবস্থাআন দেওয়ার জন্য, আপনার ডকুমেন্টের ভেতরে দুইটি এলিমেন্টসহ একটি parent কন্টেইনার তৈরি করুনঃ</p> + <pre class="brush:html"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</pre> + <p>আপনার স্টাইলশীটে, parents এর অবস্থান <code>relative</code> করুন। এখানে কোন প্রকৃত শিফট নির্ধারণের কোন প্রয়োজন নেই। children এর অবস্থান <code>absolute</code> নির্ধারণ করুনঃ</p> + <pre class="brush:css">#parent-div { + position: relative; + font: bold 200% sans-serif; +} + +#forward, #back { + position: absolute; + margin:0px; /* no margin around the elements */ + top: 0px; /* distance from top */ + left: 0px; /* distance from left */ +} + +#forward { + color: blue; +} + +#back { + color: red; +} +</pre> + <p>ফলাফলে ফরওয়ার্ড শ্ল্যাশের উপরে ব্যাকশ্ল্যাশ দিয়ে এমনটি দেখতে পাওয়ার কথাঃ</p> + <div style="position: relative; left: .33em; font: bold 300% sans-serif;"> + <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> + <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> + </div> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + আরো বিস্তারিত</div> + <p>অবস্থান নির্ধারণের পুরো বিষয়টির উপর CSS Specificationএ দুইটি জটিল অধ্যায় আছেঃ <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> এবং <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.</p> + <p>আপনি যদি একাধিক ব্রাউজারে কার্যকর কোন স্টাইলশীট ডিজাইন করতে থাকেন, তবে আপনারও তা অ্যাকাউন্ট ডিফারেন্সে নেওয়ার দরকার হতে পারে, যেভাবে ব্রাউজার স্ট্যান্ডার্ডের সাথে interpret করে এবং খুব সম্ভবত নির্দিষ্ট কিছু ব্রাউজারের বিশেষ কিছু ভার্সনে বাগ করতে পারে।</p> +</div> +<h2 id="Action_লে-আউট_নির্ধারণ">Action: লে-আউট নির্ধারণ</h2> +<ol> + <li>আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, <code>doc2.html</code> এবং স্টাইলশীট, <code>style2.css</code>, এই অংশে উপরের উদাহরণ <a href="#Document_structure" title="#Document structure"><strong>ডকুমেন্ট স্ট্রাকচার</strong></a> এবং <a href="#Floats" title="#Floats"><strong>ফ্লটস</strong></a>।</li> + <li><a href="#Floats" title="#Floats"><strong>ফ্লটস</strong></a> উদাহরণে, আপনার padding যুক্ত করুন ডানদিকের বর্ডার থেকে টেক্সট 0.5 em দূরে সরানোর জন্য।</li> +</ol> +<div class="tuto_example"> + <div class="tuto_type"> + চ্যালেঞ্জ</div> + <p>আপনার<strong> </strong>নমুনা ডকুমেন্ট পরিবর্তন করুন, <code>doc2.html</code>, শেষ করার আগ দিয়ে এই ট্যাগটি যুক্ত করে, <code></body> ট্যাগের </code>ঠিক আ<code>গে।</code></p> + <pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> + <p>এই টিউটোরিয়ালে আপনি যদি ইমেজ ফাইলটি আগে থেকে ডাউনলোড না করে থাকেন, তবে এখন সেটি ডাউনলোড করে নিন এবং <code>নমুনা ফাইলের মত </code>একই ডিরেক্টরিতে এটি রাখুনঃ</p> + <table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> + </tr> + </tbody> + </table> + <p>আপনার ডকুমেন্টের কোথায় ইমেজটি দেখা যেতে ঠিক করে নিন। এবার আপনার ব্রাউজার রিফ্রেশ করুন আপনার কাজ সঠিক হয়েছে কিনা তা দেখার জন্য।</p> + <p>আপনার স্টাইলশীটে একটি রুল যুক্ত করুন যা আপনার ডকুমেন্টে উপরের দিকে ডানে ইমেজটি রাখে।</p> + <p>আপ্নার ব্রাউজার রিফ্রেশ করে উইন্ডোটি ছোট করুন। যখন আপনি আপনার ডকুমেন্ট স্ক্রল করেন তখন দেখুন ইমেজটি উপরের দিকে ডানে থাকে কিনাঃ</p> + <div style="position: relative; width: 29.5em; height: 18em;"> + <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </div> + <p style=""> </p> + <div style="position: absolute; top: 2px; right: 0px;"> + <img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div> + </div> + </div> +</div> +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> এই চ্যালেঞ্জটির একটি সমাধান দেখুন।</a></p> +<h2 id="এর_পরে">এর পরে?</h2> +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }} এইমাত্র আপনি এই বেসিক CSS টিউটোরিয়ালের সব টপিক প্রায় শেষ করে ফেলেছেন। পরবর্তী পেজটি CSS রুলের আরো অ্যাডভান্সড সিলেক্টর বর্ণনা করে এবং আরো কিছু নির্দিষ্ট উপায় যা দিয়ে আপনি <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables">টেবিল</a> স্টাইল করতে পারেন।</p> |