This translation is incomplete. Please help translate this article from English.
Go to Previous Section:
Why use CSS? এটিCSS Getting Started টিউটোরিয়াল এর তৃতীয় অধ্যায়; এটা আপনার ব্রাউজারে CSS কিভাবে কাজ করে ব্যাখ্যা করে। আপনার নমুনা ডকুমেন্ট বিশ্লেষণ করেন,তার স্টাইল এর বিবরণ প্রকাশের মধ্য দিয়ে।
তথ্য: CSS কিভাবে কাজ করে
যখন একটি ব্রাউজার একটি ডকুমেন্ট প্রদর্শন করে, এটি অবশ্যই ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল তথ্য এর সমন্বয় ঘটায়।এটি ডকুমেন্ট টি কে দুই ধাপে প্রসেস করে থাকেঃ
- ব্রাউজার টি মার্ক আপ লেঙ্গুয়েজ এবং সিএসেস একটি কাঠামোতে পরিবর্তন করে যেটির নাম DOM (ডকুমেন্ট অবজেক্ট মডেল). The DOM কম্পিউটার এর মেমরি তে ডকুমেন্ট কে উপস্থাপন করে.এটি ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল এর সমন্বয় ঘটায়।
- ব্রাউজার টি DOM এর কন্টেন্ট গুলো কে তুলে ধরে।
একটি মার্ক আপ ল্যাঙ্গুয়েজ 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>
বাস্তব উদাহরণঃ
https://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 টি ইন্সটল করতে হবে।
- মোজিলা ব্রাউজার টি ব্যাবহার করুন আপনার স্যাম্পল HTML ডকুমেন্ট টি ওপেন করবার জন্য.
- আপনার ব্রাউজার এর মেনু বার থেকে , বাছাই করুন Tools > DOM Inspector, অথবা এভাবে Tools > Web Development > DOM Inspector.
আরও
যদি আপনার মোজিলা ব্রাউজার এ DOMi না থাকে, তাহলে এটি ব্যাবহার করতে পারেন install it from the Add-ons site এবং ব্রাউজার রি-স্টার্ট করতে হবে। তারপর ফিরে যাবেন টিউটোরিয়াল এ।
যদি আপনি DOMi ইন্সটল করতে না চান ( অথবা আপনি নন- মোজিলা ব্রাউজার ব্যাবহার করেন), আপনি ব্যাবহার করতে পারেন Web X-Ray Goggles, যেভাবে বিবরন দেয়া আছে পরবর্তী সেকশন এ। অথবা আপনি সেকশন টি বাদ রেখে পরবর্তী পেজ এ চলে যেতে পারেন. সেকশন টি বাদ দিয়ে গেলে টিউটোরিয়াল এর বাকি অংশে কোন প্রভাব ফেলবে না।
- DOMi এ, আপনার ডকুমেন্ট এর nodes গুলোকে বিস্তৃত করুন arrows এ ক্লিক করার মাধ্যমে।
দ্রষ্টব্য: আপনার HTML ফাইল এ স্পেসিং করলে হয়ত DOMi কিছু শুন্য text nodes দেখাতে পারে,যেগুলো আপনি উপেক্ষা করতে পারেন।
রেসাল্ট এর অংশ হয়ত এরূপ দেখাবে যা নিরভর করছে আপনি কোন nodes গুলোকে বিস্তৃত করেছেন:
│ ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ►╴STRONG │ │
যখন আপনি একটি node সিলেক্ট করবেন, আপনিDOMi's এর ডান-হাত প্যান টি ব্যাবহার করতে পারেন আরও কিছু খুজে বের করার জন্য. উদাহরন সরূপ , আপনি যখন একটি text node সিলেক্ট করবেন, DOMi আপনাকে ডান-হাত প্যান এ টেক্সট টি দেখাবে.
যখন আপনি একটি element node সিলেক্ট করবেন, DOMi সেটি বিশ্লেষণ করবে এবং ডান হাত প্যান এ অনেক তথ্য সরবরাহ করবে।স্টাইল তথ্য হল বিতরন করা তথ্য এর ই একটি অংশ।
DOMi তে, স্ট্রং node এ ক্লিক করুন।
DOMi এর ডান হাত প্যান টি ব্যাবহার করুন খুজে বের করার জন্য কোথায় node এর রঙ লাল রাখা হয়েছে এবং কোথায় এটিকে সাধারন টেক্সট এর তুলনায় গাঢ় দেখান হয়েছে।
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.
Web X-Ray Goggles এর বেবহারঃ
Web X-Ray Goggles , DOM Inspector এর তুলনায় কম তথ্য সরবরাহ করে কিন্তু এটি ব্যাবহার করা ও ইন্সটল করা সহজ।
- Web X-Ray Goggles এর জন্য হোম পেজ এ যান।
- পেজের bookmarklet এর লিংক টি কে টেনে ব্রাউজার টুলবার এ আনুন।
- আপনার স্যাম্পল HTML ডকুমেন্ট টি খুলুন।
- Web X-Ray Goggles কে এক্টিভেট করুন টুলবার এর bookmarklet এ ক্লিক করার মাধ্যমে।
- আপনার কার্সর এর পয়েন্টআর টিকে, ডকুমেন্ট এর এলেমেন্ট দেখার জন্য ডকুমেন্ট এর উপর ঘোরান।
পরবর্তীতে কি আছে?
Go to Next Section:
Cascading & Inheritanceযদি আপনি চ্যালেঞ্জ টি গ্রহন করে থাকেন,আপনি দেখতে পেয়েছেন যে একাধিক জায়গা থেকে স্টাইল তথ্য যোগাযোগ স্থাপন করে একটি এলেমেন্ট এর জন্য একটি ফাইনাল স্টাইল তৈরি করতে।next page এই সব যোগাযোগ স্থাপনের বেপারে আরও বিবরন দিবে।