আস্সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো সিএসএস এর লিস্ট, টেবিল।
লিস্টঃ
আমরা HTML এ লিস্ট এর কাজ আগেই দেখেছি। আমরা এখন CSS ইউজ করে লিস্ট এর কাজ
গুলো আমরা দেখবো।আমরা যখন আমাদের নেভিগেশন মেনু বা যেকোনো তালিকা তৈরি করি তখন
আমাদের UL,OL,LI ব্যবহার করে থাকি।
আমাদের লিস্ট ট্যাগের জন্য বেশি ব্যবহৃত css গুলো হলো, লিস্ট স্টাইল
টাইপ, লিস্ট স্টাইল ইমেজ, এবং লিস্ট স্টাইল পজিশন।
আমরা যখন আমাদের লিস্ট এর আইকন গোলাকার দেখাতে চাইবো তখন আমরা নিচের এই CSS ইউজ
করবো।
list-style-type:circle;
লিস্ট আইকন যখন আমরা বর্গাকার দেখাতে চাইবো নিচের CSS ইউজ করবো।
list-style-type:square;
আমরা যখন আমাদের লিস্ট এর রোমান গুলো বড় ছোট হাতের করতে চাইব, তখন নিচের CSS গুলো
ইউজ করবো।
list-style-type:upper-roman; * বড় হাতের
list-style-type:lower-roman; * ছোট হাতের
আমরা যখন আমাদের লিস্টে ছোট হাতের ও বড় হাতের আলফা অর্থাৎ A,B,C দ্বারা লিস্টিং
করতে চাই তবে নিচের CSS গুলো ইউজ করবো
list-style-type:upper-alpha; * বড় হাতের
list-style-type:lower-alpha; * ছোট হাতের
আপনি যদি আপনার লিস্টে ইমেজ সিস্টেম করতে চান, তবে ছোট পিকচার আপলোড করে সেই
পিকচার লোকেশন নিচের CSS এর কোডে বসিয়ে দিতে পারবেন। URL এর জায়গায় আপনার পিকচার
লিংক দিবেন।
list-style-image:url("URL");
আপনি যখন আপনার লিস্টিং এর কন্টেন্ট ইনসাইডে নিতে চাইবেন তখন নিচের CSS ইউজ করতে
পারবেন।
list-style-position:inside;
আবার যখন লিস্টিং এর কন্টেন্ট আউটসাইডে নিতে চাইবেন নিচের CSS ইউজ করবেন।
list-style-position:outside;
আমরা যখন লিস্টিং করা সত্তেও আমরা কোনো আইকন দেখাতে না চাইবো তখন নিচের কোড ইউজ
করবো।
list-style-type:none;
আপনারা নিচের মতো HTML আর সিএসএস এই ভাবে বসিয়ে ট্রাই করতে পারেন।
<style>
ul{
list-style-type:upper-alpha;
}
</style>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
</ul>
টেবিলঃ
আমরা HTML এ টেবিল দেখেছি। তখন আমরা একটা জিনিস খেয়াল করেছিলাম সাধারন ভাবে
টেবিলের কোড করলে টেবিলের বর্ডার দেখা যায়না। আর বর্ডার না দেখা গেলে আমাদের
টেবিল েএর চেহারা আমরা পাইনা।
টেবিলের আর যত সমস্যা সব কিছু ঠিক করা সম্ভব CSS দিয়ে।
টেবিল বর্ডারঃ
আমরা যখন আমরা টেবিল এর HTML কোড লিখি তখন আমাদের বর্ডার আসেনা তখন আমরা নিচের
মতো করে CSS ইউজ করবো।
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
</tr>
<tr>
<td>simply dummy</td>
<td>simply dummy</td>
</tr>
<tr>
<td>Where does it come from?</td>
<td>Where can I get some?</td>
</tr>
</table>কলাপস টেবিল বর্ডারঃ
আমরা যখন আমাদের টেবিল এ বর্ডার করি সেখানে আমরা দেখতে পাই যে বর্ডার গুলো ডাবল
ডাবল হয়।আমরা সাধারনত টেবিলে সিঙ্গেল বর্ডার পছন্দ করি। সিঙ্গেল বর্ডার করতে হলে
নিচের CSS ইউজ করতে হবে।
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<table>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
</tr>
<tr>
<td>simply dummy</td>
<td>simply dummy</td>
</tr>
<tr>
<td>Where does it come from?</td>
<td>Where can I get some?</td>
</tr>
</table>
এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি
বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর
পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই
আর্টিকেলটি WikiJana.Com সাইটের সম্পদ
তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের
অধিনে চলে যেতে পারে।