CSS Lists

HTML பட்டியல்களை CSS உடன் பாணியிடுதல்

CSS பட்டியல் பாணியிடல்

HTML இல், இரண்டு முக்கிய வகையான பட்டியல்கள் உள்ளன:

ஒழுங்கற்ற பட்டியல்:
  • காபி
  • தேநீர்
  • கோகோ கோலா

பட்டியல் உருப்படிகள் புல்லட் மூலம் குறிக்கப்படுகின்றன

ஒழுங்கான பட்டியல்:
  1. காபி
  2. தேநீர்
  3. கோகோ கோலா

பட்டியல் உருப்படிகள் எண்கள் அல்லது எழுத்துக்கள் மூலம் குறிக்கப்படுகின்றன

📋 CSS பட்டியல் பண்புகள்:

CSS க்கு HTML பட்டியல்களை பாணியிட பின்வரும் பண்புகள் உள்ளன:
list-style-type - பட்டியல்-உருப்படி மார்க்கர் வகையைக் குறிப்பிடுகிறது
list-style-image - பட்டியல்-உருப்படி மார்க்கராக ஒரு படத்தைக் குறிப்பிடுகிறது
list-style-position - பட்டியல்-உருப்படி மார்க்கர்களின் நிலையைக் குறிப்பிடுகிறது
list-style - மேலே உள்ள பண்புகளுக்கான ஒரு குறுக்குப் பண்பு

CSS பட்டியல்-உருப்படி மார்க்கர் வகை

CSS list-style-type பண்பு ஒரு பட்டியலில் உள்ள பட்டியல்-உருப்படி மார்க்கர் வகையைக் குறிப்பிடுகிறது.

எடுத்துக்காட்டு

/* ஒழுங்கற்ற பட்டியல்கள் */
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

/* ஒழுங்கான பட்டியல்கள் */
ol.d {list-style-type: upper-roman;}
ol.e {list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}
ஒழுங்கற்ற பட்டியல் வகைகள்:
  • வட்டம் (circle)
  • வட்டு (disc) - இயல்புநிலை
  • சதுரம் (square)
ஒழுங்கான பட்டியல் வகைகள்:
  1. பெரிய ரோமன் (upper-roman)
  1. சிறிய ரோமன் (lower-roman)
  1. சிறிய ஆல்பா (lower-alpha)
  1. தசம (decimal) - இயல்புநிலை

💡 குறிப்பு:

மதிப்புகளில் சில ஒழுங்கற்ற பட்டியல்களுக்கும், சில ஒழுங்கான பட்டியல்களுக்கும் உள்ளன. சரியான பட்டியல் வகையுடன் சரியான மார்க்கர் வகையைப் பயன்படுத்துவதை உறுதிப்படுத்தவும்.

பட்டியல்-உருப்படி மார்க்கரை படத்துடன் மாற்றுதல்

CSS list-style-image பண்பு பட்டியல்-உருப்படி மார்க்கரை ஒரு படத்துடன் மாற்ற பயன்படுகிறது.

எடுத்துக்காட்டு

ul {
  list-style-image: url('sqpurple.gif');
  list-style-type: square; /* பின்வாங்கு */
}

⚠️ முக்கியமான குறிப்பு:

கூடுதலாக எப்போதும் ஒரு list-style-type பண்பையும் குறிப்பிடவும். சில காரணங்களால் படம் கிடைக்கவில்லை என்றால் இந்த பண்பு பயன்படுத்தப்படும்.

பட்டியல்-உருப்படி மார்க்கர்களின் நிலையைக் குறிப்பிடுதல்

CSS list-style-position பண்பு பட்டியல்-உருப்படி மார்க்கர்களின் (புல்லட் புள்ளிகள்) நிலையைக் குறிப்பிடுகிறது.

list-style-position: outside (இயல்புநிலை)

புல்லட் புள்ளிகள் பட்டியல் உருப்படிக்கு வெளியே இருக்கும். ஒரு பட்டியல் உருப்படியின் ஒவ்வொரு வரியின் தொடக்கமும் செங்குத்தாக சீரமைக்கப்படும்:

  • காபி - இது ஒரு நீண்ட பட்டியல் உருப்படியின் எடுத்துக்காட்டாகும், இது பல வரிகளைக் கொண்டுள்ளது மற்றும் புல்லட் எவ்வாறு செயல்படுகிறது என்பதைக் காட்டுகிறது.
  • தேநீர்
  • கோகோ கோலா
list-style-position: inside

புல்லட் புள்ளிகள் பட்டியல் உருப்படிக்குள் இருக்கும். இது பட்டியல் உருப்படியின் ஒரு பகுதியாக இருப்பதால், இது உரையின் ஒரு பகுதியாக இருக்கும் மற்றும் உரையை தொடக்கத்தில் தள்ளும்:

  • காபி - இது ஒரு நீண்ட பட்டியல் உருப்படியின் எடுத்துக்காட்டாகும், இது பல வரிகளைக் கொண்டுள்ளது மற்றும் புல்லட் எவ்வாறு செயல்படுகிறது என்பதைக் காட்டுகிறது.
  • தேநீர்
  • கோகோ கோலா

எடுத்துக்காட்டு

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

பட்டியல்-உருப்படி மார்க்கர்களை அகற்றுதல்

பட்டியல்-உருப்படி மார்க்கர்களை அகற்ற list-style-type:none; பண்பு பயன்படுத்தப்படுகிறது.

📝 குறிப்பு:

ஒரு பட்டியலுக்கு இயல்புநிலை margin மற்றும் padding உள்ளது. இதை அகற்ற, <ul> அல்லது <ol> உறுப்புக்கு margin:0 மற்றும் padding:0 சேர்க்கவும்.

