বাড়ি
কিভাবে কাজ করতে হয়
কি সিএসএস বৈশিষ্ট্য তালিকা চিহ্নিতকারী পরিবর্তন. বিভিন্ন উপায়ে একটি তালিকা চিহ্নিতকারী সেট করা। CSS এ মার্কার রঙ পরিবর্তন করা হচ্ছে

কি সিএসএস বৈশিষ্ট্য তালিকা চিহ্নিতকারী পরিবর্তন. বিভিন্ন উপায়ে একটি তালিকা চিহ্নিতকারী সেট করা। CSS এ মার্কার রঙ পরিবর্তন করা হচ্ছে

টাস্ক

তালিকায় মার্কার প্রদর্শন লুকান।

সমাধান

এই উদ্দেশ্যে, স্টাইল প্রপার্টি লিস্ট-স্টাইল-টাইপটি কোনটি মান দিয়ে ব্যবহার করা হয়। উদাহরণ 1 এ দেখানো হিসাবে এটি UL বা LI নির্বাচকের সাথে যোগ করা উচিত।

উদাহরণ 1: বুলেট ছাড়া তালিকা

HTML5 CSS 2.1 IE Cr Op Sa Fx

তালিকা থেকে মার্কারগুলি সরানো হচ্ছে

  • উত্তর
  • দক্ষিণ
  • পশ্চিম
  • পূর্ব

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

ভাত। 1. বুলেট ছাড়া তালিকা

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

তালিকার জন্য, এইচটিএমএল ব্যবহার করে তৈরি করা এখানে বর্ণনা করা হয়েছে, নিম্নলিখিত সিএসএস নিয়মগুলি প্রদান করা হয়েছে।

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

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

  • ডিস্ক- বৃত্ত, ডিফল্টরূপে সেট করা।
  • বৃত্ত- বৃত্ত।
  • বর্গক্ষেত্র- বর্গক্ষেত্র।

সংখ্যাযুক্ত তালিকার জন্য, সম্পত্তি সাধারণত নিম্নলিখিত মান বরাদ্দ করা হয়:

  • দশমিক- আরবি সংখ্যা, ডিফল্ট মান।
  • নিম্ন-রোমান- ছোট রোমান সংখ্যা।
  • উচ্চ-রোমান- মূলধন রোমান সংখ্যা।
  • নিম্ন-আলফা- ছোট হাতের ল্যাটিন অক্ষর।
  • ঊর্ধ্ব-আলফা- বড় ল্যাটিন অক্ষর।

এছাড়াও, যেকোন তালিকার প্রকারের জন্য, তালিকা-শৈলী-টাইপ বৈশিষ্ট্য কোনোটিতেই সেট করা যাবে না, যা মার্কারটিকে সম্পূর্ণভাবে সরিয়ে দেবে।

অন্যান্য মানগুলি সংখ্যাযুক্ত তালিকার জন্য উপলব্ধ, যেমন cjk-আইডিওগ্রাফিকআইডিওগ্রাফিক নাম্বারিং সেট করে, আর্মেনিয়ান- ঐতিহ্যগত আর্মেনিয়ান, এবং দশমিক-প্রধান-শূন্যরোমান সংখ্যায় সংখ্যা নির্ধারণ করবে, কিন্তু অগ্রণী শূন্য সহ: 01, 02, 03... 09, তবে অনুশীলনে এই এবং অনুরূপ মানগুলি খুব কমই ব্যবহৃত হয়।

নীচের উদাহরণটি তিনটি তালিকা প্রদর্শন করে: ঐতিহ্যগত আর্মেনিয়ান সংখ্যায়ন সহ একটি সংখ্যাযুক্ত তালিকা, একটি বৃত্ত সহ একটি বুলেটযুক্ত তালিকা এবং আদর্শগতভাবে সংখ্যাযুক্ত আইটেমগুলির সাথে একটি সংখ্যাযুক্ত তালিকা৷

