aboutsummaryrefslogtreecommitdiff
path: root/files/bn/web/css/getting_started/readable_css
diff options
context:
space:
mode:
Diffstat (limited to 'files/bn/web/css/getting_started/readable_css')
-rw-r--r--files/bn/web/css/getting_started/readable_css/index.html132
1 files changed, 132 insertions, 0 deletions
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>