From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../learn/css/howto/generated_content/index.html | 133 +++++++++++++++++++++ files/bn/learn/css/howto/index.html | 88 ++++++++++++++ 2 files changed, 221 insertions(+) create mode 100644 files/bn/learn/css/howto/generated_content/index.html create mode 100644 files/bn/learn/css/howto/index.html (limited to 'files/bn/learn/css/howto') diff --git a/files/bn/learn/css/howto/generated_content/index.html b/files/bn/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..90cef28d3b --- /dev/null +++ b/files/bn/learn/css/howto/generated_content/index.html @@ -0,0 +1,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 +--- +

{{ CSSTutorialTOC() }}

+

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}এটি CSS Getting Started টিউটোরিয়ালের ৯ম বিভাগ; এখানে বর্ণনা করা হয়েছে কিভাবে আপনি CSS ব্যাবহার করে একটি ডকুমেন্টে বিষয়বস্তু যোগ করবেন। আপনি টেক্সট কন্টেন্ট এবং ইমেজ যোগ করার জন্য আপনার স্টাইলশীট পরিবর্তন করুন।

+

তথ্য: বিষয়বস্তু

+

CSS এর গুরুত্বপূর্ণ বৈশিষ্ট হল এটি একটি ডকুমেন্টের বিষয়বস্তু থেকে ডকুমেন্টের স্টাইলকে আলাদা করতে সাহায্য করে। এখনো সেখানে এমন কিছু অবস্থা আছে যেখানে এটা বুঝায় যে স্টাইলশিট এর অংশ হিসেবে কিছু নির্দিষ্ট বিষয়বস্তু ঠিক করতে হয়, ডকুমেন্ট এর অংশ হিসেবে নয়।

+

একটি স্টাইলশীটে নির্দিষ্ট বিষয়বস্তু টেক্সট বা ইমেজ গঠিত হতে পারে।যখন আপনি আপনার স্টাইলশীট বিষয়বস্তু উল্লেখ করেন তখন বিষয়বস্তুকে ঘনিষ্ঠভাবে ডুকুমেন্টের কাঠামো সাথে সংযুক্ত করা হয়।

+
+
+ আরো বিস্তারিত
+

একটি স্টাইলশীট কন্টেন্ট উল্লেখ করতে জটিলতার সৃষ্টি হতে পারে। উদাহরণস্বরূপ, আপনি হয়ত স্টাইলশীটে আপনার ডকুমেন্টে থাকা বিভিন্ন ভাষা শেয়ার করেছেন। যদি স্টাইলশিট এর অংশ অনুবাদ করতে হয়, এর মানে হল যে আপনাকে অবশ্যই স্টাইলশিট এর সে অংশগুলো আলাদা আলাদা ফাইল এ রাখতে হবে এবং আপনার ডকুমেন্ট এর সঠিক ভাষা সংস্করণের সাথে তাদের সংযুক্ত করার ব্যবস্থা করতে হবে।

+

এই জটিলতাগুলো হয় না যদি আপনি চিহ্ন অথবা ছবি বা ইমেজ সমৃদ্ধ বিষয়বস্তু নির্দিষ্ট করেন যেটি সকল ভাষা এবং সংস্কৃতিতে প্রয়োগ করা যায়।

+

একটি স্টাইলশীট নির্দিষ্ট বিষয়বস্তু DOM এর অংশ নয়।

+
+

টেক্সট কন্টেন্ট

+
+
+ একটি উপাদান আগে বা পরে আপনি CSS টেক্সট কন্টেন্ট সন্নিবেশ করতে পারেন। কিভাবে আপনি কন্টেন্টি  {{ cssxref("::before") }} অথবা {{ cssxref("::after") }} যোগ করবেন তার একটি নির্দিষ্ট নিয়ম selector এ দেয়া আছে। টেক্সট কন্টেন্ট নির্দিষ্ট মান {{ cssxref("content") }} প্রোপার্টির সাথে উল্লেখ করুন।
+
+
+
+ উদাহরণ
+

