সিএসএস (CSS) বাংলা টিউটোরিয়াল (পার্ট-১০)

“ফ্রী বাংলা টিউটোরিয়াল” এর পাঠক বন্ধুরা আপনাদের জানাই সাদর আমন্ত্রণ। আশা করি এই সাইটের বাংলা ভিডিও টিউটোরিয়াল ও আর্টিকেল দেখে CSS সম্পর্কে ভালই শিখতে পেরেছেন। আজ আমরা CSS এর Pseudo classes, Pseudo elements সম্পর্কে জানার পর একটা সম্পূর্ণ ইমেজ গ্যালারী project এর কোড দেখাবো। CSS এর Pseudo classes কিছু কিছু selector এর স্পেশাল দর্শনীয় প্রভাব তৈরি করে। নিচে একটা আধুনিক লিংক স্টাইল কোড দেখানো হলঃ

a:link {color: #FF0000}       /* যতক্ষণ লিংক unvisited থাকে */
a:visited {color: #00FF00}  /* লিঙ্কটি visited করার পরে */
a:hover {color: #FF00FF}    /* লিঙ্কের উপর মাউস ধরলে বা mouse over করলে */
a:active {color: #0000FF}   /* লিংক selected হলে */

a:link {color: #FF0000} /* যতক্ষণ লিংক unvisited থাকে */

a:visited {color: #00FF00} /* লিঙ্কটি visited করার পরে */

a:hover {color: #FF00FF} /* লিঙ্কের উপর মাউস ধরলে বা mouse over করলে */

a:active {color: #0000FF} /* লিংক selected হলে */

শুধু যে tag এর জন্যই এমন হবে তা নয় যেকোনো উপাদানের সম্ভাব্য Style এভাবে আপনি ঠিক করে দিতে পারেন। CSS এর Pseudo elements গুলো হলঃ

: first-letter, :first-line, :before, :after

কোন উপাদান যদি text ভিত্তিক হয় তবে :first-letter ও first-line পৃথক পৃথকভাবে কিংবা একসাথে ব্যবহার করে স্টাইল পরিবরতন করা যায়। যেমন ধরুন নিচের কোডটি কোন প্যারাগ্রাফের প্রথম অক্ষর ও লাইনকে একটু স্পেসালিটি দেবে।

<style type="text/css">
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
p:first-line
{
color: #0000ff;
font-variant: small-caps
}
</style>
</head>

<body>
<p>
Bangladesh is a land of Sufis. But most of them are very simple in there way of life.
</p>
</body>

</head>

<body>

<p>

Bangladesh is a land of Sufis. But most of them are very simple in there way of life.

</p>

</body>

এর ফলে B অক্ষরটি এক্সট্রা বড় হবে #ff0000 বর্ণের। p:first-line এর দ্বারা প্রথম লাইনের বর্ণ #0000ff করা হয়েছে সাথে ফন্ট স্ফিতি করা হয়েছে small-caps.

যাই হোক এখন CSS বুদ্ধিমত্তার সাথে ব্যবহার করে একটি ইমেজ গ্যালারী তৈরির কোড নিচে দেওয়া হল যেটিকে আপনি সরাসরি কোন পরিবরতন না করেই কপি পেস্ট করতে পারেনঃ

<html>
<head>
<style
 type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>
<div>
<a target="_blank" href="klematis_big.html"><img 
src="klematis_small.jpg" alt="Klematis" width="110" height="90" 
/></a>
<div>
Add a description of the image here</div>
</div>
<div>
<a target="_blank" href="klematis2_big.html"><img 
src="klematis2_small.jpg" alt="Klematis" width="110" height="90" 
/></a>
<div>
Add a description of the image here</div>
</div>
<div>
<a target="_blank" href="klematis3_big.html"><img 
src="klematis3_small.jpg" alt="Klematis" width="110" height="90" 
/></a>
<div>
Add a description of the image here</div>
</div>
<div>
<a target="_blank" href="klematis4_big.html"><img 
src="klematis4_small.jpg" alt="Klematis" width="110" height="90" 
/></a>
<div>
Add a description of the image here</div>
</div>
</body>
</html>