HTML இல் தோட்டாக்கள் இல்லாமல் வரிசைப்படுத்தப்படாத பட்டியலை எவ்வாறு உருவாக்குவது

HTML இல் தோட்டாக்கள் இல்லாமல் வரிசைப்படுத்தப்படாத பட்டியலை எவ்வாறு உருவாக்குவது
HTML இல் தோட்டாக்கள் இல்லாமல் வரிசைப்படுத்தப்படாத பட்டியலை எவ்வாறு உருவாக்குவது
Mia Chevalier
செவ்வாய், 9 ஜூலை, 2024 ’அன்று’ பிற்பகல் 5:34:03

HTML இல் வரிசைப்படுத்தப்படாத பட்டியல்களிலிருந்து பொட்டுகளை அகற்றுதல்

HTML இல் பட்டியல்களை உருவாக்குவது ஒரு பொதுவான பணியாகும், மேலும் இந்த நோக்கத்திற்காக வரிசைப்படுத்தப்படாத பட்டியல்கள் அடிக்கடி பயன்படுத்தப்படுகின்றன. இருப்பினும், இயல்புநிலை புல்லட் புள்ளிகள் சில நேரங்களில் கவனத்தை சிதறடிக்கும் அல்லது உங்கள் வலைப்பக்கத்தின் விரும்பிய அழகியலுக்கு பொருந்தாது.

அதிர்ஷ்டவசமாக, இந்த தோட்டாக்களை அகற்றி, சுத்தமான, புல்லட் இல்லாத பட்டியலை வைத்திருக்க முடியும். இந்தக் கட்டுரையில், எளிய HTML மற்றும் CSS நுட்பங்களைப் பயன்படுத்தி இதை அடைய பல்வேறு முறைகளை ஆராய்வோம்.

கட்டளை விளக்கம்
<style> உறுப்புகளின் தோற்றத்தைத் தனிப்பயனாக்க HTML ஆவணத்தில் உள்ள CSS பாணிகளை வரையறுக்கிறது.
list-style-type வட்டு, வட்டம், சதுரம், எதுவுமில்லை, போன்ற பட்டியல் உருப்படி மார்க்கரின் வகையைக் குறிப்பிடுகிறது.
padding ஒரு தனிமத்தின் உள்ளடக்கத்திற்கும் அதன் எல்லைக்கும் இடையிலான இடைவெளியைக் கட்டுப்படுத்துகிறது.
margin உறுப்பு எல்லைக்கு வெளியே உள்ள இடத்தைக் கட்டுப்படுத்துகிறது, மற்ற உறுப்புகளிலிருந்து பிரிக்கிறது.
<script> வலைப்பக்கத்தில் மாறும் நடத்தையைச் சேர்ப்பதற்காக, பொதுவாக ஜாவாஸ்கிரிப்ட்டில் எழுதப்பட்ட கிளையன்ட் பக்க ஸ்கிரிப்டை வரையறுக்கிறது.
document.getElementById() HTML உறுப்பை அதன் ஐடி பண்புக்கூறின் அடிப்படையில் அணுகுவதற்கான ஜாவாஸ்கிரிப்ட் முறை.
style.listStyleType ஒரு உறுப்புக்கான பட்டியல் உருப்படி மார்க்கரின் வகையை அமைக்க JavaScript சொத்து.

வரிசைப்படுத்தப்படாத பட்டியல்களில் புல்லட் அகற்றுதலைப் புரிந்துகொள்வது

வழங்கப்பட்ட ஸ்கிரிப்டுகள் HTML இல் வரிசைப்படுத்தப்படாத பட்டியல்களில் இருந்து தோட்டாக்களை அகற்ற பல்வேறு முறைகளை வழங்குகின்றன. இதை அடைய முதல் ஸ்கிரிப்ட் CSS ஐப் பயன்படுத்துகிறது. எனப்படும் வகுப்பை வரையறுப்பதன் மூலம் no-bullets இல் style பிரிவு, தி list-style-type சொத்து அமைக்கப்பட்டுள்ளது none, தோட்டாக்களை திறம்பட நீக்குகிறது. கூடுதலாக, தி padding மற்றும் margin பட்டியல் உருப்படிகளைச் சுற்றி கூடுதல் இடம் இல்லை என்பதை உறுதிப்படுத்த பண்புகள் பூஜ்ஜியமாக அமைக்கப்பட்டுள்ளன. இந்த முறை நேரடியானது மற்றும் CSS ஐ HTML இலிருந்து தனித்தனியாக வைத்திருக்கிறது, குறியீட்டை சுத்தமாகவும் எளிதாகவும் நிர்வகிக்கிறது.

