এইচটিএমএল-এ ক্রমবিহীন তালিকা থেকে বুলেটগুলি সরানো হচ্ছে
তালিকা তৈরি করা এইচটিএমএল-এ একটি সাধারণ কাজ, এবং এই উদ্দেশ্যে প্রায়শই ক্রমহীন তালিকা ব্যবহার করা হয়। যাইহোক, ডিফল্ট বুলেট পয়েন্টগুলি কখনও কখনও বিভ্রান্তিকর হতে পারে বা আপনার ওয়েবপৃষ্ঠার পছন্দসই নান্দনিকতার সাথে খাপ খায় না৷
সৌভাগ্যবশত, এই বুলেটগুলি অপসারণ করা সম্ভব এবং একটি পরিষ্কার, বুলেট-মুক্ত তালিকা রয়েছে৷ এই নিবন্ধে, আমরা সাধারণ HTML এবং CSS কৌশলগুলি ব্যবহার করে এটি অর্জন করার জন্য বিভিন্ন পদ্ধতি অন্বেষণ করব।
| আদেশ | বর্ণনা |
|---|---|
| <style> | উপাদানের উপস্থিতি কাস্টমাইজ করতে HTML নথির মধ্যে CSS শৈলী সংজ্ঞায়িত করে। |
| list-style-type | তালিকা আইটেম চিহ্নিতকারীর ধরন নির্দিষ্ট করে, যেমন ডিস্ক, বৃত্ত, বর্গক্ষেত্র, কিছুই নয় ইত্যাদি। |
| padding | একটি উপাদানের বিষয়বস্তু এবং এর সীমানার মধ্যে স্থান নিয়ন্ত্রণ করে। |
| margin | উপাদানের সীমানার বাইরে স্থান নিয়ন্ত্রণ করে, এটিকে অন্যান্য উপাদান থেকে আলাদা করে। |
| <script> | একটি ক্লায়েন্ট-সাইড স্ক্রিপ্ট সংজ্ঞায়িত করে, যা সাধারণত জাভাস্ক্রিপ্টে লেখা হয়, ওয়েবপেজে গতিশীল আচরণ যোগ করার জন্য। |
| document.getElementById() | জাভাস্ক্রিপ্ট পদ্ধতির আইডি বৈশিষ্ট্যের উপর ভিত্তি করে একটি HTML উপাদান অ্যাক্সেস করতে। |
| style.listStyleType | একটি উপাদানের জন্য তালিকা আইটেম চিহ্নিতকারীর ধরন সেট করতে JavaScript সম্পত্তি। |
অপরিবর্তিত তালিকায় বুলেট অপসারণ বোঝা
প্রদত্ত স্ক্রিপ্টগুলি এইচটিএমএল-এ ক্রমহীন তালিকা থেকে বুলেটগুলি সরানোর জন্য বিভিন্ন পদ্ধতি অফার করে। প্রথম স্ক্রিপ্ট এটি অর্জন করতে CSS ব্যবহার করে। নামক একটি ক্লাস সংজ্ঞায়িত করে no-bullets মধ্যে style বিভাগ, দ list-style-type সম্পত্তি সেট করা হয় none, কার্যকরভাবে গুলি অপসারণ. উপরন্তু, দ padding এবং margin তালিকা আইটেমগুলির চারপাশে কোনও অতিরিক্ত স্থান নেই তা নিশ্চিত করার জন্য বৈশিষ্ট্যগুলি শূন্যে সেট করা হয়েছে। এই পদ্ধতিটি সহজবোধ্য এবং CSS কে HTML থেকে আলাদা রাখে, যার ফলে কোড ক্লিনার এবং পরিচালনা করা সহজ হয়।
দ্বিতীয় স্ক্রিপ্টটি সরাসরি ইনলাইন সিএসএস ব্যবহার করে একটি ভিন্ন পদ্ধতি গ্রহণ করে ul ট্যাগ এখানে list-style-type, padding, এবং margin বৈশিষ্ট্য সরাসরি তালিকা উপাদান প্রয়োগ করা হয়. এই পদ্ধতিটি দ্রুত সমাধানের জন্য বা যখন আপনাকে একটি পৃথক CSS ক্লাস তৈরি না করে শুধুমাত্র একটি নির্দিষ্ট তালিকায় শৈলী প্রয়োগ করতে হবে তখন এটি কার্যকর। তৃতীয় স্ক্রিপ্টটি DOM ম্যানিপুলেট করতে এবং গতিশীলভাবে শৈলী প্রয়োগ করতে JavaScript ব্যবহার করে। সঙ্গে তালিকা নির্বাচন করে document.getElementById, স্ক্রিপ্ট পরিবর্তন listStyleType, padding, এবং margin লক্ষ্য তালিকার বৈশিষ্ট্য। এই পদ্ধতিটি উপকারী যখন আপনাকে ব্যবহারকারীর মিথস্ক্রিয়া বা অন্যান্য গতিশীল অবস্থার উপর ভিত্তি করে শৈলী প্রয়োগ করতে হবে।
সিএসএস ব্যবহার করে অ-ক্রমবিহীন তালিকা থেকে বুলেটগুলি কীভাবে সরানো যায়
সিএসএস পদ্ধতি
<!DOCTYPE html><html><head><style>ul.no-bullets {list-style-type: none;padding: 0;margin: 0;}</style></head><body><ul class="no-bullets"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></body></html>
ইনলাইন CSS ব্যবহার করে ক্রমবিহীন তালিকা থেকে বুলেটগুলি সরানো হচ্ছে
ইনলাইন সিএসএস পদ্ধতি
<!DOCTYPE html><html><body><ul style="list-style-type: none; padding: 0; margin: 0;"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></body></html>
জাভাস্ক্রিপ্ট ব্যবহার না করা তালিকা থেকে বুলেট অপসারণ
জাভাস্ক্রিপ্ট পদ্ধতি
<!DOCTYPE html><html><head><style>ul.no-bullets {padding: 0;margin: 0;}</style></head><body><ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><script>document.getElementById('myList').style.listStyleType = 'none';document.getElementById('myList').style.padding = '0';document.getElementById('myList').style.margin = '0';</script></body></html>
বিন্যাসহীন তালিকা স্টাইল করার জন্য উন্নত কৌশল
যদিও ক্রমবিহীন তালিকা থেকে বুলেটগুলি সরানো একটি সাধারণ কাজ, আরও কাস্টমাইজড চেহারার জন্য আরও শৈলী তালিকার জন্য অতিরিক্ত কৌশল রয়েছে। একটি পদ্ধতি হল স্ট্যান্ডার্ড বুলেটের জায়গায় কাস্টম ছবি বা আইকন ব্যবহার করা। সেট করে list-style-image CSS-এ প্রপার্টি, আপনি যেকোনো ইমেজ দিয়ে বুলেট প্রতিস্থাপন করতে পারেন। এই সম্পত্তি অনুরূপ কাজ করে list-style-type, কিন্তু পূর্বনির্ধারিত বুলেট শৈলীর পরিবর্তে, এটি একটি চিত্র ফাইলের URL ব্যবহার করে।
আরেকটি উন্নত কৌশল যেমন ছদ্ম-উপাদান ব্যবহার করে ::before প্রতিটি তালিকা আইটেম আগে কাস্টম বিষয়বস্তু যোগ করতে. এই পদ্ধতিটি বৃহত্তর নমনীয়তার জন্য অনুমতি দেয়, যেমন কাস্টম প্রতীক বা এমনকি অ্যানিমেটেড প্রভাব যোগ করা। স্টাইলিং দ্বারা ::before ছদ্ম-উপাদান, আপনি অনন্য তালিকা ডিজাইনগুলি অর্জন করতে পারেন যা আপনার ওয়েবপৃষ্ঠার সামগ্রিক থিমের সাথে সারিবদ্ধ। উপরন্তু, সঙ্গে এই কৌশল সমন্বয় CSS variables বিভিন্ন তালিকা জুড়ে গতিশীল এবং পুনরায় ব্যবহারযোগ্য শৈলীর জন্য অনুমতি দেয়।
স্টাইলিং অনিয়মিত তালিকা সম্পর্কে সাধারণ প্রশ্ন এবং উত্তর
- আমি কিভাবে একটি unordered তালিকায় বুলেট রঙ পরিবর্তন করতে পারি?
- ব্যবহার color উপর সম্পত্তি list-style-type বা ::marker বুলেটের রঙ পরিবর্তন করতে ছদ্ম-উপাদান।
- আমি কি তালিকা আইটেমগুলির জন্য কাস্টম ফন্ট ব্যবহার করতে পারি?
- হ্যাঁ, আপনি আবেদন করতে পারেন font-family কাস্টম ফন্ট ব্যবহার করার জন্য আইটেম তালিকাভুক্ত করার সম্পত্তি।
- আমি কিভাবে তালিকা আইটেমগুলির মধ্যে ব্যবধান বাড়াতে পারি?
- ব্যবহার margin বা padding বৈশিষ্ট্য তালিকা আইটেম মধ্যে ব্যবধান বৃদ্ধি.
- এটি একটি অনুভূমিক তালিকা করা সম্ভব?
- হ্যাঁ, আবেদন করুন display: inline বা display: inline-block থেকে li উপাদান
- আমি তালিকা আইটেম অ্যানিমেশন যোগ করতে পারি?
- হ্যাঁ, তালিকা আইটেমগুলিতে প্রভাব যুক্ত করতে আপনি CSS অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করতে পারেন।
- আমি কিভাবে বুলেট ছাড়া নেস্টেড তালিকা তৈরি করব?
- একই প্রয়োগ করুন list-style-type: none নেস্ট করা ul বুলেট অপসারণের উপাদান।
- আমি কি কেন্দ্রে তালিকা আইটেম সারিবদ্ধ করতে পারি?
- হ্যাঁ, ব্যবহার করুন text-align: center পিতামাতার উপর ul তালিকা আইটেমগুলিকে কেন্দ্রে সারিবদ্ধ করতে উপাদান।
- আমি কিভাবে তালিকা আইটেম পটভূমি রং যোগ করতে পারি?
- ব্যবহার background-color সম্পত্তি li পটভূমির রং যোগ করার জন্য উপাদান।
- তালিকার পাঠ্য থেকে আলাদাভাবে তালিকা মার্কারগুলিকে স্টাইল করা কি সম্ভব?
- হ্যাঁ, ব্যবহার করুন ::marker ছদ্ম-এলিমেন্ট থেকে শৈলী তালিকা মার্কার স্বাধীনভাবে তালিকা পাঠ্য থেকে।
বুলেট-মুক্ত তালিকার জন্য কার্যকর পদ্ধতি
তালিকা তৈরি করা এইচটিএমএল-এ একটি সাধারণ কাজ, এবং এই উদ্দেশ্যে প্রায়শই ক্রমহীন তালিকা ব্যবহার করা হয়। যাইহোক, ডিফল্ট বুলেট পয়েন্টগুলি কখনও কখনও বিভ্রান্তিকর হতে পারে বা আপনার ওয়েবপৃষ্ঠার পছন্দসই নান্দনিকতার সাথে খাপ খায় না৷
সৌভাগ্যক্রমে, এই বুলেটগুলি অপসারণ করা সম্ভব এবং একটি পরিষ্কার, বুলেট-মুক্ত তালিকা রয়েছে৷ এই নিবন্ধে, আমরা সহজ HTML এবং CSS কৌশলগুলি ব্যবহার করে এটি অর্জন করার জন্য বিভিন্ন পদ্ধতিগুলি অন্বেষণ করব।
| আদেশ | বর্ণনা |
|---|---|
| <style> | উপাদানের উপস্থিতি কাস্টমাইজ করতে HTML নথির মধ্যে CSS শৈলী সংজ্ঞায়িত করে। |
| list-style-type | তালিকা আইটেম চিহ্নিতকারীর ধরন নির্দিষ্ট করে, যেমন ডিস্ক, বৃত্ত, বর্গক্ষেত্র, কিছুই নয় ইত্যাদি। |
| padding | একটি উপাদানের বিষয়বস্তু এবং এর সীমানার মধ্যে স্থান নিয়ন্ত্রণ করে। |
| margin | উপাদানের সীমানার বাইরে স্থান নিয়ন্ত্রণ করে, এটিকে অন্যান্য উপাদান থেকে আলাদা করে। |
| <script> | একটি ক্লায়েন্ট-সাইড স্ক্রিপ্ট সংজ্ঞায়িত করে, যা সাধারণত জাভাস্ক্রিপ্টে লেখা হয়, ওয়েবপেজে গতিশীল আচরণ যোগ করার জন্য। |
| document.getElementById() | জাভাস্ক্রিপ্ট পদ্ধতির আইডি বৈশিষ্ট্যের উপর ভিত্তি করে একটি HTML উপাদান অ্যাক্সেস করতে। |
| style.listStyleType | একটি উপাদানের জন্য তালিকা আইটেম চিহ্নিতকারীর ধরন সেট করতে JavaScript সম্পত্তি। |
অপরিবর্তিত তালিকায় বুলেট অপসারণ বোঝা
প্রদত্ত স্ক্রিপ্টগুলি এইচটিএমএল-এ ক্রমহীন তালিকা থেকে বুলেটগুলি সরানোর জন্য বিভিন্ন পদ্ধতি অফার করে। প্রথম স্ক্রিপ্ট এটি অর্জন করতে CSS ব্যবহার করে। নামক একটি ক্লাস সংজ্ঞায়িত করে no-bullets মধ্যে style বিভাগ, দ list-style-type সম্পত্তি সেট করা হয় none, কার্যকরভাবে গুলি অপসারণ. উপরন্তু, দ padding এবং margin তালিকার আইটেমগুলির চারপাশে কোনও অতিরিক্ত স্থান নেই তা নিশ্চিত করতে বৈশিষ্ট্যগুলি শূন্যে সেট করা হয়েছে। এই পদ্ধতিটি সহজবোধ্য এবং CSS কে HTML থেকে আলাদা রাখে, কোডটিকে ক্লিনার এবং পরিচালনা করা সহজ করে তোলে।
দ্বিতীয় স্ক্রিপ্টটি সরাসরি ইনলাইন সিএসএস ব্যবহার করে একটি ভিন্ন পদ্ধতি গ্রহণ করে ul ট্যাগ এখানে list-style-type, padding, এবং margin বৈশিষ্ট্য সরাসরি তালিকা উপাদান প্রয়োগ করা হয়. এই পদ্ধতিটি দ্রুত সমাধানের জন্য বা যখন আপনাকে একটি পৃথক CSS ক্লাস তৈরি না করে শুধুমাত্র একটি নির্দিষ্ট তালিকায় শৈলী প্রয়োগ করতে হবে তখন এটি কার্যকর। তৃতীয় স্ক্রিপ্ট জাভাস্ক্রিপ্ট ব্যবহার করে DOM ম্যানিপুলেট করতে এবং গতিশীলভাবে শৈলী প্রয়োগ করে। সঙ্গে তালিকা নির্বাচন করে document.getElementById, স্ক্রিপ্ট পরিবর্তন listStyleType, padding, এবং margin লক্ষ্য তালিকার বৈশিষ্ট্য। এই পদ্ধতিটি উপকারী যখন আপনাকে ব্যবহারকারীর মিথস্ক্রিয়া বা অন্যান্য গতিশীল অবস্থার উপর ভিত্তি করে শৈলী প্রয়োগ করতে হবে।
বিন্যাসহীন তালিকা স্টাইল করার জন্য উন্নত কৌশল
অপরিবর্তিত তালিকা থেকে বুলেটগুলি সরানো একটি সাধারণ কাজ হলেও, আরও কাস্টমাইজড চেহারার জন্য আরও শৈলী তালিকার জন্য অতিরিক্ত কৌশল রয়েছে। একটি পদ্ধতি হল স্ট্যান্ডার্ড বুলেটের জায়গায় কাস্টম ছবি বা আইকন ব্যবহার করা। সেট করে list-style-image CSS এ প্রপার্টি, আপনি যেকোনো ইমেজ দিয়ে বুলেট প্রতিস্থাপন করতে পারেন। এই সম্পত্তি অনুরূপ কাজ করে list-style-type, কিন্তু পূর্বনির্ধারিত বুলেট শৈলীর পরিবর্তে, এটি একটি চিত্র ফাইলের URL ব্যবহার করে।
আরেকটি উন্নত কৌশল যেমন ছদ্ম-উপাদান ব্যবহার করে ::before প্রতিটি তালিকা আইটেম আগে কাস্টম বিষয়বস্তু যোগ করতে. এই পদ্ধতিটি বৃহত্তর নমনীয়তার জন্য অনুমতি দেয়, যেমন কাস্টম প্রতীক বা এমনকি অ্যানিমেটেড প্রভাব যোগ করা। স্টাইলিং দ্বারা ::before ছদ্ম-উপাদান, আপনি অনন্য তালিকা ডিজাইনগুলি অর্জন করতে পারেন যা আপনার ওয়েবপৃষ্ঠার সামগ্রিক থিমের সাথে সারিবদ্ধ। উপরন্তু, সঙ্গে এই কৌশল সমন্বয় CSS variables বিভিন্ন তালিকা জুড়ে গতিশীল এবং পুনরায় ব্যবহারযোগ্য শৈলীর জন্য অনুমতি দেয়।
বুলেট-মুক্ত তালিকার চূড়ান্ত চিন্তা
ক্রমহীন তালিকা থেকে বুলেটগুলি সরানো আপনার ওয়েব ডিজাইনের চাক্ষুষ আবেদন এবং নমনীয়তা বাড়ায়। আপনি CSS, ইনলাইন শৈলী বা জাভাস্ক্রিপ্ট ব্যবহার করুন না কেন, এই পদ্ধতিগুলি বিভিন্ন প্রয়োজন অনুসারে বিভিন্ন সমাধান প্রদান করে। এই কৌশলগুলি আয়ত্ত করে, আপনি পরিষ্কার, পেশাদার চেহারার তালিকা তৈরি করতে পারেন যা আপনার ওয়েবসাইটে ব্যবহারকারীর অভিজ্ঞতা বাড়ায়।