<a href="https://ymol.ru/bn/setting/kak-ubrat-otstup-u-spiska-sleva-css-izuchaem-otstupy-teksta-v-html/">CSS তালিকাভুক্ত করে</a>

  1. প্রথম পয়েন্ট
  2. দ্বিতীয় পয়েন্ট
  3. তৃতীয় পয়েন্ট
  • প্রথম পয়েন্ট
  • দ্বিতীয় পয়েন্ট
  • তৃতীয় পয়েন্ট
  1. প্রথম পয়েন্ট
  2. দ্বিতীয় পয়েন্ট
  3. তৃতীয় পয়েন্ট

ফলাফল।

মার্কারগুলির রঙ সম্পত্তি দ্বারা নির্দিষ্ট করা তালিকার পাঠ্যের রঙের সাথে মেলে রঙ.

তালিকা-শৈলী-চিত্র

আপনাকে একটি তালিকা চিহ্নিতকারী হিসাবে আপনার নিজের ছবি সেট করার অনুমতি দেয়৷ উদাহরণস্বরূপ, যদি তালিকা পৃষ্ঠা ধারণকারী ফোল্ডার ফাইল ধারণ করে marker.png, যা আপনি ব্যবহার করতে চান, তাহলে ডিজাইন কোডটি নিম্নরূপ হবে:

উল ( তালিকা-শৈলী-চিত্র: url("marker.png");)

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

চিহ্নিতকারীর অবস্থান নির্ধারণ করে: হয় এটি তালিকা উপাদানের সীমানার বাইরে স্থাপন করা হয় ( তালিকা-শৈলী-অবস্থান: বাইরে), অথবা টেক্সট এর চারপাশে মোড়ানো হয় ( তালিকা-শৈলী-অবস্থান: ভিতরে).

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

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

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

ফলস্বরূপ, নিম্নলিখিত পৃষ্ঠাটি তৈরি করা হয়েছে:

তালিকা-শৈলী

আপনাকে একটি লাইনে তিনটি তালিকাভুক্ত বৈশিষ্ট্য লিখে আপনার কোড ছোট করার অনুমতি দেয়। নিয়মগুলি স্পেস দ্বারা পৃথক করা হয়:

উল (লিস্ট-স্টাইল: বর্গাকার ভিতরে;)

আসুন তিনটি তালিকা সহ একটি পৃষ্ঠার উদাহরণ দেখি। প্রথমটি 01, 02 বিন্যাসে সংখ্যার সাথে সংখ্যাযুক্ত, দ্বিতীয়টি একটি কাস্টম ছবি দিয়ে চিহ্নিত করা হয়েছে (পৃষ্ঠার সাথে ফোল্ডারে ফাইল marker.png), তৃতীয় তালিকার চিহ্নিতকারী অক্ষম করা হয়েছে৷

HTML কোড নিচে দেওয়া হল।

তালিকা-শৈলী

  1. প্রথম পয়েন্ট
  2. দ্বিতীয় পয়েন্ট
  3. তৃতীয় পয়েন্ট
  • প্রথম পয়েন্ট
  • দ্বিতীয় পয়েন্ট
  • তৃতীয় পয়েন্ট
  1. প্রথম পয়েন্ট
  2. দ্বিতীয় পয়েন্ট
  3. তৃতীয় পয়েন্ট

ব্রাউজার নিম্নলিখিত পৃষ্ঠা প্রদর্শন করবে।

