বক্স মডেল (Box Model)
সকল HTML উপাদানকে CSS দ্বারা স্ট্যাইল যুক্ত করার ক্ষেত্রে বক্স হিসেবে বিবেচনা করা হয়।ওয়েব পেজের লে আউট ডিজাইনের ক্ষেত্রে বক্স মডেল খুবই গুরুত্বপূর্ণ।সি এস এস বক্স মডেল প্রকৃত পক্ষে একটা বক্স যা, কোন HTML উপাদানকে আবৃত করে রাখে।
বক্স মডেল তৈরি করার জন্য Declaration এ কয়েকটি প্রপার্টি নির্ধারণ করে দিতে হয়।এগুলো হচ্ছে,
- width - ( বক্সের প্রস্থ)
- border - ( বর্ডার এর রং, আকার এবং স্ট্যাইল নির্ধারণ করে দিতে হয়।)
- padding - ( বক্সের ভেতরে দিকে যে পরিমান ফাঁকা স্থান থাকবে )
- margin – ( বক্সের বাইরের দিকে যে পরিমান ফাঁকা স্থান থাকবে)
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color:#00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color:#4F8A10;
background-color:#DFF2BF;
}
.warning {
color:#9F6000;
background-color:#FEEFB3;
}
.error {
color:#D8000C;
background-color:#FFBABA;
}
div{width:350px;
border:#F5D349 10px solid;
margin:15px;
padding:8px;
background:#FEEFB3;}
</style>
</head>
<body >
<div class="info">Information message.</div>
<div class="success">Successful operation message.</div>
<div class="warning">Warning message.</div>
<div class="error">Error message.</div>
<div>
<p>
<h2 style="color:#C33;">This is an example of Box Model.</h2>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত