This translation is incomplete. Please help translate this article from English.
Go to Previous Section:
Colorএটি CSS Getting Started টিউটোরিয়ালের ৯ম বিভাগ; এখানে বর্ণনা করা হয়েছে কিভাবে আপনি CSS ব্যাবহার করে একটি ডকুমেন্টে বিষয়বস্তু যোগ করবেন। আপনি টেক্সট কন্টেন্ট এবং ইমেজ যোগ করার জন্য আপনার স্টাইলশীট পরিবর্তন করুন।
তথ্য: বিষয়বস্তু
CSS এর গুরুত্বপূর্ণ বৈশিষ্ট হল এটি একটি ডকুমেন্টের বিষয়বস্তু থেকে ডকুমেন্টের স্টাইলকে আলাদা করতে সাহায্য করে। এখনো সেখানে এমন কিছু অবস্থা আছে যেখানে এটা বুঝায় যে স্টাইলশিট এর অংশ হিসেবে কিছু নির্দিষ্ট বিষয়বস্তু ঠিক করতে হয়, ডকুমেন্ট এর অংশ হিসেবে নয়।
একটি স্টাইলশীটে নির্দিষ্ট বিষয়বস্তু টেক্সট বা ইমেজ গঠিত হতে পারে।যখন আপনি আপনার স্টাইলশীট বিষয়বস্তু উল্লেখ করেন তখন বিষয়বস্তুকে ঘনিষ্ঠভাবে ডুকুমেন্টের কাঠামো সাথে সংযুক্ত করা হয়।
একটি স্টাইলশীট কন্টেন্ট উল্লেখ করতে জটিলতার সৃষ্টি হতে পারে। উদাহরণস্বরূপ, আপনি হয়ত স্টাইলশীটে আপনার ডকুমেন্টে থাকা বিভিন্ন ভাষা শেয়ার করেছেন। যদি স্টাইলশিট এর অংশ অনুবাদ করতে হয়, এর মানে হল যে আপনাকে অবশ্যই স্টাইলশিট এর সে অংশগুলো আলাদা আলাদা ফাইল এ রাখতে হবে এবং আপনার ডকুমেন্ট এর সঠিক ভাষা সংস্করণের সাথে তাদের সংযুক্ত করার ব্যবস্থা করতে হবে।
এই জটিলতাগুলো হয় না যদি আপনি চিহ্ন অথবা ছবি বা ইমেজ সমৃদ্ধ বিষয়বস্তু নির্দিষ্ট করেন যেটি সকল ভাষা এবং সংস্কৃতিতে প্রয়োগ করা যায়।
একটি স্টাইলশীট নির্দিষ্ট বিষয়বস্তু DOM এর অংশ নয়।
টেক্সট কন্টেন্ট
এই নিয়মে টেক্সট এ যোগ করুণ Reference : before every element with the class ref:
.ref:before {
font-weight: bold;
color: navy;
content: "Reference: ";
}
একটি স্টাইলশিট এর অক্ষরের সেট ডিফল্ট রুপে UTF-8 থাকে, কিন্তু এটা সংযুক্ত করে নির্দিষ্ট করা যায় অথবা স্টাইলশিট এটা নিজে অথবা আরও বিভিন্ন উপায়ে। আরও বিস্তারিত জানার জন্য দেখুন 4.4 CSS style sheet representation CSS নির্দিষ্টকরণ।
আলাদা অক্ষরগুলোও escape প্রক্রিয়ায় নির্দিষ্ট করা যায় যেটি backslash ব্যবহার করে escape অক্ষর বা চিহ্ন হিসেবে। উদাহরণস্বরূপ, \265B হচ্ছে দাবার black queen ♛ এর প্রতীক। আরও বিস্তারিত জানার জন্য দেখুন, Referring to characters not represented in a character encoding এবং Characters and case CSS নির্দিষ্টকরণে ।
ইমেজ বা ছবি বিষয়বস্তু
একটি উপাদানের আগে বা পরে ছবি সংযুক্ত করার জন্য, আপনি ছবিটির URL এইcontent প্রপার্টি এর মানের মাঝে বসাবেন।
উদাহরণ
এই নিয়মটি প্রতিটি link এর পরে একটি space দেয় এবং একটি icon যোগ করে যেটিতে class glossary আছে:
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
কোন উপাদানের background এ ছবি বা ইমেজ সংযুক্ত করার জন্য, কোন একটি ছবি বা ইমেজ এর URL background প্রপার্টি এর মানের মাঝে নির্দিষ্ট করুন।এটি একটি shorthand প্রপার্টি যেটি background color, ছবি, কিভাবে ছবি এবং অন্যান্য বিস্তারিত নির্দিষ্টকরণে সহায়তা করে।
এই নিয়মটি একটি নির্দিষ্ট উপাদানের background সেট করে, URL ব্যবহার করে image file উল্লেখ করে।
selector কোন উপাদানের id উল্লেখ করে। no-repeat মানটি image কে একবার দেখাতে সাহায্য করে :
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
আলাদা আলাদা প্রপার্টিজ affecting backgrounds এবং অন্যান্য options যখন আপনি background ইমেজ গুলো ঠিক করেন সেইসব তথ্য এর জন্য, দেখুন{ cssxref("background") }} রেফেরেন্স পৃষ্ঠা।
Action: Adding a background ইমেজ
এ ইমেজ টি একটি সাদা বর্গ যেখানে এর নিচে একটি নীল লাইনে আছে :
 |
- ইমেজ ফাইল টি Download করুন CSS file এর মত একই পদ্ধতিতে। (উদাহরণস্বরূপ, ডান পাশের বাটন এ ক্লিক করুন context মেনুটির জন্য, তারপর Save Image As টি তে ক্লিক করুন এবং এই টিউটোরিয়াল এর জন্য যে পদ্ধতি টি ব্যবাহার করছেন সেটি উল্লেখ করুন।)
- আপনার CSS ফাইলটি সম্পাদন করুন এবং এই নিয়মটি body তে যোগ করুন , সম্পূর্ণ পৃষ্ঠার জন্য ব্যাকগ্রাউন্ড image যোগ করুন ।
background: url("Blue-rule.png");repeat মান টি ডিফল্ট, তাই একে কিছু করতে হবে না। ইমেজ বা ছবিটি বা অনূভুমিকপভাবে বা উলম্বভাবে পুনরাবৃত্তি হয় , যেটা রেখাযুক্ত লেখা কাগজের মত দেখায় :
এই ইমেজ টি ডাউনলোড করুন:
 |
আপনার স্টাইলশিট এ একটি নিয়ম যোগ করুন যাতে করে এটি প্রতিটি লাইনের প্রথমে ইমেজ বা ছবি প্রদর্শন করে :
Add this rule to your stylesheet:
p:before{
content: url("yellow-pin.png");
}
Hide solution
পরবর্তীতে কি আছে?
Go to Next Section:
Listsএকটি সাধারণ প্রক্রিয়া stylesheets কিভাবে লিস্টে বিভিন্ন আইটেম মার্ক করার জন্য বিষয়বস্তু যোগ করে। পরবর্তী বিভাগ বর্ণনা করবে কিভাবে specify style for list elements।