diff options
Diffstat (limited to 'files/bn/learn/css/howto')
-rw-r--r-- | files/bn/learn/css/howto/generated_content/index.html | 133 | ||||
-rw-r--r-- | files/bn/learn/css/howto/index.html | 88 |
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> |