CSS পডকাস্ট - 030: তালিকা
কল্পনা করুন যে আপনার কাছে একগুচ্ছ আইটেম রয়েছে যা আপনি আপনার পরবর্তী মুদি ট্রিপের সময় কেনার পরিকল্পনা করছেন। এটি দৃশ্যত প্রতিনিধিত্ব করার একটি সাধারণ উপায় হল একটি তালিকা-কিন্তু আপনি কীভাবে আপনার মুদির তালিকায় স্টাইলিং যুক্ত করতে পারেন?
<ul>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ul>
একটি তালিকা তৈরি করা হচ্ছে
পূর্ববর্তী তালিকাটি একটি শব্দার্থিক উপাদান দিয়ে শুরু হয়েছিল, বা <ul>
, মুদির তালিকার আইটেমগুলি ( <li>
উপাদান) শিশুদের হিসাবে। আপনি যদি প্রতিটি <li>
উপাদান পরিদর্শন করেন তবে আপনি দেখতে পাবেন যে তাদের সকলেরই display: list-item
, যার কারণে ব্রাউজার ডিফল্টভাবে একটি ::marker
রেন্ডার করে।
li {
display: list-item;
}
আরও দুই ধরনের তালিকা আছে।
অর্ডার করা তালিকাগুলি <ol>
দিয়ে তৈরি করা যেতে পারে, এই ক্ষেত্রে তালিকা-আইটেমটি ::marker
হিসাবে একটি সংখ্যা প্রদর্শন করবে।
<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>
এবং বর্ণনা তালিকাগুলি <dl>
দিয়ে তৈরি করা হয়, তবে এই তালিকার ধরণটি <li>
তালিকা আইটেম উপাদান ব্যবহার করে না।
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
শৈলী তালিকা
এখন যেহেতু আপনি একটি তালিকা তৈরি করতে জানেন, আপনি তাদের স্টাইল করতে পারেন। প্রথম CSS বৈশিষ্ট্যগুলি আবিষ্কার করা হয় যেগুলি সম্পূর্ণ তালিকায় প্রয়োগ করা হয়৷
আপনার উদাহরণ স্টাইল করার জন্য আপনি তিনটি তালিকা-শৈলী বৈশিষ্ট্য ব্যবহার করতে পারেন: list-style-position
, list-style-image
, এবং list-style-type
।
list-style-position
list-style-position
আপনাকে আপনার বুলেট পয়েন্টকে তালিকা-আইটেমের বিষয়বস্তুর inside
বা outside
সরাতে দেয়। ডিফল্ট outside
মানে বুলেট পয়েন্ট তালিকা আইটেম বিষয়বস্তু অন্তর্ভুক্ত করা হয় না যখন inside
তালিকা আইটেম এর বিষয়বস্তু মধ্যে প্রথম উপাদান সরানো.
list-style-image
list-style-image
আপনাকে আপনার তালিকার বুলেট পয়েন্ট ইমেজ দিয়ে প্রতিস্থাপন করতে দেয়। এটি আপনাকে আপনার বুলেটগুলিকে একটি ইমেজ, এসভিজি বা জিআইএফ ইভেন করার জন্য একটি url
বা none
এর মতো একটি চিত্র সেট করতে সক্ষম করে৷ আপনি যেকোনো মিডিয়া টাইপ বা এমনকি একটি ডেটা URIও ব্যবহার করতে পারেন।
আসুন দেখি কিভাবে আমরা list-style-image
হিসাবে আমাদের প্রতিটি মুদি জিনিসের একটি ইমেজ যোগ করতে পারি:
list-style-type
চূড়ান্ত বিকল্প হল list-style-type
স্টাইল করা যা বুলেট পয়েন্টগুলিকে পরিচিত স্টাইল কীওয়ার্ড, কাস্টম স্ট্রিং, ইমোজি এবং আরও অনেক কিছুতে পরিবর্তন করে। আপনি এখানে সম্ভাব্য সব ধরনের তালিকা শৈলী দেখতে পারেন।
list-style
শর্টহ্যান্ড
এখন আপনার কাছে এই সমস্ত স্বতন্ত্র বৈশিষ্ট্য রয়েছে, আপনি আমাদের তালিকার সমস্ত শৈলী এক লাইনে সেট করতে list-style
সংক্ষিপ্ত হ্যান্ড ব্যবহার করতে পারেন:
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
list-style
আপনাকে যে কোনো ক্রমে list-style
বৈশিষ্ট্যগুলির এক, দুই বা তিনটি সংমিশ্রণ ঘোষণা করতে দেয়। যদি list-style-type
এবং list-style-image
উভয়ই সেট করা থাকে, তাহলে ইমেজটি অনুপলব্ধ হলে list-style-type
ফলব্যাক হিসেবে ব্যবহার করা হয়।
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
এই বিভাগে আচ্ছাদিত তালিকা শৈলীর এটি সবচেয়ে বেশি ব্যবহৃত সম্পত্তি। একটি সাধারণ অ্যাপ্লিকেশন হল list-style: none
। ডিফল্ট শৈলী ব্রাউজার থেকে আসে, এবং আপনি প্রায়শই প্যাডিং এবং মার্জিনের মতো তালিকা শৈলীগুলি সরিয়ে রিসেট স্টাইলশীট দেখতে পান। আপনি শৈলী সেট করতে এই শর্টহ্যান্ড ব্যবহার করতে পারেন, যেমন list-style: square inside;
এখনও অবধি, উদাহরণগুলি একটি সম্পূর্ণ তালিকা এবং তালিকা আইটেমগুলিকে স্টাইল করার উপর দৃষ্টি নিবদ্ধ করেছে, তবে আরও দানাদার পদ্ধতির কী হবে?
::marker
সিউডো-এলিমেন্ট
list-item
চিহ্নিতকারী উপাদান হল বুলেট, হাইফেন বা রোমান সংখ্যা যা আপনার তালিকার প্রতিটি আইটেম নির্দেশ করতে সাহায্য করে।
আপনি যদি DevTools-এ তালিকাটি পরীক্ষা করেন, তাহলে HTML-এ কোনো ঘোষণা না করা সত্ত্বেও আপনি তালিকার প্রতিটি আইটেমের জন্য একটি ::marker
উপাদান দেখতে পাবেন। আপনি যদি ::marker
আরও পরিদর্শন করেন, আপনি এটির জন্য ব্রাউজার ডিফল্ট স্টাইলিং দেখতে পাবেন।
::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
যখন আপনি একটি তালিকা ঘোষণা করেন, আপনার HTML-এ কোনো বুলেট পয়েন্ট বা রোমান সংখ্যা না থাকা সত্ত্বেও প্রতিটি আইটেমকে একটি মার্কার দেওয়া হয়। এটি একটি ছদ্ম-উপাদান কারণ ব্রাউজার এটি আপনার জন্য তৈরি করে এবং এটিকে লক্ষ্য করার জন্য একটি সীমিত স্টাইলিং API প্রদান করে। CSS বুলেটের শারীরস্থান সম্পর্কে আরও জানুন। ::marker
সাফারিতে সীমিত সমর্থন রয়েছে।
মার্কার বক্স
CSS লেআউট মডেলে, তালিকা আইটেম চিহ্নিতকারী প্রতিটি তালিকা আইটেমের সাথে যুক্ত একটি মার্কার বক্স দ্বারা প্রতিনিধিত্ব করা হয়। মার্কার বক্স হল একটি ধারক যা সাধারণত বুলেট বা নম্বর ধারণ করে।
মার্কার বক্স স্টাইল করতে, আপনি ::marker
নির্বাচক ব্যবহার করতে পারেন। এটি আপনাকে সম্পূর্ণ তালিকার উপর ভিত্তি করে স্টাইলিং করার পরিবর্তে শুধুমাত্র মার্কার নির্বাচন করতে দেয়।
মার্কার শৈলী
এখন আপনি মার্কার নির্বাচন করেছেন, আসুন এই নির্বাচকের জন্য উপলব্ধ স্টাইলিং বৈশিষ্ট্যগুলি দেখুন। আপনি web.dev-এ CSS ::marker দিয়ে কাস্টম বুলেট সম্পর্কে আরও জানতে পারেন।
এখানে বেশ কয়েকটি অনুমোদিত CSS ::marker
বৈশিষ্ট্য রয়েছে:
-
animation-*
-
transition-*
-
color
-
direction
-
font-*
-
content
-
unicode-bidi
-
white-space
প্রদর্শনের ধরন
আমাদের সমস্ত list-style
এবং ::marker
বৈশিষ্ট্যগুলি <li>
উপাদানগুলিকে স্টাইল করতে জানে কারণ তাদের তালিকা-আইটেমের একটি ডিফল্ট প্রদর্শন মান রয়েছে। আপনি একটি তালিকা আইটেমে একটি <li>
নয় এমন জিনিস তৈরি করতে পারেন।
আপনি সম্পত্তি display: list-item
। display: list-item
ব্যবহার করার একটি উদাহরণ হল আপনি যদি একটি শিরোনামে একটি ঝুলন্ত বুলেট চান, যাতে আপনি এটিকে ::marker
দিয়ে অন্য কিছুতে পরিবর্তন করতে পারেন। নিম্নলিখিত উদাহরণ display: list-item
, সঠিক তালিকা মার্কআপ ব্যবহার করে একটি তালিকা সহ।
আপনি display
মাধ্যমে যেকোন কিছুকে একটি তালিকা-আইটেম ভিউতে পরিণত করতে পারেন, আপনি সঠিক তালিকা মার্কআপ ব্যবহার করার পরিবর্তে এটি ব্যবহার করবেন না, যদি আপনি যে সামগ্রীটি স্টাইল করছেন তা সত্যিই একটি তালিকা হয়। একটি তালিকা আইটেমে একটি আইটেমের ভিজ্যুয়াল চেহারা পরিবর্তন করলে অ্যাক্সেসিবিলিটি পরিষেবাগুলি কীভাবে আইটেমটি পড়ে এবং চিনতে পারে তা পরিবর্তন করে না, তাই এটি স্ক্রিন রিডার বা ডিভাইসগুলি স্যুইচ করার জন্য একটি তালিকা আইটেম হিসাবে পড়া হবে না৷ আপনার সবসময় শব্দার্থিক মার্কআপ ব্যবহার করা উচিত এবং যখনই সম্ভব <li>
দিয়ে তালিকা তৈরি করা উচিত।
আপনার উপলব্ধি পরীক্ষা করুন
তালিকা সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন
একটি তালিকা-আইটেমের পূর্ববর্তী উপাদানটিকে বলা হয় a
::bullet
::counter
::pencil
::marker
এইচটিএমএল তালিকা তিন প্রকার
<lo>
<li>
<list>
<ol>
<ul>
<dl>
এই তালিকার কোন দুটি শৈলী একটি ::marker
শৈলী প্রয়োগ করবে?
transition
color
display
background-color