সিএসএস লিস্ট - Css List



সিএসএস লিস্ট প্রপার্টির দ্বারা আপনি কোন ইমেজকে লিস্ট আইটেম মার্কার হিসেবে ব্যবহার করতে পারবেন,কোন অর্ডারড বা আনঅর্ডারড লিস্টের মার্কার পরিবর্তন করতে পারবেন। আরও অনেক কাজ আপনি সিএসএস লিস্ট প্রপার্টির দ্বারা করতে পারবেন।


লিস্ট স্টাইল টাইপ প্রপার্টি

list-style-type প্রপার্টি ব্যবহার করে লিস্ট আইটেম মার্কার এর প্রকার অর্থাৎ লিস্ট আইটেম গুলো কি রকম দেখতে হবে তা নির্ধারণ করা যায়।

আনঅর্ডারড লিস্টের জন্য list style type প্রপার্টির মান হতে পারে circle, square, dices বা none.

অর্ডারড লিস্টের জন্য list style type প্রপার্টির মান হতে পারে upper-roman, lower-alpha, none ইত্যাদি।

নিচে list style type ব্যবহার করার পদ্ধতি দেখানো হল -

কোড দেখুন

ul.first {list-style-type: square;}

ol.secound {list-style-type: upper-roman;}




ইমেজকে লিস্ট আইটেম মার্কার হিসেবে ব্যবহার

একটি ইমেজকে লিস্ট আইটেম মার্কার হিসেবে ব্যবহার করার জন্য সিএসএস এর 'list-style-image' প্রপার্টি ব্যবহার করা হয়।

কোড দেখুন

ul
{
list-style-image: url('sqpurple.gif');
}


ওপরের এই উদাহরণটি সব ব্রাউজার এ সমানভাবে প্রদর্শিত হয় না। ফায়ারফক্স, ক্রোম বা সাফারির তুলনায় অপেরা বা ইন্টারনেট এক্সপ্লোরার এ ইমেজ লিস্ট আইটেম মার্কার কিছুটা বড় দেখায়।
যদি আপনি ইমেজ লিস্ট আইটেম মার্কারকে সব ব্রাউজার এ সমানভাবে প্রদর্শন করতে চান তবে আপনাকে ক্রসব্রাউজার সমাধান ব্যবহার করতে হবে।

ক্রসব্রাউজার সমাধান

ইমেজ লিস্ট আইটেম মার্কারকে সব ব্রাউজার এ সমানভাবে প্রদর্শন করার জন্য নীচে একটি উদাহরণ দেয়া হল -

কোড দেখুন

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}


এই কোডগুলোর ব্যাখ্যা নীচে দেয়া হল -

আনঅর্ডার লিস্টের জন্য -
এখানে লিস্ট আইটেম মার্কার সরানোর জন্য list-style-type এর মান none নির্ধারণ করা হয়েছে। ক্রস ব্রাউজার কম্পাটিবিলিটির জন্য সব দিকে মার্জিন এবং প্যাডিং 0px নির্ধারণ করা হয়েছে।
লিস্ট আইটেমের জন্য: -
background-image প্রপার্টি ব্যবহার করে লিস্টের জন্য ব্যাবহৃত ছবিটি প্রদর্শন করা হয়েছে এবং যাতে মাত্র একবার প্রদর্শন হয় তার জন্য background-repeat প্রপার্টি ব্যবহার করে তার মান বা value 'none' নির্ধারণ করা হয়েছে। তারপর background-position প্রপার্টি ব্যবহার করে কোন নির্দিষ্ট স্থানে প্রদর্শনের জন্য তার মান নির্ধারণ করা হয়েছে। সর্বশেষে padding-left প্রপার্টি ব্যবহার করে টেক্সটকে লিস্টের সাথে নির্দিষ্ট স্থানে রাখা হয়েছে।


লিস্ট স্টাইল শর্টহ্যান্ড

কোড সংক্ষিপ্ত করে লেখার জন্য, সবগুলো লিস্ট প্রপার্টি একটি মাত্র সিএসএস লিস্ট প্রপার্টির মাধ্যমে প্রকাশ করা যায়। অর্থাৎ list style type, list style position এবং list style image এর জন্য আলাদা আলাদা ভাবে কোড না লিখে একবার মাত্র লিস্ট প্রপার্টি ব্যবহার করেই list style type, list style position এবং list style image নির্দিষ্ট করে দেয়া যায়। একে বলে শর্টহ্যান্ড প্রপার্টি।

লিস্ট শর্টহ্যান্ড প্রপার্টি লেখার নিয়ম নীচে দেখুন -

কোড দেখুন

ul
{
list-style: square url("image.png");
}


শর্টহ্যান্ড প্রপার্টি ব্যবহার করার জন্য একটি নির্দিষ্ট সারি বা ক্রম অনুসরন করতে হবে। তা হল শর্টহ্যান্ড প্রপার্টিতে প্রথমে list style type তারপর list style position এবং সর্বশেষে list style image উল্লেখ করতে হবে। তবে এই ক্রম থেকে কোন প্রপার্টি বাদ গেলেও শর্টহ্যান্ড লিস্ট প্রপার্টি সঠিক ভাবে কাজ করবে।


সব লিস্ট প্রপার্টি

প্রপার্টি বর্ণনা
list-style একটি মাত্র declaration এ সকল লিস্ট স্টাইল প্রপার্টি নির্ধারণ করে।
list-style-image কোন ছবি বা image কে লিস্ট আইটেম মার্কার হিসেবে নির্ধারণ করে।
list-style-position লিস্ট আইটেম মার্কার এর অবস্থান কন্টেন্ট এর ভেতরের না বাইরের দিকে হবে তা নির্ধারণ করে।
list-style-type লিস্ট আইটেম মার্কার এর প্রকার নির্ধারণ করে।






এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.