এইচটিএমএল-এ ডেটা প্রদর্শনের জন্য তালিকাগুলি একটি গুরুত্বপূর্ণ উপায়। যখন আপনার কাছে একটি সাধারণ থিমের সাথে অনেকগুলি আইটেম থাকে, যেমন জুতার আকার বা নেভিগেশন সরঞ্জাম, ডেটা উপস্থাপন করার সবচেয়ে কার্যকর উপায় হতে পারে একটি তালিকা ব্যবহার করা।
ডিফল্টরূপে, HTML-এ তালিকাগুলি বেশ সরল। এখানেই CSS তালিকা-শৈলীর বৈশিষ্ট্য আসে। তালিকা-শৈলীর বৈশিষ্ট্য এবং এর উপ-সম্পত্তিগুলি আপনার অনন্য ওয়েবসাইট ডিজাইনের পরিপূরক তালিকাগুলি কাস্টমাইজ করতে ব্যবহৃত হয়।
এই টিউটোরিয়ালটি উদাহরণ সহ কভার করবে, কিভাবে লিস্ট-স্টাইল প্রপার্টি এবং এর সাব প্রোপার্টি ব্যবহার করে সিএসএস-এ তালিকা স্টাইল করা যায়। এটি একটি তালিকা এবং এর আইটেমগুলির পটভূমির রঙগুলি কীভাবে সেট করতে হয় তাও কভার করবে। এই টিউটোরিয়ালটি পড়ার পরে, আপনি CSS ব্যবহার করে স্টাইলিং তালিকায় বিশেষজ্ঞ হবেন।
HTML এবং CSS তালিকা
একাধিক সংযুক্ত আইটেম দেখানোর জন্য তালিকা ব্যবহার করা হয়। HTML-এ, আপনি ডেটা উপস্থাপন করতে ব্যবহার করতে পারেন এমন তিন ধরনের তালিকা রয়েছে। এইগুলো:
- ক্রমবিহীন তালিকা (
- ) – আইটেমের একটি তালিকা যার মান বুলেট পয়েন্ট ব্যবহার করে চিহ্নিত করা হয়েছে।
- অর্ডার করা তালিকা (
- ) – আইটেমগুলির একটি তালিকা যার মানগুলি একটি অর্ডারিং সিস্টেম ব্যবহার করে চিহ্নিত করা হয়েছে (উদাহরণস্বরূপ, অনুক্রমিক সংখ্যা বা অক্ষর)।
- সংজ্ঞা তালিকা (
- ) – সহগামী বর্ণনা সহ আইটেমগুলির একটি তালিকা।
আপনি যদি HTML তালিকা সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে HTML-এ তালিকা সম্পর্কে আমাদের নিবন্ধটি পড়ুন।
উপরের তালিকার ধরনগুলির প্রতিটি তার নিজস্ব ডিফল্ট HTML শৈলীর সাথে আসে। অতিরিক্তভাবে, CSS অনেকগুলি বৈশিষ্ট্য অফার করে যা আপনি আপনার তালিকাগুলিকে আরও নান্দনিকভাবে আনন্দদায়ক করতে এবং আপনার স্টাইল গাইডের সাথে আরও ভালভাবে সারিবদ্ধ করতে ব্যবহার করতে পারেন।
সিএসএস তালিকা বৈশিষ্ট্য আপনাকে অনুমতি দেয়:
- অর্ডার করা তালিকার জন্য আইটেম মার্কার পরিবর্তন করুন।
- অক্রমবিহীন তালিকার জন্য আইটেম চিহ্নিতকারী পরিবর্তন করুন।
- একটি চিত্রকে একটি তালিকা আইটেম চিহ্নিতকারী হিসাবে সেট করুন৷ ৷
- তালিকা এবং তাদের আইটেমগুলিতে পটভূমির রঙ যোগ করুন।
এই টিউটোরিয়ালে, আমরা CSS-এ স্টাইল তালিকার দুটি অত্যধিক উপায় নিয়ে আলোচনা করব:তালিকা-শৈলী বৈশিষ্ট্য তার স্বতন্ত্র সাব বৈশিষ্ট্যের মাধ্যমে এবং তালিকা-স্টাইল শর্টহ্যান্ড সম্পত্তি। তালিকা-শৈলী সম্পত্তির উপ বৈশিষ্ট্য হল:
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
- লিস্ট-স্টাইল-টাইপ
- তালিকা-শৈলী-পজিশন
- তালিকা-শৈলী-চিত্র
তালিকা-শৈলী শর্টহ্যান্ড সম্পত্তি হিসাবে লেখা হয়:
লিস্ট-স্টাইল:[লিস্ট-স্টাইল-টাইপ] [লিস্ট-স্টাইল-পজিশন] [লিস্ট-স্টাইল-ইমেজ];
তালিকা এবং তালিকা আইটেমগুলিতে কীভাবে পটভূমির রঙ যুক্ত করা যায় তাও আমরা আলোচনা করব।
বেসিক HTML তালিকা উদাহরণ
প্রথমে, আসুন HTML-এ একটি তালিকার উদাহরণ দেখি। ধরুন একটি স্থানীয় বেকারি আমাদেরকে একটি ওয়েব পৃষ্ঠা তৈরি করতে বলে যা গ্রাহকদের বাড়ির ব্যবহারের জন্য রেসিপিগুলির একটি তালিকা অন্তর্ভুক্ত করে৷
এখানে মৌলিক HTML কোড রয়েছে যা আমরা আমাদের তালিকাকে সংজ্ঞায়িত করতে ব্যবহার করব:
- বাটারফ্লাই কেক
- চকলেট ট্রেবেক
- লেমন পাউন্ড কেক
- পিনাট বাটার ফ্ল্যাপজ্যাকস
- চকলেট মাফিনস
আমাদের তালিকা নিম্নরূপ প্রদর্শিত হয়:
আমাদের তালিকায় পাঁচটি আইটেম রয়েছে। আমরা -এর মধ্যে প্রতিটি তালিকা আইটেম আবদ্ধ করি ট্যাগ. ("li" মানে "লিস্ট আইটেম।" একটি
যেহেতু এটি একটি ক্রমবিহীন তালিকা, তাই আমাদের ওয়েব ব্রাউজার তালিকার প্রতিটি আইটেমের আগে একটি বুলেট পয়েন্ট রাখে। (যদি এটি একটি অর্ডার করা তালিকা হয়, আমাদের ওয়েব ব্রাউজার তালিকার প্রতিটি আইটেমের আগে একটি অর্ডারযোগ্য মান-সাধারণত একটি সংখ্যা বা একটি অক্ষর রাখবে।)
এখন, আসুন আমরা কীভাবে তালিকা-শৈলী বৈশিষ্ট্য ব্যবহার করে একটি তালিকাকে স্টাইল করতে পারি তা অন্বেষণ করি।
তালিকা আইটেম চিহ্নিতকারী
তালিকা-শৈলী-টাইপ বৈশিষ্ট্য একটি তালিকার আইটেমগুলির জন্য ব্যবহৃত মার্কারের ধরন নির্দিষ্ট করতে ব্যবহৃত হয়।
অক্রমবিহীন তালিকা আইটেম চিহ্নিতকারী
ধরুন, বেকারি আমাদেরকে দেখাতে বলছে যে তাদের তালিকাটি প্রতিটি তালিকার আইটেমের আগে একটি বৃত্ত বুলেট পয়েন্ট বনাম একটি বর্গাকার বুলেট পয়েন্টের সাথে কেমন হবে। বেকারির জন্য এই ডিজাইনগুলি তৈরি করতে আমরা নিম্নলিখিত কোড ব্যবহার করতে পারি:
styles.cssli.circlebulletPoint { list-style-type:circle;}li.squarebulletPoint { list-style-type:square;}index.html- বাটারফ্লাই কেক
- চকলেট ট্রেবেক
- লেমন পাউন্ড কেক
- পিনাট বাটার ফ্ল্যাপজ্যাকস
- চকলেট মাফিনস
আমাদের কোড ফিরে আসে:
আপনি দেখতে পাচ্ছেন, আমাদের প্রথম তালিকা আইটেম বৃত্ত বুলেট পয়েন্ট মার্কার শৈলী ব্যবহার করে. আমরা আমাদের প্রথম তালিকার আইটেমটিতে শ্রেণী মান "সার্কেলবুলেটপয়েন্ট"—এবং সেই কারণে সেই মানটির সংশ্লিষ্ট শৈলী নির্ধারণ করে এটি সম্পন্ন করেছি। আমরা আমাদের দ্বিতীয় তালিকার আইটেমটিতে ক্লাস মান "squarebulletPoint" নির্ধারণ করেছি, তাই ওয়েব ব্রাউজার সেই আইটেমের আগে একটি বর্গাকার বুলেট পয়েন্ট প্রদর্শন করে।
অন্যান্য তালিকা-শৈলী-প্রকার রয়েছে যা একটি তালিকায় প্রয়োগ করা যেতে পারে, যা হল:
- ডিস্ক
- বৃত্ত
- দশমিক
- decimal-leading-zero
- লোয়ার-রোমান
- উর্ধ্ব-রোমান
- নিম্ন-গ্রীক
- লোয়ার-ল্যাটিন
- উর্ধ্ব-ল্যাটিন
- আর্মেনিয়ান
- জর্জিয়ান
- লোয়ার-আলফা
- কোনটিই নয়
আমরা এর মধ্যে কয়েকটি নিয়ে আলোচনা করব যা পরবর্তী বিভাগে অর্ডার করা তালিকার ক্ষেত্রে প্রযোজ্য৷
৷অর্ডার করা তালিকা আইটেম চিহ্নিতকারী
অর্ডার করা তালিকার নিজস্ব আইটেম মার্কার শৈলী আছে।
ধরুন আমরা চাই যে বেকারির রেসিপিগুলো অর্ডার করা তালিকায় প্রদর্শিত হোক। আমরা দেখতে চাই যে তালিকার প্রতিটি আইটেমের আগে একটি ছোট হাতের বর্ণানুক্রমিক অক্ষর দ্বারা চিহ্নিত ক্রম অনুসারে আমাদের তালিকাটি কেমন হবে এবং তালিকার প্রতিটি আইটেমের আগে একটি বড় হাতের রোমান সংখ্যার সাথে এটি দেখতে কেমন হবে। আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
styles.cssli.alpha { list-style-type:Lower-alpha;}li.roman { list-style-type:upper-roman;}index.html - প্রজাপতি কেক
- চকলেট ট্রেবেক
- লেমন পাউন্ড কেক
- পিনাট বাটার ফ্ল্যাপজ্যাকস
- চকলেট মাফিনস
আমাদের কোড ফিরে আসে:
এই উদাহরণে, আমরা একটি ক্রমহীন তালিকার পরিবর্তে একটি আদেশকৃত তালিকা (
- ) ব্যবহার করেছি। এটি আমাদের সংখ্যা (বা অক্ষর ইত্যাদি) সহ আমাদের তালিকা অর্ডার করতে দেয়। তারপর, আমরা আমাদের তালিকার প্রথম আইটেমটিকে একটি ছোট হাতের বর্ণানুক্রমিক অক্ষর দিয়ে এবং আমাদের তালিকার দ্বিতীয় আইটেমটিকে একটি বড় হাতের রোমান সংখ্যা দিয়ে চিহ্নিত করেছি৷
- বাটারফ্লাই কেক
- চকলেট ট্রেবেক
- লেমন পাউন্ড কেক
- পিনাট বাটার ফ্ল্যাপজ্যাকস
- চকলেট মাফিনস
- বাটারফ্লাই কেক
- চকলেট ট্রেবেক
- লেমন পাউন্ড কেক
- পিনাট বাটার ফ্ল্যাপজ্যাকস
- চকলেট মাফিনস
- বাটারফ্লাই কেক
- চকলেট ট্রেবেক
- লেমন পাউন্ড কেক
- পিনাট বাটার ফ্ল্যাপজ্যাকস
- চকলেট মাফিনস
- বাটারফ্লাই কেক
- চকলেট ট্রেবেক
- লেমন পাউন্ড কেক
- পিনাট বাটার ফ্ল্যাপজ্যাকস
- চকলেট মাফিনস
- বাটারফ্লাই কেক<
- চকলেট ট্রেবেক
- লেমন পাউন্ড কেক
- পিনাট বাটার ফ্ল্যাপজ্যাকস
- চকলেট মাফিনস
- বাটারফ্লাই কেক
- চকলেট ট্রেবেক
- লেমন পাউন্ড কেক
- পিনাট বাটার ফ্ল্যাপজ্যাকস
- চকলেট মাফিনস
ডিফল্ট তালিকা আইটেম মার্কার স্টাইলিং সরান
একটি তালিকা থেকে ডিফল্ট স্টাইলিং এর দিকগুলি সরাতে আমরা আমাদের কোডে তিনটি CSS বৈশিষ্ট্য ব্যবহার করতে পারি:তালিকা-স্টাইল-টাইপ, মার্জিন এবং প্যাডিং৷
তালিকা-শৈলী-টাইপ কোনটিতে সেট করা হচ্ছে না
যদি আমরা তালিকা আইটেমগুলির আগে কোন ধরণের বুলেট পয়েন্ট বা অর্ডিনাল ইন্ডিকেটর (যেমন একটি সংখ্যা বা অক্ষর) না চাই, তাহলে আমরা তালিকা-শৈলী-টাইপ প্রপার্টি কোনটিতে সেট করতে পারি না। তালিকার যেকোনো বুলেট পয়েন্ট বা অর্ডিনাল ইন্ডিকেটর সরাতে এই প্রপার্টি ব্যবহার করার একটি উদাহরণ এখানে দেওয়া হল:
styles.cssul { list-style-type:none;}index.html
আমাদের কোড ফিরে আসে:
আমাদের তালিকা এখনও একটি তালিকা হিসাবে গঠন করা হয়েছে, কিন্তু ওয়েব পৃষ্ঠায় প্রদর্শিত হলে, তালিকার আইটেমগুলিতে মার্কার নেই৷
মার্কার অবস্থান
তালিকা-শৈলী-পজিশন বৈশিষ্ট্য একটি তালিকায় তালিকা আইটেম চিহ্নিতকারীর অবস্থান নির্দিষ্ট করতে ব্যবহৃত হয়।
দুটি অবস্থান রয়েছে যেখানে একটি তালিকার জন্য আইটেম চিহ্নিতকারী উপস্থিত হতে পারে:ভিতরে এবং বাইরে। যদি তালিকা চিহ্নিতকারী তালিকার ভিতরে উপস্থিত হয়, পাঠ্যটি সরাসরি আইটেম চিহ্নিতকারীর পাশে প্রদর্শিত হবে; যদি তালিকা চিহ্নিতকারীগুলি তালিকার বাইরে উপস্থিত হয়, তাহলে তালিকা চিহ্নিতকারী এবং তালিকার পাঠ্য আইটেমগুলির মধ্যে একটি ফাঁক থাকবে।
এখানে দুটি উদাহরণ CSS নিয়ম রয়েছে যা প্রদর্শন করে যে কীভাবে তালিকা-স্টাইল-পজিশন এই উভয় অবস্থায় প্রয়োগ করা যেতে পারে:
ul.a { list-style-position:out;}ul.b { list-style-position:ভিতরে;} আমাদের প্রথম তালিকায়, আমরা তালিকা-শৈলী-অবস্থান ব্যবহার করেছি:বাইরের শৈলী। এটি তালিকাগুলিতে প্রয়োগ করা ডিফল্ট শৈলী। যেমন, আমরা যদি আমাদের কোডের ব্লকে এই বা অন্য কোনো তালিকা-শৈলী-পজিশন নির্দিষ্ট না করতাম, তাহলে তালিকা আইটেম চিহ্নিতকারীর জন্য ব্রাউজার এই অবস্থানে ডিফল্ট হয়ে যেত। নিম্নলিখিত আমাদের বেকারি তালিকার কোড যা এই শৈলী ব্যবহার করে:
কোড ফিরে আসে:
এই শৈলীতে, তালিকা আইটেম চিহ্নিতকারী (এই ক্ষেত্রে, বুলেট পয়েন্ট) আমাদের তালিকা আইটেমগুলির বাইরে প্রদর্শিত হবে।
আমাদের দ্বিতীয় তালিকায়, আমরা আমাদের তালিকা আইটেম চিহ্নিতকারীর অবস্থান "ভিতরে" হিসাবে নির্দিষ্ট করেছি। নিম্নলিখিত আমাদের বেকারি তালিকার কোড যা এই শৈলী ব্যবহার করে:
কোড ফিরে আসে:
এটা বলা কঠিন কিন্তু আমাদের তালিকা আইটেম চিহ্নিতকারীর অবস্থান এখন তালিকা আইটেমের বাইরে।
ইমেজ মার্কার
তালিকাগুলি প্রায়শই চিত্র সহ কাস্টম মার্কার ব্যবহার করে। আপনি যদি একটি চিত্রের জন্য একটি তালিকা আইটেমের জন্য মার্কার সেট করতে চান, আপনি তালিকা-শৈলী-ইমেজ CSS বৈশিষ্ট্য ব্যবহার করতে পারেন।
ধরুন বেকারি আমাদেরকে তাদের তালিকার তালিকার আইটেম মার্কারগুলিকে একটি কেকের ছবিতে (বুলেট পয়েন্ট, নম্বর, ইত্যাদির পরিবর্তে) পরিবর্তন করতে বলে। এই কাজটি সম্পন্ন করতে আমরা নিম্নলিখিত কোড ব্যবহার করতে পারি:
styles.cssul { list-style-image:url("https://img.icons8.com/small/16/000000/cake.png");}index.html
আমাদের কোড ফিরে আসে:
আপনি দেখতে পাচ্ছেন, একটি ডিফল্ট তালিকা আইটেম মার্কার ব্যবহার করার পরিবর্তে, আমরা আমাদের নিজস্ব ব্যবহার করেছি। এই ক্ষেত্রে, আমাদের তালিকা আইটেম চিহ্নিতকারী একটি কেকের একটি চিত্র৷
৷লিস্ট স্টাইল শর্টহ্যান্ড প্রপার্টি
আমরা তালিকা-শৈলী সম্পত্তির উপ বৈশিষ্ট্য আলোচনা করা হয়েছে. এগুলি আমাদের তালিকায় পৃথক শৈলী প্রয়োগ করার অনুমতি দিয়েছে।
যাইহোক, তালিকার স্টাইলিং করার আরও কার্যকর উপায় রয়েছে। একটি তালিকা স্টাইল করার জন্য প্রতিটি পৃথক উপ-সম্পত্তি ব্যবহার করার পরিবর্তে, আমরা তালিকা-শৈলী শর্টহ্যান্ড সম্পত্তি ব্যবহার করতে পারি। এখানে তালিকা-শৈলী শর্টহ্যান্ড সম্পত্তির জন্য সিনট্যাক্স রয়েছে:
ul { তালিকা-শৈলী:[লিস্ট-স্টাইল-টাইপ] [তালিকা-শৈলী-পজিশন] [তালিকা-শৈলী-চিত্র];
উপরে উল্লিখিত মানগুলির ক্রম হল তালিকা-শৈলী শর্টহ্যান্ড সম্পত্তির সাথে আপনাকে যে ক্রমটি ব্যবহার করতে হবে। আপনি যদি শর্টহ্যান্ড সিনট্যাক্স তৈরি করে এমন তিনটি সাব প্রপার্টির একটির জন্য একটি মান নির্দিষ্ট না করেন, তাহলে ওয়েব ব্রাউজার সেই সাবপ্রপার্টির ডিফল্ট মান ব্যবহার করবে।
ধরুন আমরা আমাদের বেকড পণ্যের রেসিপিগুলির তালিকা একটি কেকের চিত্র সহ স্টাইল করতে চাই এবং প্রতিটি তালিকা আইটেম চিহ্নিতকারীকে আমাদের তালিকার বাইরে নিয়ে যেতে চাই। আমরা এই কোড ব্যবহার করে তা করতে পারি:
styles.cssul { তালিকা-শৈলী:বাইরের url('https://img.icons8.com/small/16/000000/cake.png');}index.html
আমাদের কোড ফিরে আসে:
আমাদের তালিকা এখন প্রতিটি তালিকা আইটেম মার্কার জন্য কেক ইমেজ ব্যবহার করে. উপরন্তু, প্রতিটি তালিকা আইটেম চিহ্নিতকারী আমাদের তালিকার বাইরে স্টাইল করা হয়.
CSS তালিকার রঙ
আপনি যখন একটি তালিকা ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি তালিকাটি পটভূমির রঙগুলি প্রদর্শন করতে চান।
ধরুন বেকারি আমাদের পুরো তালিকার পটভূমির রঙ হালকা নীলে সেট করতে এবং তালিকার প্রতিটি আইটেমের জন্য একটি গোলাপী পটভূমির রঙ ব্যবহার করতে বলে। এই কাজটি সম্পন্ন করতে আমরা CSS ব্যাকগ্রাউন্ড প্রপার্টি ব্যবহার করতে পারি, যেমন:
ul { পটভূমি:হালকা নীল; প্যাডিং:10px;}ul li {পটভূমি:গোলাপী; মার্জিন:10px; আমাদের কোড ফিরে আসে:
আমাদের কোডে, আমরা
এছাড়াও আমরা একটি গোলাপী পটভূমি প্রয়োগ করেছি এবং প্রতিটি তালিকা আইটেমের চারপাশে একটি 10px মার্জিন তৈরি করেছি৷
আমরা আমাদের শৈলীগুলিকে একটি "ul li" নির্বাচকের মধ্যে অন্তর্ভুক্ত করে এটি সম্পন্ন করেছি, যেমন আপনি উপরে দেখতে পাচ্ছেন। এই নির্বাচক বলেছেন যে গোলাপী পটভূমি এবং 10px মার্জিন সমস্ত -এ প্রয়োগ করা উচিত ট্যাগগুলি একটি
উপসংহার
আপনি যখন এইচটিএমএল তালিকার সাথে কাজ করছেন, তখন আপনি তাদের আরও নান্দনিকভাবে আনন্দদায়ক করতে সেই তালিকাগুলিতে কাস্টম শৈলী প্রয়োগ করতে CSS ব্যবহার করতে পারেন। লিস্ট-স্টাইল প্রপার্টি CSS-এ একটি তালিকায় শৈলী প্রয়োগ করতে (বা থেকে শৈলীগুলি সরাতে) ব্যবহার করা হয়।
এই টিউটোরিয়ালে উদাহরণ সহ আলোচনা করা হয়েছে, কিভাবে CSS তালিকা-স্টাইল প্রপার্টি এবং এর তিনটি সাব প্রোপার্টি ব্যবহার করতে হয়। আমরা একটি তালিকা এবং এর মধ্যে থাকা আইটেমগুলির জন্য পটভূমির রঙগুলি কীভাবে সেট করতে হয় তাও আলোচনা করেছি।
এখন আপনার কাছে এমন জ্ঞান আছে যা আপনাকে একজন পেশাদারের মতো CSS-এ স্টাইল তালিকা শুরু করতে হবে!
No