html এ একটি কম্বো তালিকা তৈরি করা হচ্ছে। স্বয়ংক্রিয় নাম্বারিং সহ নেস্টেড তালিকা

সংখ্যাযুক্ত তালিকাগুলি তাদের সিরিয়াল নম্বর সহ উপাদানগুলির একটি সংগ্রহ। সংখ্যার ধরন এবং ধরন উপাদানের পরামিতিগুলির উপর নির্ভর করে

, যা তালিকা তৈরি করতে ব্যবহৃত হয়। নিম্নলিখিত মানগুলি সংখ্যায়ন উপাদান হিসাবে কাজ করতে পারে:
• আরবি সংখ্যা (1, 2, 3, ...);
• দশের কম সংখ্যার জন্য অগ্রণী শূন্য সহ আরবি সংখ্যা (01, 02, 03, ...,10);
• বড় ল্যাটিন অক্ষর (A, B, C, ...);
• ছোট হাতের ল্যাটিন অক্ষর (a, b, c, ...);
• বড় হাতের রোমান সংখ্যা (I, II, III, ...);
• ছোট হাতের রোমান সংখ্যা (i, ii, iii, ...);
• আর্মেনিয়ান সংখ্যায়ন;
• জর্জিয়ান সংখ্যায়ন।

একটি ব্যবহারিক দৃষ্টিকোণ থেকে, বুলেটযুক্ত তালিকায় আইটেমগুলি প্রদর্শনের নীতিগুলি একটি সংখ্যাযুক্ত তালিকার অনুরূপভাবে প্রয়োগ করা যেতে পারে। কিন্তু প্রদত্ত যে আমরা একটি গণনার সাথে কাজ করছি, কিছু বৈশিষ্ট্য রয়েছে যা আরও আলোচনা করা হবে।

তালিকা সংখ্যায়ন

এটি যে কোনো নম্বর থেকে তালিকা শুরু করার অনুমতি দেওয়া হয়; এই উদ্দেশ্যে উপাদানটির স্টার্ট অ্যাট্রিবিউট ব্যবহার করা হয়

