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

“ফ্রী বাংলা টিউটোরিয়াল” এর CSS সম্পর্কিত টিউটোরিয়াল আশা করি আপনাদের CSS শিখতে খুব সাহায্য করছে। বন্ধুরা, আজ আমরা CSS এর list এবং table নিয়ে সংক্ষিপ্ত আলোচনা করবো। HTML এর লিস্ট দুই ধরণের হয় তা আমরা জানি যে type attribute এর মাধ্যমে ordered list কে 1, 2, 3… বা a, b, c.. অথবা i, ii, iii… এই ধরণের লিস্ট তৈরি করা যায়।
আবার unordered list এর বিভিন্ন ধরণ যেমন বৃত্ত, বর্গ বা ভরাট বৃত্ত সংবলিত লিস্ট করা যায়। CSS এর list property দ্বারা আপনি লিস্ট মার্কার স্থাপন, মার্কারের মাঝে ভিন্নতা কিংবা একটি ইমেজকে মার্কার হিসেবে সেট করতে পারি। নিচের কোড দেখিঃ

Ul{list-style-position: inside;} [লিস্ট স্টাইলের অবস্থান ভিতরের দিকে] Ul{list-style-position: outside} [লিস্ট স্টাইলের অবস্থান বাহিরের দিকে] Ul{ list-style-type: circle; [বৃত্তের মতো মার্কার] } Ul{list-style-image: url("sample.jpg"); [sample.jpg ইমেজটি মার্কার হিসেবে কাজ করবে] List-style-type: circle; [যদি কোন কারনে ইমেজ না পাওয়া যায় তখন এই বৃত্ত টাইপ মার্কার] }

1 2 3 4 5 6 7 8

Ul{list-style-position: inside;} [লিস্ট স্টাইলের অবস্থান ভিতরের দিকে] Ul{list-style-position: outside} [লিস্ট স্টাইলের অবস্থান বাহিরের দিকে] Ul{ list-style-type: circle; [বৃত্তের মতো মার্কার] } Ul{list-style-image: url("sample.jpg"); [sample.jpg ইমেজটি মার্কার হিসেবে কাজ করবে] List-style-type: circle;   [যদি কোন কারনে ইমেজ না পাওয়া যায় তখন এই বৃত্ত টাইপ মার্কার] }

আর CSS Table property আসলে কিছুই করেনা বরং একটি টেবিল এর layout ঠিক করে দেয়। layout ঠিক করে দেওয়ার জন্য Border-collapse, border-spacing, caption-side আর table-layout properties। যেমন টেবিলের ক্যাপশন কোন পাশে হবে উপরে, নিচে না কোন দিকে। তা নিচের কোডে দেখিঃ

caption{ caption-side: bottom; }

1 2 3

caption{ caption-side: bottom; }

মনে করুন, caption

tag এর একটি চাইল্ড উপাদান। এই কোড এর জন্য টেবিলের ক্যাপশনটি নিচে থাকবে। আবার টেবিলের border টি একটি single border এর মধ্যে গুটিয়ে যাবে নাকি পৃথক হবে তা যথাক্রমে collapse ও separate value দিয়ে মন মতো করে নিতে হয়।

table { border-collapse: separate; }

1 2 3 4

table { border-collapse: separate; }

আর টেবিলের সেল গুলোর মধ্যকার দূরত্ব নির্ধারণের জন্য border-spacing property. আজ এপর্যন্তই এগুলো practice করতে থাকুন। ধন্যবাদ পাঠক বন্ধুরা।