From d0a2422de8d35a9868c34d631117d678769658ef Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:44:50 +0100 Subject: unslug bn: move --- files/bn/web/css/getting_started/color/index.html | 281 ---------------- .../css/getting_started/how_css_works/index.html | 127 -------- files/bn/web/css/getting_started/index.html | 28 -- .../css/getting_started/readable_css/index.html | 133 -------- .../web/css/getting_started/text_styles/index.html | 110 ------- .../web/css/getting_started/why_use_css/index.html | 104 ------ .../\340\246\250\340\246\207/index.html" | 355 --------------------- .../index.html" | 302 ------------------ 8 files changed, 1440 deletions(-) delete mode 100644 files/bn/web/css/getting_started/color/index.html delete mode 100644 files/bn/web/css/getting_started/how_css_works/index.html delete mode 100644 files/bn/web/css/getting_started/index.html delete mode 100644 files/bn/web/css/getting_started/readable_css/index.html delete mode 100644 files/bn/web/css/getting_started/text_styles/index.html delete mode 100644 files/bn/web/css/getting_started/why_use_css/index.html delete mode 100644 "files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" delete mode 100644 "files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" (limited to 'files/bn/web/css') diff --git a/files/bn/web/css/getting_started/color/index.html b/files/bn/web/css/getting_started/color/index.html deleted file mode 100644 index 715c208203..0000000000 --- a/files/bn/web/css/getting_started/color/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: রং -slug: Web/CSS/Getting_Started/Color -tags: - - CSS - - Example - - Guide - - NeedsReview -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -

{{ CSSTutorialTOC() }}

-

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}এটা হচ্ছে  যেভাবে শুরু করবেন CSS   টিউটোরিয়ালের ৮ম বিভাগ; এটা ব্যাখ্যা করবে কিভাবে আপনি CSS এ রং উল্লেখ করবেন. আপনি আপনার নমুনা স্টাইলশিট এ পরিচিত হবেন background রং এর সাথে।

-

তথ্য: রং (color)

-

এই টিউটোরিয়ালে এখন পর্যন্ত ,আপনি ব্যবহার করেছেন একটি নির্দিষ্ট সংখ্যক রং এর নাম . CSS 2 সর্বোপরি ১৭ টি রং এর নাম বহন করে। কিছু নাম হয় তো সেগুলো, যেগুলো আপনি আশা করেন না।

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 black gray silver white 
primariesred lime blue 
secondariesyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
-

 

-
-
- বিস্তারিত
-

আপনার  browser হয়ত আরও অনেক রং এর নাম বহন করতে পারে, যেমনঃ

- - - - - - - - - - - - - - - -
dodgerblue peachpuff tan firebrick aquamarine 
-

এই প্রসারিত তালিকার আরও বিস্তারিত জানার জন্য দেখুন: SVG color keywords  CSS 3 এর রং এর মডিউল এ। সতর্ক থাকুন ওই সব রং এর নাম ব্যবহারে যেগুলো আপনার পাঠকের browsers এ হয়ত বহন করে না।

-
-

একটি বৃহৎ palette এর জন্য, যে রং গুলো আপনি চান সেগুলোর লাল (red), সবুজ(green) এবং নীল( blue) উপাদানগুলো উল্লেখ করুন হ্যাশট্যাগ (#) দিয়ে এবং ৩টি হেক্সাডেসিমাল(hexadecimal) সংখ্যা যাদের শ্রেণী 0 - 9 , a – f.  a – f অক্ষরগুলো দিয়ে 10 – 15 এর মান বুঝায়:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
-

সম্পূর্ণ palette এর জন্য, প্রতিটি উপাদানের ক্ষেত্রে উল্লেখ করুন দুইটি হেক্সাডেসিমাল সংখ্য:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
-

আপনি সচারচর এই ৬ সংখ্যার হেক্সাডেসিমাল কোড গুলো আপনার গ্রাফিক্স প্রোগ্রাম অথবা অন্য কোন টুলস থেকে পেতে পারেন।

-
-
- উদাহরণ
-
- সামান্য প্র্যাকটিস করে, আপনি তিন সংখ্যার রং গুলো আপনার বেশিরভাগ কাজের জন্য সুবিন্যস্ত করতে পারবেনঃ
-
-  
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
শুরু লাল এর সাথে: #f00
একে হাল্কা করার জন্য, কিছু সবুজ এবং নীল যোগ করুনঃ #f77
একে আরও কমলা করার জন্য, সামান্য একটু এক্সট্রা সবুজ যোগ করুনঃ #fa7
আরও ডার্ক করার জন্য, এর সব উপাদান মুছে ফেলুন: #c74
এর সম্পৃক্তি দূর করার জন্য, এর উপাদান গুলো কে আরও সমান করুনঃ #c98
আপনি যদি একদম সমান করেন তাহলে আপনি পাবেন ধুুসরঃ #ccc
-

একটি মোমের মত শেডের জন্য যেমন বর্ণহীন নীলঃ

- - - - - - - - - - - - - -
শুরু একদম শুভ্র সাদা থেকে: #fff
অন্যান্য উপাদানগুলো সামান্য কমান: #eef
-
-
-
- আরও বিস্তারিত
-

আপনি আরও উল্লেখ করতে পারেন একতি রং এর ডেসিমাল RGB মানগনগুলো যাদের শ্রেণী 0 – 25 অথবা percentages.

-

উদাহরণস্বরূপ ,মেরুন (dark red):

- 
rgb(128, 0, 0)
-

কিভাবে রং উল্লেখ করা যায় তার আরও বিস্তারিত জানার জন্য দেখুনঃ রং CSS সুনির্দিষ্টকরণে এ। ম্যাচিং সিস্টেম রং যেমন মেনু এবং ThreeDFace, দেখুন: CSS2 System Colors CSS সুনির্দিষ্টকরণে এ।

-
-

 

-

আপনি ইতিমধ্যে {{ cssxref("color") }} প্রপার্টি text এ ব্যবহার করেছেন ।

-

আপনি চাইলে আরও ব্যবহার করতে পারেন {{ cssxref("background-color") }} প্রপার্টি টি যাতে করে আপনি উপাদানগুলোর ব্যাকগ্রাউন্ড পরিবর্তন করতে পারেন।

-

ব্যাকগ্রাউন্ড টি আপনি সেট করতে পারেন স্বচ্ছ ভাবে যাতে করে আপনি স্পষ্টভাবে যে কোন রং মুছে ফেলতে পারেন, মূল উপাদানের ব্যাকগ্রাউন্ড প্রকাশ করে।

-
-
- উদাহরণ
-

এই টিউটোরিয়ালে উদাহরণ বাক্সগুলোতে বর্ণহীন হলুদ ব্যাকগ্রাউন্ড ব্যবহার করা হয়েছে:

- 
background-color: #fffff4;
-
-

আরও বিস্তারিত বাক্সগুলো এই বর্ণহীন ধূসর ব্যবহার করেছেঃ

- 
background-color: #f4f4f4;
-
-
-

 

-

কাজ: কালার কোড এর ব্যবহার

-
    -
  1. আপনার CSS ফাইল সম্পাদন করুন।
    2. -
  2. এখানে মোটা করে যেগুলো দেখানো হয়েছে সেগুলো পরিবর্তন করুন, যাতে করে আপনি আদি অক্ষরগুলো কে একটি বর্ণহীন নীল রং দিতে পারেন। ( যে বিন্যাসগুলো এবং মন্তব্যগুলো আপনার ফাইলে দেখানো হয়েছে সেগুলো সম্ভবত দেখানো ফাইলগুলো হতে ভিন্ন।এই বিন্যাস এবং উক্তিগুলো আপনার মত করে সেভ করে রাখুন।)
    - 
    /*** CSS Tutorial: Color page ***/
-
-/* page font */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* paragraphs */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* initial letters */
-strong {
-  color: red;
-  background-color: #ddf;
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;}
-
    -
    3. -
  3. ফাইলটি সেভ করুন এবং আপনার ব্রাউজার টিকে রিফ্রেশ করুন যাতে করে আপনি ফলাফলটি দেখতে পারেন।
    4. -
- - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- - - - - - -
-

প্রতিদন্দিতাঃ
- আপনার CSS ফাইলে ,সব গুলো কালারের নাম পরিবর্তন করে 3 ডিজিট এর কালার কোড এ পরিবর্তন করুন ফলাফলে কোন প্রভাব না ফেলে।

-

(এটা হয়ত একদম সঠিক ভাবে হবে না, কিন্তু আপনি কাছাকাছি যেতে পারবেন। একদম সঠিক ভাবে করার জন্য আপনার প্রয়োজন 6 ডিজিট এর কোডসমূহ, এবং প্রয়োজন CSS সুনির্দিষ্টকরন দেখা অথবা ব্যবহার করুন একটি গ্রাফিক্স টুল যাতে করে কালার গুলো মিল করাতে পারেন।)

-

                                                                                 প্রতিদ্বন্দ্বিতার জন্য সমাধান দেখুন।

-
-

এরপর কি?

-


- {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}আপনার নমুনা ডকুমেন্ট এবং আপনার নমুনা stylesheet এর থেকে সম্পূর্ণভাবে আলাদা। এর পরে পরবর্তী বিভাগ  ব্যাখ্যা করবে কেমন করে আপনি এই সম্পূর্ণ আলাদা জিনিস থেকে ভিন্ন কিছু তৈরি করবেন।
-  

diff --git a/files/bn/web/css/getting_started/how_css_works/index.html b/files/bn/web/css/getting_started/how_css_works/index.html deleted file mode 100644 index 944a2f0398..0000000000 --- a/files/bn/web/css/getting_started/how_css_works/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: কিভাবে CSS কাজ করে -slug: Web/CSS/Getting_Started/How_CSS_works -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - NeedsReview - - Web -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}} এটিCSS Getting Started টিউটোরিয়াল এর তৃতীয় অধ্যায়; এটা আপনার ব্রাউজারে CSS কিভাবে কাজ করে ব্যাখ্যা করে। আপনার নমুনা ডকুমেন্ট বিশ্লেষণ করেন,তার স্টাইল এর বিবরণ প্রকাশের মধ্য দিয়ে।

