aboutsummaryrefslogtreecommitdiff
path: root/files/bn/learn/css/howto
diff options
context:
space:
mode:
Diffstat (limited to 'files/bn/learn/css/howto')
-rw-r--r--files/bn/learn/css/howto/generated_content/index.html133
-rw-r--r--files/bn/learn/css/howto/index.html88
2 files changed, 0 insertions, 221 deletions
diff --git a/files/bn/learn/css/howto/generated_content/index.html b/files/bn/learn/css/howto/generated_content/index.html
deleted file mode 100644
index 90cef28d3b..0000000000
--- a/files/bn/learn/css/howto/generated_content/index.html
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: বিষয়বস্তু
-slug: Learn/CSS/Howto/Generated_content
-tags:
- - Basic
- - Beginner
- - CSS
- - CSS Backgraound
- - 'CSS:Getting_Started'
- - Guide
- - NeedsLiveSample
- - NeedsUpdate
- - Web
-translation_of: Learn/CSS/Howto/Generated_content
----
-<p>{{ CSSTutorialTOC() }}</p>
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}<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> টিউটোরিয়ালের ৯ম বিভাগ; এখানে বর্ণনা করা হয়েছে কিভাবে আপনি CSS ব্যাবহার করে একটি ডকুমেন্টে বিষয়বস্তু যোগ করবেন। <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></p>
-<h2 class="clearLeft" id="তথ্য_বিষয়বস্তু">তথ্য: বিষয়বস্তু</h2>
-<p>CSS এর <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 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 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></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> <span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ, আপনি হয়ত</span><span class="hps"> স্টাইলশীটে আপনার ডকুমেন্টে থাকা বিভিন্ন ভাষা শেয়ার করেছেন। যদি স্টাইলশিট এর অংশ অনুবাদ করতে হয়, এর মানে হল যে আপনাকে অবশ্যই স্টাইলশিট এর সে অংশগুলো আলাদা আলাদা ফাইল এ রাখতে হবে এবং আপনার ডকুমেন্ট এর সঠিক ভাষা সংস্করণের সাথে তাদের সংযুক্ত করার ব্যবস্থা করতে হবে।</span></span></p>
- <p>এই জটিলতাগুলো হয় না যদি আপনি চিহ্ন অথবা ছবি বা ইমেজ সমৃদ্ধ বিষয়বস্তু নির্দিষ্ট করেন যেটি সকল ভাষা এবং সংস্কৃতিতে প্রয়োগ করা যায়।</p>
- <p><span id="result_box" lang="bn"><span class="hps">একটি স্টাইলশীট</span> <span class="hps">নির্দিষ্ট</span> <span class="hps">বিষয়বস্তু</span> <span class="hps">DOM এর</span> <span class="hps">অংশ</span> </span>নয়।</p>
-</div>
-<h3 id="টেক্সট_কন্টেন্ট"><span class="short_text" id="result_box" lang="bn"><span class="hps">টেক্সট কন্টেন্ট</span></span></h3>
-<div class="almost_half_cell" id="gt-res-content">
- <div dir="ltr" style="zoom: 1;">
- <span id="result_box" lang="bn"><span class="hps">একটি উপাদান</span> আগে বা <span class="hps">পরে আপনি CSS</span> <span class="hps">টেক্সট কন্টেন্ট</span> <span class="hps">সন্নিবেশ করতে পারেন</span></span>। কিভাবে আপনি কন্টেন্টি  {{ cssxref("::before") }} অথবা {{ cssxref("::after") }} যোগ করবেন তার একটি<span class="short_text" id="result_box" lang="bn"><span class="hps"> নির্দিষ্ট</span></span> নিয়ম selector এ দেয়া আছে। <span id="result_box" lang="bn"><span class="hps">টেক্সট কন্টেন্ট <span class="short_text" id="result_box" lang="bn"><span class="hps">নির্দিষ্ট মান</span></span></span> </span> {{ cssxref("content") }} প্রোপার্টির সাথে উল্লেখ করুন।</div>
-</div>
-<div class="tuto_example">
- <div class="tuto_type">
- উদাহরণ</div>
- <p>এই নিয়মে টেক্সট এ যোগ করুণ <span style="font-weight: bold; color: navy;">Reference :</span> before every element with the class <code>ref</code>:</p>
- <pre class="brush:css">.ref:before {
- font-weight: bold;
- color: navy;
- content: "Reference: ";
-}
-</pre>
-</div>
-<div class="tuto_details">
- <div class="tuto_type">
- আরো বিস্তারিত</div>
- <p>একটি স্টাইলশিট এর অক্ষরের সেট ডিফল্ট রুপে UTF-8 থাকে, কিন্তু এটা সংযুক্ত করে নির্দিষ্ট করা যায় অথবা স্টাইলশিট এটা নিজে অথবা আরও বিভিন্ন উপায়ে। আরও বিস্তারিত জানার জন্য দেখুন <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> CSS নির্দিষ্টকরণ।</p>
- <p>আলাদা অক্ষরগুলোও escape প্রক্রিয়ায় নির্দিষ্ট করা যায় যেটি backslash ব্যবহার করে escape অক্ষর বা চিহ্ন হিসেবে। উদাহরণস্বরূপ, \265B হচ্ছে দাবার black queen ♛ এর প্রতীক। আরও বিস্তারিত জানার জন্য দেখুন,  <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a> এবং <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> CSS নির্দিষ্টকরণে ।</p>
-</div>
-<h3 id="ইমেজ_বা_ছবি_বিষয়বস্তু">ইমেজ বা ছবি বিষয়বস্তু</h3>
-<p>একটি উপাদানের আগে বা পরে ছবি সংযুক্ত করার জন্য, আপনি ছবিটির URL  এই{{ cssxref("content") }} প্রপার্টি এর মানের মাঝে বসাবেন।</p>
-<div class="tuto_example">
- <p><strong>উদাহরণ</strong><br>
- এই নিয়মটি <span style="line-height: 1.5;">প্রতিটি link এর পরে</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">একটি space দেয় এবং একটি icon যোগ করে  যেটিতে class </span><code style="font-style: normal; line-height: 1.5;">glossary আছে</code><span style="line-height: 1.5;">:</span></p>
- <pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");}
-</pre>
-</div>
-<p>কোন উপাদানের background এ ছবি বা ইমেজ সংযুক্ত করার জন্য, কোন একটি ছবি বা ইমেজ এর URL {{ cssxref("background") }} প্রপার্টি এর মানের মাঝে নির্দিষ্ট করুন।এটি একটি shorthand প্রপার্টি যেটি background color, ছবি, কিভাবে ছবি এবং অন্যান্য বিস্তারিত নির্দিষ্টকরণে সহায়তা করে।</p>
-<div class="tuto_example">
- <div class="tuto_type">
- উদাহরণ</div>
- <p>এই নিয়মটি একটি নির্দিষ্ট উপাদানের background সেট করে, URL ব্যবহার করে image file উল্লেখ করে।</p>
- <p>selector কোন উপাদানের id উল্লেখ করে। <code>no-repeat মানটি </code>image কে একবার দেখাতে সাহায্য করে :</p>
- <pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
-</pre>
-</div>
-<div class="tuto_details">
- <div class="tuto_type">
- আরও বিস্তারিত</div>
- <p>আলাদা আলাদা প্রপার্টিজ affecting backgrounds এবং অন্যান্য options যখন আপনি background ইমেজ গুলো ঠিক করেন সেইসব তথ্য এর জন্য, দেখুন{ cssxref("background") }} রেফেরেন্স পৃষ্ঠা।</p>
-</div>
-<h2 id="Action_Adding_a_background_ইমেজ">Action: Adding a background ইমেজ</h2>
-<p>এ ইমেজ টি একটি সাদা বর্গ যেখানে এর নিচে একটি নীল লাইনে আছে :</p>
-<table style="border: 2px solid #ccc;">
- <tbody>
- <tr>
- <td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td>
- </tr>
- </tbody>
-</table>
-<ol>
- <li>ইমেজ ফাইল টি Download করুন CSS file এর মত একই পদ্ধতিতে। (উদাহরণস্বরূপ, ডান পাশের বাটন এ ক্লিক করুন context মেনুটির জন্য, তারপর Save Image As টি তে ক্লিক করুন এবং এই টিউটোরিয়াল এর জন্য যে পদ্ধতি টি ব্যবাহার করছেন সেটি উল্লেখ করুন।)</li>
- <li>আপনার CSS ফাইলটি সম্পাদন করুন এবং এই নিয়মটি body তে যোগ করুন , সম্পূর্ণ পৃষ্ঠার জন্য ব্যাকগ্রাউন্ড image যোগ করুন ।<br>
- <pre class="brush:css">background: url("Blue-rule.png");
-</pre>
- <p><code>repeat মান টি ডিফল্ট</code>, তাই একে কিছু করতে হবে না। ইমেজ বা ছবিটি বা অনূভুমিকপভাবে বা উলম্বভাবে পুনরাবৃত্তি হয় , যেটা রেখাযুক্ত লেখা কাগজের মত দেখায় :</p>
- <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
- <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
- <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
- <div style="font-style: italic; width: 24em;">
- <p><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</p>
- </div>
- <div style="font-style: normal; padding-top: 2px; height: 8em;">
- <p><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</p>
- </div>
- </div>
- </div>
- </li>
-</ol>
-<div class="tuto_example">
- <div class="tuto_type">
- চ্যালেঞ্জ</div>
- <p>এই ইমেজ টি ডাউনলোড করুন:</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>
- <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
- <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
- <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
- <div style="font-style: italic; width: 24em; padding-top: 8px;">
- <img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <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</div>
- <div style="font-style: normal; padding-top: 12px; height: 8em;">
- <img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <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</div>
- </div>
- </div>
- <div class="tuto_details" id="tutochallenge">
- <div class="tuto_type">
- Possible solution</div>
- <p>Add this rule to your stylesheet:</p>
- <pre class="brush: css">p:before{
- content: url("yellow-pin.png");
-}
-</pre>
- <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/Lists", "Lists") }}একটি সাধারণ প্রক্রিয়া  stylesheets কিভাবে লিস্টে বিভিন্ন আইটেম মার্ক করার জন্য বিষয়বস্তু যোগ করে। পরবর্তী বিভাগ বর্ণনা করবে কিভাবে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">specify style for list elements।</a></p>
diff --git a/files/bn/learn/css/howto/index.html b/files/bn/learn/css/howto/index.html
deleted file mode 100644
index d862a4cb53..0000000000
--- a/files/bn/learn/css/howto/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Use CSS to solve common problems
-slug: Learn/CSS/Howto
-translation_of: Learn/CSS/Howto
----
-<div>Translation in progress</div>
-
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">The following links provide solutions to common problems you can solve with CSS.</p>
-
-<h2 id="Common_use_cases">Common use cases</h2>
-
-<div class="column-container">
-<div class="column-half">
-<h3 id="Basics">Basics</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li>
-</ul>
-
-<h3 id="CSS_and_text">CSS and text</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li>
-</ul>
-</div>
-
-<div class="column-half">
-<h3 id="Boxes_and_layouts">Boxes and layouts</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
-</ul>
-</div>
-</div>
-
-<h2 id="Uncommon_and_advanced_techniques">Uncommon and advanced techniques</h2>
-
-<p>CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.</p>
-
-<h3 id="General">General</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
-</ul>
-
-<h3 id="Advanced_effects">Advanced effects</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li>
-</ul>
-
-<h3 id="Layout">Layout</h3>
-
-<ul>
- <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
- <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
- <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
-</ul>
-
-<h2 id="See_also">See also</h2>
-
-<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A variety of topics: from debugging to selector usage.</p>