This translation is incomplete. Please help translate this article from English.
Go to Previous Section:
কিভাবে CSS কাজ করে.এটি হচ্ছে CSS শুরু করুন টিউটোরিয়াল এর চতুর্থ পার্ট; এটার মূল বিষয় হচ্ছে কিভাবে cascade এর সাথে স্টাইলশিট এর যোগসূত্র করতে হয়, এবং কিভাবে উপাদানগুলো তাদের পূর্ববর্তী থেকে স্টাইল গুলো পায়।ইনহেরিটেন্স ব্যবহার করে আপনি আপনার নমুনা স্টাইলশিট টি যোগ করবেন আপনার ডকুমেন্ট এর অনেকগুল পার্ট এর স্টাইল একটি স্টেপ বা ধাপে পরিবর্তন করার জন্য।
তথ্য: Cascading এবং inheritance
একটি উপাদানের জন্য সর্বশেষ স্টাইল টি অনেক গুলো ভিন্ন ভিন্ন জায়গায় নির্দিষ্ট হতে পারে, যা কিনা জটিল ভাবে যোগাযোগ করতে পারে। এই জটিল যোগাযোগ CSS কে শক্তিশালী করে, কিন্তু একই সাথে এটি বিভ্রান্তিকর এবং ডিবাগ করতে কঠিন করে ফেলে।একটি cascade থেকে স্টাইল তথ্যের প্রধান ৩ টি সূত্র রয়েছে।
এগুলো হল:
- markup ভাষার জন্য ডিফল্ট স্টাইল সমূহ।
- যিনি ডকুমেন্টটি পড়ছেন তার দ্বারা স্টাইল সমূহ চিহ্নিতকরণ।
- স্টাইল সমূহ author দ্বারা ডকুমেন্টে সংযোগ।
এগুলো তিনটি জায়গায় উল্লেখ করা যেতে পারে:
- external ফাইল এ : এই টিউটোরিয়াল প্রাথমিকভাবে স্টাইল সমূহের
পদ্ধতি আলোচনা করেছে। - ডকুমেন্টের শুরুর সংজ্ঞাতে:এই পদ্ধতি ব্যবহার করুন শুধুমাত্র সেই স্টাইল সমূহের জন্য যা শুধু ঐ page এ ব্যবহৃত হয়।
- ডকুমেন্টের নির্দিষ্ট উপাদানে:এটি least maintainable পদ্ধতি,
কিন্তু পরীক্ষার জন্য ব্যবহার করা যেতে পারে।
- external ফাইল এ : এই টিউটোরিয়াল প্রাথমিকভাবে স্টাইল সমূহের
user এর স্টাইল ব্রাউজার এর ডিফল্ট স্টাইল কে পরিবর্তন করে।ডকুমেন্টের author এর স্টাইল এর আরো কিছু পরিবর্তন করে।এই টিউটোরিয়ালে আপনি আপনার নমুনা ডকুমেন্টের author, এবং আপনি শুধু author স্টাইলসীট সমূহের সাথে কাজ করুন।
আপনি যখন এই ডকুমেন্টটি ব্রাউজারে পড়েন,স্টাইল এর অংশ যা দেখেন তা HTML এর জন্য আপনার ব্রাউজার এর ডিফল্ট থেকে আসে।
স্টাইলের অংশ আসতে পারে কাস্টমাইজড ব্রাউজার সেটিংস অথবা একটি কাস্টমাইজড স্টাইল definition ফাইল থেকে। ফায়ারফক্স এ,সেটিংস পছন্দের ডায়লগ এ কাস্টমাইজড হতে পারে,অথবা আপনি আপনার ব্রাউজার প্রফাইল একটি ফাইল নামে userContent.css এ নির্দিষ্ট করতে পারেন।
স্টাইলসীট এর স্টাইল উইকি server দ্বারা ডকুমেন্টে সংযোগ হয়।
যখন আপনি আপনার নমুনা ডকুমেন্টটি ব্রাউজার এ open করবেন, <strong> উপাদানগুলো bolder হবে অন্যান text থেকে। এটি HTML এর জন্য আপনার ব্রাউজার এর ডিফল্ট থেকে আসে।
<strong> উপাদানগুলো লাল। এটি আসে আপনার নিজস্ব নমুনা স্টাইলসীট থেকে।
<strong> উপাদানগুলো <p> উপাদানগুলোর স্টাইল এ ও inherit করে,কারন এরা এর children। একইভাবে, <p> উপাদানটি inherit করে <body> উপাদানগুলোর স্টাইল এ।
cascade এর স্টাইল এর জন্য, author স্টাইলসীট এর priority আছে,তারপর reader স্টাইলসীট ,ব্রাউজার এর ডিফল্ট।
inherited স্টাইল এর জন্য, a child node's own স্টাইল has priority over স্টাইল inherited from its parent.
এগুলোই একমাত্র priorities না যা apply হয়।এই টিউটোরিয়াল এর পরবর্তী page আরো বর্ণনা করবে।
CSS also provides a way for the reader to override the document author's style, by using the keyword !important.
This means that as a document author, you cannot always predict exactly what your readers will see.
যদি আপনি সব বিস্তারিত জানতে চান cascading এবং inheritance সম্পর্কে, দেখুন Assigning property values, Cascading, and Inheritance CSS Specification এ।
কাজ: inheritance এর ব্যবহার
- আপনার নমুনা CSS ফাইলটি edit করুন।
- লাইনটি সংযোগ করুন copy এবং past করে।
যাইহউক,উপরে সংযোগ করা বেশি logical কারন আপনার ডকুমেন্টটিতেএটা সত্যিই কোন ব্যাপার না যে আপনি লাইন এর উপরে বা নিচে এটি যোগ করেছেন কিনা যা ইতিমধ্যে আছে।
<p>উপাদানটি<strong>উপাদান এর parent:p {color: blue; text-decoration: underline;} - এখন আপনার নমুনা ডকুমেন্ট এর উপর effect দেখতে ব্রাউজারটি refresh করুন। underlining affect পরেছে paragraph এর সব text এর উপর, initial letters সহ।
<strong>উপাদানগুলো inherit করেছে underlined style তাদের<p>parent উপাদানটি থেকে।
কিন্তু
<strong>উপাদানটি এখনও লাল। লাল রং তাদের নিজস্ব স্টাইল, তাই এর priority আছে নীল রং এর parent<p>উপাদানটির উপর।
| Cascading Style Sheets |
| Cascading Style Sheets |
| Cascading Style Sheets |
Move the declaration for underlining from the rule for <p> to the one for <strong>. The resulting file looks like this:
p {color: blue; }
strong {color: red; text-decoration: underline;}
Hide solution
What next?
Go to Next Section:
SelectorsYour sample style sheet specifies styles for tags, <p> and <strong>, changing the style of the corresponding elements throughout your document. The next section describes how to specify style in more selective ways.