- -

তথ্য: CSS কিভাবে কাজ করে

- -

যখন একটি ব্রাউজার একটি ডকুমেন্ট প্রদর্শন করে, এটি অবশ্যই ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল তথ্য এর সমন্বয় ঘটায়।এটি ডকুমেন্ট টি কে দুই ধাপে প্রসেস করে থাকেঃ

- -
    -
  1. ব্রাউজার টি মার্ক আপ লেঙ্গুয়েজ এবং সিএসেস একটি কাঠামোতে পরিবর্তন করে যেটির নাম DOM (ডকুমেন্ট অবজেক্ট মডেল). The DOM কম্পিউটার এর মেমরি তে ডকুমেন্ট কে উপস্থাপন করে.এটি ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল এর সমন্বয় ঘটায়।
    2. -
  2. ব্রাউজার টি DOM এর কন্টেন্ট গুলো কে তুলে ধরে।
    3. -
- -

একটি মার্ক আপ ল্যাঙ্গুয়েজ elementsব্যাবহার করে ডকুমেন্ট এর গঠন ব্যাখ্যা দেয়ার জন্য। ট্যাগ ব্যাবহার করে আপনি একটি elementকে মার্ক করতে পারেন, এর মধ্যে আছে স্ট্রিং যেটা শুরু হয় '<' দিয়ে এবং শেষ হয় '<' দিয়ে। বেশির ভাগ এলিমেন্ট এর জোড়া ট্যাগ আছে।একটি স্টার্ট ট্যাগ আর এন্ড ট্যাগ। স্টার্ট এর ক্ষেত্রে, elementএর নাম, '< >' এর ভিতরে ।এন্ড ট্যাগ এর ক্ষেত্রে element এর নাম এর আগে ,'<' এর পরে '/' বসাতে হবে।

- -

মার্ক আপ ল্যাঙ্গুয়েজ এর উপর ভিত্তি করে, কিছু element এর শুধু মাত্র স্টার্ট ট্যাগ অথবা শুধুমাত্র সিঙ্গেল ট্যাগ থাকবে যেখানে '/' নাম এর পরে আসে।

- -

একটি element একটি পাত্র হতে পারে , স্টার্ট ট্যাগ এবং এন্ড ট্যাগ এর মাঝে অন্যান্য উপকরন নিএ।

- -

একটি DOM এর গাছ এর মত কাঠামো থাকে. মার্ক আপ ল্যাঙ্গুয়েজ এ প্রতিটি element and টেক্সট এর রান একটি  node হিসেবে কাজ করে এই গাছ কাঠামোতে. DOM nodes গুলো পাত্র নয়। বরং, এগুলোকে শিশু node এর অভিভাবক ধরা যায়।

- -
-
উদাহরনঃ
-আপনার সেম্পল উদাহরনে, <p> ট্যাগ এবং এর অ্যান্ড ট্যাগ </p> একটি পাত্র তৈরি করে - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

বাস্তব উদাহরণঃ

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

DOM এ corresponding P node টি কে অভিভাবক ধরা হয় .এর শিশু node গুলো  হল স্ট্রং nodes and টেক্সট nodes. স্ট্রং nodes গুলো নিজেরাই হল অভিভাবক, text nodes গুলোকে নিয়ে নিজেদের শিশু node হিসেবে ।

- -
P
-├─STRONG
-│ └─"C"
-├─"ascading"
-├─STRONG
-│ └─"S"
-├─"tyle"
-├─STRONG
-│ └─"S"
-└─"heets"
-
- -

 DOM বোঝা আপনাকে সাহায্য করবে ডিজাইন করতে, debug করতে and আপনার CSS রক্ষণাবেক্ষণ করতে কারন  DOM হল যেখানে আপনার CSS ডকুমেন্ট এর content মিলিত হয়.

- -

কার্যকরণ: একটি DOM বিশ্লেষণ

- -

DOM Inspector ব্যাবহার

- -

একটি DOM বিশ্লেষণ করতে হলে, আপনার প্রয়জনহবে স্পেশাল সফটওয়্যার এর.এখানে আপনি ব্যাবহার করবেন মোজিলার  DOM Inspector (DOMi) add-on , একটি DOM বিশ্লেষণ এর জন্য। এই কাজ টি করার জন্য আপনাকে add-on টি ইন্সটল করতে হবে।

- -
    -
  1. মোজিলা ব্রাউজার টি ব্যাবহার করুন আপনার স্যাম্পল HTML ডকুমেন্ট টি ওপেন করবার জন্য.
    2. -
  2. আপনার ব্রাউজার এর মেনু বার থেকে , বাছাই করুন Tools > DOM Inspector, অথবা এভাবে Tools > Web Development > DOM Inspector. -
    -
    আরও
    - -

    যদি আপনার মোজিলা ব্রাউজার এ DOMi না থাকে, তাহলে এটি ব্যাবহার করতে পারেন install it from the Add-ons site এবং ব্রাউজার রি-স্টার্ট করতে হবে। তারপর ফিরে যাবেন টিউটোরিয়াল এ।

    - -

    যদি আপনি DOMi ইন্সটল করতে না চান ( অথবা আপনি নন- মোজিলা ব্রাউজার ব্যাবহার করেন), আপনি ব্যাবহার করতে পারেন Web X-Ray Goggles, যেভাবে বিবরন দেয়া আছে পরবর্তী সেকশন এ। অথবা আপনি সেকশন টি বাদ রেখে পরবর্তী পেজ এ চলে যেতে পারেন. সেকশন টি বাদ দিয়ে গেলে টিউটোরিয়াল এর বাকি অংশে কোন প্রভাব ফেলবে না।

    -
    -
    3. -
  3. DOMi এ, আপনার ডকুমেন্ট এর  nodes গুলোকে বিস্তৃত করুন arrows এ ক্লিক করার মাধ্যমে। -

    দ্রষ্টব্য:  আপনার HTML ফাইল এ স্পেসিং করলে হয়ত DOMi কিছু শুন্য text nodes দেখাতে পারে,যেগুলো আপনি উপেক্ষা করতে পারেন।

    - -

    রেসাল্ট এর অংশ হয়ত এরূপ দেখাবে যা নিরভর করছে আপনি কোন nodes গুলোকে বিস্তৃত করেছেন:

    - - 
    │ ▼╴P
-│ │ │ ▼╴STRONG
-│ │ └#text
-│ ├╴#text
-│ ►╴STRONG
-│ │
    - -

    যখন আপনি একটি node সিলেক্ট করবেন, আপনিDOMi's এর ডান-হাত প্যান টি ব্যাবহার করতে পারেন আরও কিছু খুজে বের করার জন্য. উদাহরন সরূপ , আপনি যখন একটি text node সিলেক্ট করবেন, DOMi আপনাকে ডান-হাত  প্যান এ টেক্সট টি দেখাবে.

    - -

    যখন আপনি একটি element node সিলেক্ট করবেন, DOMi সেটি বিশ্লেষণ করবে এবং ডান হাত প্যান এ অনেক তথ্য সরবরাহ করবে।স্টাইল তথ্য হল বিতরন করা তথ্য এর ই একটি অংশ।

    -
    4. -
- -
-
চেলেঞ্জঃ
-DOMi তে, স্ট্রং  node এ ক্লিক করুন।
- -

DOMi এর ডান হাত প্যান টি ব্যাবহার করুন খুজে বের করার জন্য কোথায় node এর রঙ লাল রাখা হয়েছে এবং কোথায় এটিকে সাধারন টেক্সট এর তুলনায় গাঢ় দেখান হয়েছে।

- -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

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

 Web X-Ray Goggles এর বেবহারঃ

- -

Web X-Ray Goggles ,  DOM Inspector এর তুলনায় কম তথ্য সরবরাহ  করে কিন্তু এটি ব্যাবহার করা ও ইন্সটল করা সহজ।

- -
    -
  1. Web X-Ray Goggles এর জন্য হোম পেজ এ যান।
    2. -
  2. পেজের bookmarklet এর লিংক টি কে টেনে ব্রাউজার টুলবার এ আনুন।
    3. -
  3. আপনার স্যাম্পল  HTML ডকুমেন্ট টি খুলুন।
    4. -
  4. Web X-Ray Goggles কে এক্টিভেট করুন টুলবার এর  bookmarklet এ ক্লিক করার মাধ্যমে।
    5. -
  5. আপনার কার্সর এর পয়েন্টআর টিকে, ডকুমেন্ট এর এলেমেন্ট দেখার জন্য ডকুমেন্ট এর উপর ঘোরান।
    6. -
- -

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

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}যদি আপনি চ্যালেঞ্জ টি গ্রহন করে থাকেন,আপনি দেখতে পেয়েছেন যে একাধিক জায়গা থেকে স্টাইল তথ্য যোগাযোগ স্থাপন করে একটি এলেমেন্ট  এর জন্য একটি ফাইনাল স্টাইল তৈরি করতে।next page এই সব যোগাযোগ স্থাপনের বেপারে আরও বিবরন দিবে।

diff --git a/files/bn/web/css/getting_started/index.html b/files/bn/web/css/getting_started/index.html deleted file mode 100644 index bafa4f6776..0000000000 --- a/files/bn/web/css/getting_started/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: যেভাবে শুরু করবেন (CSS টিউটোরিয়াল) -slug: Web/CSS/Getting_Started -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