আজ কার্যত এমন একটি সাইট নেই যেখানে তারা ব্যবহার করে না এইচটিএমএল তালিকা (

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

      এখন আমরা কী তৈরি করব তা দেখতে ডেমোটি দেখুন।

      অনেক ভালো দেখতে, তাই না? এবং আপনিও সহজ CSS কোড ব্যবহার করে এই ধরনের তালিকা তৈরি করতে পারেন। কিভাবে জানতে চান? পড়ুন!

      তালিকা #1: সরল নেভিগেশন সিস্টেম

      প্রায়শই, একটি নেভিগেশন মেনু তৈরি করার সময় তালিকাগুলি ব্যবহার করা হয়। এই HTML/CSS উদাহরণ কোডটি আপনাকে একটি সাধারণ, এমনকি সামান্য বিনয়ী, কিন্তু আকর্ষণীয় নেভিগেশন সিস্টেম তৈরি করতে দেয়।

      • বাড়ি
      • ব্লগ
      • সম্পর্কে
      • যোগাযোগ

      /* তালিকা #1 */ #list1 ( ) #list1 ul ( list-style:none; text-align:center; border-top:1px solid #eee; বর্ডার-বটম:1px solid #eee; প্যাডিং:10px 0; ) #list1 ul li ( প্রদর্শন: ইনলাইন; টেক্সট-ট্রান্সফর্ম: বড় হাতের অক্ষর; প্যাডিং: 0 10px; অক্ষর-স্পেসিং: 10px; ) #list1 ul li a (টেক্সট-সজ্জা: কোনটিই নয়; রঙ: #eee; ) #list1 ul li a:হোভার (টেক্সট-সজ্জা:আন্ডারলাইন;)

      তালিকা #2: নম্বর দেওয়ার জন্য একটি ভিন্ন ফন্ট ব্যবহার করা

      একটি তালিকা ব্যবহার করার সমস্যা হল যে এটি পাঠ্যের সাথে মিশে যায়। এবং সংখ্যাগুলি সর্বদা পাঠ্যের মতো একই রঙের হয়।
      কিন্তু একটু শৈলী যোগ করুন এবং আপনি উপরের সীমাবদ্ধতাগুলি ভুলে যাবেন এবং আপনার তালিকাগুলি আরও আকর্ষণীয় হয়ে উঠবে। এটি কীভাবে করা হয়েছে তা এখানে:

        নেদারল্যান্ডসএকটি দেশ হল...

        মার্কিন যুক্তরাষ্ট্রএকটি ফেডারেল সাংবিধানিক...

        ফিলিপাইনআনুষ্ঠানিকভাবে প্রজাতন্ত্র নামে পরিচিত...

        যুক্তরাজ্যগ্রেট ব্রিটেন এবং...

      /* তালিকা #2 */ #list2 ( প্রস্থ:320px; ) #list2 ol ( font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; ) #list2 ol li ( ) #list2 ol li p ( প্যাডিং:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; বর্ডার-বাম: 1px কঠিন #999; ) #list2 ol li p em ( প্রদর্শন: ব্লক; )

      তালিকা #3: মার্কার ছবি

      আপনি সহজে মানক মানগুলির একটি নির্দিষ্ট করে অবিন্যস্ত তালিকা মার্কারগুলির চেহারা পরিবর্তন করতে পারেন, তবে আপনি চিত্রগুলিকে চিহ্নিতকারী হিসাবেও ব্যবহার করতে পারেন৷ এই সমাধান আপনার তালিকা আরো মৌলিক করতে সাহায্য করবে. এবং এখানে কোড আছে:

      • জাভা
      • .নেট

      /* তালিকা #3 */ #list3 ( ) #list3 ul ( তালিকা-শৈলী-চিত্র: url(../images/arrow.png"); রঙ:#eee; font-size:18px; ) #list3 ul li ( লাইন-উচ্চতা: 30px; )

      তালিকা #4: আইফোন শৈলী

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

      • টরন্টো 2004
      • বেইজিং 2008
      • লন্ডন 2012
      • রিও ডি জেনিরো 2016

      /* তালিকা #4 */ #list4 ( প্রস্থ:320px; font-family:Georgia, Times, serif; font-size:15px; ) #list4 ul ( list-style: none; ) #list4 ul li ( ) #list4 ul li a ( প্রদর্শন: ব্লক; টেক্সট-সজ্জা: কোনটি; রঙ: #000000; ব্যাকগ্রাউন্ড-রঙ: #FFFFFF; লাইন-উচ্চতা: 30px; বর্ডার-নীচ-স্টাইল: সলিড; সীমানা-নীচ-প্রস্থ: 1px; সীমানা- নিচের রঙ:#CCCCCC; প্যাডিং-বাম: 10px; কার্সার:পয়েন্টার; :repeat-x; ) #list4 ul li a strong ( মার্জিন-ডান:10px; )

      তালিকা #5: নেস্টেড তালিকা

      নেস্টেড তালিকা অবিশ্বাস্যভাবে দরকারী এবং সুন্দর দেখতে হতে পারে। তৃতীয় কৌশল (বুলেট ইমেজ) পরিবর্তন করে আমরা একটি "প্রসারিত তালিকা" তৈরি করতে পারি। অবশ্যই, jQuery এর সাহায্য ছাড়া নয়:

      1. গুগল
        1. পিকাসা
        2. ফিডবার্নার
        3. ইউটিউব
      2. মাইক্রোসফট
        1. কোরেল কর্পোরেশন
        2. জিগন্যাল
        3. বাইটট্যাক্সি
      3. ইয়াহু!
        1. Xoopit
        2. BuzzTracker
        3. MyBlogLog

      /* তালিকা #5 */ #list5 (রঙ:#eee; ) #list5 ol ( font-size:18px; ) #list5 ol li ( ) #list5 ol li ol ( তালিকা-শৈলী-চিত্র: url("। /images/nested.png"); প্যাডিং:5px 0 5px 18px; font-size:15px; ) #list5 ol li ol li ( রঙ:#bfe1f1; উচ্চতা:15px; মার্জিন-বাম:10px; )

      তালিকা #6: রোমান নম্বরিং + মাল্টিলাইন টাইপ

      ডিফল্টরূপে, তালিকাটি স্ট্যান্ডার্ড নম্বর ব্যবহার করে (1, 2, 3, 4, ইত্যাদি)। CSS-এ মান পরিবর্তন করে, আপনি একটি ভিন্ন ধরনের সংখ্যা উল্লেখ করতে পারেন, উদাহরণস্বরূপ, রোমান।
      এছাড়াও, ডিফল্টরূপে, নম্বর এবং বুলেটগুলি তালিকার বাইরে অবস্থিত (আমাদের তালিকা নম্বর 2 এর একটি চমৎকার উদাহরণ)। কিন্তু এটি ঠিক করা যেতে পারে, আপনাকে শুধু তালিকা-শৈলী-অবস্থান সম্পত্তির মান ভিতরে পরিবর্তন করতে হবে।

      1. Lorem ipsum dolor sit amet, ...
        ফুস করে বসুন...
      2. Aenean Placerat lectus tristique...
        ভিভামাস ইন্টারডাম...
      3. Mauris eget sapien arcu, vitae...
        ফ্যাসেলাস নেক রিসাস...
      4. ফ্যাসেলাস ফিউগিয়াট ল্যাকাস...
        ডুইস রোনকাস...

      /* তালিকা #6 */ #list6 ( ফন্ট-পরিবার: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; ) #list6 ol ( তালিকা-স্টাইল-টাইপ: উপরের -রোমান; #eee;

      তালিকা #7: কমা দ্বারা পৃথক আইটেম সহ রৈখিক তালিকা

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

      • প্রথম ইনলাইন আইটেম
      • দ্বিতীয় ইনলাইন আইটেম
      • তৃতীয় ইনলাইন আইটেম
      • চতুর্থ ইনলাইন আইটেম

      /* তালিকা #7 */ #list7 ( ) #list7 ul (রঙ:#eee; font-size:18px; font-family:Georgia, Times, serif; ) #list7 ul li ( প্রদর্শন: ইনলাইন; ) #list7 ul li:after ( বিষয়বস্তু: ", "; ) #list7 ul li.last:after ( বিষয়বস্তু: "."; )

      তালিকা #8: ঘোরানো নেভিগেশন মেনু

      এখানে শেষ কৌশলটি কাজ করার জন্য CSS3 প্রয়োজন (শুধুমাত্র সমর্থিত সর্বশেষ সংস্করণফায়ারফক্স, সাফারি এবং ক্রোম)। আপনি যখন একটি ব্লক উপাদানের উপর কার্সারটি ঘোরান, তখন ঘূর্ণন প্রভাব সক্রিয় হয়। অবশ্যই সেরা নয় সুবিধাজনক উপায়, কিন্তু খুব সুন্দর।

      • বাড়ি
      • ব্লগ
      • সম্পর্কে
      • যোগাযোগ

      /* তালিকা #8 */ #list8 ( ) #list8 ul ( list-style: none; ) #list8 ul li ( font-family:Georgia,serif,Times; font-size:18px; ) #list8 ul li a ( ডিসপ্লে:ব্লক; -moz-box-shadow:10px 10px #000000; -webkit-box-shadow:10px 20px #000000; rotate(-5deg:0p); 10px 20px #000000;

      উপসংহার

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

      তালিকা-শৈলী-প্রকার বৈশিষ্ট্য মার্কার প্রকার নির্ধারণ করে। এখানে এই সম্পত্তির জন্য বৈধ মানগুলির একটি টেবিল রয়েছে:

      অর্থ উদাহরণ
      ডিস্ক
      • তালিকা আইটেম
      বৃত্ত
      • তালিকা আইটেম
      বর্গক্ষেত্র
      • তালিকা আইটেম
      দশমিক
      • তালিকা আইটেম
      দশমিক-প্রধান-শূন্য
      • তালিকা আইটেম
      নিম্ন-রোমান
      • তালিকা আইটেম
      উচ্চ-রোমান
      • তালিকা আইটেম
      নিম্ন-আলফা
      • তালিকা আইটেম
      ঊর্ধ্ব-আলফা
      • তালিকা আইটেম
      জর্জিয়ান
      • তালিকা আইটেম
      • তালিকা আইটেম
      • তালিকা আইটেম
      cjk-আইডিওগ্রাফিক
      • তালিকা আইটেম
      • তালিকা আইটেম
      • তালিকা আইটেম
      কোনটি
      • তালিকা আইটেম

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

      এখন এই সম্পত্তি ব্যবহার করার একটি উদাহরণ:

      তালিকা-স্টাইল-টাইপ সম্পত্তি।

      1. প্রথম পয়েন্ট.
      2. দ্বিতীয় পয়েন্ট।
      3. তৃতীয় পয়েন্ট।

      দয়া করে মনে রাখবেন যে আমরা একটি সংখ্যাযুক্ত তালিকা চালু করেছি

        লেবেলযুক্ত।

        চিত্র 1. তালিকা-শৈলী-টাইপ সম্পত্তি।

        কোন মানের দিকে মনোযোগ দিতে ভুলবেন না, এই মানটি মার্কারকে সম্পূর্ণরূপে সরিয়ে দেয়। এই বৈশিষ্ট্যটি প্রায়ই CSS ব্যবহার করে তালিকা ফর্ম্যাট করতে ব্যবহৃত হয়।

        তালিকা-শৈলী-টাইপ সম্পত্তি তালিকার সাথে কাজ করার জন্য অন্যান্য বৈশিষ্ট্যের মতো বেশ সহজ।

        তালিকা-শৈলী-চিত্র বৈশিষ্ট্য একটি গ্রাফিক ফাইলে মার্কার প্রতীক সেট করে।

        সম্পত্তি তালিকা-শৈলী-চিত্র..gif");)</style> </head> <body> <ul> <li>প্রথম পয়েন্ট.</li> <li>দ্বিতীয় পয়েন্ট।</li> <li>তৃতীয় পয়েন্ট।</li> </ul> </body> </html> </p><p>এখানে এই কোডের ফলাফল:</p> <img src='https://i1.wp.com/komotoz.ru/uroki/css/example/images/lists_2.png' height="190" width="374" loading=lazy loading=lazy>চিত্র 2. তালিকা-শৈলী-ইমেজ সম্পত্তি। <p>আমরা দেখতে পাচ্ছি যে তালিকা বুলেটগুলি এখন চেক করা হয়েছে <a href="https://ymol.ru/bn/problems/kak-perevesti-izobrazhenie-v-format-bmp-kak-konvertirovat-graficheskii/">গ্রাফিক ফাইল</a>.</p> <h2>তালিকা-শৈলী-অবস্থান সম্পত্তি</h2> <p>আমরা এই সম্পত্তি অধ্যয়ন শুরু করার আগে, আসুন আরো বিস্তারিতভাবে উপাদান বিন্যাস মডেল অধ্যয়ন করা যাক <ul> .</p><p> <!DOCTYPE html> <html> <head> <title>তালিকা ফরম্যাট করা যাক.

        • প্রথম পয়েন্ট.
        • দ্বিতীয় পয়েন্ট।
        • তৃতীয় পয়েন্ট।

        আমরা যা দেখি তা এখানে:

        চিত্র 3. ব্লক ফরম্যাট করুন
          .

          তালিকা চিহ্নিতকারীগুলি উপাদান ব্লকের সীমানা ছাড়িয়ে প্রসারিত হওয়ার বিষয়টিতে মনোযোগ দেওয়া গুরুত্বপূর্ণ

        • , একটি লাল সীমানা দ্বারা ফ্রেম করা. এটি অপ্রত্যাশিত ফলাফলের দিকে নিয়ে যেতে পারে, উদাহরণস্বরূপ আমরা প্যাডিং পুনরায় সেট করি
            .

            তালিকা ফরম্যাট করা যাক.

            • প্রথম পয়েন্ট.
            • দ্বিতীয় পয়েন্ট।
            • তৃতীয় পয়েন্ট।

            আমরা যা পাই তা হল:

            চিত্র 4. ব্লক ফরম্যাট করুন
              .

              তালিকা চিহ্নিতকারীগুলি এখন কন্টেইনারের বাইরে

                . এইভাবে, চিহ্নিতকারী নিবন্ধের কন্টেইনারের বাইরে যেতে পারে যার সাথে তালিকাটি অন্তর্ভুক্ত, যা লঙ্ঘন করবে চেহারাসাইট

                এগুলি একটি পাত্রের ভিতরে রাখা ভাল

              • . এটা সমাধান হবে এই সমস্যা. তালিকা-শৈলী-অবস্থান সম্পত্তির জন্য এটিই।

                তালিকা-শৈলী-পজিশন বৈশিষ্ট্য ব্লকের সাপেক্ষে চিহ্নিতকারীর অবস্থান নির্ধারণ করে

              • . এই সম্পত্তির দুটি অর্থ রয়েছে:

                ডিফল্ট মান বাইরে।

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

              • ভিতরে এই সম্পত্তি সেট করে.

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

                • প্রথম পয়েন্ট.
                • দ্বিতীয় পয়েন্ট।
                • তৃতীয় পয়েন্ট।

                আমরা যা পেয়েছি তা এখানে:

                চিত্র 5. তালিকা-শৈলী-অবস্থান সম্পত্তি।

                তালিকা বুলেটগুলি এখন একটি ব্লকের মধ্যে নেস্টেড

              • .

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

                তালিকা-শৈলী সম্পত্তি একটি সংক্ষিপ্ত আকার যা আপনাকে পূর্ববর্তী তিনটি বৈশিষ্ট্যের মান ব্যবহার করতে দেয়।

                উদাহরণ: একটি মার্কার দিয়ে একটি ছবি তৈরি করুন এবং তালিকা আইটেম ব্লকের ভিতরে মার্কার রাখুন।

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

                • প্রথম পয়েন্ট.
                • দ্বিতীয় পয়েন্ট।
                • তৃতীয় পয়েন্ট।

                এখানে ফলাফল:

                চিত্র 6. তালিকা-শৈলী সম্পত্তি।

                আমরা একটি তালিকা-শৈলী সম্পত্তিতে দুটি মান নির্দিষ্ট করেছি: মার্কার অবস্থান এবং মার্কার গ্রাফিক ফাইলের পথ।

                তালিকা-শৈলী সম্পত্তি প্রায়শই ব্যবহার করা হয়, এমনকি একটি একক মান সেট করতে। এটি সংক্ষিপ্ত এবং লেখা সহজ।

                সম্পর্কিত CSS রেসিপি

                • সিএসএস-এ কীভাবে একটি ড্রপডাউন মেনু তৈরি করবেন, ছায়া সহ একটি জটিল উদাহরণ।

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

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

                  1. - HTML পাঠ্যপুস্তকে 9 অধ্যায় বর্ণিত হয়েছে - আমি কাজ শুরু করার আগে এই উপাদানগুলি সম্পর্কে আপনার মনকে সতেজ করার পরামর্শ দিচ্ছি।

                    ঠিক আছে, যদি এটি আপনার মাথায় ইতিমধ্যেই তাজা থাকে, তাহলে শুরু করা যাক!

                    তালিকায় চিহ্নিতকারীর ধরন।

                    আপনি যদি মনে করেন, বিশুদ্ধ HTML-এ তালিকায় চিহ্নিতকারীর ধরন বৈশিষ্ট্য দ্বারা নির্ধারিত হয়েছিল টাইপএবং এর সম্ভাব্য মানগুলির মধ্যে একটি, CSS-এ এই কাজটি সম্পত্তি দ্বারা নেওয়া হয়: তালিকা-শৈলী-প্রকারযা, ঘুরে, এর নিজস্ব স্ট্যান্ডার্ড মানও রয়েছে যা একবারে সম্পূর্ণ তালিকার জন্য এবং এর পৃথক "আইটেম" উভয়ের জন্য চিহ্নিতকারীর ধরন নির্ধারণ করে।

                    মূল্যবোধ তালিকা-শৈলী-প্রকার:

                    • ডিস্ক- ডিস্ক। (এর জন্য ডিফল্ট
                        )
                      • বৃত্ত- ফাঁপা বৃত্ত।
                      • বর্গক্ষেত্র- বর্গক্ষেত্র।
                      • দশমিক- আরবি সংখ্যা। (এর জন্য ডিফল্ট
                          )
                        1. নিম্ন-রোমান- ছোট হাতের রোমান সংখ্যা।
                        2. নিম্ন-আলফা- ছোট হাতের অক্ষর।
                        3. উচ্চ-রোমান- ক্যাপিটাল রোমান সংখ্যা।
                        4. ঊর্ধ্ব-আলফা - বড় অক্ষর.
                        5. কোনটি- চিহ্নিতকারী অনুপস্থিত.




                      তালিকায় চিহ্নিতকারীর ধরন



                      • পয়েন্ট 1।
                      • পয়েন্ট 2।
                      • list-style-type: upper-roman">
                      • পয়েন্ট 1।
                      • পয়েন্ট 2।
                      • পয়েন্ট 3।


                      কাস্টম মার্কার অঙ্কন.

                      তালিকা শৈলীর সাথে কাজ করার জন্য সবচেয়ে আকর্ষণীয় CSS টুল হল, আমার মতে, উপরে বর্ণিত স্ট্যান্ডার্ড "বোরিং" মার্কারগুলির পরিবর্তে, আপনার নিজস্ব অ-মানক চিত্রগুলি ব্যবহার করার ক্ষমতা - আপনার সাইটের সামগ্রিক নকশার সাথে মানানসই ছোট ছবিগুলি .

                      এই টাস্ক সম্পত্তি দ্বারা সঞ্চালিত হয় তালিকা-শৈলী-চিত্রযা একটি তালিকা চিহ্নিতকারী কিছু হিসাবে সংজ্ঞায়িত করে গ্রাফিক ইমেজএটির পথ নির্দেশ করে।

                      এই সম্পত্তির জন্য শুধুমাত্র দুটি মান আছে:

                      • কোনটি- চিহ্নিতকারীর গ্রাফিকাল উপস্থাপনা বাতিল করে।
                      • url- মার্কার ডিজাইন সহ ফাইলের পাথ।

                      পরে আঁকার পথ urlবন্ধনীতে নির্দেশিত।

                      এই ধরনের একটি এন্ট্রি নির্দেশ করবে যে নথির পাশে একটি গ্রাফিক্স ফোল্ডার রয়েছে যেখানে একটি অঙ্কন ফাইল রয়েছে: " " - বলা হয় marker.gif

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




                      অ-মানক মার্কার-অঙ্কন



                      • প্রথম পছন্দের আইটেম।
                      • দ্বিতীয় প্রিয় আইটেম।
                      • এবং কোন কম প্রিয় তৃতীয় পয়েন্ট.


                      একটি তালিকা চিহ্নিতকারী মোড়ানো শৈলী.

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

                      সম্ভাব্য সম্পত্তি মান তালিকা-শৈলী-অবস্থানমাত্র দুটি:

                      • বাইরে- মার্কারটি তালিকার পাশে অবস্থিত (ডিফল্ট)
                      • ভিতরে- মার্কার পাঠ্যে মোড়ানো হয়।

                      স্বচ্ছতার জন্য উদাহরণ:




                      একটি মার্কার চারপাশে পাঠ্য মোড়ানো




                      এখানে মার্কার পাঠ্যে মোড়ানো হয়:








                      কিন্তু এখানে নয়:



                      • একটি পয়েন্ট যা বলে যে এমন কিছু করা ভাল হবে যেখানে এখনও কিছু করা হয়নি।
                      • একটি পয়েন্ট যা এমন কিছু বলে যা করতে ভাল লাগবে, এমন কিছু যেখানে এখনও কিছু করা হয়নি৷



                      তালিকা-শৈলী

                      মৌলিক সম্পত্তি তালিকা-শৈলীযখন তালিকা শৈলী একই সময়ে একাধিক মান বরাদ্দ করা প্রয়োজন তখন ব্যবহার করা হয়। তালিকা শৈলীতে প্রযোজ্য বৈশিষ্ট্য থেকে এক থেকে তিনটি মান থাকতে পারে, একটি স্থান দ্বারা বিভক্ত যেকোনো ক্রমানুসারে।

                      তিনটি বৈশিষ্ট্য এবং তাদের সম্ভাব্য মানআমরা এটি উপরে দেখেছি, তাই আমি এটি পুনরাবৃত্তি করব না, তবে আমি কেবল ভিতরে পৃষ্ঠা নেভিগেশনটি রেখে দেব:

                      যদি আপনার মাথায় কোনো ফাঁক থাকে তবে আপনি ফিরে গিয়ে আবার পড়তে পারেন।




                      তালিকা শৈলী




                      • - এই তালিকাটি মার্কার হিসাবে একটি অঙ্কন ব্যবহার করে।
                      • - এই তালিকার পাঠ্যটি চিহ্নিতকারীর চারপাশে মোড়ানো।



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

                        যেহেতু তালিকাগুলি ডেটা গঠনের জন্য একটি দুর্দান্ত সরঞ্জাম এবং CSS বৈশিষ্ট্যগুলি আপনাকে "মেনু" - সাইট নেভিগেশন হিসাবে প্রায় কোনও নকশা তৈরি করতে, তালিকাগুলি ব্যবহার করতে দেয়, যেখানে প্রতিটি আইটেম একটি নির্দিষ্ট পৃষ্ঠার লিঙ্ক। আপনার সাইটের

                      কিভাবে কাজ করতে হয়

আপনি পছন্দ করতে পারেন