1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
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>
|