সম্পূর্ণ নতুনদের জন্য লেখা এই CSS টিউটোরিয়াল আপনাকে Cascading Style Sheets (ক্যাসকেডিং স্টাইল শিট বা CSS) এর সঙ্গে পরিচয় করিয়ে দেবে। এই গাইডটি ভাষাটির খুবই সাধারণ ফিচারগুলো সাথে উদাহরণসহ আপনাকে পরিচয় করিয়ে দেবে, যা আপনি নিজের ব্রাউজারে ঘরে বসেই চালিয়ে দেখতে পারবেন। এর ফলে আধুনিক ব্রাউজারগুলোতে CSS এর সাধারণ বিষয়গুলো আপনি সহজেই বুঝতে পারবেন।

-

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

- -

শুরু করার পূর্বে আপনার কি করা প্রয়োজন?

-

এই টিউটোরিয়ালটি ভালোভাবে অনুসরণ করতে চাইলে আপনার প্রয়োজন একটি টেক্সট এডিটর এবং একটি আধুনিক ব্রাউজার। কি করে এগুলো ব্যবহার করতে হয় - এ সংক্রান্ত বেসিক জানাশোনা থাকা ভালো।

-

আপনি যদি ফাইল নিয়ে ঘাঁটাঘাঁটি না করতে চান, তবে আপনি পুরো টিউটোরিয়ালটি শুধু পড়ে যেতে পারেন, এবং ছবিগুলোর দিকে চোখ বুলিয়ে যেতে পারেন, কিন্তু এ পদ্ধতিটি খুব একটা কার্যকর বা ভালো পদ্ধতি নয় বলে আমরা মনে করি।

-

উল্লেখ্য: CSS এর সাহায্যে রং নিয়ে কাজ করা যায়, তাই এই টিউটোরিয়ালের কিছু অংশ রংয়ের ওপর নির্ভরশীল। আপনি এই অংশগুলো সহজেই কাজে লাগাতে পারবেন যদি আপনার একটি রঙিন মনিটর বা ডিসপ্লের পাশাপাশি স্বাভাবিক রং দেখায় কোন শারীরিক সমস্যা না থাকে।

-

যেভাবে টিউটোরিয়ালটি ব্যবহার করবেন

-

এই টিউটোরিয়ালটি ব্যবহারের জন্য প্রতিটা পৃষ্ঠা ভালোভাবে এবং ধারাবাহিকভাবে পড়ুন। যদি আপনি একটি পৃষ্ঠা বাদ দিয়ে ফেলেন, তাহলে পরবর্তী পৃষ্ঠাগুলো বোঝা আপনার জন্য অনেকটা কঠিন হতে পারে।

-

সিএসএস কিভাবে কাজ করে বোঝার জন্য প্রতিটি পৃষ্ঠার "তথ্যাবলী" অংশটি ভালো করে পড়ুন। "হাতে-কলমে" অংশগুলো পড়ে আপনার নিজের কম্পিউটারে CSS ব্যবহারের চেষ্টা করে দেখুন।

-

আপনি কতটুকু বুঝতে পেরেছেন, তা যাচাই করতে প্রতিটি পৃষ্ঠার শেষে থাকা "চ্যালেঞ্জ" গ্রহণ করুন। চ্যালেঞ্জের সমাধান কিন্তু চ্যানলেঞ্জের নিচেই লিংকের মাধ্যমে দেওয়া আছে, তাই ওগুলো খুব বেশি প্রয়োজন হলে না দেখাই ভালো! নিজে নিজে অবশ্যই চেষ্টা করতে হবে এবং যদি ব্যর্থ হন বারবার, তবে সামান্য একটু উঁকি মেরে দেখা দোষের কিছু না!

-

CSS আরও গভীরভাবে বুঝতে চাইলে "অতিরিক্ত তথ্য" লেখা বাক্সগুলোর তথ্য পড়ুন। লিংকগুলোর সাহায্যে CSS সংক্রান্ত আরও অনেক রেফারেন্স তথ্য খুঁজে বের করতে পারবেন।

-

টিউটোরিয়াল ২য় পর্ব

-

এই টিউটোরিয়ালের দ্বিতীয় পর্বে অন্যান্য ওয়েব ও মোজিলা প্রযুক্তির সাথে CSS ব্যবহারের কথা আলোচনা করা হয়েছে।

-
    -
  1. JavaScript (জাভাস্ক্রিপ্ট)
    2. -
  2. SVG গ্রাফিক্স
    3. -
  3. XML ডাটা
    4. -
  4. XBL বাইন্ডিং
    5. -
  5. XUL ইউজার ইন্টারফেস
    6. -
diff --git a/files/bn/web/css/getting_started/readable_css/index.html b/files/bn/web/css/getting_started/readable_css/index.html deleted file mode 100644 index 49bdc94605..0000000000 --- a/files/bn/web/css/getting_started/readable_css/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Readable CSS -slug: Web/CSS/Getting_Started/Readable_CSS -tags: - - NeedsReview -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}This is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

-

তথ্য: পাঠযোগ্য CSS

-

আপনি এগুলো আরো পাঠযোগ্য করার জন্য আপনার স্টাইলশীট  এ সাদা স্থান এবং মন্তব্য যুক্ত করতে পারেন।  You can also group selectors together? যখন একই স্টাইল নিয়ম বিভিন্ন ভাবে নির্বাচিত উপাদানের উপর প্রয়োগ করা যায় ।

-

সাদা স্থান

-

হোয়াইট স্পেস মানে প্রকৃত স্পেস, ট্যাব ও নতুন লাইন . আপনি আপনার স্টাইলশীট আরো পাঠযোগ্য করতে সাদা স্থান যোগ করতে পারেন।

-

পৃষ্ঠা বিন্যাস এবং গঠন context এর মধ্যে সাদা স্থান হচ্ছে পৃষ্ঠার অচিহ্নিত অংশ : কলাম এবং টাইপ লাইনের মধ্যে  মার্জিন, gutters, এবং স্থান।

-

 আপনার নমুনা সিএসএস ফাইল বর্তমানে এক নিয়ম প্রতি লাইনে এবং প্রায় সর্বনিম্ন সাদা স্থান  আছে। একটি জটিল স্টাইলশীটে এই বিন্যাস পড়া কঠিন হয়ে দাড়াবে এবং স্টাইলশীট বজায় রাখাও কঠিন হবে ।

-

আপনার নির্বাচিত বিন্যাস সাধারণত একটি ব্যক্তিগত পছন্দ, কিন্তু আপনার স্টাইলশীট যদি ভাগ প্রকল্পের অংশ হয়, তাহলে ঐসব প্রকল্পের তাদের নিজস্ব নিয়মাবলী থাকতে পারে।
-  

-
-
- উদাহরণ
-
- কিছু মানুষ যেমন কম্প্যাক্ট বিন্যাস আমরা  ব্যবহার করছি , শুধুমাত্র একটি লাইন বিভাজন যখন এটা খুব দীর্ঘ হয়ে যায় :
-
- 
.carrot {color: orange; text-decoration: underline; font-style: italic;}
-
-

কিছু মানুষ প্রতি লাইনে একটি মান পছন্দ করে :

- 
.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-
-

কিছু মানুষ  indention ব্যবহার করে যেমন- দুই স্পেস, চার স্পেস  অথবা একটি ট্যাব  হচ্ছে সাধারণ:

- 
.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-
-

 কিছু মানুষ সবকিছু  ঊর্ধ্বাভাবে  লাইনে লিখতে পছন্দ করে (কিন্তু এর মত একটি বিন্যাস বজায় রাখা কঠিন):

- 
.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-
-

কিছু মানুষ পাঠযোগ্যতা উন্নত করার লক্ষে্য  মিশ্র হোয়াইটস্পেস ব্যবহার করে।

- 
.vegetable         { color: green; min-height:  5px; min-width:  5px }
-.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
-
-
-

কিছু মানুষ বিন্যাসের জন্য ট্যাব ব্যবহার করেন । কিছু মানুষ শুধুমাত্র ফাঁকা স্থান ব্যবহার করেন।

-

মন্তব্য

-

CSS এর মধ্যে মন্তব্য শুরু হয় /* এবং শেষ হয় */ দিয়ে ।

-

আপনি আপনার স্টাইলশীট এ প্রকৃত মন্তব্য করতে মন্তব্য ব্যবহার করতে পারেন, এবং এছাড়াও  সাময়িকভাবে উদ্দেশ্যে পরীক্ষার জন্য একটা অংশ মন্তব্য করতে  পারেন ।

-

স্টাইলশীট  মন্তব্য অংশ আউট  করার জন্য, সে অংশ একটি একটি মন্তব্যে লিখুন যাতে ব্রাউজার এটি উপেক্ষা করে। আপনি সতর্ক থাকুন যেখানে মন্তব্য  শুরু এবং শেষ। বাকি স্টাইলশীট এ সঠিক স্যনটেক্স থাকতে হবে।

-
-
- উদাহরণ
- 
/* প্রথম অনুচ্ছেদে প্রাথমিক অক্ষর C এর জন্য শৈলী  */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
-

দলবদ্ধ নির্বাচক

-

যখন অনেক উপাদানের একই শৈলী থাকে, আপনি নির্বাচক একটি গ্রুপ উল্লেখ করে কমা দিয়ে তাদের পৃথক করতে পারেন। ঘোষণা সমস্ত নির্বাচিত উপাদানের ক্ষেত্রে প্রযোজ্য।

-

অন্যত্র আপনার স্টাইলশীট আপনি আবার পৃথকভাবে একই নির্বাচক নির্দিষ্ট করতে পারেন, তাদের ব্যক্তিগত শৈলী নিয়ম প্রযোজ্য।

-
-
- উদাহরণ
-