এই নিয়মে টেক্সট এ যোগ করুণ 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  এই{{ cssxref("content") }} প্রপার্টি এর মানের মাঝে বসাবেন।

+
+

উদাহরণ
+ এই নিয়মটি প্রতিটি link এর পরে একটি space দেয় এবং একটি icon যোগ করে  যেটিতে class glossary আছে:

+ 
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+
+
+

কোন উপাদানের background এ ছবি বা ইমেজ সংযুক্ত করার জন্য, কোন একটি ছবি বা ইমেজ এর URL {{ cssxref("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 ইমেজ

+

এ ইমেজ টি একটি সাদা বর্গ যেখানে এর নিচে একটি নীল লাইনে আছে :

+ + + + + + +
Image:Blue-rule.png
+
    +
  1. ইমেজ ফাইল টি Download করুন CSS file এর মত একই পদ্ধতিতে। (উদাহরণস্বরূপ, ডান পাশের বাটন এ ক্লিক করুন context মেনুটির জন্য, তারপর Save Image As টি তে ক্লিক করুন এবং এই টিউটোরিয়াল এর জন্য যে পদ্ধতি টি ব্যবাহার করছেন সেটি উল্লেখ করুন।)
    2. +
  2. আপনার CSS ফাইলটি সম্পাদন করুন এবং এই নিয়মটি body তে যোগ করুন , সম্পূর্ণ পৃষ্ঠার জন্য ব্যাকগ্রাউন্ড image যোগ করুন ।
    + 
    background: url("Blue-rule.png");
+
    +

    repeat মান টি ডিফল্ট, তাই একে কিছু করতে হবে না। ইমেজ বা ছবিটি বা অনূভুমিকপভাবে বা উলম্বভাবে পুনরাবৃত্তি হয় , যেটা রেখাযুক্ত লেখা কাগজের মত দেখায় :

    +
    +

    Image:Blue-rule-ground.png

    +
    +
    +

    Cascading Style Sheets

    +
    +
    +

    Cascading Style Sheets

    +
    +
    +
    +
    3. +
+
+
+ চ্যালেঞ্জ
+

এই ইমেজ টি ডাউনলোড করুন:

+ + + + + + +
Image:Yellow-pin.png
+

আপনার স্টাইলশিট এ একটি নিয়ম যোগ করুন যাতে করে এটি প্রতিটি লাইনের প্রথমে ইমেজ বা ছবি প্রদর্শন করে :

+
+

Image:Blue-rule-ground.png

+
+
+ image:Yellow-pin.png Cascading Style Sheets
+
+ image:Yellow-pin.png Cascading Style Sheets
+
+
+
+
+ Possible solution
+

Add this rule to your stylesheet:

+ 
p:before{
+  content: url("yellow-pin.png");
+}
+
+

 

+ Hide solution
+ See a solution for the challenge.
+

পরবর্তীতে কি আছে?

+

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}একটি সাধারণ প্রক্রিয়া  stylesheets কিভাবে লিস্টে বিভিন্ন আইটেম মার্ক করার জন্য বিষয়বস্তু যোগ করে। পরবর্তী বিভাগ বর্ণনা করবে কিভাবে specify style for list elements।

diff --git a/files/bn/learn/css/howto/index.html b/files/bn/learn/css/howto/index.html new file mode 100644 index 0000000000..d862a4cb53 --- /dev/null +++ b/files/bn/learn/css/howto/index.html @@ -0,0 +1,88 @@ +--- +title: Use CSS to solve common problems +slug: Learn/CSS/Howto +translation_of: Learn/CSS/Howto +--- +
Translation in progress
+ +
{{LearnSidebar}}
+ +

The following links provide solutions to common problems you can solve with CSS.

+ +

Common use cases

+ +
+
+

Basics

+ + + +

CSS and text

+ + +
+ +
+

Boxes and layouts

+ + +
+
+ +

Uncommon and advanced techniques

+ +

CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.

+ +

General

+ + + +

Advanced effects

+ + + +

Layout

+ + + +

See also

+ +

CSS FAQ — A variety of topics: from debugging to selector usage.

-- cgit v1.2.3-54-g00ecf