CSS के साथ लिस्ट्स स्टाइल करना

CSS से लिस्ट स्टाइलिंग

लिस्ट्स ऑर्डर्ड (ol) और अनऑर्डर्ड (ul) होती हैं। CSS से आप लिस्ट आइटम मार्कर्स का प्रकार सेट कर सकते हैं या मार्कर्स के लिए इमेज उपयोग कर सकते हैं। साथ ही लिस्ट-आइटम मार्कर्स की पोजिशन भी सेट कर सकते हैं।

1. list-style-type

list-style-type लिस्ट-आइटम मार्कर का प्रकार सेट करता है।

सामान्य मान:

• unordered (ul): disc (डिफ़ॉल्ट), circle, square, none
• ordered (ol): decimal (डिफ़ॉल्ट), lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, georgian, armenian, आदि

उदाहरण 1: अनऑर्डर्ड लिस्ट - square

<!DOCTYPE html>
<html>
<head>
<style>
ul { list-style-type: square; }
</style>
</head>
<body>
<h2>टीमें</h2>
<ul>
  <li>भारत</li> <li>ऑस्ट्रेलिया</li> <li>इंग्लैंड</li>
  <li>वेस्ट इंडीज</li> <li>दक्षिण अफ्रीका</li> <li>श्रीलंका</li>
</ul>
</body>
</html>

उदाहरण 2: ऑर्डर्ड लिस्ट - upper-roman

<!DOCTYPE html>
<html>
<head>
<style>
ol { list-style-type: upper-roman; }
</style>
</head>
<body>
<h2>टीमें</h2>
<ol>
  <li>भारत</li> <li>ऑस्ट्रेलिया</li> <li>इंग्लैंड</li>
  <li>वेस्ट इंडीज</li> <li>दक्षिण अफ्रीका</li> <li>श्रीलंका</li>
</ol>
</body>
</html>

2. list-style-image

list-style-image प्रॉपर्टी इमेज को लिस्ट-आइटम मार्कर के रूप में सेट करती है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 { list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); }
ol.demo2 { list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); }
</style>
</head>
<body>
<h2>टीमें</h2>
<ul class="demo1">
  <li>भारत - वर्ल्डकप के लिए क्वालिफाइड</li>
  <li>ऑस्ट्रेलिया - वर्ल्डकप के लिए क्वालिफाइड</li>
  <li>इंग्लैंड - वर्ल्डकप के लिए क्वालिफाइड</li>
</ul>
<h2>खिलाड़ी</h2>
<ol class="demo2">
  <li>विराट कोहली</li> <li>डेविड वार्नर</li> <li>स्टीव स्मिथ</li>
</ol>
</body>
</html>

3. list-style-position

list-style-position लिस्ट-आइटम मार्कर्स की पोजिशन सेट करता है।

मान:

• outside: मार्कर कंटेंट बॉक्स के बाहर (डिफ़ॉल्ट)
• inside: मार्कर कंटेंट बॉक्स के अंदर, टेक्स्ट के साथ फ्लो करता है

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 { list-style-position: outside; }
ul.demo2 { list-style-position: inside; }
</style>
</head>
<body>
<h1>टीमें</h1>
<h2>ODI टीमें</h2>
<ul class="demo1">
  <li>भारत</li> <li>ऑस्ट्रेलिया</li> <li>इंग्लैंड</li>
  <li>वेस्ट इंडीज</li> <li>दक्षिण अफ्रीका</li> <li>श्रीलंका</li>
</ul>
<h2>टेस्ट टीमें</h2>
<ul class="demo2">
  <li>भारत</li> <li>ऑस्ट्रेलिया</li> <li>इंग्लैंड</li>
  <li>वेस्ट इंडीज</li> <li>दक्षिण अफ्रीका</li> <li>श्रीलंका</li>
</ul>
</body>
</html>

शॉर्टहैंड: list-style

ul {
  list-style: square inside url('marker.png');
  /* type position image */
}

मॉडर्न CSS (::marker स्यूडो-एलिमेंट):

li::marker {
  color: red;
  font-size: 1.2em;
  content: "→ ";  /* कस्टम मार्कर */
}