css_part31
Nesting Selector
আমরা এ পর্যমত্ম একটি Selected যেমন <p> <h 1> <div> ইত্যাদি ব্যবহার করেছি এবং class
বা id যোগ করে এর ভিন্নতা এনেছি। একটি Selectorএর মধ্যে আরও একটি Selector অর্থাৎ Nested
Selector ব্যবহার করা সম্ভব । নিচে আমরা h1 এর জন্য একটি Style তৈরী করেছি পরে Class নিয়ে সেটিকে পরিবর্তন
করেছি এবং h1 এর জন্য তৃতীয় আরেকটি Style তৈরী করেছি Class
(background) এর সাথে। এক্ষেত্রে class ব্যবহার করলে h1 এর জন্য তৃতীয় Style
প্রযোজ্য হবে এবং Class ব্যবহার না করলে প্রথম Style প্রযোজ্য হবে।
লক্ষ্য করুন নিচের প্রোগ্রাম।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Table ElementBoder extra element.</title>
<style>
h1
{color:blue; text-align:center;}
.background
{background-color:red;}
.background
h1{color:white; text-align:right;}
</style></head>
<body>
<h1>This
is a heading with style one.</h1>
<div
class="background">
<h1>This
is a heading with class and style three.</h1>
</div>
<h1>This
is a heading with no class and style three.</h1>
</body></html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
CSS Nevigation Bar এর ব্যবহার
সাধারন link ও list এলিমেন্ট ব্যবহার করে Navigation তৈরী করা হয়। ইতিমধ্যে আমরা মেনু
তৈরীর মাধ্যমে Navigation Bar তৈরী করেছি। আপাতত
সামান্য আলোকপাত করা যাক। Navigation bar হচ্ছে link এর একটি list যেটি <ul> ও <li> ট্যাব ব্যবহার তৈরী করা
হয়। নিচের প্রোগ্রামগুলি লক্ষ্য করুন।
একটি সাধারন লিংক
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Table ElementBoder extra element.</title>
</head>
<body>
<ul><li><a
href="#">Home</a></li>
<li><a
href="#">Product</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Contact Us</a></li></ul>
</body></html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
Bullet বিহীন লিংক
আমরা জানি list–style–type প্রোপ্রার্টিতে value
হিসাবে none দিলে কোন bullet
আসবে না। আর ব্রাউজারের ডিফল্ট সেটিংকে clean করতে margin ও padding কে 0 করে দিতে হবে
এবং এটি দ্বারা Vertical ও Horizontal নেভিগেশন বার তৈরী করা যাবে। লক্ষ্য করুন নিচের প্রোগ্রাম।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Table ElementBoder extra element.</title>
<style>
ul{list-style-type:none;margin:0;padding:0;}
</style></head>
<body>
<ul><li><a
href="#">Home</a></li>
<li><a
href="#">Product</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Contact Us</a></li></ul>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
Navigation barএ Block সংযোগ
block সংযোগ করলে সর্ম্পূন এলাকাটি clickable হয় শুধুমাত্র Text নয়। এছাড়া Block এর কারনে নির্দিষ্ট
সীমানার পর একটি নতুন লাইন তৈরী হবে। আমরা প্রোগ্রামে width=100px করেছি। এজন্য প্রতি 100 pixel পর পর আলাদা লাইন তৈরী হবে। সম্পূূর্ন style টি একটি <a> Anchor ট্যাগের মধ্যে
রাখতে হবে।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Table ElementBoder extra element.</title>
<style>
ul{list-style-type:none;margin:0;padding:0;}
a{display:block;width:100px;background-color:red;
color:white;font-weight:bold;text-align:center;}
</style></head>
<body>
<ul><li><a
href="#">Home</a></li>
<li><a
href="#">Product</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Contact
Us</a></li></ul></body></html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
৪ ধাপে ভিন্ন Style সংযোগ
এখন আমরা link, visited, hover ও active স্টাইল সংযোগ করবো। মনে রাখবেন hover টি link ও visited এর পরে এবং active লিংকটি শেষে যোগ করতে হবে। ২টি ধাপে একই Style হলে a ট্যাগের সাথে একটি কমা (,) দিয়ে পাশাপাশি দিতে হবে। যেমন a:link, a:visited ইত্যাদি। নিচের
প্রোগ্রাম লক্ষ্য করুন।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Table ElementBoder extra element.</title>
<style>
ul{list-style-type:none;margin:0;padding:0;}
a:link,a:visited
{display:block;width:100px;background-color:red;
color:white;font-weight:bold;text-align:center;
padding:5px;text-decoration:none;}
a:hover,a:active{background-color:#ff8080;}
</style>
</head>
<body>
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Product</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Contact Us</a></li>
</ul>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
Horizontal Navigation Bar তৈরী করা
আমরা জানি <li> এলিমেন্টটি ডিফল্টভাবে Block
এলিমেন্ট। সুতরাং Horizontal Navigation এর জন্য Block এলিমেন্টকে তুলে দিতে
হবে। অপর দিকে একটির পর একটি আইটেম এক লাইনে প্রদর্শনের জন্য display:inline
এলিমেন্ট কে যোগ করতে হবে। ব্যাস! নিচের প্রোগ্রাম
লক্ষ্য করুন।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Table ElementBoder extra element.</title>
<style>
ul{list-style-type:none;margin:0;padding:0;}
li{display:inline;}
a:link,a:visited
{width:100px;background-color:red;color:white;
font-weight:bold;text-align:center;padding:5px;
text-decoration:none;}
a:hover,a:active{background-color:#ff8080;}
</style>
</head>
<body>
<ul><li><a
href="#">Home</a></li>
<li><a
href="#">Product</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Contact Us</a></li></ul>
</body></html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
Float ব্যবহারে Horizontal Navigation
Block এলিমেন্ট রেখেও Horizontal Navigation তৈরী করা সম্ভব। সেক্ষেত্রে সম্পুর্ন Block এলিমেন্টটি পাশাপাশি বসাতে হবে। এজন্য display:inline এলিমেন্টের পরিবর্তে float:left/right ব্যবহার করতে হবে।
সুতরাং আমাদের আগের প্রোগ্রামে display:inline বাদ দিয়ে float:left/right সংযোজন করুন এবং
মুছে দেওয়া display:blook এলিমেন্টটি আবার সংযোজন
করুন।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Table ElementBoder extra element.</title>
<style>
ul{list-style-type:none;margin:0;padding:0;}
li{float:right;}
a:link,a:visited
{display:block;width:100px;background-color:red;
color:white;font-weight:bold;text-align:center;
padding:5px;text-decoration:none;}
a:hover,a:active{background-color:#ff8080;}
</style>
</head>
<body>
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Product</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Contact Us</a></li>
</ul>
</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_