এই নিয়ম  {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, এবং {{ HTMLElement("h3") }} উপাদান একই রং তৈরি করে।

-

 শুধুমাত্র এক জায়গায় রঙ উল্লেখ করা সুবিধাজনক, যদি না এটি পরিবর্তন করা হয়।

- 
/* color for headings */
-h1, h2, h3 {color: navy;}
-
-
-

প্রক্রিয়া: মন্তব্য যোগ এবং বিন্যাস উন্নতি

-
    -
  1. আপনার CSS ফাইল সম্পাদনা করুন, এবং এটি এই নিয়ম আছে কিনা তা নিশ্চিত করুন (in any order): - 
    strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-
    -
    2. -
  2. এটি আরো পাঠযোগ্য করুন সাজানোর দ্বারা এমন একটি উপায়ে যেন এটি আপনি যৌক্তিক খুঁজে  পান , এবং হোয়াইটস্পেস এবং মন্তব্য যুক্ত করে যাই হোক না কেন  যে উপায়  আপনি সেরা মনে করেন।
    3. -
  3. আপনার ব্রাউজারে প্রদর্শন ফাইল সংরক্ষণ করুন এবং রিফ্রেশ করুন,নিশ্চিত করুন যে স্টাইলশীট যেভাবে কাজ করে আপনার পরিবর্তন তাকে প্রভাবিত না করেঃ  - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    4. -
-
-
- চ্যালেঞ্জ
-

আপনার স্টাইলশীট অংশের আউট মন্তব্য, অন্য কিছু পরিবর্তন ছাড়া, আপনার নথির খুব প্রথম অক্ষর লাল করা,

- - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
-

(এই কাজ করতে একাধিক উপায় আছে ।)

-
-
- Possible solution
- One way to do this is to put comment delimiters around the rule for .carrot: - 
/*.carrot {
-  color: orange;
-}*/
- Hide solution
- See a solution for the challenge.
-

What next?

-

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

diff --git a/files/bn/web/css/getting_started/text_styles/index.html b/files/bn/web/css/getting_started/text_styles/index.html deleted file mode 100644 index 3a53021fe2..0000000000 --- a/files/bn/web/css/getting_started/text_styles/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: টেক্সট স্টাইল -slug: Web/CSS/Getting_Started/Text_styles -tags: - - Beginer - - CSS - - 'CSS:Getting_Started' - - Guide - - NeedsLiveSample - - Web -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

{{ CSSTutorialTOC() }}

-

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}এটি হচ্ছে CSS Getting Started এর ৭ম টীউটোরিয়াল, এখানে টক্সট স্টাইল এর অনেক উদাহরণ দেয়া আছে। একাহে বর্ণনা করা হয়েছে কিভাবে আপনি আপনার নমুনা stylesheet এ বিভিন্ন ফন্ট ব্যাবহার করবেন।

-

তথ্য: টেক্সট স্টাইল

-

সিএসএস স্টাইলিং লেখার জন্য বিভিন্ন  ধরণ আছে।

-

এখানে {{ cssxref("font") }}আপনি আপনার লেখার বিভিন্ন দিক উল্লেখ করতে পারবেন,—যেমন:

- -
- 
উদাহরণ
-p {font: italic 75%/125% "Comic Sans MS", cursive;}
-
-

এই নিয়মে বিভিন্ন ফন্টের ধরণ দেয়া আছে, প্রতিটি অনুচ্ছেদ এর লেখা হবে ইতালিক ফরমে।

-

প্রতিটি অনুচ্ছেদ এর মূল উপাদান আকার  ফন্ট সাইজ তিন চতুর্থাংশ সেট করা হয়েছে, লাইন উচ্চতা ১২৫% সেট করা হয়েছে। (স্বাভাবিক তুলনায় একটু বেশি ব্যবধানযুক্ত)।

-

Comic Sans MS এ,কিছু ফন্ট আকার সেট করা থাকে কিন্তু যদি তা গ্রহণ যোগ্য না হয় তবে ব্রাউজার ডিফল্ট কারসিভ (hand-written) আকার ব্যাবহার করতে পারবে।

-

এই নিয়মে বোল্ড এবং ছোট হাতের অক্ষরের পার্শ্ব প্রতিক্রিয়া আছে:(setting them to normal):

-
-

ফন্টের আকার

-

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

-

একটি ডিফল্ট আকার  দিয়ে লিস্টটি শেষ করুনঃ serif, sans-serif, cursive, fantasy or monospace.

-

ডকুমেন্ট এ যদি কিছু ফন্ট আকার সমর্থন না করে তবে ব্রাউজার এ আপনি ফন্ট আকার প্রতিস্থাপন করতে পারেন। ডকুমেন্ট এ সমর্থন করে না এমন বিশেষ অক্ষর থাকতে পারে। যদি ব্রাউজার ঐই অক্ষরের কোন ফন্ট আকার খুজে পায় তবে আপনি সেটি ব্যাবহার করতে পারেন।

-

তার নিজস্ব ফন্ট আকার উল্লেখ করার {{ cssxref("font-family") }}এটি ব্যাবহার করুণ।

-

ফন্টের মাপ

-

ব্রাউজার ব্যাবহারকারি পৃষ্ঠাটি পড়ার সময় ডিফল্ট ফন্টরে মার অথবা লেখার আকার পরিবর্তন করতে পারেন,তাই সবথেকে ভাল যদি আপনি একটি আপেক্ষিক মাপ ব্যাবহার করতে পারেন।

-

আপনি ফন্টের ভাল মাপের জন্য কিছু বিল্ট ইন মান ব্যবহার করতে পারেন,যেম্ন-বড়,ছোট এবং মাঝারি। আপনি চাইলে ওই মান গুলো ব্যবহার করতে পারেন যেগুলো মূল উপাদানের ফন্টের আকারের সাথে সম্পর্কিত, যেমন ছোট বড় , ১৫০% অথবা ১.৫ em।একটি "em" হচ্ছে "m" অক্ষরের সমান প্রস্থের(মূল উপাদানের ফন্টের আকারের জন্য); এইভাবে ১.৫em হচ্ছে মূল উপাদানের এক এবং অর্ধ আকার।

-

প্রয়োজনে আপনি একটি নিদ্রিষ্ট আকার , যেমন: 14px (14 pixels) ডিসপ্লে ডিভাইস  এর জন্য অথবা 14pt (14 points) প্রিন্টারের জন্য নির্ধারণ করতে পারেন। এটা তাদের পরিবর্তন করার অনুমতি দেয় না, কারণ এইটা impaired ব্যাবহারকারিদের জন্য অ্যাক্সেসযোগ্য হয় না। আরো  ভাল কৌশল ডকুমেন্টের উপরের স্তরের এবং মাঝারিতে একটি বিল্ট-ইন মান সেট করা হয়,এবং তারপর তার সমস্ত descendent উপাদানের জন্য আপেক্ষিক মাপ সেট করা হয়।

-

তার নিজস্ব একটি ফন্ট সাইজ উল্লেখ করার জন্য {{ cssxref("font-size") }}ব্যাবহার করুন।

-

লাইনের উচ্চতা

-

লাইনের উচ্চতা ২টা লাইনের মধ্যকার স্পেস উল্লেখ করে। আপনার ডকুমেন্টে দীর্ঘ লাইনের অনুচ্ছেদ থাক্লে,বিশেষ করে ফন্টের রাকার যদি ছোট হয় তবে পড়ার সুবিধারতে স্বাভাবিকের থেকে একটু বড় স্পেস দিন।

-

তার নিজস্ব একটি লাইন উচ্চতা উল্লেখ করার জন্য{{ cssxref("line-height") }} ব্যাবহার করুণ।

-

সজ্জা

-

{{ cssxref("text-decoration") }} ব্যাবহার করে আপনি আন্দার-লাইন অথবা অনন্য ডেকোরেশন করতে পারেন। আপনি স্পষ্টভাবে ডেকোরেশন অপসরণ করতেও এটি ব্যাবহার করতে পারেন।

-

অন্যান্য বৈশিষ্ট্য

-

Italic জন্য ব্যাবহার করুন {{ cssxref("font-style") }}: italic;
- Bold জন্য ব্যাবহার করুন {{ cssxref("font-weight") }}: bold;
- Small capitals জন্য ব্যাবহার করুন {{ cssxref("font-variant") }}: small-caps;

-

পৃথকভাবে এই গুলো বন্ধ করার জন্য, আপনি স্বাভাবিক মান সুনির্দিষ্টভাবে উল্লেখ করুন।

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

আপনি অন্য কোন উপায়েও বিভিন্ন টেক্সট স্টাইল নির্দিষ্ট করতে পারেন।

-

উদাহরণস্বরূপ, এখানে উল্লিখিত অন্য কিছু মান আছে যা আপনি ব্যবহার করতে পারেন।

-

একটি জটিল স্টাইলশীট,shorthand font property এড়িয়ে চলে কারণ তার কিছু পার্শ্ব প্রতিক্রিয়া আছে (resetting other individual properties)।

-

আরো তথ্যের জন্য Fonts in the CSS Specification দেখতে পারেন। টেক্সট ডেকোরেশন এর আরো তথ্যের জন্য দেখুন Text।

-

আপনি ব্যবহারকারীদের সিস্টেমে ইনস্টল আকারেরউপর নির্ভর করতে না ছাইলে, আপনি ব্যবহার করতে পারেন{{ cssxref("@font-face") }}এটি একটি অনলাইন ফন্ট উল্লেখ করে। যদিও এই নিয়ম সমর্থন করে ব্যাবহারকারিদের এমন একটি ব্রাউজার থাকা প্রয়োজন।

-
-

কর্ম: উল্লেখ ফন্ট

-

একটি সহজ ডকুমেন্ট এর জন্য {{ HTMLElement("body") }} তে আপনি ফন্ট এবং ডকুমেন্ট এর বাকি সেটিংস সেট করতে পারেন।

