एचटीएमएलमध्ये बुलेटशिवाय अक्रमित यादी कशी तयार करावी

एचटीएमएलमध्ये बुलेटशिवाय अक्रमित यादी कशी तयार करावी
एचटीएमएलमध्ये बुलेटशिवाय अक्रमित यादी कशी तयार करावी
Mia Chevalier
मंगळवार, ९ जुलै, २०२४ रोजी ४:५१:२७ म.उ.

HTML मधील अक्रमित सूचीमधून बुलेट्स काढून टाकणे

HTML मध्ये याद्या तयार करणे हे एक सामान्य काम आहे आणि या उद्देशासाठी अक्रमित याद्या वारंवार वापरल्या जातात. तथापि, डीफॉल्ट बुलेट पॉइंट काहीवेळा लक्ष विचलित करणारे असू शकतात किंवा तुमच्या वेबपृष्ठाच्या इच्छित सौंदर्याला बसत नाहीत.

सुदैवाने, या बुलेट काढणे शक्य आहे आणि एक स्वच्छ, बुलेट-मुक्त यादी आहे. या लेखात, आम्ही साध्या HTML आणि CSS तंत्रांचा वापर करून हे साध्य करण्यासाठी विविध पद्धती शोधू.

आज्ञा वर्णन
<style> घटकांचे स्वरूप सानुकूलित करण्यासाठी HTML दस्तऐवजात CSS शैली परिभाषित करते.
list-style-type सूची आयटम मार्करचा प्रकार निर्दिष्ट करते, जसे की डिस्क, वर्तुळ, चौरस, काहीही नाही इ.
padding घटकाची सामग्री आणि त्याची सीमा यांच्यातील जागा नियंत्रित करते.
margin घटकाच्या सीमेबाहेरील जागा नियंत्रित करते, ते इतर घटकांपासून वेगळे करते.
<script> वेबपृष्ठावर डायनॅमिक वर्तन जोडण्यासाठी क्लायंट-साइड स्क्रिप्ट परिभाषित करते, सामान्यत: JavaScript मध्ये लिहिलेली असते.
document.getElementById() HTML घटकामध्ये प्रवेश करण्यासाठी JavaScript पद्धत त्याच्या ID विशेषतावर आधारित आहे.
style.listStyleType घटकासाठी सूची आयटम मार्करचा प्रकार सेट करण्यासाठी JavaScript गुणधर्म.

अक्रमित सूचींमध्ये बुलेट काढणे समजून घेणे

प्रदान केलेल्या स्क्रिप्ट HTML मधील अक्रमित सूचीमधून बुलेट काढण्यासाठी विविध पद्धती देतात. हे साध्य करण्यासाठी पहिली स्क्रिप्ट CSS वापरते. नावाचा वर्ग परिभाषित करून no-bullets मध्ये १ विभाग, द list-style-type मालमत्ता सेट केली आहे none, प्रभावीपणे गोळ्या काढून टाकणे. याव्यतिरिक्त, द padding आणि ५ सूची आयटमभोवती कोणतीही अतिरिक्त जागा नाही याची खात्री करण्यासाठी गुणधर्म शून्यावर सेट केले जातात. ही पद्धत सरळ आहे आणि CSS ला HTML पासून वेगळे ठेवते, कोड क्लीनर आणि व्यवस्थापित करणे सोपे करते.

दुसरी स्क्रिप्ट थेट मध्ये इनलाइन CSS वापरून भिन्न दृष्टीकोन घेते ul टॅग येथे, द list-style-type, padding, आणि ५ गुणधर्म थेट सूची घटकावर लागू केले जातात. ही पद्धत जलद निराकरणासाठी उपयुक्त आहे किंवा जेव्हा तुम्हाला स्वतंत्र CSS वर्ग तयार न करता फक्त एका विशिष्ट सूचीवर शैली लागू करायची असते. तिसरी स्क्रिप्ट DOM मध्ये फेरफार करण्यासाठी JavaScript चा वापर करते आणि डायनॅमिकली शैली लागू करते. सह यादी निवडून document.getElementById, स्क्रिप्ट बदलते listStyleType, padding, आणि ५ लक्ष्यित सूचीचे गुणधर्म. जेव्हा तुम्हाला वापरकर्त्याच्या परस्परसंवादावर किंवा इतर गतिशील परिस्थितींवर आधारित शैली लागू करण्याची आवश्यकता असते तेव्हा हा दृष्टिकोन फायदेशीर ठरतो.

CSS वापरून अक्रमित सूचीमधून बुलेट्स कसे काढायचे

CSS पद्धत

<!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 वापरून अक्रमित सूचीमधून बुलेट्स काढणे