বা উপাদানের মান
1. . মান হল যেকোনো ধনাত্মক পূর্ণসংখ্যা। তালিকা হিসাবে ল্যাটিন অক্ষর ব্যবহার করা হলেও কি ধরণের সংখ্যা নির্ধারণ করা হয়েছে তা বিবেচ্য নয়। যদি সূচনা এবং মান উভয় বৈশিষ্ট্যই একই সময়ে একটি তালিকায় প্রয়োগ করা হয়, তাহলে পরবর্তীটি অগ্রাধিকার নেয় এবং মান দ্বারা নির্দিষ্ট সংখ্যা থেকে সংখ্যায়ন প্রদর্শিত হয়, যেমন উদাহরণ 1 এ দেখানো হয়েছে।

   উদাহরণ 1: তালিকার নম্বর পরিবর্তন করা

   4. আপনার কর্মক্ষেত্রের ভাল যত্ন নেওয়া উচিত।
   5. ঘরের আলো সামঞ্জস্য করুন যাতে আলোর উত্সটি অপারেটরের পাশে বা পিছনে অবস্থিত হয়।
   10. চিকিৎসা জটিলতা এড়াতে, এটি একটি নরম আসন সঙ্গে একটি চেয়ার নির্বাচন করার সুপারিশ করা হয়।

   এই উদাহরণে তালিকার প্রথম উপাদানটি রোমান সংখ্যা IV দিয়ে শুরু হবে, যেহেতু start="4" অ্যাট্রিবিউটটি নির্দিষ্ট করা হয়েছে, তারপরে V সংখ্যাটি আসে এবং শেষ উপাদানটি ক্রমানুসারে বেরিয়ে আসে এবং X নম্বর নির্ধারণ করা হয় (চিত্র 1)।

   ভাত। 1. তালিকায় রোমান সংখ্যা

   নম্বর লেখা

   ডিফল্টরূপে, একটি সংখ্যাযুক্ত তালিকার একটি নির্দিষ্ট উপস্থিতি থাকে: প্রথমে একটি সংখ্যা, তারপর একটি বিন্দু, এবং তারপরে পাঠ্যটি একটি স্থান দ্বারা পৃথক প্রদর্শিত হয়। লেখার এই ফর্মটি দৃশ্যমান এবং সুবিধাজনক, তবে কিছু বিকাশকারী তালিকার সংখ্যা নির্ধারণের একটি ভিন্ন উপায় দেখতে পছন্দ করে। যথা, যাতে একটি বিন্দুর পরিবর্তে একটি বন্ধ বন্ধনী থাকে, যেমনটি চিত্রে দেখানো হয়েছে। 2 বা অনুরূপ কিছু.

   

   ভাত। 2. বন্ধনী সহ সংখ্যাযুক্ত তালিকা দৃশ্য

   স্টাইলগুলি আপনাকে বিষয়বস্তু এবং কাউন্টার-ইনক্রিমেন্ট বৈশিষ্ট্যগুলি ব্যবহার করে তালিকা সংখ্যার ধরন পরিবর্তন করতে দেয়। প্রথমত, ol নির্বাচককে কাউন্টার-রিসেট করতে সেট করা দরকার : আইটেম , এটি প্রয়োজনীয় যাতে প্রতিটি নতুন তালিকার সংখ্যা নতুন করে শুরু হয়। অন্যথায়, নম্বরিং চলতে থাকবে এবং 1,2,3 এর পরিবর্তে আপনি 5,6,7 দেখতে পাবেন। আইটেম মান কাউন্টারের জন্য একটি অনন্য শনাক্তকারী; আমরা নিজেরাই এটি চয়ন করি। এর পরে, আপনাকে স্টাইল প্রপার্টি লিস্ট-স্টাইল-টাইপ-এর মাধ্যমে মূল মার্কারগুলি লুকিয়ে রাখতে হবে যার মান নেই।

   বিষয়বস্তু সম্পত্তি সাধারণত ::পরে এবং ::পূর্বে ছদ্ম-উপাদানের সাথে একত্রে কাজ করে। সুতরাং, li::before নির্মাণ বলে যে তালিকার প্রতিটি উপাদানের আগে কিছু বিষয়বস্তু যোগ করতে হবে (উদাহরণ 2)।

   উদাহরণ 2. আপনার নিজের নম্বর তৈরি করা

   লি:: আগে ( বিষয়বস্তু: কাউন্টার(আইটেম) ") "; /* সংখ্যায় একটি বন্ধনী যোগ করুন */ পাল্টা-বৃদ্ধি: আইটেম; /* কাউন্টারের নাম সেট করুন */)

   মান কাউন্টার (আইটেম) সহ বিষয়বস্তু সম্পত্তি একটি সংখ্যা প্রদর্শন করে; একটি বন্ধনী যোগ করে, যেমন এই উদাহরণে দেখানো হয়েছে, আমরা প্রয়োজনীয় ধরনের নম্বর পাই। তালিকার সংখ্যা এক করে বাড়ানোর জন্য কাউন্টার-ইনক্রিমেন্ট প্রয়োজন। উল্লেখ্য যে একই শনাক্তকারী, নামকৃত আইটেম, সর্বত্র ব্যবহৃত হয়। চূড়ান্ত কোডটি উদাহরণ 3 এ দেখানো হয়েছে।

   উদাহরণ 3: তালিকার দৃশ্য পরিবর্তন করা

   1. প্রথম
   2. দ্বিতীয়
   3. তৃতীয়
   4. চতুর্থ

   উপরের পদ্ধতিটি ব্যবহার করে, আপনি যে কোনও ধরণের সংখ্যাযুক্ত তালিকা তৈরি করতে পারেন, উদাহরণস্বরূপ, বর্গাকার বন্ধনীতে একটি সংখ্যা রাখুন, এই ক্ষেত্রে শৈলীতে শুধুমাত্র একটি লাইন পরিবর্তন হবে।

   বিষয়বস্তু: "[" কাউন্টার(আইটেম) "]";

   রাশিয়ান অক্ষর সহ তালিকা

   ল্যাটিন অক্ষর সহ একটি সংখ্যাযুক্ত তালিকা রয়েছে, তবে তালিকার জন্য কোনও রাশিয়ান অক্ষর নেই। উপরের কৌশলটি ব্যবহার করে এগুলি কৃত্রিমভাবে যুক্ত করা যেতে পারে। যেহেতু সংখ্যায়ন শৈলীর মাধ্যমে করা হয়, তালিকাটি নিজেই আসল থাকে, শুধুমাত্র নির্বাচিত শ্রেণীটি এতে যোগ করা হয়, আসুন এটিকে সিরিলিক বলি (উদাহরণ 4)।

   উদাহরণ 4: একটি তালিকা তৈরি করার জন্য কোড

   1. এক
   2. দুই
   3. তিন

   অক্ষর যোগ করা হয় ::বিফোর সিউডো-এলিমেন্ট এবং বিষয়বস্তু বৈশিষ্ট্য ব্যবহার করে। যেহেতু প্রতিটি লাইনের নিজস্ব অক্ষর থাকতে হবে, তাই আমরা বন্ধনীতে লেখা অক্ষর নম্বর সহ pseudo-class :nth-child(1) ব্যবহার করব। প্রথম অক্ষর, স্বাভাবিকভাবেই, হল A, দ্বিতীয়টি B, তৃতীয়টি C, ইত্যাদি। এই সম্পূর্ণ সেটটি li নির্বাচকের সাথে নিম্নরূপ যোগ করা হয়েছে (উদাহরণ 5)।

   উদাহরণ 5: ছদ্ম-শ্রেণী:nth-শিশু ব্যবহার করা

   সিরিলিক li:nth-child(1)::before ( বিষয়বস্তু: "a)"; ) .cyrilic li:nth-child(2)::before ( বিষয়বস্তু: "b)"; ) .cyrilic li:nth-child(3)::before ( বিষয়বস্তু: "at)"; )

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

   আমরা অবশেষে অক্ষরগুলির প্রান্তিককরণ এবং অবস্থান সামঞ্জস্য করি, ঐচ্ছিকভাবে ফন্টের আকার, রঙ এবং অন্যান্য পরামিতিগুলি নির্দিষ্ট করি (উদাহরণ 6)।

   উদাহরণ 6. রাশিয়ান অক্ষর সহ তালিকা

   1. বোর্শ
   2. পাইক কাটলেট
   3. কুলেব্যাকা
   4. টক ক্রিম মধ্যে মাশরুম
   5. ক্যাভিয়ার সঙ্গে প্যানকেকস
   6. কেভাস

   ফলাফল এই উদাহরণচিত্রে দেখানো হয়েছে। 3.

   তালিকা অংশ প্রাত্যহিক জীবন. করণীয় তালিকাটি কী করা হয়েছে তা নির্ধারণ করে। নেভিগেশন রুট নির্দেশাবলীর একটি ধাপে ধাপে তালিকা অফার করে। রেসিপিগুলির জন্য উপাদানগুলির একটি তালিকা এবং নির্দেশাবলীর একটি তালিকা প্রয়োজন। তালিকাগুলি প্রায় সর্বত্র পাওয়া যায়, তাই এটি কেন ইন্টারনেটেও জনপ্রিয় তা দেখা সহজ৷

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

   এছাড়া তিনজন বিভিন্ন ধরনের HTML এ উপলব্ধ তালিকা, CSS এর মাধ্যমে এই তালিকাগুলিকে স্টাইল করার বিভিন্ন উপায় রয়েছে। উদাহরণস্বরূপ, আমরা তালিকার জন্য কোন ধরনের বুলেট নির্দিষ্ট করতে পারি তা বেছে নিতে পারি। মার্কার একটি বর্গক্ষেত্র, একটি বৃত্ত, একটি সংখ্যা, একটি অক্ষর, বা সম্ভবত কোনটিই হতে পারে। উপরন্তু, আমরা সিদ্ধান্ত নিতে পারি কিভাবে তালিকাটি প্রদর্শিত হবে - উল্লম্বভাবে বা অনুভূমিকভাবে। এই সমস্ত বিকল্পগুলি আমাদের ওয়েব পৃষ্ঠাগুলিকে স্টাইল করার ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে৷

   বুলেটেড তালিকা

   একটি বুলেটেড বা ক্রমবিন্যস্ত তালিকা কেবল সম্পর্কিত আইটেমগুলির একটি তালিকা যার জন্য অর্ডার কোন ব্যাপার না। HTML এ একটি বুলেটেড তালিকা তৈরি করা একটি ব্লক তালিকা উপাদান ব্যবহার করে করা হয়

   . তালিকার প্রতিটি পৃথক আইটেম একটি উপাদান দিয়ে চিহ্নিত করা হয়
   • .

     ডিফল্টরূপে, বেশিরভাগ ব্রাউজার উপাদানটিতে উল্লম্ব মার্জিন এবং বাম প্যাডিং যোগ করে

     , এবং প্রতিটি উপাদানের আগে
     • একটি একক-রঙ বিন্দু রাখে। এই পয়েন্টটিকে একটি তালিকা চিহ্নিতকারী বলা হয় এবং CSS ব্যবহার করে পরিবর্তন করা যেতে পারে।
       • কমলা
       • সবুজ
       • নীল

       বুলেটেড তালিকা দেখান

       সংখ্যাযুক্ত তালিকা

       আইটেম সংখ্যাযুক্ত বা আদেশ তালিকা

       একটি বুলেটেড তালিকার অনুরূপ, পৃথক বুলেট পয়েন্ট একইভাবে তৈরি করা হয়। তালিকাগুলির মধ্যে প্রধান পার্থক্য হল একটি আদেশকৃত তালিকার জন্য, আইটেমগুলি যে ক্রমে উপস্থাপন করা হয় তা গুরুত্বপূর্ণ।

       কারণ অর্ডার গুরুত্বপূর্ণ, একটি সংখ্যাযুক্ত তালিকা ডিফল্ট বুলেট হিসাবে একটি পিরিয়ডের পরিবর্তে সংখ্যাগুলি ব্যবহার করে।

       1. এপ্রিকট স্ট্রিট ধরে হাঁটুন
       2. ভিনোগ্রাদনায়ার দিকে ঘুরুন

       সংখ্যাযুক্ত তালিকা প্রদর্শন

       সংখ্যাযুক্ত তালিকাগুলিতেও অনন্য বৈশিষ্ট্যগুলি উপলব্ধ রয়েছে, শুরু এবং বিপরীত সহ।

       বৈশিষ্ট্য শুরু করুন

       সূচনা বৈশিষ্ট্যটি নির্দিষ্ট করে যে সংখ্যায় সংখ্যাযুক্ত তালিকা শুরু হওয়া উচিত। ডিফল্টরূপে, তালিকাগুলি 1 থেকে শুরু হয়, তবে এমন পরিস্থিতিতে হতে পারে যেখানে তালিকাটি 30 বা অন্য কোনও সংখ্যায় শুরু হওয়া উচিত। যখন আমরা একটি এলিমেন্টে স্টার্ট অ্যাট্রিবিউট ব্যবহার করি

       , তারপর আমরা সঠিকভাবে নির্ধারণ করতে পারি কোন সংখ্যা থেকে সংখ্যাযুক্ত তালিকার গণনা শুরু করা উচিত।

       স্টার্ট অ্যাট্রিবিউট শুধুমাত্র পূর্ণসংখ্যার মান গ্রহণ করে, যদিও সংখ্যাযুক্ত তালিকাগুলি রোমান সংখ্যার মতো বিভিন্ন নম্বর ব্যবস্থা ব্যবহার করতে পারে।

       30. এপ্রিকট স্ট্রিট ধরে হাঁটুন
       31. ভিনোগ্রাদনায়ার দিকে ঘুরুন
       32. শ্যাডি স্ট্রিটে থামুন

       স্টার্ট অ্যাট্রিবিউটের প্রদর্শন

       বিপরীত বৈশিষ্ট্য

       একটি উপাদানে যোগ করার সময় বিপরীত বৈশিষ্ট্য

       তালিকাটিকে বিপরীত ক্রমে প্রদর্শনের অনুমতি দেয়। 1 থেকে 5 নম্বরের পাঁচটি আইটেমের একটি তালিকা উল্টে 5 থেকে 1 নম্বর দেওয়া যেতে পারে।

       বিপরীত বৈশিষ্ট্য একটি বুলিয়ান বৈশিষ্ট্য এবং যেমন এটি কোনো মান গ্রহণ করে না। এটা সত্য বা মিথ্যা হতে পারে। False হল ডিফল্ট মান, মানটি সত্য হয়ে যায় যখন উপাদানটিতে বিপরীত বৈশিষ্ট্য উপস্থিত হয়

       .
       1. এপ্রিকট স্ট্রিট ধরে হাঁটুন
       2. ভিনোগ্রাদনায়ার দিকে ঘুরুন
       3. শ্যাডি স্ট্রিটে থামুন

       বিপরীত বৈশিষ্ট্যের প্রদর্শন

       মান বৈশিষ্ট্য

       মান বৈশিষ্ট্য পৃথক উপাদান প্রয়োগ করা যেতে পারে

       1. তালিকায় এর মান পরিবর্তন করতে একটি সংখ্যাযুক্ত তালিকায়। একটি মান বৈশিষ্ট্য সহ একটি তালিকা আইটেমের নীচে প্রদর্শিত যে কোনও তালিকা আইটেমের সংখ্যা সেই অনুসারে পুনরায় গণনা করা হবে।

          একটি উদাহরণ হিসাবে, যদি দ্বিতীয় তালিকা আইটেমের একটি মান বৈশিষ্ট্য 9 সেট করা থাকে, তাহলে সেই তালিকা আইটেমের সংখ্যাটি আউটপুট হবে যেন এটি নবমটি ছিল। পরবর্তী সমস্ত তালিকা আইটেম 9 থেকে শুরু করে সংখ্যাযুক্ত হবে।

          1. এপ্রিকট স্ট্রিট ধরে হাঁটুন
          9. ভিনোগ্রাদনায়ার দিকে ঘুরুন
          10. শ্যাডি স্ট্রিটে থামুন

          মান বৈশিষ্ট্য প্রদর্শন

          বর্ণনা তালিকা

          আরেকটি ধরনের তালিকা যা আপনি অনলাইনে দেখতে পাবেন (কিন্তু প্রায়শই বুলেটেড বা সংখ্যাযুক্ত তালিকার মতো নয়) বর্ণনার একটি তালিকা। এই ধরনের তালিকাগুলি একটি শব্দকোষের মতো বেশ কয়েকটি পদ এবং তাদের বিবরণ সনাক্ত করতে ব্যবহৃত হয়, উদাহরণস্বরূপ।

          HTML এ একটি বর্ণনা তালিকা তৈরি করা একটি ব্লক উপাদান ব্যবহার করে সম্পন্ন করা হয়

          . পরিবর্তে উপাদান ব্যবহার

          তালিকার আইটেমগুলিকে চিহ্নিত করতে, একটি বর্ণনা তালিকার দুটি ব্লক উপাদান প্রয়োজন:

          মেয়াদের জন্য এবং

          বর্ণনার জন্য

          একটি বর্ণনা তালিকায় একের পর এক অনেক পদ এবং বর্ণনা থাকতে পারে। উপরন্তু, এই ধরনের একটি তালিকায় প্রতি বর্ণনায় বেশ কয়েকটি পদ থাকতে পারে, সেইসাথে প্রতি পদে বেশ কয়েকটি বর্ণনা থাকতে পারে। একটি একক শব্দের একাধিক অর্থ থাকতে পারে এবং একাধিক বর্ণনার বিষয় হতে পারে। বিপরীতভাবে, একটি বর্ণনা বিভিন্ন পদের সাথে মানানসই হতে পারে।

          একটি বিবরণ তালিকা উপাদান যোগ করার সময়

          উপাদানে যেতে হবে

          . শব্দ এবং বর্ণনা যা অবিলম্বে এটি অনুসরণ করে একে অপরের সাথে সম্পর্কিত। অতএব, এই উপাদানগুলির ক্রম গুরুত্বপূর্ণ।

          ডিফল্টরূপে, উপাদান

          উপাদানগুলির মতো উল্লম্ব প্যাডিং অন্তর্ভুক্ত

          এবং
          . উপরন্তু, উপাদান
          ডিফল্টরূপে বাম মার্জিন অন্তর্ভুক্ত করে।
          অধ্যয়ন
          বিশেষ করে বইয়ের মাধ্যমে শেখানো বিষয় সম্পর্কে জ্ঞান অর্জনের জন্য সময় এবং মনোযোগ দেওয়া।
          প্রকল্প
          একটি জমা দেওয়া প্ল্যান বা অঙ্কন যা দেখায় যে একটি বিল্ডিং, পোশাক বা অন্যান্য আইটেম এটি তৈরি বা তৈরি করার আগে কীভাবে দেখাবে এবং কাজ করবে।
          বিদ্যমান লক্ষ্য, পরিকল্পনা বা উদ্দেশ্যগুলি একটি বাস্তব বস্তুতে মূর্ত বা উপলব্ধি করার আগে।
          ব্যবসা
          চাকরি
          একজন ব্যক্তির নিয়মিত পেশা, পেশা বা নৈপুণ্য।
          বর্ণনা তালিকা প্রদর্শন
          নেস্টেড তালিকা
          যে বৈশিষ্ট্যটি তালিকাগুলিকে খুব শক্তিশালী করে তোলে তা হল নেস্টিং বৈশিষ্ট্য। প্রতিটি তালিকা অন্য তালিকার মধ্যে নেস্ট করা যেতে পারে এবং সেগুলি একাধিকবার নেস্ট করা যেতে পারে। কিন্তু অবিরামভাবে নেস্ট তালিকা করার ক্ষমতা আপনাকে তা করার স্বাধীনতা দেয় না। তালিকাগুলি বিশেষভাবে সংরক্ষিত করা উচিত যেখানে তারা সবচেয়ে শব্দার্থিক অর্থ ধরে রাখে।
          নেস্টিং তালিকার কৌশল হল প্রতিটি তালিকা এবং তালিকা আইটেম কোথায় শুরু হয় এবং শেষ হয় তা জানা। বুলেটযুক্ত এবং সংখ্যাযুক্ত তালিকা সম্পর্কে বিশেষভাবে কথা বলা, একমাত্র উপাদান যা সরাসরি ভিতরে উপস্থিত হতে পারে
          এবং
          একটি উপাদান
          1. . এর পুনরাবৃত্তি করা যাক - একমাত্র উপাদান যা আমরা উপাদানগুলির সরাসরি বংশধর হিসাবে রাখতে পারি
             এবং
             , হয়
             1. .

                যাইহোক, উপাদান ভিতরে

             2. উপাদানগুলির একটি মানক সেট যোগ করা যেতে পারে, যেকোনো উপাদান সহ
                বা
                .

                একটি তালিকা সংযুক্ত করতে - তালিকা আইটেম বন্ধ করার আগে, শুরু করুন নতুন তালিকা. নেস্টেড তালিকাটি সম্পূর্ণ এবং বন্ধ হয়ে গেলে, এনক্লোজিং তালিকা আইটেমটি বন্ধ করুন এবং মূল তালিকার সাথে চালিয়ে যান।

                1. কুকুর হাঁটা
                2. ভাঁজ লন্ড্রি
                3. দোকানে যান এবং কিনুন:
                   • দুধ
                   • রুটি
                   • পনির
                4. ঘাস কাটা
                5. রাতের খাবার রান্না কর

                নেস্টেড তালিকা প্রদর্শন

                যেহেতু নেস্টেড তালিকাগুলি কিছুটা বিভ্রান্তিকর হতে পারে এবং ভুলভাবে করা হলে অবাঞ্ছিত শৈলীগুলি প্রদর্শন করতে পারে - আসুন সেগুলিকে দ্রুত দেখে নেওয়া যাক৷ উপাদান

                এবং
                শুধুমাত্র উপাদান থাকতে পারে
                1. . উপাদান
                2. আপনি চান কোনো নিয়মিত উপাদান থাকতে পারে. যাইহোক, উপাদান
                3. যেকোনো একটি উপাদানের সরাসরি বংশধর হতে হবে
                   , বা
                   .

                   এটিও লক্ষণীয় যে যখন তালিকাগুলি অন্যান্য তালিকার মধ্যে নেস্ট করা হয়, তখন তাদের চিহ্নিতকারীগুলি নেস্টিংয়ের গভীরতার উপর নির্ভর করে পরিবর্তিত হবে। পূর্ববর্তী উদাহরণে, একটি সংখ্যাযুক্ত তালিকার মধ্যে থাকা একটি বুলেটযুক্ত তালিকা চিহ্নিতকারী হিসাবে একটি বিন্দুর পরিবর্তে একটি বৃত্ত ব্যবহার করে। এই পরিবর্তনটি ঘটে কারণ বুলেটযুক্ত তালিকাটি সংখ্যাযুক্ত তালিকার ভিতরে এক স্তরে নেস্টেড থাকে।

                   সৌভাগ্যবশত, আমরা নিয়ন্ত্রণ করতে পারি যে কোনো স্তরে বুলেট পয়েন্টগুলি কীভাবে দেখায়, যা আমরা পরবর্তীতে দেখব।

                   স্টাইলিং তালিকা আইটেম

                   বুলেটযুক্ত এবং সংখ্যাযুক্ত তালিকাগুলি ডিফল্টরূপে তালিকা আইটেম বুলেট ব্যবহার করে। বুলেটযুক্ত তালিকার জন্য এগুলি ঘন রঙের বিন্দু হতে থাকে, যখন সংখ্যাযুক্ত তালিকার জন্য এইগুলি সংখ্যা হতে থাকে। ব্যবহার করে CSS শৈলীএবং এই মার্কারগুলির অবস্থান সামঞ্জস্য করা যেতে পারে।

                   তালিকা-শৈলী-টাইপ সম্পত্তি

                   তালিকা-শৈলী-টাইপ সম্পত্তি তালিকা আইটেম চিহ্নিতকারীর বিষয়বস্তু সেট করতে ব্যবহৃত হয়। উপলব্ধ মানগুলি বর্গ এবং দশমিক থেকে শুরু করে আর্মেনিয়ান সংখ্যায়ন এবং CSS স্টাইলিং উপাদানগুলিতে যোগ করা যেতে পারে

                   ,
                   বা
                   1. .

                      তালিকা-শৈলী-প্রকার সম্পত্তির জন্য যেকোনো মান একটি বুলেটেড বা সংখ্যাযুক্ত তালিকায় যোগ করা যেতে পারে। এটি মাথায় রেখে, আপনি একটি বুলেটযুক্ত তালিকায় নম্বরকরণ এবং সংখ্যাযুক্ত তালিকায় অ-সংখ্যাসূচক বুলেট ব্যবহার করতে পারেন।

                      • কমলা
                      • সবুজ
                      • নীল

                      উল (লিস্ট-স্টাইল-টাইপ: বর্গ;)

                      তালিকা-স্টাইল-টাইপ সম্পত্তির প্রদর্শন

                      তালিকা-শৈলী-প্রকার মান

                      পূর্বে উল্লিখিত হিসাবে, তালিকা-শৈলী-টাইপ সম্পত্তিতে মুষ্টিমেয় বিভিন্ন মান রয়েছে। নিম্নলিখিত সারণী এই মান এবং তাদের সংশ্লিষ্ট বিষয়বস্তু দেখায়।

                      একটি তালিকা চিহ্নিতকারী হিসাবে একটি ছবি ব্যবহার করা

                      এমন একটি সময় আসতে পারে যখন তালিকা-স্টাইল-টাইপ সম্পত্তির জন্য ডিফল্ট মান যথেষ্ট নয় এবং আমরা আমাদের নিজস্ব তালিকা চিহ্নিতকারীকে সংজ্ঞায়িত করতে চাই। এটি প্রায়শই প্রতিটি উপাদানের জন্য একটি পটভূমি চিত্র স্থাপন করে করা হয়।

                   2. .

                      প্রক্রিয়াটিতে যেকোনো ডিফল্ট তালিকা-স্টাইল-টাইপ সম্পত্তির মান অপসারণ করা এবং উপাদানটিতে একটি পটভূমি চিত্র এবং মার্জিন যোগ করা জড়িত।

                   3. .

                      আরও বিশদ বিবরণ - তালিকা-শৈলী-টাইপ বৈশিষ্ট্যকে কোনোটিতেই সেট করা বিদ্যমান তালিকা চিহ্নিতকারীকে সরিয়ে দেবে না। ব্যাকগ্রাউন্ড প্রোপার্টি ব্যাকগ্রাউন্ড ইমেজকে তার অবস্থান সহ সেট করবে এবং প্রয়োজনে পুনরাবৃত্তি করবে। এবং প্যাডিং প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের জন্য পাঠ্যের বাম দিকে স্থান প্রদান করবে।

                      • কমলা
                      • সবুজ
                      • নীল

                      Li ( ব্যাকগ্রাউন্ড: url("arrow.png") 0 50% no-repeat; list-style-type: none; padding-left: 12px; )

                      একটি মার্কার হিসাবে একটি চিত্র দেখাচ্ছে

                      তালিকা-শৈলী-অবস্থান সম্পত্তি

                      ডিফল্টরূপে, তালিকা বুলেটগুলি উপাদানের বিষয়বস্তুর বাম দিকে অবস্থান করে

                   4. . এই পজিশনিং স্টাইলটিকে বাইরের হিসাবে বর্ণনা করা হয়েছে, যার মানে হল যে সমস্ত বিষয়বস্তু সরাসরি ডানদিকে প্রদর্শিত হবে, তালিকা চিহ্নিতকারীর বাইরে। লিস্ট-স্টাইল-পজিশন প্রপার্টির সাহায্যে আমরা বাইরের ডিফল্ট মান ভিতরে বা ইনহেরিট-এ পরিবর্তন করতে পারি।

                      বাইরে উপাদানের বাম দিকে তালিকা চিহ্নিতকারী রাখে

                   5. এবং কোন বিষয়বস্তু এই মার্কারের নিচে প্রবাহিত হতে দেবেন না। ভিতরের মান (যা খুব কমই ব্যবহৃত হয় এবং দেখা যায়) উপাদানটির প্রথম লাইনে তালিকা চিহ্নিতকারীকে রাখে
                   6. এবং প্রয়োজনে বিষয়বস্তুকে চিহ্নিতকারীর চারপাশে মোড়ানোর অনুমতি দেয়।
                      • কাপকেক...
                      • ছিটিয়ে...

                      উল (তালিকা-শৈলী-অবস্থান: ভিতরে;)

                      তালিকা-শৈলী-অবস্থান সম্পত্তি প্রদর্শন

                      সাধারণ সম্পত্তি তালিকা-শৈলী

                      আমরা সম্প্রতি যে তালিকার বৈশিষ্ট্যগুলি নিয়ে আলোচনা করেছি, তালিকা-শৈলী-প্রকার এবং তালিকা-শৈলী-পজিশন, একটি সাধারণ সম্পত্তি, তালিকা-শৈলীতে একত্রিত করা যেতে পারে। এই সম্পত্তিতে, আমরা একই সময়ে এক বা সমস্ত তালিকার সম্পত্তি মান ব্যবহার করতে পারি। এই মানগুলির ক্রমটি হওয়া উচিত: তালিকা-শৈলী-প্রকারের পরে তালিকা-শৈলী-পজিশন।

                      Ul ( তালিকা-শৈলী: ভিতরে বৃত্ত; ) ol ( তালিকা-শৈলী: নিম্ন-রোমান; )

                      অনুভূমিক তালিকা প্রদর্শন

                      কখনও কখনও আমরা তালিকাগুলি উল্লম্বভাবে না করে অনুভূমিকভাবে প্রদর্শন করতে চাই। সম্ভবত আমরা একটি নেভিগেশন তালিকা তৈরি করতে তালিকাটিকে কয়েকটি কলামে ভাগ করতে চাই বা এক সারিতে একাধিক তালিকা আইটেম রাখতে চাই। বিষয়বস্তু এবং পছন্দসই উপর নির্ভর করে চেহারাএকটি একক লাইন হিসাবে তালিকা প্রদর্শন করার বিভিন্ন উপায় আছে, উদাহরণস্বরূপ উপাদানগুলির প্রদর্শন সম্পত্তি মান গ্রহণ করে

                   7. ইনলাইন বা ইনলাইন-ব্লক বা ফ্লোট প্রপার্টির মাধ্যমে।

                      তালিকা প্রদর্শন

                      অধিকাংশ দ্রুত উপায়এক লাইনে একটি তালিকা প্রদর্শন করুন - এটি উপাদানগুলি সেট করতে হয়

                   8. ইনলাইন বা ইনলাইন-ব্লক মান সহ বৈশিষ্ট্য প্রদর্শন করুন। এই সব উপাদান রাখা হবে
                   9. প্রতিটি তালিকা আইটেমের মধ্যে সমান ব্যবধান সহ একটি লাইনে।

                      যদি উপাদানগুলির মধ্যে ফাঁকা থাকে

                   10. সমস্যা সৃষ্টি করছে, আমরা পাঠ 5, অবস্থান নির্ধারণ বিষয়বস্তুতে আলোচনা করেছি সেই একই কৌশলগুলি ব্যবহার করে সেগুলি সরানো যেতে পারে।

                       অনেক সময় আমরা ইনলাইন মানের পরিবর্তে ইনলাইন-ব্লক মান ব্যবহার করব। ইনলাইন-ব্লক মান উপাদানগুলিতে উল্লম্ব প্যাডিং এবং অন্যান্য স্থান যোগ করা সহজ করে তোলে

                   11. , যখন ইনলাইন মান হয় না।

                       যখন ডিসপ্লে প্রপার্টির মান ইনলাইন বা ইনলাইন-ব্লক তে পরিবর্তিত হয়, তখন তালিকা চিহ্নিতকারী, একটি বিন্দু, সংখ্যা, বা অন্য, সরানো হয়।

                       • কমলা
                       • সবুজ
                       • নীল

                       Li ( প্রদর্শন: ইনলাইন-ব্লক; মার্জিন: 0 10px; )

                       ইনলাইন-ব্লক সহ একটি তালিকা প্রদর্শন

                       ভাসা সঙ্গে তালিকা

                       ইনলাইন বা ইনলাইন-ব্লক-এ প্রদর্শন বৈশিষ্ট্য পরিবর্তন করা দ্রুত, কিন্তু এটি তালিকা চিহ্নিতকারীগুলিকে সরিয়ে দেয়। যদি তাদের প্রয়োজন হয় তবে প্রতিটি উপাদানে একটি ফ্লোট যোগ করা

                   12. ডিসপ্লে প্রপার্টি পরিবর্তন করার চেয়ে এটি একটি ভাল বিকল্প।

                       সমস্ত উপাদানের জন্য ইনস্টলেশন

                   13. বাম মত float বৈশিষ্ট্য অনুভূমিকভাবে সব উপাদান সারিবদ্ধ হবে
                   14. তাদের মধ্যে কোন ফাঁক ছাড়া সরাসরি একে অপরের পাশে। আমরা যখন জন্য float ব্যবহার
                   15. , তালিকা চিহ্নিতকারী ডিফল্টরূপে প্রদর্শিত হয় এবং আইটেমের উপরে অবস্থান করা হবে
                   16. তার পাশে. তালিকা চিহ্নিতকারীকে অন্যান্য আইটেমের উপরে উপস্থিত হওয়া থেকে আটকাতে
                   17. , অনুভূমিক মার্জিন বা প্যাডিং যোগ করতে হবে।
                       • কমলা
                       • সবুজ
                       • নীল

                       Li ( float: left; margin: 0 20px; )

                       ফ্লোট সহ একটি তালিকা প্রদর্শন

                       যেকোনো ভাসমান উপাদানের মতো, এটি পৃষ্ঠার প্রবাহকে ভেঙে দেয়। আমরা ফ্লোটটি পরিষ্কার করতে এবং পৃষ্ঠাটিকে স্বাভাবিক প্রবাহে ফিরিয়ে দিতে ভুলবেন না - সবচেয়ে সাধারণ পদ্ধতি হল clearfix এর মাধ্যমে।

                       নেভিগেশন তালিকা উদাহরণ

                       আমরা প্রায়শই ন্যাভিগেশন মেনুগুলি ডিজাইন করি এবং খুঁজে পাই যা ক্রমবিহীন তালিকা ব্যবহার করে। এই তালিকাগুলি সাধারণত আগে উল্লিখিত দুটি পদ্ধতির একটি ব্যবহার করে অনুভূমিকভাবে স্থাপন করা হয়। এখানে, উদাহরণস্বরূপ, একটি অনুভূমিক নেভিগেশন মেনু যা একটি অ-ক্রমহীন তালিকা ব্যবহার করে সাজানো হয়েছে, যেখানে উপাদানগুলি

                   18. ইনলাইন-ব্লক হিসাবে প্রদর্শিত হয়।

                       নেভিগেশন ul ( ফন্ট: বোল্ড 11px "Helvetica Neue", Helvetica, Arial, sans-serif; মার্জিন: 0; প্যাডিং: 0; টেক্সট-ট্রান্সফর্ম: বড় হাতের অক্ষর; ) .নেভিগেশন li ( প্রদর্শন: ইনলাইন-ব্লক; ) .নেভিগেশন a ( পটভূমি: #395870; পটভূমি: লিনিয়ার-গ্রেডিয়েন্ট(#49708f, #293f50); সীমানা-ডান: 1px কঠিন rgba(0, 0, 0, .3); রঙ: #fff; প্যাডিং: 12px 20px; পাঠ্য-সজ্জা: কোনোটিই নয়; ) .নেভিগেশন এ:হোভার (পটভূমি: #314b60; বক্স-শ্যাডো: ইনসেট 0 0 10px 1px rgba(0, 0, 0, .3); ) .নেভিগেশন li:first-child a ( বর্ডার-ব্যাসার্ধ: 4px 0 0 4px; ) .নেভিগেশন li:last-child a ( বর্ডার-ডান: 0; বর্ডার-ব্যাসার্ধ: 0 4px 4px 0; )

                       নেভিগেশন তালিকা প্রদর্শন

                       অনুশীলনে

                       এখন যেহেতু আমরা জানি কিভাবে HTML এবং CSS-এ তালিকা তৈরি করতে হয়, আসুন আমাদের স্টাইল কনফারেন্স সাইটটি একবার দেখে নেওয়া যাক এবং আমরা কোথায় তালিকা ব্যবহার করতে পারি তা দেখি।

                       এখন উপাদানগুলিতে নেভিগেশন মেনু

                       এবং