-
    -
  1. আপনার সিএসএস ফাইল সম্পাদনা করুন.
    2. -
  2. ডকুমেন্ট জুড়ে ফন্ট পরিবর্তন করতে নিম্নলিখিত নিয়ম যোগ করুন. সিএসএস ফাইল উপরে এটি একটি লজিক্যাল জায়গা, কিন্তু আপনি যখন এখানে রাখবেন সেখানেও তার একই প্রভাব পরবে: - 
    body {font: 16px "Comic Sans MS", cursive;}
-
    -
    3. -
  3. একটি মন্তব্য যোগ করুন যেটি নিয়ম ব্যাখ্যা করে এবং একটি স্পেস দিন যাতে করে আপনার পছন্দের বিন্যাসের সাথে এটি মিলে যায়।
    4. -
  4. ফাইল সংরক্ষণ করুন এবং ফলাফল দেখতে আপনার ব্রাউজার রিফ্রেশ করুন। যদি আপনার  Comic Sans MS এ থাকা আকার অথবা হাতে লেখা  itlic আকার সমর্থন না করে ,তবে আপনার ব্রাউজার অন্নক্স কোন আকার পছন্দ করতে পারেঃ
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. ব্রাউজার মেনুবার, View > Text Size > Increase (or View > Zoom > Zoom In) পছন্দ করতে পারে। আপনি স্টাইল টি 16 পিক্সেল উল্লেখ যদিও, ডকুমেন্ট পড়া একটি ব্যবহারকারী মাপ পরিবর্তন করতে পারেন।
    6. -
-
- Challenge -

Without changing anything else, make all six initial letters twice the size in the browser's default serif font:

- - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
-
-
- Possible solution
-

Add the following style declaration to the strong rule:

- 
  font: 200% serif;
-
- If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. -

 

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

পরবর্তী ?

-

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}আপনার নমুনা ডকুমেন্ট ইতিমধ্যে বিভিন্ন নামে রং ব্যবহার করতে সক্ষম. The next section দেয়া আছে রং এর তালিকা এবং কিভাবে আপনি রং প্রয়োগ করবেন।

diff --git a/files/bn/web/css/getting_started/why_use_css/index.html b/files/bn/web/css/getting_started/why_use_css/index.html deleted file mode 100644 index 860f960e96..0000000000 --- a/files/bn/web/css/getting_started/why_use_css/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: কেন CSS ব্যবহার করবেন ? -slug: Web/CSS/Getting_Started/Why_use_CSS -tags: - - NeedsReview -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/bn-BD/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}এটি  CSS Getting Started টিউটোরিয়ালের দ্বিতীয় অধ্যায় এবং ব্যাখ্যা করে কেন ডকুমেন্ট CSS ব্যবহার করে। আপনি CSS ব্যবহার করেন আপনার নমুনা ডকুমেন্ট একটি স্টাইলশীট যুক্ত করতে।

- -

তথ্য:  CSS কেন ব্যবহার করব ?

- -

CSS একটি ডকুমেন্টের তথ্য সামগ্রী সেটি কিভাবে প্রদর্শিত হবে তার বিবরণ থেকে পৃথক রাখতে সাহায্য করে। ডকুমেন্ট কিভাবে প্রদর্শিত হবে তার বিবরণ স্টাইল হিসাবে পরিচিত। আপনি কন্টেন্ট থেকে স্টাইল আলাদা রাখুন যাতে আপনি পারেন :

- - - -
-
উদাহরণ
- -

আপনার ওয়েব সাইটের হাজার হাজার পৃষ্ঠা থাকতে পারে যারা অনুরূপ। CSS এর ব্যবহার করে,আপনি একটি সাধারণ ফাইলের মধ্যে তথ্য সংরক্ষণ করুন যা সকল পৃষ্ঠা শেয়ার করে।

- -

যখন একজন ব্যবহারকারী একটি ওয়েব পেইজ প্রদর্শন করে,ব্যবহারকারীর ব্রাউজার পৃষ্ঠার কন্টেন্টের পাশাপাশি স্টাইলের তথ্য লোড করে।

- -

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

-
- -

HTML দিয়ে সাধারণত আপনি ডকুমেন্টের তথ্য সামগ্রী বর্ণনা করেন মার্কআপ ভাষা ব্যবহার করে,তার স্টাইল নয়।আপনি CSS ব্যবহার  করেন এর স্টাইল নির্দিষ্ট করতে,এর বিষয়বস্তু নয় ।(পরবর্তীতে এই টিউটোরিয়ালে, আপনি এই ব্যবস্থার কিছু ব্যতিক্রম দেখতে পাবেন।)

- -
-
আরো তথ্য
- -

এছাড়াও HTML এর মত একটি মার্কআপ ভাষা স্টাইল নির্দিষ্ট করতে কিছু উপায় প্রদান করে।

- -

উদাহরণস্বরূপ, HTML এ আপনি টেক্সট গাঢ় করতে একটি <b> ট্যাগ ব্যবহার করতে পারেন, এবং আপনি তার <body> ট্যাগে একটি পৃষ্ঠার ব্যাকগ্রাউন্ড রং নির্ধারণ করতে পারবেন।

- -

আপনি যখন CSS ব্যবহার করেন,আপনি সাধারণত মার্কআপ ভাষার এই বৈশিষ্ট্যগুলি ব্যবহার এড়িয়ে যান যাতে করে আপনার সকল ডকুমেন্ট এর স্টাইল সংক্রান্ত তথ্য এক জায়গায় হয়।

-
- -

অ্যাকশন: একটি স্টাইলশীট তৈরি

- -
    -
  1. পূর্বের মত একই ডিরেক্টরির মধ্যে আরেকটি টেক্সট ফাইল তৈরি করুন। এই ফাইলটি আপনার স্টাইলশীট হবে. এটির নাম দিন : style1.css
    2. -
  2. আপনার CSS ফাইলের মধ্যে, এই এক লাইন কপি এবং পেস্ট করুন, তারপর ফাইলটি সংরক্ষণ করুন: - 
    strong {color: red;}
-
    -
    3. -
- -

আপনার ডকুমেন্টের সাথে স্টাইলশীট যুক্তকরণ

- -
    -
  1. আপনার ডকুমেন্ট এর সাথে আপনার স্টাইলশীট সংযুক্ত করতে,আপনার HTML ফাইল সম্পাদনা করুন। এখানে হাইলাইট করা লাইনটি যোগ করুন: - - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. ফাইলটি সংরক্ষণ করুন এবং আপনার ব্রাউজারের ডিসপ্লে রিফ্রেশ করুন। স্টাইলশীটটি প্রথম অক্ষরগুলোকে লাল করে তোলে, এভাবে: - - - - - - -
    Cascading Style Sheets
    -
    3. -
- -
-
চ্যালেঞ্জ
- -

লাল ছাড়াও, CSS কিছু অন্যান্য রং এর নাম প্রদান করে।

- -

রেফারেন্স না দেখে, আরো পাঁচটি  রঙের নাম খুঁজে বের করুন যা আপনার স্টাইলশীট এ কাজ করে।

- -
-
Possible solution
- -

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

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

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

- -