இரண்டாவது ஸ்கிரிப்ட் நேரடியாக இன்லைன் CSS ஐப் பயன்படுத்துவதன் மூலம் வேறுபட்ட அணுகுமுறையை எடுக்கிறது ul குறிச்சொல். இங்கே, தி list-style-type, padding, மற்றும் margin பண்புகள் நேரடியாக பட்டியல் உறுப்புக்கு பயன்படுத்தப்படும். இந்த முறை விரைவான திருத்தங்களுக்கு பயனுள்ளதாக இருக்கும் அல்லது தனியான CSS வகுப்பை உருவாக்காமல் ஒரு குறிப்பிட்ட பட்டியலுக்கு மட்டுமே நீங்கள் பாணியைப் பயன்படுத்த வேண்டும். மூன்றாவது ஸ்கிரிப்ட் ஜாவாஸ்கிரிப்டை DOM ஐ கையாளவும் மற்றும் பாணிகளை மாறும் வகையில் பயன்படுத்தவும் பயன்படுத்துகிறது. உடன் பட்டியலைத் தேர்ந்தெடுப்பதன் மூலம் document.getElementById, ஸ்கிரிப்ட் மாறுகிறது listStyleType, padding, மற்றும் margin இலக்கு பட்டியலின் பண்புகள். பயனர் தொடர்பு அல்லது பிற மாறும் நிலைமைகளின் அடிப்படையில் நீங்கள் பாணிகளைப் பயன்படுத்த வேண்டியிருக்கும் போது இந்த அணுகுமுறை பயனுள்ளதாக இருக்கும்.

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 முறை

<!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>

வரிசைப்படுத்தப்படாத பட்டியல்களில் இருந்து பொட்டுகளை அகற்ற 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 போலி உறுப்பு, உங்கள் வலைப்பக்கத்தின் ஒட்டுமொத்த கருப்பொருளுடன் இணைந்த தனித்துவமான பட்டியல் வடிவமைப்புகளை நீங்கள் அடையலாம். கூடுதலாக, இந்த நுட்பங்களை இணைத்தல் CSS variables வெவ்வேறு பட்டியல்களில் மாறும் மற்றும் மீண்டும் பயன்படுத்தக்கூடிய பாணிகளை அனுமதிக்கிறது.

வரிசைப்படுத்தப்படாத பட்டியல்களின் ஸ்டைலிங் பற்றிய பொதுவான கேள்விகள் மற்றும் பதில்கள்

  1. வரிசைப்படுத்தப்படாத பட்டியலில் புல்லட்டின் நிறத்தை எப்படி மாற்றுவது?
  2. பயன்படுத்த color மீது சொத்து list-style-type அல்லது ::marker புல்லட்டின் நிறத்தை மாற்ற போலி உறுப்பு.
  3. பட்டியல் உருப்படிகளுக்கு தனிப்பயன் எழுத்துருக்களை நான் பயன்படுத்தலாமா?
  4. ஆம், நீங்கள் விண்ணப்பிக்கலாம் font-family தனிப்பயன் எழுத்துருக்களைப் பயன்படுத்த உருப்படிகளை பட்டியலிடுவதற்கான சொத்து.
  5. பட்டியல் உருப்படிகளுக்கு இடையே உள்ள இடைவெளியை எவ்வாறு அதிகரிப்பது?
  6. பயன்படுத்த margin அல்லது padding பட்டியல் உருப்படிகளுக்கு இடையிலான இடைவெளியை அதிகரிக்க பண்புகள்.
  7. கிடைமட்ட பட்டியலை உருவாக்க முடியுமா?
  8. ஆம், விண்ணப்பிக்கவும் display: inline அல்லது display: inline-block வேண்டும் li உறுப்புகள்.
  9. பட்டியல் உருப்படிகளில் அனிமேஷன்களைச் சேர்க்கலாமா?
  10. ஆம், பட்டியல் உருப்படிகளில் விளைவுகளைச் சேர்க்க CSS அனிமேஷன்கள் மற்றும் மாற்றங்களைப் பயன்படுத்தலாம்.
  11. தோட்டாக்கள் இல்லாமல் உள்ளமை பட்டியல்களை உருவாக்குவது எப்படி?
  12. அதையே விண்ணப்பிக்கவும் list-style-type: none கூடு கட்ட ul தோட்டாக்களை அகற்றுவதற்கான கூறுகள்.
  13. பட்டியல் உருப்படிகளை மையத்தில் சீரமைக்க முடியுமா?
  14. ஆம், பயன்படுத்தவும் text-align: center பெற்றோர் மீது ul பட்டியல் உருப்படிகளை மைய-சீரமைப்பதற்கான உறுப்பு.
  15. பட்டியலிடப்பட்ட உருப்படிகளில் பின்னணி வண்ணங்களை எவ்வாறு சேர்ப்பது?
  16. பயன்படுத்த background-color மீது சொத்து li பின்னணி வண்ணங்களைச் சேர்க்கும் கூறுகள்.
  17. பட்டியல் உரையிலிருந்து வித்தியாசமாக பட்டியல் குறிப்பான்களை வடிவமைக்க முடியுமா?
  18. ஆம், பயன்படுத்தவும் ::marker பட்டியலிடப்பட்ட உரையிலிருந்து சுயாதீனமாக பாணி பட்டியல் குறிப்பான்களுக்கு போலி உறுப்பு.

