css_part39
Hover দেওয়া
এখন আমরা hover সংযুক্ত করবো hover
এ অন্য কোন ইমেজ ব্যবহার না করে এই একই ইমেজের Top
ও right পরিমান থেকে কিছু কিছু অংশ প্রদর্শন করানো হয়েছে।
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<html>
<head><title> CSS image spite
</title>
<style>
.navlist{position:relative;}
.navlist
li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
.navlist li, .navlist
a{height:50px;display:block;}
.home{left:0px;width:45px;}
.home{background:url('nav_button.gif') 0
0;}
.home a:hover{background:url('nav_button.gif')0-45px;}
.prev{left:65px;width:45px;}
.prev{background:url('nav_button.gif')
-45px 0;}
.home a:hover{background:url('nav_button.gif')0-45px;}
.next{left:130px;width:45px;}
.next{background:url('nav_button.gif')
-90px 0;}
.home a:hover{background:url('nav_button.gif')0-90px;}
</style></head>
<body>
<ul class="navlist">
<li class="home"><a
href=""></a></li>
<li class="prev"><a
href=""></a></li>
<li class="next"><a
href=""></a></li>
</ul></body></html>
ব্রাউজার দিয়ে
খুললে নিচের মত ফলাফল পাওয়া যাবে।
CSS Pseudo–class এর ব্যবহার/color
সুডো ক্লাস নিয়ে আগেও সামান্য আলোচনা করা হয়েছে। যেমন link, hover ইত্যাদি আমরা আগেই আলোচনা করেছি। এখন আমরা বাকী
আলোচনা টুকু সেরে ফেলবো। pseudo
class দ্বারা কিছু selectorএ special effect দেওয়া যায়।
css class এর Syntax হচ্ছে নিম্নরুপ
Selector: pseudo class {property: values ;}
যেমন : hover {color: red;}
pseudo- class এর সাথে CSS classএর ব্যবহারের Syntax হচ্ছে নিম্নরুপ
selector.class:pseudo class {properly: value;}
যেমন : a.red:
hover {color: red;}
<a class= “red” href= “program1.html”>goto
program1</a>
First- child নামের pseudo-class
first–child নামের ডিফল্ট সুডো ক্লাস রয়েছে। এটি কে <p>
<h1…h6> <div> ইত্যাদি বিভিন্ন
এলিমেন্টের সাথে ব্যবহার করা যায়া। এটি কয়েকটি এলিমেন্টর মধ্যে প্রথম এলিমেন্টে (first
child) এর উপর নিয়ন্ত্রিত হয়। আমরা h1 এর সাথে first-child প্রয়োগ করবো। নিচের প্রোগ্রাম লক্ষ্য করুন।
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<html>
<head><title> CSS image spite
</title>
<style>
h1:first-child{ color:red;}
</style></head>
<body>
<h1>This is some text.</h1>
<h1>This is some text.</h1>
<h1>This is some text.</h1>
</body></html>
ব্রাউজার দিয়ে
খুললে নিচের মত ফলাফল পাওয়া যাবে।
Element এর সাথে আরেকটি element
ইতিমধ্যে h1 এলিমেন্ট ব্যবহার
করেছি এখন এই এলিমেন্টের সাথে i(italic) এলিমেন্টকে color সহ ব্যবহার করবো first–child
সুডো ক্লাসের সাথে।
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title> CSS Pseudo class and element
</title>
<style>
h1 > i:first-child{color:red;}
</style>
</head>
<body>
<h1>This is Normal Text. <i>but
this part is ITALIC red color</i>
This is Normal Text. <i> this part is ITALIC but not red
colored</i> </h1>
<h1>This is Normal Text.<i>but this part is ITALIC
red color</i> This is Normal Text.<i> this part is ITALIC but
not red colored</i> </h1>
</body>
</html>
ব্রাউজার দিয়ে
খুললে নিচের মত ফলাফল পাওয়া যাবে।
আবারও ২ টি element একসাথে ব্যবহার
এখন আমরা এই একই কোড একটু ঘুড়িয়ে লিখবো এতে ফলাফল ও পরিবর্তন হবে। নিচের
প্রোগ্রাম লক্ষ্য করুন।
<!DOCTYPE html>
<html>
<head>
<title> CSS Pseudo class and element
</title>
<style>
h1:first-child i{color:red;}
</style>
</head>
<body>
<h1>This is Normal Text. <i>but
this part is ITALIC red color</i>
This is Normal Text. <i> this part is ITALIC red
color</i></h1>
<h1> This is Normal Text.<i> this part is ITALIC but
not red colored</i> This is Normal Text. <i> this part is ITALIC
but not red colored</i> </h1>
</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...
RELATED POST LINKS BELOW ********************************************
Next_