{{nextPage("/bn-BD/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}এখন আপনার একটি পৃথক স্টাইলশীট এর সাথে যুক্ত একটি নমুনা ডকুমেন্ট আছে, আপনি প্রস্তুত জানতে learn more কিভাবে আপনার ব্রাউজার তাদের সমন্বয় করে যখন এটি ডকুমেন্ট প্রদর্শন করে।

diff --git "a/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" "b/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" deleted file mode 100644 index ab2f05fae5..0000000000 --- "a/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" +++ /dev/null @@ -1,355 +0,0 @@ ---- -title: নির্বাচক সমুহ -slug: Web/CSS/Getting_Started/নই -tags: - - Beginner - - CSS - - CSS Selector - - 'CSS:Getting_Started' - - Example - - Guide - - NeedsBeginnerUpdate - - NeedsLiveSample - - NeedsUpdate - - Web -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}এটি CSS Getting Started টিউটোরিয়াল এর ৫ম অংশ; এটি ব্যাখ্যা করে আপনি কিভাবে স্টাইল সমুহ নির্বাচিতভাবে প্রয়োগ করবেন, এবং কিভাবে বিভিন্ন প্রকার নির্বাচক সমুহ বিভিন্ন প্রাধান্য পায়। আপনি আপনার নমুনা নিবন্ধে কিছু এট্রিবিউট যোগ করতে পারেন, এবং আপনি সেসব এট্রিবিউটগুলো আপনার নমুনা স্টাইলশীটে ব্যবহার করতে পারেন ।

-

তথ্যঃ নির্বাচকসমুহ

-

সি এস এস ভাষা ব্যাখ্যা করার জন্য সি এস এস এর নিজস্ব পারিভাষিক শব্দ আছে। এই টিউটোরিয়াল এর পূর্বে, আপনি একটি লাইন তৈরি করুন যেমনঃ

-
strong {
-  color: red;
-}
-
-

সি এস এস পারিভাষিক শব্দে, এই সমগ্র লাইন হল নিয়ম। এই নিয়ম শুরু হ্য় strong দিয়ে, যেটা একটা নির্বাচক। এটা নির্বাচন করে কোন উপাদানগুলো DOM-এ আছে কোন নিয়ম প্রয়োগ করা আছে ।

-

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

-

বাকা বন্ধনীর ভেতরের অংশে প্রকাশিত হয়।

-
-

মূলশব্দ color হল একটি বৈশিষ্ট্য এবং red হল একটি মান।

-

একই প্রকাশিত অংশে বৈশিষ্ট্যের জোড়া মানের পর সেমিকোলন দিয়ে অন্য বৈশিষ্ট্যের জোড়া মান থেকে আলাদা করা হয়।

-

এই টিউটোরিয়াল এ নির্বাচক যেমন strong উল্লেখ করা হয় ট্যাগ নির্বাচক হিসেবে। সি এস এস সুনির্দিষ্টভাবে এটিকে টাইপ নির্বাচক হিসেবে উল্লেখ করে।

-
-

নির্বাচকসমুহ যেগুলো আপনি সি এস এস নিয়মে ব্যবহার করতে পারেন এই টিউটোরিয়ালের পাতা সেগুলো সম্পর্কে আরো বেশি ব্যাখ্যা করে।

-

ট্যাগ নামের সাথে আপনি এট্রিবিউট এর মান নির্বাচকসমুহে ব্যবহার করতে পারেন।এটি আপনার নিয়মকে আরো সুনির্দিষ্ট করতে অনুমোদন করে।

-

সি এস এস এর দুইটি এট্রিবিউট এর বিশেষ অবস্থা আছে। তারা হল class এবং id.

-

নির্বচকসমুহের ক্লাস

-

class এট্রিবিউট একটি উপাদানকে নামকৃত ক্লাস এ বরাদ্দ করার জন্য ব্যবহার করা হয়। আপনি আপনার ক্লাস এর জন্য কোন নাম পছন্দ করবেন এটা আপনার উপর। একটা নিবন্ধে বিভিন্ন উপাদান একই নামের হতে পারে।

-

আপনার স্টাইলশীটে, ক্লাস নামের পূর্বে আপনি যখন একটি নির্বাচকে ব্যবহার করবেন তখন দাড়ি লিখুন(period) ।

-

নির্বাচকসমুহের আইডি

-

id এট্রিবিউট একটি উপাদানকে একটি আইডিতে বরাদ্দ করার জন্য ব্যবহৃত হয়। আপনি আইডিটার জন্যে কি নাম পছন্দ করবেন এটি আপনার উপর। নিবন্ধটিতে আইডি নাম অবশ্যই একটি এবং অনন্য হতে হবে।

-

আপনার স্টাইলশীটে, আপনি যখন নির্বাচকে ব্যবহার করবেন আইডির পূর্বে একটি নাম্বার সাইন(hash) লিখুন।

-
-
- উদাহরণ
- এই এইচ টি এম এল ট্যাগের একটি class এট্রিবিউট এবং একটি id এট্রিবিউট আছেঃ
- 
<p class="key" id="principal">
-
-

নিবন্ধে আইডি মান, মূল, অবশ্যই এক এবং অনন্য হতে হবে, কিন্তু অন্য ট্যাগসমুহে একই ক্লাস নাম, মূল থাকতে পারে।

-

একটি সি এস এস স্টাইলশীটে, এই নিয়ম সকল উপাদানকে একই ক্লাস key green এর অন্তর্ভূক্ত করেছে। (তারা সবাই {{ HTMLElement("p") }} এর উপাদান নাও হতে পারে)

- 
.key {
-  color: green;
-}
-
-

এই নিয়ম একটি উপাদানকে id principal বোল্ড করে :

- 
#principal {
-  font-weight: bolder;
-}
-
-
-

যদি একটির বেশি নিয়ম একটি উপাদান এ প্রয়োগ করা হয় এবং একই বৈশিষ্ট্য উল্লেখ করা হয়, তাহলে সি এস এস নিয়মের উপর প্রাধান্য দেয় যেটা আরো বেশি সুনির্দষ্ট নির্বাচক। একটি আইডি নির্বাচক ক্লাস নির্বাচক এর চেয়ে আরো সুনির্দিষ্ট, যেটা পর্যায়ক্রমে একটি ট্যাগ নির্বাচক এর চেয়ে আরো বেশি সুনির্র্দিষ্ট।

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

আপনি নির্বাচকসমুহকে একত্রিত করতে পারেন, নির্বাচককে আরো বেশি সুনির্দিষ্ট করার জন্যে।

-

উদাহরণ স্বরুপ, নির্বাচক .key ক্লাস নাম key যুক্ত সকল উপাদানকে নির্বাচন করে। নির্বাচক p.key ক্লাস নাম key যুক্ত উপাদানকে শুধুমাত্র {{ HTMLElement("p") }} নির্বাচন করে ।

-

আপনি দুইটি বিশেষ এট্রিবিউট class এবং id দ্বারা নিয়ন্ত্রিত নন। আপনি অন্য এট্রিবিউট সুনির্দিষ্ট করতে পারেন স্কয়ার বন্ধনী ব্যবহার করে। যেমন, নির্বাচক [type='button']button মানের একটি type এট্রিবিউট দ্বারা সকল উপাদানকে নির্বাচিত করে ।

-
-

যদি স্টাইলশীটে নিয়মগুলো পরস্পর বিরোধী হ্য় এবং তারা সমানভাবে সুনির্দিষ্ট হয়, তাহলে তারা সি এস এস নিয়মকে প্রাধান্য দেয় যেটা স্টাইলশীটে পরের দিকে আছে।

-

যখন পরস্পর বিরোধী নিয়মের কারণে আপনার সমস্যা হবে, আরো সুনির্দিষ্ট কোন নিয়মের দ্বারা এটি সমাধান করার চেষ্টা করুন, তাহলে সেটাই প্রাধান্য পাবে। যদি আপনি সেটা করতে না পারেন, চেষ্টা করুন স্টাইলশীটের শেষের দিকের কোন নিয়মের কাছাকাছি যেতে তাহলে সেটিই প্রাধান্য পাবে।

-

নকল ক্লাসের নির্বাচকসমূহ

-

একটি pseudo-class সি এস এস এর মূলশব্দ নির্বাচকের সাথে যুক্ত যেটা উপাদানের বিশেষ অবস্থা নির্বাচনের জন্য সুনির্দিষ্ট করে। উদাহরণ সরূপ, {{ Cssxref(":hover") }} একটা স্টাইল প্রয়োগ করা যাবে যখন কোন ব্যবহারকারী নির্বাচকের দ্বারা সুনির্দিষ্ট করে দেয়া উপাদানের উপর চলাচল করবে।

-

নকল ক্লাসসমুহ, নকল উপাদানগুলোর সাথে, আপনাকে একটি উপাদানের উপর শুধু স্টাইল প্রয়োগ করতে দেয়না, সেই সাথে বহিরাগত কারণের সাথে সংযোগ করে যেমন নেভিগেটরের ইতিহাস ({{ cssxref(":visited") }}, উদাহরণ স্বরূপ), এটার উপাদানের অবস্থা (যেমন {{ cssxref(":checked") }} কিছু উপাদানের গঠনের উপর), অথবা মাউসের অবস্থান (যেমন {{ cssxref(":hover") }} যেটা আপনাকে জানাবে মাউসটি উপাদানের উপর আছে নাকি নাই). একটি সম্পূর্ণ নির্বাচক সমুহের তালিকা, CSS3 Selectors working spec এখানে যান।

-
-
- Syntax
- 
selector:pseudo-class {
-  property: value;
-}
-
-
-

নকল ক্লাসসমুহের তালিকা

- -

তথ্যঃ সম্পর্কের ভিত্তিতে নির্বাচক সমুহ

-

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

- - - - - - - - - - - - - - - - - - - - - - - - -
- সম্পর্কের ভিত্তিতে পরিচিত নির্বাচকসমুহ
নির্বাচকনির্বাচিতসমুহ
A EAny E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > EAny E element that is a child of an A element
E:first-childAny E element that is the first child of its parent
B + EAny E element that is the next sibling of a B element (that is: the next child of the same parent)
-

আপনি জটিল সম্পর্কগুলোকে প্রকাশ করার জন্যে এগুলো একত্রিত করতে পারেন।

-

আপনি * (asterisk) এই চিহ্নটি ব্যবহার করতে পারেন "যেকোনো উপাদান" বুঝানোর জন্যে।

-
-
- উদাহরণ
-

একটি এইচ টি এম এল টেবিলের একটি id এট্রিবিউট, কিন্তু এটির সারি এবং ছোট অংশগুলোর আলাদা আলাদা সনাক্তকারী থাকে নাঃ

- 
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
-

এই নিয়মগুলা সকল সারির প্রথম অংশকে বোল্ড করে, এবং দ্বিতীয় অংশকে মনোস্থানিক করে। তারা শুধু একটি সুনির্দিষ্ট টেবিলকে প্রভাবিত করেঃ

- 
    #data-table-1 td:first-child {font-weight: bolder;}
-    #data-table-1 td:first-child + td {font-family: monospace;}
-
-

ফলাফল এরূপ দেখায়ঃ

- - - - - - -
- - - - - - - - -
Prefix0001default
-
-
-
-
- আরো বিস্তারিত
-

প্রচলিত উপায়ে, আপনি যদি একটি নির্বাচককে আরো সুনির্দিষ্ট করেন, তখন আপনি এটার প্রাধান্য বৃদ্ধি করতে পারবেন।

-

আপনি যদি পদ্ধতিগুলো ব্যবহার করেন, আপনার নিবন্ধে অনেকগুলো ট্যাগ-এর class অথবা id এট্রিবিউটগুলোকে আপনি সুনির্দিষ্ট করার প্রয়োজন পরিহার করতে পারবেন। তা ব্যতীত, সি এস এস কাজ করবে না।

-

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

-

টেবিল সম্পর্কে আরো বেশি উদাহরণ এর জন্যে, সি এস এস রেফারেন্স পাতায় Tables দেখুন।

-
-

কাজঃ ক্লাস এবং আইডি নির্বাচক সমুহের ব্যবহার

-

১। আপনার এইচ টি এম এল ফাইলটি সম্পাদনা করুন, কপি এবং পেস্ট করার মাধ্যমে।

-

২। তারপর প্রথম কপিতে আইডি এবং ক্লাস এট্রিবিউট ব্যবহার করুন এবং একটি আইডি এট্রিবিউট দ্বিতীয় কপিতে দিন যেমন নিচে দেখানো হয়েছে। বিকল্পরূপে, আবার সমগ্র ফাইলকে কপি এবং পেস্ট করুনঃ

-
    -
  1. - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p id="first">
-      <strong class="carrot">C</strong>ascading
-      <strong class="spinach">S</strong>tyle
-      <strong class="spinach">S</strong>heets
-    </p>
-    <p id="second">
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. এখন আপনি আপনার সি এস এস ফাইলটি সম্পাদনা করুন। সমগ্র বিষয় পুনঃস্থাপন করুনঃ
    - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    3. -
  3. ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - লাইনের ক্রম কোন প্রভাব ফেলে না এটি দেখানোর জন্য আপনি আপনার সি এস এস ফাইলে লাইনগুলো পুনরায় সাজানোর চেষ্টা করতে পারেন।
    -
    -

    ক্লাস নির্বাচকসমুহ .carrot এবং .spinach ট্যাগ নির্বাচক strong এর উপরে প্রাধান্য পায়।

    -

    আইডি নির্বাচক #first ক্লাস এবং ট্যাগ নির্বাচকের উপরে প্রাধান্য পায়।

    -
    4. -
-
-
- প্রতিদ্বন্দ্বিতাসমুহ
-
    -
  1. আপনার এইচ টি এম এল ফাইল পরিবর্তন করা ছাড়া, আপনার সি এস এস ফাইলে একটি একক নিয়ম যোগ করুন যেটা সকল প্রথম অক্ষরকে একই রং এর করে রাখে যেমন এখন তারা আছে, কিন্তু দ্বিতীয় বর্ণনায় অন্য সকল টেক্সটকে নীল করে।
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. আপনি যে নিয়মটি এইমাত্র যোগ করেছেন তা এখন পরিবর্তন করে (অন্য কিছু পরিবর্তন না করে), প্রথম বর্ণনাকে নীল করার জন্যেঃ
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
-
-
- Possible solution
-
    -
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: - 
    #second { color: blue; }
-
    - A more specific selector, p#second also works.
    2. -
  2. Change the selector of the new rule to be a tag selector using p: - 
    p { color: blue; }
-
    -
    3. -
- Hide solution
- See a solution for the challenge.
-

কাজঃ নকল ক্লাসের নির্বাচকসমুহের ব্যবহার

-
    -
  1. নিচের মত একটি এইচ টি এম এল ফাইল তৈরি করুনঃ
    2. -
  2. - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
-
    -
    3. -
  3. এখন আপনার সি এস এস ফাইল সম্পাদনা করুন। সমগ্র বিষয়গুলো পুনঃস্থাপন করুনঃ
    - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-
    -
    4. -
  4. ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ (আপনার মাউসটি নিচের লিংকের উপর রাখুন প্রভাব দেখার জন্য): - - - - - - -
    Go to our Home page  
    -
    5. -
-

কাজঃ সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহের ব্যবহার

-

সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহ দ্বারা আপনি জটিল ক্যাসকেড এলগরিদম তৈরি করতে  পারবেন।এটি ব্যবহার করার জন্য একটি সাধারণ কৌশল , উদাহরণ স্বরূপ, in order to create pure-CSS dropdown menus তৈরি করার জন্য (এটি শুধুমাত্র সি এস এস, JavaScript ব্যতিরেকে). এই কৌশল এর সারাংশ হল নিম্নে বর্ণিত নিয়মের মত একটি নিয়ম তৈরি করাঃ

-
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-

প্রয়োগ করার জন্য একটি এইচ টি এম এল গঠন নিম্নে দেয়া হলঃ

-
<div class="menu-bar">
-  <ul>
-    <li>
-      <a href="example.html">Menu</a>
-      <ul>
-        <li>
-          <a href="example.html">Link</a>
-        </li>
-        <li>
-          <a class="menu-nav" href="example.html">Submenu</a>
-          <ul>
-            <li>
-              <a class="menu-nav" href="example.html">Submenu</a>
-              <ul>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-              </ul>
-            </li>
-            <li><a href="example.html">Link</a></li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</div>
-
-

আপনার সম্পূর্ণ CSS-based dropdown menu example দেখুন একটি সম্ভব সংকেতের জন্য।

-

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

-

আপনার নমুনা স্টাইলশীট এখন এবং জটিল দেখাতে শুরু করেছে। পরবর্তী অংশ সি এস এসকে easier to read করার উপায় বর্ণনা করে {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git "a/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" "b/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" deleted file mode 100644 index 557ea8824c..0000000000 --- "a/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" +++ /dev/null @@ -1,302 +0,0 @@ ---- -title: Layout -slug: Web/CSS/Getting_Started/লে-আউট -tags: - - CSS - - CSS Float - - CSS Text Align - - CSS Unit - - 'CSS:Getting_Started' - - Example - - Guide - - Intermediate - - NeedsLiveSample - - NeedsUpdate - - Web - - needs review -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}} CSS শুরু করার ১২তম অধ্যায় এটি;  আপনার ডকুমেন্টের লে-আউট কীভাবে adjust করা যায় তা রয়েছে এখানে। আপনার নমুনা ডকুমেন্টের লে-আউট আপনি পরিবর্তন করতে পারেন।