புல்லட் இல்லாத பட்டியல்களுக்கான பயனுள்ள முறைகள்

HTML இல் பட்டியல்களை உருவாக்குவது ஒரு பொதுவான பணியாகும், மேலும் இந்த நோக்கத்திற்காக வரிசைப்படுத்தப்படாத பட்டியல்கள் அடிக்கடி பயன்படுத்தப்படுகின்றன. இருப்பினும், இயல்புநிலை புல்லட் புள்ளிகள் சில நேரங்களில் கவனத்தை சிதறடிக்கும் அல்லது உங்கள் வலைப்பக்கத்தின் விரும்பிய அழகியலுக்கு பொருந்தாது.

அதிர்ஷ்டவசமாக, இந்த தோட்டாக்களை அகற்றி, சுத்தமான, புல்லட் இல்லாத பட்டியலை வைத்திருக்க முடியும். இந்தக் கட்டுரையில், எளிய HTML மற்றும் CSS நுட்பங்களைப் பயன்படுத்தி இதை அடைய பல்வேறு முறைகளை ஆராய்வோம்.

கட்டளை விளக்கம்
<style> உறுப்புகளின் தோற்றத்தைத் தனிப்பயனாக்க HTML ஆவணத்தில் CSS பாணிகளை வரையறுக்கிறது.
list-style-type வட்டு, வட்டம், சதுரம், எதுவுமில்லை, போன்ற பட்டியல் உருப்படி மார்க்கரின் வகையைக் குறிப்பிடுகிறது.
padding ஒரு தனிமத்தின் உள்ளடக்கத்திற்கும் அதன் எல்லைக்கும் இடையிலான இடைவெளியைக் கட்டுப்படுத்துகிறது.
margin உறுப்பு எல்லைக்கு வெளியே உள்ள இடத்தைக் கட்டுப்படுத்துகிறது, மற்ற உறுப்புகளிலிருந்து பிரிக்கிறது.
<script> வலைப்பக்கத்தில் மாறும் நடத்தையைச் சேர்ப்பதற்காக, பொதுவாக ஜாவாஸ்கிரிப்ட்டில் எழுதப்பட்ட கிளையன்ட் பக்க ஸ்கிரிப்டை வரையறுக்கிறது.
document.getElementById() HTML உறுப்பை அதன் ஐடி பண்புக்கூறின் அடிப்படையில் அணுகுவதற்கான ஜாவாஸ்கிரிப்ட் முறை.
style.listStyleType ஒரு உறுப்புக்கான பட்டியல் உருப்படி மார்க்கரின் வகையை அமைக்க JavaScript சொத்து.

வரிசைப்படுத்தப்படாத பட்டியல்களில் புல்லட் அகற்றுதலைப் புரிந்துகொள்வது

வழங்கப்பட்ட ஸ்கிரிப்டுகள் HTML இல் வரிசைப்படுத்தப்படாத பட்டியல்களில் இருந்து தோட்டாக்களை அகற்ற பல்வேறு முறைகளை வழங்குகின்றன. இதை அடைய முதல் ஸ்கிரிப்ட் CSS ஐப் பயன்படுத்துகிறது. எனப்படும் வகுப்பை வரையறுப்பதன் மூலம் no-bullets இல் style பிரிவு, தி list-style-type சொத்து அமைக்கப்பட்டுள்ளது none, தோட்டாக்களை திறம்பட நீக்குகிறது. கூடுதலாக, தி padding மற்றும் margin பட்டியல் உருப்படிகளைச் சுற்றி கூடுதல் இடம் இல்லை என்பதை உறுதிப்படுத்த பண்புகள் பூஜ்ஜியமாக அமைக்கப்பட்டுள்ளன. இந்த முறை நேரடியானது மற்றும் CSS ஐ HTML இலிருந்து தனித்தனியாக வைத்திருக்கிறது, குறியீட்டை சுத்தமாகவும் எளிதாகவும் நிர்வகிக்கிறது.

இரண்டாவது ஸ்கிரிப்ட் நேரடியாக இன்லைன் CSS ஐப் பயன்படுத்துவதன் மூலம் வேறுபட்ட அணுகுமுறையை எடுக்கிறது 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, இன்லைன் ஸ்டைல்கள் அல்லது ஜாவாஸ்கிரிப்டைப் பயன்படுத்தினாலும், இந்த முறைகள் வெவ்வேறு தேவைகளுக்கு ஏற்ப பல்வேறு தீர்வுகளை வழங்குகின்றன. இந்த நுட்பங்களில் தேர்ச்சி பெறுவதன் மூலம், உங்கள் இணையதளத்தில் பயனர் அனுபவத்தை மேம்படுத்தும் சுத்தமான, தொழில்முறை தோற்றம் கொண்ட பட்டியல்களை உருவாக்கலாம்.