css_part27
Outlineএ একসাথে একাধিক Property ও Value ব্যবহার করা যাবে। এতে কোডিং ও ছোট হবে। যেমন নিচের প্রোগ্রাম লক্ষ্য করুন।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE html>
<html>
<head> <title> CSS outline properties </title>
<style>
p{border:5px solid red;outline:5px green double;}
</style>
</head>
<body>
<p>Nova Computer.</p>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
CSS Margin এর ব্যবহার
বর্ডার বা আউটলাইনের বাইরে ফাঁকা জায়গা রাখার জন্য margin ব্যবহার করা হয়। মার্জিনের কোন brackground color নাই এবং এটি স্বচ্ছ। তবে {Body} ট্যাগের মধ্যে color ব্যবহার করলে এখানে কালার আসবে। এজন্য আলাদা div নিয়ে মার্জিন দেওয়া উচিত । মার্জিনের value হিসাবে auto. length (cm,px ইত্যাদি) বা present (%) ব্যবহার করা হয়। border এর properties মত এগুলি হুবুহু এক, যেমন margin-top, margin-bottom, margin-left, margin-right এভাবে property ব্যবহার করে আলাদা আলাদা মার্জিন দেওয়া যায়। আবার শুধু margin প্রোপার্টির সাথে ১ থেকে ৪টি value দিয়ে আলাদা আলাদা মার্জিন দেওয়া যায়।
যেমন margin:10px 20px 30px 40 px (px বা cm বা in) দিলে উপরে 10px ডানে 20px নিচে 30px ও বামে 40px ফাঁকা জায়গা রাখবে।
margin: 10 px, 20 px 30px দিলে উপরে 10px ডানে ও বামে 20px এবং নিচে 3 px ফাঁকা রাখবে
margine:10px 20px দিলে উপর ও নিচে 10px এবং ডানে ও বামে 20px ফাঁকা রাখবে
margin; 25px দিলে ৪ দিকেই 25px ফাঁকা জায়গা রাখবে। মার্জিনে Negative value দেওয়া যায়।
চলুন নিচের মত প্রোগ্রাম তৈরী করে বিষয়টি পরীস্কার হওয়া যাক
px ব্যবহারে মার্জিন
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE html>
<html>
<head>
<title> CSS margin properties </title>
<style>
div.a
{margin:auto; background-color:yellow;
border:5px solid red; outline:5px green double;}
div.b
{margin:25px; background-color:yellow;
border:5px solid red; outline:5px green double;}
div.c
{margin:100px; background-color:yellow;
border:5px solid red; outline:5px green double;}
div.d
{margin:10px 5px 15px 50px; background-color:yellow;
border:5px solid red; outline:5px green double;}
</style>
</head>
<body>
<div class="a">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
<div class="b">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
<div class="c">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
<div class="d">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
Persent (%) ব্যবহারে মার্জিন
এখন একই প্রোগ্রাম px এর বদলে % ব্যবহার করে তৈরী করবেন।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন।
<style>
div.a
{margin:10%; background-color:yellow;
border:5px solid red; outline:5px green double;}
div.b
{margin:20%; background-color:yellow;
border:5px solid red; outline:5px green double;}
div.c
{margin:10% 20% 15% 5%; background-color:yellow;
border:5px solid red; outline:5px green double;}
div.d
{margin:10% 20%; background-color:yellow;
border:5px solid red; outline:5px green double;}
</style>
</head>
<body>
<div class="a">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
<div class="b">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
<div class="c">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
<div class="d">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
cm ব্যবহারে মার্জিন
উপরের প্রোগ্রামটি এখন % এর বদলে cm (centi meter) ব্যবহার করে লিখবো।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE html>
<html>
<head>
<style>
div.a {margin:.5cm; background-color:yellow;
border:5px solid red; outline:5px green double;}
div.b {margin:2cm; background-color:yellow;
border:5px solid red; outline:5px green double;}
div.c{margin:1.5cm 2cm .5cm 3cm; background-color :yellow;border:5px solid red; outline:5px green double;}
</style></head>
<body>
<div class="a">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
<div class="b">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
<div class="c">This is Nova Computer. This is Nova Computer. This is Nova Computer. This is Nova Computer.</div>
</body></html>ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