-

তথ্যঃ লে-আউট

-

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

-

আপনি যখন একাধিক ব্রাউজারে প্রায় একইরকম দৃশ্যমান লে-আউট ডিজাইন করেন, তবে তা আপনার স্টাইলশীট ব্রাউজারের ডিফল্ট স্টাইলশীট এবং লে-আউট ইঞ্জিনের সাথে যেভাবে interact করে তা বেশ জটিল হতে পারে। এটিও একটি অগ্রসরমান বিষয়, এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।

-

এই পেজে আপনার চেষ্টা করে দেখার জন্য কিছু সহজ কৌশল বর্ণনা করা আছে।

-

ডকুমেন্ট স্ট্রাকচার

-

আপনি যদি আপনার ডকুমেন্টের লে-আউট নিয়ন্ত্রণ করতে চান তবে আপনাকে এর স্ট্রাকচার পরিবর্তন করতে হতে পারে।

-

আপনার ডকুমেন্টের মার্কআপ ল্যাংগুয়েজের খুব সম্ভবত স্ট্রাকচার তৈরি করার জন্য general-purpose ট্যাগ আছে। যেমন ধরুনঃ HTMLএ আপনি স্ট্রাকচার তৈরির জন্য {{ HTMLElement("div") }} এলিমেন্ট ব্যবহার করতে পারেন।

-
-
- উদাহরণ
-

নমুনা ডকুমেন্টে, দ্বিতীয় শিরোনামের আওতায় সংখ্যায়িত প্যারাগ্রাফে নিজস্ব কোন কন্টেইনার নেই।

-

আপনার স্টাইলশীট প্যারাগ্রাফগুলোর চারদিকে বর্ডার টানতে পারে না, কারণ এই সেক্টরটি বিশেষায়িত করার জন্য কোন এলিমেন্ট নাই।

-

স্ট্রাকচারের এই সমস্যা সমাধানের জন্য, আপনি প্যারাগ্রাফের চারদিকে একটি {{ HTMLElement("div") }} ট্যাগ যোগ করতে পারেন। এই ট্যাগটি ,তাই এটি নির্দিষ্ট করা যেতে পারে একটি id অ্যাট্রিবিউট দিয়েঃ

- 
<h3>Numbered paragraphs</h3>
-<div id="numbered">
-  <p>Lorem ipsum</p>
-  <p>Dolor sit</p>
-  <p>Amet consectetuer</p>
-  <p>Magna aliquam</p>
-  <p>Autem veleum</p>
-</div>
-
-

এখন আপনার স্টাইলশীট দুটি লিস্টের চারদিকে বর্ডার দেওয়ার জন্য একটি রুল ব্যবহার করতে পারেঃ

- 
ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-
-

এরকম দেখতে পাওয়ার কথাঃ

- - - - - - -
-

(A) The oceans

-
-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-
-

সাইজ ইউনিট

-

এত দূর পর্যন্ত এই টিউটোরিয়ালে আপনি pixel (px)এ সাইজ নির্ধারণ করেছেন। কম্পিউটার স্ক্রিনের মত কিছু কিছু ডিসপ্লে ডিভাইসের ক্ষেত্রের জন্য এটি যথাযথ। কিন্তু ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করে তখন আপনার লে-আউটে সমস্যা দেখা দিতে পারে।

-

অধিকাংশ ক্ষেত্রেই শতকরা হিসাবে অথবা ems (em)এ সাইজ নির্দিষ্ট করে দেওয়াই ভাল। em হল nominally চলমান ফন্টের (একটি m এর প্রসস্ততা) সাইজ। ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করেন, আপনার লে-আউট নিজে পরিবর্তন থেকেই হয়ে যায়।

-
-
- উদাহরণ
-

এই টেক্সটের বামদিকের বর্ডারের সাইজ পিক্সেলে নির্ধারিত।

-

ডানদিকের বর্ডারের সাইজ ems দিয়ে নির্ধারিত।

-

আপনার ব্রাউজারে, ফন্ট পরিবর্তন করে দেখতে পারেন কীভাবে ডানদিকের বর্ডার adjusts হয় কিন্তু বাঁদিকের বর্ডার হয় নাঃ

- - - - - - -
-
- আমার আকার পুনঃনিরধারণ করুন
-
-
-
-
- বিস্তারিত
-

অন্যান্য ডিভাইসের ক্ষেত্রে, অন্যান্য দৈর্ঘ্য একক প্রযোজ্য।

-

এই টিউটোরিয়ালের পরবর্তী পেজে এ সংক্রান্ত আরো তথ্য আছে।

-