எடுத்துக்காட்டு

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
மார்க்கர்கள் அகற்றப்பட்ட பட்டியல்:
  • காபி
  • தேநீர்
  • கோகோ கோலா

இந்த பாணி வழிசெலுத்தல் மெனுக்களுக்கு பொதுவாகப் பயன்படுத்தப்படுகிறது.

CSS list-style குறுக்குப் பண்பு

list-style பண்பு ஒரு குறுக்குப் பண்பாகும். ஒரு அறிவிப்பில் அனைத்து பட்டியல் பண்புகளையும் அமைக்க இது பயன்படுகிறது.

குறுக்குப் பண்பைப் பயன்படுத்தும் போது, பண்பு மதிப்புகளின் வரிசை:

  1. list-style-type
  2. list-style-position
  3. list-style-image

மேலே உள்ள பண்பு மதிப்புகளில் ஒன்று காணவில்லை என்றால், காணாமல் போன பண்புக்கான இயல்புநிலை மதிப்பு செருகப்படும்.

எடுத்துக்காட்டு

ul {
  list-style: square inside url("sqpurple.gif");
}

வண்ணங்களுடன் பட்டியல்களை பாணியிடுதல்

பட்டியல்களை சிறிது சுவாரஸ்யமாகக் காண்பிக்க வண்ணங்கள், margins மற்றும் padding உடன் பாணியிடலாம்.

<ol> அல்லது <ul> குறிச்சொல்லில் சேர்க்கப்பட்ட எதுவும் முழு பட்டியலையும் பாதிக்கும், அதே சமயம் <li> குறிச்சொல்லில் சேர்க்கப்பட்ட பண்புகள் தனிப்பட்ட பட்டியல் உருப்படிகளை பாதிக்கும்:

எடுத்துக்காட்டு

ol {
  background: salmon;
  padding: 20px;
}

ol li {
  background: mistyrose;
  color: darkred;
  padding: 10px;
  margin-left: 20px;
}

ul {
  background: powderblue;
  padding: 20px;
}

ul li {
  background: mistyrose;
  color: darkblue;
  margin: 5px;
}
ஒழுங்கான பட்டியல்:
  1. காபி
  2. தேநீர்
  3. கோகோ கோலா
ஒழுங்கற்ற பட்டியல்:
  • காபி
  • தேநீர்
  • கோகோ கோலா

CSS பட்டியல்கள் பயிற்சி

பட்டியல்கள் பற்றிய உங்கள் அறிவை இந்த பயிற்சியுடன் சோதிக்கவும்.

❓ ஒரு பட்டியலில் இருந்து மார்க்கர்களை (புல்லட்கள் அல்லது எண்கள்) அகற்ற எந்த CSS பண்பு பயன்படுத்தப்படுகிறது?

list-style-position
✗ தவறு! list-style-position பண்பு பட்டியல் மார்க்கர்களின் நிலையைக் கட்டுப்படுத்தப் பயன்படுகிறது (inside அல்லது outside), அவற்றை அகற்ற அல்ல.
list-style-image
✗ தவறு! list-style-image பண்பு பட்டியல் மார்க்கர்களை படங்களுடன் மாற்றப் பயன்படுகிறது, அவற்றை அகற்ற அல்ல.
list-style-type
✓ சரி! list-style-type பண்பு none மதிப்புடன் பயன்படுத்தப்படும் போது பட்டியல் மார்க்கர்களை (புல்லட்கள் அல்லது எண்கள்) அகற்றுகிறது. இது வழிசெலுத்தல் மெனுக்கள் மற்றும் தனிப்பயனாக்கப்பட்ட பட்டியல் வடிவமைப்புகளுக்கு பொதுவாகப் பயன்படுத்தப்படுகிறது.
list-style
✗ தவறு! list-style என்பது ஒரு குறுக்குப் பண்பாகும், ஆனால் மார்க்கர்களை அகற்ற, நீங்கள் list-style-type: none ஐப் பயன்படுத்த வேண்டும். list-style குறுக்குப் பண்பு list-style-type, list-style-position மற்றும் list-style-image ஆகியவற்றை இணைக்கிறது.

வழிசெலுத்தல் பயன்பாடுகள்

பட்டியல்கள் வலைத்தள வழிசெலுத்தல் மெனுக்களின் அடித்தளத்தை உருவாக்குகின்றன. CSS எளிய பட்டியல் கட்டமைப்புகளை கிடைமட்ட/செங்குத்து மெனுக்களாக, டிராப்டவுன்களாக மற்றும் மெகா-மெனுக்களாக மாற்றுகிறது.

கிடைமட்ட மெனுக்கள்: display: inline-block அல்லது flexbox ஐப் பயன்படுத்தி பட்டியல் உருப்படிகளை கிடைமட்டமாக வைக்கவும்
செங்குத்து மெனுக்கள்: இயல்புநிலை பட்டியல் பாணிகளை பராமரிக்கவும் அல்லது மேம்படுத்தவும்
டிராப்டவுன்கள்: பட்டியல் உருப்படிகளுக்குள் கூடுதல் பட்டியல்களை உருவாக்கவும் மற்றும் hover நிலைகளுடன் காண்பிக்கவும்
மெகா மெனுக்கள்: பல நெடுவரிசைகள் மற்றும் சிக்கலான வடிவமைப்புகளுக்கு பட்டியல் கட்டமைப்புகளைப் பயன்படுத்தவும்

🎯 அணுகல் முக்கியத்துவம்:

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