इनलाइन CSS पद्धत

१

जावास्क्रिप्ट वापरणे अक्रमित सूचीमधून बुलेट्स काढणे

JavaScript पद्धत

<!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 स्यूडो-एलिमेंट, आपण आपल्या वेबपृष्ठाच्या एकूण थीमशी संरेखित होणारी अद्वितीय सूची डिझाइन प्राप्त करू शकता. याव्यतिरिक्त, या तंत्रांचे संयोजन १८ विविध सूचींमध्ये डायनॅमिक आणि पुन्हा वापरता येण्याजोग्या शैलींना अनुमती देते.

स्टाइलिंग अक्रमित सूचीबद्दल सामान्य प्रश्न आणि उत्तरे

  1. अक्रमित सूचीमध्ये मी बुलेटचा रंग कसा बदलू शकतो?
  2. वापरा color वर मालमत्ता list-style-type किंवा २१ बुलेटचा रंग बदलण्यासाठी स्यूडो-एलिमेंट.
  3. मी सूची आयटमसाठी सानुकूल फॉन्ट वापरू शकतो?
  4. होय, तुम्ही अर्ज करू शकता font-family सानुकूल फॉन्ट वापरण्यासाठी आयटम सूचीबद्ध करण्यासाठी मालमत्ता.
  5. सूचीतील आयटममधील अंतर कसे वाढवायचे?
  6. वापरा ५ किंवा padding सूची आयटममधील अंतर वाढवण्यासाठी गुणधर्म.
  7. क्षैतिज यादी बनवणे शक्य आहे का?
  8. होय, अर्ज करा २५ किंवा २६ करण्यासाठी २७ घटक.
  9. मी सूची आयटममध्ये ॲनिमेशन जोडू शकतो?
  10. होय, सूची आयटमवर प्रभाव जोडण्यासाठी तुम्ही CSS ॲनिमेशन आणि संक्रमण वापरू शकता.
  11. मी बुलेटशिवाय नेस्टेड याद्या कशा तयार करू?
  12. समान लागू करा २८ घरटे करण्यासाठी ul बुलेट काढण्यासाठी घटक.
  13. मी सूचीतील आयटम मध्यभागी संरेखित करू शकतो का?
  14. होय, वापरा text-align: center पालक वर ul सूची आयटम मध्य-संरेखित करण्यासाठी घटक.
  15. सूची आयटममध्ये मी पार्श्वभूमी रंग कसे जोडू?
  16. वापरा background-color मालमत्ता चालू २७ पार्श्वभूमी रंग जोडण्यासाठी घटक.
  17. सूचीच्या मजकुरापेक्षा वेगळ्या पद्धतीने सूची मार्कर शैली करणे शक्य आहे का?
  18. होय, वापरा २१ स्यूडो-एलिमेंट टू स्टाइल सूची मार्कर स्वतंत्रपणे सूची मजकूर.

बुलेट-मुक्त सूचीसाठी प्रभावी पद्धती

HTML मध्ये याद्या तयार करणे हे एक सामान्य काम आहे आणि या उद्देशासाठी अक्रमित याद्या वारंवार वापरल्या जातात. तथापि, डीफॉल्ट बुलेट पॉइंट काहीवेळा लक्ष विचलित करणारे असू शकतात किंवा तुमच्या वेबपृष्ठाच्या इच्छित सौंदर्याला बसत नाहीत.

सुदैवाने, या बुलेट काढणे शक्य आहे आणि एक स्वच्छ, बुलेट-मुक्त यादी आहे. या लेखात, आम्ही साध्या HTML आणि CSS तंत्रांचा वापर करून हे साध्य करण्यासाठी विविध पद्धती शोधू.

आज्ञा वर्णन
<style> घटकांचे स्वरूप सानुकूलित करण्यासाठी HTML दस्तऐवजात CSS शैली परिभाषित करते.
list-style-type सूची आयटम मार्करचा प्रकार निर्दिष्ट करते, जसे की डिस्क, वर्तुळ, चौरस, काहीही नाही इ.
padding घटकाची सामग्री आणि त्याची सीमा यांच्यातील जागा नियंत्रित करते.
margin घटकाच्या सीमेबाहेरील जागा नियंत्रित करते, ते इतर घटकांपासून वेगळे करते.
<script> वेबपृष्ठावर डायनॅमिक वर्तन जोडण्यासाठी क्लायंट-साइड स्क्रिप्ट परिभाषित करते, सामान्यत: JavaScript मध्ये लिहिलेली असते.
document.getElementById() HTML घटकामध्ये प्रवेश करण्यासाठी JavaScript पद्धत त्याच्या ID विशेषतावर आधारित आहे.
style.listStyleType घटकासाठी सूची आयटम मार्करचा प्रकार सेट करण्यासाठी JavaScript गुणधर्म.

