css_part25
CSS এ Border ব্যবহার
Border সম্বন্ধে HTML অংশের table অংশে বিসত্মারিত আলোচনা করা হয়েছে । তবে এখানে table বর্ডার নহে শুধু বর্ডার সম্বন্ধে আলোচনা করবো।কোডিংগুলি একই রকমের। Borderএ ৩টি মূল প্রোপার্টি রয়েছে। এগুলির নিয়মগুলি আগে বর্ণনা করি। প্রোপার্টিজগুলি হচ্ছে:
border width-এতে বিভিন্ন ধরনের প্রস্থের বর্ডার দেওয়া হয়, যেমন চিকন, মোটা (thin midium thick) ইত্যাদি।
border style-এতে বিভিন্ন ডিজাইনের বর্ডার দেওয়া হয়, যেমন সলিড, ডটেড, 3d (dotted, dashed, solid, 3d) ইত্যাদি।
border color-এটি দ্বারা বর্ডারের বিভিন্ন কালার দেওয়া যায়। যেমন- লাল,কাল,সবুজ, ট্রান্সপারেন্ট, rgb (red,green,blue transparent) ইত্যাদি।
একসাথে সবগুলো Border prorerties ব্যবহার করার জন্য Border লিখে কোলন চিহ্ন দিয়ে width style color পর পর দিতে হয়। যেমন- border: medium solid red ;
চারদিকে ভিন্ন ভিন্ন বর্ডার
সব border properties এর ক্ষেত্রে মাত্র একটি value দিলে চারদিকের জন্য প্রযোজ্য হয়। যেমন border –color দিয়ে উদাহরন দেওয়া যাক। মনে রাখবেন border- style ও border-width সব প্রোপার্টিজ এর জন্য এটি প্রযোজ্য। এছাড়া left, right, top ও bottomএর জন্য আলাদা ভাবে value দেওয়া যায়। নিচের উদাহরন দেখুন :
border-color:red
চার দিকে লাল কালারের বর্ডার দেখা যাবে।
border-color:red green
এক্ষেত্রে উপর ও নিচে লাল ও ডান বামে সবুজ বর্ডার পাওয়া যাবে।
border-color :red green blue
এক্ষেত্রে উপরে লাল, ডানে ও বামে সবুজ এবং নিচে নীল কালারের বর্ডার পাওয়া যাবে।
border-color:red green blue magenta
এক্ষেত্রে উপরে লাল, ডানে সবুজ, নিচে নীল ও বামে মেজেন্টা কালারের বর্ডার পাওয়া যাবে।
border-style ও border-width এই প্রোপার্টিজতেও একই নিয়ম প্রাযোজ্য।
এছাড়া border-top-color, border-bottom-color, border-left-color ও border- right- color প্রোপার্টি দ্বারা আলাদা আলাদা color value দেওয়া যাবে ।
আবার border–top:mediunm solid red
border-bottom:medium solid Green
border-left:medium solid blue
border-rigth:medium solid magenta
এভাবেও value দেওয়া যাবে। তবে border-width দেওয়ার আগে আবশ্যই একটি border-style দিতে হবে আমরা border- style:solid দিয়েছি ।
Border width এর ব্যবহার
নিচের মত কোডিংসহ প্রোগ্রাম তৈরী করুন
Program_CSS070
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE html>
<html>
<head>
<title> CSS border properties </title>
<style>
p.a {border-style:solid; border-width:thin;}
p.b {border-style:solid; border-width:medium;}
p.c {border-style:solid; border-width:thick;}
p.d {border-style:solid; border-width:1px;}
p.e {border-style:solid; border-width:10px;}
p.f {border-style:solid; border-width:20px;}
p.g {border-style:solid; border-width:5px 10px;}
p.h {border-style:solid; border-width:5px 10px 20px ;}
p.i {border-style:solid border-width:20px; border-top-width:5px; }
p.j {border-style:solid; border-top-width:5px; border-right-width:10px; border-bottom-width:15px; border-left-width:20px; }
</style>
</head>
<body>
<p class="a">Nova Computer.</p>
<p class="b">Nova Computer.</p>
<p class="c">Nova Computer.</p>
<p class="d">Nova Computer.</p>
<p class="e">Nova Computer.</p>
<p class="f">Nova Computer.</p>
<p class="g">Nova Computer.</p>
<p class="h">Nova Computer.</p>
<p class="i">Nova Computer.</p>
<p class="j">Nova Computer.</p>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
Bordre Style এর ব্যবহার
Border Style দ্বারা কি ডিজাইনের বর্ডার প্রদশির্ত হবে সেটি নির্ধারন করা হয়। এর valueগুলি নিয়ে সামান্য আলোকপাত করা যায়।
None- কোন বর্ডার থাকবে না।
Hiddin- বর্ডার লুকানো থাকবে
Dotted- ডট ডট ফোটা দিয়ে বর্ডার দেখাবে
Dashed- ড্যাস চিহৃ দিয়ে বর্ডার দেখাবে।
Solid - সলিড রেখা দিয়ে বর্ডার দেখাবে।
Double -সমান পুরুত্ত্বের ২লাইনে বর্ডার দেখাবে।
Groove -3D বর্ডার দেখাবে। Top ও left এ কালার গাঢ় থেকে হালকা এবং Right
ও bottom এ কালার হালকা থেকে গাঢ় দেখাবে।
Riged - 3D বর্ডার দেখাবে। groove এর সর্ম্পূন উল্টা
Inset - এটিও 3D বর্ডার তবে Top ও left এর কালার গাঢ় এবং right ও bottom
এর কালার হালকা দেখাবে।
Outset -এটিও 3D বর্ডার তবে Inset এর সর্ম্পূন উল্টা।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE html>
<html>
<head>
<title> CSS border properties </title>
<style>
p.a {border-style:none; border-width:thin;}
p.b {border-style:dotted; border-width:medium;}
p.c {border-style:dashed; border-width:thick;}
p.d {border-style:solid; border-width:1px;}
p.e {border-style:groove; border-width:10px;}
p.f {border-style:ridge; border-width:20px;}
p.g {border-style:inset; border-width:5px 10px;}
p.h {border-style:outset;
border-width:5px 10px 20px ;}
p.i {border-style:hidden; border-width:20px;
border-top-width:5px; }
p.j {border-top-style:solid;
border-bottom-style:dotted;
border-right-style:dashed;
border-left-style:inset; border-width:10px;}
</style>
</head>
<body>
<p class="a">Nova Computer.</p>
<p class="b">Nova Computer.</p>
<p class="c">Nova Computer.</p>
<p class="d">Nova Computer.</p>
<p class="e">Nova Computer.</p>
<p class="f">Nova Computer.</p>
<p class="g">Nova Computer.</p>
<p class="h">Nova Computer.</p>
<p class="i">Nova Computer.</p>
<p class="j">Nova Computer.</p>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
Border Color এর ব্যবহার
Border Color দ্বারা বর্ডারের রঙ নির্ধারণ করা হয়। অন্য প্রোপার্টির কালার নির্ধারনের মত এখানেও Value হিসাবে name, rgb বা hex value দেওয়া যাবে। এছাড়া Transparent কালারও দেওয়া যাবে। border-width ও border- style প্রোপার্টিতে ব্যবহৃত সমস্ত নিয়ম এখানেও কার্যকর থাকবে। নিচের মত প্রোগ্রাম তৈরী করে বিষয়টি আরও পরীস্কার হউন।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE html>
<html>
<head><title> CSS border properties </title>
<style>
p.a {border-style:none; border-width:thin;
border-color:red;}
p.b {border-style:dotted; border-width:medium;
border-color:blue;}
p.c {border-style:dashed; border-width:thick;
border-color:#000000;}
p.d {border-style:solid; border-width:1px;
border-color:#ff9900;}
p.e {border-style:solid; border-width:10px;
border-color:red green blue yellow;}
p.f {border-style:ridge; border-width:20px;
border-color:red green;}
p.g {border-style:inset; border-width:5px 10px;
border-color:rgb(255,255,255);}
p.h {border-style:outset; border-width:5px 10px 20px;
border-color:rgb(255,130,255)}
p.i {border-top-style:solid; border-width:10px;
border-color:transparent;}</style> </head>
<body>
<p class="a">Nova Computer.</p>
<p class="b">Nova Computer.</p>
<p class="c">Nova Computer.</p>
<p class="d">Nova Computer.</p>
<p class="e">Nova Computer.</p>
<p class="f">Nova Computer.</p>
<p class="g">Nova Computer.</p>
<p class="h">Nova Computer.</p>
<p class="i">Nova Computer.</p>
</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...
Next_