মান ও একক সংক্রান্ত বিস্তারিত জানার জন্য, CSS Specificationএ আপনি  see Values ব্যবহার করতে পারেন।

-
-

টেক্সট লে-আউট

-

কোন এলিমেন্টের একাধিক কন্টেন্ট কীভাবে এক লাইনে নিয়ে আসা যায় তা দুইটি প্রপার্টি দিয়ে নির্ধারিত হয়। সাধারণ লে-আউট adjustment এর জন্য আপনি সেগুলো ব্যবহার করতে পারেনঃ

-
-
- {{ cssxref("text-align") }}
-
- কন্টেন্ট এক লাইনে নিয়ে আসা। এই ভেল্যুগুলোর যেকোনটি ব্যবহার করেঃ left, right, center, justify
-
- {{ cssxref("text-indent") }}
-
- আপনার নির্ধারিত পরিমাণ অনুসারে কন্টেন্ট ইনডেন্ট করেঃ
-
-

শুধুমাত্র লেখাতেই না কোন এলিমেন্টের লেখা সদৃশ যেকোন কনটেন্টে এই প্রপার্টিগুলো প্রয়োগ করা যেতে পারে। খেয়াল রাখবেন, এগুলো এলিমেন্টের children দিয়ে inherited, তাই অবান্তর ফলাফল এড়াতে  আপনাকে খুব সম্ভবত childrenএ সেগুলো বন্ধ করে নেওয়ার প্রয়োজন হতে পারে।

-
-
- উদাহরণ
-

শিরোনাম মাঝে আনতেঃ

- 
h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-
-

ফলাফলঃ

- - - - - - -
-

(A) The oceans

-
-

যে কোন HTML ডকুমেন্টে, শিরোনামের নিচে আপনি যে কনটেন্ট দেখেন তা গঠনগত ভাবে শিরোনামের আওতাধীন নয়। তাই আপনি যখন এরক্ম কোন শিরোনামকে এক লাইনে নিয়ে আসেন, তখন শিরোনামের নিচের ট্যাগগুলো ওই স্টাইলের অন্তর্ভুক্ত হয় না।

-
-

Floats

-

{{ cssxref("float") }} প্রপার্টি কোন এলিমেন্টকে ডানে-বামে সরায়। এলিমেন্টের অবস্থান ও আকার নির্ধারণের জন্য এটি একটি সহজ উপায়।

-

ডকুমেন্ট কনটেন্টের বাকি অংশ সাধারণত floated এলিমেন্টের চারদিকেই থাকে। অন্যান্য এলিমেন্টগুলোতে {{ cssxref("clear") }} প্রপার্টি ব্যবহার করে আপনি তাদের ফ্লট এর বাইরে থাকা নিয়ন্ত্রণ করতে পারেন।

-
-
- উদাহরণ
-

আপনার নমুনা ডকুমেন্টে, লিস্ট উইন্ডোতে ছড়িয়ে থাতে পারে। সেগুলোকে বাঁদিকে সরিয়ে আপনি তা রোধ করতে পারেন।

-

শিরোনামগুলোকে সঠিক স্থানে রাখার জন্য, আপনাকে অবশ্যই এটি নির্দিষ্ট করে দিতে হবে যেন সেগুলো ফ্লট মুক্ত থাকেঃ

- 
ul, #numbered {float: left;}
-h3 {clear: left;}
-
-
-

এমন দেখতে পাওয়ার কথাঃ

- - - - - - -
-

(A) The oceans

-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-

(বক্সের ডানদিকে সামান্য padding দরকার, সেখানে বর্ডার লেখার খুবই কাছে হয়ে গিয়েছে।)

-

অবস্থান নির্ধারণ

-

চারটি উপায়ে আপনি কোন এলিমেন্টের অবস্থান নির্ধারণ করতে পারেন {{ cssxref("position") }} প্রপার্টি এবং নিচের যেকোন একটি ভেল্যু নির্দিষ্ট করে।

-

এগুলো এডভান্সড প্রপার্টি। সহজভাবেও এগুলো ব্যবহার করা যায় — সেজন্যই এই বেসিক টিউটোরিয়ালে এ সম্পর্কে বলা হয়েছে। তবে কমপ্লেক্স লে-আউটের জন্য এগুলো ব্যবহার করা কিছুটা জটিল হতে পারে।

-
-
- relative
-
- এলিমেন্টের স্বাভাবিক অবস্থানের আপেক্ষিক পরিবর্তন করা হয়। Use this to shift an element by a specified amount. You can sometimes use the element's margin to achieve the same effect.
-
- fixed
-
- এক্ষেত্রে এলিমেন্টের অবস্থান নির্দিষ্ট। এলিমেন্টের অবস্থান ডকুমেন্ট উইন্ডো অনুযায়ী নির্ধারণ করুন। বাকি ডেকুমেন্ট স্ক্রল করলেও এ ক্ষেত্রে এলিমেন্টটি স্থির থাকবে।
-
- absolute
-
- parent এলিমেন্টের তুলনায় এলিমেন্টের অবস্থান স্থির থাকবে। শুধুমাত্র একটি parent যার নিজের অবস্থান relative, fixed অথবা absolute দিয়ে নির্ধারিত সেটি কাজ করবে। position: relative নির্দিষ্ট করে আপনি যেকোন parent এলিমেন্টকেই এর জন্য প্রস্তুত করে নিতে পারেন; এর জন্য কোন শিফট ব্যবহার না করেই।
-
- static
-
- ডিফল্ট। অবস্থান নির্ধারণ করা সম্পূর্ণ বন্ধ করার প্রয়োজন হলে এই ভেল্যুটি ব্যবহার করুন।
-
-

position প্রপার্টির এই ভেল্যুগুলোর সাথে সাথে (static ব্যতীত), আরো কিছু প্রপার্টি নির্দিষ্ট করুনঃ top, right, bottom, left, width, height। আপনি কোথায় আপনার এলিমেন্টটি দেখতে পেতে চান তা এগুলো নির্দেশ করে এবং এর সাথে সাথে আকারও।

-
-
- উদাহরণ
-

দুইটি এলিমেন্ট একে অপরের উপর অবস্থাআন দেওয়ার জন্য, আপনার ডকুমেন্টের ভেতরে দুইটি এলিমেন্টসহ একটি  parent কন্টেইনার তৈরি করুনঃ

- 
<div id="parent-div">
-  <p id="forward">/</p>
-  <p id="back">\</p>
-</div>
-
-

আপনার স্টাইলশীটে, parents এর অবস্থান relative করুন। এখানে কোন প্রকৃত শিফট নির্ধারণের কোন প্রয়োজন নেই। children এর অবস্থান absolute নির্ধারণ করুনঃ

- 
#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-}
-
-#forward, #back {
-  position: absolute;
-  margin:0px; /* no margin around the elements */
-  top: 0px; /* distance from top */
-  left: 0px; /* distance from left */
-}
-
-#forward {
-  color: blue;
-}
-
-#back {
-  color: red;
-}
-
-

ফলাফলে ফরওয়ার্ড শ্ল্যাশের উপরে ব্যাকশ্ল্যাশ দিয়ে এমনটি দেখতে পাওয়ার কথাঃ

-
-

/

-

\

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

অবস্থান নির্ধারণের পুরো বিষয়টির উপর CSS Specificationএ দুইটি জটিল অধ্যায় আছেঃ  Visual formatting model এবং Visual formatting model details.

-

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

-
-

Action: লে-আউট নির্ধারণ

-
    -
  1. আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, doc2.html এবং স্টাইলশীট, style2.css, এই অংশে উপরের উদাহরণ ডকুমেন্ট স্ট্রাকচার এবং ফ্লটস।
    2. -
  2. ফ্লটস উদাহরণে, আপনার padding যুক্ত করুন ডানদিকের বর্ডার থেকে টেক্সট 0.5 em দূরে সরানোর জন্য।
    3. -
-
-
- চ্যালেঞ্জ
-

আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, doc2.html, শেষ করার আগ দিয়ে এই ট্যাগটি যুক্ত করে, </body> ট্যাগের ঠিক আগে।

- 
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
-

এই টিউটোরিয়ালে আপনি যদি ইমেজ ফাইলটি আগে থেকে ডাউনলোড না করে থাকেন, তবে এখন সেটি ডাউনলোড করে নিন এবং নমুনা ফাইলের মত একই ডিরেক্টরিতে এটি রাখুনঃ

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

আপনার ডকুমেন্টের কোথায় ইমেজটি দেখা যেতে ঠিক করে নিন। এবার আপনার ব্রাউজার রিফ্রেশ করুন আপনার কাজ সঠিক হয়েছে কিনা তা দেখার জন্য।

-

আপনার স্টাইলশীটে একটি রুল যুক্ত করুন যা আপনার ডকুমেন্টে উপরের দিকে ডানে ইমেজটি রাখে।

-

আপ্নার ব্রাউজার রিফ্রেশ করে উইন্ডোটি ছোট করুন। যখন আপনি আপনার ডকুমেন্ট স্ক্রল করেন তখন দেখুন ইমেজটি উপরের দিকে ডানে থাকে কিনাঃ

-
-
-

(A) The oceans

-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-

 

-
- Yellow map pin
-
-
-
-

 এই চ্যালেঞ্জটির একটি সমাধান দেখুন।

-

এর পরে?

-

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }} এইমাত্র আপনি এই বেসিক CSS টিউটোরিয়ালের সব টপিক প্রায় শেষ করে ফেলেছেন। পরবর্তী পেজটি CSS রুলের আরো অ্যাডভান্সড সিলেক্টর বর্ণনা করে এবং আরো কিছু নির্দিষ্ট উপায় যা দিয়ে আপনি টেবিল স্টাইল করতে পারেন।

-- cgit v1.2.3-54-g00ecf