अक्रमित सूचींमध्ये बुलेट काढणे समजून घेणे

प्रदान केलेल्या स्क्रिप्ट HTML मधील अक्रमित सूचीमधून बुलेट काढण्यासाठी विविध पद्धती देतात. हे साध्य करण्यासाठी पहिली स्क्रिप्ट CSS वापरते. नावाचा वर्ग परिभाषित करून no-bullets मध्ये १ विभाग, द list-style-type मालमत्ता सेट केली आहे none, प्रभावीपणे गोळ्या काढून टाकणे. याव्यतिरिक्त, द padding आणि ५ सूची आयटमभोवती कोणतीही अतिरिक्त जागा नाही याची खात्री करण्यासाठी गुणधर्म शून्यावर सेट केले जातात. ही पद्धत सरळ आहे आणि CSS ला HTML पासून वेगळे ठेवते, कोड क्लिनर आणि व्यवस्थापित करणे सोपे करते.

दुसरी स्क्रिप्ट थेट मध्ये इनलाइन CSS वापरून भिन्न दृष्टीकोन घेते ul टॅग येथे, द list-style-type, padding, आणि ५ गुणधर्म थेट सूची घटकावर लागू केले जातात. ही पद्धत द्रुत निराकरणासाठी उपयुक्त आहे किंवा जेव्हा तुम्हाला स्वतंत्र CSS वर्ग तयार न करता केवळ एका विशिष्ट सूचीवर शैली लागू करायची असते. तिसरी स्क्रिप्ट DOM मध्ये फेरफार करण्यासाठी JavaScript चा वापर करते आणि डायनॅमिकली शैली लागू करते. सह यादी निवडून document.getElementById, स्क्रिप्ट बदलते listStyleType, padding, आणि ५ लक्ष्यित सूचीचे गुणधर्म. जेव्हा तुम्हाला वापरकर्ता परस्परसंवाद किंवा इतर गतिमान परिस्थितींवर आधारित शैली लागू करण्याची आवश्यकता असते तेव्हा हा दृष्टिकोन फायदेशीर ठरतो.

अक्रमित याद्या स्टाइलिंगसाठी प्रगत तंत्रे

अक्रमित सूचीमधून बुलेट्स काढून टाकणे हे एक सामान्य काम असले तरी, अधिक सानुकूलित लूकसाठी पुढील शैली सूचीसाठी अतिरिक्त तंत्रे आहेत. मानक बुलेटच्या जागी सानुकूल प्रतिमा किंवा चिन्हे वापरणे हा एक दृष्टीकोन आहे. सेट करून list-style-image CSS मधील गुणधर्म, तुम्ही कोणत्याही प्रतिमेसह बुलेट बदलू शकता. ही मालमत्ता सारखीच कार्य करते list-style-type, परंतु पूर्वनिर्धारित बुलेट शैलींऐवजी, ते इमेज फाइलसाठी URL वापरते.

आणखी एक प्रगत तंत्रात स्यूडो-एलिमेंट्स वापरणे समाविष्ट आहे ::before प्रत्येक सूची आयटमच्या आधी सानुकूल सामग्री जोडण्यासाठी. ही पद्धत अधिक लवचिकतेसाठी परवानगी देते, जसे की सानुकूल चिन्हे किंवा अगदी ॲनिमेटेड प्रभाव जोडणे. स्टाइल करून ::before स्यूडो-एलिमेंट, आपण आपल्या वेबपृष्ठाच्या एकूण थीमशी संरेखित होणारी अद्वितीय सूची डिझाइन प्राप्त करू शकता. याव्यतिरिक्त, या तंत्रांचे संयोजन १८ विविध सूचींमध्ये डायनॅमिक आणि पुन्हा वापरता येण्याजोग्या शैलींना अनुमती देते.

बुलेट-फ्री याद्यांवरील अंतिम विचार

अक्रमित सूचीमधून बुलेट्स काढून टाकल्याने तुमच्या वेब डिझाईन्सची व्हिज्युअल अपील आणि लवचिकता वाढते. तुम्ही CSS, इनलाइन शैली किंवा JavaScript वापरत असलात तरीही, या पद्धती वेगवेगळ्या गरजा पूर्ण करण्यासाठी विविध उपाय देतात. या तंत्रांवर प्रभुत्व मिळवून, तुम्ही स्वच्छ, व्यावसायिक दिसणाऱ्या याद्या तयार करू शकता ज्या तुमच्या वेबसाइटवर वापरकर्ता अनुभव वाढवतात.