Delete
Setting
Add New Item
Menu List
Title | Content Type | Order | Action | ||||||
---|---|---|---|---|---|---|---|---|---|
{{kb_content.name}} {{kb_content.name}} | {{setValue(content_types, kb_content.content_type)}} | {{kb_content.sort_order}} | Preview Edit Edit Content | ||||||
{{kb_content.name}} | {{setValue(content_types, kb_content.content_type)}} | {{kb_content.sort_order}} | Preview Edit Edit Content | ||||||
No record |
সিএসএস বক্স মডেল(CSS Box Model)
সিএসএস একটি সহজ এবং সহজ উপায়ে ওয়েব ডকুমেন্টের স্টাইল নিয়ন্ত্রণ করতে ব্যবহৃত হয়। সিএসএস হ'ল "ক্যাসকেডিং স্টাইল শীট" এর সংক্ষিপ্ত রূপ। এই টিউটোরিয়ালটি সিএসএস 1, সিএসএস 2 এবং সিএসএস 3 উভয় সংস্করণকে কভার করে এবং সিএসএসের সম্পূর্ণ ধারণা দেয়, এটির প্রাথমিক থেকে শুরু করে উন্নত ধারণাগুলি পর্যন্ত
এইচটিএমএল এলিমেন্ট গুলোকে একটি বক্স হিসেবে ধরে নিলে, ওয়েব পেজ ডিজাইনে বিশেষ সুবিধা পাওয়া যায়। বিশেষ করে কোন ওয়েব পেজের লেআউট ডিজাইন করতে এটা বেশ সুবিধাজনক একটি পদ্ধতি।
বক্স মডেল
সিএসএস বক্স মডেল হল এইচটিএমএল এলিমেন্টের চারপাশের বর্ডার, মার্জিন, প্যাডিং এবং এলিমেন্ট বা কন্টেন্ট এর সম্মিলিত অবস্থা। বক্স মডেল প্রপার্টিগুলো কোন কন্টেন্ট এর চারপাশে বর্ডার, মার্জিন, প্যাডিং বা আউটলাইন নির্ধারণ করে।
উদাহরনঃ
বক্স মডেলের বিভিন্ন অংশের বর্ণনা -
- Margin - বর্ডারের চারপাশের ফাকা স্থান নির্ধারণ করাই হল মার্জিন। মার্জিনের পৃষ্ঠদেশ বা background এ কোন রঙ ব্যবহার করা যায় না, এটা পুরোপুরি transparent বা স্বচ্
- Border - কন্টেন্ট প্যাডিং এর চারপাশে অর্থাৎ মার্জিন এবং প্যাডিং এর মধ্যস্থানেই বর্ডার অবস্থান করে। পৃষ্ঠদেশ বা background এর রং, বর্ডার এর উপর প্রভাব বিস্তার করে।
- Padding - কন্টেন্ট এর চারপাশের ফাকা স্থান নির্ধারণ করা হয় প্যাডিং ব্যবহার করে। প্যাডিং পৃষ্ঠদেশ বা background এ কোন রঙ ব্যবহার করা যায় না, এটা পুরোপুরি transparent বা স্বচ্ছ
- Content - বক্স মডেলের কোন কন্টেন্ট হল টেক্সট, ছবি ইত্যাদি, অর্থাৎ যেগুলো ওয়েব পেজে প্রদর্শিত হয়
উদাহরণ
div {
width: 400px;
border: 5px dotted tomato;
padding: 40px;
margin: 30px;
}